Jelajahi Sumber

新增手机访问提示弹窗,优化非手机用户的跳转体验

yuanmingze 1 bulan lalu
induk
melakukan
cbe245676f
1 mengubah file dengan 27 tambahan dan 5 penghapusan
  1. 27 5
      src/views/wechat-redirect/index.vue

+ 27 - 5
src/views/wechat-redirect/index.vue

@@ -56,10 +56,17 @@
         <p>若长时间未跳转,请稍后重试</p>
       </div>
     </div>
+    <!-- 修改密码弹窗 -->
+    <ModernDialog
+      v-model:show="showDialog"
+      title="提示"
+      message="电脑无法访问本链接,请使用手机访问。如您已使用手机访问,请将您的默认浏览器的浏览器标识设置为“手机版”"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
+import ModernDialog from '@/components/ModernDialog.vue'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { showToast } from 'vant'
@@ -117,8 +124,8 @@ const redirectToMiniapp = async (): Promise<void> => {
       showToast(res.msg || '跳转链接生成失败')
       return
     }
-
-    window.location.href = res.data
+    // 跳转
+    window.location.replace(res.data)
   } catch (error) {
     console.error('[redirectToMiniapp] failed:', error)
     showToast('页面跳转失败,请稍后重试')
@@ -170,11 +177,26 @@ const startProgress = (): void => {
   }, 300)
 }
 
-onMounted(() => {
+const showDialog = ref(false)
+
+const isMobile = (): boolean => {
+  const ua = navigator.userAgent.toLowerCase()
+  return /android|iphone|ipad|ipod|mobile|wechat|micromessenger/i.test(ua)
+}
+
+const init = async (): Promise<void> => {
+  if (!isMobile()) {
+    showDialog.value = true
+    return
+  }
+
   startProgress()
-  redirectToMiniapp()
-})
+  await redirectToMiniapp()
+}
 
+onMounted(() => {
+  init()
+})
 onBeforeUnmount(() => {
   clearTimer()
 })