|
|
@@ -0,0 +1,77 @@
|
|
|
+<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>
|