YNUtdPlatform/pages/realName/workbench/exam/examInfo.vue

<template>
  <view class="page">
    <u-navbar class="u-navbar" title="考试说明" placeholder @leftClick="leftClick" leftIconColor="#fff"  bgColor="#00337A"  :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"/>
	 <view class="view-box">
	 	<view class="title-view">
	 		{{examInfo.name}}
	 	</view>
		<view style="margin: 10rpx 20rpx;">
			<text style="color: #1296db;">不限期</text>
			<text style="color: #666;">（90分及格）</text>
		</view>
		<view class="item-box">
			<view class="item-view">
				<image src="../../../../static/realName/time.png" mode="" style="width: 36rpx;height:36rpx;margin-bottom: 20rpx;"></image>
				<view style="font-weight: bold;margin-bottom: 20rpx;font-size: 32rpx;">{{Number(examInfo.examDuration)/60}}分钟</view>
				<view style="color: #666;margin-bottom: 20rpx;">考试时长</view>
			</view>
			<view class="item-view">
				<image src="../../../../static/realName/repeat.png" mode="" style="width: 36rpx;height:36rpx;margin-bottom: 20rpx;"></image>
				<view style="font-weight: bold;margin-bottom: 20rpx;font-size: 32rpx;">不限次</view>
				<view style="color: #666;margin-bottom: 20rpx;">切屏次数</view>
			</view>
		</view>
		<view class="tip-box">
			<view class="tip-view">1.进入考试前需进行此账号的人脸识别校验;</view>
			<view class="tip-view">2.进入考试后，计时结束时将自动交卷;</view>
			<view class="tip-view">3.接打电话/关闭考试页面超过60秒自动交卷。</view>
		</view>
		<view class="bottom-box" @click="distinguish"><!-- startExam  distinguish -->
			进入考试
		</view>
	 </view> 
	

  </view>
</template>

<script> 
import { pathToBase64, base64ToPath } from 'image-tools';
import config from '@/config'
export default {
  data() {
    return {
		examInfo:{},
		trainInfo:{},
		types:'',
		foreignId:'',
    }
  },
  onLoad(option) {
    this.examInfo=JSON.parse(option.examInfo); 
	this.trainInfo=JSON.parse(option.trainInfo);
	this.types=option.types;
	this.foreignId=option.foreignId;
    // console.log(this.examInfo)  
  },
  onShow() {
  },
  methods: {
	//人脸识别采集
	distinguish(){
		console.log('人脸识别采集')
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['camera'],
			success: res => {
				console.log('🚀 ~ res-拍照:', res)
				this.imgToBase64(res.tempFilePaths[0]).then(base64 => {
					// console.log(base64)
					uni.uploadFile({
						url: config.realFileUrl+'file/getFaceRecognition', //服务器地址
						fileType:"image",//ZFB必填,不然报错
						filePath: res.tempFilePaths[0],//这个就是我们上面拍照返回或者先中照片返回的数组
						formData: {
							file:base64,
							photoType:'face',
						},
						success: (uploadFileRes) => {
							console.log(uploadFileRes)
							if(uploadFileRes.statusCode==200){
								uploadFileRes=JSON.parse(uploadFileRes.data)
								console.log(uploadFileRes)
								if(uploadFileRes.code==200){
									if(uploadFileRes.data.face){
										this.faceData=JSON.parse(uploadFileRes.data.personData)
										console.log(this.faceData)
										if(this.faceData){
											if(this.trainInfo.idNumber == this.faceData.idNumber){
												uni.$u.toast('人脸认证成功，开始考试！');
												this.startExam()
											}else{
												uni.$u.toast('人脸认证：非本人操作！');
											}
										}else{
											uni.$u.toast('人脸认证失败');
										}
									}else{
										uni.$u.toast(uploadFileRes.msg);
									}
								}else{
									uni.$u.toast(uploadFileRes.msg);
								}
							}else{
								uni.$u.toast('识别失败');
							}
						},
						fail: err => {
							uni.$u.toast('识别失败');
							console.log(err)
						}
					});
				})
			},
			fail: err => { 
			  console.log('🚀 ~ err:', err)
			}
		})
	},
	imgToBase64(data) {
	  return new Promise((resolve, reject) => {
		pathToBase64(data)
		  .then(base64 => {
			resolve(base64)
		  })
		  .catch(error => {
			console.error(error)
			reject(error)
		  })
	  })
	},
	startExam(){
		uni.navigateTo({
			url: `/pages/realName/workbench/exam/exam?examInfo=${JSON.stringify(this.examInfo)}&trainInfo=${JSON.stringify(this.trainInfo)}&types=${this.types}&foreignId=${this.foreignId}` 
		})
	},
    // 返回
    leftClick() {
      console.log('返回')
      uni.navigateBack({
      	delta: 1 // 返回
      });
    }
  },

}
</script>

<style lang="scss">
.page {
	width: 100vw;
	height: 100vh;
	background-color: #f8f8f8;
	box-sizing: border-box;
	position: relative;
	.view-box{
		width: 94%;
		height: auto;
		margin: 20rpx auto;
		background-color: #FFF;
		border-radius: 10rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		.title-view{
			font-weight: 600;
			margin-left: 20rpx;
		}
	}
	.tip-box{
		width: 94%;
		height: auto;
		margin:0 auto;
		padding: 10rpx;
		.tip-view{
			color:#EBA11E;
		}
	}
	.item-box{
		width: 94%;
		height: auto;
		margin:0 auto;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		.item-view{
			width: 45%;
			height: auto;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: #F4F9FF;
			border-radius: 10rpx;
			padding-top: 20rpx;
		}
		
	}
	.bottom-box{
		width: 90%;
		margin: 20rpx auto;
		height: 80rpx;
		display: flex;
		align-items: center;justify-content: center;
		color: #FFF;
		background: #0078FB;
		border-radius: 10rpx;
	}
}
</style>