人脸识别

pages.json

@@ -191,6 +191,13 @@
     	{
     		"navigationStyle" : "custom"
     	}
+    },
+    {
+    	"path" : "pages/YNEduApp/user/faceScan",
+    	"style" : 
+    	{
+    		"navigationBarTitleText" : "人脸识别"
+    	}
     }
   ],
   "globalStyle": {

pages/YNEduApp/exam/examination.vue

@@ -117,6 +117,7 @@ export default {
       time: 30 * 60 * 1000,
       random1: 0,
       random2: 0,
+      hasScanned: false,
       // 答题时间
       answerTime: 0,
       currentIndex: 0,
@@ -264,14 +265,6 @@ export default {
     this.random1 = Math.floor(Math.random() * 100000) + 420000 // random1 在 7-13分钟之间
     this.random2 = Math.floor(Math.random() * 100000) + 900000 // random2 在 15-19分钟之间
     console.log('🚀 ~ mounted ~ this.random1:', this.random1, this.random2)
-
-    setTimeout(() => {
-      this.openFaceScan()
-    }, this.random1)
-
-    setTimeout(() => {
-      this.openFaceScan()
-    }, this.random2)
   },
   methods: {
     // 获取列表
@@ -294,6 +287,14 @@ export default {
       // console.log('🚀 ~ changeCountDown ~ time:', time)
       this.answerTime =
         this.time - (time.days * 24 * 60 * 60 + time.hours * 60 * 60 + time.minutes * 60 + time.seconds) * 1000
+      // console.log('🚀 ~ changeCountDown ~ this.answerTime:', this.answerTime)
+      if (this.answerTime > this.random1 && this.answerTime < this.random2 && !this.hasScanned) {
+        this.openFaceScan()
+        this.hasScanned = true
+      } else if (this.answerTime > this.random2 && this.hasScanned) {
+        this.openFaceScan()
+        this.hasScanned = false
+      }
       if (this.answerTime == this.time) {
         // 提示: 时间结束, 自动提交
         this.$refs.uToast.show({

pages/YNEduApp/user/faceScan.vue

@@ -0,0 +1,142 @@
+<template>
+  <view>
+    <div v-if="isShow">
+      <div class="title">人脸识别扫描</div>
+      <div class="title-tip">请正对手机，确保光线充足</div>
+      <div class="face-scan">
+        <u-icon name="/static/images/人脸识别.png" size="180" />
+      </div>
+      <div class="face-tip">人脸验证过程中仅能由本人完成</div>
+      <div class="tip-icon">
+        <div class="tip-item">
+          <u-icon name="/static/images/避免遮挡.png" size="40" />
+          <div>避免遮挡</div>
+        </div>
+        <div class="tip-item">
+          <u-icon name="/static/images/光线充足.png" size="40" />
+          <div>光线充足</div>
+        </div>
+        <div class="tip-item">
+          <u-icon name="/static/images/正对手机.png" size="40" />
+          <div>正对手机</div>
+        </div>
+      </div>
+      <div class="btn"><u-button type="primary" shape="circle" text="开始录入" @click="openFaceScan" /></div>
+    </div>
+
+    <div v-else>
+      <div class="img">
+        <u--image :src="url" width="180px" height="180px" shape="circle" />
+      </div>
+      <div class="img-title">您已完成人脸信息采集</div>
+      <div class="img-tip">温馨提示</div>
+      <div class="img-tip-content">收集您的信息，以实现在考试中检测是否是您本人操作，请务必录入您本人的面部信息</div>
+      <div class="btn">
+        <u-button type="primary" shape="circle" text="确定录入" @click="handleSubmit" />
+        <u-button type="" shape="circle" text="重新录入" @click="openFaceScan" style="margin: 20px 0" />
+      </div>
+    </div>
+  </view>
+</template>
+
+<script>
+import face from '@/uni_modules/mcc-face/index.js'
+
+export default {
+  data() {
+    return {
+      isShow: true,
+      url: ''
+    }
+  },
+  methods: {
+    // 人脸识别
+    openFaceScan() {
+      this.url = ''
+      face.open([], e => {
+        console.log('🚀 ~ e-人脸识别:', e)
+        this.url = e
+        this.isShow = false
+        face.close()
+        uni.showToast({
+          title: '人脸识别成功',
+          icon: 'none'
+        })
+      })
+      if (!this.url) this.isShow = true
+    },
+    // 确定录入
+    handleSubmit() {}
+  }
+}
+</script>
+
+<style lang="scss">
+.title {
+  padding: 80px 0 20px;
+  font-weight: 500;
+  font-size: 22px;
+  color: #000;
+  text-align: center;
+}
+.title-tip,
+.face-tip {
+  font-weight: 500;
+  font-size: 16px;
+  color: #afaeae;
+  text-align: center;
+}
+.face-scan {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 25px;
+}
+.tip-icon {
+  display: flex;
+  justify-content: space-around;
+  padding: 25px 40px;
+
+  .tip-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+		:nth-child(2) {
+			margin-top: 10px;
+			color: #6b6b6b;
+		}
+  }
+}
+.btn {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 25px 40px;
+}
+.img {
+  display: flex;
+  justify-content: center;
+  padding: 105px 40px 35px;
+}
+.img-title {
+  font-weight: 500;
+  font-size: 19px;
+  color: #333;
+  line-height: 18px;
+  text-align: center;
+}
+.img-tip {
+  padding: 50px 40px 20px;
+  font-weight: 500;
+  font-size: 15px;
+  color: #6b6b6b;
+  line-height: 18px;
+}
+.img-tip-content {
+  padding: 0 40px 50px;
+  font-weight: 400;
+  font-size: 14px;
+  color: #6b6b6b;
+  line-height: 18px;
+}
+</style>