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

271
src/pages/battle-room.vue
View File

@@ -3,7 +3,7 @@ import { ref, onMounted, computed, onBeforeUnmount } from "vue";
import { onShow, onLoad, onShareAppMessage } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import PlayerSeats from "@/components/PlayerSeats.vue";
import Guide from "@/components/Guide.vue";
import GuideTwo from "@/components/GuideTwo.vue";
import SButton from "@/components/SButton.vue";
import Avatar from "@/components/Avatar.vue";
import {
@@ -238,7 +238,7 @@ onBeforeUnmount(() => {
<template>
<Container :title="`好友约战 - ${roomNumber}`">
<view class="standby-phase">
<Guide>
<GuideTwo>
<view class="battle-guide">
<view class="guide-tips">
<text>弓箭手们，人都到齐了吗?</text>
@@ -247,48 +247,29 @@ onBeforeUnmount(() => {
}}</text>
<text v-if="room.battleType === 2">大乱斗即将开始! </text>
</view>
<button hover-class="none" open-type="share">邀请</button>
<!-- <button hover-class="none" open-type="share">邀请</button> -->
</view>
</Guide>
</GuideTwo>
<view v-if="room.battleType === 1 && room.count === 2" class="team-mode">
<image
src="https://static.shelingxingqiu.com/attachment/2025-08-05/dbua9nuf5fyeph7cxi.png"
mode="widthFix"
/>
<image src="https://static.shelingxingqiu.com/attachment/2025-08-05/dbua9nuf5fyeph7cxi.png" mode="widthFix" />
<view>
<view
v-if="owner.id"
class="player"
:style="{ transform: 'translateY(-60px)' }"
>
<view v-if="owner.id" class="player" :style="{ transform: 'translateY(-60px)' }">
<Avatar :src="owner.avatar" :size="60" />
<text>管理员</text>
<text>{{ owner.name }}</text>
</view>
<view
v-else
class="no-player"
:style="{ transform: 'translateY(-60px)' }"
>
<view v-else class="no-player" :style="{ transform: 'translateY(-60px)' }">
<image src="../static/question-mark.png" mode="widthFix" />
</view>
<image src="../static/versus.png" mode="widthFix" />
<view
v-if="opponent.id"
class="player"
:style="{ transform: 'translateY(60px)' }"
>
<view v-if="opponent.id" class="player" :style="{ transform: 'translateY(60px)' }">
<Avatar :src="opponent.avatar" :size="60" />
<text class="ready" :style="{ opacity: opponent.ready ? 1 : 0 }">
已准备
</text>
<text>{{ opponent.name }}</text>
<button
v-if="owner.id === user.id"
hover-class="none"
class="remove-player"
@click="() => removePlayer(opponent)"
>
<button v-if="owner.id === user.id" hover-class="none" class="remove-player"
@click="() => removePlayer(opponent)">
<image src="../static/close-white.png" mode="widthFix" />
</button>
</view>
@@ -299,31 +280,15 @@ onBeforeUnmount(() => {
</view>
<block v-if="room.battleType === 1 && room.count >= 4">
<view class="all-players">
<image
src="https://static.shelingxingqiu.com/attachment/2025-08-13/dc0x1p59iab6cvbhqc.png"
mode="widthFix"
/>
<image
v-if="room.count === 4"
src="../static/title-2v2.png"
mode="widthFix"
/>
<image
v-if="room.count === 6"
src="../static/title-3v3.png"
mode="widthFix"
/>
<image src="https://static.shelingxingqiu.com/attachment/2025-08-13/dc0x1p59iab6cvbhqc.png" mode="widthFix" />
<image v-if="room.count === 4" src="../static/title-2v2.png" mode="widthFix" />
<image v-if="room.count === 6" src="../static/title-3v3.png" mode="widthFix" />
<view>
<view v-for="(item, index) in players" :key="index">
<Avatar v-if="item.id" :src="item.avatar" :size="36" />
<text v-if="owner.id === item.id">管理员</text>
<button
v-if="owner.id !== item.id && item.id"
hover-class="none"
class="remove-player"
@click="() => removePlayer(item)"
:style="{ top: '-10rpx', right: '-10rpx' }"
>
<button v-if="owner.id !== item.id && item.id" hover-class="none" class="remove-player"
@click="() => removePlayer(item)" :style="{ top: '-10rpx', right: '-10rpx' }">
<image src="../static/close-white.png" mode="widthFix" />
</button>
</view>
@@ -331,16 +296,8 @@ onBeforeUnmount(() => {
</view>
<view class="choose-side">
<view>
<view
v-for="(item, index) in redTeam"
:key="index"
class="choose-side-left-item"
>
<button
hover-class="none"
v-if="item.id === user.id"
@click="chooseTeam(0)"
>
<view v-for="(item, index) in redTeam" :key="index" class="choose-side-left-item">
<button hover-class="none" v-if="item.id === user.id" @click="chooseTeam(0)">
<image src="../static/close-grey.png" mode="widthFix" />
</button>
<text class="truncate">{{ item.name || "我要加入" }}</text>
@@ -354,11 +311,7 @@ onBeforeUnmount(() => {
</view>
</view>
<view>
<view
v-for="(item, index) in blueTeam"
:key="index"
class="choose-side-right-item"
>
<view v-for="(item, index) in blueTeam" :key="index" class="choose-side-right-item">
<view v-if="item.id">
<Avatar :src="item.avatar" :size="36" />
<text :style="{ opacity: !!item.state ? 1 : 0 }">已准备</text>
@@ -367,31 +320,23 @@ onBeforeUnmount(() => {
<image src="../static/add-grey.png" mode="widthFix" />
</button>
<text class="truncate">{{ item.name || "我要加入" }}</text>
<button
hover-class="none"
v-if="item.id === user.id"
@click="chooseTeam(0)"
>
<button hover-class="none" v-if="item.id === user.id" @click="chooseTeam(0)">
<image src="../static/close-grey.png" mode="widthFix" />
</button>
</view>
</view>
</view>
</block>
<PlayerSeats
v-if="room.battleType === 2"
:total="room.count || 10"
:players="players"
:removePlayer="removePlayer"
/>
<PlayerSeats v-if="room.battleType === 2" :total="room.count || 10" :players="players"
:removePlayer="removePlayer" />
<view>
<SButton :disabled="!canClick" :onClick="getReady">
{{
allReady.value
? "即将进入对局..."
: owner.id === user.id
? "开始对局"
: "我准备好了"
? "开始对局"
: "我准备好了"
}}
</SButton>
<text class="tips">所有人准备好后由房主点击开始</text>
@@ -406,6 +351,7 @@ onBeforeUnmount(() => {
height: calc(100% - 40px);
overflow-x: hidden;
}
.tips {
color: #fff9;
width: 100%;
@@ -414,6 +360,7 @@ onBeforeUnmount(() => {
margin-top: 10px;
font-size: 12px;
}
.player-unknow {
width: 40px;
height: 40px;
@@ -425,25 +372,30 @@ onBeforeUnmount(() => {
justify-content: center;
background-color: #69686866;
}
.player-unknow > image {
.player-unknow>image {
width: 40%;
}
.team-mode {
width: calc(100vw - 30px);
height: 125vw;
margin: 15px;
}
.team-mode > image:first-child {
.team-mode>image:first-child {
position: absolute;
width: calc(100vw - 30px);
z-index: -1;
}
.team-mode > view {
.team-mode>view {
display: flex;
justify-content: center;
align-items: center;
height: 95%;
}
.player {
width: 70px;
display: flex;
@@ -455,14 +407,16 @@ onBeforeUnmount(() => {
font-size: 14px;
position: relative;
}
.player > image {
.player>image {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #ccc;
margin-bottom: 5px;
}
.player > text:nth-child(2) {
.player>text:nth-child(2) {
color: #000;
background-color: #fed847;
font-size: 16rpx;
@@ -472,21 +426,25 @@ onBeforeUnmount(() => {
margin-top: -16rpx;
position: relative;
}
.player > text:nth-child(3) {
.player>text:nth-child(3) {
margin-top: 6rpx;
}
.player > text {
.player>text {
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.player .ready {
background-color: #2c261fb3 !important;
border: 1rpx solid #a3793f66 !important;
color: #fed847 !important;
}
.remove-player {
width: 40rpx;
height: 40rpx;
@@ -499,13 +457,16 @@ onBeforeUnmount(() => {
top: 0;
right: 0;
}
.remove-player > image {
.remove-player>image {
width: 90%;
height: 90%;
}
.team-mode > view > image:nth-child(2) {
.team-mode>view>image:nth-child(2) {
width: 120px;
}
.no-player {
width: 70px;
height: 70px;
@@ -516,10 +477,12 @@ onBeforeUnmount(() => {
align-items: center;
transform: translateY(60px);
}
.no-player > image {
.no-player>image {
width: 20px;
margin-right: 2px;
}
.btns {
height: 100%;
display: flex;
@@ -527,12 +490,14 @@ onBeforeUnmount(() => {
align-items: center;
justify-content: center;
}
.battle-guide {
display: flex;
align-items: center;
justify-content: space-between;
}
.battle-guide > button:last-child {
.battle-guide>button:last-child {
color: #fed847;
border: 1px solid #fed847;
margin-right: 10px;
@@ -541,6 +506,7 @@ onBeforeUnmount(() => {
position: relative;
font-size: 28rpx;
}
.all-players {
position: relative;
display: flex;
@@ -548,68 +514,73 @@ onBeforeUnmount(() => {
align-items: center;
height: 83vw;
}
.all-players > image:first-child {
.all-players>image:first-child {
position: absolute;
width: 100%;
}
.all-players > image:nth-child(2) {
.all-players>image:nth-child(2) {
width: 25vw;
position: relative;
}
.all-players > view {
.all-players>view {
position: relative;
width: 42vw;
height: 42vw;
margin-top: 7vw;
}
.all-players > view > view {
.all-players>view>view {
position: absolute;
left: 50%;
top: 50%;
}
/* 4个头像 - 正方形排列 */
.all-players > view > view:nth-child(1):nth-last-child(4) {
transform: translate(-50%, -50%) rotate(-30deg) translateY(-21.5vw)
rotate(30deg);
.all-players>view>view:nth-child(1):nth-last-child(4) {
transform: translate(-50%, -50%) rotate(-30deg) translateY(-21.5vw) rotate(30deg);
}
.all-players > view > view:nth-child(2):nth-last-child(3) {
transform: translate(-50%, -50%) rotate(-120deg) translateY(-21.5vw)
rotate(120deg);
.all-players>view>view:nth-child(2):nth-last-child(3) {
transform: translate(-50%, -50%) rotate(-120deg) translateY(-21.5vw) rotate(120deg);
}
.all-players > view > view:nth-child(3):nth-last-child(2) {
transform: translate(-50%, -50%) rotate(-210deg) translateY(-21.5vw)
rotate(210deg);
.all-players>view>view:nth-child(3):nth-last-child(2) {
transform: translate(-50%, -50%) rotate(-210deg) translateY(-21.5vw) rotate(210deg);
}
.all-players > view > view:nth-child(4):nth-last-child(1) {
transform: translate(-50%, -50%) rotate(-300deg) translateY(-21.5vw)
rotate(300deg);
.all-players>view>view:nth-child(4):nth-last-child(1) {
transform: translate(-50%, -50%) rotate(-300deg) translateY(-21.5vw) rotate(300deg);
}
/* 6个头像 - 六边形排列 */
.all-players > view > view:nth-child(1):nth-last-child(6) {
transform: translate(-50%, -50%) rotate(-30deg) translateY(-21vw)
rotate(30deg);
.all-players>view>view:nth-child(1):nth-last-child(6) {
transform: translate(-50%, -50%) rotate(-30deg) translateY(-21vw) rotate(30deg);
}
.all-players > view > view:nth-child(2):nth-last-child(5) {
transform: translate(-50%, -50%) rotate(-90deg) translateY(-21vw)
rotate(90deg);
.all-players>view>view:nth-child(2):nth-last-child(5) {
transform: translate(-50%, -50%) rotate(-90deg) translateY(-21vw) rotate(90deg);
}
.all-players > view > view:nth-child(3):nth-last-child(4) {
transform: translate(-50%, -50%) rotate(-150deg) translateY(-21vw)
rotate(150deg);
.all-players>view>view:nth-child(3):nth-last-child(4) {
transform: translate(-50%, -50%) rotate(-150deg) translateY(-21vw) rotate(150deg);
}
.all-players > view > view:nth-child(4):nth-last-child(3) {
transform: translate(-50%, -50%) rotate(-210deg) translateY(-21vw)
rotate(210deg);
.all-players>view>view:nth-child(4):nth-last-child(3) {
transform: translate(-50%, -50%) rotate(-210deg) translateY(-21vw) rotate(210deg);
}
.all-players > view > view:nth-child(5):nth-last-child(2) {
transform: translate(-50%, -50%) rotate(-270deg) translateY(-21vw)
rotate(270deg);
.all-players>view>view:nth-child(5):nth-last-child(2) {
transform: translate(-50%, -50%) rotate(-270deg) translateY(-21vw) rotate(270deg);
}
.all-players > view > view:nth-child(6):nth-last-child(1) {
transform: translate(-50%, -50%) rotate(-330deg) translateY(-21vw)
rotate(330deg);
.all-players>view>view:nth-child(6):nth-last-child(1) {
transform: translate(-50%, -50%) rotate(-330deg) translateY(-21vw) rotate(330deg);
}
.all-players > view > view > text {
.all-players>view>view>text {
position: absolute;
background-color: #fed847;
font-size: 8px;
@@ -621,18 +592,23 @@ onBeforeUnmount(() => {
text-align: center;
color: #333;
}
.choose-side {
display: flex;
}
.choose-side > view {
.choose-side>view {
width: 50%;
}
.choose-side > view:first-child > view {
.choose-side>view:first-child>view {
background: linear-gradient(270deg, #6a1212 0%, rgba(74, 0, 0, 0) 100%);
}
.choose-side > view:last-child > view {
.choose-side>view:last-child>view {
background: linear-gradient(270deg, rgba(13, 0, 74, 0) 0%, #172a86 100%);
}
.choose-side-left-item,
.choose-side-right-item {
display: flex;
@@ -644,33 +620,39 @@ onBeforeUnmount(() => {
margin: 10px 5px;
position: relative;
}
.choose-side-left-item {
justify-content: flex-end;
}
.choose-side-left-item > text,
.choose-side-right-item > text {
.choose-side-left-item>text,
.choose-side-right-item>text {
margin: 10px;
max-width: 100px;
font-size: 14px;
}
.choose-side-left-item > button:first-child,
.choose-side-right-item > button:last-child {
.choose-side-left-item>button:first-child,
.choose-side-right-item>button:last-child {
position: absolute;
top: 0;
}
.choose-side-left-item > button:first-child > image,
.choose-side-right-item > button:last-child > image {
.choose-side-left-item>button:first-child>image,
.choose-side-right-item>button:last-child>image {
width: 28px;
}
.choose-side-left-item > button:first-child {
.choose-side-left-item>button:first-child {
left: 0;
}
.choose-side-right-item > button:last-child {
.choose-side-right-item>button:last-child {
right: 0;
}
.choose-side-left-item > button:last-child,
.choose-side-right-item > button:first-child {
.choose-side-left-item>button:last-child,
.choose-side-right-item>button:first-child {
background-color: #fff;
border-radius: 50%;
width: 38px;
@@ -680,18 +662,21 @@ onBeforeUnmount(() => {
align-items: center;
margin-bottom: 14rpx;
}
.choose-side-left-item > button:last-child > image,
.choose-side-right-item > button:first-child > image {
.choose-side-left-item>button:last-child>image,
.choose-side-right-item>button:first-child>image {
width: 18px;
}
.choose-side-left-item > view,
.choose-side-right-item > view {
.choose-side-left-item>view,
.choose-side-right-item>view {
display: flex;
flex-direction: column;
align-items: center;
}
.choose-side-left-item > view > text,
.choose-side-right-item > view > text {
.choose-side-left-item>view>text,
.choose-side-right-item>view>text {
font-size: 16rpx;
border-radius: 20rpx;
line-height: 26rpx;