# 忘记密码弹窗功能实现说明

## 📋 **功能概述**

将原来的忘记密码页面跳转改为弹窗形式，按照设计图实现两步式密码重置流程。

## 🎨 **设计特点**

### 1. **两步式流程**
- **步骤1**：验证手机号码
  - 输入手机号
  - 输入短信验证码（带倒计时）
  - 选择用户类型（员工/学员）

- **步骤2**：设置新密码
  - 输入新密码
  - 确认新密码
  - 密码可见性切换

### 2. **视觉设计**
- **步骤指示器**：圆形数字 + 连接线，激活状态为绿色
- **输入框**：灰色背景，圆角设计
- **验证码按钮**：绿色背景，带倒计时功能
- **用户类型选择**：点击弹出选择器
- **操作按钮**：全宽绿色按钮

## 🔧 **技术实现**

### 1. **前端组件结构**
```vue
<!-- 主弹窗 -->
<view class="forgot-modal-overlay">
  <view class="forgot-modal">
    <!-- 步骤指示器 -->
    <view class="step-indicator">
      <view class="step-item">
        <text class="step-number">1</text>
        <text class="step-text">验证手机号码</text>
      </view>
      <view class="step-line"></view>
      <view class="step-item">
        <text class="step-number">2</text>
        <text class="step-text">设置新密码</text>
      </view>
    </view>
    
    <!-- 步骤内容 -->
    <view class="step-content">
      <!-- 动态内容根据currentStep显示 -->
    </view>
    
    <!-- 操作按钮 -->
    <view class="action-buttons">
      <view class="next-btn">下一步</view>
    </view>
  </view>
</view>

<!-- 用户类型选择弹窗 -->
<view class="user-type-modal-overlay">
  <view class="user-type-modal">
    <!-- 选择项 -->
  </view>
</view>
```

### 2. **数据结构**
```javascript
data() {
  return {
    // 弹窗控制
    showForgotModal: false,
    currentStep: 1,
    showUserTypeModal: false,
    
    // 验证码倒计时
    codeCountdown: 0,
    
    // 密码可见性
    showNewPassword: false,
    showConfirmPassword: false,
    
    // 表单数据
    forgotForm: {
      mobile: '',
      code: '',
      userType: '',
      newPassword: '',
      confirmPassword: ''
    },
    
    // 用户类型选项
    selectedUserType: {},
    userTypeOptions: [
      { value: 'staff', text: '员工' },
      { value: 'member', text: '学员' }
    ]
  }
}
```

### 3. **核心方法**
```javascript
// 打开弹窗
forgot() {
  this.showForgotModal = true;
  this.currentStep = 1;
  this.resetForgotForm();
}

// 发送验证码
async sendVerificationCode() {
  // 表单验证
  // 调用API发送验证码
  // 开始倒计时
}

// 下一步
nextStep() {
  // 验证当前步骤数据
  // 调用验证码验证API
  // 切换到步骤2
}

// 重置密码
async resetPassword() {
  // 密码验证
  // 调用重置密码API
  // 显示成功提示
}
```

## 🌐 **API接口**

### 1. **发送验证码**
```javascript
// POST /common/sendVerificationCode
{
  mobile: "13800138000",
  type: "reset_password",
  user_type: "staff" // 或 "member"
}
```

### 2. **验证验证码**
```javascript
// POST /common/verifyCode
{
  mobile: "13800138000",
  code: "123456",
  type: "reset_password",
  user_type: "staff"
}
```

### 3. **重置密码**
```javascript
// POST /common/resetPassword
{
  mobile: "13800138000",
  code: "123456",
  new_password: "newpassword123",
  user_type: "staff"
}
```

## 🎯 **用户体验优化**

### 1. **表单验证**
- 手机号格式验证
- 验证码长度验证
- 密码强度验证
- 确认密码一致性验证

### 2. **交互反馈**
- 发送验证码倒计时（60秒）
- 加载状态提示
- 成功/失败消息提示
- 密码可见性切换

### 3. **错误处理**
- 网络异常处理
- 接口错误提示
- 表单验证错误提示

## 📱 **响应式设计**

### 1. **弹窗尺寸**
- 宽度：90%，最大600rpx
- 高度：自适应内容
- 圆角：20rpx
- 居中显示

### 2. **输入框设计**
- 高度：100rpx
- 背景：#f5f5f5
- 圆角：10rpx
- 内边距：0 30rpx

### 3. **按钮设计**
- 主色调：#00be8c（绿色）
- 高度：100rpx
- 圆角：10rpx
- 全宽布局

## 🔄 **状态管理**

### 1. **步骤控制**
```javascript
currentStep: 1 // 1=验证手机号, 2=设置密码
```

### 2. **表单重置**
```javascript
resetForgotForm() {
  this.forgotForm = {
    mobile: '',
    code: '',
    userType: '',
    newPassword: '',
    confirmPassword: ''
  };
  this.selectedUserType = {};
  this.codeCountdown = 0;
}
```

### 3. **弹窗关闭**
```javascript
closeForgotModal() {
  this.showForgotModal = false;
  this.currentStep = 1;
  this.resetForgotForm();
}
```

## 🧪 **测试要点**

### 1. **功能测试**
- [ ] 弹窗正常打开/关闭
- [ ] 步骤切换正常
- [ ] 验证码发送和倒计时
- [ ] 用户类型选择
- [ ] 密码重置流程

### 2. **UI测试**
- [ ] 步骤指示器状态变化
- [ ] 输入框样式正确
- [ ] 按钮状态和颜色
- [ ] 弹窗居中显示
- [ ] 响应式布局

### 3. **交互测试**
- [ ] 表单验证提示
- [ ] 网络请求状态
- [ ] 错误处理机制
- [ ] 成功反馈

## 📝 **使用说明**

### 1. **触发方式**
点击登录页面的"忘记登录密码"按钮

### 2. **操作流程**
1. 输入手机号
2. 选择用户类型
3. 点击"发送验证码"
4. 输入收到的验证码
5. 点击"下一步"
6. 输入新密码和确认密码
7. 点击"确认修改"

### 3. **注意事项**
- 验证码有效期通常为5-10分钟
- 密码长度不少于6位
- 两次密码输入必须一致
- 需要选择正确的用户类型

---

**实现完成时间**：2025-07-31  
**状态**：✅ 前端UI和交互逻辑已完成  
**待完成**：后端API接口实现