feat: 修改

src/api/activity.ts

@@ -230,6 +230,8 @@ export interface RankItem {
     end_time: number;
     banner: string;
     desc: string;
+    type: 0 | 1 | 2 | 3;
+    source: 1 | 2 | 3 | 4 | 5 | 6;
 }
 
 export const getRank = async (params = {}) => {

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

@@ -88,7 +88,7 @@ const TabItem = ({
             router.push(item.url);
         }
     };
-    const cls = clsx("pro-iconfont text-[.34rem]", item && item.icon ? `pro-${item.icon}` : "");
+    const cls = clsx("pro-iconfont text-[.16rem]", item && item.icon ? `pro-${item.icon}` : "");
 
     // const cls2 = clsx("iconfont text-[.34rem]", `icon-${item.icon}`);
 
@@ -147,6 +147,8 @@ const Tabs: FC<Props> = (props) => {
     const [active, setActive] = useState<string | undefined>();
     const stickyRef = React.useRef<number>(0);
     const containerRef = React.useRef<number>(0);
+    const handleRef = React.useRef<NodeJS.Timeout | null>(null);
+
     const newButtonGroup = buttonGroup.filter((item: any) => {
         if (item.url === "/freeGames" && show_free_game !== 1) {
             return false;
@@ -178,6 +180,7 @@ const Tabs: FC<Props> = (props) => {
                                 setActive(id);
                             },
                             8: () => {
+                                tabClick();
                                 setActive(id);
                                 selectHandler(id);
                             },
@@ -198,6 +201,16 @@ const Tabs: FC<Props> = (props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [tabs, active, newButtonGroup]);
 
+    const tabClick = () => {
+        if (handleRef.current) {
+            clearTimeout(handleRef.current);
+            handleRef.current = null;
+        }
+        handleRef.current = setTimeout(() => {
+            handleRef.current = null;
+        }, 1000);
+    };
+
     const getTab = (id: string) => {
         let result = tabData.find((item: any) => {
             return item.id === id;
@@ -234,6 +247,7 @@ const Tabs: FC<Props> = (props) => {
     };
 
     const doScorll = () => {
+        if (handleRef.current) return;
         let target = null;
         for (let i = 0; i < tabData.length; i++) {
             const element = tabData[i];
@@ -258,12 +272,13 @@ const Tabs: FC<Props> = (props) => {
                 setActive(target.id);
             }
         }
-        requestAnimationFrame(doScorll);
+        // requestAnimationFrame(doScorll);
     };
 
     const selectHandler = (id?: string) => {
         if (!id) return;
         const toTab = getTab(id);
+        if (toTab.action_type !== 8) return;
 
         const toDom = document.querySelector(`#jump_${toTab.jump_id}`);
 
@@ -294,7 +309,9 @@ const Tabs: FC<Props> = (props) => {
                 <CustomTabs
                     items={tabData as any}
                     activeKey={active}
-                    // onChanage={selectHandler}
+                    onChanage={(value) => {
+                        setActive(value);
+                    }}
                 ></CustomTabs>
             </div>
             {/* <div className="sticky top-[0rem] z-[3] bg-[var(--primary1)] px-[.1rem] pb-[.05rem] pt-[.05rem]">

src/app/[locale]/(doings)/happyWheel/page.module.scss

@@ -22,7 +22,7 @@
     background: linear-gradient(to bottom, var(--gradient-left1) 10%, var(--gradient-right1) 100%);
     position: absolute;
     border-radius: var(--borderRadius);
-    left: 0.08rem;
+    left: 0;
     top: 0.05rem;
     bottom: 0.05rem;
     width: calc((100% - 0.1rem) / 3);

src/app/[locale]/(doings)/happyWheel/page.tsx

@@ -27,7 +27,7 @@ const Page = () => {
             <HeaderBack
                 showBack={true}
                 headerRender={() => (
-                    <div className="relative flex h-[100%] w-full items-center justify-center py-[.05rem] pl-[.08rem]">
+                    <div className="relative ml-[.43rem] flex h-[100%] w-full items-center justify-center py-[.05rem]">
                         {wheelType.map((item) => {
                             return (
                                 <div
@@ -47,7 +47,7 @@ const Page = () => {
                         <div
                             className={styles.typeSelected}
                             style={{
-                                transform: `translateX(calc(${curType * 100}% + ${curType * 0.02}rem))`,
+                                transform: `translateX(calc(${curType * 100}% + ${curType * 0.05}rem))`,
                             }}
                         ></div>
                     </div>

src/app/[locale]/(doings)/rank/page.tsx

@@ -12,7 +12,7 @@ import { userInfoApi } from "@/api/login";
 import CustomButton from "@/components/CustomButton";
 import HeaderBack from "@/components/HeaderBack";
 import Tabs from "@/components/Tabs";
-import { HeaderImageMap } from "@/enums";
+import { HeaderImageMap, RankSourceMap } from "@/enums";
 import { useRouter } from "@/i18n/routing";
 import { cryptoStr } from "@/utils";
 import { useRequest } from "ahooks";
@@ -34,73 +34,74 @@ const Page = () => {
     const [noMore, setNoMore] = React.useState<boolean>(false);
     const [rankList, setRankList] = React.useState<Rank[]>([]);
     const [rankData, setRankData] = React.useState<RankItem[]>([]);
+    const [currentSource, setCurrentSource] = React.useState<any>({
+        source: 1,
+        type: 1,
+    });
+    // source 来源(1现金投注2现金+彩金投注3免费币投注4重玩币投注5现金充值6邀请玩家)
+    // type 榜单类型(0小时榜1日榜单2周榜单3月榜)
 
     const pageInfo = React.useRef({
         page: 0,
     });
+    const SourceObject = React.useMemo(() => {
+        if (!rankData?.length) return [];
 
-    const Tab1Cfg = [
-        {
-            id: "1",
-            name: (
-                <div className="flex items-center justify-center">
-                    <img
-                        className="pic needsclick relative z-[-1] w-[46px]"
-                        src="/rank/jackpot.webp"
-                        alt=""
-                    />
-                    <div className="needsclick relative w-[80px] whitespace-normal break-all text-center text-[12px] font-black leading-[1]">
-                        Ranking de Apostas
-                    </div>
-                </div>
-            ),
-        },
-        {
-            id: "2",
-            name: (
-                <div className="flex items-center justify-center">
-                    <img
-                        className="pic needsclick relative z-[-1] w-[46px]"
-                        src="/rank/agente.webp"
-                        alt=""
-                    />
-                    <div className="needsclick relative w-[80px] whitespace-normal break-all text-center text-[12px] font-black leading-[1]">
-                        Ranking de Agentes
-                    </div>
-                </div>
-            ),
-        },
-    ];
-    const Tab2Cfg = [
-        {
-            id: "1",
-            name: (
-                <div className="flex flex-col items-center justify-center">
-                    <div className="text-[14px] font-black leading-[1]">DIA</div>
-                    <div className="flex flex-row items-center justify-center gap-[5px] text-[12px] text-[var(--primary-button)]">
-                        <i className="iconfont icon-daojishi-hui !text-[13px]"></i>
-                        <div className="countdownTimer needsclick flex flex-row items-center justify-center gap-[1px]">
-                            <span>01</span>:<span>01</span>:<span>01</span>
+        const source: any = {};
+        rankData?.forEach((item) => {
+            if (!source[item.source]) {
+                source[item.source] = {};
+            }
+            source[item.source][item.type] = item;
+        });
+        return source;
+    }, [rankData]);
+
+    const Tab1Cfg = React.useMemo(() => {
+        if (!SourceObject) return [];
+        const result: any = [];
+        Object.keys(SourceObject).forEach((key) => {
+            const curSource = RankSourceMap.get(Number(key)) || ({} as any);
+            result.push({
+                id: key,
+                name: (
+                    <div className="flex items-center justify-center">
+                        <img
+                            className="pic needsclick relative z-[-1] w-[46px]"
+                            src={curSource?.img}
+                            alt=""
+                        />
+                        <div className="needsclick relative w-[80px] whitespace-normal break-all text-center text-[12px] font-black leading-[1]">
+                            {curSource.text}
                         </div>
                     </div>
-                </div>
-            ),
-        },
-        {
-            id: "2",
-            name: (
-                <div className="flex flex-col items-center justify-center">
-                    <div className="text-[14px] font-black leading-[1]">SEM</div>
-                    <div className="flex flex-row items-center justify-center gap-[5px] text-[12px] text-[var(--primary-button)]">
-                        <i className="iconfont icon-daojishi-hui !text-[13px]"></i>
-                        <div className="countdownTimer needsclick flex flex-row items-center justify-center gap-[1px]">
-                            <span>01</span>:<span>01</span>:<span>01</span>
+                ),
+            });
+        });
+        return result;
+    }, [SourceObject]);
+    const Tab2Cfg = React.useMemo(() => {
+        if (!SourceObject[currentSource.source]) return [];
+        const result: any = [];
+        Object.keys(SourceObject[currentSource.source]).forEach((key) => {
+            const curType = RankSourceMap.get(Number(key)) || ({} as any);
+            result.push({
+                id: key,
+                name: (
+                    <div className="flex flex-col items-center justify-center">
+                        <div className="text-[14px] font-black leading-[1]">DIA</div>
+                        <div className="flex flex-row items-center justify-center gap-[5px] text-[12px] text-[var(--primary-button)]">
+                            <i className="iconfont icon-daojishi-hui !text-[13px]"></i>
+                            <div className="countdownTimer needsclick flex flex-row items-center justify-center gap-[1px]">
+                                <span>01</span>:<span>01</span>:<span>01</span>
+                            </div>
                         </div>
                     </div>
-                </div>
-            ),
-        },
-    ];
+                ),
+            });
+        });
+        return result;
+    }, [SourceObject, currentSource]);
 
     const getRankData = async () => {
         const res = await getRank();
@@ -153,6 +154,10 @@ const Page = () => {
         return <img className="inline-block w-[.18rem]" src={`/rank/f${num}.webp`} alt=""></img>;
     };
 
+    const sourceChange = (actKey: any, key: any) => {
+        setCurrentSource((state: any) => ({ ...state, [key]: actKey }));
+    };
+
     return (
         <div className={styles.page}>
             <HeaderBack
@@ -168,7 +173,11 @@ const Page = () => {
                 <div className="h-[100%] p-[.1rem]">
                     <div className={styles.pageContainer}>
                         <div className={styles.tabTop}>
-                            <Tabs items={Tab1Cfg}></Tabs>
+                            <Tabs
+                                items={Tab1Cfg}
+                                activeKey={currentSource.source}
+                                onChanage={(val) => sourceChange(val, "source")}
+                            ></Tabs>
                         </div>
                         <div className={styles.tabType}>
                             <Tabs items={Tab2Cfg}></Tabs>

src/components/Tabs/index.tsx

@@ -36,8 +36,6 @@ const Transactions: FC<PropsWithChildren<Props>> = (props) => {
         }
     };
 
-    console.log(activeKey);
-
     return (
         <Tabs
             style={{
@@ -50,6 +48,7 @@ const Transactions: FC<PropsWithChildren<Props>> = (props) => {
             activeKey={activeKey}
             onChange={tabChange}
             activeLineMode="full"
+            stretch={false}
         >
             {items.map((tab) => {
                 return (

src/enums/index.tsx

@@ -240,3 +240,54 @@ export const HappyStrToImageMap = new Map([
         },
     ],
 ]);
+
+export const RankSourceMap = new Map([
+    [
+        1,
+        {
+            key: 1,
+            text: "Apostas em dinheiro",
+            img: "/rank/jackpot.webp",
+        },
+    ],
+    [
+        2,
+        {
+            key: 2,
+            text: "Apostar dinheiro em dinheiro",
+            img: "/rank/jackpot.webp",
+        },
+    ],
+    [
+        3,
+        {
+            key: 3,
+            text: "Apostas de moedas gratuitas",
+            img: "/rank/jackpot.webp",
+        },
+    ],
+    [
+        4,
+        {
+            key: 4,
+            text: "Repayer a aposta de moeda",
+            img: "/rank/jackpot.webp",
+        },
+    ],
+    [
+        5,
+        {
+            key: 5,
+            text: "Recarga de dinheiro",
+            img: "/rank/jackpot.webp",
+        },
+    ],
+    [
+        6,
+        {
+            key: 6,
+            text: "Invita jogadores",
+            img: "/rank/agente.webp",
+        },
+    ],
+]);