ud:page

src/pages/Social/Foundation.tsx

@@ -9,11 +9,13 @@ import styles from "./Foundation.module.css";
 import TopTabsSection from "@/components/layout/TopTabsSection";
 import appApi from "@/api/app";
 import ScrollReveal from "@/components/ScrollReveal";
+import Pagination from "@/components/Pagination";
 export default function Foundation() {
     const appConfig = useStore((s) => s.appConfig);
     const data = appConfig?.social?.foundation;
     const locale = useStore((s) => s.locale)
     const categoryList = useStore((s) => s.categoryList)
+    const supportLocales = useStore((s) => s.supportLocales)
     const [activeIndex, setActiveIndex] = useState(0);
 
     const banner = data.banner;
@@ -24,13 +26,23 @@ export default function Foundation() {
 
 
     const [newsList, setNewsList] = useState<any[]>([]);
+    const [page, setPage] = useState(1);
+    const [size] = useState(4);
+    const [total, setTotal] = useState(0);
+    const requestSize = size * Math.max(1, supportLocales.length);
+    const categoryId = String(categoryList?.find((item: any) => item.name.includes('【银泰公益基金会】公益传播'))?.id ?? '');
     const localNewsList = useMemo(() => {
         return newsList.filter((item: any) => item.lang.toLowerCase() === locale.split('-')[0]);
     }, [newsList, locale])
     const getNewsList = useCallback(() => {
+        if (!categoryId) {
+            setNewsList([]);
+            setTotal(0);
+            return;
+        }
         appApi.getNewsList({
-            page: 1, size: 1000, sort: "weight DESC",
+            page, size: requestSize, sort: "weight DESC",
-            category_id: String(categoryList?.find((item: any) => item.name.includes('【银泰公益基金会】公益传播'))?.id ?? ''),
+            category_id: categoryId,
         }).then((res: any) => {
             setNewsList(res.data.items.map((item: any) => {
                 return {
@@ -44,8 +56,9 @@ export default function Foundation() {
                     moreText: 'moreText',
                 }
             }));
+            setTotal(res.data.total);
         });
-    }, [])
+    }, [categoryId, page, requestSize])
 
 
     const [fileList, setFileList] = useState<any[]>([]);
@@ -64,8 +77,11 @@ export default function Foundation() {
     }, [])
     useEffect(() => {
         getNewsList()
+    }, [getNewsList])
+
+    useEffect(() => {
         getFileList()
-    }, [])
+    }, [getFileList])
 
     return (
         <div>
@@ -98,7 +114,9 @@ export default function Foundation() {
                                 <AnimateTopCard data={item} />
                             </ScrollReveal>
                         ))}
-                        <div style={{ marginBottom: "3.125rem" }} />
+                    </div>
+                    <div style={{ marginTop: "3.125rem", marginBottom: "3.125rem" }}>
+                        <Pagination total={total} size={requestSize} page={page} onChange={setPage} />
                     </div>
                 </Section>
             )}