From afde67fd03d37c34dcd11bc7046615d6fbd73421 Mon Sep 17 00:00:00 2001
From: zlwu <704541015@qq.com>
Date: Thu, 13 Aug 2026 19:20:41 +0800
Subject: [PATCH] feat(mobile-h5): add follow service-account entry on login
 page

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 mobile-h5/pages/login/index.vue        |  34 ++++++++++++
 mobile-h5/static/mp-qrcode.README.txt  |   5 ++
 mobile-h5/static/mp-qrcode.png         | Bin 0 -> 74 bytes
 mobile-h5/styles/components/login.scss |  69 +++++++++++++++++++++++++
 mobile-h5/utils/config.js              |   7 +++
 5 files changed, 115 insertions(+)
 create mode 100644 mobile-h5/static/mp-qrcode.README.txt
 create mode 100644 mobile-h5/static/mp-qrcode.png

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 @@
       </view>
     </view>
 
+    <view class="login-follow-mp" @click="onFollowMp">关注服务号，接收审批通知</view>
+
     <view class="login-divider">或</view>
 
     <button
@@ -125,6 +127,20 @@
       </text>
       <text>。是否同意并继续登录？</text>
     </ConfirmDialog>
+
+    <view v-if="showMpQrcode" class="login-mp-qrcode">
+      <view class="login-mp-qrcode__mask" @click="showMpQrcode = false" />
+      <view class="login-mp-qrcode__panel">
+        <image
+          class="login-mp-qrcode__img"
+          :src="mpQrcodeUrl"
+          mode="aspectFit"
+          show-menu-by-longpress
+        />
+        <text class="login-mp-qrcode__tip">长按识别关注</text>
+        <view class="login-mp-qrcode__close" @click="showMpQrcode = false">关闭</view>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -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 0000000000000000000000000000000000000000..52d4bc4b7ddcb188caa7ef2ac66fd36235b70fc8
GIT binary patch
literal 74
zcmeAS@N?(olHy`uVBq!ia0vp^93afW1SGw4HSYi^K~ERQkcwN$6(1k+h8;23qQanl
Wc_U-eu@yIgk_?`%elF{r5}E)y*%Ms=

literal 0
HcmV?d00001

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/'