clockIn-wechat-uniapp-241018/pages/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="toHome" />

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

		<!-- 人脸识别图片 -->
		<view class="human-face-img">
			<image src="@/static/image/human/img.png" mode="widthFix"></image>
		</view>

		<!-- 人脸识别说明 -->
		<view class="human-face-desc">
			人脸认证仅能由<text class="name">李*意</text>本人完成验证时，请将镜头对准您的脸部
		</view>

		<!-- 说明 -->
		<view class="desc">
			<view class="desc-item">
				<image src="@/static/image/human/icon1.png" mode="widthFix"></image>
				<view class="text">避免遮挡</view>
			</view>
			<view class="desc-item">
				<image src="@/static/image/human/icon2.png" mode="widthFix"></image>
				<view class="text">光线充足</view>
			</view>
			<view class="desc-item">
				<image src="@/static/image/human/icon3.png" mode="widthFix"></image>
				<view class="text">正对充足</view>
			</view>
		</view>

		<!-- 立即核验 -->
		<div @click="photo" class="btn">
			立即核验
		</div>
	</view>
</template>

<script>
	export default {
		name: "HumanFace",
		data() {
			return {

			}
		},
		methods: {
			//返回首页
			toHome() {
				uni.navigateTo({
					url: "/pages/index/index"
				})
			},
			// 人脸认证通过后拍照
			photo() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera '], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
					}
				});
			}
		}
	}
</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>