ebiz-h5/src/views/ebiz/agentEenter/Paction.vue

<template>
  <div>
    <van-notice-bar :scrollable="false" v-if="!Time" class="notice">{{ `提示：阅读时长需在${time}秒以上` }}</van-notice-bar>
    <iframe :src="src + pdfUrl" class="iframe"></iframe>
    <div class="fixed bottom0 left0 bg-white" style="width:100%">
      <van-radio-group v-model="radio" class="pb10 pt20 pl30">
        <van-radio name="1" @click="click" class="fs12">
          本人确认已阅读
          <span class="blue">《个险销售人员代理合同》</span>
        </van-radio>
      </van-radio-group>
      <div class="pl30 pb15">
        本人签字：
        <van-button type="danger" size="small" @click="sign" :disabled="isDisable" v-no-more-click="1000">{{
          appntSign.signState == '0' ? '签名' : '已签名'
        }}</van-button>
      </div>
      <van-button type="danger" size="large" :disabled="isDisabledComplite" v-no-more-click="1000" @click="finish">下一步</van-button>
    </div>
  </div>
</template>

<script>
import { Field, Icon, Button, Radio, RadioGroup, NoticeBar, Dialog } from 'vant'
import { agreementQuery, signAgreement } from '@/api/ebiz/agentEenter/agentEenter.js'
import config from '@/config'
import { filtSignList, getAgreementNextPagePath } from './js/methods'

export default {
  data() {
    return {
      src: location.origin + '/pdfjs/web/viewer.html?file=',
      pdfUrl: '',
      checked: false,
      // 定时器时间
      time: '10',
      // 定时器名称
      timer: null,
      isOver: false,
      // 判断验证码是否开始倒计时
      Time: false,
      // 签名是否可以点击
      isDisable: true,
      // 是否可以点击下一步
      isDisabledComplite: true,
      // 是否签名 true 签名 false 未签名
      isSign: false,
      //协议list
      signList: [],
      //当前页面协议签署后下一页路由
      nextPagePath: '',
      //签署人 0-申请人 1-担保人
      code: '',
      //推荐人信息
      agentInfo: {},
      // 推荐人签名信息
      appntSign: {
        signState: '0'
      },
      radio: '',
      //原生返回的加密包
      base64: ''
    }
  },
  components: {
    [Field.name]: Field,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Radio.name]: Radio,
    [RadioGroup.name]: RadioGroup,
    [NoticeBar.name]: NoticeBar,
    [Dialog.name]: Dialog
  },
  created() {
    if (!this.Time) {
      this.timeOut()
    }
    this.agreementQuery()
    this.code = this.$route.query.code
  },
  methods: {
    //获取签署协议人信息
    agreementQuery() {
      let that = this
      let data = {}
      that.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: 'spinner',
        message: '加载中……'
      })
      agreementQuery(data).then(res => {
        console.log(res)
        if (res.result == '0') {
          this.$toast.clear()
          that.signList = res.content.ebizAgreementDtoList
          res.content.ebizAgreementDtoList.map(item => {
            console.log(item)
            if (item.type == '14') {
              that.appntSign = item
            }
          })
          filtSignList(that, that.signList)
          that.nextPagePath = getAgreementNextPagePath(that.signList, that.code, that.appntSign)
          that.pdfUrl = encodeURIComponent(config.imgDomain + `/returnDirectStream?imgPath=${that.appntSign.rgssUrl}`)
        } else {
          this.$toast(res.resultMessage)
        }
      })
    },
    timeOut() {
      let timer = setInterval(() => {
        this.time--
        if (this.time <= 0) {
          this.time = 0
          clearInterval(timer)
          this.Time = true
          this.isOver = true
        }
      }, 1000)
    },
    // 点击阅读时
    click() {
      let that = this
      if (that.isOver == false) {
        Dialog.confirm({
          title: '提示',
          message: '该内容涉及您的重大权益，请您仔细阅读',
          showCancelButton: false
        }).then(() => {
          that.radio = ''
        })
      }
    },
    sign() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: 'spinner',
        message: '加载中……'
      })
      // eslint-disable-next-line no-undef
      EWebBridge.webCallAppInJs('ca_sign', {
        //身份证号码
        number: localStorage.idNo,
        //姓名
        name: localStorage.idName,
        //身份证号码id
        type: '1',
        keyword: '本合同履行期间，本人保证不从事与代',
        pageNo: '1',  //第几页的关键字
        index: '2',  //第几页的第几个关键字
        offset: '185',  //对应关键字方向偏移
        pos: '2',  //关键字方向 1:Center，2:lower，3:right，4:lower-right
        signatureWidth: this.$utils.signParams().signatureWidth,
        signatureHeight: this.$utils.signParams().signatureHeight
      }).then(data => {
        this.$toast.clear()
        if (JSON.parse(data).state == '1') {
          this.base64 = decodeURI(JSON.parse(data).sign)
          this.appntSign.signState = '1'
          this.isDisabledComplite = false
          this.isSign = false
        }
      })
    },
    finish() {
      if (this.$route.query.isChange && !this.base64) {
        this.goBack()
      } else {
        let that = this
        let data = {
          baseEncryp: that.base64,
          ebizAgreementDto: that.appntSign
        }
        that.$toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true, // 禁用背景点击
          loadingType: 'spinner',
          message: '加载中……'
        })
        signAgreement(data).then(res => {
          console.log(res)
          if (res.result == '0') {
            this.$toast.clear()
            if (this.$route.query.isChange) {
              this.goBack()
            } else {
              this.$jump({
                flag: 'h5',
                extra: {
                  url: location.origin + `/#/agentEenter/${that.nextPagePath}?code=${that.code}`,
                  forbidSwipeBack: '1',
                  pullRefresh: that.nextPagePath == 'signContract' ? '1' : '0'
                },
                routerInfo: {
                  path: `/agentEenter/${that.nextPagePath}?code=${that.code}`
                }
              })
            }
          } else {
            this.$toast(res.resultMessage)
          }
        })
      }
    },
    goBack() {
      this.$jump({
        flag: 'goBack',
        extra: {
          refresh: '1',
          index: '-1',
          forbidSwipeBack: '1'
        },
        routerInfo: {
          type: 2,
          index: -1,
          path: `/agentEenter/signContract`
        }
      })
    }
  },
  computed: {
    listenChange() {
      const { isOver, radio, appntSign } = this
      return { isOver, radio, appntSign }
    }
  },
  watch: {
    listenChange(val) {
      let that = this
      if (val.isOver == true && val.radio != '') {
        that.isDisable = false
      } else {
        that.isDisable = true
      }

      if (that.radio == '1' && val.appntSign.signState == '1') {
        that.isDisabledComplite = false
      } else {
        that.isDisabledComplite = true
      }
    }
  },

  beforeRouteLeave(to, from, next) {
    document.body.style.backgroundColor = ''
    next()
  }
}
</script>

<style lang="scss" scoped>
.notice {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 20;
}
.iframe {
  width: 100vw;
  height: 75vh;
}
</style>