zhgdyunapp_vue3/pages/supplier/qualifications/fileList.vue

<template>
  <view class="filePage">
    <view class="searchBox">
      <u-icon name="search" color="#999"></u-icon>
      <input class="uni-input" name="searchName" v-model="searchName"
             placeholder="请搜索文件名称"/>
    </view>
    <view style="border-top: 1rpx solid #ddd" v-if="filterList.length>0">
      <view class="fileItem" v-for="(item,index) in filterList" :key="index">
        <view class="left">
          <image class="fileIcon" mode="heightFix" src="@/static/images.png"></image>
          <view class="cont">
            <view class="name">
              {{ item.fileUrl }}
            </view>
            <view class="date">
              {{ item.createTime }}
            </view>
          </view>
        </view>
        <image @click="downloadFn(item)" class="ellipsis" mode="widthFix" src="@/static/ellipsis.png"></image>
      </view>
    </view>
    <view class="placeholderBox" v-else>
      <image src="@/static/noData.png" class="noDataImg"></image>
      <view class="text">
        暂无数据
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchName: '',
      fileList: [],
      timer: null,
    };
  },
  computed: {
    filterList() {
      return this.fileList.filter(item => {
        return item.fileUrl.indexOf(this.searchName) >= 0;
      })
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    formSubmit(e) {
      // console.log(e)
      this.loadData()

    },
    searchFile(e) {
      this.searchName = e.detail.value
    },
    loadData() {
      var _this = this
      this.sendRequest({
        url: "xmgl/xzSupplierQualification/page",
        isalert: true,
        data: {
          userId: uni.getStorageSync("userInfoObj").userId,
          pageNo: 1,
          pageSize: 100
        },
        method: "POST",
        success(res) {
          console.log('文件数据', res);
          _this.fileList = res.result.records;
        }
      })
    },
    downloadFn(item) {
      var that = this
      let fileType = "mp3"
      console.log(item);
      uni.showModal({
        title: '提示',
        content: item.fileUrl,
        confirmText: '下载',
        success: function (res) {
          if (res.confirm) {
            //#ifdef APP-PLUS
            plus.runtime.openURL(that.url_config + 'image/' + item.fileUrl);
            //#endif
            return;
            uni.downloadFile({
              url: that.url_config + 'image/' + item.fileUrl, //仅为示例，并非真实的资源
              success: (res) => {
                console.log(res)
                if (res.statusCode === 200) {
                  // uni.showToast({
                  // 	title:'下载成功'
                  // })
                  var filePath = res.tempFilePath;
                  uni.openDocument({
                    filePath: filePath,
                    fileType: "mp3",
                    success: function (res) {
                      console.log(res);
                      console.log('打开文档成功');
                      uni.showToast({
                        title: '打开文档成功'
                      })
                    }
                  });
                  console.log(filePath);
                  if (!filePath) return
                  uni.saveFile({ //使用该功能，以将临时文件保存在手机中可长久存储的区域
                    tempFilePath: filePath,
                    success: (saveResult) => {
                      // 在保存文件成功后，使用 uni.openDocument 方法打开文件
                      console.log("文件保存成功:", saveResult)
                      uni.openDocument({
                        filePath: saveResult
                            .savedFilePath,
                        // fileType: fileType, //这里把预先限定好的文件类型传来
                        success: function () {
                          console.log(
                              "文件打开成功!");
                          //至此，手机会从app中跳转到文件预览界面
                          //之后可从预览界面返回app中
                        },
                        fail: function (err) {
                          console.log('打开失败',
                              err);
                        },
                      });
                    },
                    fail: function (err) {
                      console.log('保存文件失败', err);
                    },
                  });
                  // uni.openDocument({
                  // 	filePath: filePath,
                  // 	success: function(res) {
                  // 		console.log(res);
                  // 		console.log('打开文档成功');
                  // 		uni.showToast({
                  // 			title: '打开文档成功'
                  // 		})
                  // 	}
                  // });
                } else {
                  uni.showToast({
                    title: '下载失败',
                    icon: "none"
                  })
                }
              }
            });
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.filePage {
  background-color: white;
}

.searchBox {
  padding: 15rpx 20rpx;
  display: flex;
  background-color: #f2f2f2;
  border-radius: 15rpx;
  margin: 20rpx;
}

.uni-input {
  border-radius: 30rpx;
  padding: 10rpx 20rpx;
  font-size: 28rpx;
  line-height: 1;
  width: 65%;
}

.fileItem {
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  color: $uni-text-color;
  border-bottom: 1px solid #ddd;

  .left {
    display: flex;
    align-items: center;
    overflow: hidden;
    flex: 1;
  }

  .fileIcon {
    width: auto;
    height: 70rpx;
    margin-right: 20rpx;
  }

  .cont {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    margin-right: 15rpx;

    .name {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .ellipsis {
    width: 40rpx;
    height: auto;
  }
}

.uni-form-item {
  position: relative;

  .search-icon {
    position: absolute;
    top: 50%;
    right: 50rpx;
    transform: translateY(-50%);
  }
}

.mini-btn {
  position: absolute;
  right: 6px;
  top: 0px;
  border-radius: 30rpx;
  height: 60rpx;
  line-height: 60rpx;
}
</style>