feat: 修改

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

@@ -1,3 +1,4 @@
+import DialogPay from "@/dialog/pay";
 import DialogSign from "@/dialog/sign";
 import DialogWheel from "@/dialog/wheel";
 
@@ -6,6 +7,7 @@ const Dialogs = () => {
         <>
             <DialogWheel></DialogWheel>
             <DialogSign></DialogSign>
+            <DialogPay></DialogPay>
         </>
     );
 };

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

@@ -3,9 +3,11 @@ import { getWheelApi } from "@/api/cashWheel";
 import { ServiceTypes } from "@/api/customservice";
 import { lredPacketApi, redPacketApi } from "@/api/promo";
 import { getGiveInfoApi } from "@/api/slots";
-import UserRecharge, { ModalRefProps, Timeout } from "@/components/ModalPopup/RechargeModal";
+import { Timeout } from "@/components/ModalPopup/RechargeModal";
 import RedPacketModal, { RedPacketModalProps } from "@/components/ModalPopup/RedPacketModal";
 import SlotsModal, { SlotModalRefProps } from "@/components/ModalPopup/SlotsModal";
+import dialogManage from "@/dialog/manager";
+
 import { useEventPoint } from "@/hooks/useEventPoint";
 import { Link } from "@/i18n/routing";
 import { useFirstPayStore } from "@/stores/useFirstPayStore";
@@ -60,6 +62,7 @@ const SlotSection: FC<SlotSectionProps> = ({ onDestory }) => {
                     src={"/slots/slots-icon.gif"}
                     className={"mb-[0.2778rem] w-[100%]"}
                     onClick={slotHandler}
+                    alt=""
                 />
             ) : null}
 
@@ -89,8 +92,6 @@ const WheelSection = () => {
                     <Image src={"/wheels/wheel-icon.gif"} alt={"wheel"} width={100} height={100} />
                 </Link>
             ) : null}
-
-            {/*  轮盘弹窗 */}
         </>
     );
 };
@@ -107,21 +108,6 @@ const PaySection = () => {
         };
     });
 
-    const userRechargeRef = useRef<ModalRefProps>(null);
-    // 首充活动
-    // const getPayInfo = async (): Promise<PayDataType> => {
-    //     if (token) {
-    //         const result = await getPaysApi();
-    //         return result.data;
-    //     } else {
-    //         return Promise.resolve({
-    //             first_pay: [],
-    //             pay: [],
-    //         });
-    //     }
-    // };
-    // const getPayInfo = async (): Promise<PayDataType> => {};
-
     const { data, run: payRun } = useRequest(getPayData, {
         pollingErrorRetryCount: 1,
         pollingWhenHidden: false,
@@ -138,9 +124,11 @@ const PaySection = () => {
                             className={"w-[0.54rem]"}
                             src="/hby/recharge.png"
                             onClick={() => {
-                                userRechargeRef.current?.onOpen &&
-                                    userRechargeRef.current?.onOpen(firstPay, index);
+                                dialogManage.showDialog("PaySection", firstPay, index);
+                                // userRechargeRef.current?.onOpen &&
+                                //     userRechargeRef.current?.onOpen(firstPay, index);
                             }}
+                            alt=""
                         />
                         {item.count_down > 0 ? (
                             <Timeout
@@ -158,9 +146,6 @@ const PaySection = () => {
                     </div>
                 );
             })}
-
-            {/*首充弹窗*/}
-            <UserRecharge ref={userRechargeRef} />
         </>
     );
 };

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

@@ -1,5 +1,6 @@
 import { getServicesApi } from "@/api/customservice";
 import Box from "@/components/Box";
+import AutoShowDialog from "@/dialog/auto";
 import { Link } from "@/i18n/routing";
 import { getTranslations } from "next-intl/server";
 import Dialogs from "./Dialog";
