nxdt-uniapp/pages/myTraining/trainingDetails.vue

<template>
  <view>
    <Navbar title="培训详情" />
    <div class="content">
      <div>培训内容：{{ content }}</div>
      <div>培训地点：{{ trainingPlace }}</div>
      <div>培训级别：{{ trainingLevel }}</div>
      <div>培训日期：{{ trainingDate }}</div>
      <div>培训时长：{{ trainingDuration }}分钟</div>
      <div>主讲人：{{ lecturer }}</div>
      <div>
        培训考试：
        <span style="color: #3c9cff; cursor: pointer" @click="goExam">{{ examPaperName || '无' }}</span>
      </div>
      <div class="item">
        <span>二维码：</span>
        <!-- <u--image :src="filePath" width="80" height="80" radius="3" @click="handleImg" /> -->
        <template>
          <canvas id="qrcode" canvas-id="qrcode" style="width: 100px; height: 100px" />
        </template>
      </div>

      <!-- 签到 -->
      <div class="sign-btn">
        <u-button type="primary" shape="circle" @click="handleSign" v-if="!signTime" :disabled="detail.signStatus != 1">
          签 到
        </u-button>
      </div>
    </div>
  </view>
</template>

<script>
import { getTrainingDetail, trainingSign } from '@/api/educationTraining'
import config from '@/config'
import uqrCode from '@/utils/uqrcode.js'

export default {
  components: {},
  data() {
    return {
      item: {},
      id: '',
      // 培训内容
      content: '',
      // 培训地点
      trainingPlace: '',
      // 培训级别
      trainingLevel: '',
      // 培训日期
      trainingDate: '',
      // 培训时长
      trainingDuration: '',
      // 主讲人
      lecturer: '',
      // 二维码
      // filePath: 'https://cdn.uviewui.com/uview/album/1.jpg',
      filePath: '',
      // 培训考试
      examPaperName: '',
      signTime: '', // 签到时间
      examPaperList: [], // 考试列表
      detail: {}
    }
  },
  onLoad(options) {
    console.log('🚀 ~ onLoad ~ options:', options)
    this.id = options.id
    this.getDetail()
    // this.createQRCode()
  },
  methods: {
    // 获取培训详情
    async getDetail() {
      const res = await getTrainingDetail({ id: this.id })
      console.log('🚀 ~ getDetail ~ res:', res)
      this.content = res.data.content
      this.trainingPlace = res.data.trainingPlace
      this.trainingLevel = res.data.trainingLevel
      this.trainingDate = res.data.trainingDate
      this.trainingDuration = res.data.trainingDuration
      this.lecturer = res.data.lecturer
      this.filePath = config.fileUrl2 + res.data.filePath?.replace(/\\/g, '/')
      this.examPaperName = res.data.examPaperList[0]?.examPaperName || ''
      this.signTime = res.data.signTime || ''
      this.item = { ...res.data.examPaperList[0], name: this.examPaperName, isStudyTask: false, isTrain: true }
      this.examPaperList = res.data.examPaperList
      this.detail = res.data
      this.generate(res.data.qrCodeUuid)
    },
    // 点击预览
    handleImg() {
      uni.previewImage({
        urls: [this.filePath]
      })
    },
    // 签到
    async handleSign() {
      console.log('签到', this.id)
      try {
        const res = await trainingSign({ id: this.id })
        console.log('🚀 ~ handleSign ~ res:', res)
        if (res.code === 200) {
          this.getDetail()
          uni.showToast({
            title: '签到成功',
            icon: 'success'
          })
        }
      } catch (error) {
        console.log('🚀 ~ handleSign ~ error:', error)
      }
    },
    // 去考试
    goExam() {
      if (!this.signTime) {
        //提示 先签到
        uni.showToast({
          title: '请先签到',
          icon: 'none'
        })
      } else {
        if (this.examPaperList.length > 0) {
          // 不在考试期限内 不允许考试 detail.trainingDate 2021-09-01 ~ 2021-09-30
          const startDate = this.detail.trainingDate.split(' ~ ')[0]
          const endDate = this.detail.trainingDate.split(' ~ ')[1]
          const now = new Date().getTime()
          if (now < new Date(startDate).getTime() || now > new Date(endDate).getTime()) {
            uni.showToast({
              title: '不在考试期限内',
              icon: 'none'
            })
            return
          }
          uni.navigateTo({
            url: '/pages/myExam/beforeExamExplain?params=' + JSON.stringify(this.item)
          })
        } else {
          // 提示 以考试
          uni.showToast({
            title: '已考试',
            icon: 'none'
          })
        }
      }
    },
    // 生成二维码
    createQRCode() {
      const qr = new UQRCode() // 实例化二维码
      qr.data = '二维码内容' // 二维码内容
      qr.size = 100 // 二维码大小
      qr.make() // 生成二维码
      //uni.createCanvasContext(canvasId, componentInstance)
      const ctx = uni.createCanvasContext('qrcode', this) // 组件内调用需传this，vue3 中 this 为 getCurrentInstance()?.proxy
      console.log('🚀 ~ createQRCode ~ ctx:', ctx)
      qr.canvasContext = ctx // 传入canvas上下文
      qr.drawCanvas() // 绘制二维码
    },
    generate(e) {
      uqrCode.make({
        canvasId: 'qrcode',
        componentInstance: this,
        text: e, // 想生成二维码到内容
        size: 80,
        margin: 0,
        backgroundColor: '#ffffff',
        foregroundColor: '#000000',
        fileType: 'jpg',
        errorCorrectLevel: uqrCode.errorCorrectLevel.H,
        success: res => {
          this.imgCode = res // base64的图片格式
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 0 20px;
  font-size: 14px;

  .item {
    display: flex;
    align-items: flex-start;
    margin: 10px 0;
  }

  .sign-btn {
    margin: 80px auto;
    width: 100px;
  }

  div {
    margin: 10px 0;
  }

  .sign-btn {
    margin: 80px auto;
    width: 100px;
  }
}
</style>