diff --git a/mobile-h5/pages/login/index.vue b/mobile-h5/pages/login/index.vue index d8f4241d..a63b557f 100644 --- a/mobile-h5/pages/login/index.vue +++ b/mobile-h5/pages/login/index.vue @@ -75,6 +75,8 @@ + 关注服务号,接收审批通知 + 或 。是否同意并继续登录? + + + + + + 长按识别关注 + 关闭 + + @@ -136,6 +152,7 @@ clearLegacyMockSessionIfNeeded } from '../../utils/auth.js' import { validateCredentials } from '../../utils/validate-credentials.js' + import { MP_GH_USERNAME, MP_QRCODE_URL } from '../../utils/config.js' import ConfirmDialog from '../../components/ConfirmDialog.vue' export default { @@ -154,6 +171,8 @@ loading: false, focusUser: false, focusPwd: false, + showMpQrcode: false, + mpQrcodeUrl: MP_QRCODE_URL, errors: { username: '', password: '' @@ -212,6 +231,21 @@ openProtocol(type) { uni.navigateTo({ url: `/pages/protocol/index?type=${type}` }) }, + onFollowMp() { + const username = (MP_GH_USERNAME || '').trim() + const openProfile = + typeof wx !== 'undefined' && typeof wx.openOfficialAccountProfile === 'function' + if (openProfile && username) { + wx.openOfficialAccountProfile({ + username, + fail: () => { + this.showMpQrcode = true + } + }) + return + } + this.showMpQrcode = true + }, goHome() { uni.reLaunch({ url: '/pages/index/index' }) }, diff --git a/mobile-h5/static/mp-qrcode.README.txt b/mobile-h5/static/mp-qrcode.README.txt new file mode 100644 index 00000000..8a05d04a --- /dev/null +++ b/mobile-h5/static/mp-qrcode.README.txt @@ -0,0 +1,5 @@ +Replace this placeholder with the real WeChat 服务号关注二维码 image from ops before production. + +Recommended: square PNG, clear enough for long-press recognize in WeChat. + +Config path: mobile-h5/utils/config.js → MP_QRCODE_URL (default /static/mp-qrcode.png) diff --git a/mobile-h5/static/mp-qrcode.png b/mobile-h5/static/mp-qrcode.png new file mode 100644 index 00000000..52d4bc4b Binary files /dev/null and b/mobile-h5/static/mp-qrcode.png differ diff --git a/mobile-h5/styles/components/login.scss b/mobile-h5/styles/components/login.scss index 35e74959..3bdaef33 100644 --- a/mobile-h5/styles/components/login.scss +++ b/mobile-h5/styles/components/login.scss @@ -136,6 +136,75 @@ color: var(--brand-green); } +.login-follow-mp { + margin-top: 28rpx; + text-align: center; + font-size: 24rpx; + color: var(--text-muted); + line-height: 1.45; + text-decoration: underline; + text-underline-offset: 6rpx; +} + +.login-mp-qrcode { + position: fixed; + inset: 0; + z-index: 1100; + display: flex; + align-items: center; + justify-content: center; + padding: 48rpx; + box-sizing: border-box; +} + +.login-mp-qrcode__mask { + position: absolute; + inset: 0; + background: rgba(15, 30, 24, 0.32); +} + +.login-mp-qrcode__panel { + position: relative; + z-index: 1; + width: 100%; + max-width: 560rpx; + padding: 44rpx 36rpx 32rpx; + background: var(--surface, #fff); + border-radius: 28rpx; + box-shadow: 0 20rpx 56rpx rgba(0, 0, 0, 0.14); + text-align: center; + box-sizing: border-box; +} + +.login-mp-qrcode__img { + display: block; + width: 360rpx; + height: 360rpx; + margin: 0 auto; + background: #f8fbfa; + border: 1px solid var(--border); + border-radius: 16rpx; +} + +.login-mp-qrcode__tip { + display: block; + margin-top: 24rpx; + font-size: 26rpx; + color: var(--text-muted); + line-height: 1.45; +} + +.login-mp-qrcode__close { + margin-top: 28rpx; + height: 80rpx; + line-height: 80rpx; + border-radius: 20rpx; + border: 1px solid var(--border); + font-size: 28rpx; + font-weight: 500; + color: var(--brand-green); +} + .login-divider { display: flex; align-items: center; diff --git a/mobile-h5/utils/config.js b/mobile-h5/utils/config.js index bce7a405..c119e38d 100644 --- a/mobile-h5/utils/config.js +++ b/mobile-h5/utils/config.js @@ -31,3 +31,10 @@ export const OA_H5_ORIGIN = USE_REMOTE_TEST ? REMOTE_OA_H5_ORIGIN : LOCAL_OA_H5_ export const MINIO_BASE_URL = USE_REMOTE_TEST ? REMOTE_MINIO_BASE_URL : LOCAL_MINIO_BASE_URL + +/** 服务号原始 ID(gh_…),用于 openOfficialAccountProfile */ +export const MP_GH_USERNAME = '' // 上线前填写 +/** 关注二维码图片(兜底) */ +export const MP_QRCODE_URL = '/static/mp-qrcode.png' +/** 绑定 H5 路径(相对 OA_H5_ORIGIN) */ +export const MP_BIND_H5_PATH = '/oa-mp-bind/'