fix: 修改大类

.env.production

@@ -1,4 +1,5 @@
 
-NEXT_PUBLIC_BASE_URL=http://206.168.191.125:8800
+NEXT_PUBLIC_BASE_URL=http://192.168.0.84:8800
+#NEXT_PUBLIC_BASE_URL=http://206.168.191.125:8800
 
 

src/app/[locale]/(extend)/_home/HomeGames.tsx

@@ -1,10 +1,10 @@
 "use client";
 import { Category, GameListRep } from "@/api/home";
-import { SwiperGroup } from "@/components/Card";
+import SwiperGroup from "@/components/Card/SwiperGroup";
 import { useRouter } from "@/i18n";
-
 interface Props {
     groupGames: Category[];
+    // group: GroupType[];
 }
 
 const Manufacturer = (props: { data: GameListRep[] }) => {
@@ -23,7 +23,7 @@ const HomeGames = (props: Props) => {
         router.push(`/gameList/${item.line_config_amount}`);
     };
     return (
-        <div>
+        <>
             {groupGames.map((group, index) => {
                 if (group.type !== 2) {
                     return (
@@ -49,7 +49,7 @@ const HomeGames = (props: Props) => {
                     );
                 }
             })}
-        </div>
+        </>
     );
 };
 

src/app/[locale]/(extend)/_home/HomeMessage.tsx

@@ -14,7 +14,6 @@ const HomeMessage: FC<Props> = (props) => {
     }));
     useEffect(() => {
         getGlobalNotice();
-
         const isCloseMessage = sessionStorage.getItem("isCloseMessage");
         setVisible(!isCloseMessage);
     }, []);
