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