BUG修复

src/pages/match-detail.vue

@@ -12,6 +12,7 @@ import { getGameAPI } from "@/apis";
 const blueTeam = ref([]);
 const redTeam = ref([]);
 const roundsData = ref([]);
+const goldenRoundsData = ref([]);
 const battleId = ref("");
 const data = ref({
   players: [],
@@ -20,7 +21,7 @@ const data = ref({
 
 onLoad(async (options) => {
   if (options.id) {
-    battleId.value = options.id || "BATTLE-1755239389665389000-812";
+    battleId.value = options.id || "BATTLE-1755484626207409508-955";
     const result = await getGameAPI(battleId.value);
     data.value = result;
     if (result.mode === 1) {
@@ -34,10 +35,12 @@ onLoad(async (options) => {
         let blueArrows = [];
         let redArrows = [];
         blueTeam.value.forEach((p) => {
+          if (!item[p.playerId]) return;
           blueTotalRings += item[p.playerId].reduce((a, b) => a + b.ring, 0);
           blueArrows = [...blueArrows, ...item[p.playerId]];
         });
         redTeam.value.forEach((p) => {
+          if (!item[p.playerId]) return;
           redTotalRings += item[p.playerId].reduce((a, b) => a + b.ring, 0);
           redArrows = [...redArrows, ...item[p.playerId]];
         });
@@ -50,14 +53,12 @@ onLoad(async (options) => {
         }
         roundsData.value.push({
           blue: {
-            names: blueTeam.value.map((p) => p.name),
             avatars: blueTeam.value.map((p) => p.avatar),
             arrows: blueArrows,
             totalRing: blueTotalRings,
             totalScore: bluePoint,
           },
           red: {
-            names: redTeam.value.map((p) => p.name),
             avatars: redTeam.value.map((p) => p.avatar),
             arrows: redArrows,
             totalRing: redTotalRings,
@@ -65,6 +66,19 @@ onLoad(async (options) => {
           },
         });
       });
+      result.goldenRounds.forEach((round) => {
+        goldenRoundsData.value.push({
+          blue: {
+            avatars: blueTeam.value.map((p) => p.avatar),
+            arrows: round.arrowHistory.filter((a) => a.team === 1),
+          },
+          red: {
+            avatars: redTeam.value.map((p) => p.avatar),
+            arrows: round.arrowHistory.filter((a) => a.team === 0),
+          },
+          winner: round.winner,
+        });
+      });
     }
   }
 });
@@ -113,7 +127,7 @@ const checkBowData = () => {
         :totalRing="player.totalRings"
         :rank="index + 1"
       />
-      <block v-if="data.goldenRound">
+      <block v-for="(round, index) in goldenRoundsData" :key="index">
         <view class="score-header">
           <text>决金箭轮（环数）</text>
           <view @click="checkBowData">
@@ -121,61 +135,6 @@ const checkBowData = () => {
             <image src="../static/back.png" mode="widthFix" />
           </view>
         </view>
-        <view class="score-row">
-          <view>
-            <Avatar
-              :src="blueTeam[0].avatar"
-              :size="25"
-              borderColor="#64BAFF"
-            />
-            <text
-              v-if="data.goldenRound.blueTotal"
-              v-for="(arrow, index) in data.goldenRound.arrowHistory.filter(
-                (a) => a.playerId === blueTeam[0].playerId
-              )"
-              :key="index"
-            >
-              {{ arrow.ring }}环
-            </text>
-          </view>
-          <image
-            v-if="data.goldenRound.winner === 1"
-            src="../static/winner-badge.png"
-            mode="widthFix"
-          />
-        </view>
-        <view class="score-row" :style="{ marginBottom: '5px' }">
-          <view>
-            <Avatar :src="redTeam[0].avatar" :size="25" borderColor="#FF6767" />
-            <text
-              v-if="data.goldenRound.redTotal"
-              v-for="(arrow, index) in data.goldenRound.arrowHistory.filter(
-                (a) => a.playerId === redTeam[0].playerId
-              )"
-              :key="index"
-            >
-              {{ arrow.ring }}环
-            </text>
-          </view>
-          <image
-            v-if="data.goldenRound.winner === 0"
-            src="../static/winner-badge.png"
-            mode="widthFix"
-          />
-        </view>
-      </block>
-      <view
-        v-for="(round, index) in roundsData"
-        :key="index"
-        :style="{ marginBottom: '5px' }"
-      >
-        <view class="score-header">
-          <text>第{{ index + 1 }}轮</text>
-          <view @click="checkBowData">
-            <text>查看靶纸</text>
-            <image src="../static/back.png" mode="widthFix" />
-          </view>
-        </view>
         <view class="score-row">
           <view>
             <view>
@@ -190,18 +149,17 @@ const checkBowData = () => {
                 mode="widthFix"
               />
             </view>
-            <text v-for="(arrow, index2) in round.blue.arrows" :key="index2">
+            <text v-for="(arrow, index) in round.blue.arrows" :key="index">
               {{ arrow.ring }}环
             </text>
           </view>
-          <view>
-            <text :style="{ color: '#64BAFF' }">
-              {{ round.blue.totalRing }}环
-            </text>
-            <text>得分 {{ round.blue.totalScore }}</text>
-          </view>
+          <image
+            v-if="round.winner === 1"
+            src="../static/winner-badge.png"
+            mode="widthFix"
+          />
         </view>
-        <view class="score-row">
+        <view class="score-row" :style="{ marginBottom: '5px' }">
           <view>
             <view>
               <image
@@ -215,17 +173,85 @@ const checkBowData = () => {
                 mode="widthFix"
               />
             </view>
-            <text v-for="(arrow, index2) in round.red.arrows" :key="index2">
+            <text v-for="(arrow, index) in round.red.arrows" :key="index">
               {{ arrow.ring }}环
             </text>
           </view>
-          <view>
-            <text :style="{ color: '#FF6767' }">
-              {{ round.red.totalRing }}环
-            </text>
-            <text>得分 {{ round.red.totalScore }}</text>
-          </view>
+          <image
+            v-if="round.winner === 0"
+            src="../static/winner-badge.png"
+            mode="widthFix"
+          />
         </view>
+      </block>
+      <view
+        v-for="(round, index) in roundsData"
+        :key="index"
+        :style="{ marginBottom: '5px' }"
+      >
+        <block
+          v-if="
+            index < Object.keys(roundsData).length - goldenRoundsData.length
+          "
+        >
+          <view class="score-header">
+            <text>第{{ index + 1 }}轮</text>
+            <view @click="checkBowData">
+              <text>查看靶纸</text>
+              <image src="../static/back.png" mode="widthFix" />
+            </view>
+          </view>
+          <view class="score-row">
+            <view>
+              <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>
+            </view>
+            <view>
+              <text :style="{ color: '#64BAFF' }">
+                {{ round.blue.totalRing }}环
+              </text>
+              <text>得分 {{ round.blue.totalScore }}</text>
+            </view>
+          </view>
+          <view class="score-row">
+            <view>
+              <view>
+                <image
+                  v-for="(src, index) in round.red.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>
+            </view>
+            <view>
+              <text :style="{ color: '#FF6767' }">
+                {{ round.red.totalRing }}环
+              </text>
+              <text>得分 {{ round.red.totalScore }}</text>
+            </view>
+          </view>
+        </block>
       </view>
       <view :style="{ height: '20px' }"></view>
     </view>
@@ -299,10 +325,10 @@ const checkBowData = () => {
 .score-row > image:last-child {
   width: 40px;
 }
-.score-row > view:last-child {
+.score-row > view:nth-child(2) {
   padding-right: 5px;
 }
-.score-row > view:last-child > text:last-child {
+.score-row > view:nth-child(2) > text:last-child {
   margin-left: 20px;
 }
 </style>