@@ -26,7 +25,7 @@ const HomeMessage: FC<Props> = (props) => {
     return (
         <>
             <AnimatePresence>
-                {visible && (
+                {visible && topNotices.content && (
                     <motion.div
                         className={`absolute z-10 flex w-[100%] bg-[rgba(1,1,1,0.8)] px-[0.1389rem] py-[0.0333rem] text-[0.13rem]`}
                         initial={{ opacity: 0 }}

src/app/[locale]/(extend)/_home/HomeTabs.tsx

@@ -1,35 +1,83 @@
 "use client";
+import { GroupType } from "@/api/home";
+import Box from "@/components/Box";
 import { useRouter } from "@/i18n";
 import { Toast } from "antd-mobile";
 import clsx from "clsx";
 import { useTranslations } from "next-intl";
-import { FC } from "react";
+import { FC, useState } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
+import HomeGames from "./HomeGames";
 
 const buttonGroup = [
-    { icon: "icon-liwulipinjiangpin", title: "first", isHot: true, url: "/gameList/99" },
-    { icon: "icon-mofang", title: "second", isHot: false, url: "/gameList/110" },
-    { icon: "icon-zuqiu2", title: "third", isHot: false, url: "/gameList/110" },
-    { icon: "icon-icons_video", title: "fourth", isHot: false, url: "/gameList/112" },
-    { icon: "icon-header-18", title: "Fifth", isHot: false, url: "/gameList/110" },
+    {
+        icon: "icon-liwulipinjiangpin",
+        category_name: "first",
+        isHot: true,
+        url: "/gameList/99",
+        locale: true,
+    },
+    {
+        icon: "icon-mofang",
+        category_name: "second",
+        isHot: false,
+        url: "/gameList/110",
+        locale: true,
+    },
+    {
+        icon: "icon-zuqiu2",
+        category_name: "third",
+        isHot: false,
+        url: "/gameList/110",
+        locale: true,
+    },
+    {
+        icon: "icon-icons_video",
+        category_name: "fourth",
+        isHot: false,
+        url: "/gameList/112",
+        locale: true,
+    },
+    {
+        icon: "icon-header-18",
+        category_name: "Fifth",
+        isHot: false,
+        url: "/gameList/110",
+        locale: true,
+    },
 ];
 
-type TabItemType = (typeof buttonGroup)[number];
-const TabItem = ({ item }: { item: TabItemType }) => {
+type TabItemType = (typeof buttonGroup)[number] & GroupType;
+const TabItem = ({
+    item,
+    active,
+    onClick,
+}: {
+    item: TabItemType;
+    active?: boolean;
+    onClick?: (item: TabItemType) => void;
+}) => {
     const router = useRouter();
     const t = useTranslations("ButtonGroup");
     const handler = (item: TabItemType) => {
-        // router.push(item.url);
-        Toast.show("it is under development.");
+        if (item.locale) {
+            Toast.show("it is under development.");
+        } else {
+            onClick && onClick(item);
+        }
     };
     const cls = clsx("iconfont text-[0.14rem]", item.icon);
+    const rootCls = clsx(
+        "relative mr-[0.06rem] flex h-[0.3rem] bg-[#3a3a3a] flex-1 cursor-pointer items-center" +
+            " rounded-[0.05rem]  px-[0.08rem] py-[0.03rem] text-[0.12rem] text-[#fff]",
+        { "bg-primary-color": active }
+    );
     return (
-        <div
-            className={`relative mr-[0.06rem] flex h-[0.3rem] flex-1 cursor-pointer items-center rounded-[0.05rem] bg-[#3a3a3a] px-[0.08rem] py-[0.03rem] text-[0.12rem] text-[#fff]`}
-            onClick={() => handler(item)}
-        >
+        <div className={rootCls} onClick={() => handler(item)}>
             <span className={cls}></span>
-            <span className={"ml-[0.03rem] truncate"}>{t(item.title)}</span>
+            <span className={"ml-[0.03rem] truncate"}>
+                {item.locale ? t(item.category_name) : item.category_name}
+            </span>
             {item.isHot && (
                 <img
                     className={"absolute -top-[0.12rem] right-0 h-[0.21rem] w-[0.21rem]"}
@@ -40,15 +88,36 @@ const TabItem = ({ item }: { item: TabItemType }) => {
         </div>
     );
 };
-const Tabs: FC = () => {
+
+interface Props {
+    tabs: GroupType[];
+}
+const Tabs: FC<Props> = (props) => {
+    const { tabs } = props;
+    const tabData = [...tabs, ...buttonGroup];
+    const [active, setActive] = useState<number>(0);
+    const selectHandler = (item: TabItemType, index: number) => {
+        setActive(index);
+    };
+    const groupGames = tabs[active].category;
     return (
-        <Swiper slidesPerView={3.5} centeredSlidesBounds>
-            {buttonGroup?.map((group, index) => (
-                <SwiperSlide key={index} className={"pt-[0.1389rem]"}>
-                    <TabItem item={group}></TabItem>
-                </SwiperSlide>
-            ))}
-        </Swiper>
+        <>
+            <Box>
+                <Swiper slidesPerView={3.5} centeredSlidesBounds>
+                    {tabData?.map((group, index) => (
+                        <SwiperSlide key={index} className={"pt-[0.1389rem]"}>
+                            <TabItem
+                                item={group as TabItemType}
+                                active={index === active}
+                                onClick={(event) => selectHandler(event, index)}
+                            ></TabItem>
+                        </SwiperSlide>
+                    ))}
+                </Swiper>
+            </Box>
+
+            <HomeGames groupGames={groupGames} />
+        </>
     );
 };
 

src/app/[locale]/(extend)/page.tsx

@@ -1,16 +1,15 @@
 "use server";
 import { BannerRep, GroupType, NoticeRep, PromotionRep } from "@/api/home";
+import HomeTabs from "@/app/[locale]/(extend)/_home/HomeTabs";
 import Box from "@/components/Box";
 import HomeActions from "./_home/HomeActions";
 import HomeCard from "./_home/HomeCard";
-import HomeGames from "./_home/HomeGames";
 import HomeMessage from "./_home/HomeMessage";
 import HomeNoticeBar from "./_home/HomeNoticeBar";
 import HomePrize from "./_home/HomePrize";
 import HomePromotion from "./_home/HomePromotion";
 import HomeSearch from "./_home/HomeSearch";
 import HomeSwiper from "./_home/HomeSwiper";
-import HomeTabs from "./_home/HomeTabs";
 const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
 
 const TIME = 30;
@@ -109,11 +108,11 @@ export default async function Page() {
                 <HomeNoticeBar notices={notices} />
                 <HomeSearch />
                 <HomePrize></HomePrize>
-                <HomeTabs />
             </Box>
-            {group.map((item) => {
-                return <HomeGames groupGames={item.category} key={item.category_name} />;
-            })}
+            <HomeTabs tabs={group} />
+            {/*{group.map((item) => {*/}
+            {/*    return <HomeGames groupGames={item.category} key={item.category_name} />;*/}
+            {/*})}*/}
             <Box>
                 <HomeActions />
             </Box>

src/components/Card/SwiperGroup.tsx

@@ -32,7 +32,7 @@ interface SwiperGroupProps extends GroupProps, CardProps {
 const HomeSwiper: FC<PropsWithChildren<SwiperGroupProps>> = (props) => {
     const {
         group,
-        page = 6,
+        page = 3,
         todoHandler,
         bg = true,
         visibleTitle = true,
@@ -50,12 +50,13 @@ const HomeSwiper: FC<PropsWithChildren<SwiperGroupProps>> = (props) => {
         "mb-[0.11rem]"
     );
     if (!group.game_list) return;
-    const swiperData = Array(Math.ceil(group.game_list!.length / page))
+    const lineNum = page * group.line_num;
+    const swiperData = Array(Math.ceil(group.game_list!.length / lineNum))
         .fill(0)
         .map((_, index) => {
             return {
                 key: index,
-                data: group.game_list!.slice(index * page, index * page + page),
+                data: group.game_list!.slice(index * lineNum, index * lineNum + lineNum),
             };
         });
     const prev = () => {

src/stores/useGlobalNoticeStore.ts

@@ -23,7 +23,7 @@ export const useGlobalNoticeStore = create<State & Action>()((set, get) => {
         },
         getGlobalNotice: async () => {
             const res = await getGlobalNoticeApi();
-            if (res.code === 200) {
+            if (res.code === 200 && res.data) {
                 set((state) => ({ globalNotices: res.data, topNotices: res.data[0] }));
             } else {
                 set(initialState);