<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"; export default { data() { return { startPreviewTimer: null, // 开始预览计时器实例 isFirst: "", // 是否为第一次开启摄像头 type: "", // 摄像头使用类别 // showButton: "yes", params: {}, // 额外携带的参数 btnTextStr: "拍照" }; }, onReady() { this.context = uni.createLivePusherContext("livePusher", this); this.startPreviewTimer = setInterval(() => { this.startPreview(); }, 1000); }, onLoad(query) { // facial_input 更新人脸 isFirst 1 第一次登录添加人脸 // scan_face 扫码 // learning_certification 学习认证 // meeting_attendance 会议签到 const typeKey = ["scan_face", "learning_certification"]; if (!typeKey.includes(query.type)) { uni.$u.toast("type参数错误"); return; } this.isFirst = query.isFirst || ""; if (query.type === "scan_face") this.btnTextStr = "签到"; if (query.type === "learning_certification") this.btnTextStr = "开始考试"; this.type = query.type; // this.showButton = query.showButton || "yes"; this.params = query.params ? JSON.parse(query.params) : {}; }, onBackPress(event) { if (event.from === "backbutton") { if ( (this.type === "scan_face" && this.isFirst === "1") || this.type === "learning_certification" ) { uni.$u.toast("请完成人脸验证"); return true; } } return false; }, 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; const USERAVATARPREFIX = speech.substring( 0, speech.indexOf("base64,") + 7, ); const USERAVATARURL = speech.substring( speech.indexOf("base64,") + 7, ); try { if (this.type === "scan_face") { // await setScanCodeToVerifyFace({ // USERAVATARPREFIX, // USERAVATARURL, // ...this.params, // }); uni.$u.toast("认证成功"); uni.navigateBack({ delta: 2 }); } else if (this.type === "learning_certification") { // await setVerifyFace({ // USERAVATARPREFIX, // USERAVATARURL, // ...this.params, // }); // await this.$store.dispatch("setVerification", true); uni.$u.toast("认证成功"); // uni.navigateBack(); uni.$u.route({ url: '/pages/train_management/course_exam' }) } } catch (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>