【国富惠桂保团体医疗保险产品上线金掌桂投保开发需求】支付分享页面被保人写成多个被保人

src/views/ebiz/cardList/GroupCheckInfo.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class='product-detail-container pb50' style='overflow: hidden'>
+    <van-cell-group class='mt10'>
+      <p style='border-bottom: 1px solid #ebedf0' class='fs15 fwb pl10 pv12'>投保人信息</p>
+      <van-field :value='appntInfo.name' label='姓名' name='姓名' readonly />
+      <van-field :value="appntInfo.idType | idToText('insuredIdType')" label='证件类型' name='证件类型' readonly />
+      <van-field :value='appntInfo.idNo' label='证件号码' name='证件号码' readonly />
+      <van-field :value='appntInfo.mobile' label='手机号码' name='手机号码' readonly />
+      <van-field :value='appntInfo.email' label='电子邮箱' name='电子邮箱' readonly />
+      <van-field :value='appntInfo.homeName' label='联系地址' name='联系地址' readonly />
+      <van-field :value='appntInfo.homeAddress' label='详细地址' name='详细地址' readonly />
+    </van-cell-group>
+    <van-cell-group class='mt10'>
+      <p style='border-bottom: 1px solid #ebedf0' class='fs15 fwb pl10 pv12'>产品信息</p>
+      <van-field :value='riskDTO.proScheme' label='保障方案' name='保障方案' readonly />
+      <div class='duty'>
+        <van-field value='保额' label='保险责任' name='保险责任' readonly />
+      </div>
+      <div v-if='riskDTO.dutyLst && riskDTO.dutyLst.length>0'>
+        <div class='duty' v-for='(item, index) in riskDTO.dutyLst' :key='index'>
+          <van-field :value='item.amtContain' :label='item.dutyName' :name='item.dutyName' readonly />
+        </div>
+      </div>
+      <van-field :value="riskDTO.prem+'元'" label='保费' name='保费' readonly />
+      <van-field :value='riskDTO.insuYear + riskDTO.dateCN' label='保险期间' name='保险期间' readonly />
+    </van-cell-group>
+    <!-- <div class='tips'>注：{{ productDate }}</div> -->
+    <van-cell-group class='mt10' v-for="(item, index) in insuredInfo" :key="index">
+      <p style='border-bottom: 1px solid #ebedf0' class='fs15 fwb pl10 pv12'>被保人信息</p>
+      <van-field :value='item.name' label='姓名' name='姓名' readonly />
+      <van-field :value="item.idType | idToText('insuredIdType')" label='证件类型' name='证件类型' readonly />
+      <van-field :value='item.idNo' label='证件号码' name='证件号码' readonly />
+      <!-- <van-field v-if='item.isLessEighteen' :value='item.mobile' label='手机号码' name='手机号码' readonly /> -->
+      <!-- <van-field v-if='item.isLessEighteen' :value='item.email' label='电子邮箱' name='电子邮箱' readonly /> -->
+      <van-field :value='item.homeName' label='联系地址' name='联系地址' readonly />
+      <van-field :value='item.homeAddress' label='详细地址' name='详细地址' readonly />
+    </van-cell-group>
+    <van-cell-group class='mt10'>
+      <p style='border-bottom: 1px solid #ebedf0' class='fs15 fwb pl10 pv12'>受益人信息</p>
+      <van-field readonly v-model='bnfTypeVal' clearable label='受益人类型' v-validate="'required'"
+                 style='border-bottom: 1px solid #ebedf0' />
+    </van-cell-group>
+    <van-goods-action style='z-index: 99'>
+      <van-button type='default' style='width: 50%; font-size: 14px; height: 40px; background: white'>总保费:<span
+        style='color: red; font-weight: bold; font-size: 18px; font-weight: 400'>{{
+          riskDTO.prem }}</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>
+  </div>
+</template>
+
+<script>
+import { Field, GoodsAction, GoodsActionIcon, GoodsActionButton, Icon } from 'vant'
+import { getOrderDetail, information, underWrite } from '@/api/ebiz/sale/sale'
+import getAreaName from '@/assets/js/utils/getAreaNameForSale'
+import afterDate from '@/assets/js/utils/getAfterDate.js'
+import utilsAge from '@/assets/js/utils/age'
+
+export default {
+  name: 'cardDetail',
+  components: {
+    [Field.name]: Field,
+    [GoodsAction.name]: GoodsAction,
+    [GoodsActionIcon.name]: GoodsActionIcon,
+    [GoodsActionButton.name]: GoodsActionButton,
+    [Icon.name]: Icon
+  },
+  computed: {
+    orderDTO: {
+      get() {
+        return JSON.parse(sessionStorage.orderDetail)
+      }
+    }
+  },
+  data() {
+    return {
+      activeName: ['1'],
+      appntInfo: {},
+      insuredInfo: {},
+      bnfTypeVal: '法定受益人', //受益人类型文字展示
+      riskDTO: {},
+    //   productDate: '',
+    //   isLessEighteen: true   // 被保人手机号和邮箱默认展示
+    }
+  },
+  created() {
+    this.appntInfo = this.orderDTO.appntDTO
+    this.appntInfo.homeName = getAreaName([{ code: this.appntInfo.homeProvince }, { code: this.appntInfo.homeCity }, { code: this.appntInfo.homeArea }])
+    this.insuredInfo = this.orderDTO.insuredDTOs
+    this.insuredInfo.forEach(item => {
+       item.homeName = getAreaName([{ code: item.homeProvince }, { code: item.homeCity }, { code: item.homeArea }])
+    //    if (item.birthday) {
+    //         let age = utilsAge.getAge(item.birthday, new Date())
+    //         if (age <= 17) {
+    //             item.isLessEighteen = false  //是否小于18周岁（不含）
+    //         } else {
+    //             item.isLessEighteen = true  //是否小于18周岁（不含）
+    //         }
+    //    }
+    })
+    
+    // let insuYear = (this.riskDTO = this.orderDTO.insuredDTOs[0].riskDTOLst[0])
+    // if (this.riskDTO.dutyLst && this.riskDTO.dutyLst.length > 0) {
+    //   this.riskDTO.dutyLst.forEach(val => {
+    //     if (val.dutyCode === 'C006') {
+    //       val.amtContain = val.amt + '元/天'
+    //     } else {
+    //       val.amtContain = val.amt + '元'
+    //     }
+    //   })
+    // }
+    // let currentDataArr = insuYear.cvaliDate.split('-')
+    // let currentData = currentDataArr[0] + '年' + currentDataArr[1] + '月' + currentDataArr[2] + '日'
+    // let insuYearM, productDate, productDateTime, insuYearD, hoDate
+
+    // switch (insuYear.insuYearFlag) {
+    //   case 'D':
+    //     this.riskDTO.dateCN = '天'
+    //     hoDate = Date.parse(insuYear.cvaliDate) / 1000 + (insuYear['insuYear'] - 1) * 24 * 3600
+    //     break
+    //   case 'Y':
+    //     this.riskDTO.dateCN = '年'
+    //     hoDate = Date.parse(insuYear.cvaliDate) / 1000 + insuYear['insuYear'] * 24 * 3600 * (afterDate.isLeapYear(new Date(insuYear.cvaliDate).getFullYear()) - 1)
+    //     break
+    // }
+    // productDate = new Date(parseInt(hoDate) * 1000)
+    // insuYearM = productDate.getMonth() + 1 < 10 ? '0' + (productDate.getMonth() + 1) : productDate.getMonth() + 1
+    // insuYearD = productDate.getDate() < 10 ? '0' + productDate.getDate() : productDate.getDate()
+    // productDateTime = productDate.getFullYear() + '年' + insuYearM + '月' + insuYearD + '日'
+    // this.productDate = currentData + '0时至' + productDateTime + '24时止'
+  },
+  methods: {
+    nextStep() {
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#/cardList/SignatureConfirmation`
+        },
+        routerInfo: {
+          path: `/cardList/SignatureConfirmation`
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang='scss'>
+.product-detail-container .van-collapse-item__content {
+  padding: 0 15px;
+}
+
+.tips {
+  font-size: 14px;
+  color: #333;
+  padding: 15px;
+}
+
+.duty {
+  .van-field__label {
+    width: 60vw;
+  }
+
+  .van-field__control {
+    text-align: center;
+  }
+}
+</style>

src/views/ebiz/cardList/GroupPayMent.vue

@@ -5,7 +5,9 @@
         <van-field v-model="underWriteData.riskName" type="textarea" autosize readonly label="产品名称：" class="projuct" />
         <van-field v-model="underWriteData.schemeName" readonly label="保障方案：" class="projuct" />
         <van-field v-if="!isWeixin" v-model="underWriteData.appntName" readonly label="投保人姓名：" class="projuct" />
-        <van-field v-if="!isWeixin" v-model="underWriteData.insuredName" readonly label="被保人姓名：" class="projuct" />
+        <div v-for="(item, index) in underWriteData.insuredName" :key="index">
+           <van-field v-if="!isWeixin" v-model="item.name" readonly label="被保人姓名：" class="projuct" />
+        </div>
         <van-field :value="underWriteData.orderAmount == undefined ? '' : `${underWriteData.orderAmount} 元`" readonly label="支付金额：" />
       </van-cell-group>
       <!-- 银行卡支付开始 -->
@@ -295,7 +297,7 @@ export default {
       this.underWriteData = {
         riskName: orderDetail.insuredDTOs[0].riskDTOLst[0].riskName,
         appntName: orderDetail.appntDTO.name,
-        insuredName: orderDetail.insuredDTOs[0].name,
+        insuredName: orderDetail.insuredDTOs,
         orderAmount: orderDetail.insuredDTOs[0].riskDTOLst[0].prem,
         schemeName: orderDetail.insuredDTOs[0].riskDTOLst[0].proScheme,
         idType: orderDetail.appntDTO.idType,
@@ -524,7 +526,7 @@ export default {
           this.underWriteData = {
             riskName: res.orderDTO.insuredDTOs[0].riskDTOLst[0].riskName,
             appntName: res.orderDTO.appntDTO.name,
-            insuredName: res.orderDTO.insuredDTOs[0].name,
+            insuredName: res.orderDTO.insuredDTOs,
             // bankName: res.orderDTO.orderAccountDTO.bankCode,
             // bankCode: res.orderDTO.orderAccountDTO.cardBookCode,
             // cardBookCode: res.orderDTO.orderAccountDTO.cardBookCode,
@@ -551,7 +553,7 @@ export default {
             accountName: '',
             riskName: '',
             appntName: '',
-            insuredName: '',
+            insuredName: [],
             idType: '',
             bankCode: '',
             bankName: '',