community-front/mixins/list.js

// 简化版列表的混入
export default {
	data() {
		return {
			list: [],
      pageNo : 1,
      pageSize : 10,
      // 此处为拓展参数
			extraParams: { },
      mixinListApi: '',
      isLoading: false,
      mixinListCofig: {
        // 数据返回的直接路径
        responsePath: 'result.records',
        // 列表是否需要下拉刷新
        isPullDownRefresh: true,
        // 列表是否需要上拉加载
        isReachBottomLoad: true
      }
		}
	},
	methods: {
    // 解析分路径获取嵌套值
    resolvePath(obj, path) {
      return path.split('.').reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : null), obj)
    },
    // 刷新时保留的请求参数
    setParams() {
      return {  }
    },
    // 初始化数据
    initData() {
      this.list = [  ]
    },
    // 初始化请求参数
    initParams() {
      this.extraParams = { ...this.setParams() }
    },
    // 初始化分页
    initPage(){
      this.pageNo = 1
    },
    // 全部初始化
    initAll() {
      this.initData()
      // this.initParams()
      this.initPage()
    },
    // 获取列表
    async getList() {
      this.isLoading = true
      const apiMethod = this.resolvePath(this.$api, this.mixinListApi)
      if (typeof apiMethod !== 'function') {
        console.log('mixinApi不存在', this.mixinListApi);
        return
      }
      const res = await apiMethod({
        ...this.extraParams,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      })
      const resData = this.resolvePath(res, this.mixinListCofig.responsePath) || []
      if (res.code === 200 && resData.length) {
        this.list = [...this.list, ...resData]
        this.pageNo++
      }else {
        uni.showToast({
          title: '暂无数据',
          icon: 'none'
        })
      }
      // 如果有在加载中
      if (this.isLoading) {
        this.isLoading = false
      }
      // 有过有在下拉加载
      uni.stopPullDownRefresh()
    },
	},
  async onShow() {
    if (!this.list.length) {
      await this.getList()
    }
  },
  onHide() {
    this.initAll()
  },
  async onPullDownRefresh() {
    this.initAll()
    await this.getList()
  },
  async onReachBottom() {
    await this.getList()
  }
}