shoot-miniprograms/src/pages/calibration.vue

<script setup>
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 = [
  {
    title: "保持5米站距",
    src: "https://static.shelingxingqiu.com/attachment/2025-10-29/dduexjgrdx5j4saxvu.png",
  },
  {
    title: "摆出拉弓姿势",
    src: "https://static.shelingxingqiu.com/attachment/2025-10-29/dduexjgrd9ziw2yh2c.png",
  },
  {
    title: "调整瞄准器",
    src: "https://static.shelingxingqiu.com/attachment/2025-10-29/dduexjgrcxf9wjaiv4.png",
  },
];

const done = ref(false);

const onComplete = async () => {
  await laserCloseAPI();
  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>
  <Container title="校准智能弓">
    <view class="container">
      <view v-for="(guide, index) in guides" :key="guide.title" class="guide">
        <view>
          <text>{{ index + 1 }}</text>
          <text>{{ guide.title }}</text>
        </view>
        <image :src="guide.src" mode="widthFix" />
      </view>
      <text>请完成以上步骤校准智能弓</text>
      <SButton
        :onClick="onComplete"
        width="60vw"
        :rounded="40"
        :disabled="!done"
      >
        我已校准
      </SButton>
    </view>
  </Container>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 26rpx;
  color: #ffffff;
  margin-bottom: 15rpx;
}
.guide > view {
  width: 100%;
  margin: 25rpx 0;
  display: flex;
  align-items: center;
}
.guide > view > text:first-child {
  font-size: 24rpx;
  background: #e89024;
  border-radius: 50%;
  width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  display: block;
  text-align: center;
  margin-right: 15rpx;
}
.guide > image {
  width: 630rpx;
  height: 250rpx;
}
.container > text {
  font-size: 20rpx;
  color: #fff9;
  margin: 30rpx;
}
</style>