ebiz-h5/src/views/ebiz/YB_agentSign/step2.vue

<template>
  <div class='insuranceInformation-container pb50 redRadioCheckbox'>
    <van-notice-bar :scrollable='false' v-if='!Time' class='notice'>
      {{ `提示：阅读时长需在${this.Time ? this.time : this.number}秒以上` }}
    </van-notice-bar>
    <div id="pdf" style="height: 70vh;overflow: scroll;background: #eee;">
      <div id="pdfH5ID"></div>
    </div>
    <van-radio-group v-model='radio' class='pb10 pt20 pl30 fs14'>
      <van-radio name='1' @click='click'>
        本人确认已阅读<span>《国富人寿保险股份有限公司委托代理合同》</span>
      </van-radio>
    </van-radio-group>
    <div class='pt30 pl30 flex align-items-c'>
      <span class='mr10'>代理人签名 :</span>
      <van-button type='danger' size='small' :disabled="signBtnDisable" @click="sign" v-no-more-click='1000'>
        {{signInfo.status == '1' ? '签名' : '已签名' }}
      </van-button>
      <img v-if="signH5Img" :src="signImgUrl" style="height: 34px;margin-left: 20px;width: auto;"/>
    </div>
    <div class='bg-white bottom-btn'>
      <van-button type='danger' size='large' :disabled='isDisabledComplite' @click='goNext' v-no-more-click='1000'>
        提交
      </van-button>
    </div>
    <van-popup v-model="signSuccessShow" :close-on-click-overlay="false" round>
      <div style="width: 300px;height: 150px;text-align: center;">
        <div style="margin-top: 30px;font-size: 20px;">提交结果</div>
        <div style="margin-top: 30px;font-size: 16px;display: flex;justify-content: center;align-items: center;">
          <img src="@/assets/images/ebiz/radio-active.png" style="width: 25px;height: 25px;"/>
          <span style="margin-left: 15px;">签署成功</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
  import { RadioGroup, Radio, Dialog, NoticeBar } from 'vant'
  import config from '@/config'
  import { generateAgreementYB, putContractInfo } from '@/api/ebiz/YB_agentSign/YB_agentSign'
  import Pdfh5 from "pdfh5";
  export default {
    data() {
      let isWeixin = this.$utils.device().isWeixin //判断环境
      return {
        time:'10',
        radio: '',
        number: '',
        src: location.origin + '/pdfjs/web/viewer.html?file=',
        pdfUrl: '',
        signVal: '2',
        base64: '',
        signBtnDisable: true,
        isDisabledComplite:true,
        isOver: false,
        signInfo: {
          status: '1'
        },
        signSuccessShow:false,
        signImgUrl:'data:image/gif;base64,',
        signH5Val: '',
        signH5Img: '',
        pdfh5: null
      }
    },
    components: {
      [RadioGroup.name]: RadioGroup,
      [Radio.name]: Radio,
      [Dialog.name]: Dialog,
      [NoticeBar.name]: NoticeBar
    },
    created(){
      this.timeOut()
    },
    mounted() {
      document.body.style.backgroundColor = '#fff'
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: 'spinner',
        message: '加载中……'
      })
      let dataParams = {
        idType:'0',
        idNo:this.$store.getters.getYBidNo,
        name:this.$store.getters.getYBname
      }
      generateAgreementYB(dataParams).then(res=>{
        this.$toast.clear()
        if(res.result == 0){
          //实例化
          this.pdfh5 = new Pdfh5("#pdfH5ID", {
            pdfurl: config.YB_agenturl + res.content.rgssUrl,
            // pdfurl:  'https://iagentsales-test2.e-guofu.com/opt/ebiz/webapps/ebiz-epolicy/pdf/2023/08/09/1000001078372351/1000001078372351.pdf',
            lazy:false,
            scale:1
          }).on("complete", function (status, msg, time) { //监听完成事件
            console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
          })
          this.signH5Img = JSON.parse(window.sessionStorage.getItem('signH5Img')).val
          if(this.signH5Img){
            this.$set(this.signInfo, 'status', '2')
            this.radio = '1'
            this.Time = true
            this.isOver = true
            this.signImgUrl = this.signImgUrl + this.signH5Img
          }
        }else{
          this.$toast(res.resultMessage)
        }
      })
    },
    methods: {
      // 点击阅读时
      click() {
        let that = this
        if (that.isOver == false) {
          Dialog.confirm({
            title: '提示',
            message: '该内容涉及您的重大权益，请您仔细阅读',
            showCancelButton: false
          }).then(() => {
            that.radio = ''
          })
        }
      },
      timeOut() {
        let that = this
        let time = that.time
        that.Time = false
        that.number = `${time}`
        let timer = setInterval(() => {
          time--
          if (time <= 0) {
            time = 0
            clearInterval(timer)

            that.Time = true
            that.isOver = true
            // window.localStorage.setItem('step', '1')
          }
          that.number = `${time}`
        }, 1000)
      },
      sign() {
        let signInfo = {
          type:'签名-银保代理人电子化合同签署',
          text:this.$store.getters.getYBname,
          keyWord: '乙方锟斤拷：'
        }
        window.sessionStorage.setItem('signInfo',JSON.stringify(signInfo))
        // window.location.href = 'http://'+window.location.host + '/signH5/1.html'
        window.location.href = this.$mainUrl + '/signH5/1.html'
      },
      goNext(){
        let params = {
          uuid:this.$store.getters.getYBuuid,
          signInfo: window.sessionStorage.getItem('signH5Val')
        }
        putContractInfo(params).then(res=>{
          if(res.result == 0){
            window.sessionStorage.clear()
            this.signSuccessShow = true
            window.localStorage.removeItem('signInfo')
          }else{
            this.$toast(res.resultMessage)
          }
        })
      }
    },
    computed: {
      listenChange() {
        const { isOver, radio, signInfo } = this
        return { isOver, radio, signInfo }
      }
    },
    beforeRouteLeave(to, from, next) {
      window.sessionStorage.removeItem('signH5Val')
      document.body.style.backgroundColor = ''
      next()
    },
    watch: {
      listenChange(val) {
        let that = this
        if (that.signVal == '0' || that.signVal == '2') {
          if (val.isOver == true && val.radio != '') {
            that.signBtnDisable = false
          } else {
            that.signBtnDisable = true
          }
          if (that.radio == '1' && val.signInfo.status == '2') {
            that.isDisabledComplite = false
          } else {
            that.isDisabledComplite = true
          }
        }
      }
    }
  }
</script>
<style lang='scss' scoped>
  img {
    width: 100%;
    height: 100%;
  }

  .notice {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 20;
  }

  .iframe {
    width: 100vw;
    height: 70vh;
  }
  #pdfH5ID{
    width: 100vw;
  }
  /deep/.viewerContainer{
    width: 100vw;
    overflow: inherit;
  }
  /deep/ .pageNum{
    display: none!important;
  }
  /deep/ .pageContainer{
    margin: 2vw;
    background: #fff;
    img{
      width: 96vw;
    }
  }
</style>