feat: 扫描过程中引导顾客平举手机，扫描周围环境

pages/calibrator/calibrator.js

@@ -0,0 +1,71 @@
+// pages/calibrator/calibrator.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {},
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    pendingStart: 0,
+    success: false,
+    lineStyle: "",
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {},
+  lifetimes: {
+    attached() {
+      const windowInfo = wx.getWindowInfo();
+      const vh = windowInfo.windowHeight;
+      wx.startDeviceMotionListening({ interval: "ui" });
+      this.deviceCb = ({ beta, gamma }) => {
+        if (this.data.success) return;
+        const isGammaPass =
+          (gamma > -45 && gamma < 45) || gamma < -135 || gamma > 135;
+        let top =
+          (((Math.abs(gamma) > 90 ? 180 - Math.abs(beta) : Math.abs(beta)) /
+            90) *
+            vh) /
+          2;
+        if (!isGammaPass) {
+          if (top < vh / 2) top = vh / 2 - 100;
+          else top = vh / 2 + 100;
+        }
+        const success = top > vh / 2 - 50 && top < vh / 2 + 50;
+        if (!success) {
+          this.setData({
+            lineStyle: `top: ${top}px;`,
+            pendingStart: 0,
+          });
+        } else if (!this.data.pendingStart) {
+          this.setData({
+            lineStyle: `top: ${top}px;`,
+            pendingStart: Date.now(),
+          });
+        } else if (Date.now() - this.data.pendingStart > 750) {
+          this.setData({
+            lineStyle: `top: ${top}px;`,
+            success: true,
+          });
+          setTimeout(() => {
+            this.triggerEvent("success");
+          }, 500);
+        } else {
+          this.setData({
+            lineStyle: `top: ${top}px;`,
+          });
+        }
+      };
+      wx.onDeviceMotionChange(this.deviceCb);
+    },
+    detached() {
+      wx.offDeviceMotionChange(this.deviceCb);
+      wx.stopDeviceMotionListening();
+    },
+  },
+});

pages/calibrator/calibrator.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

pages/calibrator/calibrator.wxml

@@ -0,0 +1,14 @@
+<view class="calibrator">
+  <view class="title">请竖举手机</view>
+  <view class="meta">将摄像头对准周围环境，并保持手机对准水平状态</view>
+  <view class="rect">
+    <view class="l1"></view>
+    <image src="./p.png" class="p" mode="" />
+    <view class="l2"></view>
+  </view>
+  <view class="meta1">请校准手机至中间高亮区域</view>
+  <view class="line" style="{{ lineStyle }}">
+    <view class="l"></view>
+    <image src="./p1.png" class="p" mode="" />
+  </view>
+</view>

pages/calibrator/calibrator.wxss

