/* * @Author: 秦少卫 * @Date: 2024-05-17 11:00:14 * @LastEditors: 秦少卫 * @LastEditTime: 2024-06-09 17:02:23 * @Description: 分页通用 */ const repoSrc = import.meta.env.APP_APIHOST; import axios from 'axios'; import qs from 'qs'; // 分类API const typeApi = (url) => axios.get(`${repoSrc}/api/${url}?pagination[pageSize]=200`); // 分页API const pageApi = (url, queryParams) => axios.get(`${repoSrc}/api/${url}?${queryParams}`); const getInfo = (id) => axios.get(`${repoSrc}/api/templs/${id}`); function getQueryParams(option, filters) { filters.forEach((item) => { const { key, value, type } = item; if (value) { option.filters[key] = { [type]: value }; } }); return qs.stringify(option); } function getPageParams( page, typeValue, searchKeyWord, searchTypeKey, searchWordKey, pageSize, fields ) { const query = { populate: { img: '*', }, filters: {}, fields, pagination: { page: page, pageSize: pageSize, }, }; const queryParams = getQueryParams(query, [ { key: searchTypeKey, value: typeValue, type: '$eq', }, { key: searchWordKey, value: searchKeyWord, type: '$contains', }, ]); return queryParams; } function getMaterialInfoUrl(info) { const imgUrl = info?.data?.attributes?.url || ''; return repoSrc + imgUrl; } function getMaterialPreviewUrl(info) { const imgUrl = info?.data?.attributes?.formats?.small?.url || info?.data?.attributes?.url || ''; return repoSrc + imgUrl; } export default function usePageList({ typeUrl, listUrl, searchTypeKey, searchWordKey, scrollElement, pageSize, fields = [], }) { const pageLoading = ref(false); // 关键词 const searchKeyWord = ref(''); // 分类 const typeValue = ref(''); const typeList = ref([]); const typeText = computed(() => { const info = typeList.value.find((item) => item.value === typeValue.value); return info?.lable || '全部'; }); // 素材列表 const pageData = ref([]); const page = ref(1); const pagination = reactive({ page: 0, pageCount: 0, pageSize: 10, total: 0, }); // 是否到达底部 const isDownBottm = computed(() => { return pagination.page === page.value && pagination.page >= pagination.pageCount; }); // 获取分类列表 const getTypeList = async () => { pageLoading.value = true; try { const res = await typeApi(typeUrl); const list = res.data.data.map((item) => { return { value: item.id, label: item.attributes.name, }; }); typeList.value = [ { label: '全部', value: '', }, ...list, ]; } catch (error) { typeList.value = []; } pageLoading.value = false; }; const getPageData = async () => { pageLoading.value = true; try { const params = getPageParams( page.value, typeValue.value, searchKeyWord.value, searchTypeKey, searchWordKey, pageSize, fields ); const res = await pageApi(listUrl, params); const list = res.data.data.map((item) => { return { id: item.id, name: item.attributes.name, desc: item.attributes.desc, json: item.attributes?.json, src: getMaterialInfoUrl(item.attributes.img), previewSrc: getMaterialPreviewUrl(item.attributes.img), }; }); 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); } 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 showScroll = ref(false); const scrollHeight = ref(0); const startPage = async () => { // 滚动 const myTemplBox = document.querySelector(scrollElement); scrollHeight.value = myTemplBox.offsetHeight; showScroll.value = true; await getTypeList(); await getPageData(); }; return { startPage, searchKeyWord, typeValue, typeText, typeList, pageLoading, pageData, isDownBottm, startGetList, nextPage, scrollHeight, showScroll, getInfo, }; }