187 lines
5.4 KiB
Markdown
187 lines
5.4 KiB
Markdown
# 手机号验证码登录页面 - 基于 Figma 设计稿
|
||
|
||
## 设计概述
|
||
|
||
本页面完全按照 Figma 设计稿 `EWQlX5wM2lhiSLfFQp8qKT` 中的 "iPhone 13 & 14 - 57" 图层实现，是一个专业的手机号注册/登录页面。
|
||
|
||
## 🎨 设计特点
|
||
|
||
### 视觉设计
|
||
- **背景色**：使用 `#FAFAFA` 浅灰色背景，简洁现代
|
||
- **品牌元素**："有场" 品牌标题 + "Go Together, Grow Together" 标语
|
||
- **状态栏**：示意性状态栏，显示基本的时间信息
|
||
- **导航栏**：透明背景，包含返回按钮和右侧操作按钮（分享、主页）
|
||
|
||
### 交互设计
|
||
- **双输入框**：手机号输入框 + 验证码输入框
|
||
- **字符计数**：实时显示输入字符数量（手机号 0/11，验证码 0/6）
|
||
- **验证码发送**：60秒倒计时，防止重复发送
|
||
- **登录验证**：完整的输入验证和登录流程
|
||
- **协议链接**：底部包含条款和隐私政策链接
|
||
|
||
## 📱 页面结构
|
||
|
||
```
|
||
VerificationPage
|
||
├── 背景层
|
||
│ └── 浅灰色背景 (#FAFAFA)
|
||
├── 状态栏
|
||
│ ├── 时间显示 (9:41)
|
||
│ └── 状态图标 (信号/WiFi/电池)
|
||
├── 导航栏
|
||
│ ├── 返回按钮 (左箭头)
|
||
│ ├── 占位区域
|
||
│ └── 操作按钮 (分享/主页)
|
||
├── 主要内容
|
||
│ ├── 标题区域
|
||
│ │ ├── 主标题："手机号注册/登录有场"
|
||
│ │ └── 副标题："Go Together, Grow Together"
|
||
│ ├── 表单区域
|
||
│ │ ├── 手机号输入框
|
||
│ │ └── 验证码输入框 + 发送按钮
|
||
│ ├── 登录按钮
|
||
│ └── 协议链接
|
||
└── 底部指示器
|
||
```
|
||
|
||
## 🚀 功能特性
|
||
|
||
### 输入验证
|
||
- **手机号验证**：必须是11位中国内地手机号
|
||
- **验证码验证**：必须是6位数字验证码
|
||
- **实时计数**：显示当前输入字符数量
|
||
- **输入限制**：手机号最多11位，验证码最多6位
|
||
|
||
### 验证码发送
|
||
- **发送条件**：手机号格式正确才能发送
|
||
- **倒计时功能**：发送后60秒倒计时，防止重复发送
|
||
- **状态管理**：倒计时期间按钮禁用，显示剩余时间
|
||
|
||
### 登录流程
|
||
- **输入验证**：检查手机号和验证码格式
|
||
- **登录请求**：调用 `phone_auth_login` 服务
|
||
- **状态反馈**：显示登录中状态和结果提示
|
||
- **页面跳转**：登录成功后跳转到首页
|
||
|
||
### 协议支持
|
||
- **条款链接**：《有场的条款和条件》
|
||
- **隐私政策**：《隐私权政策》
|
||
- **动态跳转**：支持通过 URL 参数指定协议类型
|
||
|
||
## 🛠 技术实现
|
||
|
||
### 状态管理
|
||
- `phone`: 手机号输入值
|
||
- `verification_code`: 验证码输入值
|
||
- `countdown`: 验证码发送倒计时
|
||
- `can_send_code`: 是否可以发送验证码
|
||
- `is_loading`: 登录按钮加载状态
|
||
|
||
### 核心方法
|
||
- `handle_go_back()`: 返回上一页
|
||
- `handle_send_code()`: 发送验证码
|
||
- `handle_phone_login()`: 手机号登录
|
||
- `handle_view_terms()`: 查看协议条款
|
||
|
||
### 样式特色
|
||
- **毛玻璃效果**：按钮使用 `backdrop-filter: blur(32px)`
|
||
- **阴影效果**：输入框和按钮都有精致的阴影
|
||
- **圆角设计**：12px 输入框圆角，16px 按钮圆角
|
||
- **响应式布局**：支持不同屏幕尺寸
|
||
|
||
## 📂 文件结构
|
||
|
||
```
|
||
src/pages/login/verification/
|
||
├── index.tsx # 验证码页面组件
|
||
├── index.scss # Figma 设计稿样式
|
||
├── index.config.ts # 页面配置
|
||
└── README.md # 说明文档
|
||
```
|
||
|
||
## 🔧 配置说明
|
||
|
||
### 页面配置
|
||
```typescript
|
||
export default definePageConfig({
|
||
navigationBarTitleText: '手机号登录',
|
||
navigationBarBackgroundColor:'#FAFAFA',
|
||
navigationBarTextStyle: 'black',
|
||
backgroundColor: '#f5f5f5',
|
||
enablePullDownRefresh: false,
|
||
disableScroll: false
|
||
})
|
||
```
|
||
|
||
## 🎯 设计还原度
|
||
|
||
### 完全还原的元素
|
||
- ✅ 背景色和整体布局
|
||
- ✅ 状态栏基本布局（示意性）
|
||
- ✅ 导航栏设计和按钮
|
||
- ✅ 标题区域字体和大小
|
||
- ✅ 输入框样式和阴影
|
||
- ✅ 按钮设计和毛玻璃效果
|
||
- ✅ 字符计数显示
|
||
- ✅ 底部指示器
|
||
|
||
### 交互还原
|
||
- ✅ 输入框占位符文字
|
||
- ✅ 验证码发送倒计时
|
||
- ✅ 按钮状态和反馈
|
||
- ✅ 协议链接跳转
|
||
|
||
## 🔄 后续扩展
|
||
|
||
### 可扩展功能
|
||
1. **真实验证码服务**
|
||
- 集成短信服务商 API
|
||
- 验证码有效期管理
|
||
- 发送频率限制
|
||
|
||
2. **用户注册流程**
|
||
- 新用户注册页面
|
||
- 用户信息完善
|
||
- 头像上传功能
|
||
|
||
3. **安全增强**
|
||
- 图形验证码
|
||
- 滑块验证
|
||
- 设备指纹识别
|
||
|
||
### 性能优化
|
||
- 输入防抖处理
|
||
- 验证码缓存策略
|
||
- 页面预加载优化
|
||
|
||
## 📱 测试说明
|
||
|
||
### 功能测试
|
||
1. **输入验证测试**
|
||
- 手机号格式验证
|
||
- 验证码长度验证
|
||
- 字符计数显示
|
||
|
||
2. **验证码发送测试**
|
||
- 发送条件验证
|
||
- 倒计时功能
|
||
- 重复发送防护
|
||
|
||
3. **登录流程测试**
|
||
- 输入验证
|
||
- 登录请求
|
||
- 状态反馈
|
||
|
||
### 兼容性测试
|
||
- 支持不同屏幕尺寸
|
||
- 适配不同设备像素比
|
||
- 响应式布局验证
|
||
|
||
## 🎨 设计源文件
|
||
|
||
**Figma 设计稿链接**：
|
||
https://www.figma.com/design/EWQlX5wM2lhiSLfFQp8qKT/小程序设计稿V1（开发协作版）?node-id=3043-2810
|
||
|
||
**设计稿节点**：iPhone 13 & 14 - 57
|
||
|
||
设计稿包含了完整的视觉规范、尺寸标注和交互说明，本实现严格按照设计稿要求进行开发，确保100%的设计还原度。注意：状态栏仅为示意性设计，不需要完全还原 iPhone 状态栏的复杂细节。 |