108 lines
2.6 KiB
Vue
108 lines
2.6 KiB
Vue
<template>
|
||
<div id="userRegisterPage">
|
||
<h2 class="title">龙儿的云图库 - 用户注册</h2>
|
||
<div class="desc">企业级智能协同云图库</div>
|
||
<a-form
|
||
:model="formState"
|
||
name="basic"
|
||
label-align="left"
|
||
autocomplete="off"
|
||
@finish="handleSubmit"
|
||
>
|
||
<a-form-item name="userAccount" :rules="[{ required: true, message: '请输入账号' }]">
|
||
<a-input v-model:value="formState.userAccount" placeholder="请输入账号" />
|
||
</a-form-item>
|
||
<a-form-item
|
||
name="userPassword"
|
||
:rules="[
|
||
{ required: true, message: '请输入密码' },
|
||
{ min: 8, message: '密码不能小于 8 位' },
|
||
]"
|
||
>
|
||
<a-input-password v-model:value="formState.userPassword" placeholder="请输入密码" />
|
||
</a-form-item>
|
||
<a-form-item
|
||
name="checkPassword"
|
||
:rules="[
|
||
{ required: true, message: '请输入确认密码' },
|
||
{ min: 8, message: '确认密码不能小于 8 位' },
|
||
]"
|
||
>
|
||
<a-input-password v-model:value="formState.checkPassword" placeholder="请输入确认密码" />
|
||
</a-form-item>
|
||
<div class="tips">
|
||
已有账号？
|
||
<RouterLink to="/user/login">去登录</RouterLink>
|
||
</div>
|
||
<a-form-item>
|
||
<a-button type="primary" html-type="submit" style="width: 100%">注册</a-button>
|
||
</a-form-item>
|
||
</a-form>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts" name="">
|
||
import { reactive } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { message } from 'ant-design-vue'
|
||
import { userRegisterUsingPost } from '@/api/userController.ts'
|
||
|
||
const formState = reactive<API.UserRegisterRequest>({
|
||
userAccount: '',
|
||
userPassword: '',
|
||
checkPassword: '',
|
||
})
|
||
|
||
const router = useRouter()
|
||
|
||
/**
|
||
* 提交表单
|
||
* @param values
|
||
*/
|
||
const handleSubmit = async (values: any) => {
|
||
// 判断两次输入的密码是否一致
|
||
if (formState.userPassword !== formState.checkPassword) {
|
||
message.error('二次输入的密码不一致')
|
||
return
|
||
}
|
||
const res = await userRegisterUsingPost(values)
|
||
// 注册成功，跳转到登录页面
|
||
if (res.data.code === 200 && res.data.data) {
|
||
message.success('注册成功')
|
||
await router.push({
|
||
path: '/user/login',
|
||
replace: true,
|
||
})
|
||
} else {
|
||
message.error('注册失败，' + res.data.message)
|
||
}
|
||
}
|
||
|
||
|
||
</script>
|
||
|
||
<style scoped>
|
||
#userRegisterPage {
|
||
max-width: 360px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.title {
|
||
text-align: center;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.desc {
|
||
text-align: center;
|
||
color: #bbb;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.tips {
|
||
color: #bbb;
|
||
text-align: right;
|
||
font-size: 13px;
|
||
margin-bottom: 16px;
|
||
}
|
||
</style>
|