# 手机号验证码登录页面 - 基于 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: '#ffffff',
  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 状态栏的复杂细节。