feat: 修改代码

messages/br.json

@@ -1220,12 +1220,11 @@
         "8": "Cancelado"
     },
     "signInPage": {
-        "desc1": "Receive rewards based on the number of days you have signed in",
-        "desc2": "The Surprise bonus requires a deposit to unlock,otherwise you can only receive 10%normal bonus",
-        "desc3": "You can no longer claim the top-up unlock bonus after claiming the normal bonus",
-        "desc4": "The check-in refresh time will refresh at % points per day",
-        "desc5": "Bcwin777 reserves the right to interpret the event and Bcwin777 reserves the right to change,stop and cancel the event at any time",
-        "desc6": "Banned,cheating and abnormal accounts cannot participate in the campaign",
-        "desc7": "Fraudulent behavior will return the account and get a bonus"
+        "desc1": "Receba recompensas com base no número de dias em que você fez check-in.",
+        "desc2": "O bônus surpresa exige um depósito para ser desbloqueado, caso contrário, você só receberá 10% do bônus normal.",
+        "desc3": "Após resgatar o bônus normal, não será mais possível resgatar o bônus desbloqueado por recarga.",
+        "desc4": "O tempo de atualização do check-in será renovado com % pontos por dia.",
+        "desc5": "A BCWIN777 reserva-se o direito de interpretar o evento, bem como o direito de alterar, interromper ou cancelar o evento a qualquer momento.",
+        "desc6": "Contas banidas, trapaceiras ou com comportamentos anormais não poderão participar da campanha."
     }
 }

src/app/[locale]/(TabBar)/[[...share]]/@actionWidget/Service.tsx

@@ -11,6 +11,7 @@ import SlotsModal, { SlotModalRefProps } from "@/components/ModalPopup/SlotsModa
 import WheelModal, { WheelModalProps } from "@/components/ModalPopup/WheelModal";
 import { useEventPoint } from "@/hooks/useEventPoint";
 import { Link } from "@/i18n/routing";
+import { useModalShow } from "@/stores/modalShow";
 import { useFirstPayStore } from "@/stores/useFirstPayStore";
 import { useGlobalNoticeStore } from "@/stores/useGlobalNoticeStore";
 import { useSignStore } from "@/stores/useSignStore";
@@ -21,15 +22,19 @@ import { Badge } from "antd-mobile";
 import dayjs from "dayjs";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
-import { FC, useEffect, useRef, useState } from "react";
+import { FC, useEffect, useMemo, useRef, useState } from "react";
 
 interface Props {
     services: ServiceTypes[];
 }
+
+interface SlotSectionProps {
+    onDestory?: () => void;
+}
 /**
  * 免费送活动
  */
