数据展示优化

src/apis.js

@@ -212,9 +212,16 @@ export const getBattleListAPI = async (page, battleType) => {
       mode: item.battleStats.mode,
       createdAt: item.battleStats.createdAt,
       gameEndAt: item.battleStats.gameEndAt,
+      winner: item.battleStats.winner,
       players: item.playerStats
         .map((p) => p.playerBattleStats)
         .sort((a, b) => b.totalScore - a.totalScore),
+      redPlayers: item.playerStats
+        .filter((p) => p.playerBattleStats.team === 0)
+        .map((p) => p.playerBattleStats),
+      bluePlayers: item.playerStats
+        .filter((p) => p.playerBattleStats.team === 1)
+        .map((p) => p.playerBattleStats),
     });
   });
   return data;

src/components/BattleHeader.vue

@@ -13,6 +13,14 @@ defineProps({
     type: Array,
     default: () => [],
   },
+  showRank: {
+    type: Boolean,
+    default: false,
+  },
+  winner: {
+    type: Number,
+    default: 1,
+  },
 });
 const bgColors = ["#364469", "#692735", "#934B4B", "#A98B69", "#8268A2 "];
 </script>
@@ -29,7 +37,11 @@ const bgColors = ["#364469", "#692735", "#934B4B", "#A98B69", "#8268A2 "];
         :key="index"
         :style="{ backgroundColor: bgColors[index] }"
       >
-        <Avatar :src="player.avatar" :size="40" />
+        <Avatar
+          :src="player.avatar"
+          :size="40"
+          :rank="showRank ? index + 1 : 0"
+        />
         <text class="player-name">{{ player.name }}</text>
       </view>
     </view>
@@ -38,7 +50,7 @@ const bgColors = ["#364469", "#692735", "#934B4B", "#A98B69", "#8268A2 "];
         <Avatar :src="blueTeam[0].avatar" frame />
         <text class="player-name">{{ blueTeam[0].name }}</text>
         <image
-          v-if="blueTeam[0].winner"
+          v-if="winner === 1"
           src="../static/winner-badge.png"
           mode="widthFix"
         />
@@ -47,7 +59,7 @@ const bgColors = ["#364469", "#692735", "#934B4B", "#A98B69", "#8268A2 "];
         <Avatar v-if="redTeam[0]" :src="redTeam[0].avatar" frame />
         <text class="player-name">{{ redTeam[0].name }}</text>
         <image
-          v-if="redTeam[0].winner"
+          v-if="winner === 0"
           src="../static/winner-badge.png"
           mode="widthFix"
         />

src/components/MeleeResult.vue

@@ -76,7 +76,7 @@ watch(
         class="score-item"
         :style="{ width: '13vw', height: '13vw' }"
       >
-        {{ score.ringScore }}
+        {{ score.ring }}
       </view>
     </view>
   </view>

src/components/TeamResult.vue

@@ -115,7 +115,7 @@ watch(
         class="score-item"
         :style="{ width: '13vw', height: '13vw' }"
       >
-        {{ score.ringScore }}
+        {{ score.ring }}
       </view>
     </view>
   </view>

src/pages/match-detail.vue

@@ -57,9 +57,11 @@ onLoad(async (options) => {
   <Container title="详情">
     <view class="container">
       <BattleHeader
+        :winner="data.winner"
         :blueTeam="blueTeam"
         :redTeam="redTeam"
         :players="players"
+        :showRank="true"
       />
       <!-- <view class="score-header">
         <text>决金箭轮（环数）</text>

src/pages/my-growth.vue

@@ -89,19 +89,28 @@ onMounted(async () => {
               <image src="../static/back.png" mode="widthFix" />
             </view>
             <view v-if="item.mode === 1" class="contest-team">
-              <view
-                class="player"
-                v-for="(p, index2) in item.players"
-                :key="index2"
-              >
-                <Avatar frame :src="p.avatar" />
-                <text>{{ p.name }}</text>
-                <image
-                  v-if="index2 === 0"
-                  src="../static/winner-badge.png"
-                  mode="widthFix"
-                />
-              </view>
+              <block v-if="item.bluePlayers[0]">
+                <view class="player">
+                  <Avatar frame :src="item.bluePlayers[0].avatar" />
+                  <text>{{ item.bluePlayers[0].name }}</text>
+                  <image
+                    v-if="item.winner === 1"
+                    src="../static/winner-badge.png"
+                    mode="widthFix"
+                  />
+                </view>
+              </block>
+              <block v-if="item.redPlayers[0]">
+                <view class="player">
+                  <Avatar frame :src="item.redPlayers[0].avatar" />
+                  <text>{{ item.redPlayers[0].name }}</text>
+                  <image
+                    v-if="item.winner === 0"
+                    src="../static/winner-badge.png"
+                    mode="widthFix"
+                  />
+                </view>
+              </block>
             </view>
             <view v-if="item.mode === 2" class="contest-multi">
               <view