<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) { console.log('query: >> ', 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) { // return false // }, onUnload() { this.startPreviewTimer && clearInterval(this.startPreviewTimer) }, methods: { handleBack() { uni.navigateBack({ delta: 2, }) }, 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>