zhibo/hooks/useLoadPageList/useLoadPageList.js

import {
	reactive,
	ref,
} from "vue"

/**
 * 列表控制hooks
 * @param {Function}  fn:请求列表的api函数
 * @param {object}  parmas:列表 除page:1,limit: 10的额外参数
 */
export const useLoadPageList = (getDataFn, parmas) => {
	// 列表数据
	const listData = ref([])
	// 列表参数
	const listParmas = reactive({
		page: 1,
		limit: 10,
	});
	// 下拉状态
	const loadStatus = ref('loadmore')
	// 自定义scrollview状态控制
	const scrollViewTool = reactive({
		triggered: false, //当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
		isEnabled: true, //是否开启下拉
	})
	/**
	 * 获取分页列表
	 * @param {string}  type: refresh :当前页刷新   more: 拼接下一页
	 * @param {object}  parmas:{} 列表参数
	 */
	const getListData = async (type = 'refresh') => {
		if (!getDataFn) {
			console.warn('请求结束:useLoadPageList()中未传入请求列表函数')
			return
		}
		loadStatus.value = 'loading'
		const result = await getDataFn({
			...listParmas,
			...parmas
		})
		if (result) {
			const {
				last_page,
				data,
			} = result.data
			if (type == 'refresh') {
				listData.value = data
			} else {
				listData.value = [...listData.value, ...data]
			}
			if (listParmas.page >= last_page) {
				loadStatus.value = 'nomore';
			} else {
				loadStatus.value = 'loadmore';
			}
		}
	}
	/**
	 * 触底添加下一页
	 */
	const reachBottom = () => {
		if (loadStatus.value === 'loadmore') {
			loadStatus.value = 'loading'
			uni.showNavigationBarLoading()
			setTimeout(() => {
				listParmas.page += 1;
				getListData('more')
				uni.hideNavigationBarLoading()
			}, 1000);
		}
	}
	/**
	 * 下拉列表页
	 */
	const pullDownRefresh = () => {
		scrollViewTool.triggered = true;
		setTimeout(() => {
			scrollViewTool.triggered = false;
			uni.stopPullDownRefresh()
			reSetList()
		}, 1000)
	}
	/**
	 * 列表重置第一页
	 */
	const reSetList = () => {
		listParmas.page = 1
		getListData('refresh')
	}
	/**
	 * 新增列表
	 * @param {Number}  i:0 新增的位置索引值
	 * @param {Object}  v: 新增数据
	 */
	const addList = (i = 0, v) => listData.value.splice(i, 0, v);

	/**
	 * 删除列表
	 * @param {Number}  i:0 删除的位置索引值
	 * @param {Number}  n:1 删除几个
	 */
	const delList = (i = 0, n = 1) => listData.value.splice(i, n);
	/**
	 * 修改列表
	 * @param {Function}  getDetailsFn:获取详情函数
	 * @param {Object}  detailsParmas:获取详情参数
	 */
	const editList = async (getDetailsFn, detailsParmas) => {
		if (!getDetailsFn) {
			console.warn('请求结束:editList()中未传入请求详情函数')
			return
		}
		let res = await getDetailsFn(detailsParmas)
		if (res) {
			const {
				id
			} = res.data
			let idx = listData.value.findIndex(item => item.id == id)
			if (idx > -1) {
				listData.value[idx] = res.data
			} else {
				console.warn(`在列表中未找到ID为${id}的索引`);
			}
		}
	}
	return {
		listData,
		listParmas,
		loadStatus,
		scrollViewTool,
		getListData,
		reachBottom,
		pullDownRefresh,
		reSetList,
		addList,
		delList,
		editList,
	}
}