body-check.vue

<template>
  <transition name="body">
    <div v-if="showFlag" class="body-check">
      <transition name="trans">
        <div v-if="downNum" class="modal-show">
          <div class="modal-box">
            <div class="down">
              <div class="down-content">
                <span class="title">请牢记以下验证码</span>
                <p class="compute">
                  此验证码将于
                  <span>{{ time }}</span>秒后过期
                  <br>用普通话朗读数字，视频时长
                  <span>3~8</span>秒最佳
                </p>

              </div>
              <div class="number">
                <span v-for="(item,index) in codeList" :key="index">{{ item }}</span>
              </div>
              <h-button :disabled="lastTime!=0" class="button" @click.native="recordVdeo">记住了，开始录制<span
                v-if="lastTime!=0">({{ lastTime }}s)</span></h-button>
            </div>
            <div class="close" @click="hideBody">X</div>
          </div>
        </div>
      </transition>
      <h-header :proportion="[5,1,1]" class="bar-custom">
        <div slot="left" class="h-header-btn">
          <img src="@/assets/userBind/arrow.png" @click="hideBody" >
          <span>活体检测</span>
        </div>
      </h-header>
      <h-content>
        <div class="top">
          <div class="top-box">
            <img src="@/assets/constractSigning/sketch.png">
            <span>正面平视手机，保证光线充足</span>
            <span>请勿遮挡面部</span>
          </div>
        </div>
        <div class="bottom">
          <ul>
            <li>
              <span>1</span>
              <span>牢记验证码，点击开始录制</span>
              <p/>
            </li>
            <li>
              <span>2</span>
              <span>开启前置摄像头，用普通话朗读数字</span>
              <p/>
            </li>
            <li>
              <span>3</span>
              <span>完成录制，等待验证结果</span>
            </li>
          </ul>
        </div>
      </h-content>
      <bottom-tab class="footer-button">
        <tab-button class="approve" @click.native="getCode">下一步</tab-button>
      </bottom-tab>
    </div>
  </transition>
