更新

src/pages/login/resetPassword.vue

@@ -0,0 +1,196 @@
+<script setup>
+import { ref, reactive, onBeforeUnmount } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from '@/hooks/useI18n'
+import { ElMessage } from 'element-plus'
+import { Lock, Message } from '@element-plus/icons-vue'
+import LanguageSwitcher from '@/layouts/components/LanguageSwitcher.vue'
+import '@/assets/css/auth.css'
+
+const { t } = useI18n()
+const router = useRouter()
+
+const resetFormRef = ref(null)
+const loading = ref(false)
+const countdown = ref(0)
+const timer = ref(null)
+
+const resetForm = reactive({
+	email: '',
+	code: '',
+	newPassword: '',
+	confirmPassword: ''
+})
+
+const validatePass2 = (rule, value, callback) => {
+	if (value === '') {
+		callback(new Error(t('form.passwordMismatch')))
+	} else if (value !== resetForm.newPassword) {
+		callback(new Error(t('form.passwordMismatch')))
+	} else {
+		callback()
+	}
+}
+
+const resetRules = {
+	email: [
+		{ required: true, message: t('resetPassword.emailPlaceholder'), trigger: 'blur' },
+		{ type: 'email', message: t('resetPassword.emailRule'), trigger: 'blur' }
+	],
+	code: [
+		{ required: true, message: t('resetPassword.codePlaceholder'), trigger: 'blur' },
+		{ len: 6, message: t('resetPassword.codeRule'), trigger: 'blur' }
+	],
+	newPassword: [
+		{ required: true, message: t('resetPassword.newPasswordPlaceholder'), trigger: 'blur' },
+		{ min: 6, max: 20, message: t('resetPassword.passwordRule'), trigger: 'blur' }
+	],
+	confirmPassword: [
+		{ required: true, validator: validatePass2, trigger: 'blur' }
+	]
+}
+
+const sendCode = () => {
+	if (!resetForm.email) {
+		ElMessage.warning(t('resetPassword.sendCodeFirst'))
+		return
+	}
+
+	if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(resetForm.email)) {
+		ElMessage.warning(t('resetPassword.emailRule'))
+		return
+	}
+
+	// 模拟发送验证码
+	countdown.value = 60
+	timer.value = setInterval(() => {
+		countdown.value--
+		if (countdown.value <= 0) {
+			clearInterval(timer.value)
+			timer.value = null
+		}
+	}, 1000)
+
+	ElMessage.success(t('resetPassword.codeSent'))
+}
+
+const handleReset = async () => {
+	if (!resetFormRef.value) return
+
+	await resetFormRef.value.validate(async (valid) => {
+		if (valid) {
+			loading.value = true
+
+			try {
+				// 模拟重置密码请求
+				await new Promise((resolve) => setTimeout(resolve, 1500))
+
+				ElMessage.success(t('resetPassword.resetSuccess'))
+
+				// 清除定时器
+				if (timer.value) {
+					clearInterval(timer.value)
+					timer.value = null
+					countdown.value = 0
+				}
+
+				// 跳转到登录页
+				router.push('/login')
+			} catch (error) {
+				ElMessage.error(error.message || t('resetPassword.resetFailed'))
+			} finally {
+				loading.value = false
+			}
+		}
+	})
+}
+
+const goToLogin = () => {
+	// 清除定时器
+	if (timer.value) {
+		clearInterval(timer.value)
+		timer.value = null
+		countdown.value = 0
+	}
+	router.push('/login')
+}
+
+onBeforeUnmount(() => {
+	if (resetFormRef.value) {
+		resetFormRef.value.clearValidate()
+	}
+	if (timer.value) {
+		clearInterval(timer.value)
+		timer.value = null
+	}
+})
+</script>
+
+<template>
+	<div class="auth-container">
+		<div class="language-switcher">
+			<LanguageSwitcher />
+		</div>
+
+		<div class="auth-card">
+			<div class="auth-header">
+				<div class="logo">
+					<el-icon :size="48">
+						<Lock />
+					</el-icon>
+				</div>
+				<h1>{{ t('resetPassword.title') }}</h1>
+				<p>{{ t('resetPassword.subtitle') }}</p>
+			</div>
+
+			<el-form ref="resetFormRef" :model="resetForm" :rules="resetRules" class="auth-form" size="large">
+				<el-form-item prop="email">
+					<el-input v-model="resetForm.email" :placeholder="t('resetPassword.emailPlaceholder')"
+						:prefix-icon="Message" />
+				</el-form-item>
+
+				<el-form-item prop="code">
+					<el-row :gutter="10">
+						<el-col :span="14">
+							<el-input v-model="resetForm.code" :placeholder="t('resetPassword.codePlaceholder')"
+								:prefix-icon="Lock" maxlength="6" />
+						</el-col>
+						<el-col :span="10">
+							<el-button class="code-button" :disabled="countdown > 0" @click="sendCode">
+								{{
+									countdown > 0
+										? t('resetPassword.resendCode', { seconds: countdown })
+										: t('resetPassword.sendCode')
+								}}
+							</el-button>
+						</el-col>
+					</el-row>
+				</el-form-item>
+
+				<el-form-item prop="newPassword">
+					<el-input v-model="resetForm.newPassword" type="password"
+						:placeholder="t('resetPassword.newPasswordPlaceholder')" :prefix-icon="Lock" show-password />
+				</el-form-item>
+
+				<el-form-item prop="confirmPassword">
+					<el-input v-model="resetForm.confirmPassword" type="password"
+						:placeholder="t('resetPassword.confirmPasswordPlaceholder')" :prefix-icon="Lock" show-password
+						@keyup.enter="handleReset" />
+				</el-form-item>
+
+				<el-form-item>
+					<el-button type="primary" :loading="loading" @click="handleReset">
+						{{ t('resetPassword.resetButton') }}
+					</el-button>
+				</el-form-item>
+			</el-form>
+
+			<div class="auth-footer">
+				<span class="text">{{ t('common.back') }}</span>
+				<el-link type="primary" @click="goToLogin">
+					{{ t('resetPassword.backToLogin') }}
+				</el-link>
+			</div>
+		</div>
+	</div>
+</template>