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

update:房间新增vip特效

Browse Source
This commit is contained in:
zhangyi
2026-07-10 18:13:41 +08:00
parent 4b39107453
commit 1796d4aa40
5 changed files with 143 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/battle-room.vue
+98 -30
View File
@@ -31,6 +31,20 @@ const players = ref([]);
const blueTeam = ref([]);
const redTeam = ref([]);
const isMember = (player = {}) => player.vip === true || player.sVip === true;
const getMemberNicknameClass = (player = {}) => [
"member-nickname",
player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
player.sVip === true ? "member-nickname--svip" : "",
];
const normalizeRoomPlayer = (member = {}) => ({
...(member.userInfo || {}),
vip: member.vip ?? member.userInfo?.vip,
sVip: member.sVip ?? member.userInfo?.sVip,
});
/**
* 根据对战类型和房间人数动态生成页面标题
* battleType=1: 组队对战；count 2/4/6 分别对应 1v1/2v2/3v3
@@ -95,13 +109,16 @@ async function refreshRoomData() {
return false;
});
members.some((m) => {
if (m.userInfo.id === result.creator) {
const player = normalizeRoomPlayer(m);
if (player.id === result.creator) {
owner.value = {
id: m.userInfo.id,
name: m.userInfo.name,
avatar: m.userInfo.avatar,
rankLvl: m.userInfo.rankLvl,
ready: !!m.userInfo.state,
id: player.id,
name: player.name,
avatar: player.avatar,
rankLvl: player.rankLvl,
vip: player.vip,
sVip: player.sVip,
ready: !!player.state,
};
return true;
}
@@ -109,13 +126,16 @@ async function refreshRoomData() {
});
if (result.battleType === 1 && result.count === 2) {
result.members.forEach((m) => {
if (m.userInfo.id !== owner.value.id) {
const player = normalizeRoomPlayer(m);
if (player.id !== owner.value.id) {
opponent.value = {
id: m.userInfo.id,
name: m.userInfo.name,
avatar: m.userInfo.avatar,
rankLvl: m.userInfo.rankLvl,
ready: !!m.userInfo.state,
id: player.id,
name: player.name,
avatar: player.avatar,
rankLvl: player.rankLvl,
vip: player.vip,
sVip: player.sVip,
ready: !!player.state,
};
}
});
@@ -125,12 +145,12 @@ async function refreshRoomData() {
(m) => m.userInfo.id === result.creator
);
if (ownerIndex !== -1) {
players.value.push(result.members[ownerIndex].userInfo);
players.value.push(normalizeRoomPlayer(result.members[ownerIndex]));
} else {
players.value.push({});
}
result.members.forEach((m, index) => {
if (ownerIndex !== index) players.value.push(m.userInfo);
if (ownerIndex !== index) players.value.push(normalizeRoomPlayer(m));
});
} else {
players.value = new Array(result.count).fill({});
@@ -172,11 +192,12 @@ const refreshMembers = (members = []) => {
blueTeam.value = [];
redTeam.value = [];
members.forEach((m, index) => {
players.value[index] = { ...m.userInfo, groupType: m.groupType };
const player = { ...normalizeRoomPlayer(m), groupType: m.groupType };
players.value[index] = player;
if (m.groupType === 1) {
blueTeam.value.push({ ...m.userInfo, groupType: 1 });
blueTeam.value.push({ ...player, groupType: 1 });
} else if (m.groupType === 2) {
redTeam.value.push({ ...m.userInfo, groupType: 2 });
redTeam.value.push({ ...player, groupType: 2 });
}
});
for (let i = 0; i < room.value.count / 2; i++) {
@@ -395,7 +416,16 @@ onBeforeUnmount(() => {
<view v-if="owner.id" class="player" :style="{ transform: 'translateY(-60px)' }">
<Avatar :src="owner.avatar" :size="60" />
<text>管理员</text>
<text>{{ owner.name }}</text>
<view
v-if="isMember(owner)"
:class="['room-player-name', ...getMemberNicknameClass(owner)]"
>
<text class="member-nickname__text">{{ owner.name }}</text>
<text v-if="owner.sVip === true" class="member-nickname__shine">
{{ owner.name }}
</text>
</view>
<text v-else class="room-player-name">{{ owner.name }}</text>
</view>
<view v-else class="no-player" :style="{ transform: 'translateY(-60px)' }">
<image src="../static/question-mark.png" mode="widthFix" />
@@ -406,7 +436,16 @@ onBeforeUnmount(() => {
<text class="ready" :style="{ opacity: opponent.ready ? 1 : 0 }">
已准备
</text>
<text>{{ opponent.name }}</text>
<view
v-if="isMember(opponent)"
:class="['room-player-name', ...getMemberNicknameClass(opponent)]"
>
<text class="member-nickname__text">{{ opponent.name }}</text>
<text v-if="opponent.sVip === true" class="member-nickname__shine">
{{ opponent.name }}
</text>
</view>
<text v-else class="room-player-name">{{ opponent.name }}</text>
<button v-if="owner.id === user.id" hover-class="none" class="remove-player"
@click="() => removePlayer(opponent)">
<image src="../static/close-white.png" mode="widthFix" />
@@ -440,8 +479,17 @@ onBeforeUnmount(() => {
<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>
<view v-if="item.id">
<view
v-if="item.id && isMember(item)"
:class="['team-player-name', 'truncate', ...getMemberNicknameClass(item)]"
>
<text class="member-nickname__text">{{ item.name }}</text>
<text v-if="item.sVip === true" class="member-nickname__shine">
{{ item.name }}
</text>
</view>
<text v-else class="truncate">{{ item.name || "我要加入" }}</text>
<view v-if="item.id" class="team-player-avatar">
<Avatar :src="item.avatar" :size="36" />
<text :style="{ opacity: !!item.state ? 1 : 0 }">已准备</text>
</view>
@@ -452,14 +500,23 @@ onBeforeUnmount(() => {
</view>
<view>
<view v-for="(item, index) in blueTeam" :key="index" class="choose-side-right-item">
<view v-if="item.id">
<view v-if="item.id" class="team-player-avatar">
<Avatar :src="item.avatar" :size="36" />
<text :style="{ opacity: !!item.state ? 1 : 0 }">已准备</text>
</view>
<button v-else hover-class="none" @click="chooseTeam(1)">
<image src="../static/add-grey.png" mode="widthFix" />
</button>
<text class="truncate">{{ item.name || "我要加入" }}</text>
<view
v-if="item.id && isMember(item)"
:class="['team-player-name', 'truncate', ...getMemberNicknameClass(item)]"
>
<text class="member-nickname__text">{{ item.name }}</text>
<text v-if="item.sVip === true" class="member-nickname__shine">
{{ item.name }}
</text>
</view>
<text v-else class="truncate">{{ item.name || "我要加入" }}</text>
<button hover-class="none" v-if="item.id === user.id" @click="chooseTeam(0)">
<image src="../static/close-grey.png" mode="widthFix" />
</button>
@@ -593,11 +650,12 @@ onBeforeUnmount(() => {
position: relative;
}
.player>text:nth-child(3) {
.room-player-name {
margin-top: 6rpx;
}
.player>text {
.player>text,
.room-player-name {
max-width: 100px;
white-space: nowrap;
overflow: hidden;
@@ -605,6 +663,12 @@ onBeforeUnmount(() => {
text-align: center;
}
.room-player-name .member-nickname__text,
.room-player-name .member-nickname__shine {
font-size: 14px;
text-align: center;
}
.player .ready {
background-color: #2c261fb3 !important;
border: 1rpx solid #a3793f66 !important;
@@ -852,12 +916,18 @@ onBeforeUnmount(() => {
}
.choose-side-left-item>text,
.choose-side-right-item>text {
.choose-side-right-item>text,
.team-player-name {
margin: 10px;
max-width: 100px;
font-size: 14px;
}
.team-player-name .member-nickname__text,
.team-player-name .member-nickname__shine {
font-size: 14px;
}
.choose-side-left-item>button:first-child,
.choose-side-right-item>button:last-child {
position: absolute;
@@ -894,15 +964,13 @@ onBeforeUnmount(() => {
width: 18px;
}
.choose-side-left-item>view,
.choose-side-right-item>view {
.team-player-avatar {
display: flex;
flex-direction: column;
align-items: center;
}
.choose-side-left-item>view>text,
.choose-side-right-item>view>text {
.team-player-avatar>text {
font-size: 16rpx;
border-radius: 20rpx;
line-height: 26rpx;