提交

miniprogram/components/camera-face/index.json

@@ -1,4 +1,6 @@
 {
   "component": true,
-  "usingComponents": {}
+  "usingComponents": {
+    "faceImage": "../../components/face_img/index"
+  }
 }

miniprogram/components/camera-face/index.wxml

@@ -4,7 +4,8 @@
   <view class="head">
     <!-- 请拿起手机正对摄像头——请向左转——请向右转 -->
     <view class="top-tips">{{topTips}}</view>
-
+    <!-- 人脸验证过程提示 -->
+    <faceImage wx:if="{{topTips === '请向左转头' || topTips === '请向右转头'}}" topTips="{{topTips}}" />
     <camera mode="normal" device-position="{{devicePosition}}" frame-size="{{frameSize}}" resolution="{{resolution}}" flash="{{flash}}" binderror="error" bindstop="stop" class="camera">
       <view wx:if="{{seconds>0}}" class="half-circle">
         {{seconds}}s

miniprogram/components/face_img/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

miniprogram/components/face_img/index.scss

@@ -0,0 +1,22 @@
+/* components/face_img/index.wxss */
+.face_img {
+  width: 182rpx;
+  height: 240rpx;
+  background: #FFFFFF;
+  box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 42, 74, 0.23);
+  border-radius: 2rpx;
+  padding-top: 16rpx;
+  position: fixed;
+  top: 72rpx;
+  right: 40rpx;
+  text-align: center;
+
+  .face{
+    width: 172rpx;
+    height: 172rpx;
+  }
+  .face_to{
+    width: 90rpx;
+    height: 28rpx;
+  }
+}

miniprogram/components/face_img/index.ts

@@ -0,0 +1,25 @@
+// components/face_img/index.ts
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    topTips: {
+      type: String
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

miniprogram/components/face_img/index.wxml

@@ -0,0 +1,6 @@
+<!--components/face_img/index.wxml-->
+<view class="face_img">
+  <image class="face" src="./icon/face.jpg" mode="scaleToFill" />
+  <image wx:if="{{topTips === '请向左转头' }}" class="face_to" src="./icon/left.jpg" mode="scaleToFill" />
+  <image wx:if="{{topTips === '请向右转头' }}" class="face_to" src="./icon/right.jpg" mode="scaleToFill" />
+</view>

miniprogram/pages/faceRecognitionVK/index.json

@@ -2,5 +2,6 @@
   "navigationBarBackgroundColor": "#2AB0FF",
   "navigationBarTextStyle": "white",
   "usingComponents": {
+    "faceImage": "../../components/face_img/index"
   }
 }

miniprogram/pages/faceRecognitionVK/index.wxml

@@ -2,6 +2,8 @@
   <view class="head">
     <!-- 请拿起手机正对摄像头——请向左转——请向右转 -->
     <view class="top-tips">{{topTips}}</view>
+    <!-- 人脸验证过程提示 -->
+    <faceImage wx:if="{{topTips === '请向左转头' || topTips === '请向右转头'}}" topTips="{{topTips}}" />
 
     <camera class="camera" mode="normal" resolution="medium" device-position="front" flash="off" frame-size="medium" bindstop="improperStop" binderror="unauthorized" 	bindinitdone="initialization">
       <view wx:if="{{seconds>0}}" class="half-circle">