YNUtdPlatform/pages/YNEduApp/user/faceScan.vue

<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>