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>
    <iframe :src='src + pdfUrl' class='iframe'></iframe>
    <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>
      <div v-if="signVal == '0' || signVal == '2'">
        <van-button type='danger' size='small' :disabled="signVal == '1' ? true : isDisable" @click="sign('0')" v-no-more-click='1000'>
          {{appntSign.documentStatus == '2' ? '签名' : '已签名' }}
        </van-button>
      </div>
    </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>
  </div>
</template>
<script>
  import { RadioGroup, Radio, Dialog, NoticeBar } from 'vant'
  import config from '@/config'
  export default {
    data() {
      let isWeixin = this.$utils.device().isWeixin //判断环境
      return {
        time:'10',
        radio: '',
        number: '',
        src: location.origin + '/pdfjs/web/viewer.html?file=',
        pdfUrl: '',
      }
    },
    components: {
      [RadioGroup.name]: RadioGroup,
      [Radio.name]: Radio,
      [Dialog.name]: Dialog,
      [NoticeBar.name]: NoticeBar
    },
    created(){
      this.timeOut()
    },
    mounted() {
      document.body.style.backgroundColor = '#fff'
    },
    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)
      },
    },
    computed: {

    },
    watch: {

    },

    beforeRouteLeave(to, from, next) {
      document.body.style.backgroundColor = ''
      next()
    }
  }
</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;
  }
</style>