mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-25 11:52:52 +08:00
584 lines
21 KiB
Vue
584 lines
21 KiB
Vue
<template>
|
||
<div class="insured-info-container pb50">
|
||
<!-- 基本信息 -->
|
||
<van-cell-group>
|
||
<RsTop :active="['1', '2', '3']"></RsTop>
|
||
<p class="fs15 fwb pl10 pv12">家庭情况</p>
|
||
<!-- start -->
|
||
<van-checkbox-group v-model="checkedRelationshipList">
|
||
<div v-for="(item, i) in userInfo" :key="i">
|
||
<van-field
|
||
:value="item.relationType | idToText('agentEenterBasicFamilyRelationType')"
|
||
v-validate="'required'"
|
||
readonly
|
||
label="关系"
|
||
name="关系"
|
||
right-icon="arrow"
|
||
placeholder="请选择"
|
||
:required="!!item.requiredType"
|
||
:disabled="!item.requiredType"
|
||
/>
|
||
<van-field
|
||
label="姓名"
|
||
type="name"
|
||
name="姓名"
|
||
placeholder="请输入"
|
||
v-validate="{ required: !!item.requiredType, name: true }"
|
||
clearable
|
||
v-model="item.name"
|
||
:required="!!item.requiredType"
|
||
:disabled="!item.requiredType"
|
||
/>
|
||
<select-radio
|
||
:value.sync="item.sex"
|
||
:radios="sexRadio"
|
||
label="性别"
|
||
name="性别"
|
||
v-validate="{ required: !!item.requiredType }"
|
||
:required="!!item.requiredType"
|
||
:disabled="!item.requiredType"
|
||
></select-radio>
|
||
<van-field
|
||
:value="item.idType | idToText('rsIdType')"
|
||
readonly
|
||
label="证件类型"
|
||
name="证件类型"
|
||
right-icon="arrow"
|
||
placeholder="请选择"
|
||
@click="toSelect('2', i, item)"
|
||
v-validate="{ required: !!item.requiredType }"
|
||
:required="!!item.requiredType"
|
||
:disabled="!item.requiredType"
|
||
/>
|
||
<van-field
|
||
label="证件号码"
|
||
type="text"
|
||
name="证件号码"
|
||
placeholder="请输入"
|
||
clearable
|
||
v-model="item.idNo"
|
||
v-validate="{ required: !!item.requiredType }"
|
||
:required="!!item.requiredType"
|
||
:disabled="!item.requiredType"
|
||
maxlength="18"
|
||
@blur="getRelatedData(item, '1')"
|
||
/>
|
||
<FieldDatePicter
|
||
label="出生日期"
|
||
name="出生日期"
|
||
:value.sync="item.birthday"
|
||
type="date"
|
||
:flag="true"
|
||
ref="birthday"
|
||
v-validate="{ required: !!item.requiredType }"
|
||
:required="!!item.requiredType"
|
||
:disabled="!item.requiredType"
|
||
></FieldDatePicter>
|
||
<van-field
|
||
v-model="item.mobile"
|
||
label="联系电话"
|
||
name="联系电话"
|
||
placeholder="请输入"
|
||
type="mobile"
|
||
v-validate="{ required: !!item.requiredType, mobile: true }"
|
||
maxlength="11"
|
||
:required="!!item.requiredType"
|
||
:disabled="!item.requiredType"
|
||
clearable
|
||
/>
|
||
<p class="mv8 p8 bg-gray">
|
||
<van-checkbox :name="i" v-show="item.relationType != '0'" @click="notHaveImmediateFamilyFunc(item, i)" checked-color="#ee0a24"
|
||
>无此直系亲属
|
||
</van-checkbox>
|
||
</p>
|
||
</div>
|
||
</van-checkbox-group>
|
||
<div class="add-btn mt20 pb20 text-center p15 c-gray-base" @click="add">+ 新增</div>
|
||
<!-- end -->
|
||
<div class="flex justify-content-s bottom-btn bg-white">
|
||
<van-button class="bottom0 left0" square plain type="danger" v-no-more-click="1000" @click="goBack" size="large">上一步 </van-button>
|
||
<van-button class="bottom0 left0" square type="danger" size="large" @click="nextStep" v-no-more-click="1000"> 下一步 </van-button>
|
||
</div>
|
||
</van-cell-group>
|
||
<!-- 字段选择 -->
|
||
<van-popup v-model="popupShow" position="bottom">
|
||
<van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="popupShow = false" />
|
||
</van-popup>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { Field, CellGroup, Button, col, popup, picker, Dialog, Checkbox, CheckboxGroup } from 'vant'
|
||
import SelectRadio from '@/components/ebiz/SelectRadio'
|
||
import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
|
||
import DataDictionary from '@/assets/js/utils/data-dictionary'
|
||
import RsTop from '@/components/ebiz/agentEenter/RsTop'
|
||
import idNoCheck from '@/assets/js/utils/idNoCheck'
|
||
import beforeDate from '@/assets/js/utils/getBeforeDate.js'
|
||
import { saveOrUpdateInfo, agentAll } from '@/api/ebiz/agentEenter/agentEenter'
|
||
import { idToData } from '../cardList/js/verification'
|
||
// 是否存在亲属关系的枚举值
|
||
const immediateFamilyEnum = {
|
||
existence: 1, // 存在亲属关系
|
||
nonExistent: 0 // 不存在亲属关系
|
||
}
|
||
export default {
|
||
name: 'AgentEenterBasicFamily',
|
||
components: {
|
||
[SelectRadio.name]: SelectRadio,
|
||
[FieldDatePicter.name]: FieldDatePicter,
|
||
[Field.name]: Field,
|
||
[CellGroup.name]: CellGroup,
|
||
[Button.name]: Button,
|
||
[col.name]: col,
|
||
[popup.name]: popup,
|
||
[picker.name]: picker,
|
||
[RsTop.name]: RsTop,
|
||
[Checkbox.name]: Checkbox,
|
||
[CheckboxGroup.name]: CheckboxGroup
|
||
},
|
||
data() {
|
||
return {
|
||
popupShow: false,
|
||
enterIndex: '',
|
||
pickerType: '',
|
||
columns: [],
|
||
userInfo: [
|
||
{
|
||
relationType: '', // 关系
|
||
name: '', // 姓名
|
||
sex: '', // 性别（枚举值）
|
||
idType: '', // 证件类型（枚举值）
|
||
idNo: '', // 证件号码
|
||
birthday: '', // 出生日期
|
||
mobile: '' // 联系方式
|
||
}
|
||
],
|
||
//默认值，父亲性别默认男，母亲性别默认值女，配偶、子女性别默认不选中
|
||
// 定义当用户基本信息中婚姻状态选择的是已婚的情况时的数据格式
|
||
userInfoMarried: [
|
||
{
|
||
relationType: '0',
|
||
name: '',
|
||
sex: '',
|
||
idType: '',
|
||
idNo: '',
|
||
birthday: '',
|
||
mobile: '',
|
||
requiredType: immediateFamilyEnum.existence
|
||
}, // 配偶
|
||
{
|
||
relationType: '1',
|
||
name: '',
|
||
sex: '0',
|
||
idType: '',
|
||
idNo: '',
|
||
birthday: '',
|
||
mobile: '',
|
||
requiredType: immediateFamilyEnum.existence
|
||
}, // 父亲
|
||
{
|
||
relationType: '2',
|
||
name: '',
|
||
sex: '1',
|
||
idType: '',
|
||
idNo: '',
|
||
birthday: '',
|
||
mobile: '',
|
||
requiredType: immediateFamilyEnum.existence
|
||
}, // 母亲
|
||
{
|
||
relationType: '3',
|
||
name: '',
|
||
sex: '',
|
||
idType: '',
|
||
idNo: '',
|
||
birthday: '',
|
||
mobile: '',
|
||
requiredType: immediateFamilyEnum.existence
|
||
} // 子女
|
||
],
|
||
// 定义当用户基本信息中婚姻状态选择的是非已婚的情况时的数据格式
|
||
userInfoNotMarried: [
|
||
{
|
||
relationType: '1',
|
||
name: '',
|
||
sex: '0',
|
||
idType: '',
|
||
idNo: '',
|
||
birthday: '',
|
||
mobile: '',
|
||
requiredType: immediateFamilyEnum.existence
|
||
}, // 父亲
|
||
{
|
||
relationType: '2',
|
||
name: '',
|
||
sex: '1',
|
||
idType: '',
|
||
idNo: '',
|
||
birthday: '',
|
||
mobile: '',
|
||
requiredType: immediateFamilyEnum.existence
|
||
}, // 母亲
|
||
{
|
||
relationType: '3',
|
||
name: '',
|
||
sex: '',
|
||
idType: '',
|
||
idNo: '',
|
||
birthday: '',
|
||
mobile: '',
|
||
requiredType: immediateFamilyEnum.existence
|
||
} // 子女
|
||
],
|
||
sexRadio: [
|
||
{
|
||
label: '男',
|
||
value: '0'
|
||
},
|
||
{
|
||
label: '女',
|
||
value: '1'
|
||
}
|
||
],
|
||
idCardFlag: true,
|
||
bookletFlag: true,
|
||
birthFlag: true,
|
||
passportFlag: true,
|
||
gatPass: true,
|
||
twPass: true,
|
||
gtFlag1: true,
|
||
gtFlag2: true,
|
||
currentTime: beforeDate.getBeforeDays(1),
|
||
checkedRelationshipList: [], // 定义一个数组集合，储存当前是哪个对象勾选了‘无此亲属关系’选项
|
||
sexDisabled: false,
|
||
ebizEnterCustomerDto: {} //本人信息
|
||
}
|
||
},
|
||
mounted() {
|
||
Dialog.alert({
|
||
message: '请如实填写下列各项内容，直系亲属为本人父母、子女或配偶，其余亲属不属于直系亲属。如有不实，后果自负。'
|
||
}).then(() => {
|
||
this.agentAll()
|
||
})
|
||
document.body.style.backgroundColor = '#fff'
|
||
},
|
||
beforeRouteLeave(to, from, next) {
|
||
document.body.style.backgroundColor = ''
|
||
next()
|
||
},
|
||
methods: {
|
||
goBack() {
|
||
this.$jump({
|
||
flag: 'goBack',
|
||
extra: {
|
||
refresh: '1',
|
||
index: '-1',
|
||
forbidSwipeBack: '1'
|
||
},
|
||
routerInfo: {
|
||
type: 2,
|
||
index: -1,
|
||
path: '/agentEenter/AgentEnterGuarantor'
|
||
}
|
||
})
|
||
},
|
||
//信息返显
|
||
agentAll() {
|
||
let that = this
|
||
that.$toast.loading({
|
||
duration: 0, // 持续展示 toast
|
||
forbidClick: true, // 禁用背景点击
|
||
loadingType: 'spinner',
|
||
message: '加载中……'
|
||
})
|
||
let data = {}
|
||
agentAll(data).then((res) => {
|
||
if (res.result == '0') {
|
||
localStorage.removeItem('marriageEnumInfo')
|
||
localStorage.setItem('marriageEnumInfo', res.content.ebizEnterCustomerDto.marriage)
|
||
this.ebizEnterCustomerDto = res.content.ebizEnterCustomerDto
|
||
if (res.content.ebizRelationDtoLst.length != 0) {
|
||
let result = res.content.ebizRelationDtoLst
|
||
if (result) {
|
||
// 重置情况变量，防止数据有缓存
|
||
that.checkedRelationshipList = []
|
||
result.map((item) => {
|
||
delete item.id
|
||
delete item.baseId
|
||
delete item.createdDate
|
||
delete item.createdUser
|
||
delete item.isDelete
|
||
delete item.modifiedDate
|
||
delete item.modifiedUser
|
||
// 判断数据中的‘checkedIndex’属性是否有对应数据，
|
||
// 如果有数据，则获取数据存储到储存当前是哪个对象勾选了‘无此亲属关系’选项的集合中，用于回显勾选了‘无此亲属关系’的选项
|
||
if (item.checkedIndex != null) {
|
||
that.checkedRelationshipList.push(item.checkedIndex)
|
||
}
|
||
})
|
||
that.userInfo = result
|
||
}
|
||
} else {
|
||
that.userInfo = []
|
||
// 根据基本信息中‘婚姻状态’的不同，赋值不同的数据
|
||
if (res.content.ebizEnterCustomerDto.marriage == '5') {
|
||
that.userInfo = that.userInfoMarried
|
||
} else {
|
||
that.userInfo = that.userInfoNotMarried
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* @Description: 当选择‘证件类型’与‘出生日期’时，触发的方法
|
||
* @params: pickerType-- 触发此方法的类型（如，是当选择‘证件类型’时触发的方法，还是当选择‘出生日期’时触发的方法）
|
||
* @params: index-- 当期部分在所有数据中的下标索引值
|
||
* @params: data-- 当前部分的数据对象
|
||
* @author:zhangqi
|
||
* @Date:2021-07-21
|
||
*/
|
||
toSelect(pickerType, index, data) {
|
||
if (data.requiredType) {
|
||
//pickerType 1、证件类型 2、民族 3、健康状况 4 婚姻状况 5 政治面貌
|
||
;[this.popupShow, this.pickerType] = [true, pickerType]
|
||
this.enterIndex = index
|
||
if (pickerType == '1') {
|
||
this.columns = DataDictionary.agentEenterBasicFamilyRelationType
|
||
}
|
||
if (pickerType == '2') {
|
||
this.columns = DataDictionary.rsIdType
|
||
}
|
||
} else {
|
||
return false
|
||
}
|
||
},
|
||
onConfirm(value) {
|
||
this.popupShow = false
|
||
if (this.pickerType == '1') {
|
||
this.userInfo[this.enterIndex].relationType = value.id
|
||
}
|
||
if (this.pickerType == '2') {
|
||
this.userInfo[this.enterIndex].idType = value.id
|
||
}
|
||
},
|
||
// 下一步
|
||
nextStep() {
|
||
//表单校验, 成功跳转
|
||
this.$validator.validate().then((valid) => {
|
||
if (true === valid) {
|
||
console.log(this.userInfo, 'this.userInfo')
|
||
for (let i = 0; i < this.userInfo.length; i++) {
|
||
let item = this.userInfo[i]
|
||
if (item.requiredType == 1) {
|
||
//在家属信息页面录入后，点击【下一步】做提示，如果家属角色为父亲，选择性别为女，则提示“父亲性别不可为女”，母亲同此规则
|
||
//0 男 1 女 relationType:0 配偶 1 父亲 2 母亲
|
||
if (item.sex == 1 && item.relationType == 1) {
|
||
return this.$toast('父亲性别不可为女')
|
||
}
|
||
if (item.sex == 0 && item.relationType == 2) {
|
||
return this.$toast('母亲性别不可为男')
|
||
}
|
||
//如果家属角色为配偶，选择性别出现一致时，提示“配偶与本人性别不可一致。”
|
||
if (item.relationType == 0) {
|
||
if (item.sex == this.ebizEnterCustomerDto.sex) {
|
||
return this.$toast('配偶与本人性别不可一致。')
|
||
}
|
||
}
|
||
if (item.idType == '1') {
|
||
//身份证
|
||
console.log('证件类型是身份证')
|
||
// 证件号码规则校验
|
||
if (!idNoCheck.isIdno(item.idNo)) {
|
||
this.idCardFlag = false
|
||
} else {
|
||
this.idCardFlag = true
|
||
}
|
||
if (item.idNo.length == '18') {
|
||
//18位身份证第17位是性别位, 奇男偶女
|
||
//×××性别与证件性别不一致，请修改。
|
||
let sexSign = item.idNo.substr(16, 1)
|
||
if ((parseInt(sexSign) % 2 == 0 && item.sex != 1) || (parseInt(sexSign) % 2 != 0 && item.sex != 0)) {
|
||
return this.$toast(item.name + '性别与证件性别不一致，请修改。')
|
||
}
|
||
//18位身份证第7-14位是生日位, 年月日
|
||
let birthSign = item.idNo.substr(6, 8)
|
||
if (
|
||
item.birthday.substr(0, 4) != birthSign.substr(0, 4) ||
|
||
item.birthday.substr(5, 2) != birthSign.substr(4, 2) ||
|
||
item.birthday.substr(8, 2) != birthSign.substr(6, 2)
|
||
) {
|
||
return this.$toast(item.name + '生日录入与身份证不符')
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 循环存储勾选了‘无此亲属关系’选项的数组，给‘userInfo’的集合所对应的对象中添加一个新的字段，用于回显勾选了‘无此亲属关系’的选项
|
||
this.checkedRelationshipList.forEach((item) => {
|
||
this.userInfo[item].checkedIndex = item
|
||
})
|
||
if (this.idCardFlag && this.bookletFlag && this.birthFlag && this.passportFlag && this.gatPass && this.twPass) {
|
||
this.save()
|
||
} else {
|
||
if (!this.idCardFlag) {
|
||
this.$toast('您填写的证件号码有误')
|
||
} else if (!this.bookletFlag) {
|
||
this.$toast('户口本的证件号码长度应等于18位')
|
||
} else if (!this.birthFlag) {
|
||
this.$toast('出生证须大于等于3个字符')
|
||
} else if (!this.passportFlag) {
|
||
this.$toast('护照须大于等于3个字符')
|
||
} else if (!this.gatPass) {
|
||
if (!this.gtFlag1) {
|
||
this.$toast('证件类型为港澳居民通行证的，证件号码须为9位')
|
||
} else if (!this.gtFlag2) {
|
||
this.$toast('证件类型为港澳居民通行证的，证件号码首位字母为"H"/"M",证件号码第2位至第9位为阿拉伯数字')
|
||
}
|
||
} else if (!this.twPass) {
|
||
this.$toast('证件类型为台湾居民通行证的，证件号码须为8位数字')
|
||
}
|
||
}
|
||
} else {
|
||
this.$toast(this.$validator.errors.all()[0])
|
||
}
|
||
})
|
||
},
|
||
save() {
|
||
let that = this
|
||
that.$toast.loading({
|
||
duration: 0, // 持续展示 toast
|
||
forbidClick: true, // 禁用背景点击
|
||
loadingType: 'spinner',
|
||
message: '加载中……'
|
||
})
|
||
let params = {
|
||
entryType: 'CUSTOMER_RELATION',
|
||
ebizRelationDtoLst: {}
|
||
}
|
||
params.ebizRelationDtoLst = that.userInfo
|
||
saveOrUpdateInfo(params).then((res) => {
|
||
that.$toast.clear()
|
||
if (res.result == '0') {
|
||
this.$jump({
|
||
flag: 'h5',
|
||
extra: {
|
||
url: location.origin + `/#/agentEenter/AgentEenterBasicImage`
|
||
},
|
||
routerInfo: {
|
||
path: `/agentEenter/AgentEenterBasicImage`
|
||
}
|
||
})
|
||
} else {
|
||
this.$toast(res.resultMessage)
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* @Description: 勾选‘无此直系亲属’选项时，执行的方法
|
||
* @Description: 判断当前的操作行为是勾选‘无此直系亲属’选项，还是将已经选中的‘无此直系亲属’选项进行取消勾选
|
||
* @params: 当前勾选项所对应的数据对象
|
||
* @author:zhangqi
|
||
* @Date:2021-07-21
|
||
*/
|
||
notHaveImmediateFamilyFunc(item) {
|
||
if (item.requiredType) {
|
||
// 当前‘requiredType’属性为true时，执行此操作，要勾选‘无此直系亲属’选项。表示不存在亲属关系，勾选‘无此直系亲属’选项时，要将输入项重置
|
||
item.name = '' // 将对应数据对象中的姓名设置为空
|
||
item.sex = 0 // 将对应数据对象中的性别设置为默认的‘男’
|
||
item.idType = '' // 将对应数据对象中的证件类型设置为空
|
||
item.idNo = '' // 将对应数据对象中的证件号码设置为空
|
||
item.birthday = '' // 将对应数据对象中的出生日期设置为空
|
||
item.mobile = '' // 将对应数据对象中的联系号码设置为空
|
||
item.requiredType = immediateFamilyEnum.nonExistent // 将对应数据对象中的是否必填设置为false，表示设置输入项为非必填
|
||
} else {
|
||
// 当前‘requiredType’属性为false时，执行此操作，要将已经选中的‘无此直系亲属’选项进行取消勾选，表示存在亲属关系
|
||
item.name = '' // 将对应数据对象中的姓名设置为空
|
||
item.sex = 0 // 将对应数据对象中的性别设置为默认的‘男’
|
||
item.idType = '' // 将对应数据对象中的证件类型设置为空
|
||
item.idNo = '' // 将对应数据对象中的证件号码设置为空
|
||
item.birthday = '' // 将对应数据对象中的出生日期设置为空
|
||
item.mobile = '' // 将对应数据对象中的联系号码设置为空
|
||
item.requiredType = immediateFamilyEnum.existence // 将对应数据对象中的是否必填设置为true，表示输入项都是要必填
|
||
}
|
||
},
|
||
|
||
/**
|
||
* @Description: 点击页面底部，新增按钮执行的方法
|
||
* @author:zhangqi
|
||
* @Date:2021-07-21
|
||
*/
|
||
add() {
|
||
this.userInfo.push({
|
||
relationType: '3', // 关系
|
||
name: '', // 姓名
|
||
sex: '0', // 性别
|
||
idType: '', // 证件类型的枚举
|
||
idNo: '', // 证件号码
|
||
birthday: '', // 出生日期
|
||
mobile: '', // 联系电话
|
||
requiredType: immediateFamilyEnum.existence // 是否必填
|
||
})
|
||
},
|
||
getRelatedData(val, ind) {
|
||
if (ind == '1') {
|
||
if (val.idType != '1') {
|
||
return
|
||
}
|
||
//如果证件校验不通过,恢复默认值
|
||
if (idToData(val.idNo).text) {
|
||
;[val.idNo, val.birthday] = ['', '']
|
||
return this.$toast(idToData(val.idNo).text)
|
||
}
|
||
val.birthday = idToData(val.idNo).birthday
|
||
val.sex = idToData(val.idNo).sex
|
||
this.sexDisabled = true
|
||
}
|
||
},
|
||
setUpDisabled(val) {
|
||
if (val.idType != '') {
|
||
if (val.idType != '1') {
|
||
this.sexDisabled = true
|
||
} else {
|
||
this.sexDisabled = false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang='scss' scoped>
|
||
.insured-info-container {
|
||
.referrerW {
|
||
/deep/ .van-cell__title {
|
||
width: 110px;
|
||
}
|
||
}
|
||
|
||
.add-btn {
|
||
width: 80%;
|
||
margin: 20px auto;
|
||
border: 1px dashed #999;
|
||
}
|
||
|
||
.mv8 {
|
||
margin-top: unset !important;
|
||
margin-bottom: unset !important;
|
||
|
||
/deep/ .van-checkbox {
|
||
.van-checkbox__label {
|
||
color: #ff0000;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bg-gray {
|
||
background: #f1f2f4 !important;
|
||
}
|
||
}
|
||
</style>
|