englishread-front/mixins/list.js

// 简化版列表的混入
export default {
	data() {
		return {
			list: [],
      pageNo : 1,
      pageSize : 8,
      mixinListApi: '',
      isLoading: false,
      hasMore: true,
      // 额外返回出去的数据
      extraData: null,
      // 每次更新数据后执行的函数 可以进行数据处理
      afterUpdateDataFn: function() {},
      // 每次更新数据前执行的函数，
      beforeUpdateDataFn: function() {},
      // 混入配置
      mixinListConfig: {
        // 数据返回的直接路径
        responsePath: 'result.records',
        // 列表是否需要下拉刷新
        isPullDownRefresh: true,
        // 列表是否需要上拉加载
        isReachBottomLoad: true,
        // 额外返回出去的数据的路径
        extraDataPath: '' 
      }
		}
	},
  computed: {
    // 自定义onShow前会执行的函数
    mixinFnBeforePageShow() {
      return function() {}
    }
  },
	methods: {
    // 获取文件的自定义传参 -- 可以在页面中重写
    mixinSetParams() {
      return {}
    },
    // 解析分路径获取嵌套值
    resolvePath(obj, path) {
      if (path){
        return path.split('.').reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : null), obj)
      }else {
        return obj
      }
    },
    // 初始化分页
    initPage(){
      this.pageNo = 1,
      this.hasMore = true
    },
    // 获取列表
    async getList(isRefresh = false) {
      // console.log('本次请求的pageNo和pageSize', this.pageNo, this.pageSize)

      if (!this.hasMore) {
        return
      }
      this.isLoading = true
      const apiMethod = this.resolvePath(this.$api, this.mixinListApi)
      if (typeof apiMethod !== 'function') {
        console.log('mixinApi不存在', this.mixinListApi);
        return
      }
      // 每次更新数据前执行的函数
      if (this.beforeUpdateDataFn) {
        this.beforeUpdateDataFn(this.list)
      }
      
      const res = await apiMethod({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        ...this.mixinSetParams()
      })
      const resData = this.resolvePath(res, this.mixinListConfig.responsePath) || []
      if (res.code === 200) {
        // 如果没有值了
        if (!resData.length) {
          this.hasMore = false
          uni.showToast({
            title: '暂无更多数据',
            icon: 'none'
          })
        }else {
          this.pageNo++
        }

        if (isRefresh ) {
          // 如果是刷新，直接覆盖
          this.list = resData
          
        } else {
          this.list = [...this.list, ...resData]
        }

        // 如果有额外数据的路径，刷新后，需要将额外数据也刷新
        if (this.mixinListConfig.extraDataPath !== '') {
          this.extraData = this.resolvePath(res, this.mixinListConfig.extraDataPath)
        }
      }
      // 每次更新数据后执行的函数
      if (this.afterUpdateDataFn) {
        this.afterUpdateDataFn(this.list)
      }
      // 如果有在加载中
      if (this.isLoading) {
        this.isLoading = false
      }
      // 有过有在下拉加载
      uni.stopPullDownRefresh()
    },
	},
  async onShow() {
    // if (!this.list.length) {
      if (this.mixinFnBeforePageShow) this.mixinFnBeforePageShow()
      this.initPage()
      await this.getList(true)
    // }
  },
  async onPullDownRefresh() {
    // 在下拉还没结束前 不做任何操作
    if (this.isLoading) {
      return
    }
    this.initPage()
    await this.getList(true)
  },
  async onReachBottom() {
    if (this.isLoading) {
      return
    }
    await this.getList()
  }
}