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, } }