feat(ebiz): 调整被保人信息展示逻辑

- 优化图片上传组件显示条件,增加关系人判断
- 将被保人信息字段包裹在关系人非本人的条件下
- 统一控制被保人信息的展示与隐藏逻辑
- 避免投保人与被保人为同一人时重复渲染信息
- 提升页面渲染性能及用户体验
This commit is contained in:
hz
2025-12-01 11:44:18 +08:00
parent 2e9698b95e
commit 3bb1d67290

View File

@@ -2,7 +2,7 @@
<div class="insured-person-container redRadioCheckbox">
<!-- 图片上传或者 ocr 识别区域 -->
<!-- 根据不同的证件类型切换到不同的组件 -->
<template v-if="uploadComponentInfo">
<template v-if="uploadComponentInfo && Number(userInfo.relationToAppnt) !== 1">
<Component :is="uploadComponentInfo.component" v-bind="uploadComponentInfo.props" v-on="uploadComponentInfo.event" />
</template>
<van-field
@@ -16,423 +16,433 @@
right-icon="arrow"
@click="toSelect('7')"
/>
<customer-picker
v-model="userInfo.name"
v-validate="'required|salename'"
:disabled="isReadonly"
:parentShowPicker.sync="customerShowPicker"
:readonly="isReadonly"
label="姓名"
name="姓名"
required
@nameChange="nameChange"
@on-choose="chooseCustomer"
@on-click="selectClick('1')"
/>
<van-field
v-validate="'required'"
:value="userInfo.idType | idToText('idType')"
label="证件类型"
name="证件类型"
placeholder="请选择"
readonly
required
right-icon="arrow"
@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'"
:readonly="isReadonly"
clearable
label="证件号码"
maxlength="18"
name="证件号码"
placeholder="手工录入或点击右侧证件扫描"
required
@blur="getRelatedData(userInfo.idNo)"
/>
<FieldDatePicker
ref="certificateValidate"
v-validate="'required'"
:defaultDate="new Date()"
:flag="true"
:max-date="new Date()"
:readonly="isReadonly"
:value.sync="userInfo.certificateValidate"
label="证件起始日期"
name="证件起始日期"
required
type="date"
@confirm="onDateConfirm($event, '0')"
></FieldDatePicker>
<FieldDatePicker
v-if="!userInfo.effectiveDateType"
ref="certiexpiredate"
v-validate="{ required: certiexpiredateRequired }"
:defaultDate="new Date()"
:flag="certiexpiredateShow"
:readonly="isReadonly || idLimit"
:required="isRequired"
:value.sync="userInfo.certiexpiredate"
label="证件截止日期"
name="证件截止日期"
type="date"
@confirm="onDateConfirm($event, '1')"
>
</FieldDatePicker>
<div class="border-bt relative fs14 p10 flex align-center">
<van-checkbox v-model="userInfo.effectiveDateType" :disabled="effectiveDateTypeAble || isReadonly" class="fr" @change="effectiveDataTypeChange"
>长期
</van-checkbox>
</div>
<select-radio v-validate="'required'" :disabled="isReadonly" :radios="sexRadio" :value.sync="userInfo.sex" label="性别" name="性别" required></select-radio>
<FieldDatePicker
ref="birthday"
v-validate="'required'"
:flag="true"
:maxDate="currentTime"
:readonly="isReadonly"
:value.sync="userInfo.birthday"
label="出生日期"
name="出生日期"
required
type="date"
@confirm="onDateConfirm($event, '2')"
/>
<van-field
v-validate="'required'"
:value="marriageStatus"
label="婚姻状况"
name="婚姻状况"
placeholder="请选择"
readonly
required
right-icon="arrow"
@click="setMarriageStatus('10')"
/>
<van-field
v-validate="'required'"
:value="userInfo.nativeplace | idToText('nativeplace')"
label="国籍"
name="国籍"
placeholder="请选择"
readonly
required
right-icon="arrow"
@click="toSelect('1')"
/>
<!-- <van-field
:value="census"
<template v-if="Number(userInfo.relationToAppnt) !== 1">
<customer-picker
v-model="userInfo.name"
v-validate="'required|salename'"
:disabled="isReadonly"
:parentShowPicker.sync="customerShowPicker"
:readonly="isReadonly"
label="姓名"
name="姓名"
required
readonly
label="户籍"
name="户籍"
@nameChange="nameChange"
@on-choose="chooseCustomer"
@on-click="selectClick('1')"
/>
<van-field
v-validate="'required'"
right-icon="arrow"
:value="userInfo.idType | idToText('idType')"
label="证件类型"
name="证件类型"
placeholder="请选择"
@click="areaChoose('1')"
/> -->
<van-field
v-model="userInfo.mobile"
v-validate="'required|mobileLength11|mobileStartWith1|mobile'"
:readonly="isReadonly"
clearable
label="移动电话"
maxlength="11"
name="移动电话"
placeholder="请输入"
required
/>
<!-- <van-field
v-if="!isReadonly"
v-model="userInfo.authCode"
center
clearable
label=""
name="短信验证码"
placeholder="请输入短信验证码"
readonly
required
right-icon="arrow"
@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'"
maxlength="6"
:readonly="isReadonly"
clearable
label="证件号码"
maxlength="18"
name="证件号码"
placeholder="手工录入或点击右侧证件扫描"
required
@blur="getRelatedData(userInfo.idNo)"
/>
<FieldDatePicker
ref="certificateValidate"
v-validate="'required'"
:defaultDate="new Date()"
:flag="true"
:max-date="new Date()"
:readonly="isReadonly"
:value.sync="userInfo.certificateValidate"
label="证件起始日期"
name="证件起始日期"
required
type="date"
@confirm="onDateConfirm($event, '0')"
></FieldDatePicker>
<FieldDatePicker
v-if="!userInfo.effectiveDateType"
ref="certiexpiredate"
v-validate="{ required: certiexpiredateRequired }"
:defaultDate="new Date()"
:flag="certiexpiredateShow"
:readonly="isReadonly || idLimit"
:required="isRequired"
:value.sync="userInfo.certiexpiredate"
label="证件截止日期"
name="证件截止日期"
type="date"
@confirm="onDateConfirm($event, '1')"
>
<van-button slot="button" size="small" type="danger" :disabled="codeDisabled" @click="getCode" v-no-more-click="1000">{{
codeDisabled ? `${countDown}s后重新获取` : '发送验证码'
}}</van-button>
</van-field> -->
<!-- <van-field
v-model="userInfo.email"
</FieldDatePicker>
<div class="border-bt relative fs14 p10 flex align-center">
<van-checkbox v-model="userInfo.effectiveDateType" :disabled="effectiveDateTypeAble || isReadonly" class="fr" @change="effectiveDataTypeChange"
>长期
</van-checkbox>
</div>
<select-radio
v-validate="'required'"
:disabled="isReadonly"
:radios="sexRadio"
:value.sync="userInfo.sex"
label="性别"
name="性别"
required
label="电子邮箱"
name="电子邮箱"
placeholder="请输入"
v-validate="'required|email'"
clearable
:readonly="isAppnt"
/> -->
<van-field
v-if="Number(branchType) !== 14"
v-model="userInfo.stature"
v-validate="Number(branchType) !== 14 ? '' : 'required|' + 'onlyNumber|stature'"
:readonly="isAppnt"
clearable
label="身高(cm)"
maxlength="5"
name="身高"
placeholder="请输入单位cm"
required
@blur="checkStature(userInfo.stature)"
/>
<van-field
v-if="Number(branchType) !== 14"
v-model="userInfo.avoirdupois"
v-validate="Number(branchType) !== 14 ? '' : 'required|' + 'required|onlyNumber'"
:readonly="isAppnt"
clearable
label="体重(kg)"
name="体重"
placeholder="请输入单位kg"
required
@blur="checkAvoirdupois(userInfo.avoirdupois)"
/>
<div
v-if="manageComCode == '45'"
class="p15 pl8 fs14"
style="border-bottom: 1px solid #eee;display: flex;justify-content: space-between;align-items: center;"
>
<van-radio-group v-model="userInfo.isNewPeopleFlag" :disabled="isReadonly" class="flex">
<label class="flex align-items-c">
<i class="red">*</i>
<span style="color: #646566">新市民身份</span>
<van-icon class="red ml5" name="question-o" size="20" @click="isNewPeopleFlagTip" />
</label>
<van-radio class="ml30" name="1"></van-radio>
<van-radio class="ml20" name="0"></van-radio>
</van-radio-group>
</div>
<van-field
v-if="userInfo.isNewPeopleFlag == 1"
v-validate="'required'"
:value="userInfo.npType | idToText('npType')"
label="新市民类型"
name="新市民类型"
placeholder="请选择"
readonly
required
right-icon="arrow"
@click="toSelect('11')"
/>
<!-- 工作信息 -->
<!-- <van-field
:value="userInfo.degree | idToText('degree')"
></select-radio>
<FieldDatePicker
ref="birthday"
v-validate="'required'"
:flag="true"
:maxDate="currentTime"
:readonly="isReadonly"
:value.sync="userInfo.birthday"
label="出生日期"
name="出生日期"
required
type="date"
@confirm="onDateConfirm($event, '2')"
/>
<van-field
v-validate="'required'"
:value="marriageStatus"
label="婚姻状况"
name="婚姻状况"
placeholder="请选择"
readonly
label="文化程度"
name="文化程度"
required
right-icon="arrow"
placeholder="请选择"
@click="setMarriageStatus('10')"
/>
<van-field
v-validate="'required'"
@click="toSelect('3')"
/> -->
<select-radio v-validate="'required'" :radios="medicalRadio" :value.sync="userInfo.medical" label="有无社保" name="有无社保" required></select-radio>
<!-- <van-field
:value="userInfo.taxResidentId | idToText('taxIdentity')"
:value="userInfo.nativeplace | idToText('nativeplace')"
label="国籍"
name="国籍"
placeholder="请选择"
readonly
label="税收居民身份"
name="税收居民身份"
required
right-icon="arrow"
placeholder="请选择"
v-validate="'required'"
@click="toSelect('5')"
/> -->
@click="toSelect('1')"
/>
<!-- <van-field
:value="census"
required
readonly
label="户籍"
name="户籍"
v-validate="'required'"
right-icon="arrow"
placeholder="请选择"
@click="areaChoose('1')"
/> -->
<occupation-picker
v-validate="'required'"
:chooseName.sync="userInfo.occupationName"
:healthGrade.sync="userInfo.healthGrade"
:lifeGrade.sync="userInfo.lifeGrade"
:parentShowPicker.sync="occupationShowPicker"
:readonly="isReadonly"
:value.sync="userInfo.occupationCode"
clearable
label="职业类别"
name="职业类别"
placeholder="请选择"
required
@on-click="selectClick('2')"
@on-choose="chooseOccupation"
/>
<!-- <van-field-->
<!-- v-if="branchType != '14'"-->
<!-- v-validate="'required'"-->
<!-- :value="userInfo.salarySource | idToText('salarySource')"-->
<!-- label="收入来源"-->
<!-- name="收入来源"-->
<!-- placeholder="请选择"-->
<!-- readonly-->
<!-- required-->
<!-- right-icon="arrow"-->
<!-- @click="toSelect('9')"-->
<!-- />-->
<van-field
v-show="isShowOthenSalarySource"
v-model="userInfo.otherSalarySource"
clearable
label
maxlength="30"
name="其他来源"
placeholder="请输入其它收入来源"
required
/>
<van-field
v-model="userInfo.averageAnnualIncome"
v-validate="'required|onlyNumber'"
:readonly="isAppnt"
clearable
label="平均年收入(万元)"
maxlength="5"
name="平均年收入"
placeholder="请输入,单位万元"
required
/>
<!-- <van-field-->
<!-- v-if="branchType != '14'"-->
<!-- v-model="userInfo.liabilitiesMoney"-->
<!-- v-validate="'required|onlyNumber'"-->
<!-- :readonly="isAppnt"-->
<!-- clearable-->
<!-- maxlength="5"-->
<!-- name="负债金额"-->
<!-- placeholder="请输入,单位万元"-->
<!-- required-->
<!-- >-->
<!-- <div slot="label" class="flex flex-wrap"><span>负债金额</span><span>万元</span></div>-->
<!-- </van-field>-->
<!-- <van-field
:value="userInfo.jobStatus | idToText('workCondition')"
readonly
label="在职情况"
name="在职情况"
<van-field
v-model="userInfo.mobile"
v-validate="'required|mobileLength11|mobileStartWith1|mobile'"
:readonly="isReadonly"
clearable
label="移动电话"
maxlength="11"
name="移动电话"
placeholder="请输入"
required
placeholder="请选择"
/>
<!-- <van-field
v-if="!isReadonly"
v-model="userInfo.authCode"
center
clearable
label=""
name="短信验证码"
placeholder="请输入短信验证码"
v-validate="'required'"
maxlength="6"
>
<van-button slot="button" size="small" type="danger" :disabled="codeDisabled" @click="getCode" v-no-more-click="1000">{{
codeDisabled ? `${countDown}s后重新获取` : '发送验证码'
}}</van-button>
</van-field> -->
<!-- <van-field
v-model="userInfo.email"
required
label="电子邮箱"
name="电子邮箱"
placeholder="请输入"
v-validate="'required|email'"
clearable
:readonly="isAppnt"
/> -->
<van-field
v-if="Number(branchType) !== 14"
v-model="userInfo.stature"
v-validate="Number(branchType) !== 14 ? '' : 'required|' + 'onlyNumber|stature'"
:readonly="isAppnt"
clearable
label="身高(cm)"
maxlength="5"
name="身高"
placeholder="请输入单位cm"
required
@blur="checkStature(userInfo.stature)"
/>
<van-field
v-if="Number(branchType) !== 14"
v-model="userInfo.avoirdupois"
v-validate="Number(branchType) !== 14 ? '' : 'required|' + 'required|onlyNumber'"
:readonly="isAppnt"
clearable
label="体重(kg)"
name="体重"
placeholder="请输入单位kg"
required
@blur="checkAvoirdupois(userInfo.avoirdupois)"
/>
<div
v-if="manageComCode == '45'"
class="p15 pl8 fs14"
style="border-bottom: 1px solid #eee;display: flex;justify-content: space-between;align-items: center;"
>
<van-radio-group v-model="userInfo.isNewPeopleFlag" :disabled="isReadonly" class="flex">
<label class="flex align-items-c">
<i class="red">*</i>
<span style="color: #646566">新市民身份</span>
<van-icon class="red ml5" name="question-o" size="20" @click="isNewPeopleFlagTip" />
</label>
<van-radio class="ml30" name="1"></van-radio>
<van-radio class="ml20" name="0"></van-radio>
</van-radio-group>
</div>
<van-field
v-if="userInfo.isNewPeopleFlag == 1"
v-validate="'required'"
:value="userInfo.npType | idToText('npType')"
label="新市民类型"
name="新市民类型"
placeholder="请选择"
readonly
required
right-icon="arrow"
@click="toSelect('8')"
/> -->
<!-- <van-field
@click="toSelect('11')"
/>
<!-- 工作信息 -->
<!-- <van-field
:value="userInfo.degree | idToText('degree')"
readonly
label="文化程度"
name="文化程度"
required
right-icon="arrow"
placeholder="请选择"
v-validate="'required'"
@click="toSelect('3')"
/> -->
<select-radio v-validate="'required'" :radios="medicalRadio" :value.sync="userInfo.medical" label="有无社保" name="有无社保" required></select-radio>
<!-- <van-field
:value="userInfo.taxResidentId | idToText('taxIdentity')"
readonly
label="税收居民身份"
name="税收居民身份"
required
right-icon="arrow"
placeholder="请选择"
v-validate="'required'"
@click="toSelect('5')"
/> -->
<occupation-picker
v-validate="'required'"
:chooseName.sync="userInfo.occupationName"
:healthGrade.sync="userInfo.healthGrade"
:lifeGrade.sync="userInfo.lifeGrade"
:parentShowPicker.sync="occupationShowPicker"
:readonly="isReadonly"
:value.sync="userInfo.occupationCode"
clearable
label="职业类别"
name="职业类别"
placeholder="请选择"
required
@on-click="selectClick('2')"
@on-choose="chooseOccupation"
/>
<!-- <van-field-->
<!-- v-if="branchType != '14'"-->
<!-- v-validate="'required'"-->
<!-- :value="userInfo.salarySource | idToText('salarySource')"-->
<!-- label="收入来源"-->
<!-- name="收入来源"-->
<!-- placeholder="请选择"-->
<!-- readonly-->
<!-- required-->
<!-- right-icon="arrow"-->
<!-- @click="toSelect('9')"-->
<!-- />-->
<van-field
v-show="isShowOthenSalarySource"
v-model="userInfo.otherSalarySource"
clearable
label
maxlength="30"
name="其他来源"
placeholder="请输入其它收入来源"
required
/>
<van-field
v-model="userInfo.averageAnnualIncome"
v-validate="'required|onlyNumber'"
:readonly="isAppnt"
clearable
label="平均年收入(万元)"
maxlength="5"
name="平均年收入"
placeholder="请输入,单位万元"
required
/>
<!-- <van-field-->
<!-- v-if="branchType != '14'"-->
<!-- v-model="userInfo.liabilitiesMoney"-->
<!-- v-validate="'required|onlyNumber'"-->
<!-- :readonly="isAppnt"-->
<!-- clearable-->
<!-- maxlength="5"-->
<!-- name="负债金额"-->
<!-- placeholder="请输入,单位万元"-->
<!-- required-->
<!-- >-->
<!-- <div slot="label" class="flex flex-wrap"><span>负债金额</span><span>万元</span></div>-->
<!-- </van-field>-->
<!-- <van-field
:value="userInfo.jobStatus | idToText('workCondition')"
readonly
label="在职情况"
name="在职情况"
required
placeholder="请选择"
v-validate="'required'"
right-icon="arrow"
@click="toSelect('8')"
/> -->
<!-- <van-field
v-model="userInfo.workcompany"
label="工作单位"
name="工作单位"
placeholder="无工作单位,请输入无"
maxlength="50"
required
v-validate="'required'"
clearable
:readonly="isAppnt"
/> -->
<select-radio
v-if="Number(userInfo.relationToAppnt) !== 1 && Number(branchType) !== 14"
v-validate="'required'"
:radios="Asyncs"
:value.sync="userInfo.isAsync"
label="是否协同工作单位"
name="是否协同工作单位"
required
></select-radio>
<SearchField
v-if="Number(branchType) !== 14 && Number(userInfo.relationToAppnt) !== 1"
v-model="userInfo.workcompany"
v-validate="'required'"
:isAsync="Number(userInfo.isAsync) === 1"
label="工作单位"
name="工作单位"
placeholder="无工作单位,请输入无"
maxlength="50"
required
v-validate="'required'"
clearable
:readonly="isAppnt"
/> -->
<select-radio
v-if="Number(userInfo.relationToAppnt) !== 1 && Number(branchType) !== 14"
v-validate="'required'"
:radios="Asyncs"
:value.sync="userInfo.isAsync"
label="是否协同工作单位"
name="是否协同工作单位"
required
></select-radio>
<SearchField
v-if="Number(branchType) !== 14 && Number(userInfo.relationToAppnt) !== 1"
v-model="userInfo.workcompany"
v-validate="'required'"
:isAsync="Number(userInfo.isAsync) === 1"
label="工作单位"
name="工作单位"
placeholder="无工作单位,请输入无"
@workcompanys="workcompanys"
/>
<!-- <van-field
v-model="areaName"
@workcompanys="workcompanys"
/>
<!-- <van-field
v-model="areaName"
readonly
label="单位地址"
name="单位地址"
required
right-icon="arrow"
placeholder="请选择"
v-validate="'required'"
@click="areaChoose('3')"
/> -->
<!-- <van-field
v-model="userInfo.companyAddress"
label=""
name="详细地址"
placeholder="请输入详细地址"
v-validate="'required'"
clearable
maxlength="30"
:readonly="isAppnt"
/> -->
<!-- <van-field
v-model="userInfo.companyZip"
label="邮编"
name="邮编"
placeholder="请输入"
required
v-validate="'required|zipCode'"
maxlength="6"
clearable
:readonly="isAppnt"
/> -->
<!-- <van-field v-model="userInfo.companyPhone" label="单位电话" name="单位电话" placeholder="非必填" maxlength="13" clearable :readonly="isAppnt" /> -->
<!-- 家庭信息 -->
<!-- <van-field
:value="userInfo.marriage | idToText('marriage')"
readonly
required
label="婚姻状况"
name="婚姻状况"
right-icon="arrow"
placeholder="请选择"
v-validate="'required'"
@click="toSelect('6')"
/> -->
<!-- <van-field
v-model="userInfo.familyAnnualIncome"
label="家庭年收入(万元)"
name="家庭年收入"
required
placeholder="请输入,单位万元"
v-validate="'required|onlyNumber'"
clearable
maxlength="5"
:readonly="isAppnt"
/> -->
<van-field
v-model="homeName"
v-validate="'required|contactAdderss'"
label="联系地址"
name="联系地址"
placeholder="请选择"
readonly
label="单位地址"
name="单位地址"
required
right-icon="arrow"
placeholder="请选择"
v-validate="'required'"
@click="areaChoose('3')"
/> -->
<!-- <van-field
v-model="userInfo.companyAddress"
@click="areaChoose('2')"
/>
<van-field
v-model="userInfo.homeAddress"
v-validate="'required|homeAddressNum|homeAddressCh'"
:disabled="withRootUser.value"
:readonly="isAppnt"
clearable
label=""
name="详细地址"
placeholder="请输入详细地址"
v-validate="'required'"
clearable
maxlength="30"
:readonly="isAppnt"
/> -->
<!-- <van-field
v-model="userInfo.companyZip"
label="邮编"
name="邮编"
placeholder="请输入"
required
v-validate="'required|zipCode'"
maxlength="6"
clearable
:readonly="isAppnt"
/> -->
<!-- <van-field v-model="userInfo.companyPhone" label="单位电话" name="单位电话" placeholder="非必填" maxlength="13" clearable :readonly="isAppnt" /> -->
<!-- 家庭信息 -->
<!-- <van-field
:value="userInfo.marriage | idToText('marriage')"
readonly
required
label="婚姻状况"
name="婚姻状况"
right-icon="arrow"
placeholder="请选择"
v-validate="'required'"
@click="toSelect('6')"
/> -->
<!-- <van-field
v-model="userInfo.familyAnnualIncome"
label="家庭年收入(万元)"
name="家庭年收入"
required
placeholder="请输入,单位万元"
v-validate="'required|onlyNumber'"
clearable
maxlength="5"
:readonly="isAppnt"
/> -->
<van-field
v-model="homeName"
v-validate="'required|contactAdderss'"
label="联系地址"
name="联系地址"
placeholder="请选择"
readonly
required
right-icon="arrow"
@click="areaChoose('2')"
/>
<van-field
v-model="userInfo.homeAddress"
v-validate="'required|homeAddressNum|homeAddressCh'"
:disabled="withRootUser.value"
:readonly="isAppnt"
clearable
label=""
maxlength="30"
name="详细地址"
placeholder="具体到街道、门牌号、楼号、单元号、室号"
style="font-size: 3.5vw"
/>
<div class="pl10 pt10 pb10 pr10 address fs14">
<van-checkbox v-model="withRootUser.value" :disabled="isAppnt">同投保人</van-checkbox>
</div>
name="详细地址"
placeholder="具体到街道、门牌号、楼号、单元号、室号"
style="font-size: 3.5vw"
/>
<div class="pl10 pt10 pb10 pr10 address fs14">
<van-checkbox v-model="withRootUser.value" :disabled="isAppnt">同投保人</van-checkbox>
</div>
</template>
<!-- <van-field
v-model="userInfo.homeZip"
label="邮编"