smdz/src/view/smdz-wap/down.vue

<template>
  <div class="web_box vflex acenter">
    <div class="table">
      <el-checkbox-group v-model="checkList" @change="handleCheckedCitiesChange">
        <div v-for="(item,index) in tableData" :key="index">
          <div class="cell hflex acenter jbetween">
            <div class="hflex acenter">
              <el-checkbox :label="item.file_url"></el-checkbox>
              <div class="hflex acenter left">
                <img src="@/assets/image/link.png" class="icon" alt="">
                <div class="name">{{ item.file_name }}</div>
              </div>
            </div>
            <div class="text">{{ item.file_size }}M</div>
          </div>
        </div>
    </el-checkbox-group>
    </div>
    <div class="bottom hflex jbetween">
      <div class="hflex">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"></el-checkbox>
        <div class="text2">全选</div>
      </div>
      <div class="btn" @click="down">下载文件</div> 
    </div>
  </div>
</template>

<script>
  const fileOptions = [];
  export default{
    name: 'down_wap',
    data() {
      return{
        img_title: require('@/assets/image/pc_title.png'),
        effective: 14,
        pageData: {
          title: '这是一些学习文件'
        },
        tableData: [],
        checkList: [],
        checkAll: false,
        isIndeterminate: true
      } 
    },
    created() {
      this.id = window.localStorage.getItem('id')
      this.effective = this.$route.params.effective
      if(this.$route.params.code) {
        this.code = this.$route.params.code
      }
      this.getData()
    },
    methods: {
      getData() {
        let that = this
        let data = {
          id: that.id,
          password: that.code
        }
        that.$http.getFile(data).then((res) => {
          if(res.data.code == 0) {
            this.$message.error({
              message: res.data.msg,
              customClass: 'font10'
            })
            this.$router.go(-1)
          } else if(res.data.code == 1) {
            that.tableData = res.data.data
            for(var i=0;i<that.tableData.length;i++) {
              fileOptions.push(that.tableData[i].file_url)
            }
          }
        })
      },
      handleCheckAllChange(val) {
        this.checkList = val ? fileOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === fileOptions.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < fileOptions.length;
      },
      down() {
        if(this.checkList.length == 0) {
          this.$message.error({
            message: '请先选择要下载的文件',
            customClass: 'font20'
          })
        }
        for (let i = 0; i < this.checkList.length; i++) {
          if (this.checkList[i]) {
            this.downloadFile(this.checkList[i])
          }
        }
      },
      downloadFile(url) {
        const iframe = document.createElement("iframe");
        iframe.style.display = "none"; // 防止影响页面
        iframe.style.height = 0; // 防止影响页面
        iframe.src = url;
        document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
        // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
        setTimeout(() => {
          iframe.remove();
        }, 5 * 60 * 1000);
      }
    }
  }
</script>

<style scoped>
  .web_box {
    width: 100%;
    min-height: 100vh;
    background: #F5F5F5;
  }
  
  .table {
    width: 100%;
    background: #FFFFFF;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 0 20px;
    margin-bottom: 100px;
  }
  .cell {
    width: 100%;
    padding: 22px 0;
    border-top: 1px solid #F5F5F5;
  }
  .left {
    padding-left: 23px;

  }
  .text {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 20px;
  }
  .name {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0,0,0,0.88);
    line-height: 22px;
  }
  .icon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }
  .bottom {
    width: 100%;
    height: 80px;
    background: #FFFFFF;
    padding: 10px 14px;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;
  }
  .btn {
    width: 107px;
    height: 40px;
    background: #1677B3;
    border-radius: 20px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 40px;
    text-align: center;
  }
  .text2 {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 20px;
    padding-left: 10px;
  }
  /deep/ .el-checkbox__label {
    display: none;
  }
  /deep/.el-checkbox__inner {
    border-radius: 50%;
  }
</style>
<style>
  .font10 {
    font-size: 15px !important;
  }
</style>