射箭记录完善

src/pages/match-detail.vue

@@ -4,49 +4,51 @@ import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import BattleHeader from "@/components/BattleHeader.vue";
 import Avatar from "@/components/Avatar.vue";
-import { getBattleDetailAPI } from "@/apis";
+import TeamResult from "@/components/TeamResult.vue";
+import MeleeResult from "@/components/MeleeResult.vue";
+import { getGameAPI } from "@/apis";
 
-const data = {
-  blueTeam: {
-    name: "选手1",
-    avatar: "../static/avatar.png",
-    arrows: [4, 6, 2],
-    score: 1,
-  },
-  redTeam: {
-    name: "选手2",
-    avatar: "../static/avatar.png",
-    arrows: [4, 6, 2],
-    score: 1,
-  },
-};
-const result = ref([
-  {
-    round: 1,
-    ...data,
-  },
-  {
-    round: 2,
-    ...data,
-  },
-  {
-    round: 3,
-    ...data,
-  },
-  {
-    round: 4,
-    ...data,
-  },
-  {
-    round: 5,
-    ...data,
-  },
-]);
+const blueTeam = ref([]);
+const redTeam = ref([]);
+const players = ref([]);
+const roundsData = ref([]);
+const data = ref({});
+const show = ref(false);
 
 onLoad(async (options) => {
   if (options.id) {
-    const result = await getBattleDetailAPI(options.id);
-    console.log(11111, result);
+    const result = await getGameAPI(options.id);
+    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];
+        }
+        roundsData.value.push({
+          blue: {
+            name: result.bluePlayers[blueId].name,
+            avatar: result.bluePlayers[blueId].avatar,
+            arrows: item[blueId],
+            totalRing: item[blueId].reduce((a, b) => a + b.ringScore, 0),
+            totalScore: item[blueId].reduce((a, b) => a + b.ringScore, 0),
+          },
+          red: {
+            name: result.redPlayers[redId].name,
+            avatar: result.redPlayers[redId].avatar,
+            arrows: item[redId],
+            totalRing: item[redId].reduce((a, b) => a + b.ringScore, 0),
+            totalScore: item[redId].reduce((a, b) => a + b.ringScore, 0),
+          },
+        });
+      });
+    } else if (result.mode === 2) {
+      players.value = result.players;
+    }
   }
 });
 </script>
@@ -55,12 +57,11 @@ onLoad(async (options) => {
   <Container title="详情">
     <view class="container">
       <BattleHeader
-        :blueTeam="[
-          { name: '选手1', avatar: '../static/avatar.png', winner: true },
-        ]"
-        :redTeam="[{ name: '选手2', avatar: '../static/avatar.png' }]"
+        :blueTeam="blueTeam"
+        :redTeam="redTeam"
+        :players="players"
       />
-      <view class="score-header">
+      <!-- <view class="score-header">
         <text>决金箭轮（环数）</text>
         <view>
           <text>查看靶纸</text>
@@ -83,42 +84,63 @@ onLoad(async (options) => {
           <text>10环</text>
           <text>7环</text>
         </view>
-      </view>
-      <view v-for="(item, index) in result" :key="index">
+      </view> -->
+      <view v-if="players.length" @click="() => (show = true)">查看靶纸</view>
+      <view
+        v-for="(round, index) in roundsData"
+        :key="index"
+        :style="{ marginBottom: '5px' }"
+      >
         <view class="score-header">
-          <text>第{{ item.round }}轮</text>
-          <view>
+          <text>第{{ index + 1 }}轮</text>
+          <view @click="() => (show = true)">
             <text>查看靶纸</text>
             <image src="../static/back.png" mode="widthFix" />
           </view>
         </view>
         <view class="score-row">
           <view>
-            <Avatar src="../static/avatar.png" :size="25" :borderColor="1" />
-            <text>9环</text>
-            <text>10环</text>
-            <text>7环</text>
+            <Avatar :src="round.blue.avatar" :size="25" :borderColor="1" />
+            <text v-for="(arrow, index2) in round.blue.arrows" :key="index2">
+              {{ arrow.ringScore }}环
+            </text>
           </view>
           <view>
-            <text :style="{ color: '#64BAFF' }">18环</text>
-            <text>得分 +1</text>
+            <text :style="{ color: '#64BAFF' }">
+              {{ round.blue.totalRing }}环
+            </text>
+            <text>得分 {{ round.blue.totalScore }}</text>
           </view>
         </view>
-        <view class="score-row" :style="{ marginBottom: '5px' }">
+        <view class="score-row">
           <view>
-            <Avatar src="../static/avatar.png" :size="25" :borderColor="2" />
-            <text>9环</text>
-            <text>10环</text>
-            <text>7环</text>
+            <Avatar :src="round.red.avatar" :size="25" :borderColor="2" />
+            <text v-for="(arrow, index2) in round.red.arrows" :key="index2">
+              {{ arrow.ringScore }}环
+            </text>
           </view>
           <view>
-            <text :style="{ color: '#FF6767' }">18环</text>
-            <text>得分 +1</text>
+            <text :style="{ color: '#FF6767' }">
+              {{ round.blue.totalRing }}环
+            </text>
+            <text>得分 {{ round.blue.totalScore }}</text>
           </view>
         </view>
       </view>
       <view :style="{ height: '20px' }"></view>
     </view>
+    <TeamResult
+      v-if="data.mode === 1"
+      :show="show"
+      :onClose="() => (show = false)"
+      :data="data"
+    />
+    <MeleeResult
+      v-if="data.mode === 2"
+      :show="show"
+      :onClose="() => (show = false)"
+      :data="data"
+    />
   </Container>
 </template>