72 lines
2.5 KiB
Vue
72 lines
2.5 KiB
Vue
<template>
|
||
<div class="forgot-page">
|
||
<div class="card">
|
||
<h2 class="title">重置密码</h2>
|
||
<el-form :model="form" :rules="rules" ref="formRef" label-width="0">
|
||
<el-form-item prop="phone">
|
||
<el-input v-model="form.phone" placeholder="请输入手机号" clearable />
|
||
</el-form-item>
|
||
<el-form-item prop="newPassword">
|
||
<el-input v-model="form.newPassword" placeholder="请输入新密码" show-password clearable />
|
||
</el-form-item>
|
||
<el-form-item prop="captcha">
|
||
<el-input v-model="form.captcha" placeholder="请输入验证码（123456）" clearable />
|
||
</el-form-item>
|
||
<el-button type="primary" class="w-full" :loading="submitting" @click="onSubmit">提交</el-button>
|
||
</el-form>
|
||
<div class="mt-4 text-center">
|
||
<router-link to="/login">返回登录</router-link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { ElMessage, FormInstance, FormRules } from 'element-plus'
|
||
import AuthService from '@/services/auth'
|
||
import type { ResetPasswordRequest } from '@/types/auth'
|
||
|
||
const formRef = ref<FormInstance>()
|
||
const submitting = ref(false)
|
||
const form = ref<ResetPasswordRequest>({ phone: '', newPassword: '', captcha: '' })
|
||
|
||
const rules: FormRules = {
|
||
phone: [
|
||
{ required: true, message: '请输入手机号', trigger: 'blur' },
|
||
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: ['blur', 'change'] }
|
||
],
|
||
newPassword: [
|
||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||
{ min: 6, max: 20, message: '密码长度6-20位', trigger: ['blur', 'change'] }
|
||
],
|
||
captcha: [
|
||
{ required: true, message: '请输入验证码', trigger: 'blur' }
|
||
]
|
||
}
|
||
|
||
const onSubmit = async () => {
|
||
if (!formRef.value) return
|
||
await formRef.value.validate(async (valid) => {
|
||
if (!valid) return
|
||
try {
|
||
submitting.value = true
|
||
await AuthService.resetPassword(form.value)
|
||
ElMessage.success('重置密码成功，请使用新密码登录')
|
||
} catch (e) {
|
||
ElMessage.error('重置密码失败，请稍后重试')
|
||
} finally {
|
||
submitting.value = false
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.forgot-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
|
||
.card { width: 360px; background: #fff; padding: 24px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
|
||
.title { text-align: center; margin-bottom: 16px; }
|
||
.w-full { width: 100%; }
|
||
</style>
|
||
|