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>
		</view>

		<!-- 人脸识别说明 -->
		<view class="human-face-desc">
			人脸认证仅能由<text class="name">{{ userInfo.auth.name }}</text>本人完成验证时，请将镜头对准您的脸部
		</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">
			<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,
			}
		},
		computed: {
			...mapState(['teamList', 'userInfo']),
		},
		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"
						// })
					}
				});
			},
			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)
					}
				})
			},
		}
	}
</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: 70%;
			}
		}

		// 人脸识别说明
		.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>