feat: 注册
This commit is contained in:
parent
3e5831c095
commit
dff16ba630
|
@ -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,
|
||||||
|
|
|
@ -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,21 +283,45 @@ 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
|
||||||
|
|
||||||
|
@ -228,14 +335,16 @@ export default {
|
||||||
|
|
||||||
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
|
||||||
|
@ -243,8 +352,18 @@ export default {
|
||||||
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,16 +374,11 @@ 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;
|
||||||
}
|
}
|
||||||
|
@ -276,18 +390,16 @@ export default {
|
||||||
&.success {
|
&.success {
|
||||||
color: #52c41a;
|
color: #52c41a;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
.user-layout-register {
|
||||||
|
|
||||||
.user-layout-register {
|
|
||||||
.ant-input-group-addon:first-child {
|
.ant-input-group-addon:first-child {
|
||||||
background-color: #fff;
|
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;
|
||||||
|
@ -307,5 +419,5 @@ export default {
|
||||||
float: right;
|
float: right;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue