sz-kjsxy-web/src/views/course/components/showCode.vue

<template>
  <div>
    <xy-dialog ref="dialog" :width="50" :is-show.sync="isShow" :type="'form'" :title="'二维码'" :form="form"
      :rules='rules'>
      <template v-slot:settings>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold;width:0">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>
          </div>
          <div class="xy-table-item-content" style="flex-grow: 1;">
            <div class="txl">
              <div>
                <div>课程名称：{{row.name}}</div>
                <div>开课日期：{{row.start_date ? row.start_date + '至' + row.end_date : ''}}</div>
                <div>课程体系：{{row.type_value}}</div>
              </div>

            </div>
            <div class="code">
              <div v-if="imgSrc">
                <img :src="imgSrc" />
              </div>
              <div v-else class="empty-code">
                <p>{{ loading ? '加载中...' : '暂无二维码' }}</p>
                <el-button
                  v-if="!loading"
                  type="primary"
                  :loading="generating"
                  @click="generateCode"
                >生成二维码</el-button>
              </div>
            </div>
          </div>
        </div>
      </template>


      <template v-slot:footerContent>
        <el-button type="primary" plain style='margin-left:5px;margin-bottom:5px;' @click="isShow=false">关闭</el-button>
      </template>

    </xy-dialog>

  </div>
</template>

<script>
  import {getQrCode} from "@/api/course"
  export default {
    components: {

    },
    data() {
      return {
        isShow: false,
        form: {
          settings: '',
        },
        row:{},
        rules: {},
        imgSrc:'',
        loading: false,
        generating: false
      }
    },
    created() {},
    methods: {

      async getCode() {
        if (!this.row.id) {
          this.imgSrc = ''
          return
        }
        this.loading = true
        this.imgSrc = ''
        try {
          // 仅查询已有二维码，不触发生成，避免打开弹窗即 500
          const res = await getQrCode({
            id: this.row.id,
            generate: 0
          }, false)
          this.imgSrc = res.msg || ''
        } catch (e) {
          this.imgSrc = ''
        } finally {
          this.loading = false
        }
      },
      async generateCode() {
        if (!this.row.id || this.generating) {
          return
        }
        this.generating = true
        try {
          const res = await getQrCode({
            id: this.row.id,
            generate: 1
          })
          this.imgSrc = res.msg || ''
          if (this.imgSrc) {
            this.$message.success('二维码生成成功')
          }
        } catch (e) {
          // request 拦截器已提示错误
        } finally {
          this.generating = false
        }
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          this.getCode()
        } else {
          this.row = {}
          this.imgSrc = ''
          this.loading = false
          this.generating = false
        }
      },
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .settings {
    flex-basis: 100%;
  }

  .txl {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
  }

  .code {
    min-height: 200px;
    text-align: center;

    img {
      width: 200px;
      height: 200px;
    }
  }

  .empty-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;

    p {
      margin-bottom: 16px;
      color: #909399;
    }
  }
</style>