添加激光校准

src/pages/calibration.vue

@@ -0,0 +1,92 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import Container from "@/components/Container.vue";
+import SButton from "@/components/SButton.vue";
+
+import { laserAimAPI, laserCloseAPI } from "@/apis";
+
+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 onComplete = async () => {
+  await laserCloseAPI();
+  uni.setStorageSync("calibration", true);
+  uni.navigateBack();
+};
+
+onMounted(async () => {
+  await laserAimAPI();
+});
+</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">
+        我已校准
+      </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>