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

<template>
  <auth-wrap class="file-info-container" ref="authWrap">
    <template slot="content">
      <u-toast ref="uToast"></u-toast>
      <view class="search-content">
        <u-search placeholder="请输入关键字" v-model="keyword" @custom="onSearch" @search="onSearch"></u-search>
      </view>
      <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="item.imgUrl" 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>
    </template>
  </auth-wrap>
</template>

<script>

import { fetchContentInfo, fetchUsrMeetingInfo } from '@/common/api';
import { CONTENT_TYPE, ICON_CFG } from '@/common/EnumConst';
import AuthWrap from '@/components/AuthComp/index.vue';
import { fileIcon, getImageUrl } from '@/util';

let page = 1;
export default {
  name: 'content',
  props: {},
  components: {
    AuthWrap,
  },
  data() {
    return {
      ICON_CFG,
      keyword: '',
      indexList: [],
      loadStatus: 'loadmore', // loadmore,loading,nomore
    };
  },
  created() {
  },
  onLoad() {
    this.$refs.authWrap.reloadPage();
    page = 1;
    this.loadmore();
  },
  methods: {
    fileIcon,
    getImageUrl,
    onItemClick(item) {
      uni.navigateTo({
        url: `/pasb/pages/detail/index?id=${item.id}`,
      });
    },
    scrolltolower() {
      if (page > 1 && this.loadStatus === 'nomore') {
        return;
      }
      this.loadmore();
    },
    async loadmore() {
      this.loadStatus = 'loading';
      const { data } = fetchUsrMeetingInfo();
      if (!data) {
        this.$refs.uToast.show({
          type: 'default',
          message: '您暂未报名，请先报名',
          complete() {

          },
        });
        return;
      }
      fetchContentInfo({
        pageNum: page,
        pageSize: 10,
        contentType: CONTENT_TYPE.conferenceMaterials,
        title: this.keyword,
      }).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,
              imgUrl: getImageUrl(item.thumbnail),
              ...item,
            };
          }));
        }
        if (res.rows.length < 10) {
          this.loadStatus = 'nomore';
        }
      });
    },
    onSearch() {
      page = 1;
      this.indexList = [];
      this.loadmore();
    },
  },
};
</script>
<style lang="scss" src="./index.scss" />