feat: 修改

package.json

@@ -44,7 +44,7 @@
     "sass": "^1.77.8",
     "swiper": "^11.1.5",
     "tailwind-merge": "^2.4.0",
-    "twebp2": "0.0.1-beta.5",
+    "twebp2": "0.0.1-beta.8",
     "zustand": "^4.5.4"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -72,8 +72,8 @@ importers:
         specifier: ^2.4.0
         version: 2.6.0
       twebp2:
-        specifier: 0.0.1-beta.5
-        version: 0.0.1-beta.5
+        specifier: 0.0.1-beta.8
+        version: 0.0.1-beta.8
       zustand:
         specifier: ^4.5.4
         version: 4.5.5(@types/react@18.3.18)(immer@10.1.1)(react@18.3.1)
@@ -2524,8 +2524,8 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
-  twebp2@0.0.1-beta.5:
-    resolution: {integrity: sha512-TdAk7qIYug/0FEkE7ONyak0EvgK33jh6V5ne0H1tYN5bnOnZi6PXlqrQplkbITbOOiiPVghKib1qiDb3lVrtxQ==}
+  twebp2@0.0.1-beta.8:
+    resolution: {integrity: sha512-M9RxF6ClJf4kTnDpGoqSwaE+yWKcIp2oUUJhd2Ga6nW/AQ9rgre0OEq1sRKFBK3V85x76Cn3yY5xxVFCQ9nRxA==}
     hasBin: true
 
   type-check@0.4.0:
@@ -5344,7 +5344,7 @@ snapshots:
 
   tslib@2.8.1: {}
 
-  twebp2@0.0.1-beta.5:
+  twebp2@0.0.1-beta.8:
     dependencies:
       chokidar: 4.0.3
       colors: 1.4.0

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

