流程完善

src/components/ScoreResult.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
 import IconButton from "@/components/IconButton.vue";
 import SButton from "@/components/SButton.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
@@ -36,7 +36,6 @@ const showPanel = ref(true);
 const showComment = ref(false);
 const showBowData = ref(false);
 const showUpgrade = ref(false);
-const finished = ref(false);
 const totalRing = ref(0);
 const closePanel = () => {
   showPanel.value = false;
@@ -51,15 +50,22 @@ onMounted(() => {
   if (props.result.lvl > user.value.lvl) {
     showUpgrade.value = true;
   }
-  if (props.result.arrows) {
-    totalRing.value = props.result.arrows.reduce(
-      (last, next) => last + next.ring,
-      0
-    );
-  }
-  finished.value =
-    props.result.arrows && props.result.arrows.length === props.total;
+  totalRing.value = (props.result.arrows || []).reduce(
+    (last, next) => last + next.ring,
+    0
+  );
 });
+
+const validArrows = computed(() => {
+  return (props.result.arrows || []).filter(
+    (arrow) => arrow.x !== -30 && arrow.y !== -30
+  ).length;
+});
+
+const getRing = (arrow) => {
+  if (arrow && arrow.x !== -30 && arrow.y !== -30) return arrow.ring;
+  return "-";
+};
 </script>
 
 <template>
@@ -68,8 +74,8 @@ onMounted(() => {
       <image :src="tipSrc" mode="widthFix" />
       <image src="../static/finish-frame.png" mode="widthFix" />
       <text
-        >完成<text class="gold-text">{{ result.arrows.length }}</text
-        >箭，获得<text class="gold-text">{{ result.arrows.length }}</text
+        >完成<text class="gold-text">{{ validArrows }}</text
+        >箭，获得<text class="gold-text">{{ validArrows }}</text
         >点经验</text
       >
     </view>
@@ -90,12 +96,12 @@ onMounted(() => {
       </view>
       <view :style="{ gridTemplateColumns: `repeat(${rowCount}, 1fr)` }">
         <view v-for="(_, index) in new Array(total).fill(0)" :key="index">
-          {{ result.arrows[index] ? result.arrows[index].ring : 0
-          }}<text>环</text>
+          {{ getRing(result.arrows[index])
+          }}<text v-if="getRing(result.arrows[index]) !== '-'">环</text>
         </view>
       </view>
       <view>
-        <block v-if="finished">
+        <block v-if="validArrows === total">
           <IconButton
             name="分享"
             src="../static/share.png"
@@ -108,10 +114,10 @@ onMounted(() => {
           />
         </block>
         <SButton
-          :width="finished ? '70vw' : 'calc(100vw - 20px)'"
+          :width="validArrows === total ? '70vw' : 'calc(100vw - 20px)'"
           :rounded="30"
           :onClick="closePanel"
-          >{{ finished ? "完成" : "重新挑战" }}</SButton
+          >{{ validArrows === total ? "完成" : "重新挑战" }}</SButton
         >
       </view>
     </view>