个人练习流程优化

src/pages/first-try.vue

@@ -20,7 +20,6 @@ const { user } = storeToRefs(store);
 const { updateUser } = store;
 const scores = ref([]);
 const step = ref(0);
-const showScore = ref(false);
 const total = 12;
 const stepButtonTexts = [
   "开始",
@@ -35,9 +34,11 @@ const start = ref(false);
 const practiseResult = ref({});
 const power = ref(0);
 const btnDisabled = ref(false);
+const practiseId = ref("");
 
 const createPractise = async (arrows) => {
   const result = await createPractiseAPI(arrows);
+  if (result) practiseId.value = result.id;
 };
 
 async function onReceiveMessage(messages = []) {
@@ -45,21 +46,27 @@ async function onReceiveMessage(messages = []) {
     if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
       scores.value.push(msg.target);
       power.value = msg.target.battery;
-      if (scores.value.length === total) {
-        showScore.value = true;
-      }
       // if (step.value === 2 && msg.target.dst / 100 > 5) {
       if (step.value === 2 && msg.target.dst > 5) {
         btnDisabled.value = false;
       }
     }
     if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
-      start.value = false;
-      practiseResult.value = {
-        ...msg.practice,
-        arrows: JSON.parse(msg.practice.arrows),
-      };
-      generateCanvasImage("shareCanvas", 1, user.value, practiseResult.value);
+      if (practiseId.value && practiseId.value === msg.practice.id) {
+        setTimeout(() => {
+          start.value = false;
+          practiseResult.value = {
+            ...msg.practice,
+            arrows: JSON.parse(msg.practice.arrows),
+          };
+          generateCanvasImage(
+            "shareCanvas",
+            1,
+            user.value,
+            practiseResult.value
+          );
+        }, 2000);
+      }
     }
   });
 }
@@ -97,8 +104,8 @@ const nextStep = async () => {
 };
 
 const onClose = () => {
-  showScore.value = false;
   setTimeout(() => {
+    practiseResult.value = {};
     step.value = 5;
   }, 500);
 };
@@ -191,7 +198,7 @@ const onClose = () => {
       <BowTarget
         :start="start"
         :avatar="step === 2 ? user.avatar : ''"
-        :power="step !== 2 ? power : 0"
+        :power="start ? 0 : power"
         :debug="step === 2"
         v-if="step === 2 || step === 4"
         :currentRound="step === 4 ? scores.length : 0"
@@ -212,10 +219,9 @@ const onClose = () => {
         :scores="scores.map((s) => s.ring)"
       />
       <ScoreResult
+        v-if="practiseResult.arrows"
         :total="total"
         :rowCount="6"
-        :show="showScore"
-        v-if="step === 4"
         :onClose="onClose"
         :result="practiseResult"
       />