-const SlotSection = () => {
+const SlotSection: FC<SlotSectionProps> = ({ onDestory }) => {
     const slotsRef = useRef<SlotModalRefProps | null>(null);
     const getSlots = async () => {
         const token = getToken();
@@ -37,6 +42,7 @@ const SlotSection = () => {
             const result = await getGiveInfoApi();
             return result.data;
         } else {
+            destory();
             return Promise.resolve({});
         }
     };
@@ -49,6 +55,10 @@ const SlotSection = () => {
     const slotHandler = () => {
         slotsRef.current?.onOpen(slots);
     };
+    const destory = () => {
+        if (onDestory && typeof onDestory === "function") onDestory();
+    };
+
     return (
         <>
             {slots?.id ? (
@@ -60,7 +70,7 @@ const SlotSection = () => {
             ) : null}
 
             {/*随机送*/}
-            <SlotsModal ref={slotsRef} onAfterHandler={slotRun} />
+            <SlotsModal ref={slotsRef} onAfterHandler={slotRun} onClose={destory} />
         </>
     );
 };
@@ -70,6 +80,14 @@ const SlotSection = () => {
  */
 const WheelSection = ({ onDestory }: any) => {
     const wheelModalRef = useRef<WheelModalProps | null>(null);
+    const [data, setData] = useState<any>([]);
+    const { modalShow, closeModalShow } = useModalShow((state: any) => ({
+        modalShow: state.modalShow,
+        closeModalShow: state.closeModalShow,
+    }));
+    const keyName = useMemo(() => {
+        return "WheelSection";
+    }, []);
     const { wheelStatus, wheelCurrent, setWheel } = useWheelStore((state) => ({
         wheelStatus: state.status,
         wheelCurrent: state.currentWheel,
@@ -79,11 +97,24 @@ const WheelSection = ({ onDestory }: any) => {
     useEffect(() => {
         setWheel().then((data) => {
             if (data && useWheelStore.getState().status === 1) {
-                wheelModalRef.current?.onOpen(data);
+                setData(data);
             }
         });
     }, []);
 
+    useEffect(() => {
+        if (!data) return;
+        if (modalShow === keyName) {
+            wheelModalRef.current?.onOpen(data);
+        }
+    }, [modalShow, data, keyName]);
+
+    const destoryComponent = () => {
+        if (modalShow === keyName) {
+            closeModalShow(keyName);
+        }
+    };
+
     return (
         <>
             {wheelStatus === 2 ? (
@@ -99,7 +130,7 @@ const WheelSection = ({ onDestory }: any) => {
             ) : null}
 
             {/*  轮盘弹窗 */}
-            <WheelModal ref={wheelModalRef} />
+            <WheelModal ref={wheelModalRef} onDestory={destoryComponent} />
         </>
     );
 };
@@ -174,16 +205,6 @@ const PaySection = () => {
     );
 };
 
-/**
- * 神秘彩金
- */
-
-// const JackpotSection = () => {
-//     const token = getToken();
-
-//     return <div className={clsx("test1232 h-[.4rem] w-[.4rem] bg-[red]")}>2323</div>;
-// };
-
 /**
  * 红包雨
  */
@@ -306,9 +327,13 @@ const getMaxSignId = (obj: any) => {
  * 签到活动
  */
 const SignInSection: FC = () => {
+    const { modalShow, closeModalShow } = useModalShow((state: any) => ({
+        modalShow: state.modalShow,
+        closeModalShow: state.closeModalShow,
+    }));
     const SignInRef = useRef<SignInModalProps>(null);
     const [activityId, setActivityId] = useState<number | null>(null);
-
+    const keyName = "SignInSection";
     const { getSignData, signData } = useSignStore((state) => {
         return {
             getSignData: state.getSignData,
@@ -322,26 +347,41 @@ const SignInSection: FC = () => {
             if (activity_id) {
                 setActivityId(activity_id);
                 await getSignData({ activity_id: activity_id });
-                setTimeout(() => {
-                    localStorage.setItem("sign", `${Date.now()}`);
-                    signInHandle();
-                }, 1000);
             }
         }
     };
-
-    useEffect(() => {
+    const checkIsShowed = () => {
         const showTime = localStorage.getItem("sign");
-
         if (showTime) {
             const nextDay = dayjs(Number(showTime)).add(1, "day").format("YYYY-MM-DD");
             if (dayjs(nextDay).isAfter(dayjs())) {
-                return;
+                return true;
             }
         }
-        getUserInfo();
+        return false;
+    };
+    useEffect(() => {
+        // if (checkIsShowed()) return;
+        if (getToken()) getUserInfo();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    const destoryComponent = () => {
+        closeModalShow(keyName);
+    };
+    useEffect(() => {
+        console.log(modalShow, modalShow === keyName, getToken());
+        if (modalShow === keyName && getToken()) {
+            if (checkIsShowed()) {
+                destoryComponent();
+            } else {
+                localStorage.setItem("sign", `${Date.now()}`);
+                signInHandle();
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [modalShow, keyName]);
+
     const signInHandle = () => {
         SignInRef.current?.onOpen();
     };
@@ -361,14 +401,14 @@ const SignInSection: FC = () => {
             >
                 Sign
             </div> */}
-            <SignInModal ref={SignInRef}></SignInModal>
+            <SignInModal ref={SignInRef} onDestory={destoryComponent}></SignInModal>
         </>
     );
 };
 
 const ServiceWidget: FC<Props> = (props) => {
     const { services } = props;
-    // const [isShowSign, setIsShowSign] = useState(false);
+    const [type, setType] = useState<number>(0);
 
     const { eventView } = useEventPoint();
     const newServices = services?.filter((item) => item.status === 1) || [];
@@ -389,15 +429,68 @@ const ServiceWidget: FC<Props> = (props) => {
 
     const t = useTranslations("HomePage");
 
-    // const wheelDestory = () => {
-    //     setIsShowSign(true);
+    // const servicesMap = new Map<number, any>([
+    //     [
+    //         0,
+    //         {
+    //             components: <SlotSection />,
+    //         },
+    //     ],
+    //     [
+    //         1,
+    //         {
+    //             components: <WheelSection />,
+    //         },
+    //     ],
+    //     [
+    //         2,
+    //         {
+    //             components: <PaySection />,
+    //         },
+    //     ],
+    //     [
+    //         3,
+    //         {
+    //             components: <RedPacketSection />,
+    //         },
+    //     ],
+    //     [
+    //         4,
+    //         {
+    //             components: <MessageSection />,
+    //         },
+    //     ],
+    //     [
+    //         5,
+    //         {
+    //             components: <CustomerSection services={services} />,
+    //         },
+    //     ],
+    //     [
+    //         6,
+    //         {
+    //             components: <SignInSection />,
+    //         },
+    //     ],
+    // ]);
+
+    // const curComponents = useMemo(() => {
+    //     return servicesMap.get(type)?.components;
+    //     // eslint-disable-next-line react-hooks/exhaustive-deps
+    // }, [type, services, servicesMap]);
+
+    // const modalDestory = () => {
+    //     setType(type + 1);
     // };
 
+    // console.log("type:", type);
+
     return (
         <>
             <div
                 className={`absolute bottom-[0.84rem] right-[0.12rem] z-50 flex w-[0.6944rem] flex-col items-center justify-center`}
             >
+                {/* {React.cloneElement(curComponents, { onDestory: modalDestory })} */}
                 <SlotSection />
                 {/*轮盘  */}
                 <WheelSection />

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

@@ -4,10 +4,10 @@ import Box from "@/components/Box";
 import { Mask } from "antd-mobile";
 import { FC, MouseEvent, useEffect, useState } from "react";
 
+import { useModalShow } from "@/stores/modalShow";
 import dayjs from "dayjs";
 import { Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
-
 interface Props {
     data?: PromotionRep[];
     type?: 1 | 2; // 每天只弹一次 /  每次登录都弹
@@ -16,8 +16,14 @@ interface Props {
 const HomePromotion: FC<Props> = (props) => {
     const { data, type } = props;
     const [visible, setVisible] = useState(false);
+    const [flag, setFlag] = useState(false);
     const [innerData, setInnerData] = useState<PromotionRep[]>([]);
     const [actIdx, setActIdx] = useState(0);
+    const keyName = "HomePromotion";
+    const { modalShow, closeModalShow } = useModalShow((state: any) => ({
+        modalShow: state.modalShow,
+        closeModalShow: state.closeModalShow,
+    }));
 
     useEffect(() => {
         const isClosePromotion = sessionStorage.getItem("isClosePromotion");
@@ -37,9 +43,14 @@ const HomePromotion: FC<Props> = (props) => {
             return false;
         };
         let flag = shouldShowPromotion();
-        setVisible(flag);
-    }, []);
 
+        setFlag(flag);
+    }, []);
+    useEffect(() => {
+        if (modalShow === keyName && flag) {
+            setVisible(true);
+        }
+    }, [modalShow, keyName, flag]);
     useEffect(() => {
         if (data) {
             setInnerData([...data]);
@@ -47,16 +58,16 @@ const HomePromotion: FC<Props> = (props) => {
     }, [data]);
 
     useEffect(() => {
-        if (innerData.length === 0) {
-            visible && setVisible(false);
+        if (innerData.length === 0 && visible) {
+            setVisible(false);
+            closeModalShow(keyName);
         }
-    }, [innerData, visible]);
+    }, [innerData, visible, closeModalShow]);
 
     const closeHandler = (e: MouseEvent<HTMLElement>) => {
         e.stopPropagation();
         setInnerData((idata) => {
             idata.splice(actIdx, 1);
-
             return [...idata];
         });
 

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

@@ -291,11 +291,12 @@ const Jackpot: React.FC = () => {
                 >
                     <div className={clsx("mb-[.1rem] font-[700]")}>Descriçäo da Atividade</div>
                     <div className={clsx("mb-[.1rem] text-[.12rem]")}>
-                        1.Novos usuários podem participar de prémios misteriosos nosegundo,
-                        terceiro, sétimo, décimo quinto e trigésimo dia apóso registro.
+                        1. Novos usuários podem participar de prêmios misteriosos no segundo,
+                        terceiro, sétimo, décimo quinto e trigésimo dia após o registro.
                     </div>
                     <div className={clsx("mb-[.1rem] text-[.12rem]")}>
-                        2.Quanto mais depÃsitos, maior o tempo online, e maior obÃnus para o evento.
+                        2.Quanto mais depósitos, maior o tempo online, e maior o bônus para o
+                        evento.
                     </div>
                 </div>
             </div>

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

@@ -131,7 +131,7 @@ const SignIn: FC = () => {
                 {/* 活动背景 */}
                 <div className="absolute top-[2.9727rem] w-[100%]">
                     {/* 右上角文本 */}
-                    <div className="absolute right-[0.1rem] top-0 z-50 h-[0.32rem] w-[20%] text-center text-[0.11rem] font-bold text-[white]">
+                    <div className="absolute right-[0.1rem] top-[.08rem] z-50 h-[0.32rem] w-[20%] text-center text-[0.11rem] font-bold text-[white]">
                         <p className={"h-[0.16rem]"}>
                             {signData?.cur_num ? signData?.cur_num : 0} /
                             {signData?.list?.length || 0}
@@ -168,13 +168,13 @@ const SignIn: FC = () => {
                         </span>
                     </div>
                     {/* 活动描述文本背景 */}
-                    <div className="relative flex h-[4.4rem] justify-center">
+                    <div className="relative flex h-[4.8rem] justify-center">
                         <div className="relative h-[100%]">
                             <img src="/signDetails/bg2.png" className={"h-[100%]"} alt="" />
                             <div className="absolute top-0 h-[100%] w-[100%]">
                                 {/* title标题 */}
                                 <div className="h-[0.425rem] text-center text-[.18rem] font-bold leading-[0.425rem] text-[white]">
-                                    <p>Activity dedscription</p>
+                                    <p>Descrição da Atividade</p>
                                 </div>
                                 {/* 描述内容 */}
                                 <div className="h-[3.3455rem] w-[100%] px-[0.15rem] py-[0.2091rem]">

src/components/ModalPopup/SignInModal/index.tsx

@@ -66,14 +66,21 @@ export const BoxListCom = forwardRef<BoxList, BoxParams>(function BoxListCom(
                                         />
                                         <div className="flex justify-center">
                                             {item.is_suss ? (
-                                                <img
-                                                    id={"opened" + (startDays + index)}
-                                                    src={"/sign/opened.png"}
+                                                <div
                                                     className={
-                                                        "absolute bottom-[0.035rem] z-50 h-[0.34rem]"
+                                                        "absolute bottom-[0] left-[0] right-[0] top-[0] z-10 flex flex-col items-center justify-center text-center"
                                                     }
-                                                    alt=""
-                                                />
+                                                >
+                                                    <img
+                                                        id={"opened" + (startDays + index)}
+                                                        src={"/sign/opened.png"}
+                                                        className="h-[0.34rem]"
+                                                        alt=""
+                                                    />
+                                                    <span className="text-[.14rem] font-bold text-[#fc0000]">
+                                                        +{item.num}R
+                                                    </span>
+                                                </div>
                                             ) : null}
                                         </div>
                                         {item.extra_num ? (
@@ -176,7 +183,12 @@ export const PayBoxList: FC<PayProps> = ({ type = "modal" }) => {
     );
 };
 
-const SignInModal = forwardRef(function SignInModal(props, ref) {
+interface SignInModalProps1 {
+    onDestory?: Function;
+}
+
+//onDestory
+const SignInModal = forwardRef(function SignInModal(props: SignInModalProps1, ref) {
     const [visible, setVisible] = useState(false);
     const [amount, setAmount] = useState({});
 
@@ -241,13 +253,17 @@ const SignInModal = forwardRef(function SignInModal(props, ref) {
         }
     };
 
+    const customClose = () => {
+        setVisible(false);
+        if (props?.onDestory && typeof props.onDestory === "function") {
+            props.onDestory();
+        }
+    };
+
     return (
         <>
-            <Mask visible={visible} destroyOnClose={true} onMaskClick={() => setVisible(false)}>
-                <div
-                    className={"absolute right-[0.2083rem] top-[18%] z-50"}
-                    onClick={() => setVisible(false)}
-                >
+            <Mask visible={visible} destroyOnClose={true} onMaskClick={customClose}>
+                <div className={"absolute right-[0.2083rem] top-[18%] z-50"} onClick={customClose}>
                     <span className={"iconfont icon-guanbi"}></span>
                 </div>
                 <div className="absolute top-[5%] w-[100%]">

src/components/ModalPopup/SlotsModal/index.tsx

@@ -1,12 +1,12 @@
 "use client";
 import { getGiveReceiveApi, SlotParams, SlotType } from "@/api/slots";
+import TipsModal, { ModalProps } from "@/components/TipsModal";
+import { useRouter } from "@/i18n/routing";
 import { flatPoint } from "@/utils/methods";
 import { SlotMachine } from "@lucky-canvas/react";
-import { Mask, Toast, Button } from "antd-mobile";
+import { Button, Mask, Toast } from "antd-mobile";
 import clsx from "clsx";
 import { useTranslations } from "next-intl";
-import { useRouter } from "@/i18n/routing";
-import TipsModal, { ModalProps } from "@/components/TipsModal";
 import { FC, forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
 import animation from "../animations.module.scss";
 
@@ -231,7 +231,7 @@ const SlotsClient: FC<SlotsClientProps> = (props) => {
         //         Interval && clearInterval(Interval);
         //         setRatio(numberPadding(73, 2));
         //     }, 1600);
-            
+
         //     setTimeout(() => {
         //         showTipsModal && showTipsModal({amount: 5666, rollover: 38})
         //     }, 3000);
@@ -250,7 +250,11 @@ const SlotsClient: FC<SlotsClientProps> = (props) => {
                     }, 1600);
 
                     setTimeout(() => {
-                        showTipsModal && showTipsModal({amount: res.data.amount, rollover: rollover > 100 ? 99 : rollover})
+                        showTipsModal &&
+                            showTipsModal({
+                                amount: res.data.amount,
+                                rollover: rollover > 100 ? 99 : rollover,
+                            });
                     }, 3000);
                 }, 3000);
             })
@@ -381,7 +385,11 @@ export type SlotModalRefProps = {
     onClose: () => void;
     onOpen: (value: SlotType) => void;
 };
-const SlotsModal = forwardRef<SlotModalRefProps, Props>(function SlotsModal(props, ref) {
+export interface SlotsModalProps {
+    onClose?: () => void;
+    onAfterHandler?: any;
+}
+const SlotsModal = forwardRef<SlotModalRefProps, SlotsModalProps>(function SlotsModal(props, ref) {
     const [visible, setVisible] = useState(false);
     const { onAfterHandler } = props;
 
@@ -419,25 +427,29 @@ const SlotsModal = forwardRef<SlotModalRefProps, Props>(function SlotsModal(prop
 
     // 提示框
     const tipsRef = useRef<ModalProps>(null);
-    const [obterFree, setObterFree] = useState<any>({amount: 0, rollover: 0});
+    const [obterFree, setObterFree] = useState<any>({ amount: 0, rollover: 0 });
     const showTipsModal = (data: any) => {
-        setObterFree({...data})
-        setVisible(false)
+        setObterFree({ ...data });
+        setVisible(false);
         tipsRef.current?.onOpen();
-    }
+    };
     const router = useRouter();
     const goGame = () => {
         tipsRef.current?.onClose();
         router.push(`/freeGames`);
     };
 
+    const customClose = () => {
+        setVisible(false);
+        if (props.onClose && typeof props.onClose === "function") {
+            props.onClose();
+        }
+    };
+
     return (
         <>
             <Mask visible={visible} destroyOnClose={true} getContainer={null}>
-                <div
-                    className={"absolute right-[0.2083rem] top-[18%] z-50"}
-                    onClick={() => setVisible(false)}
-                >
+                <div className={"absolute right-[0.2083rem] top-[18%] z-50"} onClick={customClose}>
                     <span className={"iconfont icon-guanbi"}></span>
                 </div>
                 {/*body*/}
@@ -457,14 +469,20 @@ const SlotsModal = forwardRef<SlotModalRefProps, Props>(function SlotsModal(prop
                             <img src="/slots/will-light3.png" alt="" className={light4} />
                         </div>
                     </div>
-                    {slotSource && <SlotsClient onRotateAfter={handler} slotSource={slotSource} showTipsModal={showTipsModal}/>}
+                    {slotSource && (
+                        <SlotsClient
+                            onRotateAfter={handler}
+                            slotSource={slotSource}
+                            showTipsModal={showTipsModal}
+                        />
+                    )}
                 </div>
             </Mask>
-            <TipsModal ref={tipsRef} title={'Obter Free'}>
+            <TipsModal ref={tipsRef} title={"Obter Free"} onBeforeClose={customClose}>
                 <p className={"text-left text-[0.12rem] font-medium text-[#666]"}>
                     Ganhe moedas grátis：{obterFree.amount}
                 </p>
-                <p className={"text-left text-[0.12rem] font-medium text-[#666] mt-[.06rem]"}>
+                <p className={"mt-[.06rem] text-left text-[0.12rem] font-medium text-[#666]"}>
                     Requisito de rolagem：{obterFree.rollover}X
                 </p>
                 <div className={"mt-[0.08rem] flex justify-center"}>

src/components/ModalPopup/WheelModal/index.tsx

@@ -452,72 +452,82 @@ const DetailClient = (props: { onUnload: () => void }) => {
     );
 };
 
-const WheelModal = forwardRef<WheelModalProps, Props>(function RedPacketModal(props, ref) {
-    const [visible, setVisible] = useState(false);
-
-    const [detailsVisible, setDetailsVisible] = useState(false);
-
-    useImperativeHandle(ref, () => {
-        return {
-            onClose: () => setVisible(false),
-            onOpen: () => {
-                setVisible(true);
-            },
+const WheelModal = forwardRef<WheelModalProps, { onDestory?: Function }>(
+    function RedPacketModal(props, ref) {
+        const [visible, setVisible] = useState(false);
+
+        const [detailsVisible, setDetailsVisible] = useState(false);
+
+        useImperativeHandle(ref, () => {
+            return {
+                onClose: () => setVisible(false),
+                onOpen: () => {
+                    setVisible(true);
+                },
+            };
+        });
+
+        const onRotateEnd = () => {
+            setVisible(false);
+            setDetailsVisible(true);
         };
-    });
 
-    const onRotateEnd = () => {
-        setVisible(false);
-        setDetailsVisible(true);
-    };
-
-    const onUnload = () => {
-        setDetailsVisible(false);
-    };
-    return (
-        <>
-            <Mask
-                visible={detailsVisible}
-                getContainer={null}
-                destroyOnClose={true}
-                opacity="thick"
-            >
-                <div className={"absolute top-[18%] z-50 w-[100%] px-[0.1389rem]"}>
-                    <div className={"rounded-[0.0694rem] bg-[#232327FF] p-[0.0694rem]"}>
-                        <div className={"flex items-center"}>
-                            <div className={"flex flex-1"}>
-                                <Image
-                                    src={"/wheels/prizes-money.png"}
-                                    width={40}
-                                    height={40}
-                                    alt={"moeny"}
-                                ></Image>
-                                <span className={"ml-[0.0694rem]"}>Receba R$ 100 de graca</span>
+        const onUnload = () => {
+            setDetailsVisible(false);
+        };
+        //setDetailsVisible(false)
+        const customClose = () => {
+            if (detailsVisible) setDetailsVisible(false);
+            if (visible) setVisible(false);
+            if (props?.onDestory && typeof props.onDestory === "function") {
+                props.onDestory();
+            }
+        };
+        return (
+            <>
+                <Mask
+                    visible={detailsVisible}
+                    getContainer={null}
+                    destroyOnClose={true}
+                    opacity="thick"
+                >
+                    <div className={"absolute top-[18%] z-50 w-[100%] px-[0.1389rem]"}>
+                        <div className={"rounded-[0.0694rem] bg-[#232327FF] p-[0.0694rem]"}>
+                            <div className={"flex items-center"}>
+                                <div className={"flex flex-1"}>
+                                    <Image
+                                        src={"/wheels/prizes-money.png"}
+                                        width={40}
+                                        height={40}
+                                        alt={"moeny"}
+                                    ></Image>
+                                    <span className={"ml-[0.0694rem]"}>Receba R$ 100 de graca</span>
+                                </div>
+                                <span
+                                    className={"iconfont icon-guanbi"}
+                                    onClick={customClose}
+                                ></span>
                             </div>
-                            <span
-                                className={"iconfont icon-guanbi"}
-                                onClick={() => setDetailsVisible(false)}
-                            ></span>
-                        </div>
 
-                        <DetailClient onUnload={onUnload} />
+                            <DetailClient onUnload={onUnload} />
+                        </div>
                     </div>
-                </div>
-            </Mask>
-
-            <Mask visible={visible} destroyOnClose={true} getContainer={null} opacity="thick">
-                <div
-                    className={"absolute right-[0.2083rem] top-[18%] z-50"}
-                    onClick={() => setVisible(false)}
-                >
-                    <span className={"iconfont icon-guanbi"}></span>
-                </div>
-                <div className={"absolute top-[5%] w-[100%]"}>
-                    <WheelClient isRotate={true} onRotateEnd={onRotateEnd} />
-                </div>
-            </Mask>
-        </>
-    );
-});
+                </Mask>
+
+                <Mask visible={visible} destroyOnClose={true} getContainer={null} opacity="thick">
+                    <div
+                        className={"absolute right-[0.2083rem] top-[18%] z-50"}
+                        onClick={customClose}
+                    >
+                        <span className={"iconfont icon-guanbi"}></span>
+                    </div>
+                    <div className={"absolute top-[5%] w-[100%]"}>
+                        <WheelClient isRotate={true} onRotateEnd={onRotateEnd} />
+                    </div>
+                </Mask>
+            </>
+        );
+    }
+);
 
 export default memo(WheelModal);

src/stores/modalShow.ts

@@ -0,0 +1,22 @@
+import { create } from "zustand";
+
+const modalList = ["WheelSection", "SignInSection", "HomePromotion"];
+export const useModalShow = create((set) => ({
+    modalShow: "WheelSection",
+    closeModalShow: (key: string) => {
+        const idx = modalList.indexOf(key);
+        let keyName = "";
+        if (idx + 1 < modalList.length) {
+            keyName = modalList[idx + 1];
+        }
+        if (!keyName || !modalList.includes(keyName)) return;
+        set((state: any) => {
+            return { ...state, modalShow: keyName || "" };
+        });
+    },
+    setModalShow: (key: string) => {
+        set((state: any) => {
+            return { ...state, modalShow: key };
+        });
+    },
+}));