@@ -85,6 +86,7 @@ const Page = async () => {
                 <Scroll />
             </div>
             <Dialogs></Dialogs>
+            <AutoShowDialog />
         </Box>
     );
 };

src/dialog/auto.ts

@@ -0,0 +1,32 @@
+"use client";
+import React from "react";
+import dialogManage from "./manager";
+
+const AutoShowDialog = () => {
+    const [data, setData] = React.useState<string[]>([]);
+
+    React.useEffect(() => {
+        getData();
+    }, []);
+    React.useEffect(() => {
+        if (!data.length) return;
+        setTimeout(() => {
+            doShow();
+        }, 3000);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data]);
+
+    const getData = async () => {
+        setData(["WheelSection", "SignInSection"]);
+    };
+    const doShow = async () => {
+        for (let i = 0; i < data.length; i++) {
+            const key = data[i];
+            await dialogManage.showDialog(key);
+        }
+    };
+
+    return null;
+};
+
+export default AutoShowDialog;

src/dialog/manager.ts

@@ -1,71 +1,47 @@
 interface RegisterParams {
     key: string; // 唯一标识
-    show?: Function; // 显示函数
+    show: Function; // 显示函数
     hide?: Function; // 隐藏函数
-    canAutoShow?: boolean; // 是否在获取数据后自动显示
 }
 
 class DialogManage {
     private _dialogs: Map<string, RegisterParams>; // 存储所有的dialogManage
-    private _dialogsAutoShowKey: string[];
-    private _showIdx: number;
-    private _isAtuo: any;
+    private _resolve: Function | null; // 存储当前的resolve函数
     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);
-        }
+        this._resolve = null;
     }
 
-    registerDialog({ key, show, hide, canAutoShow }: RegisterParams) {
-        if (canAutoShow) {
-            this._dialogsAutoShowKey.push(key);
-        }
-
+    registerDialog({ key, show, hide }: RegisterParams) {
         this._dialogs.set(key, {
             key,
             show,
             hide,
         });
     }
-    removeDialog(key: string) {
+    unregisterDialog(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`);
-        }
+        return new Promise((resolve) => {
+            const dialog = this._dialogs.get(key);
+            this._resolve = resolve;
+            if (dialog) {
+                dialog.show && dialog.show(...args);
+            } else {
+                console.error(`Dialog with key ${key} not found`);
+                this._resolve("error");
+            }
+        });
     }
     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`);
         }
+        if (this._resolve) this._resolve("close");
     }
 }
 

src/dialog/pay/index.tsx

@@ -0,0 +1,29 @@
+"use client";
+import UserRecharge from "@/components/ModalPopup/RechargeModal";
+import React from "react";
+import dialogManage from "../manager";
+
+const PaySection = () => {
+    const userRechargeRef = React.useRef<any>(null);
+    const keyName = "PaySection"; // 确保这个keyName是唯一的，与其他地方的keyName不同，以避免冲突
+
+    React.useEffect(() => {
+        dialogManage.registerDialog({
+            key: keyName,
+            show(data: any, idx: number) {
+                if (!!userRechargeRef?.current) {
+                    userRechargeRef.current.onOpen(data, idx);
+                }
+            },
+            hide() {},
+        });
+    }, []);
+
+    return (
+        <>
+            <UserRecharge ref={userRechargeRef} />
+        </>
+    );
+};
+
+export default PaySection;

src/dialog/sign/index.tsx

@@ -62,7 +62,6 @@ const SignInSection: FC = () => {
                 SignInRef?.current?.onOpen();
             },
             hide() {},
-            canAutoShow: true,
         });
     }, []);
 

src/dialog/wheel/index.tsx

@@ -25,7 +25,6 @@ const WheelSection = () => {
                 wheelModalRef?.current?.onOpen(data);
             },
             hide() {},
-            canAutoShow: true,
         });
         // dialogManager.showDialog(keyName);
         // eslint-disable-next-line react-hooks/exhaustive-deps