feat: 修改商品列表

src/app/[locale]/(navbar)/gameList2/Left.tsx

@@ -37,10 +37,16 @@ const Left: React.FC<Props> = ({ actId, onChage }) => {
     }, [providers, setProviders]);
 
     React.useEffect(() => {
+        if (actId) {
+            const res = providers.find((item) => item.id === actId);
+            if (res) {
+                return;
+            }
+        }
         if (providers?.length && typeof onChage === "function") {
             onChage(providers[0].id);
         }
-    }, [providers]);
+    }, [providers, onChage, actId]);
 
     const changeProvider = (item: GameListRep) => {
         if (providers?.length && typeof onChage === "function") {
@@ -60,6 +66,7 @@ const Left: React.FC<Props> = ({ actId, onChage }) => {
                         onClick={() => changeProvider(item)}
                     >
                         <img src={item.game_icon} alt="" />
+                        <div className="text-[.12rem] text-[#fff]">{item.provider}</div>
                     </div>
                 );
             })}

src/app/[locale]/(navbar)/gameList2/Right.tsx

@@ -1,44 +1,80 @@
 import { GameListRep, searchGameListApi } from "@/api/home";
 import Card from "@/components/Card/Card";
+import Empty from "@/components/Empty";
+import { debounce } from "@/utils/methods";
+import { InfiniteScroll } from "antd-mobile";
 import React from "react";
 import styles from "./page.module.scss";
+
 interface Props {
     providerId: number;
 }
 
 const Left: React.FC<Props> = ({ providerId }) => {
-    console.log(searchGameListApi);
     const [data, setData] = React.useState<GameListRep[]>([]);
+    const [loading, setLoading] = React.useState<boolean>(false);
+    const [hasMore, setHasMore] = React.useState(true);
+    const [isInit, setIsInit] = React.useState(true);
+    const PageRef = React.useRef({
+        current_page: 0,
+        page_size: 15,
+    });
 
     React.useEffect(() => {
-        getData();
+        setData([]);
+        setHasMore(true);
+        setLoading(false);
+        setIsInit(true);
+        PageRef.current.current_page = 0;
     }, [providerId]);
+
     const getData = async () => {
-        const res = await searchGameListApi({
-            provider_id: providerId,
-            current_page: 1,
-            page_size: 15,
-            use_page: true,
-        });
-        if (res.data) {
-            setData(res.data);
+        try {
+            setLoading(true);
+            setIsInit(false);
+            const res = await searchGameListApi({
+                provider_id: providerId,
+                ...PageRef.current,
+                use_page: true,
+            });
+            if (res.data) {
+                const toData = [...data, ...res.data];
+                setData(toData);
+                if (toData.length >= res.page.total_count) {
+                    setHasMore(false);
+                }
+            }
+        } finally {
+            setLoading(false);
         }
-        console.log(1223, res);
     };
+    const loadMore = debounce(async () => {
+        if (!hasMore || loading || !providerId) return;
+        PageRef.current.current_page += 1;
+        getData();
+    }, 500) as () => Promise<void>;
 
     return (
         <div className={styles.right}>
-            {data.map((item) => {
-                return (
-                    <Card
-                        item={item}
-                        className={styles.gameCard}
-                        isShowFavorite={true}
-                        isShowOnline={true}
-                    ></Card>
-                );
-            })}
+            <div className={styles.rightBox}>
+                {data.map((item) => {
+                    return (
+                        <Card
+                            key={item.id}
+                            item={item}
+                            className={styles.gameCard}
+                            isShowFavorite={true}
+                            isShowOnline={true}
+                        ></Card>
+                    );
+                })}
+            </div>
+            {(isInit || data.length > 0) && (
+                <InfiniteScroll loadMore={loadMore} hasMore={hasMore}></InfiniteScroll>
+            )}
+
+            {!isInit && !loading && data.length <= 0 && <Empty></Empty>}
         </div>
     );
 };
-export default Left;
+export default React.memo(Left);

src/app/[locale]/(navbar)/gameList2/layout.tsx

@@ -4,7 +4,7 @@ import { ReactNode } from "react";
 export const generateMetadata = async () => {
     const t = await getTranslations("titles");
     return {
-        title: t("transactions"),
+        title: "Lista",
     };
 };
 export default async function Layout({
@@ -14,7 +14,6 @@ export default async function Layout({
     children: ReactNode;
     params: { locale: string };
 }) {
-    const t = await getTranslations("Header");
     return (
         <div className="rechargePage h-[100%] overflow-auto">
             <HeaderBack

src/app/[locale]/(navbar)/gameList2/page.module.scss

@@ -11,14 +11,16 @@
     .right {
         flex: 1;
         min-width: 0;
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        grid-gap: 0.1rem;
-        overflow: auto;
         padding: 0.1rem 0.1rem 0.8rem 0;
+        overflow: auto;
+        .rightBox {
+            display: grid;
+            grid-template-columns: repeat(3, auto);
+            grid-gap: 0.1rem;
+        }
     }
     .gameCard {
-        height: 1.3rem !important;
+        height: 1.1rem !important;
         :global(.adm-image) {
             height: 100% !important;
         }
@@ -27,13 +29,13 @@
         background-color: #2b353f;
         border-radius: 0.1rem;
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
         width: 100%;
         margin-bottom: 0.1rem;
         height: 0.7rem;
         box-sizing: border-box;
-        padding: 0.2rem;
         position: relative;
         overflow: hidden;
         &::before {
@@ -69,7 +71,17 @@
         img {
             position: relative;
             z-index: 3;
-            width: 0.6rem;
+            width: 0.4rem;
+        }
+        div {
+            position: relative;
+            z-index: 3;
+            width: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            text-align: center;
+            font-weight: bold;
         }
     }
 }

src/app/[locale]/(navbar)/gameList2/page.tsx

@@ -1,15 +1,26 @@
 "use client";
+import { useSearchParams } from "next/navigation";
 import React from "react";
 import Left from "./Left";
 import Right from "./Right";
 import styles from "./page.module.scss";
 const Page = () => {
-    const [curProvider, setCurProvider] = React.useState(0);
+    const searchParams = useSearchParams();
+    const [isInited, setIsInited] = React.useState(false);
+    const [curProvider, setCurProvider] = React.useState(
+        Number(searchParams.get("provider_id")) || 0
+    );
 
     return (
         <div className={styles.page}>
-            <Left actId={curProvider} onChage={setCurProvider}></Left>
-            <Right providerId={curProvider}></Right>
+            <Left
+                actId={curProvider}
+                onChage={(val) => {
+                    setCurProvider(val);
+                    setIsInited(true);
+                }}
+            ></Left>
+            <Right providerId={isInited ? curProvider : 0}></Right>
         </div>
     );
 };