文件下载模块

文件下载模块

图例

结构

<div class="left-b">
<div class="wz">相关文件</div>
<div>
    <dl>
        <dt>
            <template v-if="detaList.related_file == '-' || !detaList.related_file">
                <div class="file-imga">暂无相关文件</div>
            </template>
            <template v-else>
                <div
                     class="file-img"
                     v-show="detaList.related_file"
                     v-for="(item,index) in detaList.related_file"
                     :key="index"
                     >
                    <a
                       @click="downloadLink(item.url)"
                       style="text-decoration:none;"
                       target="_blank"
                       >
                        <img src="../../assets/images/file.png" alt />
                        <span>{{item.name}}</span>
                    </a>
                </div>
            </template>
        </dt>
        <!-- <dt>
<div class="file-img">
<img src="../../assets/images/file.png" alt />
<span>点击可以直接下载</span>
</div>
</dt>-->
        <!-- <dt>
<div class="file-img">
<img src="../../assets/images/file.png" alt />
<span>下载文件</span>
</div>
</dt>-->
    </dl>
</div>
</div>
</div>

数据

data(){
    return{
 // 问题详情
      // contact: [],
      detaList: {
        related_interpretation: [],
        related_question: [],
        related_law: [],
      },
    }
}

created() {
    // 获取问题详情数据
    this.getDeta()
},

方法

methods:{
        downloadLink(url) {
      this.$http.get('/download', { url: url }).then(
        (response) => {
          if (response.code == 200) {
            window.open(url, '_blank')
          } else {
            this.$message.error('文件下载错误')
          }
        },
        (error) => {
          this.$message.error('文件下载错误')
        }
      )
    },
        
        
      // get请求 get('地址'，'{params:数据}')
    async getDeta() {
      let res = await this.$http.get('/FAQ/detail', {
        id: this.$route.query.id,
      })

      if (res.code != 200) {
        this.$router.push('/404')
      } else {
        this.detaList = res.result
      }
    },
}

样式

  .left-b {
    background: #ffffff;
    width: 880px;
    padding: 0px 10px;
    float: left;
    border-radius: 4px;

    .wz {
      width: 880px;
      float: left;
      margin-top: 16px;
      margin-left: 10px;
      margin-bottom: 8px;
      font-size: 18px;
      color: rgba(0, 0, 0, 0.85);
      line-height: 22px;
      font-weight: bold;
    }
    dt {
      float: left;
    }
    .file-imga {
      font-size: 16px;
      color: #333333;
      margin-left: 10px;
      margin-bottom: 10px;
    }
    .file-img {
      display: inline-block;
      width: 84px;
      padding: 0px 10px;
      margin-bottom: 10px;
      margin-right: 20px;
      vertical-align: top;
      img {
        width: 60px;
        height: 60px;
        margin: 10px 12px 0px 12px;
      }
      span {
        display: inline-block;
        width: 84px;
        font-size: 14px;
        color: #555555;
        text-align: center;
        line-height: 20px;
        margin-bottom: 15px;
      }
    }
  }