<template>
|
<view class="">
|
<u-form :model="form" class="form-box" :rules="rules" ref="refForm">
|
<u-form-item class="form-item" label="姓名" required prop="name" labelWidth="100">
|
<u-input v-model="form.name" border="none" placeholder="姓名" />
|
</u-form-item>
|
<u-form-item class="form-item" label="联系方式" required prop="phoneNumber" labelWidth="100">
|
<u-input type="number" v-model="form.phoneNumber" border="none" placeholder="联系方式" />
|
</u-form-item>
|
<u-form-item class="form-item" label="身份证号码" required prop="idCard" labelWidth="100">
|
<u-input type="idcard" v-model="form.idCard" border="none" placeholder="身份证号码" />
|
</u-form-item>
|
<u-form-item @click="showGenderPicker = true" class="form-item" label="性别" prop="legalGender"
|
labelWidth="100">
|
<u--input border="none" v-model="genderValue" disabled disabledColor="#ffffff" placeholder="请选择性别">
|
</u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item @click="showNationPicker = true" class="form-item" label="民族" prop="ethnicity"
|
labelWidth="100">
|
<u--input border="none" v-model="nationValue" disabled disabledColor="#ffffff" placeholder="请选择民族">
|
</u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item class="form-item" label="户籍地址" labelWidth="100">
|
<u-input v-model="form.hukouRegistration" border="none" placeholder="选填" />
|
</u-form-item>
|
<u-form-item class="form-item" label="工作单位" labelWidth="100">
|
<u-input v-model="form.employer" border="none" placeholder="选填" />
|
</u-form-item>
|
</u-form>
|
<u-picker :defaultIndex="nationTypeListIndex" :closeOnClickOverlay="true" :show="showNationPicker"
|
:columns="[nationTypeList]" @close="showNationPicker = false" @cancel="showNationPicker = false"
|
keyName="name" @confirm="confirmNation"></u-picker>
|
|
<u-picker :defaultIndex="genderIndex" :closeOnClickOverlay="true" :show="showGenderPicker" :columns="[gender]"
|
@close="showGenderPicker = false" @cancel="showGenderPicker = false" keyName="name"
|
@confirm="confirmGender"></u-picker>
|
</view>
|
|
</template>
|
|
<script>
|
import {
|
bizDictionary
|
} from '@/api/system/dict.js'
|
export default {
|
data() {
|
return {
|
form: {
|
name: '',
|
phoneNumber: '',
|
idCard: '',
|
hukouRegistration: '',
|
employer: '',
|
ethnicity: '',
|
gender: ''
|
},
|
rules: {
|
name: [{
|
required: true,
|
message: '请输入姓名',
|
// 可以单个或者同时写两个触发验证方式
|
trigger: ['change', 'blur'],
|
}],
|
phoneNumber: [{
|
required: true,
|
message: '请输入联系方式',
|
// 可以单个或者同时写两个触发验证方式
|
trigger: ['change', 'blur'],
|
},
|
{
|
validator: (rule, value, callback) => {
|
return uni.$u.test.mobile(value);
|
},
|
message: '手机号码不正确',
|
trigger: ['change', 'blur']
|
}
|
],
|
idCard: [{
|
required: true,
|
message: '请输入身份证号',
|
// 可以单个或者同时写两个触发验证方式
|
trigger: ['change', 'blur'],
|
}, {
|
// 自定义验证函数，见上说明
|
validator: (rule, value, callback) => {
|
const reg =
|
/^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/
|
if (reg.test(value)) {
|
return true
|
}
|
return false
|
},
|
message: '请输入正确的身份证号',
|
// 触发器可以同时用blur和change
|
trigger: ['change', 'blur'],
|
}],
|
},
|
nationTypeList: [], //民族
|
nationTypeIndex: [0],
|
nationValue: "",
|
gender: [{ //性别
|
value: 1,
|
name: '男',
|
},
|
{
|
value: 0,
|
name: '女',
|
}
|
],
|
genderIndex: [0],
|
genderValue: "",
|
showNationPicker: false,
|
showGenderPicker: false,
|
|
}
|
},
|
created() {
|
this.getAllBizDict()
|
},
|
methods: {
|
async getAllBizDict() {
|
// 获取民族
|
await this.getBizDict('nationType', this.nationTypeList);
|
},
|
|
// 获取业务字典
|
async getBizDict(code, list) {
|
const param = {
|
code: code
|
}
|
const res = await bizDictionary(param)
|
res.data.forEach(e => {
|
list.push({
|
name: e.dictValue,
|
value: Number(e.dictKey)
|
})
|
})
|
},
|
|
|
//选择民族
|
confirmNation(e) {
|
this.nationIndex = e.indexs;
|
this.nationValue = e.value[0].name;
|
this.form.ethnicity = e.value[0].value;
|
this.showNationPicker = false;
|
},
|
|
//选择性别
|
confirmGender(e) {
|
this.genderIndex = e.indexs;
|
this.genderValue = e.value[0].name;
|
this.form.gender = e.value[0].value;
|
this.showGenderPicker = false;
|
},
|
|
|
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.form-box {
|
background: #fff;
|
}
|
</style>
|
