修改人脸识别界面逻辑，增加人证比对

subpkg/addGuest/addGuest.vue

@@ -13,7 +13,7 @@
 						<view class="guest-form-bottom-left">
 							<u-form-item class="" :label="uploadPicTip" prop="guest.pic" labelWidth="160rpx">
 								<image v-if="userInfo.facePreCheck" style="width: 160rpx; height: 160rpx; "
-									:src="'data:image/jpeg;base64,' + guest.picBase64" @click="gotoPreCheck(guest.id)">
+									:src="'data:image/jpeg;base64,' + guest.picBase64" @click="gotoPreCheck(guest)">
 								</image>
 								<u-upload v-else :fileList="guest.pic" @afterRead="afterRead" @delete="deletePic"
 									:name="guest.id" :maxCount="1" :previewFullImage="true" :maxSize="1024*1024*1.5"
@@ -113,11 +113,12 @@
 					}
 				})
 			},
-			gotoPreCheck(id) {
-				this.guestIdNavigateToPreCheck = id
+			gotoPreCheck(guest) {
+				console.log(guest)
+				this.guestIdNavigateToPreCheck = guest.id
 				console.log("id", id, "guestId", this.guestIdNavigateToPreCheck)
 				uni.navigateTo({
-					url: '/subpkg/dynamicFaceCheck/dynamicFaceCheck?guestId=' + id
+					url: '/subpkg/dynamicFaceCheck/dynamicFaceCheck?guestId=' + guest.id + "&idNumber=" + guest.idNumber + "&name=" + guest.name
 				})
 			},
 			addGuest() {

subpkg/dynamicFaceCheck/dynamicFaceCheck.vue

@@ -1,370 +1,392 @@
 <template>
-	<view class="content">
-		<view class="camera-box" v-if="showcamera">
-			<view class="camera-bg-box">
-				<camera v-if="isOk" class="camera" device-position="front" flash="off" resolution="low"></camera>
-			</view>
-			<view v-show="tipsText" class="camera-tip">{{ tipsText }}</view>
-		</view>
-	</view>
+  <view class="content">
+    <view class="camera-box" v-if="showcamera">
+      <view class="camera-bg-box">
+        <camera
+          v-if="isOk"
+          class="camera"
+          device-position="front"
+          flash="off"
+          resolution="low"
+        ></camera>
+      </view>
+      <view v-show="tipsText" class="camera-tip">{{ tipsText }}</view>
+    </view>
+  </view>
 </template>
 <script>
-	import {
-		mapState,
-		mapMutations
-	} from 'vuex'
-	export default {
-		data() {
-			return {
-				cameraEngine: null,
-				VKSession: null,
-				showcamera: true,
-				tipsText: "开始人脸检测",
-				isOk: true,
-				guestId: 0
-			};
-		},
-		computed: {
-			...mapState('m_business', ['currentHotelId']),
-		},
-		onShow() {
-			let that = this;
-			wx.getSetting({
-				success(res) {
-					if (!res.authSetting["scope.camera"]) {
-						//获取摄像头权限
-						wx.authorize({
-							scope: "scope.camera",
-							success() {
-								that.showcamera = true;
-								wx.showToast({
-									title: "授权成功",
-									icon: "success",
-									duration: 1000,
-								});
-							},
-							fail() {
-								console.log("相机授权fail");
-								wx.showModal({
-									title: "提示",
-									content: "尚未进行授权，功能将无法使用",
-									cancelText: "取消",
-									confirmText: "授权",
-									success(res) {
-										console.log(res);
-										if (res.confirm) {
-											console.log("用户点击确定");
-											wx.openSetting({
-												//这里的方法是调到一个添加权限的页面，这里可以测试在拒绝授权的情况下设置中是否存在相机选项
-												success: (res) => {
-													if (!res.authSetting[
-															"scope.camera"]) {
-														wx.authorize({
-															scope: "scope.camera",
-															success() {
-																wx.showToast({
-																	title: "授权成功",
-																	icon: "success",
-																	duration: 1000,
-																});
-																setTimeout(
-																	function() {
-																		wx
-																			.navigateBack();
-																	}, 1000
-																);
-															},
-															fail() {
-																wx.showToast({
-																	title: "您已取消授权",
-																	icon: "error",
-																	duration: 1000,
-																});
-																setTimeout(
-																	function() {
-																		wx
-																			.navigateBack();
-																	}, 1000
-																);
-															},
-														});
-													}
-												},
-												fail: function() {
-													console.log("相机授权设置失败");
-												},
-											});
-										} else if (res.cancel) {
-											console.log("用户点击取消");
-											wx.showToast({
-												title: "您已取消授权",
-												icon: "error",
-												duration: 1000,
-											});
-											setTimeout(function() {
-												wx.navigateBack();
-											}, 1000);
-										}
-									},
-								});
-							},
-						});
-					}
-				},
-				fail(res) {
-					console.log("22222222222222222" + JSON.stringify(res));
-				},
-			});
-			console.log("OKkkkkkk");
-			// 初始化相机引擎，更改调用，引用新接口
-			this.initData();
-		},
+import { mapState, mapMutations } from "vuex";
+export default {
+  data() {
+    return {
+      cameraEngine: null,
+      VKSession: null,
+      showcamera: true,
+      tipsText: "开始人脸检测",
+      isOk: true,
+      guestId: 0,
+      idNumber: null,
+      name: null,
+    };
+  },
+  computed: {
+    ...mapState("m_business", ["currentHotelId"]),
+  },
+  onShow() {
+    let that = this;
+    wx.getSetting({
+      success(res) {
+        if (!res.authSetting["scope.camera"]) {
+          //获取摄像头权限
+          wx.authorize({
+            scope: "scope.camera",
+            success() {
+              that.showcamera = true;
+              wx.showToast({
+                title: "授权成功",
+                icon: "success",
+                duration: 1000,
+              });
+            },
+            fail() {
+              console.log("相机授权fail");
+              wx.showModal({
+                title: "提示",
+                content: "尚未进行授权，功能将无法使用",
+                cancelText: "取消",
+                confirmText: "授权",
+                success(res) {
+                  console.log(res);
+                  if (res.confirm) {
+                    console.log("用户点击确定");
+                    wx.openSetting({
+                      //这里的方法是调到一个添加权限的页面，这里可以测试在拒绝授权的情况下设置中是否存在相机选项
+                      success: (res) => {
+                        if (!res.authSetting["scope.camera"]) {
+                          wx.authorize({
+                            scope: "scope.camera",
+                            success() {
+                              wx.showToast({
+                                title: "授权成功",
+                                icon: "success",
+                                duration: 1000,
+                              });
+                              setTimeout(function () {
+                                wx.navigateBack();
+                              }, 1000);
+                            },
+                            fail() {
+                              wx.showToast({
+                                title: "您已取消授权",
+                                icon: "error",
+                                duration: 1000,
+                              });
+                              setTimeout(function () {
+                                wx.navigateBack();
+                              }, 1000);
+                            },
+                          });
+                        }
+                      },
+                      fail: function () {
+                        console.log("相机授权设置失败");
+                      },
+                    });
+                  } else if (res.cancel) {
+                    console.log("用户点击取消");
+                    wx.showToast({
+                      title: "您已取消授权",
+                      icon: "error",
+                      duration: 1000,
+                    });
+                    setTimeout(function () {
+                      wx.navigateBack();
+                    }, 1000);
+                  }
+                },
+              });
+            },
+          });
+        }
+      },
+      fail(res) {
+        console.log("22222222222222222" + JSON.stringify(res));
+      },
+    });
+    console.log("OKkkkkkk");
+    // 初始化相机引擎，更改调用，引用新接口
+    this.initData();
+  },
 
-		onLoad(options) {
-			console.log("tipsText", this.tipsText);
-			this.guestId = options.guestId
-			console.log('guestId ', this.guestId)
-		},
+  onLoad(options) {
+    console.log("tipsText", this.tipsText);
+    this.guestId = options.guestId;
+    this.idNumber = options.idNumber;
+    this.name = options.name;
+    console.log("guestId ", this.guestId);
+    console.log("idNumber ", this.idNumber);
+    console.log("name", this.name);
+  },
 
-		methods: {
-			//visionkit人脸必须函数
-			async detectFace(frame) {
-				console.log("frame", frame.data);
+  methods: {
+    //visionkit人脸必须函数
+    async detectFace(frame) {
+      console.log("frame", frame.data);
 
-				this.VKSession.detectFace({
-					frameBuffer: frame.data,
-					width: frame.width,
-					height: frame.height,
-					scoreThreshold: 0.8,
-					sourceType: 0,
-					modelMode: 1,
-				});
-			},
+      this.VKSession.detectFace({
+        frameBuffer: frame.data,
+        width: frame.width,
+        height: frame.height,
+        scoreThreshold: 0.8,
+        sourceType: 0,
+        modelMode: 1,
+      });
+    },
 
-			//初始化相机引擎
-			initData() {
-				let that = this;
-				//使用visionkit
-				that.cameraEngine = wx.createCameraContext();
-				let count = 0;
-				//初始化相机
-				const listener = that.cameraEngine.onCameraFrame((frame) => {
-					count++;
-					//每十帧分析一次
-					if (count === 10) {
-						this.detectFace(frame);
+    //初始化相机引擎
+    initData() {
+      let that = this;
+      //使用visionkit
+      that.cameraEngine = wx.createCameraContext();
+      let count = 0;
+      //初始化相机
+      const listener = that.cameraEngine.onCameraFrame((frame) => {
+        count++;
+        //每十帧分析一次
+        if (count === 10) {
+          this.detectFace(frame);
 
-						count = 0;
-					}
-				});
-				//开始监听数据帧
-				listener.start();
-				//创建VK对象
-				that.VKSession = wx.createVKSession({
-					version: "v1",
-					track: {
-						plane: {
-							mode: 1,
-						},
-						face: {
-							mode: 2
-						},
-					},
-				});
-				//启动VK对象
-				that.VKSession.start((errno) => {
-					console.log("VKSession.start errno", errno);
-					if (errno) {
-						wx.showModal({
-							title: "提示",
-							content: "网络错误,请退出后重试",
-							showCancel: false,
-							confirmText: "确定",
-							success(res) {
-								console.log(res);
-								if (res.confirm) {
-									wx.navigateBack();
-								}
-							},
-						});
-					}
-				});
+          count = 0;
+        }
+      });
+      //开始监听数据帧
+      listener.start();
+      //创建VK对象
+      that.VKSession = wx.createVKSession({
+        version: "v1",
+        track: {
+          plane: {
+            mode: 1,
+          },
+          face: {
+            mode: 2,
+          },
+        },
+      });
+      //启动VK对象
+      that.VKSession.start((errno) => {
+        console.log("VKSession.start errno", errno);
+        if (errno) {
+          wx.showModal({
+            title: "提示",
+            content: "网络错误,请退出后重试",
+            showCancel: false,
+            confirmText: "确定",
+            success(res) {
+              console.log(res);
+              if (res.confirm) {
+                wx.navigateBack();
+              }
+            },
+          });
+        }
+      });
 
-				that.VKSession.on("updateAnchors", (anchors) => {
-					console.log("anchors", anchors);
-					console.log("anchors.length", anchors.length);
-					anchors.forEach((anchor) => {
-						console.log("anchor.points", anchor.points);
-						console.log("anchor.origin", anchor.origin);
-						console.log("anchor.size", anchor.size);
-						console.log("anchor.angle", anchor.angle);
-						console.log("anchor", anchor.confidence);
-						if (anchors.length > 1) {
-							that.tipsText = "请保证只有一个人";
-						} else {
-							const {
-								pitch,
-								roll,
-								yaw
-							} = anchor.angle;
-							const standard = 0.3;
+      that.VKSession.on("updateAnchors", (anchors) => {
+        console.log("anchors", anchors);
+        console.log("anchors.length", anchors.length);
+        anchors.forEach((anchor) => {
+          console.log("anchor.points", anchor.points);
+          console.log("anchor.origin", anchor.origin);
+          console.log("anchor.size", anchor.size);
+          console.log("anchor.angle", anchor.angle);
+          console.log("anchor", anchor.confidence);
+          if (anchors.length > 1) {
+            that.tipsText = "请保证只有一个人";
+          } else {
+            const { pitch, roll, yaw } = anchor.angle;
+            const standard = 0.3;
 
-							if (
-								Math.abs(pitch) >= standard ||
-								Math.abs(roll) >= standard ||
-								Math.abs(yaw) >= standard
-							) {
-								that.tipsText = "请平视摄像头";
-							} else if (
-								anchor.origin.x < 0.15 ||
-								anchor.origin.x > 0.3 ||
-								anchor.origin.y < 0.2 ||
-								anchor.origin.y > 0.45
-							) {
-								this.tipsText = "请将人脸对准中心位置";
-							} else if (
-								anchor.confidence[0] <= 0.8 ||
-								anchor.confidence[1] <= 0.8 ||
-								anchor.confidence[2] <= 0.8 ||
-								anchor.confidence[3] <= 0.8 ||
-								anchor.confidence[4] <= 0.8
-							) {
-								that.tipsText = "请勿遮挡五官";
-							} else {
-								listener.stop();
-								that.tipsText = "即将拍照，请保持！";
-								setTimeout(function() {
-									that.handleTakePhotoClick();
-								}, 1000);
-								return;
-							}
-						}
-					});
-				});
-			},
+            if (
+              Math.abs(pitch) >= standard ||
+              Math.abs(roll) >= standard ||
+              Math.abs(yaw) >= standard
+            ) {
+              that.tipsText = "请平视摄像头";
+            } else if (
+              anchor.origin.x < 0.15 ||
+              anchor.origin.x > 0.3 ||
+              anchor.origin.y < 0.2 ||
+              anchor.origin.y > 0.45
+            ) {
+              this.tipsText = "请将人脸对准中心位置";
+            } else if (
+              anchor.confidence[0] <= 0.8 ||
+              anchor.confidence[1] <= 0.8 ||
+              anchor.confidence[2] <= 0.8 ||
+              anchor.confidence[3] <= 0.8 ||
+              anchor.confidence[4] <= 0.8
+            ) {
+              that.tipsText = "请勿遮挡五官";
+            } else {
+              listener.stop();
+              that.tipsText = "即将拍照，请保持！";
+              setTimeout(function () {
+                that.handleTakePhotoClick();
+              }, 1000);
+              return;
+            }
+          }
+        });
+      });
+    },
 
-			// 拍照
-			handleTakePhotoClick() {
-				this.tipsText = "正在上传...";
-				uni.showLoading({
-					title: "正在人脸认证，请稍后",
-				});
-				this.cameraEngine.takePhoto({
-					quality: "normal",
-					success: ({
-						tempImagePath
-					}) => {
-						let mybase64 = wx
-							.getFileSystemManager()
-							.readFileSync(tempImagePath, "base64");
-						this.afterRead(mybase64);
-					},
-				});
-			},
-			//上传
-			async afterRead(mybase64) {
-				let that = this;
-				uni.$http
-					.post("/faceVerification/checkPic", {
-						hotelId: this.currentHotelId,
-						faceData: mybase64,
-					})
-					.then((res) => {
-						uni.hideLoading();
-						console.log("mybase64", mybase64);
-						if (res.data.code === 200 && res.data.success === true) {
-							that.isOk = false;
-							uni.showModal({
-								content: "人脸认证成功！",
-								showCancel: false,
-								success: function(res) {
-									if (res.confirm) {
-										console.log("用户点击确定");
-										setTimeout(function() {
-											let pages = getCurrentPages();
-											console.log("pages", pages);
-											let prevPage = pages[pages.length - 2];
-											// prevPage.setData({
-											// 	pic: mybase64,
-											// });
-											wx.navigateBack({
-												success: () => {
-													prevPage.$vm
-														.setGuestPicBase64ById(that
-															.guestId, mybase64)
-												}
-											});
-										}, 1000);
-									}
-								},
-							});
-						} else {
-							uni.showModal({
-								content: "人脸认证失败,请重试",
-								showCancel: false,
-								success: function(res) {
-									if (res.confirm) {
-										console.log("用户点击确定");
-										that.initData();
-									}
-								},
-							});
-						}
-						console.log("checkPicRes", res);
-					});
-			},
-		},
-	};
+    // 拍照
+    handleTakePhotoClick() {
+      this.tipsText = "正在上传...";
+      uni.showLoading({
+        title: "正在人脸认证，请稍后",
+      });
+      this.cameraEngine.takePhoto({
+        quality: "normal",
+        success: ({ tempImagePath }) => {
+          let mybase64 = wx
+            .getFileSystemManager()
+            .readFileSync(tempImagePath, "base64");
+          this.afterRead(mybase64);
+        },
+      });
+    },
+    //上传
+    async afterRead(mybase64) {
+      let that = this;
+      uni.$http
+        .post("/faceVerification/checkPic", {
+          hotelId: this.currentHotelId,
+          faceData: mybase64,
+        })
+        .then(async (res) => {
+          uni.hideLoading();
+          console.log("mybase64", mybase64);
+          if (res.data.code === 200 && res.data.success === true) {
+            that.isOk = false;
+            uni.showLoading({
+              title: "正在人证比对，请稍后",
+            });
+            let yunjiFaceCheckInfo = {
+              idNo: that.idNumber,
+              name: that.name,
+              image: mybase64,
+            };
+            let res = await uni.$http.post(
+              "/faceVerification/yunjiVerification",
+              yunjiFaceCheckInfo
+            );
+            if (res.data.success === true) {
+              uni.showModal({
+                content: "人证比对通过！",
+                showCancel: false,
+                success: function (res) {
+                  if (res.confirm) {
+                    console.log("用户点击确定");
+                    setTimeout(function () {
+                      let pages = getCurrentPages();
+                      console.log("pages", pages);
+                      let prevPage = pages[pages.length - 2];
+                      // prevPage.setData({
+                      // 	pic: mybase64,
+                      // });
+                      wx.navigateBack({
+                        success: () => {
+                          prevPage.$vm.setGuestPicBase64ById(
+                            that.guestId,
+                            mybase64
+                          );
+                        },
+                      });
+                    }, 1000);
+                  }
+                },
+              });
+            } else {
+              uni.showModal({
+                content: "人证比对失败,请重试",
+                showCancel: false,
+                success: function (res) {
+                  if (res.confirm) {
+                    console.log("用户点击确定");
+                    that.initData();
+                  }
+                },
+              });
+            }
+          } else {
+            uni.showModal({
+              content: "人脸认证失败,请重试",
+              showCancel: false,
+              success: function (res) {
+                if (res.confirm) {
+                  console.log("用户点击确定");
+                  that.initData();
+                }
+              },
+            });
+          }
+          console.log("checkPicRes", res);
+        });
+    },
+  },
+};
 </script>
 
 <style lang="scss">
-	.content {
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
+.content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
 
-		.camera-box {
-			position: relative;
-			width: 100%;
-			height: 100%;
-		}
+  .camera-box {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
 
-		.camera-bg-box {
-			position: relative;
-			width: 100%;
-			height: 100%;
-			overflow: hidden;
+  .camera-bg-box {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
 
-			&::after {
-				content: "";
-				position: absolute;
-				left: 50%;
-				top: 50%;
-				transform: translateX(-50%) translateY(-50%);
-				border-radius: 100%;
-				width: 600rpx;
-				height: 600rpx;
-				border: 1000rpx solid rgba(0, 0, 0, 0.998);
-			}
-		}
+    &::after {
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%);
+      border-radius: 100%;
+      width: 600rpx;
+      height: 600rpx;
+      border: 1000rpx solid rgba(255, 255, 255, 0.998);
+    }
+  }
 
-		.camera {
-			width: 100%;
-			height: 100%;
-			border-top: 200rpx solid black;
-			border-bottom: 200rpx solid black;
-			box-sizing: border-box;
-		}
+  .camera {
+    width: 100%;
+    height: 100%;
+    border-top: 200rpx solid black;
+    border-bottom: 200rpx solid black;
+    box-sizing: border-box;
+  }
 
-		.camera-tip {
-			position: absolute;
-			bottom: 220rpx;
-			left: 50%;
-			color: white;
-			transform: translateX(-50%);
-			// .text-40-fff-600();
-		}
-	}
+  .camera-tip {
+    position: absolute;
+    bottom: 220rpx;
+    left: 50%;
+    color: rgb(0, 0, 0);
+    transform: translateX(-50%);
+    // .text-40-fff-600();
+  }
+}
 </style>