49 lines
2.2 KiB
Markdown
49 lines
2.2 KiB
Markdown
## 实施计划
|
||
|
||
### 1. 分析当前代码结构
|
||
|
||
- **PhoneLogin.vue**：手机号登录页面主组件，包含登录卡片和子组件调用
|
||
- **PhoneLoginForm.vue**：登录表单组件，包含登录方式切换和表单字段
|
||
- **login.js**：包含登录相关的API调用方法，如`sendPhoneCode`和`phoneLoginCode`
|
||
|
||
### 2. 修改PhoneLoginForm.vue组件
|
||
|
||
#### 模板部分修改
|
||
- **更新登录模式切换**：将现有的三种模式（密码登录、注册、重置密码）改为仅保留登录相关的模式
|
||
- **添加密码/验证码登录切换**：在登录模式下，添加一个新的切换开关，允许用户在密码登录和验证码登录之间切换
|
||
- **调整表单字段显示**：根据选择的登录方式显示相应的表单字段
|
||
|
||
#### 脚本部分修改
|
||
- **添加登录方式状态**：添加`loginMethod` ref，用于跟踪用户选择的是密码登录还是验证码登录
|
||
- **设置默认登录方式**：将默认登录方式设置为验证码登录
|
||
- **更新表单验证逻辑**：根据选择的登录方式调整验证规则
|
||
- **更新发送验证码逻辑**：发送登录验证码时传递`purpose: 'login'`
|
||
- **更新表单提交逻辑**：验证码登录时调用`phoneLoginCode`函数
|
||
|
||
### 3. 修改PhoneLogin.vue组件
|
||
|
||
- **更新handleLogin方法**：确保根据登录方式调用正确的登录函数
|
||
|
||
### 4. 实施细节
|
||
|
||
#### PhoneLoginForm.vue修改点
|
||
- **第155行**：将默认`loginMode`改为'code'
|
||
- **第38-70行**：添加密码/验证码登录切换按钮
|
||
- **第256-285行**：更新`handleSendCode`方法，确保发送验证码时传递正确的purpose
|
||
- **第288-316行**：更新`handleSubmit`方法，处理验证码登录逻辑
|
||
|
||
#### PhoneLogin.vue修改点
|
||
- **第79-81行**：更新`handleLogin`方法，根据登录方式调用正确的登录函数
|
||
|
||
### 5. 预期行为
|
||
|
||
- 用户默认看到验证码登录界面
|
||
- 用户可以在密码登录和验证码登录之间切换
|
||
- 发送登录验证码时，传递`purpose: 'login'`
|
||
- 验证码登录调用`phoneLoginCode`函数
|
||
- 密码登录保持原有功能不变
|
||
|
||
### 6. 需要修改的文件
|
||
|
||
- `d:\work\Aiproject\DeotalandAi\apps\frontend\src\components\auth\PhoneLoginForm.vue`
|
||
- `d:\work\Aiproject\DeotalandAi\apps\frontend\src\views\Login\PhoneLogin.vue` |