molong/vueadmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
龙渊
2026-01-26 09:44:48 +08:00
parent 42be40ee9f
commit 01e87acfd1
28 changed files with 1016 additions and 1050 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/ucenter/forgot-password/index.vue
+46 -52
View File
@@ -1,60 +1,56 @@
<template>
<div class="auth-container">
<div class="tech-decoration">
<div class="tech-circle"></div>
<div class="tech-circle"></div>
<div class="tech-circle"></div>
</div>
<div class="auth-card">
<div class="auth-header">
<h1 class="auth-title">找回密码</h1>
<p class="auth-subtitle">输入您的邮箱，我们将发送重置密码链接</p>
<div class="auth-container">
<div class="tech-decoration">
<div class="tech-circle"></div>
<div class="tech-circle"></div>
<div class="tech-circle"></div>
</div>
<el-form ref="forgotFormRef" :model="forgotForm" :rules="forgotRules" class="auth-form"
@submit.prevent="handleSubmit">
<el-form-item prop="email">
<el-input v-model="forgotForm.email" placeholder="请输入注册邮箱" size="large" clearable
@keyup.enter="handleSubmit">
<template #prefix>
<el-icon>
<Message />
</el-icon>
</template>
</el-input>
</el-form-item>
<div class="auth-card">
<div class="auth-header">
<h1 class="auth-title">找回密码</h1>
<p class="auth-subtitle">输入您的邮箱，我们将发送重置密码链接</p>
</div>
<el-form-item prop="captcha" v-if="showCaptcha">
<div style="display: flex; gap: 12px">
<el-input v-model="forgotForm.captcha" placeholder="请输入验证码" size="large" style="flex: 1">
<el-form ref="forgotFormRef" :model="forgotForm" :rules="forgotRules" class="auth-form" @submit.prevent="handleSubmit">
<el-form-item prop="email">
<el-input v-model="forgotForm.email" placeholder="请输入注册邮箱" size="large" clearable @keyup.enter="handleSubmit">
<template #prefix>
<el-icon>
<Key />
<Message />
</el-icon>
</template>
</el-input>
<el-button type="info" size="large" :disabled="captchaDisabled" @click="sendCaptcha">
{{ captchaButtonText }}
</el-button>
</div>
</el-form-item>
</el-form-item>
<el-button type="primary" :loading="loading" size="large" style="width: 100%" @click="handleSubmit">
{{ loading ? '提交中...' : '发送重置链接' }}
</el-button>
</el-form>
<el-form-item prop="captcha" v-if="showCaptcha">
<div style="display: flex; gap: 12px">
<el-input v-model="forgotForm.captcha" placeholder="请输入验证码" size="large" style="flex: 1">
<template #prefix>
<el-icon>
<Key />
</el-icon>
</template>
</el-input>
<el-button type="info" size="large" :disabled="captchaDisabled" @click="sendCaptcha">
{{ captchaButtonText }}
</el-button>
</div>
</el-form-item>
<div class="auth-footer">
<p class="auth-footer-text">
想起密码了？
<router-link to="/login" class="auth-link">
返回登录
</router-link>
</p>
<el-button type="primary" :loading="loading" size="large" style="width: 100%" @click="handleSubmit">
{{ loading ? '提交中...' : '发送重置链接' }}
</el-button>
</el-form>
<div class="auth-footer">
<p class="auth-footer-text">
想起密码了？
<router-link to="/login" class="auth-link"> 返回登录 </router-link>
</p>
</div>
</div>
</div>
</div>
</template>
<script setup>
@@ -73,7 +69,7 @@ const countdown = ref(60)
// Forgot password form data
const forgotForm = reactive({
email: '',
captcha: ''
captcha: '',
})
// Captcha button text
@@ -83,12 +79,12 @@ const captchaButtonText = ref('获取验证码')
const forgotRules = {
email: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
],
captcha: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
{ len: 6, message: '验证码为6位数字', trigger: 'blur' }
]
{ len: 6, message: '验证码为6位数字', trigger: 'blur' },
],
}
// Send captcha code
@@ -109,7 +105,7 @@ const sendCaptcha = async () => {
// Simulate API call - Replace with actual API call
// Example: const response = await sendCaptchaApi(forgotForm.email)
await new Promise(resolve => setTimeout(resolve, 500))
await new Promise((resolve) => setTimeout(resolve, 500))
ElMessage.success('验证码已发送至您的邮箱')
@@ -128,7 +124,6 @@ const sendCaptcha = async () => {
}, 1000)
showCaptcha.value = true
} catch (error) {
console.error('Send captcha failed:', error)
ElMessage.error('发送验证码失败，请稍后重试')
@@ -147,7 +142,7 @@ const handleSubmit = async () => {
// Example: const response = await forgotPasswordApi(forgotForm)
// Simulated delay
await new Promise(resolve => setTimeout(resolve, 1500))
await new Promise((resolve) => setTimeout(resolve, 1500))
// Success message
ElMessage.success('密码重置链接已发送至您的邮箱，请注意查收')
@@ -156,7 +151,6 @@ const handleSubmit = async () => {
setTimeout(() => {
router.push('/login')
}, 2000)
} catch (error) {
console.error('Forgot password failed:', error)
ElMessage.error('提交失败，请检查邮箱地址和验证码')