BUG修复

src/pages/team-bow-data.vue

@@ -12,11 +12,13 @@ const blueScores = ref([]);
 const tabs = ref(["所有轮次"]);
 const players = ref([]);
 const allRoundsScore = ref({});
-const data = ref({});
+const data = ref({
+  goldenRounds: [],
+});
 onLoad(async (options) => {
   if (options.battleId) {
     const result = await getGameAPI(
-      options.battleId || "BATTLE-1754988051086075885-926"
+      options.battleId || "BATTLE-1755484626207409508-955"
     );
     data.value = result;
     Object.values(result.bluePlayers).forEach((p, index) => {
@@ -28,9 +30,18 @@ onLoad(async (options) => {
         players.value.push(Object.values(result.redPlayers)[index]);
       }
     });
-    if (result.goldenRound) tabs.value.push("决金箭");
-    Object.keys(result.roundsData).forEach((key) => {
-      tabs.value.push(`第${roundsName[key]}轮`);
+    if (result.goldenRounds) {
+      result.goldenRounds.forEach(() => {
+        tabs.value.push("决金箭");
+      });
+    }
+    Object.keys(result.roundsData).forEach((key, index) => {
+      if (
+        index <
+        Object.keys(result.roundsData).length - result.goldenRounds.length
+      ) {
+        tabs.value.push(`第${roundsName[key]}轮`);
+      }
     });
     onClickTab(0);
   }
@@ -39,11 +50,13 @@ const onClickTab = (index) => {
   selected.value = index;
   redScores.value = [];
   blueScores.value = [];
-  const { bluePlayers, redPlayers, roundsData, goldenRound } = data.value;
+  const { bluePlayers, redPlayers, roundsData, goldenRounds } = data.value;
+  let maxArrowLength = 0;
   if (index === 0) {
     Object.keys(bluePlayers).forEach((p) => {
       allRoundsScore.value[p] = [];
       Object.values(roundsData).forEach((round) => {
+        if (!round[p]) return;
         allRoundsScore.value[p].push(
           round[p].reduce((last, next) => last + next.ring, 0)
         );
@@ -55,6 +68,7 @@ const onClickTab = (index) => {
     Object.keys(redPlayers).forEach((p) => {
       allRoundsScore.value[p] = [];
       Object.values(roundsData).forEach((round) => {
+        if (!round[p]) return;
         allRoundsScore.value[p].push(
           round[p].reduce((last, next) => last + next.ring, 0)
         );
@@ -63,20 +77,29 @@ const onClickTab = (index) => {
         });
       });
     });
-  } else if (index === 1 && goldenRound) {
-    if (goldenRound.winner === 1) {
-      blueScores.value = goldenRound.arrowHistory;
-    } else {
-      redScores.value = goldenRound.arrowHistory;
-    }
-  } else {
+  } else if (index <= goldenRounds.length) {
+    const dataIndex =
+      Object.keys(roundsData).length - goldenRounds.length + index;
     Object.keys(bluePlayers).forEach((p) => {
-      roundsData[goldenRound ? index - 1 : index][p].forEach((arrow) => {
+      if (!roundsData[dataIndex][p]) return;
+      roundsData[dataIndex][p].forEach((arrow) => {
         blueScores.value.push(arrow);
       });
     });
     Object.keys(redPlayers).forEach((p) => {
-      roundsData[goldenRound ? index - 1 : index][p].forEach((arrow) => {
+      if (!roundsData[dataIndex][p]) return;
+      roundsData[dataIndex][p].forEach((arrow) => {
+        redScores.value.push(arrow);
+      });
+    });
+  } else {
+    Object.keys(bluePlayers).forEach((p) => {
+      roundsData[index - goldenRounds.length][p].forEach((arrow) => {
+        blueScores.value.push(arrow);
+      });
+    });
+    Object.keys(redPlayers).forEach((p) => {
+      roundsData[index - goldenRounds.length][p].forEach((arrow) => {
         redScores.value.push(arrow);
       });
     });
@@ -127,25 +150,23 @@ const onClickTab = (index) => {
             </view>
             <view
               v-if="
-                selected === 1 &&
-                data.goldenRound &&
-                data.goldenRound.arrowHistory.find(
-                  (a) => a.playerId === player.playerId
-                )
+                selected >= data.goldenRounds.length &&
+                selected <= data.goldenRounds.length
               "
-              v-for="(score, index) in data.goldenRound.arrowHistory"
+              v-for="(score, index) in data.roundsData[
+                Object.keys(data.roundsData).length -
+                  data.goldenRounds.length +
+                  selected
+              ][player.playerId]"
               :key="index"
               class="score-item"
             >
               {{ score.ring }}
             </view>
             <view
-              v-if="
-                (!data.goldenRound && selected > 0) ||
-                (data.goldenRound && selected > 1)
-              "
+              v-if="selected > data.goldenRounds.length"
               v-for="(score, index) in data.roundsData[
-                data.goldenRound ? selected - 1 : selected
+                selected - data.goldenRounds.length
               ][player.playerId]"
               :key="index"
               class="score-item"
@@ -196,7 +217,9 @@ const onClickTab = (index) => {
 .score-row {
   display: flex;
   align-items: flex-start;
-  margin-left: 5px;
+  margin-bottom: 5px;
+  width: calc(50% - 5px);
+  padding-left: 5px;
 }
 .score-row > view:last-child {
   margin-left: 10px;
@@ -204,6 +227,7 @@ const onClickTab = (index) => {
   grid-template-columns: repeat(3, auto);
   gap: 5px;
   margin-right: 5px;
+  min-width: 26%;
 }
 .score-item {
   background-image: url("../static/score-bg.png");
@@ -219,8 +243,8 @@ const onClickTab = (index) => {
   height: 10vw;
 }
 .score-container {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  row-gap: 15px;
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
 }
 </style>