ebiz-h5/src/views/ebiz/insureAgain/index.vue

<template>
  <div>
    <van-search v-model="searchName" placeholder="请输入保单号/投保人姓名/被保险人姓名" />
    <van-sticky>
      <van-tabs v-model="active" @change="tabChange">
        <van-tab name="uncommit" title="未提交" />
        <van-tab name="commit" title="已提交" />
      </van-tabs>
    </van-sticky>
    <div class="container" v-if="isShow">
      <van-pull-refresh @refresh="onRefresh" v-model="isLoading">
        <div v-if="NewItems.length>0">
          <Order v-for="(order,index) in NewItems" :key="index" :order="order">
            <p v-if="active === 'uncommit'" class="name mb8">
              <van-tag plain color="#999999">保单保障日截止日期</van-tag>
              <span class="ml5 span">{{ order.expiryDate }}</span>
            </p>
            <div v-if="active === 'commit'">
              <p class="name mb8">
                <van-tag plain color="#999999">重新投保单号</van-tag>
                <span class="ml5 span">{{ order.policyNo }}</span>
              </p>
              <p class="name">
                <van-tag plain color="#999999">状态</van-tag>
                <span class="ml5 span" v-if="order.orderStatus === '0'">投保中</span>
                <span class="ml5 span" v-else-if="order.orderStatus === '1'">承包</span>
                <span class="ml5 span" v-else-if="order.orderStatus === '4'">终止</span>
              </p>
            </div>

            <template #btns>
              <div v-if="active === 'uncommit'">
                <van-button size="small" round type="danger" @click="uncommitInsureDetail(order)" plain>查看详情</van-button>
                <van-button class="ml10" size="small" round type="danger" @click="insureAgain(order)">重新投保</van-button>
              </div>
              <div v-if="active === 'commit'">
                <van-button class="ml10" size="small" round type="danger" @click="commitInsureDetail(order)">查看投保单</van-button>
                <van-button v-if="order.newOrderStatus === '19'" class="ml10" size="small" round type="danger" @click="buyAgain(order)">待支付</van-button>
              </div>
            </template>
          </Order>
        </div>
      </van-pull-refresh>
      <van-popup v-model="isAgreementShow" position="right" :style="{ height: '100vh', width: '100vw' }">
        <ReadingAgreement :needTime="false">
          <h3 class="p10" style="text-align:center">重新投保声明提示</h3>
          <p style="text-indent:28px;">尊敬的{{orderInfo.appntName}}{{orderInfo.appntSex === 0 ? '先生':'女士'}}</p>
          <div class="p10" v-if="orderInfo.riskCode !== 'GFRS_A0008'">
            <p style="text-indent:28px;">
              您好！您于{{orderInfo.cvaliDate}}投保的保单号为{{orderInfo.policyNo}}的国富人寿国富民惠医疗保险（2020版）保单即将到期（到期日期详见保单，以下简称旧保单），为保护您的权益，即日起至{{orderInfo.expiryDate}}后第60天期间，您可以选择重新投保国富人寿国富民惠医疗保险（2020版），本次申请投保的国富人寿国富民惠医疗保险（2020版）保单以下简称新保单，请您仔细阅读以下内容：
            </p>
            <p style="text-indent:28px;">
              1.国富人寿国富民惠医疗保险（2020版）合同保险期间为一年，到期后需要重新投保。
            </p>
            <p style="text-indent:28px;">
              2.本次重新投保，我们将按照国富人寿国富民惠医疗保险（2020版）费率表中的“在上一保险期间届满后60日内申请重新投保时对应的费率”计算保费。
            </p>
            <p style="text-indent:28px;">
              3.若本次重新投保成功，新保单免除等待期。
            </p>
            <p style="text-indent:28px;">
              4.本次重新投保仅限于无其他补充告知的情况，若您有其他补充告知，您的条件不符合本重新投保流程。请您联系保单服务专员，通过新增投保单进行投保申请。
            </p>
            <p style="text-indent:28px;">
              5.若您于旧保单满期前申请重新投保，且于满期前成功支付保险费，则新保单在旧保单保险期满日对应日的次日零时生效，旧保单在保险期满日24时终止。若您于旧保单满期后60天（包含）内重新投保申请，且成功支付保险费，则新保单于支付次日零时生效，旧保单在保险期满日24时终止。
            </p>
            <p style="text-indent:28px;">
              6.若您未在旧保单满期后60天（包含）内申请重新投保，则您的重新投保资格将被取消。后续您可再次申请投保，但新单不再与旧保单关联，需重新计算等待期。具体详情，可咨询保单服务专员。
            </p>
          </div>
          <div class="p10" v-else>
            <p style="text-indent:28px;">
              您好！您于{{orderInfo.cvaliDate}}投保的保单号为{{orderInfo.policyNo}}的国富人寿国富民惠医疗保险（2020版）保单即将到期（到期日期详见保单，以下简称旧保单），为保护您的权益，即日起至{{orderInfo.expiryDate}}后第60天期间，您可以选择重新投保国富人寿国富民惠医疗保险（2020版），本次申请投保的国富人寿国富民惠医疗保险（2020版）保单以下简称新保单，请您仔细阅读以下内容：
            </p>
            <p style="text-indent:28px;">
              1.国富人寿国富民惠医疗保险（2020版）合同保险期间为一年，到期后需要重新投保。
            </p>
            <p style="text-indent:28px;">
              2.本次重新投保，我们将按照国富人寿国富民惠医疗保险（2020版）费率表中的“在上一保险期间届满后60日内申请重新投保时对应的费率”计算保费。
            </p>
            <p style="text-indent:28px;">
              3.若本次重新投保成功，新保单免除等待期。
            </p>
            <p style="text-indent:28px;">
              4.本次重新投保仅限于无其他补充告知的情况，若您有其他补充告知，您的条件不符合本重新投保流程。请您联系保单服务专员，通过新增投保单进行投保申请。
            </p>
            <p style="text-indent:28px;">
              5.若您于旧保单满期前申请重新投保，且于满期前成功支付保险费，则新保单在旧保单保险期满日对应日的次日零时生效，旧保单在保险期满日24时终止。若您于旧保单满期后60天（包含）内重新投保申请，且成功支付保险费，则新保单于支付次日零时生效，旧保单在保险期满日24时终止。
            </p>
            <p style="text-indent:28px;">
              6.若您未在旧保单满期后60天（包含）内申请重新投保，则您的重新投保资格将被取消。后续您可再次申请投保，但新单不再与旧保单关联，需重新计算等待期。具体详情，可咨询保单服务专员。
            </p>
            <p style="text-indent:28px;">
              7.国富人寿附加住院医疗保险已停售，您可选择投保同类产品国富人寿附加住院医疗保险（B款），我们将按照国富人寿附加住院医疗保险（B款）费率表中的“在上一保险期间届满后60日内申请重新投保时对应的费率”计算保费。
            </p>
          </div>
          <template #action>
            <van-radio-group class="m10" v-model="radio">
              <van-radio :name="false">
                <span style="font-size: 14px;">本人已阅读、知晓本投保声明内容，同意重新投保</span>
              </van-radio>
            </van-radio-group>
            <div class="btns">
              <van-button type="danger" :disabled="radio" block @click="nextStep">下一步</van-button>
            </div>
          </template>
        </ReadingAgreement>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { Search, Sticky, PullRefresh, list, Tag, Popup, Radio, RadioGroup, Toast } from 'vant'
