eep_page/src/views/book/courseware/preview/components/upload_preview/UploadPreviewPreview.vue

<template>
  <div class="upload-preview" :style="getAreaStyle()">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />

    <div class="main">
      <template v-if="data.file_list.length > 0">
        <!-- <template v-if="data.file_list[0].file_name.match(/\.(png|jpg|jpeg)$/i) !== null">
          <el-image
            style="width: 100%; height: 260px"
            :src="data.file_list[0].file_url"
            :fit="'contain'"
            :preview-src-list="[data.file_list[0].file_url]"
          />
        </template>
        <template v-else-if="data.file_list[0].file_name.indexOf('pdf') !== -1">
          <iframe id="ifm" :src="data.file_list[0].newpath" width="100%" height="260px" frameborder="0"></iframe>
        </template>
        <div v-if="isEnable(data.is_enable_download)" class="uploadBtn" @click="downLoad">
          <img style="width: 24px; height: 24px" src="@/assets/download.png" alt="download" />
          下载
        </div> -->
        <div class="label-box">
          <span
            v-for="(label, index) in label_list"
            :key="index"
            :class="[index === active_index ? 'active' : '']"
            @click="active_index = index"
            >{{ label }}</span
          >
        </div>
        <ul v-if="source_list[active_index].length > 0" class="file-list">
          <li v-for="(file, i) in source_list[active_index]" :key="i">
            <div class="file-name">
              <span>
                <SvgIcon :icon-class="icon_list[active_index]" size="16" />
                <p>
                  <span>{{ data.file_info[file.file_id].xuhao + data.file_info[file.file_id].file_name }} </span
                  ><span
                    >{{
                      multilingualTextList[getLang()] && multilingualTextList[getLang()][i]
                        ? ' ' + multilingualTextList[getLang()][i]
                        : ''
                    }}
                  </span>
                </p>
              </span>
              <SvgIcon v-show="file.file_id" icon-class="uploadPreview" size="16" @click="viewDialog(file)" />
              <img
                v-if="isEnable(data.is_enable_download)"
                style="width: 16px; height: 16px"
                src="@/assets/download.png"
                alt="download"
                @click="downLoad(file)"
              />
            </div>
          </li>
        </ul>
        <p v-else class="label-tips">暂无本类型文件，看看其他类型吧</p>
      </template>
    </div>
    <el-dialog
      v-if="visible"
      :visible.sync="visible"
      :show-close="true"
      :close-on-click-modal="true"
      :modal-append-to-body="true"
      :append-to-body="true"
      :lock-scroll="true"
      width="80%"
      top="0"
    >
      <iframe v-if="visible" :src="newpath" width="100%" :height="iframeHeight" frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import PreviewMixin from '../common/PreviewMixin';
import { getConfig, getToken } from '@/utils/auth';
import { GetFileURLMap } from '@/api/app';
const Base64 = require('js-base64').Base64;

import { getUploadPreviewData } from '@/views/book/courseware/data/uploadPreview';

export default {
  name: 'UploadPreviewPreview',
  mixins: [PreviewMixin],
  data() {
    return {
      data: getUploadPreviewData(),
      file_preview_url: getConfig() ? getConfig().doc_preview_service_address : '',
      source_list: [[], [], [], []],
      label_list: ['音频', '视频', '文档', '压缩包'],
      icon_list: ['mp3', 'video', 'file', 'zip'],
      active_index: 0,
      visible: false,
      newpath: '',
      iframeHeight: `${window.innerHeight - 100}px`,
      multilingualTextList: {}, // 多语言对应的切割后的翻译
    };
  },
  watch: {
    'data.file_list': {
      handler(val) {
        if (val.length > 0) {
          this.handleData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 处理数据
    handleData() {
      this.multilingualTextList = {};
      this.source_list = [[], [], [], []];
      this.data.file_list.forEach((item) => {
        const suffix = item.file_name.slice(item.file_name.lastIndexOf('.') + 1, item.file_name.length).toLowerCase();
        if (suffix === 'mp3' || suffix === 'wma' || suffix === 'wav') {
          this.source_list[0].push(item);
        } else if (suffix === 'mp4' || suffix === 'mov') {
          this.source_list[1].push(item);
        } else if (suffix === 'zip' || suffix === 'rar') {
          this.source_list[3].push(item);
        } else {
          this.source_list[2].push(item);
        }
      });
      if (this.showLang) {
        this.data.multilingual.forEach((item) => {
          let trans_arr = item.translation.split('\n');
          this.$set(this.multilingualTextList, item.type, trans_arr);
        });
      }
    },
    //   下载表格
    downLoad(file) {
      let userInfor = getToken();
      let AccessToken = '';
      if (userInfor) {
        AccessToken = userInfor.access_token;
      }
      let FileID = file.file_id;
      let data = {
        AccessToken,
        FileID,
      };
      location.href = `${
        process.env.VUE_APP_EEP
      }/FileServer/WebFileDownload?AccessToken=${data.AccessToken}&FileID=${data.FileID}`;
    },
    // 预览
    viewDialog(file) {
      this.newpath = '';
      GetFileURLMap({ file_id_list: [file.file_id] }).then(({ url_map }) => {
        // this.$set(
        //   item,
        //   'newpath',
        //   `${this.file_preview_url}onlinePreview?url=${Base64.encode(url_map[item.file_id])}`,
        // );
        this.newpath = `${this.file_preview_url}onlinePreview?url=${Base64.encode(url_map[file.file_id])}`;
        this.visible = true;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.upload-preview {
  @include preview-base;

  .uploadBtn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 39px;
    margin-top: 8px;
    font-size: 16px;
    line-height: 150%;
    color: #000;
    cursor: pointer;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 10%);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 10%);

    img {
      margin-right: 13px;
    }
  }

  .label-box {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 10%);

    span {
      padding: 5px 15px;
      cursor: pointer;
      border-radius: 20px;

      &.active {
        font-weight: bold;
        color: #165dff;
        background: #f2f3f5;
      }
    }
  }

  .file-list {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    padding: 15px 0;

    li {
      display: flex;
      column-gap: 12px;
      align-items: center;

      .file-name {
        display: flex;
        column-gap: 14px;
        align-items: center;
        justify-content: space-between;
        max-width: 500px;
        padding: 8px 12px;
        font-size: 14px;
        color: #1d2129;
        background-color: #f7f8fa;

        p {
          margin: 0;
        }

        span {
          display: flex;
          column-gap: 14px;
          align-items: center;
        }
      }

      .svg-icon {
        cursor: pointer;
      }
    }
  }

  .label-tips {
    font-size: 14px;
    color: #333;
  }

  :deep .el-dialog {
    margin: 0 auto;
  }
}
</style>