用户模块:用户注册
This commit is contained in:
parent
16bc748495
commit
09e8e444ca
@ -1,11 +1,107 @@
|
||||
<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 === 0 && 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>
|
||||
|
Loading…
Reference in New Issue
Block a user