IPPSWAP-h5/utils/mixins/list-page.mixin.js

const initListPageContext = () => ({
  // 每页
  pageSize: 10,
  // 当前页
  page: 1,
  // 总数量
  total: 0,
})

export default {
  onPullDownRefresh () {
    // 重置页数
    this.listPageContext.page = 1;
    this.getData(this.listPageContext)
      .finally(() => {
        uni.stopPullDownRefresh();
      });
  },
  /**
   * 尝试给页面打补丁
   * 获取当前以加载的数据
   * 仅在没有数据的时候加载并且数据已经存在的情况下调用
   * @return {*}
   */
  onShow () {
    if (this.status === "loading" || this.originData.length === 0) {
      return;
    }

    return this._getData({page: 1, pageSize: this.originData.length || this.listPageContext.pageSize})
      .then(res => {
        this.originData = res.data;
        this.listPageContext.total = res.total;
      })
  },
  onReachBottom () {
    this._onReachBottom();
  },
  data () {
    return {
      /**
       * 用于 loadmore 组件
       * @type {'loadmore' | 'loading' | 'nomore'}
       */
      status: 'loadmore',
      loadText: {
        loadmore: '轻轻上拉',
        loading: '努力加载中',
        nomore: '没有更多了'
      },
      // 原始数据
      originData: [],
      listPageContext: initListPageContext(),
    }
  },
  computed: {
    // 是否还有更多数据
    hasMore () {
      return this.originData.length < this.listPageContext.total
    },
    // 视图使用的列表数据
    dataForUI () {
      return this.originData.map((item, index) => this._mapFrom(item, index))
    },
  },
  methods: {
    _getData (paging) {
      throw new Error('请在组件中实现 _getData 方法')
    },
    _mapFrom (remoteItem, index) {
      throw new Error('请在组件中实现 _mapFrom 方法')
    },
    _uniqueId (remoteItem) {
      throw new Error('请在组件中实现 _uniqueId 方法')
    },
    getData (paging) {
      paging = paging || this.listPageContext
      this.status = 'loading'
      return this._getData(paging)
        .then(res => {
          if (this.listPageContext.page === 1) {
            this.originData = res.data
          } else {
            this.originData = this.originData.concat(res.data)
          }
          this.listPageContext.total = res.total

          // 判断是否还有更多
          if (this.originData.length >= this.listPageContext.total) {
            this.status = 'nomore'
          } else {
            this.status = 'loadmore'
          }
        })
        .catch(() => {
          this.status = 'loadmore'
        })
    },
    patchOriginData (index, newData) {
      const oldData = this.originData[index]

      this.originData = [
        ...this.originData.slice(0, index),
        {...oldData, ...newData},
        ...this.originData.slice(index + 1),
      ]
    },
    // 删除某条数据
    deleteOriginData (index) {
      this.originData = [
        ...this.originData.slice(0, index),
        ...this.originData.slice(index + 1),
      ]
    },
    resetListPage () {
      this.originData = []
      this.listPageContext = initListPageContext()
    },
    _onReachBottom() {
      // 如果没有更多数据了，就不再加载
      // 如果数据为 0, 则属于误触发，不再加载
      // 如果正在加载中，也不再加载
      if (!this.hasMore || this.originData.length === 0 || this.status === "loading") {
        return
      }
      // 页数 +1
      this.listPageContext.page += 1;
      this.getData(this.listPageContext);
    }
  },
}