mp_exhibitor_miniprog/pages/files/index.vue

<template>
  <page-layout class="video-container">
    <nav-bar title="观众指南" @init="onInitNavbar"></nav-bar>
    <u-scroll-view :tabbar-conflict="true">
      <view class="main-container">
        <view class="file-list">
          <template v-for="(item,index) in list">
            <view class="file-item"
                  :key="index"
                  v-if="item.url && item.name"
                  @click="downloadFile(item.url)">
              <view class="iconfont icon-Filled"></view>
              <span class="file-name">{{item.name ? item.name : '观众指南文件'}}</span>
              <view class="iconfont icon-Download"></view>
            </view>
          </template>
        </view>
      </view>
    </u-scroll-view>
    <float-button></float-button>
  </page-layout>
</template>

<script>
import NavBar from '@/components/layout/nav-bar'
import UScrollView from '@/components/common/u-scroll-view'
import VanOverlay from '@/wxcomponents/vant/overlay/index'
import floatButton from "@/components/layout/float-button"
import {
  getDashboardInfo
} from '@/api'
import PageLayout from "@/components/layout/page-layout";

export default {
  components: {
    PageLayout,
    NavBar,
    UScrollView,
    VanOverlay,
    floatButton
  },
  data() {
    return {
      list: []
    }
  },
  props: {
    imageMode: {
      type: String,
      default: 'aspectFill' // 参考https://zh.uniapp.dcloud.io/component/image.html
    }
  },
  mounted() {
    this.getDashboardData()
  },
  methods: {
    isImageUrl(url) {
      const imageExtensions = /\.(webp|jpg|jpeg|png|gif|bmp|svg)$/i;
      return imageExtensions.test(url);
    },
    downloadFile(url) {
      if (url) {
        let that= this
        that.showLoading({title: '加载文件中'})
        uni.downloadFile({
          // 示例 url，并非真实存在
          url: url,
          success: function (res) {
            const filePath = res.tempFilePath
            if (that.isImageUrl(url)) {
              uni.saveImageToPhotosAlbum({
                filePath: filePath
              })
            } else {
              uni.openDocument({
                showMenu:true,
                filePath: filePath,
                success: function (res) {
                }
              })
            }
            that.hideLoading()

          }
        })
      }
    },
    getDashboardData() {
      getDashboardInfo('', process.env.CONFERENCE_WEBSITE).then(res => {
        if (res.data.module2 && res.data.module2[6] && res.data.module2[6].fileList) {
          this.list = res.data.module2[6].fileList
        }
      })
    },
  }
}
</script>

<style lang="scss">
.file-list {
  display: flex;
  flex-direction: column;
  grid-gap: 20rpx;

  .file-item {
    display: flex;
    align-items: center;
    grid-gap: 10rpx;
    padding: 40rpx;
    background: #ffffff;
    box-shadow: 5rpx 5rpx 10rpx #cccccc;

    .file-name {
      flex: 1;
      min-width: 1px;
      font-size: $fontSize3;
    }

    .iconfont {
      font-size: 36rpx;
    }
  }
}
</style>