Startseite Erkunden Hilfe
Registrieren Anmelden
wangfumin
/
swkz
1
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

新增小程序打开app的h5页面和审核按钮不隐藏

wangfumin vor 5 Monaten
Ursprung
46116ea4fa
Commit
fed4e60ffd
3 geänderte Dateien mit 527 neuen und 16 gelöschten Zeilen
Gesamtansicht Diff-Statistik anzeigen
  1. 16 16
      src/views/modelManage/index.vue
  2. 505 0
      swkzMobile.html
  3. 6 0
      vite.config.js

+ 16 - 16
src/views/modelManage/index.vue
Datei anzeigen 

@@ -404,22 +404,22 @@ const columns = [
 
       const buttons = []
 
       const buttons = []
 
 
 
       // 只有当audit不等于1时才显示审核按钮
 
       // 只有当audit不等于1时才显示审核按钮
 
-      if (row.audit === 0) {
 
-        buttons.push(
 
-          h(
 
-            NButton,
 
-            {
 
-              size: 'small',
 
-              type: 'info',
 
-              onClick: () => handleAudit(row),
 
-            },
 
-            {
 
-              default: () => '审核',
 
-              icon: () => h('i', { class: 'i-material-symbols:check-circle-outline text-14' }),
 
-            },
 
-          ),
 
-        )
 
-      }
 
+      // if (row.audit === 0) {
 
+      buttons.push(
 
+        h(
 
+          NButton,
 
+          {
 
+            size: 'small',
 
+            type: 'info',
 
+            onClick: () => handleAudit(row),
 
+          },
 
+          {
 
+            default: () => '审核',
 
+            icon: () => h('i', { class: 'i-material-symbols:check-circle-outline text-14' }),
 
+          },
 
+        ),
 
+      )
 
+      // }
 
 
 
       // 编辑按钮
 
       // 编辑按钮
 
       buttons.push(
 
       buttons.push(

+ 505 - 0
swkzMobile.html
Datei anzeigen 

@@ -0,0 +1,505 @@
 
+<!doctype html>
 
+<html lang="zh-CN">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>高德地图 - 下载应用</title>
 
+
 
+    <!-- iOS Smart App Banner -->
 
+    <meta name="apple-itunes-app" content="app-id=461703208, app-argument=https://apps.apple.com/cn/app/id461703208" />
 
+
 
+    <!-- 微信分享优化 -->
 
+    <meta property="og:title" content="高德地图 - 精准导航" />
 
+    <meta property="og:description" content="精准导航，出行必备" />
 
+    <meta property="og:image" content="https://your-domain.com/logo.png" />
 
+
 
+    <!-- 防止缓存 -->
 
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
 
+    <meta http-equiv="Pragma" content="no-cache" />
 
+    <meta http-equiv="Expires" content="0" />
 
+    <style>
 
+      * {
 
+        margin: 0;
 
+        padding: 0;
 
+        box-sizing: border-box;
 
+      }
 
+
 
+      body {
 
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
 
+          'Microsoft YaHei', sans-serif;
 
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
+        min-height: 100vh;
 
+        display: flex;
 
+        align-items: center;
 
+        justify-content: center;
 
+        padding: 20px;
 
+      }
 
+
 
+      .container {
 
+        background: white;
 
+        border-radius: 20px;
 
+        padding: 40px 30px;
 
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
 
+        text-align: center;
 
+        max-width: 400px;
 
+        width: 100%;
 
+      }
 
+
 
+      .logo {
 
+        width: 80px;
 
+        height: 80px;
 
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
+        border-radius: 20px;
 
+        margin: 0 auto 20px;
 
+        display: flex;
 
+        align-items: center;
 
+        justify-content: center;
 
+        font-size: 32px;
 
+        color: white;
 
+        font-weight: bold;
 
+      }
 
+
 
+      .title {
 
+        font-size: 28px;
 
+        font-weight: bold;
 
+        color: #333;
 
+        margin-bottom: 10px;
 
+      }
 
+
 
+      .subtitle {
 
+        font-size: 16px;
 
+        color: #666;
 
+        margin-bottom: 30px;
 
+        line-height: 1.5;
 
+      }
 
+
 
+      .tip-text {
 
+        font-size: 15px;
 
+        color: #888;
 
+        margin-bottom: 30px;
 
+        line-height: 1.6;
 
+        background: #f8f9fa;
 
+        padding: 20px;
 
+        border-radius: 12px;
 
+        border-left: 4px solid #667eea;
 
+      }
 
+
 
+      .button {
 
+        display: block;
 
+        width: 100%;
 
+        padding: 16px;
 
+        margin-bottom: 15px;
 
+        border: none;
 
+        border-radius: 12px;
 
+        font-size: 16px;
 
+        font-weight: 600;
 
+        cursor: pointer;
 
+        transition: all 0.3s ease;
 
+        text-decoration: none;
 
+        color: white;
 
+      }
 
+
 
+      .btn-primary {
 
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
+      }
 
+
 
+      .btn-primary:hover {
 
+        transform: translateY(-2px);
 
+        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
 
+      }
 
+
 
+      .btn-secondary {
 
+        background: #f8f9fa;
 
+        color: #333;
 
+        border: 2px solid #e9ecef;
 
+      }
 
+
 
+      .btn-secondary:hover {
 
+        background: #e9ecef;
 
+        transform: translateY(-1px);
 
+      }
 
+
 
+      .success-msg {
 
+        display: none;
 
+        color: #28a745;
 
+        font-size: 14px;
 
+        margin-top: 10px;
 
+      }
 
+
 
+      .loading {
 
+        display: none;
 
+        color: #667eea;
 
+        font-size: 14px;
 
+        margin-top: 20px;
 
+      }
 
+
 
+      @keyframes spin {
 
+        0% {
 
+          transform: rotate(0deg);
 
+        }
 
+        100% {
 
+          transform: rotate(360deg);
 
+        }
 
+      }
 
+
 
+      .spinner {
 
+        display: inline-block;
 
+        width: 16px;
 
+        height: 16px;
 
+        border: 2px solid #f3f3f3;
 
+        border-top: 2px solid #667eea;
 
+        border-radius: 50%;
 
+        animation: spin 1s linear infinite;
 
+        margin-right: 8px;
 
+      }
 
+    </style>
 
+  </head>
 
+  <body>
 
+    <div class="container">
 
+      <div class="logo">高</div>
 
+      <h1 class="title">高德地图</h1>
 
+      <p class="subtitle">精准导航，出行必备</p>
 
+
 
+      <div class="tip-text">
 
+        📱 打开App Store搜索"高德地图"下载<br />
 
+        🔗 或者复制链接在浏览器打开
 
+      </div>
 
+
 
+      <a href="#" class="button btn-primary" id="openAppBtn">打开高德地图应用</a>
 
+      <button class="button btn-secondary" id="copyLinkBtn">复制页面链接</button>
 
+
 
+      <div class="success-msg" id="successMsg">✅ 链接已复制到剪贴板</div>
 
+      <div class="loading" id="loadingMsg"><span class="spinner"></span>正在检测应用...</div>
 
+    </div>
 
+
 
+    <script>
 
+      // 高德地图URL Scheme和App Store链接
 
+      const APP_SCHEME = 'iosamap://' // 高德地图iOS URL Scheme
 
+      const APP_STORE_URL = 'https://apps.apple.com/cn/app/id461703208'
 
+
 
+      // Universal Links (高德地图支持)
 
+      const UNIVERSAL_LINK = 'https://uri.amap.com/navigation'
 
+
 
+      // 检测设备类型 - 只支持iOS
 
+      function getDeviceType() {
 
+        const userAgent = navigator.userAgent.toLowerCase()
 
+        if (/iphone|ipad|ipod/.test(userAgent)) {
 
+          return 'ios'
 
+        }
 
+        return 'other'
 
+      }
 
+
 
+      // 检测浏览器类型
 
+      function getBrowserType() {
 
+        const userAgent = navigator.userAgent.toLowerCase()
 
+        if (userAgent.indexOf('micromessenger') !== -1) {
 
+          return 'wechat'
 
+        }
 
+        if (userAgent.indexOf('qq') !== -1) {
 
+          return 'qq'
 
+        }
 
+        if (userAgent.indexOf('safari') !== -1 && userAgent.indexOf('chrome') === -1) {
 
+          return 'safari'
 
+        }
 
+        if (userAgent.indexOf('chrome') !== -1) {
 
+          return 'chrome'
 
+        }
 
+        return 'other'
 
+      }
 
+
 
+      // 尝试打开应用 - 改进版本
 
+      function tryOpenApp() {
 
+        const deviceType = getDeviceType()
 
+        const browserType = getBrowserType()
 
+
 
+        return new Promise((resolve) => {
 
+          let opened = false
 
+
 
+          // 设置超时检测
 
+          const timeout = setTimeout(() => {
 
+            if (!opened) {
 
+              resolve(false) // 未能打开应用
 
+            }
 
+          }, 2500)
 
+
 
+          // 监听页面可见性变化
 
+          const handleVisibilityChange = () => {
 
+            if (document.hidden) {
 
+              opened = true
 
+              clearTimeout(timeout)
 
+              resolve(true) // 应用可能已打开
 
+              document.removeEventListener('visibilitychange', handleVisibilityChange)
 
+            }
 
+          }
 
+
 
+          // 监听页面失焦
 
+          const handleBlur = () => {
 
+            opened = true
 
+            clearTimeout(timeout)
 
+            resolve(true)
 
+            window.removeEventListener('blur', handleBlur)
 
+          }
 
+
 
+          document.addEventListener('visibilitychange', handleVisibilityChange)
 
+          window.addEventListener('blur', handleBlur)
 
+
 
+          // 尝试打开高德地图应用
 
+          if (deviceType === 'ios' && browserType === 'safari') {
 
+            // Safari优先使用Universal Links，然后是URL Scheme
 
+            window.location.href = UNIVERSAL_LINK || APP_SCHEME
 
+          } else if (deviceType === 'ios') {
 
+            // 其他iOS浏览器使用iframe方式
 
+            const iframe = document.createElement('iframe')
 
+            iframe.style.display = 'none'
 
+            iframe.src = APP_SCHEME
 
+            document.body.appendChild(iframe)
 
+
 
+            setTimeout(() => {
 
+              document.body.removeChild(iframe)
 
+            }, 1000)
 
+          } else {
 
+            // 非iOS设备使用Universal Link
 
+            window.location.href = UNIVERSAL_LINK
 
+          }
 
+        })
 
+      }
 
+
 
+      // 跳转到应用商店 - 只支持iOS
 
+      function openAppStore() {
 
+        const deviceType = getDeviceType()
 
+        const browserType = getBrowserType()
 
+
 
+        // 微信或QQ浏览器中，提示用户在外部浏览器打开
 
+        if (browserType === 'wechat' || browserType === 'qq') {
 
+          showWeChatGuide()
 
+          return
 
+        }
 
+
 
+        if (deviceType === 'ios') {
 
+          // iOS多种跳转方式
 
+          const iosStores = ['itms-apps://apps.apple.com/cn/app/id461703208', APP_STORE_URL]
 
+
 
+          tryMultipleUrls(iosStores)
 
+        } else {
 
+          // 非iOS设备直接打开网页版App Store
 
+          window.open(APP_STORE_URL, '_blank')
 
+        }
 
+      }
 
+
 
+      // 尝试多个URL
 
+      function tryMultipleUrls(urls) {
 
+        let index = 0
 
+
 
+        function tryNext() {
 
+          if (index >= urls.length) {
 
+            // 所有URL都失败了，显示手动指引
 
+            showManualGuide()
 
+            return
 
+          }
 
+
 
+          const url = urls[index]
 
+          index++
 
+
 
+          // 监听页面可见性变化
 
+          const handleVisibilityChange = () => {
 
+            if (document.hidden) {
 
+              // 成功跳转
 
+              document.removeEventListener('visibilitychange', handleVisibilityChange)
 
+              return
 
+            }
 
+          }
 
+
 
+          document.addEventListener('visibilitychange', handleVisibilityChange)
 
+
 
+          // 尝试跳转
 
+          try {
 
+            window.location.href = url
 
+          } catch (e) {
 
+            console.log('跳转失败:', url, e)
 
+          }
 
+
 
+          // 如果2秒后页面仍然可见，尝试下一个URL
 
+          setTimeout(() => {
 
+            document.removeEventListener('visibilitychange', handleVisibilityChange)
 
+            if (!document.hidden) {
 
+              tryNext()
 
+            }
 
+          }, 2000)
 
+        }
 
+
 
+        tryNext()
 
+      }
 
+
 
+      // 显示微信引导
 
+      function showWeChatGuide() {
 
+        const guide = document.createElement('div')
 
+        guide.innerHTML = `
 
+                <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); z-index: 9999; display: flex; align-items: center; justify-content: center;">
 
+                    <div style="background: white; padding: 30px; border-radius: 15px; text-align: center; margin: 20px;">
 
+                        <h3 style="margin-bottom: 20px; color: #333;">在外部浏览器中打开</h3>
 
+                        <p style="margin-bottom: 20px; line-height: 1.6; color: #666;">
 
+                            请点击右上角的【⋯】菜单<br>
 
+                            选择【在浏览器中打开】<br>
 
+                            然后下载高德地图应用
 
+                        </p>
 
+                        <button onclick="this.parentElement.parentElement.remove()" style="background: #1989fa; color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer;">知道了</button>
 
+                    </div>
 
+                </div>
 
+            `
 
+        document.body.appendChild(guide)
 
+      }
 
+
 
+      // 显示手动指引
 
+      function showManualGuide() {
 
+        const deviceType = getDeviceType()
 
+        const storeName = deviceType === 'ios' ? 'App Store' : 'App Store'
 
+
 
+        alert(`请手动打开${storeName}，搜索"高德地图"进行下载。`)
 
+      }
 
+
 
+      // 尝试打开应用的主函数
 
+      async function openApp() {
 
+        const loadingMsg = document.getElementById('loadingMsg')
 
+        const openAppBtn = document.getElementById('openAppBtn')
 
+        const deviceType = getDeviceType()
 
+        const browserType = getBrowserType()
 
+
 
+        loadingMsg.style.display = 'block'
 
+        openAppBtn.textContent = '检测中...'
 
+        openAppBtn.style.pointerEvents = 'none'
 
+
 
+        try {
 
+          // 微信或QQ浏览器中直接提示跳转应用商店
 
+          if (browserType === 'wechat' || browserType === 'qq') {
 
+            loadingMsg.style.display = 'none'
 
+            openAppBtn.textContent = '下载高德地图应用'
 
+            openAppBtn.style.pointerEvents = 'auto'
 
+            openAppStore()
 
+            return
 
+          }
 
+
 
+          // 只在iOS设备上尝试打开应用
 
+          if (deviceType === 'ios') {
 
+            const appOpened = await tryOpenApp()
 
+
 
+            if (!appOpened) {
 
+              // 如果应用未打开，跳转到应用商店
 
+              setTimeout(() => {
 
+                openAppStore()
 
+              }, 500)
 
+            }
 
+          } else {
 
+            // 非iOS设备直接跳转到App Store
 
+            openAppStore()
 
+          }
 
+        } catch (error) {
 
+          console.error('打开应用时出错:', error)
 
+          openAppStore()
 
+        } finally {
 
+          loadingMsg.style.display = 'none'
 
+          openAppBtn.textContent = '打开高德地图应用'
 
+          openAppBtn.style.pointerEvents = 'auto'
 
+        }
 
+      }
 
+
 
+      // 复制链接功能
 
+      function copyCurrentUrl() {
 
+        const currentUrl = window.location.href
 
+        const successMsg = document.getElementById('successMsg')
 
+
 
+        if (navigator.clipboard && window.isSecureContext) {
 
+          // 现代浏览器
 
+          navigator.clipboard
 
+            .writeText(currentUrl)
 
+            .then(() => {
 
+              showSuccessMessage()
 
+            })
 
+            .catch((err) => {
 
+              console.error('复制失败:', err)
 
+              fallbackCopyTextToClipboard(currentUrl)
 
+            })
 
+        } else {
 
+          // 兼容性处理
 
+          fallbackCopyTextToClipboard(currentUrl)
 
+        }
 
+      }
 
+
 
+      // 兼容性复制方法
 
+      function fallbackCopyTextToClipboard(text) {
 
+        const textArea = document.createElement('textarea')
 
+        textArea.value = text
 
+        textArea.style.position = 'fixed'
 
+        textArea.style.left = '-999999px'
 
+        textArea.style.top = '-999999px'
 
+        document.body.appendChild(textArea)
 
+        textArea.focus()
 
+        textArea.select()
 
+
 
+        try {
 
+          const successful = document.execCommand('copy')
 
+          if (successful) {
 
+            showSuccessMessage()
 
+          } else {
 
+            alert('复制失败，请手动复制链接：' + text)
 
+          }
 
+        } catch (err) {
 
+          console.error('复制失败:', err)
 
+          alert('复制失败，请手动复制链接：' + text)
 
+        } finally {
 
+          document.body.removeChild(textArea)
 
+        }
 
+      }
 
+
 
+      // 显示成功消息
 
+      function showSuccessMessage() {
 
+        const successMsg = document.getElementById('successMsg')
 
+        successMsg.style.display = 'block'
 
+        setTimeout(() => {
 
+          successMsg.style.display = 'none'
 
+        }, 3000)
 
+      }
 
+
 
+      // 页面加载完成后的初始化
 
+      document.addEventListener('DOMContentLoaded', function () {
 
+        const openAppBtn = document.getElementById('openAppBtn')
 
+        const copyLinkBtn = document.getElementById('copyLinkBtn')
 
+        const deviceType = getDeviceType()
 
+        const browserType = getBrowserType()
 
+
 
+        // 绑定事件
 
+        openAppBtn.addEventListener('click', function (e) {
 
+          e.preventDefault()
 
+          openApp()
 
+        })
 
+
 
+        copyLinkBtn.addEventListener('click', function () {
 
+          copyCurrentUrl()
 
+        })
 
+
 
+        // 根据浏览器类型调整按钮文字
 
+        if (browserType === 'wechat' || browserType === 'qq') {
 
+          openAppBtn.textContent = '下载高德地图应用'
 
+          document.querySelector('.tip-text').innerHTML =
 
+            '📱 请点击右上角菜单选择"在浏览器中打开"<br>🔗 然后下载高德地图应用'
 
+        }
 
+
 
+        // 移动端不自动检测，避免被浏览器阻止
 
+        // 只有在桌面端才自动检测
 
+        if (deviceType === 'other') {
 
+          setTimeout(() => {
 
+            openApp()
 
+          }, 1000)
 
+        }
 
+      })
 
+
 
+      // 处理页面可见性变化
 
+      document.addEventListener('visibilitychange', function () {
 
+        if (document.hidden) {
 
+          console.log('页面被隐藏，可能是应用打开了')
 
+        } else {
 
+          console.log('页面重新可见')
 
+        }
 
+      })
 
+    </script>
 
+  </body>
 
+</html>

+ 6 - 0
vite.config.js
Datei anzeigen 

@@ -63,6 +63,12 @@ export default defineConfig(({ mode }) => {
 
     },
 
     },
 
     build: {
 
     build: {
 
       chunkSizeWarningLimit: 1024, // chunk 大小警告的限制（单位kb）
 
       chunkSizeWarningLimit: 1024, // chunk 大小警告的限制（单位kb）
 
+      rollupOptions: {
 
+        input: {
 
+          main: path.resolve(__dirname, 'index.html'),
 
+          mobile: path.resolve(__dirname, 'swkzMobile.html'),
 
+        },
 
+      },
 
     },
 
     },
 
   }
 
   }
 
 })
 
 })