pet-front/utils/pageList.js

import { ref, reactive } from 'vue'
import { onShow, onReachBottom } from '@dcloudio/uni-app'

export const usePageList = (apiFun, defaultQueryParams) => {

  const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    ...defaultQueryParams
  })

  const list = ref([])
  const total = ref(0)

  const fetchData = async () => {
    try {
      const res = await apiFun(queryParams)

      if (res.code === 200) {
        return res.data
      }

      return { list: [], total: 0 }
    } catch (err) {
      return { list: [], total: 0 }
    }
  }

  const getData = async () => {
    queryParams.pageNo = 1
    const { list: _list, total: _total } = await fetchData()

    list.value = _list
    total.value = _total
  }

  const getMore = async () => {
    if (list.value.length >= total.value) {
      return
    }

    queryParams.pageNo++
    const { list: _list } = await fetchData()

    list.value = list.value.concat(_list)
  }
  
  onShow(() => {
    // todo fetch
    console.log('--onShow')
    return
  
    getData()
  })

  onReachBottom(() => {
    // todo fetch
    console.log('--onReachBottom')
    return
  
    getMore()
  })

  return {
    queryParams,
    list,
    total,
    getData,
    getMore,
  }

}