fix: 修复免费送bug

src/app/[locale]/(TabBar)/freeGames/layout.tsx

@@ -1,4 +1,3 @@
-import HeaderBack from "@/components/HeaderBack";
 import { getTranslations } from "next-intl/server";
 import { ReactNode } from "react";
 
@@ -15,10 +14,5 @@ export default async function LocaleLayout({
     children: ReactNode;
     params: { locale: string };
 }) {
-    return (
-        <>
-            <HeaderBack showBack={true} title={"Free Games"} />
-            <main className={"main-header bg-[#1f1f1f]"}>{children}</main>
-        </>
-    );
+    return <>{children}</>;
 }

src/app/[locale]/(TabBar)/freeGames/page.tsx

@@ -2,11 +2,70 @@
 import { GameListRep, getFreeGamesApi, SearchProps } from "@/api/home";
 import Box from "@/components/Box";
 import GroupCard from "@/components/Card/GroupCard";
-import { Pagination } from "@/types";
+import HeaderBack from "@/components/HeaderBack";
+import {
+    BalanceContent,
+    BonusContent,
+    FreeContent,
+    ReplayContent,
+} from "@/components/ModalPopup/WalletDescribeModal";
+import TipsModal, { ModalProps } from "@/components/TipsModal";
+import { useWalletStore } from "@/stores/useWalletStore";
+import { Pagination, WalletEnum } from "@/types";
 import { useSetState } from "ahooks";
 import { InfiniteScroll } from "antd-mobile";
-import { FC, useRef } from "react";
+import { useTranslations } from "next-intl";
+import { FC, useRef, useState } from "react";
 
