traffic-eff-app/pasb/pages/file/index.vue

<template>
  <view class="file-info-container">
    <view class="u-page">
      <u-list
          v-if="indexList.length>0"
          @scrolltolower="scrolltolower"
      >
        <u-list-item
            v-for="(item, index) in indexList"
            :key="index"
        >
          <view class="file-info-item" @click="onItemClick(item)">
            <view class="file-info-item-img">
              <image :src="fileIcon(item.fileExt)" mode="aspectFill" />
            </view>
            <view class="file-info-item-content">
              <view class="file-info-item-title">{{ item.title }}</view>
              <view class="file-info-item-date">{{ item.date }}</view>
            </view>
          </view>
        </u-list-item>
      </u-list>
      <u-loadmore :status="loadStatus" />
    </view>
  </view>
</template>

<script>

import { fetchFileList } from '@/common/api';
import { ICON_CFG } from '@/common/EnumConst';
import { fileIcon, getImageUrl, viewFileFn } from '@/util';

let page = 1;
export default {
  name: 'content',
  props: {},
  data() {
    return {
      ICON_CFG,
      indexList: [],
      loadStatus: 'loadmore', // loadmore,loading,nomore
    };
  },
  created() {
  },
  onLoad() {
    this.loadmore();
  },
  methods: {
    fileIcon,
    getImageUrl,
    onItemClick(item) {
      viewFileFn(getImageUrl(item.uri), item.title, `.${item.fileExt}`);
    },
    scrolltolower() {
      if (page > 1 && this.loadStatus === 'nomore') {
        return;
      }
      this.loadmore();
    },
    loadmore() {
      this.loadStatus = 'loading';
      fetchFileList({
        pageNum: page,
        pageSize: 10,
        fileType: 2,
      }).then(res => {
        page += 1;
        if (res.rows.length > 0) {
          this.indexList = this.indexList.concat(res.rows.map(item => {
            return {
              id: item.id,
              title: item.fileName,
              date: item.createTime,
              ...item,
            };
          }));
        }
        if (res.rows.length < 10) {
          this.loadStatus = 'nomore';
        }
      });
    },
  },
};
</script>
<style lang="scss" src="./index.scss" />;