/*
|
* @Author: 秦少卫
|
* @Date: 2024-05-29 15:39:20
|
* @LastEditors: 秦少卫
|
* @LastEditTime: 2024-06-09 16:52:59
|
* @Description: 通用分页
|
*/
|
|
import qs from 'qs';
|
import { ref } from 'vue';
|
|
const APIHOST = import.meta.env.APP_APIHOST;
|
export default function usePageList({
|
el,
|
apiClient,
|
filters = {},
|
sort = [],
|
formatData,
|
fields = [],
|
}) {
|
// 滚动条根据页面适应
|
const showScroll = ref(false);
|
const scrollHeight = ref(0);
|
const startPage = async () => {
|
// 滚动
|
const myTemplBox = document.querySelector(el);
|
scrollHeight.value = myTemplBox.offsetHeight;
|
showScroll.value = true;
|
|
await startGetList();
|
};
|
|
// 素材列表
|
const pageData = ref([]);
|
const page = ref(1);
|
const pagination = reactive({
|
page: 0,
|
pageCount: 0,
|
pageSize: 10,
|
total: 0,
|
});
|
|
// 是否到达底部
|
const isDownBottom = computed(() => {
|
return pagination.page === page.value && pagination.page >= pagination.pageCount;
|
});
|
|
const pageLoading = ref(false);
|
const getPageData = async () => {
|
pageLoading.value = true;
|
try {
|
const query = {
|
populate: {
|
img: '*',
|
},
|
filters: {},
|
sort: sort,
|
fields,
|
pagination: {
|
page: page.value,
|
pageSize: page.value.pageSize,
|
},
|
};
|
const params = addFilterParams(query, filters);
|
const res = await apiClient(qs.stringify(params));
|
const list = formatData ? formatData(res.data.data) : res.data.data;
|
Object.keys(res.data.meta.pagination).forEach((key) => {
|
pagination[key] = res.data.meta.pagination[key];
|
});
|
pageData.value = [...pageData.value, ...list];
|
} catch (error) {
|
console.log(error);
|
}
|
// Spin.hide();
|
pageLoading.value = false;
|
};
|
|
const startGetList = () => {
|
pageData.value = [];
|
page.value = 1;
|
getPageData();
|
};
|
|
const nextPage = () => {
|
if (page.value >= pagination.pageCount) return;
|
page.value++;
|
setTimeout(() => {
|
getPageData();
|
}, 1000);
|
};
|
|
const addFilterParams = (query, filters) => {
|
Object.keys(filters).forEach((key) => {
|
const itemFilter = {};
|
Object.keys(filters[key]).forEach((myKey) => {
|
const skip = ['$eq', '$contains'];
|
const isNone = !filters[key][myKey];
|
const isSkip = skip.includes(myKey) && isNone;
|
// 不好包含跳过条件
|
if (!isSkip) {
|
itemFilter[myKey] = filters[key][myKey];
|
} else {
|
// 跳过条件下 判断是否过滤 默认过滤
|
const isFilterEmpty = filters[key].filterEmpty;
|
if (!isFilterEmpty) {
|
itemFilter[myKey] = filters[key][myKey];
|
}
|
}
|
});
|
query.filters[key] = itemFilter;
|
});
|
return query;
|
};
|
|
return {
|
pageData, // 分页数据
|
showScroll,
|
scrollHeight,
|
pageLoading,
|
isDownBottom, // 是否到达底部
|
startPage, // 开始分页
|
getPageData, // 获取分页数据
|
startGetList, // 从第一个开始
|
nextPage, // 下一页
|
};
|
}
|
|
const getMaterialInfoUrl = (info) => {
|
const imgUrl = info?.data?.attributes?.url || '';
|
return APIHOST + imgUrl;
|
};
|
|
const getMaterialPreviewUrl = (info) => {
|
const imgUrl = info?.data?.attributes?.formats?.small?.url || info?.data?.attributes?.url || '';
|
return APIHOST + imgUrl;
|
};
|
|
export { getMaterialInfoUrl, getMaterialPreviewUrl };
|