+const Header = () => {
+    const { wallet } = useWalletStore((state) => ({
+        wallet: state.wallet,
+    }));
+
+    const t = useTranslations("ProfilePage");
+
+    const tipsRef = useRef<ModalProps>(null);
+    const [tipsStatus, setTipsStatus] = useState<keyof typeof WalletEnum>("Bonus");
+
+    const modalHandler = (key: keyof typeof WalletEnum) => {
+        setTipsStatus(key);
+        tipsRef.current?.onOpen();
+    };
+    return (
+        <>
+            <HeaderBack showBack={true} title={"Free Games"}>
+                <div
+                    className={"mr-[0.2083rem] flex items-center justify-end"}
+                    onClick={() => modalHandler("Free")}
+                >
+                    <i className={"iconfont icon-qianbao3 text-[28px]"}></i>
+                    <span className={"ml-[10px] text-[22px]"}>{wallet.free_score}</span>
+                </div>
+            </HeaderBack>
+
+            <TipsModal
+                ref={tipsRef}
+                title={
+                    <div className={"flex items-center"}>
+                        <i
+                            className={"iconfont icon-liwuhuodong mr-[0.0694rem] text-[0.2778rem]"}
+                        ></i>
+                        {t("modalTitle")}
+                    </div>
+                }
+            >
+                {/*现金*/}
+                {tipsStatus === WalletEnum.Balance ? <BalanceContent wallet={wallet} /> : null}
+                {/*  彩金*/}
+                {tipsStatus === WalletEnum.Bonus ? <BonusContent wallet={wallet} /> : null}
+                {/* 免费币 */}
+                {tipsStatus === WalletEnum.Free ? <FreeContent wallet={wallet} /> : null}
+                {/*  重玩币 */}
+                {tipsStatus === WalletEnum.Replay ? <ReplayContent wallet={wallet} /> : null}
+            </TipsModal>
+        </>
+    );
+};
 const GameListFlag: FC = () => {
     const [target, setTarget] = useSetState<{ games: GameListRep[]; page: Partial<Pagination> }>({
         games: [],
@@ -31,10 +90,15 @@ const GameListFlag: FC = () => {
         await getGames();
     };
     return (
-        <Box>
-            <GroupCard data={target.games} row={1} groupType={2} />
-            <InfiniteScroll loadMore={loadMore} hasMore={!target.page.is_end!} />
-        </Box>
+        <>
+            <Header />
+            <main className={"main-header bg-[#1f1f1f]"}>
+                <Box>
+                    <GroupCard data={target.games} row={1} groupType={2} />
+                    <InfiniteScroll loadMore={loadMore} hasMore={!target.page.is_end!} />
+                </Box>
+            </main>
+        </>
     );
 };
 

src/app/[locale]/(TabBar)/profile/ProfileHeader.tsx

@@ -1,5 +1,11 @@
 "use client";
 import { UserInfoRep, UserVipInfo, Wallet } from "@/api/user";
+import {
+    BalanceContent,
+    BonusContent,
+    FreeContent,
+    ReplayContent,
+} from "@/components/ModalPopup/WalletDescribeModal";
 import TipsModal, { ModalProps } from "@/components/TipsModal";
 import { Link, useRouter } from "@/i18n/routing";
 import { useWalletStore } from "@/stores/useWalletStore";
@@ -63,128 +69,7 @@ const VipCard = (props: { userVip: UserVipInfo }) => {
         </div>
     );
 };
-const Progress = (props: { percent: number }) => {
-    const { percent } = props;
-    return (
-        <div className="flex">
-            <ProgressBar
-                percent={percent}
-                className={"mr-[0.0694rem] flex-1"}
-                style={{
-                    "--fill-color": "var(--primary-color)",
-                    "--track-width": "0.0694rem",
-                }}
-            />
-            <span className={"text-primary-color"}>{percent.toFixed(2)}%</span>
-        </div>
-    );
-};
-const WalletContent = (props: {
-    percentage: number;
-    type: string;
-    difference: number;
-    current: number;
-}) => {
-    const { percentage, type, difference, current } = props;
-    const t = useTranslations("ProfilePage");
-    return (
-        <div>
-            <div className={"mb-[0.12rem] text-[0.12rem]"}>
-                <span className={"mr-[10px]"}>{type}</span>
-                <i className={"mr-[10px] indent-[10px] text-[0.1528rem] font-bold"}>R$</i>
-                <span>{current}</span>
-            </div>
 
-            <Progress percent={percentage} />
-
-            <div>
-                <span>{t("modalBottomTips")}</span>
-                <span>{difference.toFixed(2)}</span>
-            </div>
-        </div>
-    );
-};
-// 现金
-const BalanceContent = (props: { wallet: Wallet }) => {
-    const { wallet } = props;
-    const t = useTranslations("ProfilePage");
-    return (
-        <>
-            <WalletContent
-                difference={wallet.target_score_rollover - wallet.current_score_rollover}
-                type={t("balance")}
-                current={wallet.score || 0}
-                percentage={percentage(wallet.current_score_rollover, wallet.target_score_rollover)}
-            />
-        </>
-    );
-};
-
-const BonusContent = (props: { wallet: Wallet }) => {
-    const { wallet } = props;
-    const t = useTranslations("ProfilePage");
-    return (
-        <div>
-            <WalletContent
-                difference={wallet.target_point_rollover - wallet.current_point_rollover}
-                type={t("bonus")}
-                current={wallet.point || 0}
-                percentage={percentage(wallet.current_point_rollover, wallet.target_point_rollover)}
-            />
-            <p className={"text-center"}>{t("bonusArticle")}</p>
-            <ul className={"ml-[0.1389rem] list-decimal text-[0.12rem] text-[#666]"}>
-                <li>{t("bonusDesc1")}</li>
-                <li>{t("bonusDesc2")}</li>
-                <li>{t("bonusDesc3")}</li>
-            </ul>
-        </div>
-    );
-};
-
-const FreeContent = (props: { wallet: Wallet }) => {
-    const { wallet } = props;
-    const t = useTranslations("ProfilePage");
-    return (
-        <div>
-            <WalletContent
-                difference={wallet.target_free_score_rollover - wallet.current_free_score_rollover}
-                type={t("free")}
-                current={wallet.free_score || 0}
-                percentage={percentage(
-                    wallet.current_free_score_rollover,
-                    wallet.target_free_score_rollover
-                )}
-            />
-            <p className={"text-center"}>{t("freeArticle")}</p>
-            <ul className={"ml-[0.1389rem] list-decimal text-[0.12rem] text-[#666]"}>
-                <li>{t("freeDesc1")}</li>
-                <li>{t("freeDesc2")}</li>
-            </ul>
-        </div>
-    );
-};
-const ReplayContent = (props: { wallet: Wallet }) => {
-    const { wallet } = props;
-    const t = useTranslations("ProfilePage");
-    return (
-        <div>
-            <WalletContent
-                difference={wallet.target_lose_score_rollover - wallet.current_lose_score_rollover}
-                type={t("replay")}
-                current={wallet.lose_score || 0}
-                percentage={percentage(
-                    wallet.current_lose_score_rollover,
-                    wallet.target_lose_score_rollover
-                )}
-            />
-            <p className={"text-center"}>{t("replayArticle")}</p>
-            <ul className={"ml-[0.1389rem] list-decimal text-[0.12rem] text-[#666]"}>
-                <li>{t("replayDesc1")}</li>
-                <li>{t("replayDesc2")}</li>
-            </ul>
-        </div>
-    );
-};
 const WalletCard = (props: { userMoney: Wallet }) => {
     const { userMoney } = props;
     const t = useTranslations("ProfilePage");

src/app/[locale]/(TabBar)/profile/component/ItemCom/index.tsx

@@ -50,8 +50,8 @@ const ItemCom: FC<ItemComProps> = ({ type = "login" }) => {
             content: null,
         },
         { label: "gamblingBets", desc: "", icon: "", url: "/betrecord", content: null },
-        { label: "league", desc: "", icon: "", url: "/", content: null },
-        { label: "instant", desc: "", icon: "", url: "/", content: null },
+        // { label: "league", desc: "", icon: "", url: "/", content: null },
+        // { label: "instant", desc: "", icon: "", url: "/", content: null },
         { label: "transactions", desc: "", icon: "", url: "/transactions", content: null },
         {
             label: "message",
@@ -60,7 +60,7 @@ const ItemCom: FC<ItemComProps> = ({ type = "login" }) => {
             url: "/notification",
             content: unread || userUnread ? Badge.dot : null,
         },
-        { label: "initial", desc: "", icon: "", url: "/", content: null },
+        // { label: "initial", desc: "", icon: "", url: "/", content: null },
     ];
     const routerHandler = (item: any) => {
         if (item.url === "/cashWheel") {

src/app/[locale]/(TabBar)/replayGames/layout.tsx

@@ -1,4 +1,3 @@
-import HeaderBack from "@/components/HeaderBack";
 import { getTranslations } from "next-intl/server";
 import { ReactNode } from "react";
 
@@ -15,10 +14,5 @@ export default async function LocaleLayout({
     children: ReactNode;
     params: { locale: string };
 }) {
-    return (
-        <>
-            <HeaderBack showBack={true} title={"Replay Games"} />
-            <main className={"main-header bg-[#1f1f1f]"}>{children}</main>
-        </>
-    );
+    return children;
 }

src/app/[locale]/(TabBar)/replayGames/page.tsx

@@ -2,11 +2,70 @@
 import { GameListRep, getReplayGamesApi, SearchProps } from "@/api/home";
 import Box from "@/components/Box";
 import GroupCard from "@/components/Card/GroupCard";
-import { Pagination } from "@/types";
+import HeaderBack from "@/components/HeaderBack";
+import {
+    BalanceContent,
+    BonusContent,
+    FreeContent,
+    ReplayContent,
+} from "@/components/ModalPopup/WalletDescribeModal";
+import TipsModal, { ModalProps } from "@/components/TipsModal";
+import { useWalletStore } from "@/stores/useWalletStore";
+import { Pagination, WalletEnum } from "@/types";
 import { useSetState } from "ahooks";
 import { InfiniteScroll } from "antd-mobile";
-import { FC, useRef } from "react";
+import { useTranslations } from "next-intl";
+import { FC, useRef, useState } from "react";
 
+const Header = () => {
+    const { wallet } = useWalletStore((state) => ({
+        wallet: state.wallet,
+    }));
+
+    const t = useTranslations("ProfilePage");
+
+    const tipsRef = useRef<ModalProps>(null);
+    const [tipsStatus, setTipsStatus] = useState<keyof typeof WalletEnum>("Bonus");
+
+    const modalHandler = (key: keyof typeof WalletEnum) => {
+        setTipsStatus(key);
+        tipsRef.current?.onOpen();
+    };
+    return (
+        <>
+            <HeaderBack showBack={true} title={"Replay Games"}>
+                <div
+                    className={"mr-[0.2083rem] flex items-center justify-end"}
+                    onClick={() => modalHandler("Replay")}
+                >
+                    <i className={"iconfont icon-qianbao3 text-[28px]"}></i>
+                    <span className={"ml-[10px] text-[22px]"}>{wallet.lose_score}</span>
+                </div>
+            </HeaderBack>
+
+            <TipsModal
+                ref={tipsRef}
+                title={
+                    <div className={"flex items-center"}>
+                        <i
+                            className={"iconfont icon-liwuhuodong mr-[0.0694rem] text-[0.2778rem]"}
+                        ></i>
+                        {t("modalTitle")}
+                    </div>
+                }
+            >
+                {/*现金*/}
+                {tipsStatus === WalletEnum.Balance ? <BalanceContent wallet={wallet} /> : null}
+                {/*  彩金*/}
+                {tipsStatus === WalletEnum.Bonus ? <BonusContent wallet={wallet} /> : null}
+                {/* 免费币 */}
+                {tipsStatus === WalletEnum.Free ? <FreeContent wallet={wallet} /> : null}
+                {/*  重玩币 */}
+                {tipsStatus === WalletEnum.Replay ? <ReplayContent wallet={wallet} /> : null}
+            </TipsModal>
+        </>
+    );
+};
 const GameListFlag: FC = () => {
     const [target, setTarget] = useSetState<{ games: GameListRep[]; page: Partial<Pagination> }>({
         games: [],
@@ -31,10 +90,15 @@ const GameListFlag: FC = () => {
         await getGames();
     };
     return (
-        <Box>
-            <GroupCard data={target.games} row={1} groupType={3} />
-            <InfiniteScroll loadMore={loadMore} hasMore={!target.page.is_end!} />
-        </Box>
+        <>
+            <Header />
+            <main className={"main-header bg-[#1f1f1f]"}>
+                <Box>
+                    <GroupCard data={target.games} row={1} groupType={3} />
+                    <InfiniteScroll loadMore={loadMore} hasMore={!target.page.is_end!} />
+                </Box>
+            </main>
+        </>
     );
 };
 

src/components/HeaderBack/index.tsx

@@ -72,7 +72,7 @@ const HeaderBack: FC<PropsWithChildren<HeaderBackProps>> = ({
                 {showBack && <span className={iconClassName1} onClick={() => goPage()}></span>}
             </div>
             {(title || selfTitle) && <span className={styles.title}>{title || selfTitle}</span>}
-            {children}
+            <div className={styles.content}>{children}</div>
             <span className={styles.right} onClick={() => goPage("home")}>
                 <span className={iconClassName2}></span>
             </span>

src/components/HeaderBack/style.module.scss

@@ -24,6 +24,10 @@
     align-items: center;
   }
 
+  .content{
+    width: 100%;
+  }
+
   .title {
     color: #fff;
     font-size: .16rem;

src/components/ModalPopup/SlotsModal/index.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { getGiveReceiveApi, SlotParams, SlotType } from "@/api/slots";
+import { flatPoint } from "@/utils/methods";
 import { SlotMachine } from "@lucky-canvas/react";
 import { Mask } from "antd-mobile";
 import clsx from "clsx";
@@ -119,7 +120,7 @@ const slots = [
     { order: [9, 3, 8, 5, 0, 1, 2, 4, 6, 7], speed: 18 },
 ];
 const numberPadding = (n: number, index = 4): number[] => {
-    const s = `${n}`.padStart(4, "0");
+    const s = `${n}`.padStart(index, "0");
     return s.split("").map((v, i) => Number(v));
 };
 
@@ -175,12 +176,13 @@ const SlotsClient: FC<SlotsClientProps> = (props) => {
 
     const buttonRef = useRef<HTMLImageElement | null>(null);
 
-    const ratio = `${slotSource?.rollover.reduce(
-        (pre, next) => (pre > next.weight ? pre : next.weight),
-        0
-    )}`
-        .split("")
-        .map((n) => Number(n)) || [9, 9];
+    // const ratio = `${slotSource?.rollover.reduce(
+    //     (pre, next) => (pre > next.weight ? pre : next.weight),
+    //     0
+    // )}`
+    //     .split("")
+    //     .map((n) => Number(n)) || [9, 9];
+    const [ratio, setRatio] = useState([9, 9]);
     const params = {
         activity_id: slotSource?.id,
         start_time: slotSource?.times[0].start_time,
@@ -193,6 +195,8 @@ const SlotsClient: FC<SlotsClientProps> = (props) => {
     // 开始旋转
     const handler = () => {
         // 按下动画
+        if (params && !params.activity_id && !params.start_time) return;
+        if (rotating.current) return;
         let height = buttonRef.current!.clientHeight;
         buttonRef.current!.style.transition = "height 0.3s";
         buttonRef.current!.style.height = `${height * 0.8}px`;
@@ -206,9 +210,6 @@ const SlotsClient: FC<SlotsClientProps> = (props) => {
         // }, 2500);
         // return;
 
-        if (rotating.current) return;
-
-        if (params && !params.activity_id && !params.start_time) return;
         slotsRef.current?.play();
         rotating.current = true;
 
@@ -217,7 +218,9 @@ const SlotsClient: FC<SlotsClientProps> = (props) => {
             .then((res) => {
                 setTimeout(() => {
                     if (res.code === 200) {
+                        const rollover = flatPoint(res.data.rollover / 100);
                         slotsRef.current?.stop(numberPadding(res.data.amount));
+                        setRatio(numberPadding(rollover > 100 ? 99 : rollover, 2));
                     } else {
                         slotsRef.current.init();
                     }

src/components/ModalPopup/WalletDescribeModal/index.tsx

@@ -0,0 +1,156 @@
+import { Wallet } from "@/api/user";
+import { percentage } from "@/utils/methods";
+import { ProgressBar } from "antd-mobile";
+import { useTranslations } from "next-intl";
+
+const Progress = (props: { percent: number }) => {
+    const { percent } = props;
+    return (
+        <div className="flex">
+            <ProgressBar
+                percent={percent}
+                className={"mr-[0.0694rem] flex-1"}
+                style={{
+                    "--fill-color": "var(--primary-color)",
+                    "--track-width": "0.0694rem",
+                }}
+            />
+            <span className={"text-primary-color"}>{percent.toFixed(2)}%</span>
+        </div>
+    );
+};
+export const WalletContent = (props: {
+    percentage: number;
+    type: string;
+    difference: number;
+    current: number;
+}) => {
+    const { percentage, type, difference, current } = props;
+    const t = useTranslations("ProfilePage");
+    return (
+        <div>
+            <div className={"mb-[0.12rem] text-[0.12rem]"}>
+                <span className={"mr-[10px]"}>{type}</span>
+                <i className={"mr-[10px] indent-[10px] text-[0.1528rem] font-bold"}>R$</i>
+                <span>{current}</span>
+            </div>
+
+            <Progress percent={percentage} />
+
+            <div>
+                <span>{t("modalBottomTips")}</span>
+                <span>{difference.toFixed(2)}</span>
+            </div>
+        </div>
+    );
+};
+// 现金
+export const BalanceContent = (props: { wallet: Wallet }) => {
+    const { wallet } = props;
+    const t = useTranslations("ProfilePage");
+    return (
+        <>
+            <WalletContent
+                difference={wallet.target_score_rollover - wallet.current_score_rollover}
+                type={t("balance")}
+                current={wallet.score || 0}
+                percentage={percentage(wallet.current_score_rollover, wallet.target_score_rollover)}
+            />
+        </>
+    );
+};
+
+export const BonusContent = (props: { wallet: Wallet }) => {
+    const { wallet } = props;
+    const t = useTranslations("ProfilePage");
+    return (
+        <div>
+            <WalletContent
+                difference={wallet.target_point_rollover - wallet.current_point_rollover}
+                type={t("bonus")}
+                current={wallet.point || 0}
+                percentage={percentage(wallet.current_point_rollover, wallet.target_point_rollover)}
+            />
+            <p className={"text-center"}>{t("bonusArticle")}</p>
+            <ul className={"ml-[0.1389rem] list-decimal text-[0.12rem] text-[#666]"}>
+                <li>{t("bonusDesc1")}</li>
+                <li>{t("bonusDesc2")}</li>
+                <li>{t("bonusDesc3")}</li>
+            </ul>
+        </div>
+    );
+};
+
+export const FreeContent = (props: { wallet: Wallet }) => {
+    const { wallet } = props;
+    const t = useTranslations("ProfilePage");
+    return (
+        <div>
+            <WalletContent
+                difference={wallet.target_free_score_rollover - wallet.current_free_score_rollover}
+                type={t("free")}
+                current={wallet.free_score || 0}
+                percentage={percentage(
+                    wallet.current_free_score_rollover,
+                    wallet.target_free_score_rollover
+                )}
+            />
+            <p className={"text-center"}>{t("freeArticle")}</p>
+            <ul className={"ml-[0.1389rem] list-decimal text-[0.12rem] text-[#666]"}>
+                <li>{t("freeDesc1")}</li>
+                <li>{t("freeDesc2")}</li>
+            </ul>
+        </div>
+    );
+};
+export const ReplayContent = (props: { wallet: Wallet }) => {
+    const { wallet } = props;
+    const t = useTranslations("ProfilePage");
+    return (
+        <div>
+            <WalletContent
+                difference={wallet.target_lose_score_rollover - wallet.current_lose_score_rollover}
+                type={t("replay")}
+                current={wallet.lose_score || 0}
+                percentage={percentage(
+                    wallet.current_lose_score_rollover,
+                    wallet.target_lose_score_rollover
+                )}
+            />
+            <p className={"text-center"}>{t("replayArticle")}</p>
+            <ul className={"ml-[0.1389rem] list-decimal text-[0.12rem] text-[#666]"}>
+                <li>{t("replayDesc1")}</li>
+                <li>{t("replayDesc2")}</li>
+            </ul>
+        </div>
+    );
+};
+
+// const WalletDescribeModal = () => {
+//     const [tipsStatus, setTipsStatus] = useState<keyof typeof WalletEnum>("Bonus");
+//     const tipsRef = useRef<ModalProps>(null);
+//     const wallet: any = {};
+//     const t = useTranslations("ProfilePage");
+//
+//     return (
+//         <TipsModal
+//             ref={tipsRef}
+//             title={
+//                 <div className={"flex items-center"}>
+//                     <i className={"iconfont icon-liwuhuodong mr-[0.0694rem] text-[0.2778rem]"}></i>
+//                     {t("modalTitle")}
+//                 </div>
+//             }
+//         >
+//             {/*现金*/}
+//             {tipsStatus === WalletEnum.Balance ? <BalanceContent wallet={wallet} /> : null}
+//             {/*  彩金*/}
+//             {tipsStatus === WalletEnum.Bonus ? <BonusContent wallet={wallet} /> : null}
+//             {/* 免费币 */}
+//             {tipsStatus === WalletEnum.Free ? <FreeContent wallet={wallet} /> : null}
+//             {/*  重玩币 */}
+//             {tipsStatus === WalletEnum.Replay ? <ReplayContent wallet={wallet} /> : null}
+//         </TipsModal>
+//     );
+// };
+// export default WalletDescribeModal;

src/styles/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4617618 */
-  src: url('iconfont.woff2?t=1721715016926') format('woff2'),
-       url('iconfont.woff?t=1721715016926') format('woff'),
-       url('iconfont.ttf?t=1721715016926') format('truetype');
+  src: url('iconfont.woff2?t=1735206395045') format('woff2'),
+       url('iconfont.woff?t=1735206395045') format('woff'),
+       url('iconfont.ttf?t=1735206395045') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-qianbao3:before {
+  content: "\e61f";
+}
+
+.icon-laohuji:before {
+  content: "\e676";
+}
+
+.icon-meiyoushuju1:before {
+  content: "\e675";
+}
+
 .icon-xialaxuanze:before {
   content: "\e61e";
 }