ebiz-h5/src/views/ebiz/cardList/GroupCheckInfo.vue

<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.homeName' label='联系地址' name='联系地址' readonly v-if="appntInfo.homeName"/>
      <van-field :value='appntInfo.homeAddress' label='' name='详细地址' readonly v-if="appntInfo.homeAddress"/>
    </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.riskName' label='保障方案' name='保障方案' readonly />
      <van-field class="dutyAmt" value='保额' label='保险责任' name='保险责任' readonly input-align="right"/>
      <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.amt/10000 +'万'" :label='item.dutyName' :name='item.dutyName' readonly />
        </div>
      </div>
      <van-field :value="orderInfoDTO.orderAmount+'元'" label='保费' name='保费' readonly />
      <van-field :value='productDate' type="textarea" rows="1" 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-collapse  v-model="activeNames" :border="false">
        <van-collapse-item :name="index" v-for="(item, index) in insuredInfo" :key="index" :border="false">
          <template #title>
            <div>被保险人姓名<span class="ml20">{{item.name}}</span></div>
          </template>
          <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 v-if="item.homeName" />
          <van-field :value='item.homeAddress' label='' name='详细地址' readonly v-if="item.homeAddress"/>
          <van-field :value='bnfTypeVal' label='受益人类型' name='受益人类型' readonly />
        </van-collapse-item>
      </van-collapse>
    </van-cell-group>
    <van-goods-action style='z-index: 99'>
      <van-button type='default' style='width: 50%; font-size: 14px; height: 50px; background: white;line-height: 20px;'>
        <div style='color: red;' v-if="orderInfoDTO.orderAmount != orderInfoDTO.orderStandAmount">
        折后总保费:<span
        style='font-weight: bold; font-size: 18px; font-weight: 400'>{{
          orderInfoDTO.orderAmount }}</span>元</div>
        总保费:<span style='color: red; font-weight: bold; font-size: 18px; font-weight: 400'>{{
          orderInfoDTO.orderStandAmount }}</span>元
      </van-button>
      <van-goods-action-button type='danger' text='确认' @click='nextStep' v-no-more-click='1000'
                               style='border-radius: 0em; width: 50%; height: 50px;margin:0px' />
    </van-goods-action>
  </div>
</template>

<script>
  import {Field, GoodsAction, GoodsActionIcon, GoodsActionButton, Icon, Collapse, CollapseItem, Dialog} from 'vant'
import {cardOrderDetail } from '@/api/ebiz/cardList/cardList.js'
import getAreaName from '@/assets/js/utils/getAreaNameForSale'
import afterDate from '@/assets/js/utils/getAfterDate.js'

export default {
  name: 'GroupCheckInfo',
  components: {
    [Field.name]: Field,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionIcon.name]: GoodsActionIcon,
    [GoodsActionButton.name]: GoodsActionButton,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Icon.name]: Icon
  },
  data() {
    return {
      activeNames: [], //折叠面板
      appntInfo: {},
      insuredInfo: {},
      bnfTypeVal: '法定受益人', //受益人类型文字展示
      riskDTO: {},
      productDate: '',
      orderInfoDTO:{},
      isGroupCard:'',
      mainRiskCode: ''
    //   isLessEighteen: true   // 被保人手机号和邮箱默认展示
    }
  },
  created() {
    if (this.$route.query.cardOrderNo) {
      this.cardOrderNo = this.$route.query.cardOrderNo
    }
      
  },
  mounted() {
    //根据后台数据来展示
    let cardInfoDTO = {
      orderNo: this.cardOrderNo
    }
    cardOrderDetail(cardInfoDTO).then(res => {
      if (res.result == '0') {
        this.appntInfo = res.orderDTO.appntDTO
        this.appntInfo.homeName = getAreaName([{ code: this.appntInfo.homeProvince }, { code: this.appntInfo.homeCity }, { code: this.appntInfo.homeArea }])
        this.orderInfoDTO = res.orderDTO.orderInfoDTO
        this.insuredInfo = res.orderDTO.insuredDTOs
        this.insuredInfo.forEach(item => {
          item.riskDTOLst.forEach(ii=>{
            if(ii.isMainRisk == '0'){
              this.mainRiskCode = ii.mainRiskCode
            }
          })
          item.homeName = getAreaName([{ code: item.homeProvince }, { code: item.homeCity }, { code: item.homeArea }])
        })
        // this.riskDTO = res.orderDTO.insuredDTOs[0].riskDTOLst[0]
        let insuYear = (this.riskDTO = res.orderDTO.insuredDTOs[0].riskDTOLst[0])
        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 + '日'
        productDateTime = afterDate.getAfterDateTime(currentDataArr,1)
        this.productDate = currentData + '0时至' + productDateTime + '24时止，共'+ this.riskDTO.insuYear + this.riskDTO.dateCN
        // isGroupCard 1 团险标识
        this.isGroupCard = res.orderDTO.orderInfoDTO.isGroupCard
      }
    })  
  },
  methods: {
    nextStep() {
      if(this.mainRiskCode == 'GFRS_M0058'){
        Dialog.alert({
          title: '特别提醒',
          messageAlign: 'left',
          confirmButtonText: '确认',
          message: `2023年9月1日起生效的惠桂保保单，不能参保的5类既往症中增加了“神经性耳聋”，敬请注意！`,
        })
        .then(() => {
          this.$jump({
            flag: 'h5',
            extra: {
              url: location.origin + `/#/cardList/SignatureConfirmation?isGroupCard=`+this.isGroupCard
            },
            routerInfo: {
              path: `/cardList/SignatureConfirmation?isGroupCard=`+this.isGroupCard
            }
          })
        })
        .catch(() => {
        })
      }else{
        this.$jump({
          flag: 'h5',
          extra: {
            url: location.origin + `/#/cardList/SignatureConfirmation?isGroupCard=`+this.isGroupCard
          },
          routerInfo: {
            path: `/cardList/SignatureConfirmation?isGroupCard=`+this.isGroupCard
          }
        })
      }
    }
  }
}
</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;
  }
}
  .dutyAmt{
    .van-field__label {
      width: 60vw;
    }

    .van-field__control {
      text-align: center;
    }
  }
</style>