| | |
| | | color: #c63520; |
| | | min-height: 20px; |
| | | } |
| | | .wechat-guide { |
| | | position: fixed; |
| | | top: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | left: 0; |
| | | z-index: 999; |
| | | display: none; |
| | | background: rgba(47, 29, 18, 0.72); |
| | | padding: 20px 16px 28px; |
| | | overflow-y: auto; |
| | | } |
| | | .wechat-guide.is-visible { |
| | | display: block; |
| | | } |
| | | .wechat-guide__panel { |
| | | width: 100%; |
| | | max-width: 520px; |
| | | margin: 12px auto 0; |
| | | background: linear-gradient(180deg, #fffaf4 0%, #fff3e6 100%); |
| | | border-radius: 24px; |
| | | padding: 22px 18px 18px; |
| | | box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22); |
| | | position: relative; |
| | | } |
| | | .wechat-guide__badge { |
| | | display: inline-flex; |
| | | align-items: center; |
| | | border-radius: 999px; |
| | | background: #ffe8cf; |
| | | color: #b24a11; |
| | | font-size: 12px; |
| | | font-weight: 700; |
| | | padding: 6px 10px; |
| | | } |
| | | .wechat-guide__title { |
| | | margin: 14px 0 10px; |
| | | font-size: 24px; |
| | | line-height: 1.35; |
| | | font-weight: 700; |
| | | color: #2f1d12; |
| | | } |
| | | .wechat-guide__desc { |
| | | margin: 0; |
| | | color: #6f5b4d; |
| | | font-size: 14px; |
| | | line-height: 1.8; |
| | | } |
| | | .wechat-guide__steps { |
| | | margin: 18px 0 0; |
| | | padding: 16px 16px 16px 38px; |
| | | border-radius: 18px; |
| | | background: rgba(255, 255, 255, 0.72); |
| | | color: #5b4638; |
| | | font-size: 14px; |
| | | line-height: 1.9; |
| | | } |
| | | .wechat-guide__hint { |
| | | margin-top: 14px; |
| | | color: #9b5f33; |
| | | font-size: 13px; |
| | | line-height: 1.7; |
| | | } |
| | | .wechat-guide__close { |
| | | margin-top: 18px; |
| | | width: 100%; |
| | | border: none; |
| | | border-radius: 14px; |
| | | background: #c63520; |
| | | color: #fff; |
| | | font-size: 15px; |
| | | font-weight: 600; |
| | | padding: 14px 16px; |
| | | cursor: pointer; |
| | | } |
| | | </style> |
| | | </head> |
| | | <body> |
| | | <div class="wechat-guide" id="wechatGuide"> |
| | | <div class="wechat-guide__panel"> |
| | | <div class="wechat-guide__badge">微信内暂不支持直接下载</div> |
| | | <h2 class="wechat-guide__title">请使用系统浏览器打开后再下载 APP</h2> |
| | | <p class="wechat-guide__desc">微信内置浏览器会拦截安装包下载。请先通过右上角菜单切换到系统浏览器,再继续安装。</p> |
| | | <ol class="wechat-guide__steps"> |
| | | <li>点击右上角“...”。</li> |
| | | <li>选择“在浏览器打开”。</li> |
| | | <li>进入浏览器后,再点击下载按钮。</li> |
| | | </ol> |
| | | <div class="wechat-guide__hint">邀请码会保留在当前页面,切换到浏览器后仍可复制并用于注册绑定诊所。</div> |
| | | <button class="wechat-guide__close" id="wechatGuideClose" type="button">我知道了</button> |
| | | </div> |
| | | </div> |
| | | <div class="page"> |
| | | <div class="card"> |
| | | <div class="badge">中医培训 APP 下载</div> |
| | |
| | | inviteCode: '', |
| | | androidDownloadUrl: '', |
| | | iosDownloadUrl: '', |
| | | wechatBrowser: false, |
| | | openAppBaseUrl: '', |
| | | bindTicketLoading: false, |
| | | openAppUrl: '', |
| | |
| | | */ |
| | | async function bootstrap() { |
| | | bindActions() |
| | | detectWechatEnvironment() |
| | | bindWechatEnvironmentListeners() |
| | | bindResumeAutoOpenListeners() |
| | | const inviteCode = normalizeInviteCode(readQueryParam('inviteCode')) |
| | | state.inviteCode = inviteCode |
| | |
| | | } |
| | | copyInviteCode(state.inviteCode, true) |
| | | }) |
| | | document.getElementById('wechatGuideClose').addEventListener('click', function () { |
| | | hideWechatGuide() |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * 处理主按钮动作,优先拉起 APP,未安装时自动下载。 |
| | | */ |
| | | async function handlePrimaryAction(fromResume) { |
| | | if (shouldBlockDirectDownload()) { |
| | | showWechatGuide() |
| | | showStatus('请点击右上角,选择在浏览器中打开后继续') |
| | | return |
| | | } |
| | | if (!state.inviteCode) { |
| | | showStatus('当前二维码未包含邀请码,请复制邀请码后手动注册') |
| | | return |
| | |
| | | */ |
| | | function renderInviteCode(inviteCode) { |
| | | document.getElementById('inviteCodeValue').textContent = inviteCode || '--' |
| | | } |
| | | |
| | | /** |
| | | * 根据当前环境刷新微信内提示。 |
| | | */ |
| | | function detectWechatEnvironment() { |
| | | const matched = isWechatBrowser() |
| | | state.wechatBrowser = matched |
| | | if (matched) { |
| | | showWechatGuide() |
| | | showStatus('检测到微信内打开,请点击右上角,选择在浏览器中打开后再下载') |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * 绑定微信桥注入后的补充检测。 |
| | | */ |
| | | function bindWechatEnvironmentListeners() { |
| | | document.addEventListener('WeixinJSBridgeReady', function () { |
| | | detectWechatEnvironment() |
| | | }, false) |
| | | window.addEventListener('load', function () { |
| | | window.setTimeout(function () { |
| | | detectWechatEnvironment() |
| | | }, 300) |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * 判断当前是否为微信内置浏览器。 |
| | | */ |
| | | function isWechatBrowser() { |
| | | if (state.wechatBrowser) { |
| | | return true |
| | | } |
| | | const userAgent = String(window.navigator.userAgent || '').toLowerCase() |
| | | if (userAgent.indexOf('micromessenger') >= 0 || userAgent.indexOf('wechat') >= 0) { |
| | | return true |
| | | } |
| | | if (window.__wxjs_environment === 'miniprogram') { |
| | | return true |
| | | } |
| | | if (typeof window.WeixinJSBridge !== 'undefined') { |
| | | return true |
| | | } |
| | | return false |
| | | } |
| | | |
| | | /** |
| | | * 判断当前下载动作是否需要被微信环境拦截。 |
| | | */ |
| | | function shouldBlockDirectDownload() { |
| | | state.wechatBrowser = isWechatBrowser() |
| | | return state.wechatBrowser |
| | | } |
| | | |
| | | /** |
| | | * 展示微信内打开浏览器指引。 |
| | | */ |
| | | function showWechatGuide() { |
| | | document.getElementById('wechatGuide').classList.add('is-visible') |
| | | } |
| | | |
| | | /** |
| | | * 隐藏微信内打开浏览器指引。 |
| | | */ |
| | | function hideWechatGuide() { |
| | | document.getElementById('wechatGuide').classList.remove('is-visible') |
| | | } |
| | | |
| | | /** |