practice/zxcv/src/views/ForgotPassword.vue

<template>
  <div class="forgot-password-container">
    <el-card class="forgot-password-card">
      <div class="forgot-password-header">
        <h2>重置密码</h2>
      </div>
      <el-form
        ref="forgotPasswordFormRef"
        :model="forgotPasswordForm"
        :rules="rules"
        label-width="0"
        class="forgot-password-form"
      >
        <el-form-item prop="phone">
          <el-input
            v-model="forgotPasswordForm.phone"
            placeholder="请输入手机号"
            prefix-icon="Phone"
          />
        </el-form-item>
        <el-form-item prop="verificationCode">
          <div class="verification-code-input">
            <el-input
              v-model="forgotPasswordForm.verificationCode"
              placeholder="请输入验证码"
              prefix-icon="Key"
            />
            <el-button
              type="primary"
              :disabled="countdown > 0"
              @click="handleSendCode"
            >
              {{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
            </el-button>
          </div>
        </el-form-item>
        <el-form-item prop="newPassword">
          <el-input
            v-model="forgotPasswordForm.newPassword"
            type="password"
            placeholder="请输入新密码"
            prefix-icon="Lock"
            show-password
          />
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <el-input
            v-model="forgotPasswordForm.confirmPassword"
            type="password"
            placeholder="请确认新密码"
            prefix-icon="Lock"
            show-password
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :loading="loading"
            class="reset-button"
            @click="handleResetPassword"
          >
            重置密码
          </el-button>
        </el-form-item>
        <div class="forgot-password-footer">
          <span>想起密码了？</span>
          <el-link type="primary" @click="goToLogin">立即登录</el-link>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Phone, Key, Lock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const forgotPasswordForm = reactive({
  phone: '',
  verificationCode: '',
  newPassword: '',
  confirmPassword: ''
})

const loading = ref(false)
const countdown = ref(0)
const forgotPasswordFormRef = ref(null)

const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== forgotPasswordForm.newPassword) {
    callback(new Error('两次输入密码不一致!'))
  } else {
    callback()
  }
}

const rules = {
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  verificationCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { len: 6, message: '验证码长度应为6位', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: validatePass, trigger: 'blur' }
  ]
}

const startCountdown = () => {
  countdown.value = 60
  const timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)
}

const handleSendCode = async () => {
  try {
    await forgotPasswordFormRef.value.validateField('phone')
    // TODO: 调用发送验证码的API
    ElMessage.success('验证码已发送')
    startCountdown()
  } catch (error) {
    console.error('手机号验证失败:', error)
  }
}

const handleResetPassword = async () => {
  if (!forgotPasswordFormRef.value) return
  
  try {
    await forgotPasswordFormRef.value.validate()
    loading.value = true
    
    // TODO: 实现重置密码逻辑
    setTimeout(() => {
      ElMessage.success('密码重置成功')
      loading.value = false
      router.push('/login')
    }, 1000)
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

const goToLogin = () => {
  router.push('/login')
}
</script>

<style scoped>
.forgot-password-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #e0f2f1 0%, #e3f2fd 100%);
}

.forgot-password-card {
  width: 400px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.forgot-password-header {
  text-align: center;
  margin-bottom: 30px;
}

.forgot-password-header h2 {
  color: #409EFF;
  margin: 0;
}

.forgot-password-form {
  margin-top: 20px;
}

.verification-code-input {
  display: flex;
  gap: 10px;
}

.verification-code-input .el-input {
  flex: 1;
}

.verification-code-input .el-button {
  width: 120px;
  white-space: nowrap;
}

.reset-button {
  width: 100%;
}

.forgot-password-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  font-size: 14px;
  gap: 8px;
}

:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #409EFF inset;
}
</style>