waterElectricityMinApp/pagesClockIn/authentication/authentication.vue

<template>
	<view class="container">
		<view class="msg">{{ name }} {{ cardNumber }}</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 {
			// 当前时间
			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() {
			// 创建 camera 上下文 CameraContext 对象
			this.cameraEngine = uni.createCameraContext()
			// 获取 Camera 实时帧数据
			const listener = this.cameraEngine.onCameraFrame((frame) => {
				if (this.tempImg) {
					return
				}
			})
			// 5、开始监听帧数据
			listener.start()
		},

		// 拍照点击
		handleTakePhotoClick() {
			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.handleOkClick()
				}
			})
		},
		// 上传
		handleOkClick() {
			//  这里的 this.tempImg 是拍照拿到的图片路径
			this.upLoadOne(this.tempImg)
		},
		upLoadOne(url) {
			uni.showLoading({
				title: '认证中，请稍后...'
			})
			setTimeout(() => {
				uni.uploadFile({
					url: `https://chtech.ncjti.edu.cn/gxy/facedemo/face-api/ihotel/mapper/face/compareTwoFace`,
					filePath: url,
					name: 'file',
					formData: {
						mCardNumber: this.cardNumber
					},
					header: {
						platform: 2,
						'Accept-Language': 'zh-CN,zh;q=0.9'
					},
					success: (uploadFileRes) => {
						// console.log(uploadFileRes)
						let temRes = JSON.parse(uploadFileRes.data)
						if (temRes.code === '200') {
							let imgUrl = temRes.data.fileUrl
							uni.showToast({
								title: '对比成功'
							})
							setTimeout(() => {
								this.handleUploading(imgUrl)
							}, 1500)
						} else {
							uni.showToast({
								title: `${temRes.message},请重新认证`,
								icon: 'none',
								duration: 2000
							})
							this.tempImg = ''
							this.isAuthCamera = true
						}
					},
					fail: () => {
						uni.showToast({
							title: '上传失败',
							icon: 'error'
						})
					}
				})
			}, 1000)
		},
		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: 120rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.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>