细节调整

src/pages/match-detail.vue

@@ -20,23 +20,27 @@ const data = ref({
 
 onLoad(async (options) => {
   if (options.id) {
-    battleId.value = options.id || "BATTLE-1751732742024840058-732";
+    battleId.value = options.id || "BATTLE-1755239389665389000-812";
     const result = await getGameAPI(battleId.value);
     data.value = result;
     if (result.mode === 1) {
       blueTeam.value = Object.values(result.bluePlayers || {});
       redTeam.value = Object.values(result.redPlayers || {});
       Object.values(result.roundsData).forEach((item) => {
-        let blueId = Object.keys(item)[0];
-        let redId = Object.keys(item)[1];
-        if (!result.bluePlayers[blueId]) {
-          blueId = Object.keys(item)[1];
-          redId = Object.keys(item)[0];
-        }
         let bluePoint = 1;
         let redPoint = 1;
-        const blueTotalRings = item[blueId].reduce((a, b) => a + b.ring, 0);
-        const redTotalRings = item[redId].reduce((a, b) => a + b.ring, 0);
+        let blueTotalRings = 0;
+        let redTotalRings = 0;
+        let blueArrows = [];
+        let redArrows = [];
+        blueTeam.value.forEach((p) => {
+          blueTotalRings += item[p.playerId].reduce((a, b) => a + b.ring, 0);
+          blueArrows = [...blueArrows, ...item[p.playerId]];
+        });
+        redTeam.value.forEach((p) => {
+          redTotalRings += item[p.playerId].reduce((a, b) => a + b.ring, 0);
+          redArrows = [...redArrows, ...item[p.playerId]];
+        });
         if (blueTotalRings > redTotalRings) {
           bluePoint = 2;
           redPoint = 0;
@@ -46,16 +50,16 @@ onLoad(async (options) => {
         }
         roundsData.value.push({
           blue: {
-            name: result.bluePlayers[blueId].name,
-            avatar: result.bluePlayers[blueId].avatar,
-            arrows: item[blueId],
+            names: blueTeam.value.map((p) => p.name),
+            avatars: blueTeam.value.map((p) => p.avatar),
+            arrows: blueArrows,
             totalRing: blueTotalRings,
             totalScore: bluePoint,
           },
           red: {
-            name: result.redPlayers[redId].name,
-            avatar: result.redPlayers[redId].avatar,
-            arrows: item[redId],
+            names: redTeam.value.map((p) => p.name),
+            avatars: redTeam.value.map((p) => p.avatar),
+            arrows: redArrows,
             totalRing: redTotalRings,
             totalScore: redPoint,
           },
@@ -174,7 +178,18 @@ const checkBowData = () => {
         </view>
         <view class="score-row">
           <view>
-            <Avatar :src="round.blue.avatar" :size="25" borderColor="#64BAFF" />
+            <view>
+              <image
+                v-for="(src, index) in round.blue.avatars"
+                :style="{
+                  borderColor: '#64BAFF',
+                  transform: `translateX(-${index * 15}px)`,
+                }"
+                :src="src"
+                :key="index"
+                mode="widthFix"
+              />
+            </view>
             <text v-for="(arrow, index2) in round.blue.arrows" :key="index2">
               {{ arrow.ring }}环
             </text>
@@ -188,7 +203,18 @@ const checkBowData = () => {
         </view>
         <view class="score-row">
           <view>
-            <Avatar :src="round.red.avatar" :size="25" borderColor="#FF6767" />
+            <view>
+              <image
+                v-for="(src, index) in round.blue.avatars"
+                :style="{
+                  borderColor: '#FF6767',
+                  transform: `translateX(-${index * 15}px)`,
+                }"
+                :src="src"
+                :key="index"
+                mode="widthFix"
+              />
+            </view>
             <text v-for="(arrow, index2) in round.red.arrows" :key="index2">
               {{ arrow.ring }}环
             </text>
@@ -250,12 +276,22 @@ const checkBowData = () => {
 .score-row > view {
   display: flex;
   align-items: center;
+  font-size: 12px;
+}
+.score-row > view:first-child > view:first-child {
+  display: flex;
+  align-items: center;
+}
+.score-row > view:first-child > view:first-child > image {
+  width: 25px;
+  height: 25px;
+  border: 1px solid;
+  border-radius: 50%;
 }
 .score-row > view:first-child > text {
-  margin-left: 20px;
   color: #fff;
   display: block;
-  width: 30px;
+  width: 35px;
 }
 .score-row > image:last-child {
   width: 40px;