添加激光校准

src/pages/my-device.vue

@@ -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>