qa-prevention-xgf-app/pages/train_management/face_authentication.nvue

<template>
	<view class="container">
		<view class="fat">
			<text class="fatt">请将人脸置于圆圈内</text>
		</view>
		<view class="livefater">
			<view style="width: 700upx; height: 700upx; border-radius: 700upx; overflow: hidden">
				<live-pusher id="livePusher" ref="livePusher" class="livePusher" url="" mode="SD" :muted="true" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2" aspect="1:1" />
			</view>
			<cover-image src="/static/images/gaiz.png" class="gaiimg"></cover-image>
		</view>

		<view style="margin: 0 100upx">
			<u-button :text="btnTextStr" type="primary" @click="snapshot" />
		</view>
	</view>
</template>

<script>
// import {setMeetingFace, setScanCodeToVerifyFace, setUserFace, setVerifyFace} from "@/api";
import { submitEditUserFace, compareUserFaceCertify, compareUserExamFaceCertify } from '@/api';

export default {
	data() {
		return {
			startPreviewTimer: null, // 开始预览计时器实例
			isFirst: '', // 是否为第一次开启摄像头
			type: '', // 摄像头使用类别
			// showButton: "yes",
			routeQueryparams: {}, // 额外携带的参数
			btnTextStr: '拍照'
		}
	},
	onReady() {
		this.context = uni.createLivePusherContext('livePusher', this)
		this.startPreviewTimer = setInterval(() => {
			this.startPreview()
		}, 1000)
	},
	onLoad(query) {
		// facial_input 人脸认证    isFirst 1 第一次登录添加人脸
		// scan_face  扫码
		// update_facial_input 更新人脸
		// learning_certification  学习认证
		// meeting_attendance  会议签到
		const typeKey = ['facial_input', 'scan_face', 'learning_certification', 'update_facial_input']
		if (!typeKey.includes(query.type)) {
			uni.$u.toast('type参数错误')
			return
		}
		this.isFirst = query.isFirst || ''
		if (query.type === 'facial_input' || 'update_facial_input') this.btnTextStr = '人脸认证'
		if (query.type === 'scan_face') this.btnTextStr = '签到'
		if (query.type === 'learning_certification') this.btnTextStr = '开始考试'
		this.type = query.type
		// this.showButton = query.showButton || "yes";
		this.routeQueryparams = query ?? {}
	},
	onBackPress(event) {
		if (event.from === 'backbutton') {
			if ((this.type === 'scan_face' && this.isFirst === '1') || this.type === 'learning_certification' || this.type === 'facial_input') {
				uni.$u.toast('请完成人脸验证')
				return true
			}
		}
		return false
	},
	onUnload() {
		this.startPreviewTimer && clearInterval(this.startPreviewTimer)
	},
	methods: {
		snapshot() {
			uni.showLoading({
				title: '加载中'
			})
			this.context.snapshot({
				success: (e) => {
					this.getMinImage(e.message.tempImagePath)
				}
			})
		},
		startPreview() {
			this.context.stopPreview()
			this.context.startPreview({
				success: () => {
					this.startPreviewTimer && clearInterval(this.startPreviewTimer)
					// this.showButton === "no" && this.snapshot();
				}
			})
		},
		getMinImage(imgPath) {
			plus.zip.compressImage(
				{
					src: imgPath,
					dst: imgPath,
					overwrite: true,
					quality: 40
				},
				(zipRes) => {
					setTimeout(() => {
						const reader = new plus.io.FileReader()
						reader.onloadend = async (res) => {
							const speech = res.target.result
							// 获取 base 64 图片编码的前缀
							const USERAVATARPREFIX = speech.substring(0, speech.indexOf('base64,') + 7)
							// 获取 base 64 图片的二进制到文本
							const USERAVATARURL = speech.substring(speech.indexOf('base64,') + 7)
							try {
								const otherParams = {
									...this.routeQueryparams
								}
								delete otherParams.type
								if (this.type === 'facial_input' || this.type === 'update_facial_input') {
									await submitEditUserFace({
										...otherParams,
										USERAVATARPREFIX,
										USERAVATARURL
									})
									await this.$store.dispatch('setVerification', '1')
									uni.$u.toast('人脸信息认证成功')
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										})
									}, 1000)
								} else if (this.type === 'scan_face') {
									await compareUserFaceCertify({
										...otherParams,
										USERAVATARPREFIX,
										USERAVATARURL
									})
									uni.$u.toast('人脸认证成功')
									setTimeout(() => {
										uni.navigateBack({
											delta: 2
										})
									}, 1000)
								} else if (this.type === 'learning_certification') {
									const res = await compareUserExamFaceCertify({
										...otherParams,
										USERAVATARPREFIX,
										USERAVATARURL
									})
									await uni.$u.toast('人脸认证成功, 请进入考试答题')
									setTimeout(() => {
										uni.$u.route({
											url: '/pages/train_management/course_exam',
											params: {
												...this.routeQueryparams
											}
										})
									}, 1000)
								}
							} catch (e) {
								console.log('扫描人脸过程中捕获的错误 :>>> ', e)
								if (e && e.msg) {
									uni.$u.toast(e.msg)
								}
								// this.showButton === "no" && this.snapshot();
							}
						}
						reader.readAsDataURL(plus.io.convertLocalFileSystemURL(zipRes.target))
					}, 4000)
				}
			)
		}
	}
}
</script>

<style scoped>
.container {
	background-color: #fff;
}

.livePusher {
	width: 700upx;
	height: 700upx;
}

.livefater {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	margin-bottom: 100upx;
	height: 700upx;
}

.fat {
	margin: 100upx;
}

.fatt {
	text-align: center;
	font-size: 36upx;
	font-weight: 800;
}

.gaiimg {
	width: 700upx;
	height: 700upx;
	margin-top: -700upx;
}
</style>