瀏覽代碼

feat: 修改

year 2 天之前
父節點
當前提交
11a3aab35a
共有 2 個文件被更改,包括 58 次插入25 次删除
  1. 7 0
      src/api/home.ts
  2. 51 25
      src/app/[locale]/(navbar)/search/page.tsx

+ 7 - 0
src/api/home.ts

@@ -441,3 +441,10 @@ export const getNavigateBar = () => {
         url: "/v1/api/front/home/navigate_bars",
     });
 };
+// 获取推荐游戏
+export const getRecommendGame = (data: any) => {
+    return server.post<GameListRep[]>({
+        url: "/v1/api/front/game_list_recommend",
+        data,
+    });
+};

+ 51 - 25
src/app/[locale]/(navbar)/search/page.tsx

@@ -1,12 +1,12 @@
 "use client";
-import { GameListRep, searchGameListApi } from "@/api/home";
+import { GameListRep, getRecommendGame, searchGameListApi } from "@/api/home";
 import Card from "@/components/Card/Card";
 import Empty from "@/components/Empty2";
 import { Local } from "@/utils/storage";
 import { useDebounceEffect } from "ahooks";
-import { Form, Input } from "antd-mobile";
+import { Form, Input, Loading } from "antd-mobile";
 import clsx from "clsx";
-import React from "react";
+import React, { useEffect } from "react";
 import styles from "./page.module.scss";
 
 const Page = () => {
@@ -14,6 +14,7 @@ const Page = () => {
     const [name, setName] = React.useState<string>("");
     const [data, setData] = React.useState<GameListRep[]>([]);
     const [searchData, setSearchData] = React.useState<GameListRep[]>([]);
+    const [tuijianData, setTuijianData] = React.useState<GameListRep[]>([]);
     const [loading, setLoading] = React.useState<boolean>(true);
     // const [hasMore, setHasMore] = React.useState(true);
     const [cache, setCache] = React.useState<string[]>([]);
@@ -25,6 +26,7 @@ const Page = () => {
 
     React.useEffect(() => {
         getCache();
+        getTuijianGame();
         gameContainerRef.current?.addEventListener("touchstart", () => {
             inputRef.current?.blur();
         });
@@ -33,6 +35,20 @@ const Page = () => {
     useDebounceEffect(() => {
         getData(name);
     }, [name]);
+    useEffect(() => {
+        setLoading(true);
+    }, [name]);
+
+    const getTuijianGame = async () => {
+        const res: any = await getRecommendGame({
+            usePage: true,
+            page_size: 5,
+            current_page: 1,
+        });
+        if (res?.code === 200) {
+            setTuijianData(res?.data?.game_list || []);
+        }
+    };
 
     const getCache = () => {
         const cacheData = Local.getKey("ban_cache_search");
@@ -171,27 +187,32 @@ const Page = () => {
                                     </div>
                                 </>
                             )}
-
-                            <div className="mb-[5px] text-[14px] font-black">
-                                Recomendagöes de jogos
-                            </div>
-                            <div>
-                                <div className="mb-[5px] mr-[5px] inline-block rounded-[10px] bg-[var(--primary2)] px-[8px] py-[4px] text-[14px]">
-                                    asdasdsds
-                                </div>
-                                <div className="mb-[5px] mr-[5px] inline-block rounded-[10px] bg-[var(--primary2)] px-[8px] py-[4px] text-[14px]">
-                                    asdasdsds
-                                </div>
-                                <div className="mb-[5px] mr-[5px] inline-block rounded-[10px] bg-[var(--primary2)] px-[8px] py-[4px] text-[14px]">
-                                    asdasdsds
-                                </div>
-                                <div className="mb-[5px] mr-[5px] inline-block rounded-[10px] bg-[var(--primary2)] px-[8px] py-[4px] text-[14px]">
-                                    asdasdsds
-                                </div>
-                                <div className="mb-[5px] mr-[5px] inline-block rounded-[10px] bg-[var(--primary2)] px-[8px] py-[4px] text-[14px]">
-                                    asdasdsds
-                                </div>
-                            </div>
+                            {!!tuijianData?.length && (
+                                <>
+                                    <div className="mb-[5px] text-[14px] font-black">
+                                        Recomendagöes de jogos
+                                    </div>
+                                    <div>
+                                        {tuijianData.map((item) => {
+                                            return (
+                                                <div
+                                                    key={item.id}
+                                                    className="mb-[5px] mr-[5px] inline-block rounded-[10px] bg-[var(--primary2)] px-[8px] py-[4px] text-[14px]"
+                                                    onClick={() => {
+                                                        setName(item.game_name);
+                                                        formRef.current?.setFieldValue(
+                                                            "search_game_name",
+                                                            item.game_name
+                                                        );
+                                                    }}
+                                                >
+                                                    {item.game_name}
+                                                </div>
+                                            );
+                                        })}
+                                    </div>
+                                </>
+                            )}
                         </div>
                     )}
                 </div>
@@ -215,9 +236,14 @@ const Page = () => {
                         })}
                     </div>
                 )}
-                {!showData?.length && (
+                {!showData?.length && !loading && (
                     <Empty type="full" className="pb-[1.5rem]" text="Ainda sem dados"></Empty>
                 )}
+                {!showData?.length && loading && (
+                    <div className="flex h-full items-center justify-center">
+                        <Loading></Loading>
+                    </div>
+                )}
             </div>
         </div>
     );