练习结果完善

src/components/ScoreResult.vue

@@ -20,9 +20,9 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
-  scores: {
-    type: Array,
-    default: () => [],
+  result: {
+    type: Object,
+    default: () => ({}),
   },
 });
 const showPanel = ref(true);
@@ -39,14 +39,20 @@ setTimeout(() => {
 </script>
 
 <template>
-  <view class="container" :style="{ display: show ? 'block' : 'none' }">
+  <view
+    v-if="result.arrows && result.arrows.length > 0"
+    class="container"
+    :style="{ display: show ? 'block' : 'none' }"
+  >
     <view :class="['container-header', showPanel ? 'scale-in' : 'scale-out']">
       <image src="../static/finish-tip.png" mode="widthFix" />
       <image src="../static/finish-frame.png" mode="widthFix" />
       <text
         >完成<text class="gold-text">{{ total }}</text
         >箭，获得<text class="gold-text">{{
-          scores.reduce((last, next) => last + next, 0)
+          result.arrows
+            .map((a) => a.ring)
+            .reduce((last, next) => last + next, 0)
         }}</text
         >点经验</text
       >
@@ -58,7 +64,9 @@ setTimeout(() => {
       <view>
         <text
           >本剧成绩（共{{
-            scores.reduce((last, next) => last + next, 0)
+            result.arrows
+              .map((a) => a.ring)
+              .reduce((last, next) => last + next, 0)
           }}环）：</text
         >
         <button>
@@ -71,8 +79,8 @@ setTimeout(() => {
         </button>
       </view>
       <view :style="{ gridTemplateColumns: `repeat(${rowCount}, 1fr)` }">
-        <view v-for="(score, index) in scores" :key="index">
-          {{ score }}<text>环</text>
+        <view v-for="(score, index) in result.arrows" :key="index">
+          {{ score.ring }}<text>环</text>
         </view>
       </view>
       <view>
@@ -88,8 +96,7 @@ setTimeout(() => {
       </view>
     </view>
     <CoachComment :show="showComment" :onClose="() => (showComment = false)">
-      您本次练习取得了 环的成绩，所有箭支上靶后的平均点间距为 ，成绩优秀。
-      针对您本次的练习，我们建议您将设备的瞄准器向左侧调整。
+      {{ result.adjustmentHint }}
     </CoachComment>
   </view>
 </template>