2.3 KiB

Raw Blame History

实现手机号登录功能

需求分析

在现有登录系统中添加手机号登录功能
支持两种登录方式：
1. 手机号+验证码直接登录
2. 手机号+验证码+密码注册密码登录

实现方案

1. 创建手机号登录页面组件

创建 PhoneLogin.vue 页面组件，位于 apps/frontend/src/views/Login/
实现手机号登录表单，包括：
- 手机号输入框
- 验证码输入框和获取验证码按钮
- 密码输入框（可选，用于注册密码登录）
- 登录/注册按钮

2. 配置路由

在 apps/frontend/src/router/index.js 中添加手机号登录路由
路径：/login/phone
名称：phone-login

3. 修改主登录页面

在 Login.vue 中添加跳转到手机号登录的链接
位置：在忘记密码和注册链接附近

4. 实现手机号登录表单组件

创建 PhoneLoginForm.vue 组件，位于 apps/frontend/src/components/auth/
实现表单验证逻辑：
- 手机号格式验证
- 验证码格式验证
- 密码格式验证（当选择注册密码登录时）
实现获取验证码功能：
- 倒计时功能
- 防重复发送机制

5. 实现登录逻辑

在 login.js 中添加手机号登录相关方法
实现验证码发送API调用
实现手机号+验证码登录API调用
实现手机号+验证码+密码注册密码登录API调用

6. 国际化支持

在国际化文件中添加手机号登录相关的文本
支持中英文切换

7. 样式适配

确保手机号登录页面与现有登录页面样式保持一致
支持响应式设计
支持暗色主题

实现步骤

创建 PhoneLogin.vue 页面组件
创建 PhoneLoginForm.vue 表单组件
配置手机号登录路由
修改主登录页面添加跳转链接
实现表单验证和获取验证码功能
实现登录逻辑
添加国际化支持
测试功能完整性

预期效果

用户可以在登录页面选择手机号登录方式
手机号登录页面支持两种登录模式
表单验证逻辑完整
界面样式与现有系统保持一致
支持国际化和暗色主题

技术要点

Vue 3 Composition API
Vue Router 4
Element Plus UI组件库
Vue I18n国际化
表单验证（使用Vuelidate）
响应式设计
暗色主题支持