完成大乱斗流程调试

src/components/MeleeResult.vue

@@ -1,7 +1,12 @@
 <script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import BowTarget from "@/components/BowTarget.vue";
 import Avatar from "@/components/Avatar.vue";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
+const scores = ref([]);
 const props = defineProps({
   show: {
     type: Boolean,
@@ -11,7 +16,21 @@ const props = defineProps({
     type: Function,
     default: () => {},
   },
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
 });
+watch(
+  () => props.data,
+  (value) => {
+    const mine = value.players.find((p) => p.playerId === user.value.id);
+    if (mine.arrowHistory) {
+      scores.value = mine.arrowHistory;
+    }
+  },
+  { deep: true, immediate: true }
+);
 </script>
 
 <template>
@@ -23,21 +42,26 @@ const props = defineProps({
       </view>
     </view>
     <view class="rank-rows">
-      <view v-for="(item, index) in [1, 2, 3, 4, 5]" :key="index">
+      <view v-for="(player, index) in data.players" :key="index">
         <image v-if="index === 0" src="../static/champ1.png" mode="widthFix" />
         <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">{{ item }}</view>
+        <view v-if="index > 2" class="rank-view">{{ index + 1 }}</view>
         <Avatar src="../static/avatar.png" :size="24" />
-        <text>积分 + 117分</text>
-        <text>117环</text>
-        <text v-for="(round, index2) in new Array(12).fill(9)" :key="index2">
-          {{ round }}环
+        <text
+          >积分
+          {{
+            player.totalScore > 0 ? "+" + player.totalScore : player.totalScore
+          }}分</text
+        >
+        <text>{{ player.totalRings }}环</text>
+        <text v-for="(arrow, index2) in player.arrowHistory" :key="index2">
+          {{ arrow.ringScore }}环
         </text>
       </view>
     </view>
-    <view :style="{ width: '95%', marginTop: '-5%' }">
-      <BowTarget />
+    <view :style="{ width: '95%' }">
+      <BowTarget :scores="scores" />
     </view>
     <view class="score-text"
       ><text :style="{ color: '#fed847' }">12</text>支箭，共<text
@@ -47,12 +71,12 @@ const props = defineProps({
     >
     <view class="score-row">
       <view
-        v-for="(score, index) in new Array(12).fill(9)"
+        v-for="(score, index) in scores"
         :key="index"
         class="score-item"
         :style="{ width: '13vw', height: '13vw' }"
       >
-        {{ score }}
+        {{ score.ringScore }}
       </view>
     </view>
   </view>
@@ -153,10 +177,16 @@ const props = defineProps({
 .rank-rows > view > text {
   margin-left: 10px;
   flex: 0 0 auto;
+  display: block;
+  width: 25px;
+}
+.rank-rows > view > text:nth-child(3) {
+  width: 80px;
 }
 .rank-rows > view > text:nth-child(4) {
   color: #fed847;
   padding-right: 10px;
   border-right: 1px solid #fff3;
+  width: 32px;
 }
 </style>

src/components/PlayerScore.vue

@@ -23,16 +23,22 @@ const rowCount = new Array(6).fill(0);
     <view>
       <view>
         <view v-for="(_, index) in rowCount" :key="index">
-          <text>{{ scores[index + 6] ? `${scores[index + 6]}环` : "-" }}</text>
+          <text>{{ scores[index] ? `${scores[index].ring}环` : "-" }}</text>
         </view>
       </view>
       <view>
         <view v-for="(_, index) in rowCount" :key="index">
-          <text>{{ scores[index + 6] ? `${scores[index + 6]}环` : "-" }}</text>
+          <text>{{
+            scores[index + 6] ? `${scores[index + 6].ring}环` : "-"
+          }}</text>
         </view>
       </view>
     </view>
-    <text>{{ scores.reduce((last, next) => last + next) }}环</text>
+    <text
+      >{{
+        scores.map((s) => s.ring).reduce((last, next) => last + next, 0)
+      }}环</text
+    >
   </view>
 </template>
 
@@ -52,6 +58,7 @@ const rowCount = new Array(6).fill(0);
 }
 .container > image:first-child {
   width: 30px;
+  height: 30px;
   border: 1px solid #fff3;
   border-radius: 50%;
   margin-right: 10px;
@@ -80,7 +87,7 @@ const rowCount = new Array(6).fill(0);
   border-bottom: 1px solid #fff3;
 }
 .container > text:nth-child(4) {
-  width: 50px;
+  width: 40px;
   text-align: right;
 }
 </style>