CRM_26-06-16#story#8836,小板跳转APP的h5链接增加操作指引

src/views/goToApp/goToApp.vue

@@ -7,6 +7,12 @@
         <div class="font_cls">如已安装未自动跳转，请 <span @click="downLoadHandler">立即下载</span></div>
       </div>
     </div>
+
+    <!-- 微信内置浏览器引导 -->
+    <div v-if="showGuide" class="guide-mask" @click.self="closeGuide">
+      <img class="guide-img" src="@/assets/sucai.png" alt="引导在浏览器打开" />
+      <div class="guide-btn" @click="closeGuide">我知道了</div>
+    </div>
   </div>
 </template>
 
@@ -14,7 +20,22 @@
 import { getNewVersion } from "@/api/order"
 export default {
   name: "goToApp",
+  data() {
+    return {
+      showGuide: false
+    }
+  },
+  mounted() {
+    this.showGuide = this.isWeixin()
+  },
   methods: {
+    isWeixin() {
+      const ua = navigator.userAgent.toLowerCase()
+      return ua.indexOf('micromessenger') !== -1
+    },
+    closeGuide() {
+      this.showGuide = false
+    },
     goAppHandler() {
       window.location.href = "rvdriver://page/pagesLogin/phoneLogin?source=h5Link";
     },
@@ -70,4 +91,32 @@ export default {
     }
   }
 }
-</style>
+.guide-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.85);
+}
+.guide-img {
+  width: 90%;
+  margin-top: 12vh;
+  object-fit: contain;
+}
+.guide-btn {
+  width: 140px;
+  height: 40px;
+  margin-top: 40px;
+  border: 1px solid #FFFFFF;
+  border-radius: 20px;
+  font-size: 15px;
+  color: #FFFFFF;
+  line-height: 40px;
+  text-align: center;
+}
+</style>