feat: 修改

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

@@ -0,0 +1,13 @@
+import DialogSign from "@/dialog/sign";
+import DialogWheel from "@/dialog/wheel";
+
+const Dialogs = () => {
+    return (
+        <>
+            <DialogWheel></DialogWheel>
+            <DialogSign></DialogSign>
+        </>
+    );
+};
+
+export default Dialogs;

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

@@ -1,29 +1,22 @@
 "use client";
 import { getWheelApi } from "@/api/cashWheel";
 import { ServiceTypes } from "@/api/customservice";
-import { userInfoApi } from "@/api/login";
 import { lredPacketApi, redPacketApi } from "@/api/promo";
 import { getGiveInfoApi } from "@/api/slots";
 import UserRecharge, { ModalRefProps, Timeout } from "@/components/ModalPopup/RechargeModal";
 import RedPacketModal, { RedPacketModalProps } from "@/components/ModalPopup/RedPacketModal";
-import SignInModal, { SignInModalProps } from "@/components/ModalPopup/SignInModal";
 import SlotsModal, { SlotModalRefProps } from "@/components/ModalPopup/SlotsModal";
-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";
 import useWheelStore from "@/stores/useWheelStore";
 import { getToken } from "@/utils/Cookies";
 import { useRequest } from "ahooks";
 import { Badge } from "antd-mobile";
