wt_project_web_bak/src/views/resource/component/share.vue

<template>
  <div>
    <el-button type="primary" icon="Share" @click="show = true"
      >分 享</el-button
    >
    <el-dialog v-model="show" title="分享" width="450px" :show-close="false">
      <div>
        <el-empty
          v-if="qrCodeText.length === 0"
          description="正在生成二维码，请稍后..."
        />
        <div v-else class="flex flex-center flex-col">
          <vue-qr
            :currentLevel="3"
            :logoCornerRadius="4"
            :logoScale="0.25"
            :logoSrc="logoSrc"
            :text="qrCodeText"
            size="360"
          />
          <el-input disabled v-model="qrCodeText" class="mt-20">
            <template #append>
              <el-button>复 制</el-button>
            </template>
          </el-input>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VueQr from 'vue-qr/src/packages/vue-qr.vue'
import website from '@/config/website.js'
export default {
  components: {
    VueQr
  },
  props: {
    row: {
      type: Object,
      default: null
    }
  },
  watch: {
    show: {
      handler(val) {
        if (val) {
          this.getQrCode()
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      show: false,
      url: 'http://localhost:5173/resource?id=64b79edd8ce2593744685a3e&type=0',
      logoSrc: new URL('@/assets/img/logo.png', import.meta.url).href,
      qrCodeText: ''
    }
  },
  methods: {
    getQrCode() {
      this.$api.resource.shareFiles({ ids: this.row.id }).then(res => {
        if (res.code === 200) {
          this.qrCodeText = website.baseUrl + 'resource?shareId=' + res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>