开启微信通知 · 菜单聚合入口设计

日期：2026-08-14
工程：mobile-h5（主）、菜单 SQL；绑定链路复用既有 mobile-oa-h5 / mp-bind
相关：docs/superpowers/specs/2026-08-13-oa-wechat-service-notify-design.md
Demo：mobile-ui/zkxw-mobile-wechat-notify-menu-demo.html
图标：mobile-h5/static/menu-icons/oa-wechat-notify.png

1. 背景与目标

1.1 现状问题

微信审批通知需要两步：

关注服务号（微信侧）
绑定当前账号（写入 wx_mp_openid）

当前入口分散：

登录页：「关注服务号，接收审批通知」（仅关注）
首页顶栏：「开启微信审批通知」（仅绑定）

用户容易只做一步，且不清楚两者关系。

1.2 目标

在首页「抄送我的」后新增菜单 「开启微信通知」，将两步按序号 1 / 2 放在同一页。
移除登录页关注入口与首页顶栏绑定入口；只保留新菜单。
不改动服务端推送 / mp-bind 授权协议；仅调整小程序引导与入口。

1.3 非目标

不实现服务号关注状态服务端查询。
不改造模板消息发送与深链逻辑。
不新增 web-admin 配置台。

2. 已确认决策

决策点	结论
入口策略	仅保留首页菜单；登录页与首页顶栏入口均去掉
菜单文案	固定为「开启微信通知」（已开启后也不改名）
菜单位置	「抄送我的」之后
菜单图标	`oa-wechat-notify.png`（由 `开启通知.png` 拷贝并英文化命名）
页面结构	原生步骤页：步骤 1 关注 → 步骤 2 绑定
顶部总状态	不展示「已开启 / 未开启」横幅；仅步骤卡片角标表达进度
步骤 1 完成判定	用户点击「我已关注」自行确认（本地持久化）
步骤 2	跳转既有 `/pages/oa/mp-bind/index`（web-view 授权）
技术方案	独立原生页 + 复用 mp-bind（方案 1）

3. 信息架构

首页菜单宫格
  … → 抄送我的 → 开启微信通知  →  pages/oa/wechat-notify/index
                                      ├─ 步骤1 关注服务号
                                      │    openOfficialAccountProfile / 二维码
                                      │    「我已关注」→ 本地标记
                                      └─ 步骤2 绑定当前账号
                                           → pages/oa/mp-bind/index（既有）

删除：

pages/login/index.vue：login-follow-mp 区块及相关二维码弹层（若仅服务于该入口）
pages/index/index.vue：顶栏 home-mp-notify 文案与 onTapMpNotify

保留：

pages/oa/mp-bind/index.vue、mobile-oa-h5 OaMpBind、后端 mp-bind / mp-bind-status
MP_GH_USERNAME、MP_QRCODE_URL 配置（改由新步骤页使用）

4. 页面交互

4.1 开启微信通知页（`pages/oa/wechat-notify/index`）

导航标题：开启微信通知
主体仅两张步骤卡，无顶部总状态条。

步骤 1 · 关注服务号

状态	UI
未确认	角标「未完成」；主按钮「去关注」
点击去关注	优先 `wx.openOfficialAccountProfile`；失败则展开二维码（长按识别）
二维码展开时	显示「我已关注」
已确认	角标「已完成」；按钮可改为「重新打开关注页」（仍可打开关注/二维码）

「我已关注」写入本地（建议 key 含 userId/username，换账号不串数据）。不调用后端。

步骤 2 · 绑定当前账号

状态	UI
步骤 1 未确认	主按钮禁用，文案「请先完成步骤 1」
步骤 1 已确认且未绑定	「去绑定」→ `navigateTo` mp-bind
已绑定	角标「已完成」；按钮「已绑定」禁用（不强制提供解绑）

绑定状态来源：GET /mini/auth/mp-bind-status（onShow 刷新）。从 mp-bind 返回后自动刷新。

若接口已 bound=true，即使本地未点「我已关注」，也应将步骤 1 视为完成（避免已绑用户被步骤顺序卡住）。规则：