import { getPolicyListAgent } from '@/api/ebiz/insureAgain/insureAgain'
import { formatRiskList } from '@/assets/js/utils/formatRiskList.js'
import dataDictionary from '@/assets/js/utils/data-dictionary' //根据数据字典找到用户等级
import Order from '@/components/ebiz/insureAgain/Order'
import ReadingAgreement from '@/components/ebiz/insureAgain/ReadingAgreement'
import CacheUtils from '@/assets/js/utils/cacheUtils'
import { getReAppntPolicy } from '@/api/ebiz/insureAgain/insureAgain'
export default {
  name: 'InsureAgain',
  components: {
    Order,
    ReadingAgreement,
    [Search.name]: Search,
    [Sticky.name]: Sticky,
    [PullRefresh.name]: PullRefresh,
    [list.name]: list,
    [Tag.name]: Tag,
    [Popup.name]: Popup,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio
  },
  data() {
    return {
      searchName: '', //搜索名
      active: 'uncommit',
      policyListDTOList: [],
      isAgreementShow: false,
      radio: '',
      isLoading: false,
      isShow: false,
      orderInfo: {}
    }
  },
  computed: {
    NewItems() {
      var NewItems = []
      // let item1 = ['1','4','0'];
      // let item2 = ['19','38','39','40'];
      // let item3 = ['1','2','3'];
      // let item4 = ['0','1','2','3','4'];
      this.policyListDTOList.map(item => {
        if (item.riskName.search(this.searchName) != -1 || item.policyNo.search(this.searchName) != -1 || item.appntName.search(this.searchName) != -1) {
          // item.policyNo = '23424333333331';
          // item.orderStatus = item1[Math.floor(Math.random()*item1.length)];
          // item.newOrderNo = '32422222222222234';
          // item.newOrderStatus = item2[Math.floor(Math.random()*item2.length)];
          // item.reInsuranceFlag = '3';
          // item.reInsuranceState = item4[Math.floor(Math.random()*item4.length)];

          if (this.active === 'uncommit' && item.reInsuranceFlag === '3' && item.reInsuranceState === '0') {
            if (item.newOrderStatus === '' || item.newOrderStatus === '02' || item.newOrderStatus === '05' || item.newOrderStatus === '06' || item.newOrderStatus === '08' || item.newOrderStatus === '38' || item.newOrderStatus === '39' || item.newOrderStatus === '40' ) {
              NewItems.push(item)
            }
          } else if(this.active === 'commit' && item.reInsuranceFlag === '3' && (item.reInsuranceState === '1' || item.reInsuranceState === '2' || item.reInsuranceState === '3')){
            if (item.newOrderStatus === '07' || item.newOrderStatus === '19' || item.newOrderStatus === '55') {
              NewItems.push(item)
            }
          }

          // NewItems.push(item)
        }
      })
      console.log(NewItems, '======================NewItems===================')
      return NewItems
    }
  },
  created() {
    let data = {}
    this.getPolicyListAgent(data)
  },
  mounted() {
    setTimeout(() => {
      window.EWebBridge.webCallAppInJs('webview_left_button', {
        intercept: '1' //是否拦截原生返回事件 1是 其他否
      })
    }, 100)
    window.appCallBack = this.appCallBack
  },
  methods: {
    appCallBack(data) {
      if (data.trigger == 'left_button_click') {
        if (this.isAgreementShow) {
          this.isAgreementShow = false
          setTimeout(() => {
            window.EWebBridge.webCallAppInJs('webview_left_button', {
              intercept: '1'
            })
          }, 100)
        } else {
          this.$jump({
            flag: 'service'
          })
        }
      }
    },
    tabChange(name) {
      this.active = name
    },
    //初始化保单列表
    getPolicyListAgent(pageInfo) {
      getPolicyListAgent(pageInfo).then(res => {
        if (res.result == '0') {
          this.policyListDTOList = res.policyListDTOList
          this.isShow = true
        } else {
          this.errMessage = res.resultMessage || '暂无保单'
        }
      })
    },
    insureAgain(order) {
      this.orderInfo = order
      CacheUtils.setLocItem('policyNo', order.policyNo)
      setTimeout(() => {
        window.EWebBridge.webCallAppInJs('webview_left_button', {
          img: this.$assetsUrl + 'images/del-close-btn@3x.png',
          intercept: '1' //是否拦截原生返回事件 1是 其他否
        })
      }, 100)
      // 人脸识别
      // window.EWebBridge.webCallAppInJs('face_auth', {
      //       businessSource: '1', //业务来源:1-电投，2-入司，3-理赔，4-保全
      //       number: that.saleInsuredInfo.idNo, //身份证号码
      //       name: order.appntName //姓名
      //     }).then(data => {
      //       if (JSON.parse(data).state == '1') {
      //         this.isAgreementShow = true
      //       } else {
      //         return this.$toast('人脸识别，验证失败！')
      //       }
      //     })
      if (order.orderStatus === '38') {
        let url = '/insureAgain/ProductInformation'
      } else if (order.orderStatus === '39') {
        let url = '/insureAgain/Notification'
      } else if (order.orderStatus === '40') {
        let url = '/insureAgain/SignatureConfirmation'
      } else {
        getReAppntPolicy({ policyNo: order.policyNo }).then(res => {
          if (res.result == 0) {
            //投保人信息返显
            CacheUtils.setLocItem('orderDetailData', JSON.stringify(res))
            let appntDTO = res.orderDTO.appntDTO
            let insuredDTOs = res.orderDTO.insuredDTOs[0]
            let orderInfoDTO = res.orderDTO.orderInfoDTO
            let riskDTOLst = insuredDTOs.riskDTOLst
            this.orderInfo.appntName = appntDTO.name
            this.orderInfo.cvaliDate = orderInfoDTO.cvaliDate
            this.orderInfo.expiryDate = orderInfoDTO.expiryDate
            this.orderInfo.riskCode = ''
            riskDTOLst.forEach((element, index) => {
              if (element.riskCode === 'GFRS_A0008') {
                this.orderInfo.riskCode = 'GFRS_A0008'
              }
            })
          } else {
            this.$toast(res.resultMessage)
          }
        })
        this.isAgreementShow = true
        return false
      }

      this.$jump({
        flag: 'h5',
        extra: {
          url: location.origin + '/#' + url
        },
        routerInfo: {
          path: url
        }
      })
    },
    uncommitInsureDetail(order) {
      CacheUtils.setLocItem('policyNo', order.policyNo)
      this.$jump({
        flag: 'h5',
        extra: {
          url: location.origin + '/#/insureAgain/UncommitInsureDetail'
        },
        routerInfo: {
          path: '/insureAgain/UncommitInsureDetail'
        }
      })
    },
    commitInsureDetail(order) {
      CacheUtils.setLocItem('orderNo', order.newOrderNo)
      this.$jump({
        flag: 'h5',
        extra: {
          url: location.origin + '/#/insureAgain/CommitInsureDetail'
        },
        routerInfo: {
          path: '/insureAgain/CommitInsureDetail'
        }
      })
    },
    nextStep() {
      this.$jump({
        flag: 'h5',
        extra: {
          url: location.origin + `/#/insureAgain/InsureInformation`,
          forbidSwipeBack: '1',
          needRefresh: '1'
        },
        routerInfo: { path: `/insureAgain/InsureInformation` }
      })
    },
    onRefresh() {
      this.isLoading = false
      console.log(345435)
      this.policyListDTOList = []
      let data = {}
      this.getPolicyListAgent(data)
    }
  }
}
</script>

<style lang="scss" scoped></style>