117 lines
2.5 KiB
Vue
117 lines
2.5 KiB
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: "箭头面向靶子",
|
|
src: "https://static.shelingxingqiu.com/attachment/2025-10-30/ddv9p5fk5wscg7hrfo.png",
|
|
},
|
|
{
|
|
title: "摆出拉弓姿势",
|
|
src: "https://static.shelingxingqiu.com/attachment/2025-10-30/ddv9p5fk5b7ljrhx3o.png",
|
|
},
|
|
{
|
|
title: "调整瞄准器",
|
|
src: "https://static.shelingxingqiu.com/attachment/2025-10-29/dduexjgrcxf9wjaiv4.png",
|
|
},
|
|
];
|
|
|
|
const done = ref(true);
|
|
|
|
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: 24rpx;
|
|
color: #fff9;
|
|
margin: 30rpx;
|
|
}
|
|
</style>
|