YNUtdPlatform/pages/YNEduApp/learnProj/imageStudy.vue

<template>
  <div class="content">
    <div style="margin: 10px; color: #2979ff">
      <span v-if="!isEnd">剩余学习时间：{{ time }}</span>
      <span v-else>已完成学习</span>
    </div>
    <u--image :showLoading="true" :src="path" mode="aspectFit" @click="handleImage"></u--image>
  </div>
</template>

<script>
import config from '@/config'
import { pathToBase64, base64ToPath } from 'image-tools'

export default {
  data() {
    return {
      isShow: true,
      path: '',
      params: {},
      timer: null,
      isEnd: false,
      isShowImg: false,
      time: '',
      isHide: false,
      allStudyDuration: 0,
      random: 0,
      // 失败次数
      failCount: 3
    }
  },
  onLoad(opt) {
    opt = JSON.parse(opt.params)
    console.log('🚀 ~ onLoad ~ opt:', opt)
    this.params = JSON.parse(JSON.stringify(opt))
    this.params.studyDuration = Number(opt.studyDuration)
    this.params.allStudyDuration = Number(opt.allStudyDuration)
    this.path = config.fileUrl + opt.path
    // this.path = opt.path
    console.log('🚀 ~ onLoad ~ this.params:', this.path)
    console.log('🚀 ~ onLoad ~ this.params:', Number(opt.studyDuration), Number(opt.allStudyDuration))
    this.allStudyDuration = Number(this.params.allStudyDuration) - Number(this.params.studyDuration)
    this.random = (this.allStudyDuration / 2).toFixed(0)

    if (Number(opt.studyDuration) < Number(opt.allStudyDuration)) {
      this.isEnd = false
      setTimeout(() => {
        this.countDown()
      }, 1000)
    } else {
      this.isEnd = true
      // 提示-学习时长已满
      uni.showToast({
        title: '学习时长已满, 随时可以结束学习',
        icon: 'none'
      })
    }
  },
  onShow() {
    console.log('🚀 ~ onShow ~ 页面显示')
    this.isShowImg = false
  },
  // 卸载 隐藏是调用 onHide
  onHide() {
    console.log('🚀 ~ onHide ~ 页面关闭')
    if (this.isEnd || this.isHide) {
      return
    }
    // 关闭页面时，修改项目进度
    if (!this.isShowImg) {
      clearInterval(this.timer)
      this.updStudyDuration()
    }
  },
  onUnload() {
    console.log('🚀 ~ onUnload ~ onUnload-页面关闭:')
    if (this.isEnd) {
      return
    }
    // 关闭页面时，修改项目进度
    if (!this.isShowImg) {
      clearInterval(this.timer)
      this.updStudyDuration()
    }
  },
  methods: {
    // 根据allStudyDuration 倒计时
    countDown() {
      // let allStudyDuration = Number(this.params.allStudyDuration) - Number(this.params.studyDuration)
      let minute = Math.floor(this.allStudyDuration / 60)
      minute = String(minute).padStart(2, '0')
      let second = this.allStudyDuration % 60
      second = String(second).padStart(2, '0')
      this.time = minute + ':' + second
      this.timer = setInterval(() => {
        if (!this.isHide) {
          this.allStudyDuration--
          this.params.studyDuration++
        }
        if (this.allStudyDuration == this.random) {
          this.isShow = false
          clearInterval(this.timer)
          this.openPhotograph()
        }
        console.log('🚀 ~ countDown ~ this.params.studyDuration:', this.params.studyDuration)
        if (this.allStudyDuration <= 0) {
          this.params.studyDuration = this.params.allStudyDuration
          this.isEnd = true
          clearInterval(this.timer)
          // 提示-学习时长已满
          uni.showToast({
            title: '学习时长已满',
            icon: 'none'
          })
          setTimeout(() => {
            this.updStudyDuration()
          }, 1000)
        }
        let arr = this.time.split(':')
        let minute = parseInt(arr[0])
        let second = parseInt(arr[1])
        if (second == 0) {
          minute -= 1
          second = 59
          if (minute < 10) {
            minute = String(minute).padStart(2, '0')
          }
        } else {
          second -= 1
          if (minute < 10) {
            minute = String(minute).padStart(2, '0')
          }
          if (second < 10) {
            second = String(second).padStart(2, '0')
          }
        }
        this.time = minute + ':' + second
        console.log('🚀 ~ countDown ~ 剩余时间-->:', this.allStudyDuration)
        console.log('🚀 ~ countDown ~ this.params.studyDuration:', this.params.studyDuration)
      }, 1000)
    },
    // 修改项目进度
    updStudyDuration() {
      const params = {
        userId: this.params.userId,
        studyId: this.params.studyId,
        stageId: this.params.stageId,
        stageContentId: this.params.stageContentId,
        stageType: this.params.stageType,
        studyCourseId: this.params.studyCourseId,
        sourceId: this.params.sourceId,
        studyDuration: this.params.studyDuration,
        studyPercentage:
          Math.ceil((Number(this.params.studyDuration) / Number(this.params.allStudyDuration)) * 100).toFixed(2) > 100
            ? 100
            : Math.ceil((Number(this.params.studyDuration) / Number(this.params.allStudyDuration)) * 100).toFixed(2)
      }
      console.log('🚀 ~ updStudyDuration ~ params:', params)
      this.$verificationToken()
      uni.request({
        url: config.baseUrl + '/exam-student/student/updStudyDuration',
        method: 'post',
        data: params,
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
          Authorization: uni.getStorageSync('access_token')
        },
        success: res => {
          console.log('🚀 ~ handleEnd ~ res:', res)
          this.isShow = false
          uni.reLaunch({
            url: '/pages/YNEduApp/learnProj/learnProjDetail?id=' + this.params.studyId
          })
        },
        fail: err => {
          console.log('🚀 ~ handleEnd ~ err:', err)
        }
      })
    },
    // 展示图片
    handleImage() {
      this.isShowImg = true
      uni.previewImage({
        urls: [this.path]
      })
    },
    // 拍照录入
    openPhotograph() {
      this.isHide = true
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['camera'],
        success: res => {
          let url = ''
          console.log('🚀 ~ res-拍照:', res)
          this.imgToBase64(res.tempFilePaths[0]).then(base64 => {
            url = base64
            console.log('🚀 ~ this.imgToBase64 ~ base64:', url)
            this.getFaceRecognition({ userId: uni.getStorageSync('userId'), img: url })
          })
        },
        fail(err) {
          console.log('🚀 ~ openFaceScan ~ 人脸识别失败', err)
          uni.showToast({
            title: '人脸识别失败',
            icon: ''
          })
          setTimeout(() => {
            this.updStudyDuration()
          }, 1000)
        }
      })
    },
    imgToBase64(data) {
      return new Promise((resolve, reject) => {
        pathToBase64(data)
          .then(base64 => {
            resolve(base64)
          })
          .catch(error => {
            console.error(error)
            reject(error)
          })
      })
    },
    // 发送请求
    getFaceRecognition(params) {
      console.log('🚀 ~ getFaceRecognition ~ params:', params)
      this.$verificationToken()
      uni.request({
        url: config.baseUrl + '/exam-student/personalCenter/getFaceRecognition',
        method: 'POST',
        header: {
          'content-type': 'application/json',
          Authorization: uni.getStorageSync('access_token')
        },
        data: params,
        success: res => {
          console.log('🚀 ~ openFaceScan ~ res-人脸识别:', res)
          res = res.data
          console.log('🚀 ~ openFaceScan ~ res-人脸识别:', res.code)
          if (res.code == 200) {
            // 提示
            uni.showToast({
              title: '人脸识别成功',
              icon: ''
            })
            this.isHide = false
            this.isShow = true
            this.countDown()
          } else {
            this.failCount--
            if (this.failCount == 0) {
              uni.showToast({
                title: '人脸识别失败, 即将结束学习',
                icon: 'none',
                duration: 1500
              })
              setTimeout(() => {
                this.updStudyDuration()
              }, 1500)
            } else {
              uni.showToast({
                title: '人脸识别失败, 请重新录入, 剩余次数: ' + this.failCount + '次',
                icon: 'none',
                duration: 1500
              })
              setTimeout(() => {
                this.openPhotograph()
              }, 1500)
            }
          }
        },
        fail(err) {
          console.log('🚀 ~ openFaceScan ~ 人脸识别失败', err)
          uni.showToast({
            title: '人脸识别失败',
            icon: ''
          })
          setTimeout(() => {
            this.updStudyDuration()
          }, 1000)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>