|
|
<template> <view class="main"> <view class="signAndOut"> <view class="top_row"> <view class="flex-box"> <view class="icon"> <image src="@/static/images/carIcon/home_icon_buzhou@2x.png" mode=""></image> </view> <view class="txt">步骤</view> </view> <view class="flex-box"> <view class="icon"> <image src="@/static/images/carIcon/home_icon_zhuangtai@2x.png" mode=""></image> </view> <view class="txt">状态</view> </view> </view>
<view class="step"> <view class="li" :class="{active: step1}"> <view class="leftIcon" > <view class="icon">1</view> <view class="line" ></view> </view> <view class="textCon"> <view class="text">信息认证</view> <view class="redTps" v-if="!step1">失败原因：{{stepFailureReason}}</view> </view> <view class="btn" :class="{red: !step1}">{{step1?'通过': '不通过'}}</view> </view>
<view class="li" :class="{active: step2}"> <view class="leftIcon"> <view class="icon">2</view> <view class="line" ></view> </view> <view class="textCon"> <view class="text">人脸识别</view> <view class="redTps"></view> </view> <view class="btn" v-if="step2">通过</view> </view>
<view class="li" :class="{active: step3}"> <view class="leftIcon"> <view class="icon">3</view> </view> <view class="textCon"> <view class="text">信息同步</view> <view class="redTps"></view> </view> <view class="btn" v-if="step3">通过</view> </view>
</view>
<view class="footBtn"> <view class="oneBtn" :class="{active: btnActive}" v-if="!step1" @click="Recertification">重新认证</view> <view class="oneBtn" :class="{active: step3}" v-else @click="goBack">我知道了</view> </view> </view> </view></template>
<script> import { getInitBodyFaceVerify, getDescribeBodyFaceVerify, operationSigin, vailStudentInfo, signOutAuth } from '@/config/api.js' export default { data() { return { deviceCode: 0, stepFailureReason: '未通过', step1: false, step2: false, step3: false, params: {} } }, onLoad(options) { this.vailStudentInfoFn() }, computed: { btnActive() { if(this.step1&&(!this.step2||!this.step3)) { return true }else { return false } } }, methods: { // 信息校验
async vailStudentInfoFn() { // await this.$store.dispatch('getCity')
if(!this.vuex_cityInfo.lat) return let schoolCoach = this.$store.state.school.schoolCoach this.params = { coachId: schoolCoach.coachId||'1760856426781200385', stduentId: this.studentId, lng: this.vuex_cityInfo.lng, lat: this.vuex_cityInfo.lat, key: schoolCoach.key||'f83d5b1c-5524-43c7-bb2c-8540dba69ccb', type: schoolCoach.QrType } console.log(this.params) const res = await vailStudentInfo(this.params) if(res.code=='200240213') { this.stepFailureReason = res.msg } if(res.data==true) { this.step1 = true this.getInitFaceVerifyFn() } console.log(res) }, // 人脸对比
async getInitFaceVerifyFn() { const verifyPlugin = uni.requireNativePlugin('AP-FaceDetectModule'); var metaInfo = verifyPlugin.getMetaInfo() if(typeof metaInfo =='object' ) { metaInfo = JSON.stringify(metaInfo) } console.log(metaInfo) const res = await getInitBodyFaceVerify({metaInfo, userId : this.userId}) console.log(res) let certifyId = res.data.body.resultObject.certifyId let _this = this verifyPlugin.verify({ certifyId, // extParams: {
// kIdentityParamKeyIdCardFaceOnly: 'YES'
// }
}, function(response){ console.log(response) if(response.code==1000) { getDescribeBodyFaceVerify({certifyId,}).then((useRes)=>{ _this.step2 = true _this.siginFn() }) }else if(response.code==2006) { this.$u.toast('认证失败！请确定是本人后再重试') } }); }, // 签到签退
async siginFn() { let fn = operationSigin if(this.params.type==3) { fn = signOutAuth } const res = fn(this.params) if(res.code=='200240213') { this.$u.toast(res.msg) } if(res.data==true) { this.step3 = true let msg = '签到成功' if(this.params.type==2) this.$u.toast('签退成功') setTimeout(()=>{ uni.navigateBack() },1000) } }, // 重新认证
Recertification() { if(!this.step2) { getInitFaceVerifyFn() } if(!this.step3) { this.siginFn() } } } }</script>
<style lang="scss" scoped> .main { padding: 10rpx 32rpx; }
.signAndOut { width: 100%; height: calc(100vh - 150rpx); background-color: #fff; padding: 48rpx; border-radius: 16rpx; position: relative;
.footBtn { padding: 48rpx 100rpx; position: absolute; left: 0; width: 100%; bottom: 60rpx; }
.top_row { display: flex; justify-content: space-between; padding: 0 0 0 52rpx;
.flex-box { display: flex; align-items: center;
.icon { width: 28rpx; height: 28rpx;
image { display: block; width: 100%; height: 100%; } }
.txt { font-size: 28rpx; color: #FD6401; margin-left: 14rpx; } } }
.step { padding: 50rpx 0 0 0;
.li { width: 100%; display: flex; height: 256rpx; // padding: 0 0 8rpx 0;
.leftIcon { width: 56rpx; height: 100%; position: relative;
.icon { width: 56rpx; height: 56rpx; border-radius: 50%; font-size: 24rpx; color: #333; text-align: center; line-height: 56rpx; background: url('../../../../static/images/carIcon/home_icon_weidao@2x.png'); background-size: 100% 100%; }
.line { position: absolute; left: 26rpx; top: 50rpx; width: 5rpx; height: 200rpx; border: 2rpx solid; border-image: linear-gradient(180deg, rgba(238, 238, 238, 1), rgba(216, 216, 216, 1)) 2 2; } }
.textCon { flex: 1; padding: 0 0 0 8rpx; font-weight: 550;
.text { font-size: 36rpx; color: #363A44; }
.redTps { font-size: 28rpx; color: #E63633; } }
.btn { width: 108rpx; height: 52rpx; text-align: center; line-height: 52rpx; color: #ffffff; background: linear-gradient(180deg, #53D3E5 0%, #3593FB 100%); border-radius: 8rpx;
&.red { background: linear-gradient(180deg, #ea7c48 0%, #f54e40 100%); } } &.active { .leftIcon { .icon { // background: url('../../../static/images/icon/home_icon_yiguo@2x.png');
background-size: 100% 100%; } .line { border-image: linear-gradient(180deg, rgba(83, 211, 229, 1), rgba(53, 147, 251, 1)) 2 2; } } } } } }
.oneBtn { width: 100%; height: 96rpx; border-radius: 48rpx; font-size: 36rpx; color: #fff; background: linear-gradient(180deg, #EEEEEE 0%, #D8D8D8 100%); text-align: center; line-height: 96rpx;
&.active { background: linear-gradient(180deg, #3593FB 0%, #53D3E5 100%); } }</style>
|
