168 lines
3.8 KiB
Vue
168 lines
3.8 KiB
Vue
<template>
|
||
<div class="auth-page">
|
||
<el-card class="auth-card">
|
||
<h2>求职者注册</h2>
|
||
<el-form :model="form" @submit.prevent="handleRegister">
|
||
<!-- 邮箱 -->
|
||
<el-form-item>
|
||
<el-input
|
||
v-model="form.email"
|
||
type="email"
|
||
placeholder="请输入邮箱"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<!-- 用户名 -->
|
||
<el-form-item>
|
||
<el-input
|
||
v-model="form.username"
|
||
placeholder="请输入用户名"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<!-- 手机号 -->
|
||
<el-form-item>
|
||
<el-input
|
||
v-model="form.phone"
|
||
placeholder="请输入手机号"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<!-- 密码 -->
|
||
<el-form-item>
|
||
<el-input
|
||
v-model="form.password"
|
||
type="password"
|
||
placeholder="请输入密码（至少6位）"
|
||
show-password
|
||
/>
|
||
</el-form-item>
|
||
|
||
<!-- 确认密码 -->
|
||
<el-form-item>
|
||
<el-input
|
||
v-model="form.passwordConfirm"
|
||
type="password"
|
||
placeholder="请确认密码"
|
||
show-password
|
||
/>
|
||
</el-form-item>
|
||
|
||
<!-- 注册按钮 -->
|
||
<el-button
|
||
type="primary"
|
||
native-type="submit"
|
||
:loading="loading"
|
||
style="width: 100%"
|
||
>
|
||
注册
|
||
</el-button>
|
||
</el-form>
|
||
|
||
<div style="margin-top: 12px; text-align: center; font-size: 12px;">
|
||
已有账号？<router-link to="/login" style="color: var(--brand-red); text-decoration: none;">立即登录</router-link>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { useAuthStore } from '@/stores/auth'
|
||
import { ElMessage } from 'element-plus'
|
||
|
||
const form = reactive({
|
||
email: '',
|
||
username: '',
|
||
phone: '',
|
||
password: '',
|
||
passwordConfirm: '',
|
||
})
|
||
const loading = ref(false)
|
||
|
||
const router = useRouter()
|
||
const auth = useAuthStore()
|
||
|
||
async function handleRegister() {
|
||
// 验证字段
|
||
if (!form.email) {
|
||
ElMessage.warning('请输入邮箱')
|
||
return
|
||
}
|
||
if (!form.username) {
|
||
ElMessage.warning('请输入用户名')
|
||
return
|
||
}
|
||
if (!form.phone) {
|
||
ElMessage.warning('请输入手机号')
|
||
return
|
||
}
|
||
if (!form.password || form.password.length < 6) {
|
||
ElMessage.warning('请输入至少6位密码')
|
||
return
|
||
}
|
||
if (form.password !== form.passwordConfirm) {
|
||
ElMessage.warning('两次输入的密码不一致')
|
||
return
|
||
}
|
||
|
||
loading.value = true
|
||
try {
|
||
const response = await fetch('/api/auth/register/', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
email: form.email,
|
||
username: form.username,
|
||
phone: form.phone,
|
||
password: form.password,
|
||
}),
|
||
})
|
||
|
||
if (!response.ok) {
|
||
const data = await response.json()
|
||
const errorMsg = data.username?.[0] || data.email?.[0] || data.phone?.[0] || data.password?.[0] || '注册失败'
|
||
ElMessage.error(errorMsg)
|
||
return
|
||
}
|
||
|
||
const data = await response.json()
|
||
|
||
// 自动登入用户
|
||
localStorage.setItem('access_token', data.access)
|
||
localStorage.setItem('refresh_token', data.refresh)
|
||
await auth.fetchMe()
|
||
|
||
ElMessage.success('注册成功')
|
||
router.push('/home')
|
||
} catch (err) {
|
||
ElMessage.error('注册失败，请稍后重试')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.auth-page {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 60vh;
|
||
}
|
||
|
||
.auth-card {
|
||
width: 380px;
|
||
}
|
||
|
||
h2 {
|
||
text-align: center;
|
||
margin-bottom: 24px;
|
||
color: #333;
|
||
font-weight: 600;
|
||
}
|
||
</style>
|