vueadmin/src/pages/login/userRegister.vue

<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>