smartSchoolClockApp/pages/authentication/authentication.vue

<template>
	<view class="container">
		<view class="notes">拍摄您本人人脸，确保对准手机，光线充足</view>
		<view class="msg">{{ name }} {{ cardNumber }}</view>
		<view class="photo"><img src="../../static/imgs/headImage.png" /></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/jsencrypt.js'

export default {
	data() {
		return {
			// 当前时间
			nowTime: '',
			// 场景照片
			sceneImage: '',
			// 经纬度
			lat: '',
			lng: '',
			// 地址
			location: '',
			// 规则id
			id: '',
			// 姓名
			name: '',
			// 学号
			cardNumber: '',
			// 身份证号
			idCard: '',
			// 是否需要场景照片,值为1时是不需要
			flag: ''
		}
	},
	onLoad(options) {
		let userInfo = uni.getStorageSync('clockIn_userInfo')
		if (userInfo) {
			this.name = userInfo.name
			this.cardNumber = userInfo.cardNumber
			this.idCard = userInfo.idCard
		}
		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
		}
	},
	methods: {
		// 拍摄人脸开启身份认证按钮回调
		handleTakePhotoClick() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['camera'],
				success: res => {
					// console.log(res);
					uni.showLoading({
						title: '上传中',
						mask: true
					})
					uni.uploadFile({
						url: `https://chtech.ncjti.edu.cn/campusclock/attendance/api/file/upload`,
						filePath: res.tempFilePaths[0],
						name: 'file',
						header: {
							platform: 2,
							'Accept-Language': 'zh-CN,zh;q=0.9'
						},
						success: uploadFileRes => {
							let imgUrl = JSON.parse(uploadFileRes.data).data
							// console.log(imgUrl)
							this.handleEncrypt(imgUrl)
						},
						fail: () => {
							uni.showToast({
								title: '上传失败',
								icon: 'error'
							})
						}
					})
				}
			})
		},
		// 对比人脸请求
		handleEncrypt(imgUrl) {
			uni.showLoading({
				title: '认证中',
				mask: true
			})
			uni.request({
				url: '/testingServer/faceVerification/api/identity-comparison-record/comparison',
				method: 'post',
				data: {
					data: RSAencrypt(
						encrypt(
							JSON.stringify({
								url: imgUrl,
								name: this.name,
								// name: '周祥',
								idCard: this.idCard,
								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
							})
						}
					}
				}
			})
		},
		// 打卡请求
		async handleUploading(imgUrl) {
			let res = await this.$myRequest_clockIn({
				url: '/attendance/api/sign/check/in/update',
				method: 'put',
				header: {
					'content-type': 'application/json'
				},
				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: '/pages/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: 60rpx;
		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>