添加激光校准
This commit is contained in:
kron
92
src/pages/calibration.vue
Normal file
92
src/pages/calibration.vue
Normal file
@@ -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>
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ref } from "vue";
|
||||
import { onShow } from "@dcloudio/uni-app";
|
||||
import Container from "@/components/Container.vue";
|
||||
import ScreenHint from "@/components/ScreenHint.vue";
|
||||
import SButton from "@/components/SButton.vue";
|
||||
@@ -13,6 +14,7 @@ const store = useStore();
|
||||
const { updateDevice } = store;
|
||||
const { user, device } = storeToRefs(store);
|
||||
const justBind = ref(false);
|
||||
const calibration = ref(false);
|
||||
|
||||
// 扫描二维码方法
|
||||
const handleScan = () => {
|
||||
@@ -104,6 +106,16 @@ const copyEmail = () => {
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const goCalibration = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/calibration",
|
||||
});
|
||||
};
|
||||
|
||||
onShow(() => {
|
||||
calibration.value = uni.getStorageSync("calibration");
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -137,7 +149,9 @@ const copyEmail = () => {
|
||||
<text>【注】已被绑定的弓箭无法再次绑定。</text>
|
||||
<view>
|
||||
<text>如有任何疑问，请随时联系：</text>
|
||||
<button hover-class="none" @click="copyEmail">shelingxingqiu@163.com</button>
|
||||
<button hover-class="none" @click="copyEmail">
|
||||
shelingxingqiu@163.com
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</ScreenHint>
|
||||
@@ -161,10 +175,23 @@ const copyEmail = () => {
|
||||
</ScreenHint>
|
||||
</view>
|
||||
<view v-if="justBind" class="just-bind">
|
||||
<view class="device-binded">
|
||||
<view
|
||||
class="device-binded"
|
||||
:style="{ marginBottom: calibration ? '250rpx' : '100rpx' }"
|
||||
>
|
||||
<view @click="toDeviceIntroPage">
|
||||
<image src="../static/device-icon.png" mode="widthFix" />
|
||||
<text>{{ device.deviceName }}</text>
|
||||
<view class="calibration" v-if="calibration">
|
||||
<button hover-class="none" @click="goCalibration">
|
||||
<text>重新校准</text>
|
||||
<image src="../static/enter-arrow-blue.png" mode="widthFix" />
|
||||
</button>
|
||||
<view>
|
||||
<image src="../static/calibration-tip.png" mode="widthFix" />
|
||||
<text>如有场地/距离变化，需重新校准以保证智能弓射箭精准度</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<image src="../static/bind-success.png" mode="widthFix" />
|
||||
<view>
|
||||
@@ -176,17 +203,30 @@ const copyEmail = () => {
|
||||
<text>{{ user.nickName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view v-if="!calibration">
|
||||
<text>恭喜，你的弓箭和账号已成功绑定！</text>
|
||||
<text :style="{ color: '#fed847' }">已赠送6个月射灵世界会员</text>
|
||||
<text>赶快进入新手试炼场体验一下吧！</text>
|
||||
</view>
|
||||
<SButton :onClick="toFristTryPage">进入新手试炼</SButton>
|
||||
<view :style="{ marginTop: '15px' }">
|
||||
<SButton :onClick="backToHome" backgroundColor="#fff3" color="#fff"
|
||||
>返回首页</SButton
|
||||
<block v-if="calibration">
|
||||
<SButton :onClick="toFristTryPage" width="60vw" :rounded="40"
|
||||
>进入新手试炼</SButton
|
||||
>
|
||||
</view>
|
||||
<view :style="{ marginTop: '15px' }">
|
||||
<SButton
|
||||
:onClick="backToHome"
|
||||
backgroundColor="#fff3"
|
||||
color="#fff"
|
||||
width="60vw"
|
||||
:rounded="40"
|
||||
>返回首页</SButton
|
||||
>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<SButton :onClick="goCalibration" width="60vw" :rounded="40">
|
||||
校准智能弓
|
||||
</SButton>
|
||||
</block>
|
||||
</view>
|
||||
<view v-if="device.deviceId && !justBind" class="has-device">
|
||||
<view class="device-binded">
|
||||
@@ -204,7 +244,11 @@ const copyEmail = () => {
|
||||
<text>{{ user.nickName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<SButton :onClick="unbindDevice">解绑</SButton>
|
||||
<view :style="{ marginTop: '100rpx' }">
|
||||
<SButton :onClick="unbindDevice" width="80vw" :rounded="40"
|
||||
>解绑</SButton
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</Container>
|
||||
</template>
|
||||
@@ -313,16 +357,17 @@ const copyEmail = () => {
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
margin: 100px 0;
|
||||
margin-top: 200rpx;
|
||||
}
|
||||
.device-binded > view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.device-binded > view > image {
|
||||
width: 24vw;
|
||||
height: 24vw;
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
@@ -334,7 +379,7 @@ const copyEmail = () => {
|
||||
text-align: center;
|
||||
}
|
||||
.device-binded > image {
|
||||
width: 16vw;
|
||||
width: 100rpx;
|
||||
margin: 0 20px;
|
||||
}
|
||||
.has-device,
|
||||
@@ -348,10 +393,41 @@ const copyEmail = () => {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
margin: 75px 0;
|
||||
margin-bottom: 100rpx;
|
||||
}
|
||||
.has-device > view:nth-child(2) > text,
|
||||
.just-bind > view:nth-child(2) > text {
|
||||
margin: 5px;
|
||||
}
|
||||
.calibration {
|
||||
position: absolute;
|
||||
bottom: -145rpx;
|
||||
left: 20rpx;
|
||||
}
|
||||
.calibration > button {
|
||||
font-size: 22rpx;
|
||||
color: #287fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15rpx;
|
||||
margin-left: 50rpx;
|
||||
}
|
||||
.calibration > button > image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
.calibration > view {
|
||||
position: relative;
|
||||
font-size: 20rpx;
|
||||
color: #fff9;
|
||||
padding-top: 40rpx;
|
||||
padding-left: 35rpx;
|
||||
width: 300rpx;
|
||||
}
|
||||
.calibration > view > image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 370rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user