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

<template>
  <div>
    <xy-dialog ref="dialog" :width="70" :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>课程名称：第六期高级科创人才研修班</div>
                <div>开课日期：2024.3.1-----2024.9.1</div>
                <div>类别：正常课程</div>
              </div>

            </div>
            <div class="code">
              <img src="../../../assets/logo-mini.png"></img>
            </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>
  export default {
    components: {

    },
    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',
        form: {
          settings: '',
        },
        rules: {}
      }
    },
    created() {},
    methods: {

      getDetail() {
        show({
          id: this.id,
          table_name: 'new_plans',
        }).then(res => {

        })
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor') {
            // this.getDetail()
          }
        } else {
          this.id = ''
          this.$refs['dialog'].reset()
        }
      },
    }

  }
</script>

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

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

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

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