流程完善

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(
-    totalRing.value = props.result.arrows.reduce(
+    (last, next) => last + next.ring,
-      (last, next) => last + next.ring,
+    0
-      0
+  );
-    );
-  }
-  finished.value =
-    props.result.arrows && props.result.arrows.length === props.total;
 });
+
+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">{{ validArrows }}</text
-        >箭，获得<text class="gold-text">{{ result.arrows.length }}</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
+          {{ getRing(result.arrows[index])
-          }}<text>环</text>
+          }}<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>

src/pages/first-try.vue

@@ -138,10 +138,10 @@ const nextStep = async () => {
 };
 
 const onClose = () => {
-  if (
+  const validArrows = (practiseResult.value.arrows || []).filter(
-    practiseResult.value.arrows &&
+    (a) => a.x !== -30 && a.y !== -30
-    practiseResult.value.arrows.length === total
+  );
-  ) {
+  if (validArrows.length === total) {
     setTimeout(() => {
       practiseResult.value = {};
       showGuide.value = false;
@@ -255,7 +255,11 @@ const onClose = () => {
         :onClose="onClose"
         :result="practiseResult"
         :tipSrc="`../static/${
-          practiseResult.arrows.length < total ? 'un' : ''
+          practiseResult.arrows.filter(
+            (arrow) => arrow.x !== -30 && arrow.y !== -30
+          ).length < total
+            ? 'un'
+            : ''
         }finish-tip.png`"
       />
       <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>

src/pages/practise-one.vue

@@ -98,10 +98,10 @@ async function onReceiveMessage(messages = []) {
 }
 
 async function onComplete() {
-  if (
+  const validArrows = (practiseResult.value.arrows || []).filter(
-    practiseResult.value.arrows &&
+    (a) => a.x !== -30 && a.y !== -30
-    practiseResult.value.arrows.length === total
+  );
-  ) {
+  if (validArrows.length === total) {
     uni.navigateBack();
   } else {
     practiseId.value = "";
@@ -178,7 +178,11 @@ onBeforeUnmount(() => {
           :onClose="onComplete"
           :result="practiseResult"
           :tipSrc="`../static/${
-            practiseResult.arrows.length < total ? 'un' : ''
+            practiseResult.arrows.filter(
+              (arrow) => arrow.x !== -30 && arrow.y !== -30
+            ).length < total
+              ? 'un'
+              : ''
           }finish-tip.png`"
         />
         <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>

src/pages/practise-two.vue

@@ -64,16 +64,17 @@ async function onReceiveMessage(messages = []) {
 }
 
 async function onComplete() {
-  if (
+  const validArrows = (practiseResult.value.arrows || []).filter(
-    practiseResult.value.arrows &&
+    (a) => a.x !== -30 && a.y !== -30
-    practiseResult.value.arrows.length === total
+  );
-  ) {
+  if (validArrows.length === total) {
     uni.navigateBack();
   } else {
     practiseId.value = "";
     practiseResult.value = {};
     start.value = false;
     scores.value = [];
+    currentRound.value = 0;
   }
 }
 
@@ -134,7 +135,11 @@ onBeforeUnmount(() => {
           :onClose="onComplete"
           :result="practiseResult"
           :tipSrc="`../static/${
-            practiseResult.arrows.length < total ? '2un' : ''
+            practiseResult.arrows.filter(
+              (arrow) => arrow.x !== -30 && arrow.y !== -30
+            ).length < total
+              ? '2un'
+              : ''
           }finish-tip.png`"
         />
         <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>