@@ -0,0 +1,127 @@
+.calibrator {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  background: rgba(0, 0, 0, 0.8);
+}
+.rect {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  left: 0;
+  top: calc(50vh - 40px);
+  width: 100vw;
+  height: 80px;
+  background: rgba(238, 233, 222, 0.3);
+  backdrop-filter: blur(3px);
+}
+.rect .l1 {
+  position: absolute;
+  bottom: 25px;
+  left: 14px;
+  width: calc(50vw - 30px);
+  border-top: 2px dashed rgba(215, 207, 198, 0.4);
+}
+.rect .l2 {
+  position: absolute;
+  bottom: 25px;
+  right: 14px;
+  width: calc(50vw - 30px);
+  border-top: 2px dashed rgba(215, 207, 198, 0.4);
+}
+.rect .p {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 16px;
+  margin: auto;
+  width: 24px;
+  height: 40px;
+}
+.title {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(50vh - 40px - 192px - 34px);
+  margin: auto;
+  color: var(--T-G1, #eee9de);
+  text-align: center;
+  /* 标题-Title1/B */
+  font-family: "PingFang SC";
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  z-index: 2;
+}
+.opacity6 {
+  opacity: 0.6;
+}
+.meta {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(50vh - 40px - 137px - 41px);
+  width: 288px;
+  margin: auto;
+  padding: 12px;
+  border-radius: 16px;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(6px);
+  color: var(--T-9, #fff);
+  text-align: center;
+  font-family: "PingFang SC";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  z-index: 2;
+}
+.line {
+  position: absolute;
+  width: 100vh;
+  height: 80px;
+  top: 50vh;
+  left: 0;
+  transform-origin: center;
+  transform: translateY(-40px);
+  z-index: 1;
+}
+.line .l {
+  position: absolute;
+  left: 16px;
+  right: 16px;
+  width: calc(100vw - 32px);
+  background: #ffdb00;
+  height: 4px;
+  border-radius: 100px;
+  bottom: 23px;
+  z-index: 1;
+}
+.line .p {
+  position: absolute;
+  width: 30px;
+  height: 56px;
+  left: calc(50vw - 15px);
+  bottom: 11px;
+  z-index: 2;
+}
+.meta1 {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(50vh + 40px + 18px);
+  color: var(--T-G2, #d1c8b9);
+  text-align: center;
+  /* Font/正文B2M-14 */
+  font-family: "PingFang SC";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  z-index: 2;
+}

pages/index/index-helper.js

@@ -15,7 +15,7 @@ export const STATES = {
   noCamera: "noCamera",
   tomap: "tomap",
   arriveEnd: "arriveEnd",
-  bluetoothRequired: "bluetoothRequired",
+  bluetoothRequired: "bluetoothRequired",calibrating: "calibrating",
 };
 export const promptIcons = {
   info: "info",

pages/index/index.js

@@ -175,6 +175,9 @@ Page({
         registerGLTFLoader(THREE);
       });
   },
+  startCalibrator() {
+    this.setData({ state: STATES.calibrating });
+  },
   requestLocation() {
     if (!(this.data.inited && this.data.floorOrder !== null)) return;
     if (!this.sdkInited) {
@@ -554,7 +557,7 @@ Page({
       if (btn === "3") return this.exit();
     }
     if (state === STATES.fail8s) {
-      if (btn === "1") return this.requestLocation();
+      if (btn === "1") return this.startCalibrator();
       if (btn === "2") return this.setState(STATES.selectFloor);
       if (btn === "3") return this.exit();
     }
@@ -576,7 +579,7 @@ Page({
           floorId: nextFloor.floorId,
           floorName: nextFloor.name,
         });
-      return this.requestLocation();
+      return this.startCalibrator();
     }
     if (state === STATES.requestEnd || state === STATES.arriveEnd) {
       if (btn === "1") return this.exit();
@@ -642,7 +645,7 @@ Page({
   },
   handleRelocate() {
     this.SDK.finishARNavigation();
-    this.requestLocation();
+    this.startCalibrator();
   },
   handleNavExit() {
     this.setState(STATES.requestEnd);

pages/index/index.json

@@ -4,6 +4,7 @@
     "map2d": "../map2d/map2d",
     "tabs": "../tabs/tabs",
     "destination": "../destination/destination",
-    "nav": "../nav/nav"
+    "nav": "../nav/nav",
+    "calibrator": "../calibrator/calibrator"
   }
-}
+}

pages/index/index.wxml

@@ -26,7 +26,7 @@
           {{item.name}}
         </view>
       </scroll-view>
-      <button bindtap="requestLocation" loading="{{!inited}}" class="btn {{(inited && floorOrder!==null)? '' : 'disabled'}}">开始导航</button>
+      <button bindtap="startCalibrator" loading="{{!inited}}" class="btn {{(inited && floorOrder!==null)? '' : 'disabled'}}">开始导航</button>
     </view>
   </view>
 </view>
@@ -67,6 +67,7 @@
   </view>
   <view class="btn" bindtap="exit">返回</view>
 </view>
+<calibrator wx:if="{{state===states.calibrating}}" bindsuccess="requestLocation"></calibrator>
 <prompt wx:if="{{!!promptStateMap[state]}}" icon="{{promptStateMap[state].icon}}" title="{{state===states.arriveElevator?'请乘坐直梯至'+nextFloor.name:state ===states.arriveEscalator?'请乘坐扶梯至'+nextFloor.name:promptStateMap[state].title}}" meta="{{(state===states.arriveElevator||state===states.arriveEscalator)&&(nextFloor.name==='-3F'||nextFloor.name==='-2F'||nextFloor.name==='-1F')?'离开电梯厅后重新扫描':promptStateMap[state].meta}}" btn1="{{((state===states.arriveElevator||state ===states.arriveEscalator)&&nextNextFloor)?'已到达目标'+(nextNextFloor.isPark?'停车场':'商场'):promptStateMap[state].btn1}}" btn2="{{promptStateMap[state].btn2}}" btn3="{{promptStateMap[state].btn3}}" bindbtn="handlePromptBtn"></prompt>
 <view wx:if="{{state===states.successPrompt}}" class="success-prompt">
   <image src="./success.png"></image>