Просмотр исходного кода

fix: 商品详情弹窗跳转APP

liangan 1 неделя назад
Родитель
Сommit
4c1008ada8
1 измененных файлов с 82 добавлено и 0 удалено
  1. 82 0
      src/pages/productDetail/productDetail.vue

+ 82 - 0
src/pages/productDetail/productDetail.vue

@@ -13,6 +13,7 @@
 import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
 import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
 import { carousel, getDetail, pinkList } from '@/api/product'
+
 import { t } from '@/locale'
 import { formatNumber } from '@/utils/index'
 import CustomTooltip from './components/CustomTooltip.vue'
@@ -266,9 +267,90 @@ function setDefaultSpecs() {
 
 const loading = ref<boolean>(false)
 
+// APP检测相关配置
+const appScheme = 'bandhuBuy://' // 你的APP的URL Scheme,需要根据实际APP配置修改
+const downloadUrl = 'https://static-mp-489f4121-636a-44cd-b309-a132a68309a7.next.bspapp.com/download' // APP下载页面URL
+
+// 检测是否安装了APP
+function checkAppInstalled(): Promise<boolean> {
+  return new Promise((resolve) => {
+    // 尝试打开APP scheme,通过页面可见性变化判断是否安装
+    const iframe = document.createElement('iframe')
+    iframe.style.display = 'none'
+    iframe.src = appScheme
+
+    let resolved = false
+
+    // 设置超时,如果2秒内没有响应,认为APP未安装
+    const timeoutId = setTimeout(() => {
+      if (!resolved) {
+        resolved = true
+        document.body.removeChild(iframe)
+        resolve(false) // APP未安装
+      }
+    }, 2000)
+
+    // 监听页面可见性变化,如果页面变为隐藏状态,说明APP被打开了
+    const handleVisibilityChange = () => {
+      if (document.hidden && !resolved) {
+        resolved = true
+        clearTimeout(timeoutId)
+        document.body.removeChild(iframe)
+        document.removeEventListener('visibilitychange', handleVisibilityChange)
+        resolve(true) // APP已安装并打开
+      }
+    }
+
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+    document.body.appendChild(iframe)
+  })
+}
+
+// 显示分享页面模态框
+function showSharePageModal() {
+  uni.showModal({
+    title: '提示',
+    content: '为了更好的体验,建议您使用我们的APP',
+    confirmText: '打开APP',
+    marker: true,
+    showCancel: false, // 不显示取消按钮,使模态框不可关闭
+    success: (res) => {
+      if (res.confirm) {
+        handleOpenApp()
+      }
+    },
+    fail: () => {
+      // 如果模态框显示失败,也尝试打开APP
+      handleOpenApp()
+    },
+  })
+}
+
+// 打开APP或跳转下载页面
+async function handleOpenApp() {
+  try {
+    const isInstalled = await checkAppInstalled()
+    if (isInstalled) {
+      // APP已安装,尝试打开
+      window.location.href = `${appScheme}productDetail?productId=${productId.value}`
+    }
+    else {
+      // APP未安装,跳转到下载页面
+      window.location.href = downloadUrl
+    }
+  }
+  catch (error) {
+    console.error('检测APP安装状态失败:', error)
+    // 出错时默认跳转到下载页面
+    window.location.href = downloadUrl
+  }
+}
 // 商品详情初始化
 onLoad((options) => {
   productId.value = options.productId || ''
+
+  // 页面加载时直接显示模态框提示用户使用APP
+  showSharePageModal()
 })
 onShow(async () => {
   try {