<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: [], 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.goElectronicSign() vm.svaeVideo(fileUrl) // 上传视频文件至业务系统 }, }) } }) }, 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>