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

2025-12-10 03:26:45 +08:00 · 2020-04-22 13:15:40 +08:00
parent 5395a69536
commit 5f6b0c6b3c
1 changed files with 109 additions and 40 deletions
--- a/src/views/ebiz/cardList/information.vue
+++ b/src/views/ebiz/cardList/information.vue
@@ -23,8 +23,8 @@
        name="证件类型"
        right-icon="arrow"
        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"
@@ -92,7 +92,7 @@
      />
    </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>
      <customer-picker
        @on-choose="chooseCustomer(arguments)"
@@ -127,8 +127,8 @@
        name="证件类型"
        right-icon="arrow"
        placeholder="请选择"
-        @click="toSelect('11')"
      />
+        <!-- @click="toSelect('11')" -->

      <van-field
        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-field>
    </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">
      <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>
    <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'"
      label="指定生效日期"
      name="指定生效日期"
@@ -163,9 +219,10 @@
      ref="effectiveDate"
      input-align:right
    >
-    </FieldDatePicter>
-    <van-checkbox-group v-model="result" ref="checkboxGroup" style="height:34px;box-sizing:border-box;" class="pl8 pt10 bg-white">
-      <van-checkbox name="a" shape="square" icon-size="13px">我已阅读并同意《投保须知》</van-checkbox>
+    </FieldDatePicter> -->
+    <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">本人已仔细阅读并了解《投保须知》《投保声明》和《保险条款》等内容，自愿为被保险人投保本保险。<br />
+      为未成年子女投保的人身保险，在被保险人成年之前，因被保险人身故给付的保险金总和不得超过国务院保险监督管理机构规定的限额，身故给付的保险金额总和的约定也不得超过前述限额。但航空意外死亡保险金额及重大自然灾害意外死亡保险金额不计算在上述规定限额之中。</van-checkbox>
    </van-checkbox-group>

    <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
        >元</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>

    <!-- 字段选择 -->
@@ -241,6 +298,7 @@ export default {
  data() {
    return {
      now: new Date(),
+      insuredSex: '男',
      isScan: false, //是否显示证件扫描组件
      allPrice: 0,
      result: [],
@@ -283,16 +341,16 @@ export default {
        bnfType: '0', // 受益人类型
        bnfSelec: '请选择',
        birthday: '', //投保人出生日期
-        relationToInsured: '',
+        relationToInsured: '1',
        idType: '1', //证件类型
        idNo: '', //证件号码
-        homeProvince: '1', //家庭省
-        homeCity: '1', //家庭市
-        homeArea: '1', //家庭区
-        homeAddress: '1', //详细地址
+        // homeProvince: '1', //家庭省
+        // homeCity: '1', //家庭市
+        // homeArea: '1', //家庭区
+        // homeAddress: '1', //详细地址
        mobile: '', //移动电话
-        email: '123@qq.com', //电子邮箱
-        effectiveDate: '' //指定生效日期
+        // email: '123@qq.com', //电子邮箱
+        // effectiveDate: '' //指定生效日期
      },
      //被保人信息
      insuredInfo: {
@@ -599,8 +657,10 @@ export default {
        this.userInfo.name = customerName //用户名
        this.userInfo.sex = customerSex ? customerSex.toString() : '0' //性别
        this.userInfo.birthday = data.birthday //出生日期
-        this.userInfo.idType = data.customerIdType //证件类型
-        this.userInfo.idNo = data.customerIdNumber //证件类别
+        if( data.customerIdType == 1 ){
+          this.userInfo.idType = data.customerIdType //证件类型
+          this.userInfo.idNo = data.customerIdNumber //证件类别
+        }
        // this.userInfo.email = data.email //证件类别

        this.userInfo.mobile = data.customerPhone //移动电话
@@ -622,9 +682,10 @@ export default {
        this.insuredInfo.sex = customerSex ? customerSex.toString() : '0' //性别

        this.insuredInfo.birthday = data.birthday //出生日期
-        this.insuredInfo.idType = data.customerIdType //证件类型
-        this.insuredInfo.idNo = data.customerIdNumber //证件类别
-
+        if( data.customerIdType == 1 ){
+          this.insuredInfo.idType = data.customerIdType //证件类型
+          this.insuredInfo.idNo = data.customerIdNumber //证件类别
+        }
        // 计算年龄
        // let age = utilsAge.getAge(this.userInfo.birthday, new Date())

@@ -641,7 +702,9 @@ export default {
      // console.log(this.userInfo.otherSalarySource)
      //表单校验, 成功跳转
      
-      // if()
+      if(this.userInfo.relationToInsured  == 1){
+        Object.assign(this.insuredInfo , this.userInfo)
+      }
      
      this.$validator.validate().then(valid => {
        
@@ -719,16 +782,18 @@ export default {
                return this.$toast('证件有效期不正常，26周岁至45周岁公民身份证有效期应小于等于20年')
              }
            }
-            //证件类型是户口本
-          } else if (this.userInfo.idType == '2') {
-            if (age > 16) {
-              return this.$toast('客户年龄在16周岁以上，不能使用户口本作为有效证件')
-            }
-          } else if (this.userInfo.idType == '3') {
-            if (age >= 2) {
-              return this.$toast('客户年龄在2周岁及以上，不能使用出生证作为有效证件')
-            }
          }
+            //证件类型是户口本
+           // else
+          //  if (this.userInfo.idType == '2') {
+          //   if (age > 16) {
+          //     return this.$toast('客户年龄在16周岁以上，不能使用户口本作为有效证件')
+          //   }
+          // } else if (this.userInfo.idType == '3') {
+          //   if (age >= 2) {
+          //     return this.$toast('客户年龄在2周岁及以上，不能使用出生证作为有效证件')
+          //   }
+          // }
          // else if (this.userInfo.idType == '4' && this.userInfo.idNo.length < 3) {
          //   console.log('证件类型是护照')
          //   return this.$toast('护照须大于等于3个字符')
@@ -990,14 +1055,14 @@ export default {
      }
    }
  },
-  beforeDestroy() {
-    //清理计时器
-    console.log('123')
-    window.clearInterval(this.timeId)
-    this.timeId = null
-    this.countDown = 60
-    this.codeDisabled = false
-  },
+  // beforeDestroy() {
+  //   //清理计时器
+  //   console.log('123')
+  //   window.clearInterval(this.timeId)
+  //   this.timeId = null
+  //   this.countDown = 60
+  //   this.codeDisabled = false
+  // },
  watch: {
     'userInfo.relationToInsured': {
      handler(newV, oldV) {
@@ -1008,7 +1073,7 @@ export default {
      },
      immediate: true,
      deep: true
-    }
+    },
  }
 }
 </script>
@@ -1016,6 +1081,10 @@ export default {
 .insured-info-container {
  /deep/.van-checkbox {
    margin-left: auto;
+    align-items: normal;
+    .van-checkbox__icon{
+      margin-top: 5px;
+    }
  }
  /deep/.van-radio {
    margin-left: auto;