新增活体检测

src/pages/contractSigning/body-check.vue

+<template>
+  <h-view id="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="recordVdeo">记住了，开始录制<span v-if="lastTime!=0">({{ lastTime }}s)</span></h-button>
+          </div>
+          <div class="close" @click="downNum=false">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="$routeGo()" >
+        <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>
+  </h-view>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      downNum: false,
+      time: 60,
+      lastTime: 3,
+      code: '',
+      file: '',
+      sessionId: '',
+      codeList: [],
+    }
+  },
+  methods: {
+    recordVdeo () { // 开始录制
+
+    },
+    succesCall () { // 录制成功后进行检测
+      let vm = this
+      let url = process.env.ocrPath + '/baidu/ocr/videoFaceliveness'
+      let param = {
+        file: vm.file,
+        sessionId: vm.sessionId,
+      }
+      vm.hlsPopup.showLoading('数据加载中')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        vm.hlsPopup.hideLoading()
+        // eslint-disable-next-line space-infix-ops
+        if (res.result.thresholds.frr_1e-2 < 0.9) {
+          vm.hlsPopup.showLongcenter('检测失败，请重新尝试')
+        } else {
+          vm.hlsPopup.showLongcenter('检测成功')
+        }
+      })
+    },
+    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.result === 'S') {
+      //       vm.codeList = [...res.result.code]
+      //       vm.sessionId = res.result.sessionId
+      //     }
+      //   })
+      vm.codeList = [1, 4, 3, 5]
+    },
+    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" scoped>
+#body-check {
+  .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;
+          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;
+    }
+  }
+  .top {
+    height: 60%;
+    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%;
+        margin-top: 10px;
+      }
+      span {
+        font-size: 14px;
+        color: #999;
+        line-height: 25px;
+        letter-spacing: 2px;
+      }
+    }
+  }
+  .bottom {
+    height: 40%;
+    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>

src/pages/contractSigning/contract-detail.vue

@@ -109,6 +109,9 @@
             <p>本人同意接收来自于徐工融资租赁有限公司或第三方发出的提醒付款、确认付款、催款等短信(不含广告),同意接收来自于徐工融资租赁有限公司的录音电话,并积极配合。</p>
           </div>
         </div>
+        <div v-if="tabNum === 1" class="bodyCheck">
+          <button @click="goBodyCheck">活体检测</button>
+        </div>
         <div v-if="tabNum === 1" class="sign-elect">
           <button @click="goElectronicSign">电子签</button>
         </div>
@@ -424,6 +427,11 @@ export default {
     }
   },
   methods: {
+    goBodyCheck () { // 活体检测
+      this.$router.push({
+        name: 'BodyCheck',
+      })
+    },
     goElectronicSign () { // 电子签
       let vm = this
       let url = process.env.basePath + 'get_sign_url'
@@ -826,7 +834,27 @@ export default {
       letter-spacing: 0.2rem;
     }
   }
-
+.bodyCheck{
+    width:100%;
+    height:1.1rem;
+    position: fixed;
+    bottom: 86px;
+    background: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    button {
+      width: 7.172rem;
+      height: 0.88rem;
+      background: #1d3fff;
+      border-radius: 0.08rem;
+      color: #fff;
+      font-family: PingFangSC-Semibold;
+      font-size: 0.3rem;
+      line-height: 0.4rem;
+      letter-spacing: 0.2rem;
+    }
+}
   .footer-button {
     .approve {
       width: 358.6px;

src/router/index.js

@@ -50,6 +50,7 @@ import ContractDetail from '@/pages/ContractSigning/contract-detail'
 import ContractContent from '@/pages/ContractSigning/contract-content'
 import EntryInfo from '@/pages/ContractSigning/entry-info'
 import ElectronicSign from '@/pages/ContractSigning/electronic-sign'
+import BodyCheck from '@/pages/ContractSigning/body-check'
 import ContractRepayPlan from '@/pages/ContractSigning/contract-repay-plan'
 
 // 首付款支付
@@ -75,7 +76,6 @@ import ProductList from '@/pages/productQuery/product-list'
 import RejectDetail from '@/pages/messageCenter/reject-detail'
 // 帮助与反馈
 import HelpList from '@/pages/help/help-list'
-
 import HelpDetail from '@/pages/help/detail'
 import HelpFeedback from '@/pages/help/feedback'
 // 我的还款
@@ -210,6 +210,7 @@ export default new Router({
     {path: '/entry-info', component: EntryInfo, name: 'EntryInfo', meta: {keepAlive: true}},
     {path: '/contract-repay-plan', component: ContractRepayPlan, name: 'ContractRepayPlan', meta: {keepAlive: true}},
     {path: '/electronic-sign', component: ElectronicSign, name: 'ElectronicSign', meta: {keepAlive: true}},
+    {path: '/body-check', component: BodyCheck, name: 'BodyCheck', meta: {keepAlive: true}},
 
     // 首付款支付
     {path: '/first-pay', component: FirstPay, name: 'FirstPay', meta: {keepAlive: true}},