ebiz-h5/src/views/ebiz/cardList/cardDetail.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.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='insuredInfo.name' label='姓名' name='姓名' readonly />
      <van-field :value="insuredInfo.idType | idToText('insuredIdType')" label='证件类型' name='证件类型' readonly />
      <van-field :value='insuredInfo.idNo' label='证件号码' name='证件号码' readonly />
      <van-field v-if='isLessEighteen' :value='insuredInfo.mobile' label='手机号码' name='手机号码' readonly />
      <van-field v-if='isLessEighteen' :value='insuredInfo.email' label='电子邮箱' name='电子邮箱' readonly />
      <van-field :value='insuredInfo.homeName' label='联系地址' name='联系地址' readonly />
      <van-field :value='insuredInfo.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-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-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'>{{
          orderAmount }}</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: '',
      orderAmount:0,
      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[0]
    this.insuredInfo.homeName = getAreaName([{ code: this.insuredInfo.homeProvince }, { code: this.insuredInfo.homeCity }, { code: this.insuredInfo.homeArea }])
    if (this.insuredInfo.birthday) {
      let age = utilsAge.getAge(this.insuredInfo.birthday, new Date())
      if (age <= 17) {
        this.isLessEighteen = false  //是否小于18周岁（不含）
      } else {
        this.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 + '日'
    productDateTime = afterDate.getAfterDateTime(insuYear.cvaliDate,1)
    this.productDate = currentData + '0时至' + productDateTime + '24时止'
    this.orderAmount = this.orderDTO.orderInfoDTO.orderAmount
  },
  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>