zhjwxt/uniapp/忘记密码弹窗功能说明.md

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

📋 功能概述

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

🎨 设计特点

1. 两步式流程

• 步骤1：验证手机号码

  • 输入手机号
  • 输入短信验证码（带倒计时）
  • 选择用户类型（员工/学员）

• 步骤2：设置新密码

  • 输入新密码
  • 确认新密码
  • 密码可见性切换

2. 视觉设计

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

🔧 技术实现

1. 前端组件结构

<!-- 主弹窗 -->
<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. 数据结构

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. 核心方法

// 打开弹窗
forgot() {
  this.showForgotModal = true;
  this.currentStep = 1;
  this.resetForgotForm();
}

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

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

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

🌐 API接口

1. 发送验证码

// POST /common/sendVerificationCode
{
  mobile: "13800138000",
  type: "reset_password",
  user_type: "staff" // 或 "member"
}

2. 验证验证码

// POST /common/verifyCode
{
  mobile: "13800138000",
  code: "123456",
  type: "reset_password",
  user_type: "staff"
}

3. 重置密码

// 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. 步骤控制

currentStep: 1 // 1=验证手机号, 2=设置密码

2. 表单重置

resetForgotForm() {
  this.forgotForm = {
    mobile: '',
    code: '',
    userType: '',
    newPassword: '',
    confirmPassword: ''
  };
  this.selectedUserType = {};
  this.codeCountdown = 0;
}

3. 弹窗关闭

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接口实现