添加校准声音

src/pages/calibration.vue

@@ -1,9 +1,11 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, onBeforeUnmount } from "vue";
 import Container from "@/components/Container.vue";
 import SButton from "@/components/SButton.vue";
 
 import { laserAimAPI, laserCloseAPI } from "@/apis";
+import { MESSAGETYPES } from "@/constants";
+import audioManager from "@/audioManager";
 
 const guides = [
   {
@@ -20,15 +22,32 @@ const guides = [
   },
 ];
 
+const done = ref(false);
+
 const onComplete = async () => {
   await laserCloseAPI();
-  uni.setStorageSync("calibration", true);
   uni.navigateBack();
 };
 
+function onReceiveMessage(messages = []) {
+  messages.forEach((msg) => {
+    if (msg.constructor === MESSAGETYPES.Calibration) {
+      done.value = true;
+      uni.setStorageSync("calibration", true);
+      audioManager.play("激光已校准");
+    }
+  });
+}
+
 onMounted(async () => {
+  uni.$on("socket-inbox", onReceiveMessage);
   await laserAimAPI();
 });
+
+onBeforeUnmount(async () => {
+  uni.$off("socket-inbox", onReceiveMessage);
+  await laserCloseAPI();
+});
 </script>
 
 <template>
@@ -42,7 +61,12 @@ onMounted(async () => {
         <image :src="guide.src" mode="widthFix" />
       </view>
       <text>请完成以上步骤校准智能弓</text>
-      <SButton :onClick="onComplete" width="60vw" :rounded="40">
+      <SButton
+        :onClick="onComplete"
+        width="60vw"
+        :rounded="40"
+        :disabled="!done"
+      >
         我已校准
       </SButton>
     </view>

src/pages/my-device.vue

@@ -78,6 +78,7 @@ const toFristTryPage = () => {
 
 const unbindDevice = async () => {
   await unbindDeviceAPI(device.value.deviceId);
+  uni.setStorageSync("calibration", false);
   uni.showToast({
     title: "解绑成功",
     icon: "success",
@@ -203,10 +204,6 @@ onShow(() => {
           <text>{{ user.nickName }}</text>
         </view>
       </view>
-      <view v-if="!calibration">
-        <text>恭喜，你的弓箭和账号已成功绑定！</text>
-        <text :style="{ color: '#fed847' }">已赠送6个月射灵世界会员</text>
-      </view>
       <block v-if="calibration">
         <SButton :onClick="toFristTryPage" width="60vw" :rounded="40"
           >进入新手试炼</SButton
@@ -223,6 +220,10 @@ onShow(() => {
         </view>
       </block>
       <block v-else>
+        <view>
+          <text>恭喜，你的弓箭和账号已成功绑定！</text>
+          <text :style="{ color: '#fed847' }">已赠送6个月射灵世界会员</text>
+        </view>
         <SButton :onClick="goCalibration" width="60vw" :rounded="40">
           校准智能弓
         </SButton>
@@ -236,7 +237,7 @@ onShow(() => {
         <view @click="toDeviceIntroPage">
           <image src="../static/device-icon.png" mode="widthFix" />
           <text>{{ device.deviceName }}</text>
-          <view class="calibration" v-if="calibration">
+          <view class="calibration">
             <button hover-class="none" @click="goCalibration">
               <text>去校准</text>
               <image src="../static/enter-arrow-blue.png" mode="widthFix" />