新手试炼流程优化

src/pages/first-try.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import Guide from "@/components/Guide.vue";
 import SButton from "@/components/SButton.vue";
 import Swiper from "@/components/Swiper.vue";
@@ -30,11 +30,14 @@ const stepButtonTexts = [
 const start = ref(false);
 const practiseResult = ref({});
 const power = ref(0);
+const btnDisabled = ref(false);
 
-const onReady = async () => {
-  const result = await createPractiseAPI(total);
+const createPractise = async (arrows) => {
+  const result = await createPractiseAPI(arrows);
+};
+
+onMounted(() => {
   const token = uni.getStorageSync("token");
-  start.value = true;
   websocket.createWebSocket(token, (content) => {
     const messages = JSON.parse(content).data.updates || [];
     messages.forEach((msg) => {
@@ -43,6 +46,9 @@ const onReady = async () => {
         if (scores.value.length === total) {
           showScore.value = true;
         }
+        if (step.value === 2 && msg.target.dst > 5) {
+          btnDisabled.value = false;
+        }
       }
       if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
         practiseResult.value = {
@@ -52,22 +58,25 @@ const onReady = async () => {
       }
     });
   });
-};
+});
 
 onUnmounted(() => {
   websocket.closeWebSocket();
 });
 
-const nextStep = () => {
+const nextStep = async () => {
   if (step.value === 0) {
     step.value = 1;
   } else if (step.value === 1) {
+    await createPractise(1);
+    btnDisabled.value = true;
     step.value = 2;
   } else if (step.value === 2) {
     step.value = 3;
   } else if (step.value === 3) {
+    scores.value = [];
+    await createPractise(total);
     step.value = 4;
-    onReady();
   } else if (step.value === 5) {
     uni.navigateBack({
       delta: 1,
@@ -159,7 +168,13 @@ const onClose = () => {
       :power="power"
       :debug="step === 2"
       v-if="step === 2 || step === 4"
-      :tips="step === 4 ? '' : '本次射程5.2米，已达到距离要求'"
+      :tips="
+        step === 2 && scores.length > 0
+          ? `本次射程${scores[scores.length - 1].dst}米，${
+              scores[scores.length - 1].dst >= 5 ? '已' : '未'
+            }达到距离要求`
+          : ''
+      "
       :scores="scores"
     />
     <ScorePanel
@@ -176,7 +191,7 @@ const onClose = () => {
       :onClose="onClose"
       :result="practiseResult"
     />
-    <SButton v-if="step !== 4" :onClick="nextStep">{{
+    <SButton v-if="step !== 4" :onClick="nextStep" :disabled="btnDisabled">{{
       stepButtonTexts[step]
     }}</SButton>
   </Container>