个人练习流程优化

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"
       />

src/pages/my-device.vue

@@ -230,7 +230,6 @@ const backToHome = () => {
   margin-bottom: 10px;
 }
 .confirm-bind {
-  transform: translateY(36px);
   color: #fff9;
   font-size: 14px;
 }

src/pages/practise-one.vue

@@ -17,15 +17,16 @@ const store = useStore();
 const { user } = storeToRefs(store);
 const { updateUser } = store;
 const start = ref(false);
-const showScore = ref(false);
 const scores = ref([]);
 const total = 12;
 const currentRound = ref(0);
 const practiseResult = ref({});
 const power = ref(0);
+const practiseId = ref("");
 
 const onReady = async () => {
-  await createPractiseAPI(total);
+  const result = await createPractiseAPI(total);
+  if (result) practiseId.value = result.id;
   currentRound.value = 0;
   scores.value = [];
   start.value = true;
@@ -40,17 +41,16 @@ async function onReceiveMessage(messages = []) {
         currentRound.value = 1;
       }
       power.value = msg.target.battery;
-      if (scores.value.length === total) {
-        showScore.value = true;
-      }
     }
     if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
-      start.value = false;
-      practiseResult.value = {
-        ...msg.practice,
-        arrows: JSON.parse(msg.practice.arrows),
-      };
-      generateCanvasImage("shareCanvas", 2, user.value, practiseResult.value);
+      if (practiseId.value && practiseId.value === msg.practice.id) {
+        start.value = false;
+        practiseResult.value = {
+          ...msg.practice,
+          arrows: JSON.parse(msg.practice.arrows),
+        };
+        generateCanvasImage("shareCanvas", 2, user.value, practiseResult.value);
+      }
     }
   });
 }
@@ -101,9 +101,9 @@ onUnmounted(() => {
       />
       <ScorePanel2 v-if="start" :scores="scores.map((s) => s.ring)" />
       <ScoreResult
+        v-if="practiseResult.arrows"
         :total="total"
         :rowCount="6"
-        :show="showScore"
         :onClose="onComplete"
         :result="practiseResult"
       />

src/pages/practise-two.vue

@@ -17,15 +17,16 @@ const store = useStore();
 const { user } = storeToRefs(store);
 const { updateUser } = store;
 const start = ref(false);
-const showScore = ref(false);
 const scores = ref([]);
 const total = 36;
 const currentRound = ref(0);
 const practiseResult = ref({});
 const power = ref(0);
+const practiseId = ref("");
 
 const onReady = async () => {
-  await createPractiseAPI(total);
+  const result = await createPractiseAPI(total);
+  if (result) practiseId.value = result.id;
   currentRound.value = 0;
   scores.value = [];
   start.value = true;
@@ -37,17 +38,23 @@ async function onReceiveMessage(messages = []) {
       scores.value.push(msg.target);
       power.value = msg.target.battery;
       currentRound.value += 1;
-      if (scores.value.length === total) {
-        showScore.value = true;
-      }
     }
     if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
-      start.value = false;
-      practiseResult.value = {
-        ...msg.practice,
-        arrows: JSON.parse(msg.practice.arrows),
-      };
-      generateCanvasImage("shareCanvas", 3, 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",
+            3,
+            user.value,
+            practiseResult.value
+          );
+        }, 2000);
+      }
     }
   });
 }
@@ -101,9 +108,9 @@ onUnmounted(() => {
         :font-size="20"
       />
       <ScoreResult
+        v-if="practiseResult.arrows"
         :total="total"
         :rowCount="9"
-        :show="showScore"
         :onClose="onComplete"
         :result="practiseResult"
       />