新手试炼流程优化

src/apis.js

@@ -63,9 +63,7 @@ export const unbindDeviceAPI = (deviceId) => {
 
 export const getMyDevicesAPI = () => {
   // "/user/device/getBinding?deviceId=9ZF9oVXs"
-  return request("GET", "/user/device/getBindings", {
-    deviceId,
-  });
+  return request("GET", "/user/device/getBindings");
 };
 
 export const createPractiseAPI = (arrows) => {

src/components/SButton.vue

@@ -12,14 +12,26 @@ const props = defineProps({
     type: Function,
     default: () => {},
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
 
 <template>
   <view
     class="sbtn"
-    :style="{ width: width, borderRadius: rounded + 'px' }"
-    @click="onClick"
+    :style="{
+      width: width,
+      borderRadius: rounded + 'px',
+      backgroundColor: disabled ? '#757575' : '#fed847',
+    }"
+    @click="
+      () => {
+        if (!disabled) onClick();
+      }
+    "
   >
     <slot />
   </view>
@@ -31,7 +43,6 @@ const props = defineProps({
   height: 40px;
   line-height: 40px;
   font-weight: bold;
-  background-color: #fed847;
   font-size: 15px;
   text-align: center;
   display: flex;

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>