student-h5/src/views/filestorag/fileStorag.vue

<!--
 * @Author: lixg lixg@dongwu-inc.com
 * @Date: 2023-01-13 11:42:48
 * @LastEditors: lixg lixg@dongwu-inc.com
 * @LastEditTime: 2023-03-03 20:16:42
 * @FilePath: /stu_h5/src/views/filestorag/fileStorag.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="filestorag">
    <ReturnHead text="文件"></ReturnHead>
    <div class="notice">
      <div class="noticebox">
        <div class="main" v-if="fileList">
          <div
            class="filebox"
            v-for="(item, index) in JSON.parse(fileList ? fileList : [])"
            :key="index"
          >
            <img
              v-if="
                item.name.indexOf('jpg') !== -1 ||
                item.name.indexOf('jpeg') !== -1 ||
                item.name.indexOf('png') !== -1
              "
              style="width: 20px; height: 22px; margin-right: 20px"
              src="@/assets/image/file/pngpic.png"
            />
            <div v-else>
              <img
                v-if="item.name.indexOf('doc') !== -1"
                style="width: 20px; height: 22px; margin-right: 20px"
                src="@/assets/image/file/word.png"
              />
              <div v-else>
                <img
                  v-if="item.name.indexOf('xls') !== -1"
                  style="width: 20px; height: 22px; margin-right: 20px"
                  src="@/assets/image/file/excel.png"
                />
                <div v-else>
                  <img
                    v-if="item.name.indexOf('ppt') !== -1"
                    style="width: 20px; height: 22px; margin-right: 20px"
                    src="@/assets/image/file/ppt.png"
                  />
                  <div v-else>
                    <img
                      v-if="item.name.indexOf('pdf') !== -1"
                      style="width: 20px; height: 22px; margin-right: 20px"
                      src="@/assets/image/file/pdf.png"
                    />
                    <div v-else>
                      <img
                        v-if="item.name.indexOf('zip') !== -1"
                        style="width: 20px; height: 22px; margin-right: 20px"
                        src="@/assets/image/file/zip.png"
                      />
                      <img
                        v-else
                        style="width: 20px; height: 22px; margin-right: 20px"
                        src="@/assets/image/file/word.png"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <span class="filename" :title="item.name">{{ item.name }}</span>
            <div
              class="download"
              style="display: flex; align-items: center"
              @click="downloadFile(item.response.data)"
            >
              <img
                src="../../assets/image/download.png"
                style="width: 16px; height: 15px"
              />
              <div style="margin-left: 2px; color: #2478ff">下载</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, computed } from "vue";
import Images from "../../assets/image/index";
import ReturnHead from "@/components/ReturnHead.vue";
import { useRoute, useRouter } from "vue-router";
import { ROUTER_DETAILS, PROJECT_DETAIL } from "@/api/api";
import { useRequest } from "@/api/request";
const {
  query: { courseId, type },
} = useRoute();
console.log("courseId", courseId);
//获取共享文档
const { data } =
  type == 1
    ? useRequest(PROJECT_DETAIL, { projectId: courseId })
    : useRequest(ROUTER_DETAILS, { routerId: courseId });
// state.t_items = data.value.routerInfo.attach;
console.log("data", data, data.value.routerInfo);
const fileList = computed(() =>
  type == 1 ? data.value?.projectInfo?.attach : data.value?.routerInfo?.attach
);
//下载
function downloadFile(url) {
  console.log(
    "url2",
    window.location.protocol +
      import.meta.env.VITE_BOE_API_URL +
      import.meta.env.VITE_FILE_PATH +
      url
  );
  window.open(
    window.location.protocol +
      import.meta.env.VITE_BOE_API_URL +
      import.meta.env.VITE_FILE_PATH +
      url
  );
}
</script>
<style lang="scss" scoped>
.filestorag {
  width: 100%;
  background-color: #f2f5f7;
  font-size: 13px;
  color: #677d86;
  .notice {
    width: 100%;
    background-color: #ffffff;
    margin-top: 10px;
    .noticebox {
      width: 90%;
      margin: 0 auto;
      .main {
        width: 100%;
        .filebox {
          display: flex;
          margin-left: 16.5px;
          padding: 21.5px 0;
          align-items: center;
          border-bottom: 1px solid #edf3ff;
          .fileimg {
            width: 19.5px;
            height: 22px;
            background-size: 100% 100%;
            margin-right: 19px;
          }
        }
        .filename {
          width: calc(100% - 100px);
          font-size: 13px;
          display: block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>