update:房间新增vip特效

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">{{
-        players[index].name
-      }}</text>
-      <text v-else :style="{ color: '#fff9' }">虚位以待</text>
+      <view
+        v-if="players[index] && players[index].name && isMember(players[index])"
+        :class="['player-seat-name', ...getMemberNicknameClass(players[index])]"
+      >
+        <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;