151 lines
4.4 KiB
Vue
151 lines
4.4 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="card">
|
||
<u--form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="100px">
|
||
<u-form-item label="姓名" prop="NAME" borderBottom required>
|
||
<u--input v-model="form.NAME" border="none"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="身份证号" prop="CARD_ID" borderBottom required>
|
||
<u--input v-model="form.CARD_ID" border="none" @blur="fnIDCardDeduplication"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="账号" prop="USERNAME" borderBottom required>
|
||
<u--input v-model="form.USERNAME" border="none" @blur="fnUserDeduplication"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="密码" prop="PASSWORD" borderBottom required>
|
||
<u--input v-model="form.PASSWORD" border="none" password></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="确认密码" prop="CONFIRM_PASSWORD" borderBottom required>
|
||
<u--input v-model="form.CONFIRM_PASSWORD" border="none" password></u--input>
|
||
</u-form-item>
|
||
<view class="tip">密码长度8~32位，须包含数字、字母、符号至少2种或以上元素</view>
|
||
</u--form>
|
||
<view class="mt-10">
|
||
<u-button type="primary" text="注 册" @click="$u.debounce(fnRegister, 1000,true)"></u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {getIDCardDeduplication, getUserDeduplication, setRegister} from "../../api/index";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
form: {
|
||
NAME: '',
|
||
CARD_ID: '',
|
||
USERNAME: '',
|
||
PASSWORD: '',
|
||
CONFIRM_PASSWORD: '',
|
||
},
|
||
rules: {
|
||
NAME: {
|
||
required: true,
|
||
message: '请填写姓名',
|
||
trigger: ['blur']
|
||
},
|
||
CARD_ID: [
|
||
{
|
||
required: true,
|
||
message: '请填写身份证号',
|
||
trigger: ['blur']
|
||
},
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
return uni.$u.test.idCard(value);
|
||
},
|
||
message: '身份证号格式不正确',
|
||
trigger: ['blur'],
|
||
},
|
||
],
|
||
USERNAME: [
|
||
{
|
||
required: true,
|
||
message: '请填写账号',
|
||
trigger: ['blur']
|
||
},
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
return uni.$u.test.mobile(value);
|
||
},
|
||
message: '账号格式不正确，请输入手机号',
|
||
trigger: ['blur'],
|
||
},
|
||
],
|
||
PASSWORD: [
|
||
{
|
||
required: true,
|
||
message: '请填写密码',
|
||
trigger: ['blur']
|
||
},
|
||
{
|
||
pattern: /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,32}$/,
|
||
message: '密码格式不正确',
|
||
trigger: ['blur']
|
||
},
|
||
],
|
||
CONFIRM_PASSWORD: [
|
||
{
|
||
required: true,
|
||
message: '请再次填写密码',
|
||
trigger: ['blur']
|
||
},
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
return value === this.form.PASSWORD;
|
||
},
|
||
message: '两次密码不一致',
|
||
trigger: ['blur'],
|
||
},
|
||
]
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
async fnIDCardDeduplication(CARD_ID = this.form.CARD_ID) {
|
||
let resData = await getIDCardDeduplication({CARD_ID})
|
||
if (resData.pd) {
|
||
uni.$u.toast('身份证号重复')
|
||
return true
|
||
}
|
||
return false
|
||
},
|
||
async fnUserDeduplication(USERNAME = this.form.USERNAME) {
|
||
if (uni.$u.test.mobile(USERNAME)) {
|
||
let resData = await getUserDeduplication({USERNAME})
|
||
if (resData.pd) {
|
||
uni.$u.toast('账号重复')
|
||
return true
|
||
}
|
||
return false
|
||
}
|
||
},
|
||
async fnRegister() {
|
||
this.$refs.form.validate().then(async () => {
|
||
if (await this.fnIDCardDeduplication()) return
|
||
if (await this.fnUserDeduplication()) return
|
||
await setRegister({...this.form})
|
||
uni.$u.toast('注册成功')
|
||
setTimeout(() => {
|
||
uni.$u.route({
|
||
url: '/pages/login/login',
|
||
type: 'reLaunch'
|
||
})
|
||
}, 2000)
|
||
}).catch(() => {
|
||
uni.$u.toast('请补全必填项')
|
||
})
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.tip {
|
||
padding-top: 20rpx;
|
||
padding-bottom: 20rpx;
|
||
font-size: 20rpx;
|
||
}
|
||
</style>
|