【fix】 完善填写投保人信息页面

This commit is contained in:
tian.guangyuan
2020-04-22 13:15:40 +08:00
parent 5395a69536
commit 5f6b0c6b3c

View File

@@ -23,8 +23,8 @@
name="证件类型" name="证件类型"
right-icon="arrow" right-icon="arrow"
placeholder="请选择" placeholder="请选择"
@click="toSelect('2')"
/> />
<!-- @click="toSelect('2')" -->
<!-- <van-field v-model="userInfo.idNo" v-validate="'required|idNo'" maxlength="18" label="证件号码" name="证件号码" placeholder="请输入" clearable> --> <!-- <van-field v-model="userInfo.idNo" v-validate="'required|idNo'" maxlength="18" label="证件号码" name="证件号码" placeholder="请输入" clearable> -->
<van-field <van-field
v-model="userInfo.idNo" v-model="userInfo.idNo"
@@ -92,7 +92,7 @@
/> />
</van-cell-group> </van-cell-group>
<!-- 被保人信息 --> <!-- 被保人信息 -->
<van-cell-group class="mt10"> <van-cell-group class="mt10" v-if="userInfo.relationToInsured != 1">
<p style="border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">被保人信息</p> <p style="border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">被保人信息</p>
<customer-picker <customer-picker
@on-choose="chooseCustomer(arguments)" @on-choose="chooseCustomer(arguments)"
@@ -127,8 +127,8 @@
name="证件类型" name="证件类型"
right-icon="arrow" right-icon="arrow"
placeholder="请选择" placeholder="请选择"
@click="toSelect('11')"
/> />
<!-- @click="toSelect('11')" -->
<van-field <van-field
v-model="insuredInfo.idNo" v-model="insuredInfo.idNo"
@@ -144,13 +144,69 @@
<van-button v-if="insuredInfo.idType == 1" slot="button" size="small" type="danger" round @click="selectClick('3')">证件扫描</van-button> <van-button v-if="insuredInfo.idType == 1" slot="button" size="small" type="danger" round @click="selectClick('3')">证件扫描</van-button>
</van-field> </van-field>
</van-cell-group> </van-cell-group>
<van-cell-group class="mt10" v-else>
<p style="border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">被保人信息</p>
<customer-picker
v-validate="'required|name'"
name="被保险人姓名"
label="被保险人姓名"
required
readonly
:value.sync="userInfo.name"
></customer-picker>
<!-- @on-choose="chooseCustomer(arguments)" -->
<!-- :parentShowPicker.sync="customerShowPicker2" -->
<!-- @nameChange="nameChanges" -->
<!-- @on-click="selectClick('1', '1')" -->
<select-radio required :disabled="true" :radios="sexRadio" label="性别" name="性别" v-validate="'required'" :value.sync="userInfo.sex"></select-radio>
<FieldDatePicter
v-validate="'required'"
label="出生日期"
name="出生日期"
readonly
required
:value.sync="userInfo.birthday"
type="date"
:flag="true"
ref="insuredBirthday"
:maxDate="maxDate"
></FieldDatePicter>
<!-- @confirm="onDateConfirm($event, '5')" -->
<van-field
:value="userInfo.idType | idToText('insuredIdType')"
v-validate="'required'"
readonly
required
label="证件类型"
name="证件类型"
right-icon="arrow"
placeholder="请选择"
/>
<!-- @click="toSelect('11')" -->
<van-field
v-model="userInfo.idNo"
maxlength="18"
required
readonly
label="证件号码"
v-validate="'required'"
name="证件号码"
placeholder="请输入"
clearable
>
<!-- @blur="getRelatedData(insuredInfo.idNo, '2')" -->
<!-- <van-button v-if="userInfo.idType == 1" slot="button" size="small" type="danger" round @click="selectClick('3')">证件扫描</van-button> -->
</van-field>
</van-cell-group>
<!-- 受益人信息 --> <!-- 受益人信息 -->
<van-cell-group class="mt10"> <van-cell-group class="mt10">
<p style="border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">受益人信息</p> <p style="border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">受益人信息</p>
<van-field required v-model="bnfTypeVal" clearable label="受益人类型" v-validate="'required'" style="border-bottom: 1px solid #ebedf0;" /> <van-field required readonly v-model="bnfTypeVal" clearable label="受益人类型" v-validate="'required'" style="border-bottom: 1px solid #ebedf0;" />
</van-cell-group> </van-cell-group>
<p style="background:white;border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">产品信息</p> <p style="background:white;border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">产品信息</p>
<FieldDatePicter <van-field value="7天" clearable label="保险期间" style="border-bottom: 1px solid #ebedf0;" />
<!-- <FieldDatePicter
v-validate="'required'" v-validate="'required'"
label="指定生效日期" label="指定生效日期"
name="指定生效日期" name="指定生效日期"
@@ -163,9 +219,10 @@
ref="effectiveDate" ref="effectiveDate"
input-align:right input-align:right
> >
</FieldDatePicter> </FieldDatePicter> -->
<van-checkbox-group v-model="result" ref="checkboxGroup" style="height:34px;box-sizing:border-box;" class="pl8 pt10 bg-white"> <van-checkbox-group v-model="result" ref="checkboxGroup" style="box-sizing:border-box;" class="pl8 pr20 pt10 pb10 bg-white">
<van-checkbox name="a" shape="square" icon-size="13px">我已阅读并同意投保须知</van-checkbox> <van-checkbox name="a" shape="square" icon-size="13px">本人已仔细阅读并了解投保须知投保声明保险条款等内容自愿为被保险人投保本保险<br />
为未成年子女投保的人身保险在被保险人成年之前因被保险人身故给付的保险金总和不得超过国务院保险监督管理机构规定的限额身故给付的保险金额总和的约定也不得超过前述限额但航空意外死亡保险金额及重大自然灾害意外死亡保险金额不计算在上述规定限额之中</van-checkbox>
</van-checkbox-group> </van-checkbox-group>
<van-goods-action style="z-index: 99;"> <van-goods-action style="z-index: 99;">
@@ -173,7 +230,7 @@
>总保费:<span style="color:red;font-weight:bold;font-size:18px;font-weight:400;">{{ allPrice }}</span >总保费:<span style="color:red;font-weight:bold;font-size:18px;font-weight:400;">{{ allPrice }}</span
></van-button ></van-button
> >
<van-goods-action-button type="danger" text="提交" @click="nextStep" v-no-more-click="1000" style="border-radius:0em;width:50%;height:40px;" /> <van-goods-action-button :disabled="!result.length" type="danger" text="提交" @click="nextStep" v-no-more-click="1000" style="border-radius:0em;width:50%;height:40px;" />
</van-goods-action> </van-goods-action>
<!-- 字段选择 --> <!-- 字段选择 -->
@@ -241,6 +298,7 @@ export default {
data() { data() {
return { return {
now: new Date(), now: new Date(),
insuredSex: '男',
isScan: false, //是否显示证件扫描组件 isScan: false, //是否显示证件扫描组件
allPrice: 0, allPrice: 0,
result: [], result: [],
@@ -283,16 +341,16 @@ export default {
bnfType: '0', // 受益人类型 bnfType: '0', // 受益人类型
bnfSelec: '请选择', bnfSelec: '请选择',
birthday: '', //投保人出生日期 birthday: '', //投保人出生日期
relationToInsured: '', relationToInsured: '1',
idType: '1', //证件类型 idType: '1', //证件类型
idNo: '', //证件号码 idNo: '', //证件号码
homeProvince: '1', //家庭省 // homeProvince: '1', //家庭省
homeCity: '1', //家庭市 // homeCity: '1', //家庭市
homeArea: '1', //家庭区 // homeArea: '1', //家庭区
homeAddress: '1', //详细地址 // homeAddress: '1', //详细地址
mobile: '', //移动电话 mobile: '', //移动电话
email: '123@qq.com', //电子邮箱 // email: '123@qq.com', //电子邮箱
effectiveDate: '' //指定生效日期 // effectiveDate: '' //指定生效日期
}, },
//被保人信息 //被保人信息
insuredInfo: { insuredInfo: {
@@ -599,8 +657,10 @@ export default {
this.userInfo.name = customerName //用户名 this.userInfo.name = customerName //用户名
this.userInfo.sex = customerSex ? customerSex.toString() : '0' //性别 this.userInfo.sex = customerSex ? customerSex.toString() : '0' //性别
this.userInfo.birthday = data.birthday //出生日期 this.userInfo.birthday = data.birthday //出生日期
if( data.customerIdType == 1 ){
this.userInfo.idType = data.customerIdType //证件类型 this.userInfo.idType = data.customerIdType //证件类型
this.userInfo.idNo = data.customerIdNumber //证件类别 this.userInfo.idNo = data.customerIdNumber //证件类别
}
// this.userInfo.email = data.email //证件类别 // this.userInfo.email = data.email //证件类别
this.userInfo.mobile = data.customerPhone //移动电话 this.userInfo.mobile = data.customerPhone //移动电话
@@ -622,9 +682,10 @@ export default {
this.insuredInfo.sex = customerSex ? customerSex.toString() : '0' //性别 this.insuredInfo.sex = customerSex ? customerSex.toString() : '0' //性别
this.insuredInfo.birthday = data.birthday //出生日期 this.insuredInfo.birthday = data.birthday //出生日期
if( data.customerIdType == 1 ){
this.insuredInfo.idType = data.customerIdType //证件类型 this.insuredInfo.idType = data.customerIdType //证件类型
this.insuredInfo.idNo = data.customerIdNumber //证件类别 this.insuredInfo.idNo = data.customerIdNumber //证件类别
}
// 计算年龄 // 计算年龄
// let age = utilsAge.getAge(this.userInfo.birthday, new Date()) // let age = utilsAge.getAge(this.userInfo.birthday, new Date())
@@ -641,7 +702,9 @@ export default {
// console.log(this.userInfo.otherSalarySource) // console.log(this.userInfo.otherSalarySource)
//表单校验, 成功跳转 //表单校验, 成功跳转
// if() if(this.userInfo.relationToInsured == 1){
Object.assign(this.insuredInfo , this.userInfo)
}
this.$validator.validate().then(valid => { this.$validator.validate().then(valid => {
@@ -719,16 +782,18 @@ export default {
return this.$toast('证件有效期不正常26周岁至45周岁公民身份证有效期应小于等于20年') return this.$toast('证件有效期不正常26周岁至45周岁公民身份证有效期应小于等于20年')
} }
} }
}
//证件类型是户口本 //证件类型是户口本
} else if (this.userInfo.idType == '2') { // else
if (age > 16) { // if (this.userInfo.idType == '2') {
return this.$toast('客户年龄在16周岁以上不能使用户口本作为有效证件') // if (age > 16) {
} // return this.$toast('客户年龄在16周岁以上不能使用户口本作为有效证件')
} else if (this.userInfo.idType == '3') { // }
if (age >= 2) { // } else if (this.userInfo.idType == '3') {
return this.$toast('客户年龄在2周岁及以上不能使用出生证作为有效证件') // if (age >= 2) {
} // return this.$toast('客户年龄在2周岁及以上不能使用出生证作为有效证件')
} // }
// }
// else if (this.userInfo.idType == '4' && this.userInfo.idNo.length < 3) { // else if (this.userInfo.idType == '4' && this.userInfo.idNo.length < 3) {
// console.log('证件类型是护照') // console.log('证件类型是护照')
// return this.$toast('护照须大于等于3个字符') // return this.$toast('护照须大于等于3个字符')
@@ -990,14 +1055,14 @@ export default {
} }
} }
}, },
beforeDestroy() { // beforeDestroy() {
//清理计时器 // //清理计时器
console.log('123') // console.log('123')
window.clearInterval(this.timeId) // window.clearInterval(this.timeId)
this.timeId = null // this.timeId = null
this.countDown = 60 // this.countDown = 60
this.codeDisabled = false // this.codeDisabled = false
}, // },
watch: { watch: {
'userInfo.relationToInsured': { 'userInfo.relationToInsured': {
handler(newV, oldV) { handler(newV, oldV) {
@@ -1008,7 +1073,7 @@ export default {
}, },
immediate: true, immediate: true,
deep: true deep: true
} },
} }
} }
</script> </script>
@@ -1016,6 +1081,10 @@ export default {
.insured-info-container { .insured-info-container {
/deep/.van-checkbox { /deep/.van-checkbox {
margin-left: auto; margin-left: auto;
align-items: normal;
.van-checkbox__icon{
margin-top: 5px;
}
} }
/deep/.van-radio { /deep/.van-radio {
margin-left: auto; margin-left: auto;