bimwe/mini-programs

Fork 0

Files

张成 5179d1aa09 添加登陆页

2025-08-23 20:19:33 +08:00

5.4 KiB

Raw Blame History

手机号验证码登录页面 - 基于 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          # 说明文档

🔧 配置说明

页面配置

export default definePageConfig({
  navigationBarTitleText: '手机号登录',
  navigationBarBackgroundColor: '#ffffff',
  navigationBarTextStyle: 'black',
  backgroundColor: '#f5f5f5',
  enablePullDownRefresh: false,
  disableScroll: false
})

🎯 设计还原度

完全还原的元素

✅ 背景色和整体布局
✅ 状态栏基本布局（示意性）
✅ 导航栏设计和按钮
✅ 标题区域字体和大小
✅ 输入框样式和阴影
✅ 按钮设计和毛玻璃效果
✅ 字符计数显示
✅ 底部指示器

交互还原

✅ 输入框占位符文字
✅ 验证码发送倒计时
✅ 按钮状态和反馈
✅ 协议链接跳转

🔄 后续扩展

可扩展功能

真实验证码服务
- 集成短信服务商 API
- 验证码有效期管理
- 发送频率限制
用户注册流程
- 新用户注册页面
- 用户信息完善
- 头像上传功能
安全增强
- 图形验证码
- 滑块验证
- 设备指纹识别

性能优化

输入防抖处理
验证码缓存策略
页面预加载优化

📱 测试说明

功能测试

输入验证测试
- 手机号格式验证
- 验证码长度验证
- 字符计数显示
验证码发送测试
- 发送条件验证
- 倒计时功能
- 重复发送防护
登录流程测试
- 输入验证
- 登录请求
- 状态反馈

兼容性测试

支持不同屏幕尺寸
适配不同设备像素比
响应式布局验证

🎨 设计源文件

Figma 设计稿链接： https://www.figma.com/design/EWQlX5wM2lhiSLfFQp8qKT/小程序设计稿V1（开发协作版）?node-id=3043-2810

设计稿节点：iPhone 13 & 14 - 57

设计稿包含了完整的视觉规范、尺寸标注和交互说明，本实现严格按照设计稿要求进行开发，确保100%的设计还原度。注意：状态栏仅为示意性设计，不需要完全还原 iPhone 状态栏的复杂细节。

5.4 KiB Raw Blame History Unescape Escape