update:vip完成

src/pages/melee-bow-data.vue

@@ -13,13 +13,31 @@ const currentUser = ref({
 });
 const players = ref([]);
 
+function getRingTotal(arrows = []) {
+  return arrows.reduce((last, next) => last + (Number(next?.ring) || 0), 0);
+}
+
+function getScoreLabel(score) {
+  if (!score) return "";
+  return score.ringX ? "X" : score.ring || "";
+}
+
+const isMember = (player = {}) => player.vip === true || player.sVip === true;
+
+const getMemberNicknameClass = (player = {}) => [
+  "player-name",
+  "member-nickname",
+  player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
+  player.sVip === true ? "member-nickname--svip" : "",
+];
+
 onLoad(async (options) => {
   if (!options.battleId) return;
   const result = await getBattleAPI(options.battleId || "59348111700660224");
+  const plist = result.teams?.[0]?.players || [];
   players.value = result.resultList.map((item, index) => {
-    const plist = result.teams[0] ? result.teams[0].players : [];
-    const p = plist.find((p) => p.id === item.userId);
-    const arrows = new Array(12);
+    const p = plist.find((p) => String(p.id) === String(item.userId));
+    const arrows = Array.from({ length: 12 }, () => ({}));
     result.rounds.forEach((r, index) => {
       if (r.shoots[item.userId]) {
         r.shoots[item.userId].forEach((s, index2) => {
@@ -29,9 +47,11 @@ onLoad(async (options) => {
     });
     return {
       ...item,
+      ...p,
+      userId: item.userId,
       rank: index + 1,
-      name: p.name,
-      avatar: p.avatar || "",
+      name: p?.name || item.name,
+      avatar: p?.avatar || item.avatar || "",
       arrows,
     };
   });
@@ -68,18 +88,27 @@ onLoad(async (options) => {
             class="player-bg"
           />
           <Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
-          <text>{{ player.name }}</text>
+          <view v-if="isMember(player)" :class="getMemberNicknameClass(player)">
+            <text class="member-nickname__text">{{ player.name }}</text>
+            <text v-if="player.sVip === true" class="member-nickname__shine">
+              {{ player.name }}
+            </text>
+          </view>
+          <text v-else>{{ player.name }}</text>
         </view>
       </view>
       <view :style="{ marginTop: '10px' }">
-        <BowTarget :scores="currentUser.arrows" />
+        <BowTarget
+          :scores="currentUser.arrows"
+          :isSvip="currentUser.sVip === true"
+        />
       </view>
       <view class="score-text"
         ><text :style="{ color: '#fed847' }">{{
           currentUser.arrows.length
         }}</text
         >支箭，共<text :style="{ color: '#fed847' }">{{
-          currentUser.arrows.reduce((last, next) => last + next.ring, 0)
+          getRingTotal(currentUser.arrows)
         }}</text
         >环</view
       >
@@ -90,7 +119,7 @@ onLoad(async (options) => {
           class="score-item"
           :style="{ width: '13vw', height: '13vw' }"
         >
-          {{ score.ringX ? "X" : score.ring }}
+          {{ getScoreLabel(score) }}
         </view>
       </view>
     </view>
@@ -149,6 +178,16 @@ onLoad(async (options) => {
   text-align: center;
   position: relative;
 }
+.players > view > .player-name {
+  margin: 5px 0;
+  width: 80%;
+  position: relative;
+  justify-content: center;
+}
+.player-name .member-nickname__text,
+.player-name .member-nickname__shine {
+  font-size: 12px;
+}
 .score-text {
   width: 100%;
   color: #fff;