learning-system-portal/src/views/grateful/ToolDown.vue

<template>
  <div>
    <div class="toolBanner">
      <div class="portal-header"></div>
    </div>
    <div class="xindex-content" style="padding: 0">
      <div class="modules xcontent2">
        <div class="xcontent2-main">
          <div class="navTop">
            <div>
              <router-link to="/grateful" class="nav">首页</router-link>&nbsp;>&nbsp;
              <span style="cursor: pointer;" class="nav">下载工具</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 教师赋能 -->
    <div class="xindex-content" style="padding: 0">
      <div class="modules xcontent2">
        <div class="xcontent2-main">
          <div class="modules-list" style="margin-top: 0;">
            <div v-if="total > 0" style="padding: 20px 70px;border-radius: 8px 8px 0 0;min-height: 600px;" class="bgc">
              <!--内容列表内容-->
              <div v-for="(tool, index) in list" :key="'cc' + index" class="toolEvery">
                <div class="contnet">
                  {{ tool.name.split('.')[0] }}
                </div>
                <div class="btn">
                  <el-button @click="downLoad(tool)">立即下载</el-button>
                </div>
              </div>
            </div>
            <div>
              <pagination :size="params.pageSize" :total="total" :page="params.pageIndex" @change-size="changePageSize"
                @change-page="loadData" :autoScroll="false">
              </pagination>
            </div>
            <div v-if="list.length == 0" class="pagination-div">
              <span class="notcoures">
                <img :src="`${webBaseUrl}/images/nocase.png`" alt="">
                <h5>暂无工具～</h5>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { toolList, toolDown } from '../../api/modules/grateful';
export default {
  data: () => {
    return {
      list: [],
      total: 0,
      params: {
        pageNo: 1,
        pageSize: 10,
      }
    };
  },
  mounted() {
    this.getToolList()
  },
  methods: {
    async getToolList() {
      const result = await toolList(this.params)
      if (result.code === 200) {
        const { total, records } = result.data
        this.list = records
        this.total = total
      }
    },
    downLoad(toolInfo) {
      console.log(toolInfo);
      window.open(`/activityApi/xboe/m/boe/tools/url/download?urlStr=${process.env.VUE_APP_BOE_WEB_URL}/upload${toolInfo.filePath}&fileName=${toolInfo.name}`)
      // toolDown({
      //   urlStr: `${process.env.VUE_APP_BOE_WEB_URL}/upload${toolInfo.filePath}`,
      //   fileName: toolInfo.name
      // }).then((result) => {
      //   const link = document.createElement('a');// 创建a标签
      //   let blob = new Blob([result.data], { type: '' }); // 设置文件类型
      //   link.style.display = "none";
      //   link.href = URL.createObjectURL(blob); // 创建URL
      //   link.setAttribute("download", `${toolInfo.name}`);
      //   document.body.appendChild(link);
      //   link.click();
      //   URL.revokeObjectURL(link.href);
      //   document.body.removeChild(link);
      // })
    },
    getPic(index) {
      return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png";
    },
    changePageSize(pageSize) {
      this.params.pageSize = pageSize;
      this.getToolList()
    },
    loadData(pageNo) {
      this.params.pageNo = pageNo;
      this.getToolList()
    },
  },
};
</script>
<style scoped lang='scss'>
.nav:hover {
  color: #387DF7;
}

.toolBanner {
  width: 100%;
  height: 240px;
  position: relative;
  background: url('../../assets/images/grateful/toolBanner.png') no-repeat;
  background-size: 100% 100%;

  &::after {
    content: '下载工具';
    position: absolute;
    bottom: 25px;
    left: 180px;
    color: #ffffff;
    font-weight: 600;
    font-size: 64px;
  }

  .portal-header {
    position: relative;
    height: 72px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(61, 61, 61, 0.15);
    backdrop-filter: blur(10px);

    &::before {
      content: url(../../assets/images//grateful/logo.png);
      position: absolute;
      left: 40px;
      top: 20px;
    }
  }
}

.navTop {
  color: #666;
}

.bgc {
  background: linear-gradient(180deg,
      rgba(56, 125, 247, 0.2) 0%,
      rgba(166, 168, 255, 0) 100%) no-repeat;
  background-size: 100% 166px;
  border-radius: 8px;
}

.modules-list {
  min-height: 682px;
  background: #ffffff;
  border-radius: 8px;

  .pagination-div {
    text-align: center;
    padding: 70px 0;
  }



  .toolEvery {
    height: 56px;
    line-height: 56px;
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    border-bottom: 1px solid rgba($color: #999, $alpha: 0.2);
    display: flex;
    justify-content: space-between;

    .btn {
      button {
        width: 140px;
        height: 40px;
        background: #387df7;
        border: 0;
        box-shadow: 1px 2px 8px 1px rgba(56, 125, 247, 0.3);
        border-radius: 4px;
        color: #ffffff;
        line-height: 22px;
      }
    }
  }
}
</style>