exam/exam-06173-uni/pages/exam/face.vue

<template>
	<view class="out-box">
		
			<view v-if="photo">
				<view style="text-align: center; padding: 20px;">
					<image :src="photo" style="width: 60vw; height: 60vh;"></image>
				</view>
				
				<view>
					<button  type="primary" @tap="checkAndNext">识别并开始考试</button>
				</view>
				
				<view>
					<button  type="warn" @tap="clearPhoto">重新拍照</button>
				</view>
				
			</view>
			
			<view v-else>
				<yf-photo-take v-model="photo" :base64.sync="base64"></yf-photo-take>
				<button type="warn" @tap="backExam">返回上一页</button>
			</view>
			
			
					
	</view>
</template>

<script>
	import { handExam } from '@/api/exam.js'
	import { faceCheck } from '@/api/sys/user/user.js'
	import { createPaper } from '@/api/exam.js'
	export default {

		data() {
			return {
				photo: '',
				examId: '',
				password: '',
				base64: ''
			}
		},
		onLoad: function(option) {
			this.examId = option.examId;
			this.password = option.password;
		},

		methods: {

			
			clearPhoto(){
				
				this.photo = ''
				this.base64 = ''
			},
			// 对比获取token
			checkAndNext(){
				
				let that = this
				
				uni.showLoading({
					title: '正在比对人脸...'
				});
			
				faceCheck({ base64: this.base64 }).then(res => {
					console.log('识别结果', res)
					this.startExam(res.faceToken)
					uni.hideLoading()
				})
			},
			
			// 交卷操作
			startExam(faceToken) {
				
				let that = this

				uni.showLoading({
					title: '创建试卷...'
				});
				
				const data = {
					examId: this.examId,
					password: this.password,
					faceToken: faceToken
				}
				
				createPaper(data).then(data => {
					// 关闭加载
					uni.hideLoading();
				
					//打印请求返回的数据
					uni.redirectTo({
						url: '/pages/exam/exam?id=' + data.id
					});
				
				})
			},
			
			// 返回考试详情
			backExam(){
				uni.redirectTo({
					url: '/pages/exam/detail?id=' + this.examId
				});
			}

		}
	}
</script>

<style scoped>
	.out-box {
	    padding: 25px;
	    font-size: 14px;
	    flex-direction: column;
	    height: 100vh;
	}
	
	button {
		margin-top: 20px;
	}
	
</style>