uni-halo/src/hooks/useListData.ts

import type { Ref } from 'vue'

export interface IPaginationParams {
  page: number
  size: number
}

interface IUpdateDataOptions<T> {
  /** 错误信息 */
  error: boolean | Error
  /** 是否还有更多数据 */
  hasNext: boolean
  /** 列表数据 */
  items: T[]
}

interface IUseListDataOptions<T> {
  params: IPaginationParams
  /** 加载状态 */
  loading: Ref<boolean>
  onPullDownRefresh?: (params: IPaginationParams, updateData: (data: IUpdateDataOptions<T>) => void) => void
  onReachBottom?: (params: IPaginationParams, updateData: (data: IUpdateDataOptions<T>) => void) => void
}

/**
 * useListData是一个定制化的列表数据管理钩子，用于处理列表数据的添加和刷新。
 * @param T 列表数据类型，默认为any。
 * @returns 返回一个对象{list, append}，包含列表数据和数据操作方法。
 */
export function useListData<T>(options: IUseListDataOptions<T>) {
  const _hasNext = ref(false)
  const _error = ref<boolean | Error>()
  const _items = shallowRef<T[]>([])

  /** 是否追加数据 */
  const isAppend = ref(false)
  /** 列表数据 */
  const list = shallowRef<T[]>([])

  /**
   * 数据操作方法
   * @param data 新数据数组
   */
  function append(data: T[]) {
    if (isAppend.value) {
      list.value.push(...data)
      return
    }
    list.value = data
  }

  function _updateData(data: IUpdateDataOptions<T>) {
    _error.value = data.error
    _hasNext.value = data.hasNext
    _items.value = data.items
    uni.stopPullDownRefresh()
  }

  function refresh() {
    if (options.loading.value) {
      return
    }
    isAppend.value = false
    options.params.page = 1
    options.onPullDownRefresh?.(options.params, _updateData)
  }

  /** 下拉刷新 */
  onPullDownRefresh(() => {
    refresh()
  })

  /** 上拉加载更多 */
  onReachBottom(() => {
    if (options.loading.value) {
      return
    }
    if (!_hasNext.value) {
      return
    }
    options.params.page += 1
    isAppend.value = true
    options.onReachBottom?.(options.params, _updateData)
  })

  /** 监听items变化 */
  watch(() => _items.value, (newVal) => {
    if (_error.value) {
      return
    }
    append(newVal)
  })

  return {
    list,
    refresh,
  }
}