mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-15 07:06:44 +08:00
提交
This commit is contained in:
邓晓坤
623
src/components/ebiz/customer/formBlock.vue
Normal file
623
src/components/ebiz/customer/formBlock.vue
Normal file
@@ -0,0 +1,623 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-cell-group>
|
||||
<!-- 基本信息 -->
|
||||
<select-radio
|
||||
:radios="sexRadio"
|
||||
label="性别"
|
||||
:value.sync="userInfo.customerSex"
|
||||
:required="false"
|
||||
></select-radio>
|
||||
<van-field
|
||||
:value="userInfo.nativeplace | idToText('nativeplace')"
|
||||
readonly
|
||||
label="国家/地区"
|
||||
name="国家/地区"
|
||||
right-icon="arrow"
|
||||
placeholder="请选择"
|
||||
@click="toSelect('1')"
|
||||
/>
|
||||
<van-field
|
||||
:value="census"
|
||||
readonly
|
||||
label="户籍"
|
||||
name="户籍"
|
||||
right-icon="arrow"
|
||||
placeholder="请选择"
|
||||
@click="censusShow = true"
|
||||
/>
|
||||
<FieldDatePicter
|
||||
label="出生日期"
|
||||
:value.sync="userInfo.birthday"
|
||||
type="date"
|
||||
:flag="true"
|
||||
@confirm="onDateConfirm($event, '0')"
|
||||
ref="birthday"
|
||||
></FieldDatePicter>
|
||||
<van-field
|
||||
:value="userInfo.idType | idToText('idType')"
|
||||
readonly
|
||||
label="证件类型"
|
||||
name="证件类型"
|
||||
right-icon="arrow"
|
||||
placeholder="请选择"
|
||||
@click="toSelect('2')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="userInfo.customerIdNumber"
|
||||
v-validate="'idNoTemp'"
|
||||
label="证件号码"
|
||||
name="证件号码"
|
||||
placeholder="请输入"
|
||||
></van-field>
|
||||
<FieldDatePicter
|
||||
label="证件起始日期"
|
||||
name="证件起始日期"
|
||||
:value.sync="userInfo.certificateValidate"
|
||||
type="date"
|
||||
:flag="true"
|
||||
ref="certificateValidate"
|
||||
@confirm="onDateConfirm($event, '1')"
|
||||
></FieldDatePicter>
|
||||
<FieldDatePicter
|
||||
label="证件截止日期"
|
||||
name="证件截止日期"
|
||||
:value.sync="userInfo.certiexpiredate"
|
||||
type="date"
|
||||
:flag="true"
|
||||
ref="certiexpiredate"
|
||||
@confirm="onDateConfirm($event, '2')"
|
||||
></FieldDatePicter>
|
||||
<div class="van-hairline--bottom fs14 p10 clearfix">
|
||||
<van-checkbox
|
||||
v-model="userInfo.effectiveDateType"
|
||||
class="fr"
|
||||
:disabled="effectiveDateTypeAble"
|
||||
@change="isEnd"
|
||||
>长期</van-checkbox>
|
||||
</div>
|
||||
<van-field
|
||||
v-model="userInfo.email"
|
||||
label="电子邮箱"
|
||||
name="电子邮箱"
|
||||
v-validate="'email'"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
maxlength="50"
|
||||
/>
|
||||
<van-field
|
||||
v-model="userInfo.stature"
|
||||
label="身高（cm）"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
v-validate="'onlyInteger'"
|
||||
maxlength="3"
|
||||
type="number"
|
||||
/>
|
||||
<van-field
|
||||
v-model="userInfo.weight"
|
||||
label=" 体重（kg）"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
v-validate="'onlyInteger'"
|
||||
maxlength="3"
|
||||
type="number"
|
||||
/>
|
||||
<van-field
|
||||
:value="userInfo.customerType | idToText('customerType')"
|
||||
readonly
|
||||
label="客户类型"
|
||||
name="客户类型"
|
||||
right-icon="arrow"
|
||||
placeholder="请选择"
|
||||
@click="toSelect('7')"
|
||||
/>
|
||||
<van-field
|
||||
:value="userInfo.customerSource | idToText('customerSource')"
|
||||
readonly
|
||||
label="客户来源"
|
||||
name="客户来源"
|
||||
right-icon="arrow"
|
||||
placeholder="请选择"
|
||||
@click="toSelect('8')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
|
||||
<!-- 工作信息 -->
|
||||
<van-cell-group class="mt5">
|
||||
<p class="title pl10 pv5">工作信息</p>
|
||||
<van-field
|
||||
:value="userInfo.degree | idToText('degree')"
|
||||
readonly
|
||||
label="文化程度"
|
||||
name="文化程度"
|
||||
right-icon="arrow"
|
||||
placeholder="请选择"
|
||||
@click="toSelect('3')"
|
||||
/>
|
||||
<select-radio
|
||||
:radios="medicalRadio"
|
||||
label="有无社保"
|
||||
:value.sync="userInfo.socialSecurity"
|
||||
:required="false"
|
||||
></select-radio>
|
||||
<van-field
|
||||
:value="userInfo.taxIdentity | idToText('taxIdentity')"
|
||||
readonly
|
||||
label="税收居民身份"
|
||||
name="税收居民身份"
|
||||
right-icon="arrow"
|
||||
placeholder="请选择"
|
||||
@click="toSelect('5')"
|
||||
/>
|
||||
<occupation-picker
|
||||
:value.sync="userInfo.occupationCode"
|
||||
:chooseName.sync="userInfo.occupationName"
|
||||
:lifeGrade.sync="userInfo.lifeGrade"
|
||||
:healthGrade.sync="userInfo.healthGrade"
|
||||
clearable
|
||||
label="职业类别"
|
||||
name="职业类别"
|
||||
placeholder="请选择"
|
||||
:parentShowPicker.sync="occupationShowPicker"
|
||||
@on-click="selectClick"
|
||||
@on-choose="chooseOccupation"
|
||||
/>
|
||||
<van-field
|
||||
v-model="userInfo.averageYearlyIncome"
|
||||
type="number"
|
||||
label="平均年收入（万元）"
|
||||
name="平均年收入"
|
||||
v-validate="'onlyInteger'"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
maxlength="5"
|
||||
/>
|
||||
<van-field
|
||||
v-model="userInfo.liabilitiesMoney"
|
||||
type="number"
|
||||
label="负债金额（万元）"
|
||||
name="负债金额"
|
||||
v-validate="'onlyInteger'"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
maxlength="5"
|
||||
/>
|
||||
<van-field
|
||||
v-model="userInfo.workUnits"
|
||||
label="工作单位"
|
||||
placeholder="请输入工作单位"
|
||||
clearable
|
||||
maxlength="50"
|
||||
/>
|
||||
<van-field
|
||||
:value="userInfo.workCondition | idToText('workCondition')"
|
||||
readonly
|
||||
label="在职情况"
|
||||
name="在职情况"
|
||||
right-icon="arrow"
|
||||
placeholder="请选择"
|
||||
@click="toSelect('9')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="areaName"
|
||||
readonly
|
||||
label="单位地址"
|
||||
name="单位地址"
|
||||
right-icon="arrow"
|
||||
placeholder="请选择"
|
||||
@click="areaShow = true"
|
||||
/>
|
||||
<van-field
|
||||
v-model="userInfo.companyAddress"
|
||||
label
|
||||
name="详细地址"
|
||||
placeholder="请输入详细地址"
|
||||
maxlength="30"
|
||||
/>
|
||||
<van-field
|
||||
v-model="userInfo.companyZip"
|
||||
type="number"
|
||||
label="邮编"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
maxlength="6"
|
||||
v-validate="'zipCode'"
|
||||
/>
|
||||
<van-field
|
||||
v-model="userInfo.companyPhone"
|
||||
label="单位电话"
|
||||
name="单位电话"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
maxlength="13"
|
||||
/>
|
||||
</van-cell-group>
|
||||
|
||||
<!-- 家庭信息 -->
|
||||
<van-cell-group class="mt5">
|
||||
<p class="title pl10 pv5">家庭信息</p>
|
||||
<van-field
|
||||
:value="userInfo.marriage | idToText('marriage')"
|
||||
readonly
|
||||
label="婚姻状况"
|
||||
name="婚姻状况"
|
||||
right-icon="arrow"
|
||||
placeholder="请选择"
|
||||
@click="toSelect('6')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="userInfo.familyAnnualIncome"
|
||||
type="number"
|
||||
label="家庭年收入（万元）"
|
||||
name="家庭年收入"
|
||||
v-validate="'onlyInteger'"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
/>
|
||||
<van-field
|
||||
v-model="homeName"
|
||||
readonly
|
||||
label="家庭地址"
|
||||
name="家庭地址"
|
||||
right-icon="arrow"
|
||||
placeholder="请选择"
|
||||
@click="homeShow = true"
|
||||
/>
|
||||
<van-field v-model="userInfo.homeAddress" label name="详细地址" placeholder="请输入详细地址" />
|
||||
<van-field
|
||||
v-model="userInfo.homeZip"
|
||||
type="number"
|
||||
label="邮编"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
maxlength="6"
|
||||
v-validate="'zipCode'"
|
||||
/>
|
||||
<van-field
|
||||
v-model="userInfo.homePhone"
|
||||
label="家庭电话"
|
||||
name="家庭电话"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
maxlength="13"
|
||||
/>
|
||||
</van-cell-group>
|
||||
|
||||
<!-- 字段选择 -->
|
||||
<van-popup v-model="popupShow" position="bottom">
|
||||
<van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="popupShow = false" />
|
||||
</van-popup>
|
||||
<!-- 地区选择 -->
|
||||
<van-popup v-model="areaShow" position="bottom">
|
||||
<van-area
|
||||
:area-list="areaList"
|
||||
value="110101"
|
||||
@confirm="sureArea($event, '1')"
|
||||
@cancel="areaShow = false"
|
||||
/>
|
||||
</van-popup>
|
||||
<!-- 家庭地址选择 -->
|
||||
<van-popup v-model="homeShow" position="bottom">
|
||||
<van-area
|
||||
:area-list="areaList"
|
||||
value="110101"
|
||||
@confirm="sureArea($event, '2')"
|
||||
@cancel="homeShow = false"
|
||||
/>
|
||||
</van-popup>
|
||||
<!-- 户籍选择 -->
|
||||
<van-popup v-model="censusShow" position="bottom">
|
||||
<van-area
|
||||
:area-list="areaList"
|
||||
value="110101"
|
||||
:columns-num="2"
|
||||
@confirm="sureArea($event, '3')"
|
||||
@cancel="areaShow = false"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Field, CellGroup, Cell, Popup, Picker, Checkbox, Area } from 'vant'
|
||||
import SelectRadio from '@/components/ebiz/SelectRadio'
|
||||
import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
|
||||
import DataDictionary from '@/assets/js/utils/data-dictionary'
|
||||
import OccupationPicker from '@/components/ebiz/occipation/OccupationPicker'
|
||||
import areaList from '@/assets/js/utils/area'
|
||||
import utilsAge from '@/assets/js/utils/age'
|
||||
import getAreaName from '@/assets/js/utils/get-area-name'
|
||||
import filter from '@/filters/index'
|
||||
import { constants } from 'crypto'
|
||||
import { userInfo } from 'os'
|
||||
|
||||
export default {
|
||||
name: 'formBlock',
|
||||
components: {
|
||||
[Field.name]: Field,
|
||||
[CellGroup.name]: CellGroup,
|
||||
[Cell.name]: Cell,
|
||||
[Popup.name]: Popup,
|
||||
[Picker.name]: Picker,
|
||||
[Checkbox.name]: Checkbox,
|
||||
[FieldDatePicter.name]: FieldDatePicter,
|
||||
[OccupationPicker.name]: OccupationPicker,
|
||||
[SelectRadio.name]: SelectRadio,
|
||||
[Area.name]: Area
|
||||
},
|
||||
props: ['userInfo'],
|
||||
data() {
|
||||
return {
|
||||
popupShow: false,
|
||||
areaShow: false, //省级联动
|
||||
homeShow: false,
|
||||
censusShow: false, //户籍联动
|
||||
census: '',
|
||||
pickerType: undefined,
|
||||
columns: [],
|
||||
valueKey: 'text',
|
||||
nativeplace: '',
|
||||
idType: '',
|
||||
degree: '',
|
||||
socialSecurity: '',
|
||||
taxIdentity: '',
|
||||
areaName: '', //单位地址
|
||||
homeName: '', //家庭地址
|
||||
marriage: '',
|
||||
areaList: areaList,
|
||||
customerType: '',
|
||||
customerSource: '',
|
||||
age: '',
|
||||
effectiveDateTypeAble: false, //长期按钮是否禁用
|
||||
occupationShowPicker: false,
|
||||
sexRadio: [
|
||||
{
|
||||
label: '男',
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
label: '女',
|
||||
value: '1'
|
||||
}
|
||||
],
|
||||
medicalRadio: [
|
||||
{
|
||||
label: '有',
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
label: '无',
|
||||
value: '1'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
userInfo: {
|
||||
handler(newVal, oldVal) {
|
||||
// console.log("老数据",oldVal);
|
||||
// console.log("新数据",newVal);
|
||||
// if(newVal.toString() != oldVal.toString()){
|
||||
this.userInfo = newVal
|
||||
if (this.userInfo.province) {
|
||||
this.censusInfo()
|
||||
}
|
||||
if (this.userInfo.companyProvince) {
|
||||
this.areaNameInfo()
|
||||
}
|
||||
if (this.userInfo.homeProvince) {
|
||||
this.homeNameInfo()
|
||||
}
|
||||
if (this.userInfo.certiexpiredate == '9999-01-01') {
|
||||
this.userInfo.effectiveDateType = true
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
idToText: filter.idToText
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
selectClick() {
|
||||
let title = ''
|
||||
;[this.occupationShowPicker, title] = [true, '职业类别']
|
||||
},
|
||||
chooseOccupation() {
|
||||
this.occupationShowPicker = false
|
||||
},
|
||||
// 表单校验
|
||||
validateForm() {
|
||||
return this.$validator.validateAll()
|
||||
},
|
||||
censusInfo() {
|
||||
let area = [{ code: this.userInfo.province }, { code: this.userInfo.city }]
|
||||
this.census = getAreaName(area)
|
||||
},
|
||||
areaNameInfo() {
|
||||
let area = [{ code: this.userInfo.companyProvince }, { code: this.userInfo.companyCity }, { code: this.userInfo.companyArea }]
|
||||
this.areaName = getAreaName(area)
|
||||
},
|
||||
homeNameInfo() {
|
||||
let area = [{ code: this.userInfo.homeProvince }, { code: this.userInfo.homeCity }, { code: this.userInfo.homeArea }]
|
||||
this.homeName = getAreaName(area)
|
||||
},
|
||||
//弹框选择
|
||||
toSelect(pickerType, valueKey) {
|
||||
//pickerType 1、国家地区 2、证件类型 3、文化程度 4、有无社保 5、税收居民身份 6、婚姻状况
|
||||
;[this.popupShow, this.pickerType] = [true, pickerType]
|
||||
if (valueKey) this.valueKey = valueKey
|
||||
if (pickerType == '1') {
|
||||
this.columns = DataDictionary.nativeplace
|
||||
} else if (pickerType == '2') {
|
||||
if(this.userInfo.birthday){
|
||||
let age = utilsAge.getAge(this.userInfo.birthday, new Date())
|
||||
console.log("年纪",age)
|
||||
if (age >= 3 && age < 16) {
|
||||
this.columns = DataDictionary.birthType
|
||||
} else if (age >= 3 && age >= 16) {
|
||||
this.columns = DataDictionary.insuredIdType
|
||||
} else {
|
||||
this.columns = DataDictionary.idType
|
||||
}
|
||||
}else{
|
||||
this.columns = DataDictionary.idType
|
||||
}
|
||||
} else if (pickerType == '3') {
|
||||
this.columns = DataDictionary.degree
|
||||
// } else if (pickerType == '4') {
|
||||
// this.columns = DataDictionary.socialSecurity
|
||||
} else if (pickerType == '5') {
|
||||
this.columns = DataDictionary.taxIdentity
|
||||
} else if (pickerType == '6') {
|
||||
this.columns = DataDictionary.marriage
|
||||
} else if (pickerType == '7') {
|
||||
this.columns = DataDictionary.customerType
|
||||
} else if (pickerType == '8') {
|
||||
this.columns = DataDictionary.customerSource
|
||||
} else if (pickerType == '9') {
|
||||
this.columns = DataDictionary.workCondition
|
||||
}
|
||||
},
|
||||
//确认选择字段
|
||||
onConfirm(value) {
|
||||
this.popupShow = false
|
||||
if (this.pickerType == '1') {
|
||||
;[this.userInfo.nativeplace, this.nativeplace] = [value.id, value.text]
|
||||
this.valueKey = value.text
|
||||
} else if (this.pickerType == '2') {
|
||||
//身份证以外的证件类型可以使用长期
|
||||
if (value.id != '1') {
|
||||
this.effectiveDateTypeAble = false
|
||||
} else {
|
||||
let age = utilsAge.getAge(this.userInfo.birthday, new Date())
|
||||
this.effectiveDateTypeAble = !(age >= 45)
|
||||
}
|
||||
;[this.userInfo.idType, this.idType] = [value.id, value.text]
|
||||
} else if (this.pickerType == '3') {
|
||||
;[this.userInfo.degree, this.degree] = [value.id, value.text]
|
||||
// } else if (this.pickerType == '4') {
|
||||
// ;[this.userInfo.socialSecurity, this.socialSecurity] = [value.id, value.text]
|
||||
} else if (this.pickerType == '5') {
|
||||
;[this.userInfo.taxIdentity, this.taxIdentity] = [value.id, value.text]
|
||||
} else if (this.pickerType == '6') {
|
||||
;[this.userInfo.marriage, this.marriage] = [value.id, value.text]
|
||||
} else if (this.pickerType == '7') {
|
||||
;[this.userInfo.customerType, this.customerType] = [value.id, value.text]
|
||||
} else if (this.pickerType == '8') {
|
||||
;[this.userInfo.customerSource, this.customerSource] = [value.id, value.text]
|
||||
} else if (this.pickerType == '9') {
|
||||
;[this.userInfo.workCondition, this.workCondition] = [value.id, value.text]
|
||||
}
|
||||
},
|
||||
//区域选择
|
||||
sureArea(area, type) {
|
||||
switch (type) {
|
||||
case '1': //单位地址
|
||||
this.areaName = getAreaName(area)
|
||||
;[this.userInfo.companyProvince, this.userInfo.companyCity, this.userInfo.companyArea] = [area[0].code, area[1].code, area[2].code]
|
||||
this.areaShow = false
|
||||
break
|
||||
case '2': //家庭地址
|
||||
this.homeName = getAreaName(area)
|
||||
;[this.userInfo.homeProvince, this.userInfo.homeCity, this.userInfo.homeArea] = [area[0].code, area[1].code, area[2].code]
|
||||
this.homeShow = false
|
||||
break
|
||||
case '3': //户籍
|
||||
this.census = getAreaName(area)
|
||||
;[this.userInfo.province, this.userInfo.city] = [area[0].code, area[1].code]
|
||||
this.censusShow = false
|
||||
break
|
||||
}
|
||||
},
|
||||
//证件起始截止日期
|
||||
onDateConfirm(val, type) {
|
||||
if (type == '0') {
|
||||
//出生日期
|
||||
if (Date.parse(val) > Date.parse(new Date())) {
|
||||
this.userInfo.birthday = ''
|
||||
this.$refs.birthday.date = ''
|
||||
return this.$toast('出生日期不晚于当日')
|
||||
}
|
||||
//长期判断
|
||||
let age = utilsAge.getAge(this.userInfo.birthday, new Date())
|
||||
if (this.userInfo.idType == '1') {
|
||||
this.effectiveDateTypeAble = !(age >= 45)
|
||||
if (age < 45) {
|
||||
this.userInfo.effectiveDateType = false
|
||||
}
|
||||
}
|
||||
//年龄大于等于3岁不能使用出生证明
|
||||
if (age >= 3) {
|
||||
if (this.userInfo.idType == '3') {
|
||||
this.userInfo.idType = ''
|
||||
this.$toast('请选择正确的证件类型')
|
||||
}
|
||||
}
|
||||
//年龄大于等于16岁不能使用户口本
|
||||
if (age >= 16) {
|
||||
if (this.userInfo.idType == '2') {
|
||||
this.userInfo.idType = ''
|
||||
this.$toast('请选择正确的证件类型')
|
||||
}
|
||||
}
|
||||
} else if (type == '1') {
|
||||
//证件起始日期
|
||||
//如果录入日期早于出生日期或晚于当前日期
|
||||
if (Date.parse(val) > Date.parse(new Date()) || Date.parse(val) < Date.parse(this.userInfo.birthday)) {
|
||||
this.userInfo.certificateValidate = ''
|
||||
this.$refs.certificateValidate.date = ''
|
||||
return this.$toast('证件起始日期填写错误')
|
||||
}
|
||||
// 计算年龄
|
||||
let certificateAge = utilsAge.getAge(val, new Date())
|
||||
let birthAge = utilsAge.getAge(this.userInfo.birthday, new Date())
|
||||
let age = birthAge - certificateAge
|
||||
// 长期按钮是否禁用
|
||||
this.effectiveDateTypeAble = age >= 16 && age <= 45
|
||||
// if(age < 45){
|
||||
// this.userInfo.effectiveDateType = false
|
||||
// }
|
||||
} else {
|
||||
//证件截止日期
|
||||
//如果已经勾选了长期
|
||||
if (this.userInfo.effectiveDateType) {
|
||||
//清空数据并返回
|
||||
this.userInfo.certiexpiredate = ''
|
||||
this.$refs.certiexpiredate.date = ''
|
||||
return
|
||||
}
|
||||
//如果录入日期早于当前日期
|
||||
if (Date.parse(val) < Date.parse(new Date())) {
|
||||
this.userInfo.certiexpiredate = ''
|
||||
this.$refs.certiexpiredate.date = ''
|
||||
return this.$toast('您的证件已过期')
|
||||
}
|
||||
}
|
||||
},
|
||||
//长期状态改变时
|
||||
isEnd(val) {
|
||||
//勾选长期状态时,证件截止日期置空
|
||||
if (val) {
|
||||
this.userInfo.certiexpiredate = ''
|
||||
this.certiexpiredateRequired = false
|
||||
sessionStorage.setItem('isEnd', '9999-01-01')
|
||||
} else {
|
||||
this.certiexpiredateRequired = true
|
||||
sessionStorage.setItem('isEnd', '')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid #ebedf0;
|
||||
}
|
||||
[class*='van-hairline']::after {
|
||||
border: none !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user