waterElectricityMinApp/pagesClockIn/authentication/authentication.vue

<template>
	<view class="container">
		<view class="notes">拍摄您本人人脸，确保对准手机，光线充足</view>
		<view class="msg">{{ name }} {{ cardNumber }}</view>
		<!-- <view class="info">
			<span v-if="tipsText">{{ tipsText }}</span>
		</view> -->
		<view class="photo">
			<camera class="img" v-if="isAuthCamera" device-position="front" flash="off" resolution="high" />
			<img v-else :src="tempImg" />
		</view>
		<view class="button" @click="handleTakePhotoClick">开启身份认证</view>

		<!-- 认证结果弹窗 -->
		<uni-popup ref="popup" :is-mask-click="false">
			<view class="popup-content">
				<view class="title">
					<view class="icon"><img src="./imgs/success.png" /></view>
					<view class="title_info">打卡成功</view>
				</view>
				<view class="time">{{ nowTime }}</view>
				<view class="popup_button" @click="handleGoHome">我知道了</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { encrypt, decrypt } from '../util/encryp.js'
import { RSAencrypt } from '../util/WxmpRsa.js'
export default {
	data() {
		return {
			// 错误文案提示
			tipsText: '人脸检测初始化失败，请退出重试',
			// 当前时间
			nowTime: '',
			// 本地图片路径 被匹对照片
			tempImg: '',
			// 场景照片
			sceneImage: '',
			// 经纬度
			lat: '',
			lng: '',
			// 地址
			location: '',
			// 规则id
			id: '',
			// 相机引擎
			cameraEngine: null,
			// 是否拥有相机权限
			isAuthCamera: true,
			// 姓名
			name: '',
			// 身份证号
			cardNumber: '',
			// 是否需要场景照片,值为1时是不需要
			flag: ''
		}
	},
	onLoad(options) {
		let userInfo = uni.getStorageSync('userInfo')
		if (userInfo) {
			this.name = userInfo.name
			this.cardNumber = userInfo.cardNumber
		}
		this.id = options.id
		this.lat = options.latitude
		this.lng = options.longitude
		this.location = options.address
		if (options.imgUrl) {
			this.sceneImage = options.imgUrl
		}
		if (options.flag) {
			this.flag = options.flag
		}
		this.initData()
	},
	methods: {
		// 初始化相机引擎
		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 = '请点击下方按钮开始认证'
						// 		// 这里可以写自己的逻辑了
						// 	}
						// }
					},
					fail: err => {
						if (err.x == -1 || err.y == -1) {
							this.tipsText = '检测不到人'
						} else {
							this.tipsText = '网络错误，请退出页面重试'
						}
					}
				})
			})
			// 5、开始监听帧数据
			listener.start()
			// #endif
		},

		// 拍照点击
		handleTakePhotoClick() {
			// if (this.tipsText != '' && this.tipsText != '请点击下方按钮开始认证') {
			// 	return
			// }
			uni.getSetting({
				success: res => {
					if (!res.authSetting['scope.camera']) {
						this.isAuthCamera = true
						uni.openSetting({
							success: res => {
								if (res.authSetting['scope.camera']) {
									this.isAuthCamera = true
								}
							}
						})
					}
				}
			})
			this.cameraEngine.takePhoto({
				quality: 'high',
				success: ({ tempImagePath }) => {
					this.tempImg = tempImagePath
					this.isAuthCamera = false
					this.tipsText = ''
					this.handleOkClick()
				}
			})
		},
		// 上传
		handleOkClick() {
			//  这里的 this.tempImg 是经过人脸检测后  拍照拿到的路径
			this.upLoadOne(this.tempImg)
		},
		upLoadOne(url) {
			uni.showLoading({
				title: '认证中，请稍后...'
			})
			setTimeout(() => {
				uni.uploadFile({
					url: `https://chtech.ncjti.edu.cn/campusclock/attendance/api/file/upload`,
					filePath: url,
					name: 'file',
					header: {
						platform: 2,
						'Accept-Language': 'zh-CN,zh;q=0.9'
					},
					success: uploadFileRes => {
						let imgUrl = JSON.parse(uploadFileRes.data).data
						// this.handleUploading(imgUrl)
						this.handleEncrypt(imgUrl)
					},
					fail: () => {
						uni.showToast({
							title: '上传失败',
							icon: 'error'
						})
					}
				})
			}, 1000)
		},

		// 对比人脸请求
		handleEncrypt(imgUrl) {
			uni.showLoading({
				title: '认证中，请稍后...'
			})
			uni.request({
				url: 'https://chtech.ncjti.edu.cn/testingServer/faceVerification/api/identity-comparison-record/comparison',
				method: 'post',
				data: {
					data: RSAencrypt(
						encrypt(
							JSON.stringify({
								url: imgUrl,
								name: this.name,
								// name: '周祥',
								idCard: this.cardNumber,
								category: '校园打卡',
								studentNumber: this.cardNumber
							})
						)
					)
				},
				success: res => {
					if (res.data.status == 200) {
						let result = JSON.parse(decrypt(res.data.authorization))
						// console.log(result)
						if (result.status == 200) {
							uni.showToast({
								title: result.desc
							})
							setTimeout(() => {
								this.handleUploading(imgUrl)
							}, 1500)
						} else {
							uni.showToast({
								title: `${result.desc},请重新认证`,
								icon: 'error',
								duration: 2000
							})
							this.tempImg = ''
							this.isAuthCamera = true
							// this.initData()
						}
					}
				}
			})
		},
		async handleUploading(imgUrl) {
			let res = await this.$myRequest_clockIn({
				url: '/attendance/api/sign/check/in/update',
				method: 'put',
				header: {
					Authorization: uni.getStorageSync('token'),
					platform: 2,
					'Accept-Language': 'zh-CN,zh;q=0.9'
				},
				data: {
					id: this.id,
					lat: this.lat,
					lng: this.lng,
					location: this.location,
					matchFaceImage: imgUrl,
					sceneImage: this.flag == 1 ? '' : this.sceneImage
				}
			})
			// console.log(res);
			if (res.code == 200) {
				this.getNowTime()
				this.$refs.popup.open()
			}
		},
		// 点击 我知道了按钮 跳回首页
		handleGoHome() {
			this.$refs.popup.close()
			uni.reLaunch({
				url: '/pagesClockIn/home/home'
			})
		},
		// 获取当前时间
		getNowTime() {
			let date = new Date()
			let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
			let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
			let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
			this.nowTime = hours + ':' + minutes + ':' + seconds
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	.notes {
		margin-top: 110rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.msg {
		margin-top: 10rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.info {
		margin-top: 100rpx;
		height: 40rpx;
		text-align: center;
		color: #5393ff;
	}

	.photo {
		margin: 0 auto;
		margin-top: 180rpx;
		width: 375rpx;
		height: 375rpx;
		border-radius: 188rpx;
		overflow: hidden;

		.img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		img {
			width: 100%;
			height: 100%;
		}
	}

	.button {
		margin: 0 auto;
		margin-top: 127rpx;
		width: 430rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #fff;
		border-radius: 21rpx;
		font-size: 32rpx;
		background: linear-gradient(180deg, rgba(0, 172, 252, 1) 0%, rgba(0, 130, 252, 1) 100%);
	}

	.popup-content {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		width: 630rpx;
		height: 376rpx;
		border-radius: 33rpx;
		background-color: #fff;

		.title {
			display: flex;
			justify-content: center;
			align-items: center;

			.icon {
				width: 40rpx;
				height: 40rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.title_info {
				margin-left: 8rpx;
				font-size: 36rpx;
				font-weight: 800;
				color: #0082fc;
			}
		}

		.time {
			font-size: 32rpx;
		}

		.popup_button {
			width: 50%;
			text-align: center;
			font-size: 32rpx;
			color: #0082fc;
		}
	}
}
</style>