gaoyixia-pc/src/components/module/file-viewer.vue

<template>
  <div class="file-viewer">
    <el-dialog
      v-if="visible"
      width="360px"
      :show-close="false"
      :visible.sync="visible"
      :before-close="(_) => $emit('visible', false)"
    >
      <div class="content">
        <img class="file-icon" :src="fileIcon" alt="" />
        <div class="none-view">暂不支持预览此类型文件</div>
        <div class="tips" v-if="info.is_down">请尝试下载后使用其他应用打开</div>
        <div class="download" v-if="info.is_down" @click="download">
          点击下载
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getFileIcon } from "@/common/util";
import { DatumService } from "@/common/service";
import { downloadLocalFile } from "@/common/request";
export default {
  name: "FileViewer",
  props: {
    info: {
      type: Object,
    },
    visible: {
      type: Boolean,
    },
  },
  model: {
    prop: "visible",
    event: "visible",
  },
  computed: {
    fileIcon() {
      return getFileIcon(`${this.info.fileType}_bg`);
    },
  },
  methods: {
    download() {
      let url = this.info.url;
      if (this.info.is_down && this.info.is_encrypt) {
        url = OSS_URL + this.urlInfo.pdf_clear;
      }
      DatumService.datumDownload({
        datum_id: this.info.datum_id,
        url_id: this.info.id,
      }).then(() => {
        downloadLocalFile(url, this.info.title);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.file-viewer {
  ::v-deep .el-dialog__header {
    display: none;
  }
  ::v-deep .el-dialog {
    border-radius: 10px;
  }
}
.content {
  height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  .file-icon {
    width: 85px;
    height: 85px;
  }
  .none-view {
    font-size: 16px;
    font-weight: 400;
    color: #333333;
  }
  .tips {
    font-size: 12px;
    font-weight: 400;
    color: #999999;
  }
  .download {
    width: 160px;
    height: 45px;
    background: #ffffff;
    border-radius: 22px;
    border: 1px solid #2a63f3;
    text-align: center;
    line-height: 45px;
    font-size: 16px;
    font-weight: 400;
    color: #2a63f3;
  }
}
</style>