射箭记录完善

src/components/BowTarget.vue

@@ -30,6 +30,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  blueScores: {
+    type: Array,
+    default: () => [],
+  },
   showE: {
     type: Boolean,
     default: true,
@@ -88,13 +92,27 @@ function calcRealY(num) {
       <image
         v-for="(bow, index) in scores"
         :key="index"
-        src="../static/hit-icon.png"
+        :src="
+          index === scores.length - 1 && !blueScores.length
+            ? '../static/hit-icon-green.png'
+            : '../static/hit-icon.png'
+        "
         :class="`hit ${index + 1 === scores.length ? 'pump-in' : ''}`"
         :style="{
           left: calcRealX(bow.x),
           top: calcRealY(bow.y),
         }"
       />
+      <image
+        v-for="(bow, index) in blueScores"
+        :key="index"
+        src="../static/hit-icon-blue.png"
+        :class="`hit ${index + 1 === blueScores.length ? 'pump-in' : ''}`"
+        :style="{
+          left: calcRealX(bow.x),
+          top: calcRealY(bow.y),
+        }"
+      />
       <image src="../static/bow-target.png" mode="widthFix" />
     </view>
     <view v-if="avatar" class="footer">

src/components/MeleeResult.vue

@@ -25,7 +25,7 @@ watch(
   () => props.data,
   (value) => {
     const mine = value.players.find((p) => p.playerId === user.value.id);
-    if (mine.arrowHistory) {
+    if (mine && mine.arrowHistory) {
       scores.value = mine.arrowHistory;
     }
   },
@@ -47,7 +47,7 @@ watch(
         <image v-if="index === 1" src="../static/champ2.png" mode="widthFix" />
         <image v-if="index === 2" src="../static/champ3.png" mode="widthFix" />
         <view v-if="index > 2" class="rank-view">{{ index + 1 }}</view>
-        <Avatar src="../static/avatar.png" :size="24" />
+        <Avatar :src="player.avatar" :size="24" />
         <text
           >积分
           {{

src/components/ScoreResult.vue

@@ -96,9 +96,7 @@ setTimeout(() => {
           src="../static/review.png"
           :onClick="() => (showComment = true)"
         />
-        <SButton width="70vw" :rounded="30" :onClick="closePanel"
-          >完成</SButton
-        >
+        <SButton width="70vw" :rounded="30" :onClick="closePanel">完成</SButton>
       </view>
     </view>
     <ImageShare :show="showShare" :onClose="() => (showShare = false)" />
@@ -116,6 +114,7 @@ setTimeout(() => {
   top: 0;
   left: 0;
   background-color: rgba(0, 0, 0, 0.6);
+  z-index: 5;
 }
 .container-header {
   margin-top: 20vh;

src/components/TeamResult.vue

@@ -18,21 +18,40 @@ const props = defineProps({
   },
 });
 const selected = ref(0);
-const scores = ref([]);
+const redScores = ref([]);
+const blueScores = ref([]);
 const tabs = ref(["所有轮次"]);
 const players = ref([]);
 const onClickTab = (index) => {
   selected.value = index;
-  scores.value = [];
+  redScores.value = [];
+  blueScores.value = [];
+  const { bluePlayers, redPlayers, roundsData } = props.data;
   if (index === 0) {
-    Object.values(props.data.roundsData).forEach((round) => {
-      Object.values(round).forEach((arrows) => {
-        scores.value = [...scores.value, ...Object.values(arrows)];
+    Object.keys(bluePlayers).forEach((p) => {
+      Object.values(roundsData).forEach((round) => {
+        round[p].forEach((arrow) => {
+          blueScores.value.push(arrow);
+        });
+      });
+    });
+    Object.keys(redPlayers).forEach((p) => {
+      Object.values(roundsData).forEach((round) => {
+        round[p].forEach((arrow) => {
+          redScores.value.push(arrow);
+        });
       });
     });
   } else {
-    Object.values(props.data.roundsData[index]).forEach((arrows) => {
-      scores.value = [...scores.value, ...Object.values(arrows)];
+    Object.keys(bluePlayers).forEach((p) => {
+      roundsData[index][p].forEach((arrow) => {
+        blueScores.value.push(arrow);
+      });
+    });
+    Object.keys(redPlayers).forEach((p) => {
+      roundsData[index][p].forEach((arrow) => {
+        redScores.value.push(arrow);
+      });
     });
   }
 };
@@ -54,7 +73,8 @@ watch(
       tabs.value.push(`第${roundsName[key]}轮`);
     });
     onClickTab(0);
-  }
+  },
+  { deep: true, immediate: true }
 );
 </script>
 
@@ -77,7 +97,7 @@ watch(
       </view>
     </view>
     <view :style="{ width: '95%' }">
-      <BowTarget :scores="scores" :showE="false" />
+      <BowTarget :scores="redScores" :blueScores="blueScores" :showE="false" />
     </view>
     <view class="score-row" v-for="(player, index) in players" :key="index">
       <Avatar

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>