140 lines
3.6 KiB
Vue
140 lines
3.6 KiB
Vue
<template>
|
||
<div class="register-container">
|
||
<a-card class="register-card" :bodyStyle="{ padding: '40px' }">
|
||
<h1 class="register-title">用户注册</h1>
|
||
<a-form
|
||
:model="formState"
|
||
@finish="handleRegister"
|
||
layout="vertical"
|
||
>
|
||
<a-form-item
|
||
label="用户名"
|
||
name="username"
|
||
:rules="[
|
||
{ required: true, message: '请输入用户名' },
|
||
{ min: 3, max: 20, message: '用户名长度在 3-20 个字符' }
|
||
]"
|
||
>
|
||
<a-input v-model:value="formState.username" placeholder="请输入用户名" />
|
||
</a-form-item>
|
||
|
||
<a-form-item
|
||
label="密码"
|
||
name="password"
|
||
:rules="[
|
||
{ required: true, message: '请输入密码' },
|
||
{ min: 6, message: '密码长度至少 6 位' }
|
||
]"
|
||
>
|
||
<a-input-password v-model:value="formState.password" placeholder="请输入密码" />
|
||
</a-form-item>
|
||
|
||
<a-form-item
|
||
label="确认密码"
|
||
name="confirmPassword"
|
||
:rules="[
|
||
{ required: true, message: '请确认密码' },
|
||
{ validator: validateConfirmPassword }
|
||
]"
|
||
>
|
||
<a-input-password v-model:value="formState.confirmPassword" placeholder="请再次输入密码" />
|
||
</a-form-item>
|
||
|
||
<a-form-item label="真实姓名">
|
||
<a-input v-model:value="formState.realName" placeholder="请输入真实姓名" />
|
||
</a-form-item>
|
||
|
||
<a-form-item label="身份证号">
|
||
<a-input v-model:value="formState.idCard" placeholder="请输入身份证号" />
|
||
</a-form-item>
|
||
|
||
<a-form-item label="邮箱">
|
||
<a-input v-model:value="formState.email" placeholder="请输入邮箱" />
|
||
</a-form-item>
|
||
|
||
<a-form-item label="手机号">
|
||
<a-input v-model:value="formState.phone" placeholder="请输入手机号" />
|
||
</a-form-item>
|
||
|
||
<a-form-item>
|
||
<a-button type="primary" htmlType="submit" block size="large" :loading="loading">
|
||
注册
|
||
</a-button>
|
||
</a-form-item>
|
||
|
||
<div class="login-link">
|
||
已有账号？<router-link to="/login">立即登录</router-link>
|
||
</div>
|
||
</a-form>
|
||
</a-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { message } from 'ant-design-vue'
|
||
import { register } from '@/api/user'
|
||
|
||
const router = useRouter()
|
||
const loading = ref(false)
|
||
|
||
const formState = reactive({
|
||
username: '',
|
||
password: '',
|
||
confirmPassword: '',
|
||
realName: '',
|
||
idCard: '',
|
||
email: '',
|
||
phone: ''
|
||
})
|
||
|
||
const validateConfirmPassword = ({ formData }) => {
|
||
if (formData.password !== formData.confirmPassword) {
|
||
return Promise.reject('两次输入的密码不一致')
|
||
}
|
||
return Promise.resolve()
|
||
}
|
||
|
||
const handleRegister = async () => {
|
||
loading.value = true
|
||
try {
|
||
const { confirmPassword, ...registerData } = formState
|
||
await register(registerData)
|
||
message.success('注册成功，请登录')
|
||
router.push('/login')
|
||
} catch (error) {
|
||
console.error(error)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.register-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 100vh;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
|
||
.register-card {
|
||
width: 450px;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.register-title {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
color: #1890ff;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.login-link {
|
||
text-align: center;
|
||
margin-top: 16px;
|
||
}
|
||
</style>
|