个人练习流程优化

src/components/ScorePanel.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from "vue";
+import { ref, watch, onMounted, onUnmounted } from "vue";
 const props = defineProps({
   rowCount: {
     type: Number,
@@ -13,25 +13,54 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
-  margin: {
-    type: Number,
-    default: 4,
-  },
   fontSize: {
     type: Number,
     default: 25,
   },
 });
 const items = ref(new Array(props.total).fill(9));
+const width = ref(92);
+const itemWidth = ref(0);
+const bgImages = [
+  "../static/complete-light1.png",
+  "../static/complete-light2.png",
+];
+const bgIndex = ref(0);
 watch(
   () => props.total,
   (newValue) => {
     items.value = new Array(newValue).fill(9);
   }
 );
+const timer = ref(null);
+onMounted(() => {
+  timer.value = setInterval(() => {
+    bgIndex.value = bgIndex.value === 0 ? 1 : 0;
+  }, 500);
+});
+onUnmounted(() => {
+  if (timer.value) {
+    clearInterval(timer.value);
+  }
+});
 </script>
 <template>
   <view class="container">
+    <image
+      v-if="total > 0 && scores.length === total"
+      :src="bgImages[bgIndex]"
+      class="complete-light"
+      :style="{
+        width: `calc(${(100 / (rowCount + 2)) * rowCount}vw + ${
+          (100 / (total * 2)) * (rowCount * 2 + (total === 12 ? 8 : 24))
+        }px)`,
+        height: `calc(${(100 / (rowCount + 2)) * (total / rowCount)}vw + ${
+          (100 / (total * 2)) *
+          ((total / rowCount) * 2 + (total === 12 ? 7 : 24))
+        }px)`,
+        top: `${total === 12 ? -2 : -3}vw`,
+      }"
+    />
     <view
       v-for="(_, index) in items"
       :key="index"
@@ -41,7 +70,7 @@ watch(
         height: 100 / (rowCount + 2) + 'vw',
         lineHeight: 100 / (rowCount + 2) + 'vw',
         fontSize: fontSize + 'px',
-        margin: margin + 'px',
+        margin: 100 / (total * 2) + 'px',
       }"
     >
       <image src="../static/score-bg.png" mode="widthFix" />
@@ -52,11 +81,13 @@ watch(
 
 <style scoped>
 .container {
-  width: 90vw;
+  width: 92vw;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin: 0 5vw;
+  position: relative;
+  padding: 1vw 0;
 }
 .score-item {
   /* background-image: url("../static/score-bg.png");
@@ -77,4 +108,7 @@ watch(
 .score-item > text {
   position: relative;
 }
+.complete-light {
+  position: absolute;
+}
 </style>

src/components/ScoreResult.vue

@@ -6,10 +6,6 @@ import ScreenHint from "@/components/ScreenHint.vue";
 import BowData from "@/components/BowData.vue";
 import { wxShare } from "@/util";
 const props = defineProps({
-  show: {
-    type: Boolean,
-    default: false,
-  },
   onClose: {
     type: Function,
     default: () => {},
@@ -42,11 +38,7 @@ setTimeout(() => {
 </script>
 
 <template>
-  <view
-    v-if="result.arrows && result.arrows.length > 0"
-    class="container"
-    :style="{ display: show ? 'block' : 'none' }"
-  >
+  <view v-if="result.arrows && result.arrows.length > 0" class="container">
     <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" />

src/components/StartCountdown.vue

@@ -42,7 +42,7 @@ onUnmounted(() => {
 <style scoped>
 .container {
   position: absolute;
-  top: calc(50% - 50px);
+  top: calc(50% - 64px);
   left: calc(50% - 30px);
 }
 .number {

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