添加校准声音

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>