clockIn-wechat-uniapp-241018/pages/subPack/human/human.vue

<!-- 人脸识别 -->
<template>
	<view class="human-face">
		<!-- 自定义导航栏 -->
		<uni-nav-bar dark :fixed="true" shadow background-color="var(--main-color)" status-bar left-icon="left"
			title="人脸识别" @clickLeft="$utils.navigateBack" />

		<!-- 人脸识别说明标题 -->
		<view class="human-face-title">为保证本人操作，请进行人脸验证</view>

		<!-- 人脸识别图片 -->
		<view class="human-face-img">
			<image v-if="!isPhoto"
				src="https://tennis-oss.xzaiyp.top/2024-10-22/508376c5-64b2-472f-8e25-a2469b632a39.png" mode="widthFix">
			</image>
			
			<image v-else-if="!!tempImg"
			:src="tempImg" mode="widthFix">
			</image>
			
			<camera 
			v-else 
			:device-position="devicePosition ?'front': 'back'" 
			class="camera"
			flash="off" 
			resolution='high' />
		</view>

		<!-- 人脸识别说明 -->
		<view class="human-face-desc"
		v-if="!isPhoto">
			人脸认证仅能由<text class="name">{{ userInfo.auth.name }}</text>本人完成验证时，请将镜头对准您的脸部
		</view>
		
		<view class="human-face-desc"
		v-else>
			{{ tipsText }}
		</view>

		<!-- 说明 -->
		<view class="desc">
			<view class="desc-item">
				<image src="https://tennis-oss.xzaiyp.top/2024-10-22/a0bf2da9-c25a-4d5c-8c77-7318bd86227d.png"
					mode="widthFix"></image>
				<view class="text">避免遮挡</view>
			</view>
			<view class="desc-item">
				<image src="https://tennis-oss.xzaiyp.top/2024-10-22/feb72bfb-8271-4e48-8081-d72811543918.png"
					mode="widthFix"></image>
				<view class="text">光线充足</view>
			</view>
			<view class="desc-item">
				<image src="https://tennis-oss.xzaiyp.top/2024-10-22/5fd8a6a7-a13e-44d6-acf1-a7ada94c699d.png"
					mode="widthFix"></image>
				<view class="text">正对充足</view>
			</view>
		</view>
		
		
		<!-- 实名认证 -->
		<div class="btn"
		@click="handleTakePhotoClick"
		v-if="tipsText == '请拍照' && type == 'auth'">
			立即核验
		</div>
		
		
		<div class="btn"
		@click="handleTakePhotoClick"
		v-else-if="tipsText == '请拍照'">
			<uv-upload 
			multiple 
			:maxCount="1" 
			capture="camera"
			height="180rpx"
			@afterRead="afterRead">
				<view style="display: flex;justify-content: center;
				width: 600rpx;">
					立即核验
				</view>
			</uv-upload>
		</div>
		

	</view>
</template>