-import dayjs from "dayjs";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
-import { usePathname } from "next/navigation";
-import { FC, useEffect, useMemo, useRef, useState } from "react";
+import { FC, useEffect, useRef, useState } from "react";
 
 interface Props {
     services: ServiceTypes[];
@@ -80,49 +73,9 @@ const SlotSection: FC<SlotSectionProps> = ({ onDestory }) => {
  * 轮盘
  */
 const WheelSection = () => {
-    const pathname = usePathname();
-    const wheelModalRef = useRef<WheelModalProps | null>(null);
-    const [data, setData] = useState<any>([]);
-    const { modalShow, closeModalShow, setModalShow } = useModalShow((state: any) => ({
-        modalShow: state.modalShow,
-        closeModalShow: state.closeModalShow,
-        setModalShow: state.setModalShow,
-    }));
-    const keyName = useMemo(() => {
-        return "WheelSection";
-    }, []);
-    const { wheelStatus, wheelCurrent, setWheel } = useWheelStore((state) => ({
+    const { wheelStatus } = useWheelStore((state) => ({
         wheelStatus: state.status,
-        wheelCurrent: state.currentWheel,
-        setWheel: state.setWheel,
     }));
-
-    useEffect(() => {
-        setWheel().then((data) => {
-            if (data && useWheelStore.getState().status === 1) {
-                setData(data);
-            }
-        });
-    }, []);
-
-    useEffect(() => {
-        if (!data) return;
-        if (modalShow === keyName) {
-            wheelModalRef.current?.onOpen(data);
-        }
-    }, [modalShow, data, keyName, pathname]);
-
-    useEffect(() => {
-        setModalShow("WheelSection");
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [pathname]);
-
-    const destoryComponent = () => {
-        if (modalShow === keyName) {
-            closeModalShow(keyName);
-        }
-    };
-
     return (
         <>
             {wheelStatus === 2 ? (
@@ -138,7 +91,6 @@ const WheelSection = () => {
             ) : null}
 
             {/*  轮盘弹窗 */}
-            <WheelModal ref={wheelModalRef} onDestory={destoryComponent} />
         </>
     );
 };
@@ -320,100 +272,6 @@ const CustomerSection: FC<Omit<Props, "socials">> = (props) => {
     );
 };
 
-const getMaxSignId = (obj: any) => {
-    if (!obj) return null;
-    const signArr: number[] = [];
-    Object.keys(obj).map((key) => {
-        if (obj[key] === 9) {
-            signArr.push(Number(key));
-        }
-    });
-    return signArr.length > 0 ? Math.max(...signArr) : null;
-};
-
-/**
- * 签到活动
- */
-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,
-            signData: state.signData,
-        };
-    });
-    const getUserInfo = async () => {
-        const res: any = await userInfoApi();
-        if (res.code === 200 && res.data?.activity) {
-            const activity_id = getMaxSignId(res.data?.activity);
-            if (activity_id) {
-                setActivityId(activity_id);
-                await getSignData({ activity_id: activity_id });
-            }
-        }
-    };
-    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 true;
-            }
-        }
-        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();
-    };
-
-    if (!activityId) {
-        return null;
-    }
-    return (
-        <>
-            {/* <div
-                className={
-                    "mt-[0.2778rem] flex h-[0.54rem] w-[0.54rem] items-center justify-center" +
-                    " rounded-[50%]" +
-                    " bg-gradient-to-t from-[#ff611b] to-[#ffcf35]"
-                }
-                onClick={signInHandle}
-            >
-                Sign
-            </div> */}
-            <SignInModal ref={SignInRef} onDestory={destoryComponent}></SignInModal>
-        </>
-    );
-};
-
 const ServiceWidget: FC<Props> = (props) => {
     const { services } = props;
     const [type, setType] = useState<number>(0);
@@ -437,62 +295,6 @@ const ServiceWidget: FC<Props> = (props) => {
 
     const t = useTranslations("HomePage");
 
-    // 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
@@ -511,7 +313,7 @@ const ServiceWidget: FC<Props> = (props) => {
                 {/*客服*/}
                 <CustomerSection services={services} />
                 {/* 签到 */}
-                <SignInSection />
+                {/* <SignInSection /> */}
             </div>
 
             <div

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

@@ -2,8 +2,10 @@ import { getServicesApi } from "@/api/customservice";
 import Box from "@/components/Box";
 import { Link } from "@/i18n/routing";
 import { getTranslations } from "next-intl/server";
+import Dialogs from "./Dialog";
 import Scroll from "./Scroll";
 import Service from "./Service";
+
 const terms = [
     { label: "aml", url: "/preventLaunderMoney" },
     { label: "terms", url: "/terms" },
@@ -82,6 +84,7 @@ const Page = async () => {
                 {/*support*/}
                 <Scroll />
             </div>
+            <Dialogs></Dialogs>
         </Box>
     );
 };

src/dialog/manager.ts

@@ -0,0 +1,74 @@
+interface RegisterParams {
+    key: string; // 唯一标识
+    show?: Function; // 显示函数
+    hide?: Function; // 隐藏函数
+    canAutoShow?: boolean; // 是否在获取数据后自动显示
+}
+
+class DialogManage {
+    private _dialogs: Map<string, RegisterParams>; // 存储所有的dialogManage
+    private _dialogsAutoShowKey: string[];
+    private _showIdx: number;
+    private _isAtuo: any;
+    constructor() {
+        this._dialogs = new Map();
+        this._dialogsAutoShowKey = [];
+        this._showIdx = 0; // 记录当前显示的dialogManage的索引
+        this._isAtuo = true;
+        this.init();
+    }
+    async init() {
+        setTimeout(() => {
+            this.run();
+        }, 3000);
+    }
+
+    async run() {
+        const curDialog = this._dialogs.get(this._dialogsAutoShowKey[this._showIdx]);
+        if (curDialog?.key) {
+            this.showDialog(curDialog.key);
+        }
+    }
+
+    registerDialog({ key, show, hide, canAutoShow }: RegisterParams) {
+        if (canAutoShow) {
+            this._dialogsAutoShowKey.push(key);
+        }
+
+        this._dialogs.set(key, {
+            key,
+            show,
+            hide,
+        });
+    }
+    removeDialog(key: string) {
+        this._dialogs.delete(key);
+    }
+    showDialog(key: string, ...args: any[]) {
+        const dialog = this._dialogs.get(key);
+        if (dialog) {
+            dialog.show && dialog.show(...args);
+        } else {
+            console.error(`Dialog with key ${key} not found`);
+        }
+    }
+    hideDialog(key: string, ...args: any[]) {
+        const dialog = this._dialogs.get(key);
+        if (dialog) {
+            dialog.hide && dialog.hide(...args);
+            if (this._showIdx + 1 === this._dialogsAutoShowKey.length) {
+                this._isAtuo = false;
+            }
+            if (this._isAtuo && this._showIdx + 1 < this._dialogsAutoShowKey.length) {
+                this._showIdx++;
+                this.run();
+            }
+        } else {
+            console.error(`Dialog with key ${key} not found`);
+        }
+    }
+}
+
+const dialogManage = new DialogManage();
+
+export default dialogManage;

src/dialog/sign/index.tsx

@@ -0,0 +1,93 @@
+"use client";
+import { userInfoApi } from "@/api/login";
+import SignInModal, { SignInModalProps } from "@/components/ModalPopup/SignInModal";
+import dialogManager from "@/dialog/manager";
+import { useSignStore } from "@/stores/useSignStore";
+import { getToken } from "@/utils/Cookies";
+import dayjs from "dayjs";
+import { FC, useEffect, useRef, useState } from "react";
+
+const SignInSection: FC = () => {
+    const SignInRef = useRef<SignInModalProps>(null);
+    const [activityId, setActivityId] = useState<number | null>(null);
+    const keyName = "SignInSection";
+    const { getSignData, signData } = useSignStore((state) => {
+        return {
+            getSignData: state.getSignData,
+            signData: state.signData,
+        };
+    });
+    const getMaxSignId = (obj: any) => {
+        if (!obj) return null;
+        const signArr: number[] = [];
+        Object.keys(obj).map((key) => {
+            if (obj[key] === 9) {
+                signArr.push(Number(key));
+            }
+        });
+        return signArr.length > 0 ? Math.max(...signArr) : null;
+    };
+    const getUserInfo = async () => {
+        const res: any = await userInfoApi();
+        if (res.code === 200 && res.data?.activity) {
+            const activity_id = getMaxSignId(res.data?.activity);
+            if (activity_id) {
+                setActivityId(activity_id);
+                await getSignData({ activity_id: activity_id });
+            }
+        }
+    };
+    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 true;
+            }
+        }
+        return false;
+    };
+    useEffect(() => {
+        if (getToken()) getUserInfo();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    useEffect(() => {
+        dialogManager.registerDialog({
+            key: keyName,
+            show() {
+                if (!checkIsShowed()) {
+                    destoryComponent();
+                }
+                SignInRef?.current?.onOpen();
+            },
+            hide() {},
+            canAutoShow: true,
+        });
+    }, []);
+
+    const destoryComponent = () => {
+        dialogManager.hideDialog(keyName); // 隐藏对话框
+    };
+
+    if (!activityId) {
+        return null;
+    }
+    return (
+        <>
+            {/* <div
+                className={
+                    "mt-[0.2778rem] flex h-[0.54rem] w-[0.54rem] items-center justify-center" +
+                    " rounded-[50%]" +
+                    " bg-gradient-to-t from-[#ff611b] to-[#ffcf35]"
+                }
+                onClick={signInHandle}
+            >
+                Sign
+            </div> */}
+            <SignInModal ref={SignInRef} onDestory={destoryComponent}></SignInModal>
+        </>
+    );
+};
+
+export default SignInSection;

src/dialog/wheel/index.tsx

@@ -0,0 +1,48 @@
+"use client";
+import WheelModal, { WheelModalProps } from "@/components/ModalPopup/WheelModal";
+
+import dialogManager from "@/dialog/manager";
+import useWheelStore from "@/stores/useWheelStore";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+const WheelSection = () => {
+    const wheelModalRef = useRef<WheelModalProps | null>(null);
+    const [data, setData] = useState<any>([]);
+    const keyName = useMemo(() => {
+        return "WheelSection";
+    }, []);
+    const { setWheel } = useWheelStore((state) => ({
+        setWheel: state.setWheel,
+    }));
+    useEffect(() => {
+        getData();
+    }, []);
+
+    useEffect(() => {
+        dialogManager.registerDialog({
+            key: keyName,
+            show() {
+                wheelModalRef?.current?.onOpen(data);
+            },
+            hide() {},
+            canAutoShow: true,
+        });
+        // dialogManager.showDialog(keyName);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [keyName]);
+
+    const getData = async () => {
+        const data = await setWheel();
+        // if (data && useWheelStore.getState().status === 1) {
+        //     setData(data);
+        // }
+    };
+
+    const destoryComponent = () => {
+        dialogManager.hideDialog(keyName); // 隐藏对话框
+    };
+
+    return <WheelModal ref={wheelModalRef} onDestory={destoryComponent} />;
+};
+
+export default WheelSection;