laoma/shoot-miniprograms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：好友约战新头部完成

Browse Source
This commit is contained in:
chenlimao
2026-05-06 18:10:49 +08:00
parent 1beb1009b3
commit e037c02888
6 changed files with 256 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/pages/friend-battle.vue
View File

@@ -2,7 +2,7 @@
import { ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import Guide from "@/components/Guide.vue";
import GuideTwo from "@/components/GuideTwo.vue";
import SButton from "@/components/SButton.vue";
import SModal from "@/components/SModal.vue";
import Signin from "@/components/Signin.vue";
@@ -72,6 +72,13 @@ const onSignin = () => {
if (roomID.value && user.value.id) enterRoom(roomID.value);
showSignin.value = false;
};
/** 跳转到我的战绩页面 */
const goMyRecord = () => {
uni.navigateTo({
url: '/pages/my-growth',
});
};
onShow(async () => {
if (user.value.id) {
const result = await getBattleDataAPI();
@@ -90,16 +97,15 @@ onLoad(async (options) => {
<template>
<Container title="好友约战" :showBackToGame="true">
<view :style="{ width: '100%', height: '100%' }">
<Guide>
<view class="guide-tips">
<text>约上朋友开几局，欢乐多，不寂寞</text>
<text>一起练升级更快，早日加入全国排位赛！</text>
</view>
</Guide>
<GuideTwo>
<text :style="{color: 'rgba(255,217,71,0.8)'}">约上朋友开几局，欢乐多，不寂寞</text>
<text>一起练升级更快，早日加入全国排位赛！</text>
</GuideTwo>
<view class="my-data">
<view>
<Avatar :rankLvl="user.rankLvl" :src="user.avatar" :size="30" />
<text class="truncate">{{ user.nickName }}</text>
<text class="my-record-btn" @click="goMyRecord">我的战绩</text>
</view>
<view>
<view>
@@ -119,16 +125,9 @@ onLoad(async (options) => {
<view>
<view class="stars">
<block v-for="i in 5" :key="i">
<image
v-if="data.totalWinningRate >= i * 0.2"
src="../static/star-full.png"
mode="widthFix"
/>
<image
v-else-if="data.totalWinningRate >= (i - 1) * 0.2 + 0.1"
src="../static/star-half.png"
mode="widthFix"
/>
<image v-if="data.totalWinningRate >= i * 0.2" src="../static/star-full.png" mode="widthFix" />
<image v-else-if="data.totalWinningRate >= (i - 1) * 0.2 + 0.1" src="../static/star-half.png"
mode="widthFix" />
<image v-else src="../static/star-empty.png" mode="widthFix" />
</block>
</view>
@@ -139,19 +138,12 @@ onLoad(async (options) => {
<view class="founded-room">
<image src="../static/founded-room.png" mode="widthFix" />
<view>
<input
placeholder="输入房间号"
v-model="roomNumber"
placeholder-style="color: #ccc"
/>
<input placeholder="输入房间号" v-model="roomNumber" placeholder-style="color: #ccc" />
<view @click="enterRoom(roomNumber)">进入房间</view>
</view>
</view>
<view class="create-room">
<image
src="https://static.shelingxingqiu.com/attachment/2025-07-15/dbcejys872iyun92h6.png"
mode="widthFix"
/>
<image src="https://static.shelingxingqiu.com/attachment/2025-07-15/dbcejys872iyun92h6.png" mode="widthFix" />
<image src="../static/room-notfound-title.png" mode="widthFix" />
<view>
<image :src="user.avatar" mode="widthFix" />
@@ -166,11 +158,7 @@ onLoad(async (options) => {
</SButton>
</view>
</view>
<SModal
:show="showModal"
:onClose="() => (showModal = false)"
height="716rpx"
>
<SModal :show="showModal" :onClose="() => (showModal = false)" height="716rpx">
<view v-if="warnning" class="warnning">
{{ warnning }}
</view>
@@ -192,10 +180,12 @@ onLoad(async (options) => {
border-radius: 10px;
padding: 15px;
}
.founded-room > image {
.founded-room>image {
width: 16vw;
}
.founded-room > view {
.founded-room>view {
display: flex;
justify-content: space-between;
align-items: center;
@@ -205,14 +195,16 @@ onLoad(async (options) => {
width: 100%;
overflow: hidden;
}
.founded-room > view > input {
.founded-room>view>input {
width: 70%;
text-align: center;
font-size: 14px;
height: 40px;
color: #000;
}
.founded-room > view > view {
.founded-room>view>view {
background-color: #fed847;
width: 30%;
line-height: 40px;
@@ -223,38 +215,45 @@ onLoad(async (options) => {
color: #000;
text-align: center;
}
.create-room {
position: relative;
margin: 15px;
height: 50vw;
}
.create-room > image:first-of-type {
.create-room>image:first-of-type {
position: absolute;
width: 100%;
}
.create-room > image:nth-of-type(2) {
.create-room>image:nth-of-type(2) {
padding: 15px;
width: 25vw;
position: relative;
}
.create-room > view:nth-child(3) {
.create-room>view:nth-child(3) {
margin: 12vw auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.create-room > view > image:first-child {
.create-room>view>image:first-child {
width: 19vw;
transform: translateY(-60%);
border-radius: 50%;
position: relative;
}
.create-room > view > image:nth-child(2) {
.create-room>view>image:nth-child(2) {
width: 37vw;
position: relative;
}
.create-room > view > view:nth-child(3) {
.create-room>view>view:nth-child(3) {
position: relative;
width: 19vw;
height: 19vw;
@@ -265,10 +264,12 @@ onLoad(async (options) => {
align-items: center;
transform: translateY(60%);
}
.create-room > view > view:nth-child(3) > image {
.create-room>view>view:nth-child(3)>image {
width: 20px;
margin-right: 2px;
}
.warnning {
width: 100%;
height: 100%;
@@ -277,6 +278,7 @@ onLoad(async (options) => {
align-items: center;
color: #fff9;
}
.my-data {
width: calc(100% - 30px);
margin: 15px;
@@ -286,12 +288,14 @@ onLoad(async (options) => {
overflow: hidden;
background-color: #54431d33;
}
.my-data > view {
.my-data>view {
width: 100%;
display: flex;
color: #fff9;
}
.my-data > view:first-child {
.my-data>view:first-child {
width: calc(100% - 30px);
align-items: flex-end;
padding-bottom: 15px;
@@ -299,16 +303,29 @@ onLoad(async (options) => {
margin: 15px;
margin-bottom: 0;
}
.my-data > view:first-child > text {
.my-data>view:first-child>.my-record-btn {
font-weight: 400;
font-size: 24rpx;
color: #76D4FF;
text-align: center;
font-style: normal;
width: auto;
margin-left: auto;
}
.my-data>view:first-child>text {
color: #fff;
font-size: 17px;
margin-left: 10px;
width: 120px;
}
.my-data > view:last-child {
.my-data>view:last-child {
margin-bottom: 15px;
}
.my-data > view:last-child > view {
.my-data>view:last-child>view {
width: 33%;
margin-top: 15px;
display: flex;
@@ -316,25 +333,30 @@ onLoad(async (options) => {
align-items: center;
font-size: 12px;
}
.my-data > view:last-child > view > view {
.my-data>view:last-child>view>view {
margin-bottom: 5px;
}
.my-data > view:last-child > view > view > text:first-child {
.my-data>view:last-child>view>view>text:first-child {
color: #fff;
font-size: 20px;
margin-right: 5px;
transform: translateY(4px);
}
.my-data > view:last-child > view:nth-child(2) {
.my-data>view:last-child>view:nth-child(2) {
border-left: 1px solid #48494e;
border-right: 1px solid #48494e;
}
.my-data > view:last-child > view > view {
.my-data>view:last-child>view>view {
display: flex;
align-items: flex-end;
height: 20px;
}
.stars > image {
.stars>image {
width: 4vw;
height: 4vw;
margin: 0 1px;