</template>
<script>
export default {
  props: ['check_id', 'confirm_id'],
  data () {
    return {
      downNum: false,
      time: 60,
      lastTime: 3,
      code: '',
      file: '',
      sessionId: '',
      codeList: [],
      videoListUpload: [],
      showFlag: false,
    }
  },
  methods: {
    show () {
      this.showFlag = true
    },
    hideBody () {
      this.showFlag = false
      this.downNum = false
    },
    recordVdeo () { // 开始录制
      let vm = this
      vm.downNum = false // 模态框消失
      vm.showFlag = false
      let onSuccess = function (mediaFiles) {
        // 遍历获取录制的文件（iOS 只支持一次录制一个视频）
        console.log('录制成功！\n\n' + '文件名：' + mediaFiles[0].name + '\n' + '大小：' + mediaFiles[0].size + '\n\n' + 'localURL地址：' + mediaFiles[0].localURL + '\n\n' + 'fullPath地址：' + mediaFiles[0].fullPath)
        vm.succesCall(mediaFiles[0].fullPath) // 开始检测
        // vm.svaeVideo(mediaFiles[0].fullPath) // 上传视频文件至业务系统
      }
      let onError = function (error) {
        vm.hlsPopup.showLongcenter('录制失败，请重新录制')
      }
      vm.hlsUtil.captureVideo(onSuccess, onError)
    },
    svaeVideo (fullPath) {
      let vm = this
      vm.videoListUpload = []
      let obj = {
        pkvalue: this.check_id,
        source_type: 'PRJ_CDD_ITEM_CHECK',
        picture: '',
        filePath: fullPath,
        attachment_id: '',
        user_id: 1,
        fileName: 'video',
      }
      vm.videoListUpload.push(obj)
      vm.saveVideoStart(vm.videoListUpload) // 开始存视频
    },
    // 视频保存
    saveVideoStart (list) {
      console.log('list ' + JSON.stringify(list))
      let vm = this
      if (list.length) {
        var alreadyUploadNum = 0
        var attLength = 0
        var recordUploadInterval = setInterval(function () {
          if (alreadyUploadNum === attLength) {
            clearInterval(recordUploadInterval)
          }
        }, 500)
        for (var i = 0; i < list.length; i++) {
          let uploadSuccess = function (res) {
            if (res.result === 'S') {
              alreadyUploadNum++
              for (var j = 0; j < list.length; j++) {
                if (list[j].filePath === res.response.filePath) {
                  list[j].attachment_id = res.response.attachment_id
                  console.log('%%%%%%%%%%%%% ' + JSON.stringify(res.response))
                  break
                }
              }
            } else {
              hlsPopup.hideLoading()
            }
          }
          if (!list[i].attachment_id) {
            attLength++
            hlsUtil.fileUploadSvc(list[i], uploadSuccess)
          }
        }
      } else {
        hlsPopup.hideLoading()
      }
    },
    succesCall (fileUrl) { // 录制成功后进行检测
      let vm = this
      console.log('fileUrl ' + fileUrl)
      console.log('sessionId ' + vm.sessionId)
      let url = process.env.ocrPath + '/baidu/ocr/videoFaceliveness'
      let param = {
        fileUrl: fileUrl,
        sessionId: vm.sessionId,
      }
      vm.hlsPopup.showLoading('正在检测')
      var flag = false
      var loadInterval = setInterval(function () {
        vm.hlsPopup.showLoading('视频过大，请耐心等待')
        if (flag) {
          vm.hlsPopup.hideLoading()
          clearInterval(loadInterval)
        }
      }, 5000)
      hlsUtil.baiduOcrVideo(param, url, function (res) {
        flag = true
        vm.hlsPopup.hideLoading()
        console.log('##########res ' + JSON.stringify(res))
        if (res.result.err_no != 0) { // 检测出错
          hlsPopup.showConfirm({
            title: '提示',
            content: `检测失败，是否重新重新尝试？`,
            onConfirm: data => {
              if (data) {
                // 重新尝试
                vm.showFlag = true
              } else {
              }
            },
          })
        } else if (res.result.result.thresholds.frr_1e - 2 < 0.9) { // 检测成功但不符合要求
          hlsPopup.showConfirm({
            title: '提示',
            content: `检测失败，是否重新重新尝试？`,
            onConfirm: data => {
              if (data) {
                // 重新尝试
                vm.getCode()
              } else {
              }
            },
          })
        } else if (res.result.result.code.create !== res.result.result.code.identify) {
          hlsPopup.showConfirm({
            title: '提示',
            content: `检测失败，您可能朗读的语音码有误，是否重新重新尝试？`,
            onConfirm: data => {
              if (data) {
                // 重新尝试
                vm.getCode()
              } else {
              }
            },
          })
        } else {
          hlsPopup.showPopup({
            title: '提示',
            content: `检测成功，请进行电子签认证`,
            onConfirm: () => {
              // 电子签认证
              vm.svaeVideo(fileUrl)
              setTimeout(vm.goElectronicSign(), 3000)
            },
          })
        }
      })
    },
    getCode () {
      // 获取验证码
      // this.downNum = true
      this.computeTime()
      this.time = 60
      this.lastTime = 3
      let vm = this
      let url = process.env.ocrPath + '/baidu/ocr/videoSessioncode'
      let param = {}
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.success) {
          vm.codeList = [...res.result.result.code]
          vm.sessionId = res.result.result.session_id
          vm.downNum = true
        }
      })
      /* let str = '098672'
           vm.codeList = [...str] */
    },
    goElectronicSign () { // 电子签
      let vm = this
      let url = process.env.basePath + 'get_sign_url'
      let param = {
        confirm_id: vm.confirm_id,
        data_class: 'PRJ_PROJECT',
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.info.msg === 'success') {
          /* vm.$router.push({
                 name: 'ElectronicSign',
                 params: {
                   url: res.info.data.url,
                 },
               }) */
          cordova.InAppBrowser.open(res.info.data.url, '_blank', 'location=yes')
        } else {
          vm.hlsPopup.showLongCenter(res.info.msg)
        }
      })
    },
    computeTime () { // 倒计时
      let vm = this
      let timer = setInterval(() => {
        if (vm.time > 0) {
          vm.time--
        } else {
          clearInterval(timer)
        }
      }, 1000)
      let lastTime = setInterval(() => {
        if (vm.lastTime > 0) {
          vm.lastTime--
        } else {
          clearInterval(lastTime)
        }
      }, 1000)
    },
  },

}
</script>
<style lang="less">
  .body-enter-active, .body-leave-active {
    transition: opacity .5s;
  }

  .body-enter, .body-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  .body-check{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 999;
    background: rgba(56, 63, 69, 0.30);

    .trans-enter-active,
    .trans-leave-active {
      transition: opacity 0.5s;
    }

    .trans-enter,
    .trans-leave-active {
      opacity: 0;
    }

    .modal-show {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 900;
      background-color: rgba(56, 63, 69, 0.3);
      display: flex;
      justify-content: center;
      align-items: center;

      .modal-box {
        width: 314px;
        display: flex;
        justify-content: center;
        flex-flow: wrap row;
      }

      .down {
        position: relative;
        width: 314px;
        height: 286px;
        background-size: 301px 24.7px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        flex-flow: wrap row;

        .button {
          width: 90%;
          height: 50px;
          background-color: #0073eb;
          color: #fff !important;
          border-radius: 4px;
        }

        .down-content {
          width: 290px;
          margin: 0 auto;
          margin-top: 30px;
          text-align: center;

          .title {
            font-size: 16px;
            color: #333;
          }

          .compute {
            margin-top: 16px;
            font-size: 14px;
            line-height: 20px;
            color: #666;

            span {
              color: red;
            }
          }
        }

        .number {
          width: 100%;
          display: flex;
          justify-content: center;

          span {
            width: 40px;
            height: 60px;
            font-size: 30px;
            font-weight: bold;
            line-height: 60px;
            color: #333;
            display: inline-block;
            border: 1px solid #e1e1e1;
            border-radius: 10px;
            text-align: center;
          }
        }
      }

      .close {
        border: 1px solid #fff;
        width: 40px;
        height: 40px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.3);
        margin-top: 20px;
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
      }
    }

    .content {
      display: flex;
      flex-direction: column;
    }

    .top {
      height: 340px;
      background-color: #f4f4f4;
      display: flex;
      justify-content: center;
      align-items: flex-start;

      .top-box {
        width: 60%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;

        img {
          width: 80%;
          height: 100%;
          margin-top: 10px;
        }

        span {
          font-size: 14px;
          color: #999;
          line-height: 25px;
          letter-spacing: 2px;
        }
      }
    }

    .bottom {
      flex: 1;
      background-color: #fff;
      box-shadow: 0 -4px 10px 0 #e8e8e8;
      display: flex;
      justify-content: center;

      ul {
        width: 80%;
        margin-top: 40px;

        li {
          height: 60px;

          p {
            height: 35px;
            border-left: 1px solid #0073eb;
            margin-left: 12px;
          }

          span:first-child {
            border-radius: 50%;
            border: 1px solid #0073eb;
            text-align: center;
            color: #0073eb;
            display: inline-block;
            width: 25px;
            height: 25px;
            line-height: 25px;
            font-size: 12px;
            margin-right: 10px;
            letter-spacing: 0;
          }
        }
      }
    }

    .approve {
      background: @headerColor;
      border-radius: 4px;
      color: #fff;
      font-family: PingFangSC-Semibold;
      font-size: 15px;
    }
  }
</style>