bound === true → 步骤 1、步骤 2 均显示已完成。
bound === false → 步骤 2 未完成；步骤 1 以本地「我已关注」为准。

4.2 首页菜单

文案始终「开启微信通知」
icon：oa-wechat-notify（PNG 自带色，iconBg: transparent，与其它 OA 宫格一致）
点击：navigateTo /pages/oa/wechat-notify/index
不增加角标数字（非待办类）

4.3 登录页 / 首页顶栏

登录页不渲染关注入口与其二维码弹层（若弹层仅服务于该入口则一并删除相关代码）。
首页顶栏仅保留岗位/部门与「退出登录」，去掉微信通知链接及 fetchMpBindStatus（若仅服务于顶栏）。

5. 数据与菜单

5.1 小程序菜单 SQL

新增 sys_menu（幂等插入），示例字段：

字段	值
id	`MINI000000000000000000000000OA007`
menu_name	`开启微信通知`
path	`/pages/oa/wechat-notify/index`
perms	`mini:oa:wechat-notify`
order_num	`70`（抄送为 60，紧随其后）
icon（若菜单表/接口支持）	`oa-wechat-notify`

SQL 落 docs/sql/（新建或追加既有 mobile OA 菜单脚本），与 mobile_menu_oa_task_centers.sql 风格一致。

5.2 前端图标映射

mobile-h5/components/van-icon/van-icon.vue：PNG_ICONS['oa-wechat-notify']
mobile-h5/utils/menu-icon-colors.js：加入 OA_PNG_ICONS 与 transparent 默认

5.3 本地存储

Key 建议：mp_follow_confirmed:{userId} → '1'
登出不清也可；以 userId 隔离即可。绑定成功后可不依赖该 key（见 4.1 规则）。

6. 实现范围（文件级）

动作	路径
新增	`mobile-h5/pages/oa/wechat-notify/index.vue`
注册	`mobile-h5/pages.json`
删除入口	`mobile-h5/pages/login/index.vue`、`login.scss`（相关样式）
删除入口	`mobile-h5/pages/index/index.vue`（顶栏通知）
图标已有	`mobile-h5/static/menu-icons/oa-wechat-notify.png`
映射	`van-icon.vue`、`menu-icon-colors.js`
SQL	`docs/sql/mobile_menu_oa_wechat_notify.sql`（或等价）
Demo（已有）	`mobile-ui/zkxw-mobile-wechat-notify-menu-demo.html`
文档修订	在 `2026-08-13-oa-wechat-service-notify-design.md` §6.1/6.2 加注：入口已迁移至本设计

不改：backend 推送与 bind API、mobile-oa-h5 OaMpBind 授权流程。

7. 错误与边界

情况	行为
用户谎称已关注	步骤 2 仍可绑；未真正关注则后续模板发送失败/skip，与现网一致
绑定失败	mp-bind H5 展示错误；返回设置页后仍为未绑定
openOfficialAccountProfile 不可用	仅二维码路径
未登录进设置页	沿用全局登录拦截 / forceRelogin
已绑定用户	两步均已完成，无需再点「我已关注」

8. 测试要点

登录页无「关注服务号」文案；首页顶栏无「开启微信审批通知」。
「抄送我的」后出现「开启微信通知」及铃铛图标。
步骤 1：去关注 → 我已关注 → 角标已完成；步骤 2 可点。
步骤 1 未确认时步骤 2 禁用。
去绑定成功返回后步骤 2 已完成；再次进入保持已完成。
已绑定账号首次进入该页：两步直接已完成。
换账号：本地「我已关注」不串号。

9. 与既有设计关系

本设计替代 2026-08-13-oa-wechat-service-notify-design.md 中 §6.1（登录页关注）与 §6.2（工作台顶栏/个人中心绑定入口）的产品入口描述；推送、绑定 API、深链会话等其余章节仍有效。

2026-08-14-wechat-notify-menu-entry-design.md 7.7 KB Historie Surový