feat: 注册

This commit is contained in:
cgd_mac 2022-02-24 19:53:36 +08:00
parent 3e5831c095
commit dff16ba630
2 changed files with 220 additions and 90 deletions

View File

@ -3,7 +3,9 @@ import request from '@/utils/request'
const userApi = { const userApi = {
login: '/login', login: '/login',
logout: '/logout', logout: '/logout',
getLoginUser: '/getLoginUser' getLoginUser: '/getLoginUser',
getUnitNameByInvitationCode: '/person/register/invitation',
register: '/person/register/add'
} }
export function login (parameter) { export function login (parameter) {
@ -14,6 +16,22 @@ export function login (parameter) {
}) })
} }
export function getUnitNameByInvitationCode (parameter) {
return request({
url: userApi.getUnitNameByInvitationCode,
method: 'post',
data: parameter
})
}
export function reqRegister (parameter) {
return request({
url: userApi.register,
method: 'post',
data: parameter
})
}
export function getLoginUser (parameter) { export function getLoginUser (parameter) {
return request({ return request({
url: userApi.getLoginUser, url: userApi.getLoginUser,

View File

@ -7,19 +7,47 @@
size="large" size="large"
type="text" type="text"
placeholder="用户名" placeholder="用户名"
v-decorator="['username', {rules: [{ required: true, message: '请输入用户名' }], validateTrigger: ['change', 'blur']}]" v-decorator="[
'username',
{
rules: [{ required: true, message: '请输入用户名' }],
validateTrigger: ['change', 'blur'],
},
]"
></a-input>
</a-form-item>
<a-form-item>
<a-input
size="large"
type="text"
placeholder="姓名"
v-decorator="[
'name',
{
rules: [{ required: true, message: '请输入姓名' }],
validateTrigger: ['change', 'blur'],
},
]"
></a-input> ></a-input>
</a-form-item> </a-form-item>
<a-popover <a-popover
placement="rightTop" placement="rightTop"
:trigger="['focus', 'click']" :trigger="['focus', 'click']"
:getPopupContainer="(trigger) => trigger.parentElement" :getPopupContainer="trigger => trigger.parentElement"
v-model="state.passwordLevelChecked"> v-model="state.passwordLevelChecked"
>
<template slot="content"> <template slot="content">
<div :style="{ width: '240px' }" > <div :style="{ width: '240px' }">
<div :class="['user-register', passwordLevelClass]">强度<span>{{ passwordLevelName }}</span></div> <div :class="['user-register', passwordLevelClass]">
<a-progress :percent="state.percent" :showInfo="false" :strokeColor=" passwordLevelColor " /> 强度
<span>{{ passwordLevelName }}</span>
</div>
<a-progress
:percent="state.percent"
:showInfo="false"
:strokeColor="passwordLevelColor"
/>
<div style="margin-top: 10px;"> <div style="margin-top: 10px;">
<span>请输入至少包括大写小写数字特殊符号中的三种密码长度至少为8位</span> <span>请输入至少包括大写小写数字特殊符号中的三种密码长度至少为8位</span>
</div> </div>
@ -30,7 +58,20 @@
size="large" size="large"
@click="handlePasswordInputClick" @click="handlePasswordInputClick"
placeholder="请输入至少包括大写、小写、数字、特殊符号中的三种密码长度至少为8位。" placeholder="请输入至少包括大写、小写、数字、特殊符号中的三种密码长度至少为8位。"
v-decorator="['password', {rules: [{ required: true, message: '请输入至少包括大写、小写、数字、特殊符号中的三种密码长度至少为8位。'}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}]" v-decorator="[
'password',
{
rules: [
{
required: true,
message:
'请输入至少包括大写、小写、数字、特殊符号中的三种密码长度至少为8位。',
},
{ validator: this.handlePasswordLevel },
],
validateTrigger: ['change', 'blur'],
},
]"
></a-input-password> ></a-input-password>
</a-form-item> </a-form-item>
</a-popover> </a-popover>
@ -39,18 +80,47 @@
<a-input-password <a-input-password
size="large" size="large"
placeholder="确认密码" placeholder="确认密码"
v-decorator="['password2', {rules: [{ required: true, message: '至少6位密码区分大小写' }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur']}]" v-decorator="[
'password2',
{
rules: [
{ required: true, message: '至少6位密码区分大小写' },
{ validator: this.handlePasswordCheck },
],
validateTrigger: ['change', 'blur'],
},
]"
></a-input-password> ></a-input-password>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-input size="large" placeholder="11 位手机号" v-decorator="['mobile', {rules: [{ required: true, message: '请输入正确的手机号', pattern: /^1[3456789]\d{9}$/ }, { validator: this.handlePhoneCheck } ], validateTrigger: ['change', 'blur'] }]"> <a-input
</a-input> size="large"
placeholder="11 位手机号"
v-decorator="[
'mobile',
{
rules: [
{ required: true, message: '请输入正确的手机号', pattern: /^1[3456789]\d{9}$/ },
{ validator: this.handlePhoneCheck },
],
validateTrigger: ['change', 'blur'],
},
]"
></a-input>
</a-form-item> </a-form-item>
<a-row :gutter="16"> <a-row :gutter="16">
<a-col class="gutter-row" :span="16"> <a-col class="gutter-row" :span="16">
<a-form-item> <a-form-item>
<a-input size="large" type="text" placeholder="验证码" v-decorator="['captcha', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]"> <a-input
<a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/> size="large"
type="text"
placeholder="验证码"
v-decorator="[
'captcha',
{ rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur' },
]"
>
<a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }" />
</a-input> </a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
@ -60,14 +130,31 @@
size="large" size="large"
:disabled="state.smsSendBtn" :disabled="state.smsSendBtn"
@click.stop.prevent="getCaptcha" @click.stop.prevent="getCaptcha"
v-text="!state.smsSendBtn && '获取验证码'||(state.time+' s')"></a-button> v-text="(!state.smsSendBtn && '获取验证码') || state.time + ' s'"
></a-button>
</a-col> </a-col>
</a-row> </a-row>
<a-form-item> <a-form-item>
<a-input size="large" placeholder="请您输入单位邀请码" v-decorator="['code', {rules: [{ required: true, message: '请输入正确的邀请码' }], validateTrigger: ['blur'] }]"></a-input> <a-input
size="large"
placeholder="请您输入单位邀请码"
@change="invitationCodeChange"
v-decorator="[
'invitationCode',
{
rules: [{ required: true, message: '请输入正确的邀请码' }],
validateTrigger: ['blur'],
},
]"
></a-input>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-input size="large" disabled placeholder="输入邀请码以后自动绑定" v-decorator="['unit']"></a-input> <a-input
size="large"
disabled
placeholder="输入邀请码以后自动绑定"
:value="unitInfo.name"
></a-input>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-button <a-button
@ -77,17 +164,18 @@
class="register-button" class="register-button"
:loading="registerBtn" :loading="registerBtn"
@click.stop.prevent="handleSubmit" @click.stop.prevent="handleSubmit"
:disabled="registerBtn">立即注册 :disabled="registerBtn"
>
立即注册
</a-button> </a-button>
<router-link class="login" :to="{ name: 'login' }">使用已有账户登录</router-link> <router-link class="login" :to="{ name: 'login' }">使用已有账户登录</router-link>
</a-form-item> </a-form-item>
</a-form> </a-form>
</div> </div>
</template> </template>
<script> <script>
import { getSmsCaptcha } from '@/api/login' import { getSmsCaptcha, getUnitNameByInvitationCode, reqRegister } from '@/api/login'
const levelNames = { const levelNames = {
0: '低', 0: '低',
@ -110,11 +198,11 @@ const levelColor = {
} }
export default { export default {
name: 'Register', name: 'Register',
components: { components: {},
},
mixins: [], mixins: [],
data () { data () {
return { return {
unitInfo: {},
form: this.$form.createForm(this), form: this.$form.createForm(this),
state: { state: {
time: 60, time: 60,
@ -173,7 +261,6 @@ export default {
handlePasswordCheck (rule, value, callback) { handlePasswordCheck (rule, value, callback) {
const password = this.form.getFieldValue('password') const password = this.form.getFieldValue('password')
console.log('value', value)
if (value === undefined) { if (value === undefined) {
callback(new Error('请输入密码')) callback(new Error('请输入密码'))
} }
@ -184,10 +271,6 @@ export default {
}, },
handlePhoneCheck (rule, value, callback) { handlePhoneCheck (rule, value, callback) {
console.log('handlePhoneCheck, rule:', rule)
console.log('handlePhoneCheck, value', value)
console.log('handlePhoneCheck, callback', callback)
callback() callback()
}, },
@ -200,51 +283,87 @@ export default {
}, },
handleSubmit () { handleSubmit () {
const { form: { validateFields }, state, $router } = this const {
form: { validateFields },
state
} = this
validateFields({ force: true }, (err, values) => { validateFields({ force: true }, (err, values) => {
if (!err) { if (!err) {
state.passwordLevelChecked = false state.passwordLevelChecked = false
$router.push({ name: 'registerResult', query: { ...values } }) this.setRegister(values)
} }
}) })
}, },
//
setRegister (data) {
if (!this.uniInfo.id) {
this.$message.warning('请输入正确的邀请码~')
return
}
const params = {
name: data.name,
userName: data.username,
password: data.password,
phone: data.mobile,
orgId: this.unitInfo.id
}
reqRegister(params).then(res => {
this.$message.success('注册成功!')
this.$router.push({ name: 'registerResult', query: data })
})
},
getCaptcha (e) { getCaptcha (e) {
e.preventDefault() e.preventDefault()
const { form: { validateFields }, state, $message, $notification } = this const {
form: { validateFields },
state,
$message,
$notification
} = this
validateFields(['mobile'], { force: true }, validateFields(['mobile'], { force: true }, (err, values) => {
(err, values) => { if (!err) {
if (!err) { state.smsSendBtn = true
state.smsSendBtn = true
const interval = window.setInterval(() => { const interval = window.setInterval(() => {
if (state.time-- <= 0) { if (state.time-- <= 0) {
state.time = 60 state.time = 60
state.smsSendBtn = false state.smsSendBtn = false
window.clearInterval(interval) window.clearInterval(interval)
} }
}, 1000) }, 1000)
const hide = $message.loading('验证码发送中..', 0) const hide = $message.loading('验证码发送中..', 0)
getSmsCaptcha({ mobile: values.mobile }).then(res => { getSmsCaptcha({ mobile: values.mobile })
.then(res => {
setTimeout(hide, 2500) setTimeout(hide, 2500)
$notification['success']({ $notification['success']({
message: '提示', message: '提示',
description: '验证码获取成功,您的验证码为:' + res.result.captcha, description: '验证码获取成功,您的验证码为:' + res.result.captcha,
duration: 8 duration: 8
}) })
}).catch(err => { })
.catch(err => {
setTimeout(hide, 1) setTimeout(hide, 1)
clearInterval(interval) clearInterval(interval)
state.time = 60 state.time = 60
state.smsSendBtn = false state.smsSendBtn = false
this.requestFailed(err) this.requestFailed(err)
}) })
}
} }
) })
},
//
invitationCodeChange (e) {
const { value } = e.target
if (value && value.length === 6) {
getUnitNameByInvitationCode({ invitationCode: value }).then(res => {
this.unitInfo = res.data
})
} else {
this.unitInfo = {}
}
}, },
requestFailed (err) { requestFailed (err) {
this.$notification['error']({ this.$notification['error']({
@ -255,57 +374,50 @@ export default {
this.registerBtn = false this.registerBtn = false
} }
}, },
watch: { watch: {}
'state.passwordLevel' (val) {
console.log(val)
}
}
} }
</script> </script>
<style lang="less"> <style lang="less">
.user-register { .user-register {
&.error {
&.error { color: #ff0000;
color: #ff0000;
}
&.warning {
color: #ff7e05;
}
&.success {
color: #52c41a;
}
} }
.user-layout-register { &.warning {
.ant-input-group-addon:first-child { color: #ff7e05;
background-color: #fff;
}
} }
&.success {
color: #52c41a;
}
}
.user-layout-register {
.ant-input-group-addon:first-child {
background-color: #fff;
}
}
</style> </style>
<style lang="less" scoped> <style lang="less" scoped>
.user-layout-register { .user-layout-register {
& > h3 {
& > h3 { font-size: 16px;
font-size: 16px; margin-bottom: 20px;
margin-bottom: 20px;
}
.getCaptcha {
display: block;
width: 100%;
height: 40px;
}
.register-button {
width: 50%;
}
.login {
float: right;
line-height: 40px;
}
} }
.getCaptcha {
display: block;
width: 100%;
height: 40px;
}
.register-button {
width: 50%;
}
.login {
float: right;
line-height: 40px;
}
}
</style> </style>