|
@@ -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>
|
|
|
);
|