<!-- 注册页面 -->
|
<template>
|
<div class="flex w-full h-screen">
|
<LoginLeftView />
|
|
<div class="relative flex-1">
|
<AuthTopBar />
|
|
<div class="auth-right-wrap">
|
<div class="form">
|
<h3 class="title">{{ $t('register.title') }}</h3>
|
<p class="sub-title">{{ $t('register.subTitle') }}</p>
|
<ElForm
|
class="mt-7.5"
|
ref="formRef"
|
:model="formData"
|
:rules="rules"
|
label-position="top"
|
:key="formKey"
|
>
|
<ElFormItem prop="username">
|
<ElInput
|
class="custom-height"
|
v-model.trim="formData.username"
|
:placeholder="$t('register.placeholder.username')"
|
/>
|
</ElFormItem>
|
|
<ElFormItem prop="password">
|
<ElInput
|
class="custom-height"
|
v-model.trim="formData.password"
|
:placeholder="$t('register.placeholder.password')"
|
type="password"
|
autocomplete="off"
|
show-password
|
/>
|
</ElFormItem>
|
|
<ElFormItem prop="confirmPassword">
|
<ElInput
|
class="custom-height"
|
v-model.trim="formData.confirmPassword"
|
:placeholder="$t('register.placeholder.confirmPassword')"
|
type="password"
|
autocomplete="off"
|
@keyup.enter="register"
|
show-password
|
/>
|
</ElFormItem>
|
|
<ElFormItem prop="agreement">
|
<ElCheckbox v-model="formData.agreement">
|
{{ $t('register.agreeText') }}
|
<RouterLink
|
style="color: var(--theme-color); text-decoration: none"
|
to="/privacy-policy"
|
>{{ $t('register.privacyPolicy') }}</RouterLink
|
>
|
</ElCheckbox>
|
</ElFormItem>
|
|
<div style="margin-top: 15px">
|
<ElButton
|
class="w-full custom-height"
|
type="primary"
|
@click="register"
|
:loading="loading"
|
v-ripple
|
>
|
{{ $t('register.submitBtnText') }}
|
</ElButton>
|
</div>
|
|
<div class="mt-5 text-sm text-g-600">
|
<span>{{ $t('register.hasAccount') }}</span>
|
<RouterLink class="text-theme" :to="{ name: 'Login' }">{{
|
$t('register.toLogin')
|
}}</RouterLink>
|
</div>
|
</ElForm>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { useI18n } from 'vue-i18n'
|
defineOptions({ name: 'Register' })
|
const USERNAME_MIN_LENGTH = 3
|
const USERNAME_MAX_LENGTH = 20
|
const PASSWORD_MIN_LENGTH = 6
|
const REDIRECT_DELAY = 1e3
|
const { t, locale } = useI18n()
|
const router = useRouter()
|
const formRef = ref()
|
const loading = ref(false)
|
const formKey = ref(0)
|
watch(locale, () => {
|
formKey.value++
|
})
|
const formData = reactive({
|
username: '',
|
password: '',
|
confirmPassword: '',
|
agreement: false
|
})
|
const validatePassword = (_rule, value, callback) => {
|
if (!value) {
|
callback(new Error(t('register.placeholder.password')))
|
return
|
}
|
if (formData.confirmPassword) {
|
formRef.value?.validateField('confirmPassword')
|
}
|
callback()
|
}
|
const validateConfirmPassword = (_rule, value, callback) => {
|
if (!value) {
|
callback(new Error(t('register.rule.confirmPasswordRequired')))
|
return
|
}
|
if (value !== formData.password) {
|
callback(new Error(t('register.rule.passwordMismatch')))
|
return
|
}
|
callback()
|
}
|
const validateAgreement = (_rule, value, callback) => {
|
if (!value) {
|
callback(new Error(t('register.rule.agreementRequired')))
|
return
|
}
|
callback()
|
}
|
const rules = computed(() => ({
|
username: [
|
{ required: true, message: t('register.placeholder.username'), trigger: 'blur' },
|
{
|
min: USERNAME_MIN_LENGTH,
|
max: USERNAME_MAX_LENGTH,
|
message: t('register.rule.usernameLength'),
|
trigger: 'blur'
|
}
|
],
|
password: [
|
{ required: true, validator: validatePassword, trigger: 'blur' },
|
{ min: PASSWORD_MIN_LENGTH, message: t('register.rule.passwordLength'), trigger: 'blur' }
|
],
|
confirmPassword: [{ required: true, validator: validateConfirmPassword, trigger: 'blur' }],
|
agreement: [{ validator: validateAgreement, trigger: 'change' }]
|
}))
|
const register = async () => {
|
if (!formRef.value) return
|
try {
|
await formRef.value.validate()
|
loading.value = true
|
setTimeout(() => {
|
loading.value = false
|
ElMessage.success('注册成功')
|
toLogin()
|
}, REDIRECT_DELAY)
|
} catch (error) {
|
console.error('表单验证失败:', error)
|
loading.value = false
|
}
|
}
|
const toLogin = () => {
|
setTimeout(() => {
|
router.push({ name: 'Login' })
|
}, REDIRECT_DELAY)
|
}
|
</script>
|
|
<style scoped>
|
@import '../login/style.css';
|
</style>
|
