新增人脸识别页面

manifest.json

@@ -52,7 +52,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wxe7ae8cbe1673834c",
+        "appid" : "wxf7152f59d366236b",
         "setting" : {
             "urlCheck" : false
         },

pages.json

@@ -11,6 +11,29 @@
 			"style": {
 				"navigationBarTitleText": "我的"
 			}
+<<<<<<< HEAD
+		},
+		{
+			"path": "pages/record/record",
+			"style": {
+				"navigationBarTitleText": "打卡记录"
+			}
+		},
+		{
+			"path" : "pages/autonym/autonym",
+			"style" : 
+			{
+				"navigationBarTitleText" : ""
+			}
+		},
+		{
+			"path" : "pages/human/human",
+			"style" : 
+			{
+				"navigationBarTitleText" : ""
+			}
+=======
+>>>>>>> 260f70e59eebfa09281d5d57173337efd210e7dc
 		}
 	],
 	"preloadRule": {

pages/human/human.vue

@@ -0,0 +1,149 @@
+<!-- 人脸识别 -->
+<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>

pages/index/index.vue

@@ -16,14 +16,14 @@
 				</view>
 			</view>
 			<view class="map">
-				<map style="width: 100%; height: 100%" :latitude="latitude" :longitude="longitude" :markers="covers">
+				<map style="width: 100%; height: 100%" :latitude="latitude" :longitude="longitude" :markers="covers" :scale="18">
 				</map>
 			</view>
 		</view>
 
 		<!-- 打卡按钮 -->
 		<view class="punch-card">
-			<view class="circle">
+			<view @click="callCard" class="circle">
 				<view class="title">拍照打卡</view>
 				<view class="time">2021-10-10 10:00:00</view>
 			</view>
@@ -91,18 +91,73 @@
 						self.longitude = res.longitude;
 						self.latitude = res.latitude;
 						self.covers.push({
-							id : 1,
+							id: 1,
 							latitude: res.latitude,
 							longitude: res.longitude,
 							iconPath: '/static/image/home/location.png',
+<<<<<<< HEAD
+							width: 30,
+							height: 30
+=======
 							width : 38,
 							height : 30,
+>>>>>>> 260f70e59eebfa09281d5d57173337efd210e7dc
 						})
-						console.log('当前位置的经度：' + res.longitude);
-						console.log('当前位置的纬度：' + res.latitude);
+					},
+					fail() {
+						self.checkAndRequestLocationPermission()
 					}
 				});
 
+			},
+
+			checkAndRequestLocationPermission() {
+				let self = this;
+				uni.getSetting({
+					success: function(res) {
+						if (!res.authSetting['scope.userLocation']) {
+							// 用户未授权定位权限  
+							uni.showModal({
+								title: '提示',
+								content: '当前定位未开启，请点击确定手动开启定位',
+								success: function(modalRes) {
+									if (modalRes.confirm) {
+										// 用户选择确认开启定位  
+										uni.openSetting({
+											success: function(settingRes) {
+												if (settingRes.authSetting[
+														'scope.userLocation']) {
+													// 重新获取位置信息  
+													self.getLocation();
+												} else {
+													// 用户未开启定位权限  
+													console.log('用户未开启定位权限');
+												}
+											},
+											fail: function(err) {
+												console.log('打开设置页面失败：', err);
+											}
+										});
+									} else {
+										// 用户选择取消  
+										self.getLocation()
+									}
+								}
+							});
+						} else {
+							// 用户已授权定位权限但获取位置失败（可能是设备未开启定位服务）  
+							console.log('用户已授权定位权限，但获取位置失败');
+							// 可以提示用户检查设备定位服务是否开启  
+						}
+					}
+				});
+			},
+			
+			//打卡(跳转人脸识别)
+			callCard(){
+				uni.navigateTo({
+					url: "/pages/human/human"
+				})
 			}
 		}
 	}