122 lines
3.2 KiB
Vue
122 lines
3.2 KiB
Vue
<template>
|
||
<el-form :model="form" :rules="rules" ref="formRef" @submit.prevent="handleRegister">
|
||
<el-form-item prop="username">
|
||
<el-input
|
||
v-model="form.username"
|
||
placeholder="请输入账号（3-20个字符）"
|
||
clearable
|
||
>
|
||
<template #prefix><el-icon><User /></el-icon></template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="nickname">
|
||
<el-input
|
||
v-model="form.nickname"
|
||
placeholder="请输入昵称"
|
||
clearable
|
||
>
|
||
<template #prefix><el-icon><UserFilled /></el-icon></template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="password">
|
||
<el-input
|
||
v-model="form.password"
|
||
type="password"
|
||
placeholder="请输入密码"
|
||
show-password
|
||
>
|
||
<template #prefix><el-icon><Lock /></el-icon></template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="confirmPassword">
|
||
<el-input
|
||
v-model="form.confirmPassword"
|
||
type="password"
|
||
placeholder="请确认密码"
|
||
show-password
|
||
>
|
||
<template #prefix><el-icon><Lock /></el-icon></template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button
|
||
type="primary"
|
||
:loading="loading"
|
||
native-type="submit"
|
||
style="width: 100%"
|
||
>
|
||
<el-icon><Check /></el-icon>
|
||
<span style="margin-left: 4px">注册</span>
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive } from 'vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import { User, UserFilled, Lock, Check } from '@element-plus/icons-vue'
|
||
import { register } from '@/api/auth'
|
||
|
||
const emit = defineEmits(['success'])
|
||
|
||
const formRef = ref(null)
|
||
const loading = ref(false)
|
||
|
||
const form = reactive({
|
||
username: '',
|
||
nickname: '',
|
||
password: '',
|
||
confirmPassword: ''
|
||
})
|
||
|
||
const validateConfirmPassword = (rule, value, callback) => {
|
||
if (value !== form.password) {
|
||
callback(new Error('两次输入的密码不一致'))
|
||
} else {
|
||
callback()
|
||
}
|
||
}
|
||
|
||
const rules = {
|
||
username: [
|
||
{ required: true, message: '请输入账号', trigger: 'blur' },
|
||
{ min: 3, max: 20, message: '账号长度 3-20 个字符', trigger: 'blur' }
|
||
],
|
||
password: [
|
||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||
{ min: 6, max: 20, message: '密码长度 6-20 个字符', trigger: 'blur' }
|
||
],
|
||
confirmPassword: [
|
||
{ required: true, message: '请确认密码', trigger: 'blur' },
|
||
{ validator: validateConfirmPassword, trigger: 'blur' }
|
||
]
|
||
}
|
||
|
||
const handleRegister = async () => {
|
||
const valid = await formRef.value.validate().catch(() => false)
|
||
if (!valid) return
|
||
|
||
loading.value = true
|
||
try {
|
||
await register({
|
||
username: form.username,
|
||
password: form.password,
|
||
nickname: form.nickname || form.username
|
||
})
|
||
ElMessage.success('注册成功，请登录')
|
||
emit('success')
|
||
} catch (e) {
|
||
if (!e.response) {
|
||
ElMessage.error('后端服务不可用，请稍后重试')
|
||
} else if (e.response.status >= 500) {
|
||
ElMessage.error('服务器异常，请稍后重试')
|
||
} else {
|
||
ElMessage.error(e.response.data?.message || '注册失败，请重试')
|
||
}
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
</script>
|