<!--
|
* @Author: 小明丶
|
* @Date: 2020-05-25 09:09:32
|
* @LastEditors: zxq
|
* @LastEditTime: 2022-11-11 15:09:14
|
* @Description: 人脸识别结果页面
|
-->
|
<template>
|
<div class="face-recognition-page">
|
<v-navbar title="订单申请"></v-navbar>
|
<div class="steps-box">
|
<div class="zhanwei"></div>
|
<div class="steps">
|
<p></p>
|
<div class="step-1">1</div>
|
<div class="step-2">2</div>
|
<div class="step-3">3</div>
|
<div class="step-4">4</div>
|
</div>
|
</div>
|
<div v-if="!isFaceBack">
|
<div class="mation-box" v-if="state==1">
|
<div class="left">
|
<p>人脸识别成功</p>
|
<p>身份验证成功，点击下一步完善信息</p>
|
</div>
|
<div class="right">
|
<img src="../../../static/img/rlsbz.png" alt />
|
</div>
|
</div>
|
<div class="mation-box" v-if="state==2">
|
<div class="left">
|
<p>人脸识别中</p>
|
<p>正在进行身份验证，请稍后</p>
|
</div>
|
<div class="right">
|
<img src="../../../static/img/rlsbz.png" alt />
|
</div>
|
</div>
|
<div class="mation-box" v-if="state==0">
|
<div class="left">
|
<p>人脸识别失败</p>
|
<p>身份认证失败，请重新识别</p>
|
</div>
|
<div class="right">
|
<img src="../../../static/img/rlsbsb.png" alt />
|
</div>
|
</div>
|
<div class="mation-box" v-if="state==3">
|
<div class="left">
|
<p>人脸识别失败</p>
|
<p>身份认证次数超限，禁止继续识别</p>
|
</div>
|
<div class="right">
|
<img src="../../../static/img/rlsbsb.png" alt />
|
</div>
|
</div>
|
</div>
|
<div v-else class="new_box">
|
<div class="new_box_right">
|
<img src="../../../static/img/rlsbz.png" alt />
|
</div>
|
<p>为了满足您的业务需求，需要您使用认证服务，服务可能采集如下信息：</p>
|
<div class="do_list">
|
<p>操作人姓名、证件号</p>
|
<p>网络运营商注册手机号（仅手机认证获取）</p>
|
<p>银行卡或预留手机号（仅银行卡认证获取）</p>
|
<p>操作人人脸视频（仅人脸识别获取）</p>
|
</div>
|
<div class="ridio-box" style="margin-bottom:10px;">
|
<van-checkbox v-model="checked" icon-size="13px">
|
<p class="xieyi">
|
<span>我已阅读并同意</span>
|
<span @click.stop="showAgree(1)"> 《认证服务协议》</span>
|
<span @click.stop="showAgree(2)"> 《用户隐私政策》</span>
|
</p>
|
</van-checkbox>
|
</div>
|
<div class="ridio-box">
|
<van-checkbox v-model="checkede" icon-size="13px">我同意e签宝采集人脸照片并提供给首诺商业保理(深圳)有限公司用于实名认证</van-checkbox>
|
</div>
|
</div>
|
<div class="btn-box">
|
<button @click="goNext">{{btnText}}</button>
|
</div>
|
</div>
|
</template>
|
<script>
|
import Vue from "vue";
|
import { Checkbox, CheckboxGroup } from "vant";
|
Vue.use(Checkbox);
|
Vue.use(CheckboxGroup);
|
export default {
|
data() {
|
return {
|
state: 1,
|
btnText: "下一步",
|
isFaceBack:this.$route.query.isFaceBack,
|
checked:true,
|
checkede:true
|
};
|
},
|
created() {
|
if(!this.isFaceBack){
|
this.getres()
|
}else{
|
this.btnText='开始认证';
|
}
|
},
|
methods: {
|
// 获取识别结果
|
getres() {
|
this.$api.findFaceResult().then(res => {
|
this.state = res.body.faceResult;
|
if (res.body.faceResult == 0) {
|
this.btnText = "开始认证";
|
}
|
if (res.body.faceResult == 1) {
|
this.btnText = "下一步";
|
}
|
if (res.body.faceResult == 2) {
|
this.btnText = "刷新";
|
}
|
if (res.body.faceResult == 3) {
|
this.btnText = "禁止继续识别";
|
}
|
});
|
},
|
goNext() {
|
if(this.isFaceBack){
|
let v = this.$tool;
|
if (!this.checked) {
|
v.toast("请阅读并同意认证服务协议,用户隐私政策");
|
return;
|
}
|
if (!this.checkede) {
|
v.toast("请同意e签宝采集人脸照片");
|
return;
|
}
|
this.goToFace();
|
}else{
|
if (this.state == 0) {
|
this.goToFace();
|
}
|
if (this.state == 1) {
|
this.$router.push("/order-handling/upload-userInfo");
|
}
|
if (this.state == 2) {
|
this.getres()
|
}
|
if (this.state == 3) {
|
this.$router.push("/home/index");
|
}
|
}
|
},
|
showAgree(type){
|
this.$router.push({
|
path:'/agreement',
|
query:{
|
from:'face',
|
tit:type==1?'认证服务协议':"用户隐私政策",
|
agrUrl:type==1?'./static/rzfwxy.pdf':'./static/yhyszc.pdf'
|
}
|
})
|
},
|
goToFace(){
|
let str = location.host
|
this.$api.getFaceUrl({callbackUrl:`https://${str}/aic_cus/#/order-handling/face-recognition`}).then(res => {
|
window.location.href = res.body.faceUrl;
|
});
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.face-recognition-page {
|
.new_box{
|
padding: 16px;
|
display: flex;
|
justify-content: center;
|
align-items: flex-start;
|
flex-direction: column;
|
line-height: 1.5;
|
}
|
.new_box_right{
|
width: 100%;
|
text-align: center;
|
margin-bottom: 24px;
|
img {
|
width: 96px;
|
height: 90px;
|
}
|
}
|
.do_list{
|
margin:16px 0;
|
p{
|
padding-left: 8px;
|
position: relative;
|
&::before{
|
content:'';
|
position: absolute;
|
left:0px;
|
top: 50%;
|
transform: translateY(-50%);
|
width: 3px;
|
height: 3px;
|
border-radius: 50%;
|
background-color: #333;
|
}
|
}
|
}
|
.xieyi {
|
span:nth-of-type(1) {
|
font-size: 12px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(153, 153, 153, 1);
|
}
|
span:nth-of-type(2) {
|
font-size: 12px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #5194fe;
|
}
|
span:nth-of-type(3) {
|
font-size: 12px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #5194fe;
|
}
|
}
|
.steps-box {
|
& {
|
display: flex;
|
}
|
.zhanwei {
|
width: 25%;
|
}
|
.steps {
|
width: 75%;
|
height: 65px;
|
position: relative;
|
p {
|
border-bottom: 1px dashed #b3b3b3;
|
height: 32px;
|
}
|
.step-1 {
|
text-align: center;
|
line-height: 30px;
|
color: #fff;
|
width: 30px;
|
height: 30px;
|
background: rgba(113, 123, 133, 1);
|
border-radius: 50%;
|
position: absolute;
|
left: -15px;
|
top: 19px;
|
}
|
.step-2 {
|
text-align: center;
|
line-height: 28px;
|
width: 28px;
|
height: 28px;
|
background: rgba(81, 148, 254, 1);
|
box-shadow: 0px 0px 8px 0px rgba(81, 148, 254, 0.64);
|
border-radius: 50%;
|
color: #fff;
|
position: absolute;
|
left: 55px;
|
top: 19px;
|
}
|
.step-3 {
|
text-align: center;
|
line-height: 28px;
|
width: 28px;
|
height: 28px;
|
background: rgba(255, 255, 255, 1);
|
border: 1px solid rgba(113, 123, 133, 1);
|
border-radius: 50%;
|
position: absolute;
|
left: 130px;
|
top: 19px;
|
}
|
.step-4 {
|
text-align: center;
|
line-height: 28px;
|
width: 28px;
|
height: 28px;
|
background: rgba(255, 255, 255, 1);
|
border: 1px solid rgba(113, 123, 133, 1);
|
border-radius: 50%;
|
position: absolute;
|
left: 210px;
|
top: 19px;
|
}
|
}
|
}
|
.mation-box {
|
width: 343px;
|
height: auto;
|
padding-bottom: 10px;
|
background: rgba(255, 255, 255, 1);
|
box-shadow: 0px 0px 10px 0px rgba(47, 103, 192, 0.1);
|
margin: auto;
|
display: flex;
|
.left {
|
width: 60%;
|
padding-left: 17px;
|
padding-top: 16px;
|
p:nth-of-type(1) {
|
font-size: 16px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(51, 51, 51, 1);
|
margin-bottom: 10px;
|
}
|
p:nth-of-type(2) {
|
font-size: 12px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(153, 153, 153, 1);
|
}
|
}
|
.right {
|
width: 40%;
|
padding-top: 12px;
|
text-align: center;
|
img {
|
width: 48px;
|
height: 45px;
|
}
|
}
|
}
|
.btn-box {
|
& {
|
text-align: center;
|
margin-top: 56px;
|
}
|
button {
|
width: 320px;
|
height: 44px;
|
background: rgba(81, 148, 254, 1);
|
border-radius: 22px;
|
outline: none;
|
border: 0;
|
color: #fff;
|
}
|
}
|
}
|
</style>
|
