完成单组练习接口调试

src/components/BowTarget.vue

@@ -1,6 +1,6 @@
 <script setup>
 import BowPower from "@/components/BowPower.vue";
-defineProps({
+const props = defineProps({
   totalRound: {
     type: Number,
     default: 0,
@@ -25,7 +25,20 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  scores: {
+    type: Array,
+    default: () => [],
+  },
 });
+
+function calcRealX(num) {
+  const len = 20 + num;
+  return `calc(${(len / 40) * 100}% - 10px)`;
+}
+function calcRealY(num) {
+  const len = num < 0 ? Math.abs(num) + 20 : 20 - num;
+  return `calc(${(len / 40) * 100}% - 10px)`;
+}
 </script>
 
 <template>
@@ -37,7 +50,19 @@ defineProps({
       }}</text>
       <BowPower v-if="power > 0" :power="power" />
     </view>
-    <image src="../static/bow-target.png" mode="widthFix" />
+    <view class="target">
+      <image
+        v-for="(bow, index) in scores"
+        :key="index"
+        src="../static/hit-icon.png"
+        :class="`hit ${index + 1 === scores.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">
       <image :src="avatar" mode="widthFix" />
     </view>
@@ -50,9 +75,29 @@ defineProps({
   width: calc(100% - 30px);
   margin: 15px;
 }
-.container > image {
+.target {
+  position: relative;
+}
+.target > image:last-child {
   width: 100%;
 }
+@keyframes pumpIn {
+  from {
+    transform: scale(2);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+.pump-in {
+  animation: pumpIn 0.3s ease-out forwards;
+  transform-origin: center center;
+}
+.hit {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+}
 .header {
   width: 100%;
   display: flex;

src/components/CoachComment.vue

@@ -6,10 +6,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  content: {
-    type: String,
-    default: false,
-  },
   onClose: {
     type: Function,
     default: () => {},
@@ -38,7 +34,7 @@ const props = defineProps({
     </view>
     <IconButton
       src="../static/close-gold-outline.png"
-      width="30"
+      :width="30"
       :onClick="onClose"
     />
   </view>

src/components/IconButton.vue

@@ -14,7 +14,7 @@ const props = defineProps({
   },
   width: {
     type: Number,
-    default: "22",
+    default: 22,
   },
 });
 </script>

src/components/ScorePanel2.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { ref } from "vue";
 const props = defineProps({
   scores: {
     type: Array,
@@ -15,7 +14,7 @@ const getSum = (a, b, c) => {
   <view class="container">
     <view>
       <text>总成绩</text>
-      <text>23环</text>
+      <text>{{ scores.reduce((last, next) => last + next, 0) }}环</text>
     </view>
     <view
       v-for="(title, index) in ['第一轮', '第二轮', '第三轮']"
@@ -24,23 +23,25 @@ const getSum = (a, b, c) => {
     >
       <text>{{ title }}</text>
       <text>{{
-        scores[index * 3 + 0] ? scores[index * 3 + 0] + "环" : "-"
+        scores[index * 4 + 0] ? scores[index * 4 + 0] + "环" : "-"
       }}</text>
       <text>{{
-        scores[index * 3 + 1] ? scores[index * 3 + 1] + "环" : "-"
+        scores[index * 4 + 1] ? scores[index * 4 + 1] + "环" : "-"
       }}</text>
       <text>{{
-        scores[index * 3 + 2] ? scores[index * 3 + 2] + "环" : "-"
+        scores[index * 4 + 2] ? scores[index * 4 + 2] + "环" : "-"
+      }}</text>
+      <text>{{
+        scores[index * 4 + 3] ? scores[index * 4 + 3] + "环" : "-"
+      }}</text>
+      <text>{{
+        getSum(
+          scores[index * 4 + 0],
+          scores[index * 4 + 1],
+          scores[index * 4 + 2],
+          scores[index * 4 + 3]
+        )
       }}</text>
-      <text
-        >{{
-          getSum(
-            scores[index * 3 + 0],
-            scores[index * 3 + 1],
-            scores[index * 3 + 2]
-          )
-        }}</text
-      >
     </view>
   </view>
 </template>

src/components/ScoreResult.vue

@@ -20,8 +20,11 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  scores: {
+    type: Array,
+    default: () => [],
+  },
 });
-const items = ref(new Array(props.total).fill(9));
 const showPanel = ref(true);
 const showComment = ref(false);
 const closePanel = () => {
@@ -40,14 +43,22 @@ setTimeout(() => {
     <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>完成36箭，获得36点经验</text>
+      <text
+        >完成{{ total }}箭，获得{{
+          scores.reduce((last, next) => last + next, 0)
+        }}点经验</text
+      >
     </view>
     <view
       class="container-content"
       :style="{ transform: `translateY(${showPanel ? '0%' : '100%'})` }"
     >
       <view>
-        <text>本剧成绩（共{{ total }}环）：</text>
+        <text
+          >本剧成绩（共{{
+            scores.reduce((last, next) => last + next, 0)
+          }}环）：</text
+        >
         <button>
           <text>查看靶纸</text>
           <image
@@ -58,7 +69,7 @@ setTimeout(() => {
         </button>
       </view>
       <view :style="{ gridTemplateColumns: `repeat(${rowCount}, 1fr)` }">
-        <view v-for="(score, index) in items" :key="index">
+        <view v-for="(score, index) in scores" :key="index">
           {{ score }}<text>环</text>
         </view>
       </view>

src/components/ShootProgress.vue

@@ -1,6 +1,10 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, watch } from "vue";
 const props = defineProps({
+  start: {
+    type: Boolean,
+    default: false,
+  },
   tips: {
     type: String,
     default: "",
@@ -10,18 +14,25 @@ const props = defineProps({
     default: 90,
   },
 });
+
 let barColor = "#fed847";
 if (props.tips.includes("红队")) barColor = "#FF6060";
 if (props.tips.includes("蓝队")) barColor = "#5FADFF";
-const remain = ref(0);
-onMounted(() => {
-  remain.value = props.total;
-  setInterval(() => {
-    if (remain.value > 0) {
-      remain.value--;
+const remain = ref(props.total);
+
+watch(
+  () => props.start,
+  (newVal, oldVal) => {
+    if (oldVal === false && newVal === true) {
+      remain.value = props.total;
+      setInterval(() => {
+        if (remain.value > 0) {
+          remain.value--;
+        }
+      }, 1000);
     }
-  }, 1000);
-});
+  }
+);
 </script>
 
 <template>