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/face-recognition.png" size="180" />
      </div>
      <div class="face-tip">人脸验证过程中仅能由本人完成</div>
      <div class="tip-icon">
        <div class="tip-item">
          <u-icon name="/static/images/eye.png" size="40" />
          <div>避免遮挡</div>
        </div>
        <div class="tip-item">
          <u-icon name="/static/images/well-lit.png" size="40" />
          <div>光线充足</div>
        </div>
        <div class="tip-item">
          <u-icon name="/static/images/front-face-to-phone.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'
import config from 'config.js'

export default {
  data() {
    return {
      isShow: true,
      url: '',
      facePath: '',
      optMode: 'add',
      token: uni.getStorageSync('access_token'),
      userId: uni.getStorageSync('userId')
    }
  },
  onLoad() {
    console.log('🚀 ~ onLoad', this.token, this.userId)
    this.url = uni.getStorageSync('facePath') || ''
    this.optMode = uni.getStorageSync('facePath') ? 'replace' : 'add'
  },
  mounted() {
    // console.log('🚀 ~ mounted', config)
  },
  methods: {
    // 人脸识别
    openFaceScan() {
      this.url = ''
      face.open(['a'], e => {
        console.log('🚀 ~ e-人脸识别:', e)
        this.url = e
        this.isShow = false
        face.close()
      })
      if (!this.url) this.isShow = true
    },
    // 确定录入
    handleSubmit() {
      // 上传文件
      uni.uploadFile({
        url: config.uploadUrl,
        filePath: this.url,
        name: 'data',
        formData: {
          photoType: 'face',
          file: this.url
        },
        header: {
          Authorization: this.token
        },
        success: res => {
          console.log('🚀 ~ res:', res)
          res = JSON.parse(res.data)
          this.facePath = res.data.url
          console.log('🚀 ~ handleSubmit ~ this.facePath:', this.facePath, this.optMode)
          let params = {
            userId: this.userId,
            facePath: this.facePath,
            optMode: this.optMode,
            img: this.url
          }
          params = JSON.stringify(params)
          uni.request({
            url: config.baseUrl + '/personalCenter/uploadFaceRecognition',
            method: 'POST',
            data: params,
            header: {
              'content-type': 'application/json'
            },
            success: res => {
              console.log('🚀 ~ this.uploadFaceRecognition ~ res上传成功:', res)
              if (res.data.code === 200) {
                uni.showToast({
                  title: '人脸信息录入成功',
                  icon: 'none'
                })
              } else {
                uni.showToast({
                  title: '人脸信息录入失败',
                  icon: 'none'
                })
              }
              uni.navigateBack()
            },
            fail: err => {
              console.log('🚀 ~ this.uploadFaceRecognition ~ err:', err)
            }
          })
        },
        fail: err => {
          console.log('🚀 ~ err:', err)
        }
      })
    }
  }
}
</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>