update:房间新增vip特效

src/components/BowTarget.vue

@@ -43,6 +43,10 @@ const props = defineProps({
     type: String,
     default: "solo", // solo 单排，team 双排
   },
+  missAsZero: {
+    type: Boolean,
+    default: false,
+  },
   stop: {
     type: Boolean,
     default: false,
@@ -78,6 +82,12 @@ const instance = getCurrentInstance();
 const ROUND_TIP_OFFSET_Y = -32;
 const EXPERIENCE_TIP_OFFSET_Y = -68;
 
+function getRoundText(shot) {
+  if (shot?.ringX) return "X环";
+  if (shot?.ring) return `${shot.ring}环`;
+  return props.missAsZero ? "0环" : "未上靶";
+}
+
 function buildShotEffectKey(team, shot, index) {
   return [
     team,
@@ -433,8 +443,7 @@ onBeforeUnmount(() => {
         v-if="latestOne"
         class="round-tip fade-in-out"
         :style="getRoundTipStyle(latestOne)"
-        >{{ latestOne.ringX ? "X" : latestOne.ring || "未上靶"
+        >{{ getRoundText(latestOne) }}
-        }}<text v-if="latestOne.ring">环</text>
       </view>
       <view
         v-if="
@@ -451,8 +460,7 @@ onBeforeUnmount(() => {
         v-if="bluelatestOne"
         class="round-tip fade-in-out"
         :style="getRoundTipStyle(bluelatestOne)"
-        >{{ bluelatestOne.ringX ? "X" : bluelatestOne.ring || "未上靶"
+        >{{ getRoundText(bluelatestOne) }}</view
-        }}<text v-if="bluelatestOne.ring">环</text></view
       >
       <block v-for="(bow, index) in scores" :key="index">
         <image

src/components/PlayerScore.vue

@@ -19,7 +19,7 @@ const rowCount = new Array(6).fill(0);
 const getRingText = (arrow) => {
   if (!arrow) return "-";
   if (arrow.ringX && arrow.ring) return "X环";
-  return arrow.ring ? `${arrow.ring}环` : "-";
+  return `${Number(arrow.ring) || 0}环`;
 };
 const isMember = (player = {}) => player.vip === true || player.sVip === true;
 

src/components/PlayerSeats.vue

@@ -20,6 +20,15 @@ const props = defineProps({
     default: false,
   },
 });
+
+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 seats = new Array(props.total).fill(1);
 </script>
 
@@ -40,10 +49,27 @@ const seats = new Array(props.total).fill(1);
       <view v-else class="player-unknow">
         <image src="../static/question-mark.png" mode="widthFix" />
       </view>
-      <text v-if="players[index] && players[index].name">{{
+      <view
-        players[index].name
+        v-if="players[index] && players[index].name && isMember(players[index])"
-      }}</text>
+        :class="['player-seat-name', ...getMemberNicknameClass(players[index])]"
-      <text v-else :style="{ color: '#fff9' }">虚位以待</text>
+      >
+        <text class="member-nickname__text">{{ players[index].name }}</text>
+        <text
+          v-if="players[index].sVip === true"
+          class="member-nickname__shine"
+        >
+          {{ players[index].name }}
+        </text>
+      </view>
+      <text
+        v-else-if="players[index] && players[index].name"
+        class="player-seat-name"
+      >
+        {{ players[index].name }}
+      </text>
+      <text v-else class="player-seat-name" :style="{ color: '#fff9' }">
+        虚位以待
+      </text>
       <view v-if="index === 0" class="founder">管理员</view>
       <!-- <image
         :src="`../static/player-${index + 1}.png`"
@@ -108,7 +134,7 @@ const seats = new Array(props.total).fill(1);
   height: 28rpx;
   line-height: 28rpx;
 }
-.players > view > text:nth-child(3) {
+.player-seat-name {
   width: 20vw;
   white-space: nowrap;
   overflow: hidden;

src/pages/battle-room.vue

@@ -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,
+        id: player.id,
-        name: m.userInfo.name,
+        name: player.name,
-        avatar: m.userInfo.avatar,
+        avatar: player.avatar,
-        rankLvl: m.userInfo.rankLvl,
+        rankLvl: player.rankLvl,
-        ready: !!m.userInfo.state,
+        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,
+          id: player.id,
-          name: m.userInfo.name,
+          name: player.name,
-          avatar: m.userInfo.avatar,
+          avatar: player.avatar,
-          rankLvl: m.userInfo.rankLvl,
+          rankLvl: player.rankLvl,
-          ready: !!m.userInfo.state,
+          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
-              <view v-if="item.id">
+                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,
+.team-player-avatar {
-.choose-side-right-item>view {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
-.choose-side-left-item>view>text,
+.team-player-avatar>text {
-.choose-side-right-item>view>text {
   font-size: 16rpx;
   border-radius: 20rpx;
   line-height: 26rpx;

src/pages/melee-battle.vue

@@ -529,6 +529,7 @@ onShow(() => {
         :totalRound="12"
         :scores="playersScores.map((r) => r[user.id]).flat()"
         :isSvip="isCurrentUserSvip"
+        :missAsZero="true"
         :stop="halfRest"
       />
       <view :style="{ paddingBottom: '20px' }">