@@ -54,12 +54,12 @@ const HomePrize: FC<Props> = (props) => {
                 <div className="items flex flex-row items-center justify-between">
                     <Tabs>
                         <Tabs.Tab title="Recente" key="recente"></Tabs.Tab>
-                        <Tabs.Tab title="Vitórias" key="Vitórias"></Tabs.Tab>
+                        {/* <Tabs.Tab title="Vitórias" key="Vitórias"></Tabs.Tab> */}
                     </Tabs>
-                    <div>
+                    {/* <div>
                         <div className={styles.desc}>Jogando Agora</div>
                         <div className="pl-[.1rem]">52603</div>
-                    </div>
+                    </div> */}
                 </div>
                 <div className="relative mt-[.15rem] rounded-[.1rem] bg-[#1f2830] px-[.15rem]">
                     <div className={styles.item}>

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

@@ -17,11 +17,25 @@ interface Props {
     data: RankDetail;
 }
 
-const Games: React.FC<Props> = ({ data }) => {
+export type ModalProps = {
+    onClose: () => void;
+    onOpen: () => void;
+};
+
+const Games = React.forwardRef<ModalProps, Props>(({ data }, ref) => {
     const [actPro, setActPro] = React.useState<number>(0);
 
     const [searchStr, setSearchStr] = React.useState<string>("");
 
+    const tipModals = React.useRef<any>(null);
+
+    React.useImperativeHandle(ref, () => {
+        return {
+            onClose: () => tipModals.current?.onClose(),
+            onOpen: () => tipModals.current?.onOpen(),
+        };
+    });
+
     const games = React.useMemo(() => {
         if (!data?.game_list?.length) return [];
         const result: InGameItem[] = [];
@@ -54,6 +68,7 @@ const Games: React.FC<Props> = ({ data }) => {
             position="bottom"
             title={<div className="py-[.1rem] text-[#fff]">Jogos parrticipantes</div>}
             className={styles.tipModal}
+            ref={tipModals}
         >
             <div className="flex h-[65vh] flex-col bg-[#1f2830] p-[.1rem]">
                 <Form
@@ -122,6 +137,6 @@ const Games: React.FC<Props> = ({ data }) => {
             </div>
         </TipsModal>
     );
-};
+});
 
 export default Games;

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

@@ -1,27 +1,69 @@
 "use client";
+import { getRankDetail, Rank, RankDetail, RankRequestParams } from "@/api/activity";
 import TipsModal from "@/components/TipsModal";
+import Vip from "@/components/Vip";
 import VipIcon from "@/components/VipIcon";
 import clsx from "clsx";
+import React from "react";
 import styles from "./page.module.scss";
 
-const History = () => {
-    if (!document.querySelector("#app")) return null;
+export type ModalProps = {
+    onClose: () => void;
+    onOpen: () => void;
+};
+
+interface Props {
+    areaId: number;
+}
+
+const History = React.forwardRef<ModalProps, Props>(({ areaId }, ref) => {
+    const [rankList, setRankList] = React.useState<Rank[]>([]);
+    const [data, setData] = React.useState<RankDetail>({} as RankDetail);
+    const pageInfo = React.useRef({
+        page: 1,
+    });
 
     const getNumber = (num: number) => {
         if (num > 3) return num;
         return <img className="inline-block w-[.3rem]" src={`/rank/t${num}.webp`} alt=""></img>;
     };
 
+    const tipModals = React.useRef<any>(null);
+
+    React.useImperativeHandle(ref, () => {
+        return {
+            onClose: () => tipModals.current?.onClose(),
+            onOpen: () => tipModals.current?.onOpen(),
+        };
+    });
+
+    React.useEffect(() => {
+        getData();
+    }, [areaId]);
+
+    const getData = async () => {
+        const params: RankRequestParams = {
+            area_id: areaId,
+            type: -1,
+            page: pageInfo.current?.page || 1,
+        };
+        const res = await getRankDetail(params);
+        if (res?.code === 200) {
+            setRankList(res?.data?.list || []);
+        }
+    };
+
+    if (!document.querySelector("#app")) return null;
     return (
         <TipsModal
             getContainer={document.querySelector("#app")}
             position="bottom"
             className={styles.tipModal}
-            visible={false}
+            ref={tipModals}
             title={
                 <div className="p-[.1rem] text-left">
                     <span className="text-[#fff]">Conjunto de prémios:</span>
-                    <span className={styles.moneyText}>R$25,253.88</span>
+                    <span className={styles.moneyText}>R${data.total}</span>
                 </div>
             }
         >
@@ -36,7 +78,16 @@ const History = () => {
                             alt=""
                             className={styles.headerImage}
                         />
-                        <div className={styles.vip}>
+                        <Vip
+                            style={{
+                                position: "absolute",
+                                bottom: "-0.1rem",
+                            }}
+                            level={2}
+                            vipIconClassName="relative z-[3]"
+                            vipIconStyle={{ width: ".3rem" }}
+                        ></Vip>
+                        {/* <div className={styles.vip}>
                             <VipIcon
                                 style={{ width: ".3rem" }}
                                 className="relative z-[3]"
@@ -48,7 +99,7 @@ const History = () => {
                             >
                                 VIP 1
                             </div>
-                        </div>
+                        </div> */}
                     </div>
                     <div className="flex-1">
                         <div>sadasdasd</div>
@@ -128,6 +179,6 @@ const History = () => {
             </div>
         </TipsModal>
     );
-};
+});
 
 export default History;

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

@@ -1,21 +1,50 @@
+import { GameItem } from "@/api/activity";
 import Card from "@/components/Card/Card";
+import React from "react";
 import styles from "./page.module.scss";
 
-const Jackpot = () => {
+interface Props {
+    gamesInfo?: {
+        count: number;
+        list: GameItem[];
+    };
+    onShowMore?: () => void;
+}
+
+const Jackpot: React.FC<Props> = ({ gamesInfo, onShowMore }) => {
+    const showGame = React.useMemo(() => {
+        return gamesInfo?.list.slice(0, 6) || [];
+    }, [gamesInfo]);
+
+    const showMore = () => {
+        if (typeof onShowMore === "function") {
+            onShowMore();
+        }
+    };
+
     return (
         <div className={styles.jackpot} id="jackpot">
             <div className={styles.jackpotContainer}>
                 <div className={styles.jackpotTitle}>Jogos de jackpot</div>
                 <div className={styles.jackpotContent}>
-                    <Card></Card>
-                    <Card></Card>
-                    <Card></Card>
-                    <Card></Card>
+                    {showGame.map((item) => {
+                        return (
+                            <Card
+                                key={item.id}
+                                item={item}
+                                isShowFavorite={true}
+                                isShowOnline={true}
+                            ></Card>
+                        );
+                    })}
                 </div>
             </div>
-            <div className="mt-[.1rem] flex justify-center rounded-[.1rem] bg-[#242728] py-[.1rem]">
+            <div
+                className="mt-[.1rem] flex justify-center rounded-[.1rem] bg-[#242728] py-[.1rem]"
+                onClick={showMore}
+            >
                 <span>Ver todos os </span>
-                <span className="mx-[.06rem] text-[#11de68]">1560</span>
+                <span className="mx-[.06rem] text-[#11de68]">{gamesInfo?.count}</span>
                 <span>Jogos &gt;</span>
             </div>
         </div>

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

@@ -1,6 +1,7 @@
 "use client";
-import { Rank, RankDetail } from "@/api/activity";
-import VipIcon from "@/components/VipIcon";
+import { GameItem, Rank, RankDetail } from "@/api/activity";
+import Vip from "@/components/Vip";
+import { vipImagesMap } from "@/components/VipIcon";
 import clsx from "clsx";
 import React from "react";
 import styles from "./page.module.scss";
@@ -8,9 +9,13 @@ import styles from "./page.module.scss";
 interface Props {
     data: RankDetail;
     rankList: Rank[];
+    gamesInfo?: {
+        count: number;
+        list: GameItem[];
+    };
 }
 
-const MiddleContainer: React.FC<Props> = ({ data, rankList = [] }) => {
+const MiddleContainer: React.FC<Props> = ({ data, rankList = [], gamesInfo }) => {
     const headerData = React.useMemo(() => {
         if (!rankList?.length) return [];
 
@@ -63,7 +68,7 @@ const MiddleContainer: React.FC<Props> = ({ data, rankList = [] }) => {
                 id: "middleContainer",
             },
             {
-                text: "Jogos(1976)",
+                text: `Jogos(${gamesInfo?.count})`,
                 id: "jackpot",
             },
             {
@@ -71,7 +76,7 @@ const MiddleContainer: React.FC<Props> = ({ data, rankList = [] }) => {
                 id: "rankFooter",
             },
         ];
-    }, []);
+    }, [gamesInfo]);
 
     const scrollInto = (item: any) => {
         const dom = document.querySelector(`#${item.id}`);
@@ -106,6 +111,7 @@ const MiddleContainer: React.FC<Props> = ({ data, rankList = [] }) => {
                         <img src="/rank/bg2.webp" alt="" />
                         <div className={clsx(styles.persons, "px-[.2rem]")}>
                             {headerData.map((item: Rank, idx) => {
+                                const curVip = vipImagesMap.get(item.vipLevel || 1);
                                 return (
                                     <div key={idx} className={styles.personItem}>
                                         {item && (
@@ -120,22 +126,15 @@ const MiddleContainer: React.FC<Props> = ({ data, rankList = [] }) => {
                                                     alt=""
                                                     className={styles.userHeader}
                                                 />
-                                                <div className={styles.vip}>
-                                                    <VipIcon
-                                                        style={{ width: ".3rem" }}
-                                                        className="relative z-[3]"
-                                                        level={item.vipLevel}
-                                                    ></VipIcon>
-                                                    <div
-                                                        className={styles.vipText}
-                                                        style={{
-                                                            background:
-                                                                "linear-gradient(to right,#ccc,#4e89d1)",
-                                                        }}
-                                                    >
-                                                        VIP {item.vipLevel}
-                                                    </div>
-                                                </div>
+                                                <Vip
+                                                    style={{
+                                                        position: "absolute",
+                                                        bottom: "-0.25rem",
+                                                    }}
+                                                    level={item.vipLevel}
+                                                    vipIconClassName="relative z-[3]"
+                                                    vipIconStyle={{ width: ".3rem" }}
+                                                ></Vip>
                                             </>
                                         )}
                                     </div>
@@ -175,6 +174,7 @@ const MiddleContainer: React.FC<Props> = ({ data, rankList = [] }) => {
             {!!moreList?.length && (
                 <div className="mt-[.1rem] px-[.1rem]">
                     {moreList.map((item) => {
+                        const curVip = vipImagesMap.get(item.vipLevel || 1);
                         return (
                             <div
                                 className={clsx(styles.normalItem, {
@@ -191,22 +191,15 @@ const MiddleContainer: React.FC<Props> = ({ data, rankList = [] }) => {
                                         alt=""
                                         className={styles.headerImage}
                                     />
-                                    <div className={styles.vip}>
-                                        <VipIcon
-                                            style={{ width: ".3rem" }}
-                                            className="relative z-[3]"
-                                            level={2}
-                                        ></VipIcon>
-                                        <div
-                                            className={styles.vipText}
-                                            style={{
-                                                background:
-                                                    "linear-gradient(to right,#ccc,#4e89d1)",
-                                            }}
-                                        >
-                                            VIP 1
-                                        </div>
-                                    </div>
+                                    <Vip
+                                        style={{
+                                            position: "absolute",
+                                            bottom: "-0.1rem",
+                                        }}
+                                        level={item.vipLevel}
+                                        vipIconClassName="relative z-[3]"
+                                        vipIconStyle={{ width: ".3rem" }}
+                                    ></Vip>
                                 </div>
                                 <div className="flex-1">
                                     <div>sadasdasd</div>
@@ -230,21 +223,15 @@ const MiddleContainer: React.FC<Props> = ({ data, rankList = [] }) => {
                                     alt=""
                                     className={styles.headerImage}
                                 />
-                                <div className={styles.vip}>
-                                    <VipIcon
-                                        style={{ width: ".3rem" }}
-                                        className="relative z-[3]"
-                                        level={data?.self_rank?.vipLevel || 1}
-                                    ></VipIcon>
-                                    <div
-                                        className={styles.vipText}
-                                        style={{
-                                            background: "linear-gradient(to right,#ccc,#4e89d1)",
-                                        }}
-                                    >
-                                        VIP {data?.self_rank?.vipLevel}
-                                    </div>
-                                </div>
+                                <Vip
+                                    style={{
+                                        position: "absolute",
+                                        bottom: "-0.1rem",
+                                    }}
+                                    level={data?.self_rank?.vipLevel}
+                                    vipIconClassName="relative z-[3]"
+                                    vipIconStyle={{ width: ".3rem" }}
+                                ></Vip>
                             </div>
                             <div className="flex-1">
                                 <div>sadasdasd</div>

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

@@ -1,5 +1,6 @@
 "use client";
 import {
+    GameItem,
     getRank,
     getRankDetail,
     Rank,
@@ -59,7 +60,7 @@ const Page = () => {
             nickName: "",
             rank: 1,
             score: 2024.04,
-            vipLevel: 0,
+            vipLevel: 5,
             avatar: 0,
             reward: [
                 {
@@ -160,6 +161,10 @@ const Page = () => {
         page: 1,
     });
 
+    const gamesRef = React.useRef<any>(null);
+
+    const historyRef = React.useRef<any>(null);
+
     const getRankData = async () => {
         const res = await getRank();
         if (res.code === 200) {
@@ -184,6 +189,19 @@ const Page = () => {
             // setRankList(res?.data?.list || []);
         }
     };
+    const gamesInfo = React.useMemo(() => {
+        if (!data?.game_list?.length) return { list: [], count: 0 };
+        let res: GameItem[] = [];
+        let count: number = 0;
+        data?.game_list?.forEach((item) => {
+            res = res.concat(item?.list || []);
+            count += item?.list?.length || 0;
+        });
+        return {
+            list: res,
+            count,
+        };
+    }, [data]);
 
     const swiperChange = (swiperData: RankItem) => {
         router.replace(`/rank/detail?id=${swiperData.area_id}`);
@@ -192,15 +210,24 @@ const Page = () => {
         getData();
     };
 
-    console.log(1122333, data);
-
     return (
         <div className="h-[100%] overflow-auto" id="outContainer">
+            <div
+                onClick={() => historyRef.current?.onOpen()}
+                className="fixed right-[0px] top-[300px] z-[5] rounded-[.08rem_0_0_.08rem] bg-[rgba(255,255,255,.2)] px-[.1rem] py-[.04rem]"
+            >
+                <i className="iconfont icon-tubiaozhizuomoban- mr-[.06rem]"></i>
+                <span>Histórico</span>
+            </div>
             <div className={styles.header}>
                 <RankSwiper data={rankData} onChange={swiperChange}></RankSwiper>
             </div>
-            <MiddleContainer data={data} rankList={rankList}></MiddleContainer>
-            <Jackpot></Jackpot>
+            <MiddleContainer
+                data={data}
+                gamesInfo={gamesInfo}
+                rankList={rankList}
+            ></MiddleContainer>
+            <Jackpot gamesInfo={gamesInfo} onShowMore={() => gamesRef.current?.onOpen()}></Jackpot>
             <div className={styles.rankFooter} id="rankFooter">
                 <div className={styles.title}>Regras</div>
                 <div className="mb-[.1rem] mt-[.1rem] text-[.15rem] font-bold">
@@ -261,8 +288,8 @@ const Page = () => {
                     cancelamento do prémio ou do lucro
                 </div>
             </div>
-            <History></History>
-            <Games data={data}></Games>
+            <History ref={historyRef} areaId={areaId}></History>
+            <Games data={data} ref={gamesRef}></Games>
         </div>
     );
 };

src/components/Vip/index.module.scss

@@ -0,0 +1,13 @@
+.vip {
+    display: flex;
+    align-items: center;
+    padding-left: 0.05rem;
+}
+.vipText {
+    width: 0.3rem;
+    border-radius: 0 0 0.05rem 0;
+    font-size: 0.08rem;
+    text-align: center;
+    position: relative;
+    left: -0.1rem;
+}

src/components/Vip/index.tsx

@@ -0,0 +1,46 @@
+"use client";
+import React from "react";
+import styles from "./index.module.scss";
+
+import VipIcon, { vipImagesMap } from "@/components/VipIcon";
+import clsx from "clsx";
+
+interface Props {
+    level: number;
+    vipIconStyle?: React.CSSProperties;
+    vipIconClassName?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+const Vip: React.FC<Props> = ({
+    level,
+    vipIconStyle = {},
+    style = {},
+    vipIconClassName = "",
+    className = "",
+}) => {
+    const curVip = React.useMemo(() => {
+        return vipImagesMap.get(level || 1);
+    }, [level]);
+    return (
+        <div className={clsx(styles.vip, className)} style={{ ...style }}>
+            <VipIcon
+                style={{ ...vipIconStyle }}
+                className={vipIconClassName}
+                level={level}
+            ></VipIcon>
+            <div
+                className={styles.vipText}
+                style={{
+                    background: `linear-gradient(to right,${curVip?.textBackground})`,
+                    color: curVip?.textColor,
+                }}
+            >
+                VIP {level}
+            </div>
+        </div>
+    );
+};
+
+export default Vip;

src/components/VipIcon/index.tsx

@@ -12,19 +12,111 @@ interface IconItem {
     leve: number;
     src: string;
     color: string;
+    textColor: string;
+    textBackground: string;
 }
 
 export const vipImagesMap = new Map<number, IconItem>([
-    [1, { leve: 1, src: "/vip/1.webp", color: "#686868" }],
-    [2, { leve: 2, src: "/vip/2.webp", color: "#844C4F" }],
-    [3, { leve: 3, src: "/vip/3.webp", color: "#844C4F" }],
-    [4, { leve: 4, src: "/vip/4.webp", color: "#844C4F" }],
-    [5, { leve: 5, src: "/vip/5.webp", color: "#707386" }],
-    [6, { leve: 6, src: "/vip/6.webp", color: "#707386" }],
-    [7, { leve: 7, src: "/vip/7.webp", color: "#707386" }],
-    [8, { leve: 8, src: "/vip/8.webp", color: "#894622" }],
-    [9, { leve: 9, src: "/vip/9.webp", color: "#894622" }],
-    [10, { leve: 10, src: "/vip/10.webp", color: "#894622" }],
+    [
+        1,
+        {
+            leve: 1,
+            src: "/vip/1.webp",
+            color: "#686868",
+            textColor: "#485684",
+            textBackground: "#d6dbf5,#8490b9",
+        },
+    ],
+    [
+        2,
+        {
+            leve: 2,
+            src: "/vip/2.webp",
+            color: "#844C4F",
+            textColor: "#3a7a85   ",
+            textBackground: "#dbfcff,#9ed8e2",
+        },
+    ],
+    [
+        3,
+        {
+            leve: 3,
+            src: "/vip/3.webp",
+            color: "#844C4F",
+            textColor: "#574b88 ",
+            textBackground: "#dee2ef ,#a499d2",
+        },
+    ],
+    [
+        4,
+        {
+            leve: 4,
+            src: "/vip/4.webp",
+            color: "#844C4F",
+            textColor: "#305975",
+            textBackground: "#efffff,#46a0db",
+        },
+    ],
+    [
+        5,
+        {
+            leve: 5,
+            src: "/vip/5.webp",
+            color: "#707386",
+            textColor: "#573c7f",
+            textBackground: "#e0d3f6,#916db8",
+        },
+    ],
+    [
+        6,
+        {
+            leve: 6,
+            src: "/vip/6.webp",
+            color: "#707386",
+            textColor: "#7d4345",
+            textBackground: "#feede9,#d47175",
+        },
+    ],
+    [
+        7,
+        {
+            leve: 7,
+            src: "/vip/7.webp",
+            color: "#707386",
+            textColor: "#3b7e5c",
+            textBackground: "#effcec,#62b58b",
+        },
+    ],
+    [
+        8,
+        {
+            leve: 8,
+            src: "/vip/8.webp",
+            color: "#894622",
+            textColor: "#355278",
+            textBackground: "#ffffff,#5a8fd2",
+        },
+    ],
+    [
+        9,
+        {
+            leve: 9,
+            src: "/vip/9.webp",
+            color: "#894622",
+            textColor: "#473575",
+            textBackground: "#f1f1ff,#795ac7",
+        },
+    ],
+    [
+        10,
+        {
+            leve: 10,
+            src: "/vip/10.webp",
+            color: "#894622",
+            textColor: "#664b45",
+            textBackground: "#fff6ee,#fdd181",
+        },
+    ],
 ]);
 
 const VipIcon: React.FC<Props> = ({ level, className, style = {} }) => {

src/styles/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4617618 */
-  src: url('iconfont.woff2?t=1749546720813') format('woff2'),
-       url('iconfont.woff?t=1749546720813') format('woff'),
-       url('iconfont.ttf?t=1749546720813') format('truetype');
+  src: url('iconfont.woff2?t=1750903258175') format('woff2'),
+       url('iconfont.woff?t=1750903258175') format('woff'),
+       url('iconfont.ttf?t=1750903258175') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,30 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-tubiaozhizuomoban-:before {
+  content: "\e6aa";
+}
+
+.icon-guize:before {
+  content: "\e6ab";
+}
+
+.icon-shouye3:before {
+  content: "\e6a3";
+}
+
+.icon-gerenzhongxin1:before {
+  content: "\e6a4";
+}
+
+.icon-huodong:before {
+  content: "\e6a5";
+}
+
+.icon-chongzhi:before {
+  content: "\e6a6";
+}
+
 .icon-chongzhihongchong:before {
   content: "\e6a2";
 }