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

<template>
  <div>
    <div @click="detail">
      <slot name="title">
        <el-button type="primary" text>查看</el-button>
      </slot>
    </div>
    <el-image-viewer
      v-if="showImage"
      :url-list="preList"
      @close="showImage = false"
    />
    <el-drawer v-model="show" :size="1200">
      <template #title>
        <h4
          class="ml-20 black flex flex-center flex-justify-start full-width font-16 bold"
        >
          {{ data ? data.title : '' }}
        </h4>
      </template>
      <div>
        <div v-if="data">
          <div v-if="data.imgs.length === 0" class="flex flex-center">
            <div v-html="data.content" class="preview"></div>
          </div>
          <div v-else v-for="item in data.imgs" :key="item.id">
            <img :src="item.filePath" style="width: 1100px" />
          </div>
        </div>
        <div
          class="bottom flex flex-center flex-justify-center"
          v-if="isAccess === 2 || showAction"
        >
          <el-button type="primary" icon="Download" @click="downloadClick"
            >下 载
          </el-button>
          <share
            class="ml-20"
            :project-id="projectId"
            :ids="id"
            v-if="isAccess === 2"
          />
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import api from '@/api/index.js'
import share from '@/views/resource/component/share.vue'

export default {
  components: {
    share
  },
  props: {
    title: {
      type: String,
      default: () => {
        return ''
      }
    },
    isAccess: {
      type: Number,
      default: 3
    },
    showAction: {
      type: Boolean,
      default: false
    },
    projectId: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      show: false,
      data: null,
      preList: [],
      showImage: false,
      watermarkOptions: {
        content: 'watermark',
        gap: [20, 20],
        offset: [10, 10],
        zIndex: 5,
        rotate: -20
      }
    }
  },
  methods: {
    detail() {
      if (Number(this.id, 10).toString() === 'NaN') {
        console.log('yyyy')
        // 如果id 不是数字开头，即mongo 62开头的id，查看文章详情
        this.$api.resource.fileDetail(this.id).then(res => {
          if (res.code === 200) {
            this.data = res.data
            this.show = true
          }
        })
      } else {
        this.$api.resource.fileInfo({ id: this.id }).then(res => {
          if (res.code === 200) {
            const tmp = res.data
            if (api.offices.includes(tmp.suffix)) {
              this.openByFile()
            } else {
              this.preList.length = 0
              this.preList.push(tmp.filePath)
              this.showImage = true
            }
          }
        })
      }
    },
    openByFile() {
      this.$api.resource.fileDetailByFile(this.id).then(res => {
        if (res.code === 200) {
          this.data = res.data
          this.show = true
        }
      })
    },
    async downloadClick() {
      const link = document.createElement('a')
      link.href = this.data.url
      link.download = this.data.title
      link.click()
    }
  }
}
</script>

<style lang="scss" scoped>
.preview {
  width: 960px;
  padding: 20px;
}

.bottom {
  position: fixed;
  bottom: 0;
  box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.1);
  background-color: white;
  height: 30px;
  padding: 10px;
  width: 1200px;
  border: #e6e8ed solid 1px;
}

:deep(.el-drawer__body) {
  padding: 0;
}
</style>