更新

src/pages/login/userRegister.vue

@@ -0,0 +1,162 @@
+<script setup>
+import { ref, reactive, onBeforeUnmount } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from '@/hooks/useI18n'
+import { useUserStore } from '@/stores/modules/user'
+import { ElMessage } from 'element-plus'
+import { User, 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 userStore = useUserStore()
+
+const registerFormRef = ref(null)
+const loading = ref(false)
+
+const registerForm = reactive({
+	username: '',
+	email: '',
+	password: '',
+	confirmPassword: '',
+	agree: false
+})
+
+const validatePass2 = (rule, value, callback) => {
+	if (value === '') {
+		callback(new Error(t('form.passwordMismatch')))
+	} else if (value !== registerForm.password) {
+		callback(new Error(t('form.passwordMismatch')))
+	} else {
+		callback()
+	}
+}
+
+const registerRules = {
+	username: [
+		{ required: true, message: t('register.usernamePlaceholder'), trigger: 'blur' },
+		{ min: 3, max: 20, message: t('register.usernameRule'), trigger: 'blur' }
+	],
+	email: [
+		{ required: true, message: t('register.emailPlaceholder'), trigger: 'blur' },
+		{ type: 'email', message: t('register.emailRule'), trigger: 'blur' }
+	],
+	password: [
+		{ required: true, message: t('register.passwordPlaceholder'), trigger: 'blur' },
+		{ min: 6, max: 20, message: t('register.passwordRule'), trigger: 'blur' }
+	],
+	confirmPassword: [
+		{ required: true, validator: validatePass2, trigger: 'blur' }
+	],
+	agree: [
+		{
+			validator: (rule, value, callback) => {
+				if (!value) {
+					callback(new Error(t('register.agreeRule')))
+				} else {
+					callback()
+				}
+			},
+			trigger: 'change'
+		}
+	]
+}
+
+const handleRegister = async () => {
+	if (!registerFormRef.value) return
+
+	await registerFormRef.value.validate(async (valid) => {
+		if (valid) {
+			loading.value = true
+
+			try {
+				// 模拟注册请求
+				await new Promise((resolve) => setTimeout(resolve, 1500))
+
+				ElMessage.success(t('register.registerSuccess'))
+
+				// 跳转到登录页
+				router.push('/login')
+			} catch (error) {
+				ElMessage.error(error.message || t('register.registerFailed'))
+			} finally {
+				loading.value = false
+			}
+		}
+	})
+}
+
+const goToLogin = () => {
+	router.push('/login')
+}
+
+onBeforeUnmount(() => {
+	if (registerFormRef.value) {
+		registerFormRef.value.clearValidate()
+	}
+})
+</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">
+						<User />
+					</el-icon>
+				</div>
+				<h1>{{ t('register.title') }}</h1>
+				<p>{{ t('register.subtitle') }}</p>
+			</div>
+
+			<el-form ref="registerFormRef" :model="registerForm" :rules="registerRules" class="auth-form" size="large">
+				<el-form-item prop="username">
+					<el-input v-model="registerForm.username" :placeholder="t('register.usernamePlaceholder')"
+						:prefix-icon="User" />
+				</el-form-item>
+
+				<el-form-item prop="email">
+					<el-input v-model="registerForm.email" :placeholder="t('register.emailPlaceholder')"
+						:prefix-icon="Message" />
+				</el-form-item>
+
+				<el-form-item prop="password">
+					<el-input v-model="registerForm.password" type="password"
+						:placeholder="t('register.passwordPlaceholder')" :prefix-icon="Lock" show-password />
+				</el-form-item>
+
+				<el-form-item prop="confirmPassword">
+					<el-input v-model="registerForm.confirmPassword" type="password"
+						:placeholder="t('register.confirmPasswordPlaceholder')" :prefix-icon="Lock" show-password
+						@keyup.enter="handleRegister" />
+				</el-form-item>
+
+				<el-form-item prop="agree">
+					<el-checkbox v-model="registerForm.agree">
+						<span v-html="t('register.agreeTerms')"></span>
+						<el-link type="primary">{{ t('register.terms') }}</el-link>
+					</el-checkbox>
+				</el-form-item>
+
+				<el-form-item>
+					<el-button type="primary" :loading="loading" @click="handleRegister">
+						{{ t('register.registerButton') }}
+					</el-button>
+				</el-form-item>
+			</el-form>
+
+			<div class="auth-footer">
+				<span class="text">{{ t('register.hasAccount') }}</span>
+				<router-link to="/login" class="link">
+					{{ t('register.loginNow') }}
+				</router-link>
+			</div>
+		</div>
+	</div>
+</template>