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"></img>
              </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:''
      }
    },
    created() {},
    methods: {

      async getCode() {
        const res = await getQrCode({
          id: this.row.id,
        })
        this.imgSrc = res.msg
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          this.getCode()
        } else {
          this.row = {}
          this.imgSrc = ''
        }
      },
    }

  }
</script>

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

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

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

    img {
      width: 200px;
      height: 200px;
    }
  }
</style>