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" style="margin-bottom: 10px" /> -->
        <u-button type="primary" shape="circle" text="拍照录入" @click="openPhotograph" />
      </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="primary" plain shape="circle" text="重新录入" @click="openFaceScan" style="margin: 10px 0" /> -->
        <u-button type="primary" plain shape="circle" text="重新拍照" style="margin: 10px 0" @click="openPhotograph" />
      </div>
    </div>
  </view>
</template>

<script>
import { pathToBase64, base64ToPath } from 'image-tools'
// 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() {
    //   console.log('🚀 ~ handleSubmit ~ this.url:', this.url)
    //   // 上传文件
    //   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)
    //       this.$verificationToken()
    //       uni.request({
    //         url: config.baseUrl + '/exam-student/personalCenter/uploadFaceRecognition',
    //         method: 'POST',
    //         data: params,
    //         header: {
    //           'content-type': 'application/json',
    //           Authorization: this.token
    //         },
    //         success: res => {
    //           res = res.data
    //           console.log('🚀 ~ this.uploadFaceRecognition ~ res上传成功:', res, res.code)
    //           if (res.code == 200) {
    //             uni.showToast({
    //               title: '人脸信息录入成功',
    //               icon: 'none'
    //             })
    //             uni.removeStorageSync('facePath')
    //             uni.setStorageSync('facePath', this.facePath)
    //             setTimeout(() => {
    //               uni.navigateTo({
    //                 url: '/pages/YNEduApp/user/user'
    //               })
    //             }, 1000)
    //           } else {
    //             uni.showToast({
    //               title: res.msg,
    //               icon: 'none'
    //             })
    //           }
    //         },
    //         fail: err => {
    //           console.log('🚀 ~ this.uploadFaceRecognition ~ err:', err)
    //         }
    //       })
    //     },
    //     fail: err => {
    //       console.log('🚀 ~ err:', err)
    //     }
    //   })
    // },
    // 拍照录入
    // openPhotograph() {
    //   uni.chooseImage({
    //     count: 1,
    //     sizeType: ['compressed'],
    //     sourceType: ['camera'],
    //     success: res => {
    //       console.log('🚀 ~ res-拍照:', res)
    //       this.imgToBase64(res.tempFilePaths[0]).then(base64 => {
    //         console.log('🚀 ~ this.imgToBase64 ~ base64:', base64)
    //         this.url = base64
    //       })
    //       this.isShow = false
    //     },
    //     fail: err => {
    //       console.log('🚀 ~ err:', err)
    //     }
    //   })
    // },
    imgToBase64(data) {
      return new Promise((resolve, reject) => {
        pathToBase64(data)
          .then(base64 => {
            resolve(base64)
          })
          .catch(error => {
            console.error(error)
            reject(error)
          })
      })
    }
  }
}
</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 20px;
  font-weight: 400;
  font-size: 14px;
  color: #6b6b6b;
  line-height: 18px;
}
</style>