exam/exam-06173-uni/pages/course/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="backCourse">返回课程</button>
			</view>
			
			
					
	</view>
</template>

<script>
	import { faceCheck } from '@/api/sys/user/user.js'
	import { saveCheck } from '@/api/course/face'
	export default {

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

		methods: {
			
			clearPhoto(){
				
				this.photo = ''
				this.base64 = ''
			},
			// 对比获取token
			checkAndNext(){
				
				let that = this
				
				uni.showLoading({
					title: '正在比对人脸...'
				});
			
				faceCheck({ base64: this.base64 }).then(res => {
					console.log('识别结果', res)
					this.saveToken(res.faceToken)
					uni.hideLoading()
				})
			},
			
			// 保存人脸入库
			saveToken(faceToken) {
				
				let that = this

				uni.showLoading({
					title: '加载中...'
				});
				
				const data = {
					courseId: this.courseId,
					fileId: this.fileId,
					faceToken: faceToken
				}
				
				saveCheck(data).then(data => {
					// 关闭加载
					uni.hideLoading();
					
					// 返回
					uni.navigateBack()
				})
			},
			
			// 返回考试详情
			backCourse(){
				uni.redirectTo({
					url: '/pages/course/detail?id=' + this.courseId
				});
			}

		}
	}
</script>

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