赵忠林
28102fb0bd
- 重新设计授权登录页面UI，参考权大师风格，包含顶部标题、Logo与品牌名 - 添加手机号授权登录按钮及取消按钮，优化用户交互体验 - 新增服务协议和隐私政策弹窗，支持点击查看详细内容 - 增加协议勾选状态管理，未勾选协议时授权提示用户 - 修改登录确认流程，根据用户注册状态分别处理自动确认与手机号授权 - 优化按钮、状态提示和页面布局，提升整体界面一致性和可用性
1.3 KiB
1.3 KiB
2026-04-08 工作记录
passport/qr-confirm/index.tsx 页面改造
改造内容
将扫码登录确认页面的授权登录界面改造成参考权大师的设计风格：
-
UI 改造
- 顶部标题"请登录"
- 中间 Logo + 品牌名 + 标语（权大师风格）
- 橙色主按钮"手机号授权登录"
- 灰色"取消"按钮
- 底部协议勾选（带链接可点击查看详情）
-
新增功能
- 协议勾选状态管理
- 服务协议和隐私政策弹窗
- 未勾选协议时点击授权按钮会提示
-
保留功能
- 已注册用户的自动登录确认流程
- 未注册用户的手机号授权登录
- 扫码登录成功后的跳转逻辑
页面流程
用户扫码 → qr-confirm 页面
↓
检测用户状态
↓
┌──────────────┬──────────────┐
已注册 未注册
↓ ↓
自动确认登录 显示授权登录界面
↓ ↓
登录成功 一键授权登录
技术要点
- 使用 Taro 的 Button 组件 openType="getPhoneNumber" 获取微信手机号授权
- 授权前校验协议勾选状态
- 调用后端 loginByMpWxPhone 接口（带 notVerifyPhone: true 自动注册）