<script>
	import position from '@/utils/position.js'
	import {
		mapState
	} from 'vuex'
	export default {
		name: "HumanFace",
		data() {
			return {
				isPhoto: false,
				form : {
					pic : '',
				},
				isLocationSubmit : false,//定位完成时提交
				
				
				tipsText: '', // 错误文案提示
				tempImg: '', // 本地图片路径
				
				cameraEngine: null, // 相机引擎
				devicePosition: true, // 摄像头朝向
				isAuthCamera: true, // 是否拥有相机权限
				
				type : '',
			}
		},
		computed: {
			...mapState(['teamList', 'userInfo', 'authInfo']),
		},
		onLoad(args) {
			if(args.type){
				this.type = args.type
			}
			this.initData()
		},
		onShow() {
			let self = this
			position.getLocationDetail()
			.then(res => {
				console.log(res);
				self.form.lat = res.position.latitude
				self.form.lon = res.position.longitude
				self.form.address = res.address
				if(self.isLocationSubmit){
					self.submit()
				}
			})
		},
		methods: {
			afterRead(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.form.pic = url
						if(self.form.lat){
							self.submit()
						}else{
							uni.showLoading({
								title: '定位中...'
							})
							self.isLocationSubmit = true
						}
					})
				})
			},
			// 人脸认证通过后拍照
			photo() {
				let self = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera '], //这要注意，camera掉拍照，album是打开手机相册
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						//后续在这里上传文件
						
						self.$Oss.ossUpload(res.tempFilePaths[0]).then(url => {
							self.form.pic = url
							
							if(self.form.lat){
								self.submit()
							}else{
								uni.showLoading({
									title: '定位中...'
								})
								self.isLocationSubmit = true
							}
							
						})
						
						
						// uni.navigateTo({
						// 	url: "/pages/subPack/punchCard/punchCard"
						// })
					}
				});
			},
			async submit(){
				if (this.$utils.verificationAll(this.form, {
						lat : '经纬度缺失，请打开GPS',
						lon : '经纬度缺失，请打开GPS',
						address : '获取地址失败',
						pic : '请拍照',
					})) {
					return
				}
				
				this.$api('clock', this.form, res => {
					if(res.code == 200){
						
						uni.showToast({
							title: '打卡成功',
							icon:'none'
						})
						
						setTimeout(uni.navigateBack, 1000, -1)
					}else{
						this.$nextTick(() => {
							this.form.image = ''
							this.tempImg = ''
						})
					}
				})
			},
			// 初始化相机引擎
			initData() {
				// #ifdef MP-WEIXIN
				
			
				// 1、初始化人脸识别
				wx.initFaceDetect()
				// 2、创建 camera 上下文 CameraContext 对象
				this.cameraEngine = wx.createCameraContext()
				// 3、获取 Camera 实时帧数据
				const listener = this.cameraEngine.onCameraFrame((frame) => {
					if (this.tempImg) {
						return;
					}
					// 4、人脸识别，使用前需要通过 wx.initFaceDetect 进行一次初始化，推荐使用相机接口返回的帧数据
					wx.faceDetect({
						frameBuffer: frame.data,
						width: frame.width,
						height: frame.height,
						enablePoint: true,
						enableConf: true,
						enableAngle: true,
						enableMultiFace: true,
						success: (faceData) => {
							let face = faceData.faceInfo[0]
							if (faceData.x == -1 || faceData.y == -1) {
								this.tipsText = '检测不到人'
							}
							if (faceData.faceInfo.length > 1) {
								this.tipsText = '请保证只有一个人'
							} else {
								const {
									pitch,
									roll,
									yaw
								} = face.angleArray;
								const standard = 0.5
								if (Math.abs(pitch) >= standard || Math.abs(roll) >= standard ||
									Math.abs(yaw) >= standard) {
									this.tipsText = '请平视摄像头'
								} else if (face.confArray.global <= 0.8 || face.confArray.leftEye <=
									0.8 || face.confArray.mouth <= 0.8 || face.confArray.nose <= 0.8 ||
									face.confArray.rightEye <= 0.8) {
									this.tipsText = '请勿遮挡五官'
								} else {
									this.tipsText = '请拍照'
									// 这里可以写自己的逻辑了
									// this.handleTakePhotoClick()
								}
							}
						},
						fail: (err) => {
							if (err.x == -1 || err.y == -1) {
								this.tipsText = '检测不到人'
							} else {
								this.tipsText = err.errMsg || '网络错误，请退出页面重试'
							}
						},
					})
				})
				// 5、开始监听帧数据
				listener.start()
				
				this.isPhoto = true
				// #endif
			},

			// 拍照
			handleTakePhotoClick() {
				if (this.tipsText != "" 
				&& this.tipsText != "请拍照" 
				&& !this.tempImg) {
					return;
				}

				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.camera']) {
							this.isAuthCamera = false
							uni.openSetting({
								success: (res) => {
									if (res.authSetting['scope.camera']) {
										this.isAuthCamera = true;
									}
								}
							})
						}
					}
				})
				this.cameraEngine.takePhoto({
					quality: "high",
					success: ({
						tempImagePath
					}) => {
						this.tempImg = tempImagePath
						
						// 上传图片
						this.$Oss.ossUpload(tempImagePath).then(url => {
							
							// 实名认证，上传人脸
							if(this.type == 'auth'){
								let form = {
									...this.authInfo,
									pic : url
								}
								this.$api('authApply', form, res => {
									if(res.code == 200){
										setTimeout(uni.reLaunch, 1000, {
											url: '/pages/index/index'
										})
									}else{
										setTimeout(uni.navigateBack, 1000, -1)
									}
								})
								return
							}
							
							this.form.image = url
							if(this.form.lat){
								this.submit()
							}else{
								uni.showLoading({
									title: '定位中...'
								})
								this.isLocationSubmit = true
							}
							
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.human-face {
		min-height: 100vh;
		background: white;

		// 人脸识别说明标题
		.human-face-title {
			font-size: 35rpx;
			font-weight: bold;
			margin: 60rpx 0rpx;
			text-align: center;
		}

		// 人脸识别图片
		.human-face-img {
			display: flex;
			justify-content: center;
			image {
				width: 500rpx;
				border-radius: 50%;
			}
			.camera{
				width: 500rpx;
				height: 500rpx;
				border-radius: 50%;
			}
		}

		// 人脸识别说明
		.human-face-desc {
			color: #707070;
			width: 55%;
			font-size: 30rpx;
			margin: 30rpx auto;
			text-align: center;

			.name {
				color: $main-color;
			}
		}

		// 说明
		.desc {
			width: 80%;
			display: flex;
			flex-wrap: wrap;
			margin: 100rpx auto;

			.desc-item {
				width: 33.33%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 50%;
				}

				.text {
					font-size: 30rpx;
					color: #707070;
					margin-top: 10rpx;
				}
			}
		}

		// 立即核验
		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 83%;
			background: $main-color;
			color: white;
			height: 100rpx;
			border-radius: 50rpx;
			margin: 0rpx auto;
		}
	}
</style>