feat: 封装弹框管理

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

@@ -193,6 +193,7 @@ const RedPacketSection = () => {
                             onClick={() => {
                                 redPacketModalRef.current?.onOpen(packets, index);
                             }}
+                            alt=""
                         />
                     </div>
                 );
@@ -318,6 +319,7 @@ const ServiceWidget: FC<Props> = (props) => {
                             <img
                                 className={"h-[0.3889rem] w-[0.3889rem]"}
                                 src={service.icon_url}
+                                alt=""
                             ></img>
                         </Link>
                     );

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

@@ -2,7 +2,6 @@ import { NoticeRep, PromotionRep } from "@/api/home";
 import DesktopModal from "@/components/ModalPopup/DesktopModal";
 import { server } from "@/utils/server";
 import HomeMessage from "../_home/HomeMessage";
-import HomePromotion from "../_home/HomePromotion";
 const getPromotions = async () => {
     return server
         .request<PromotionRep[], { summery: { showType: 1 | 2 } }>({
@@ -28,17 +27,17 @@ const getNotices = async () => {
         });
 };
 const Page = async () => {
-    const promotions = await getPromotions();
+    // const promotions = await getPromotions();
     const notices = await getNotices();
     return (
         <>
             {/*站内信*/}
             <HomeMessage notices={notices} />
             {/* 站内弹窗广告  */}
-            <HomePromotion
+            {/* <HomePromotion
                 data={promotions?.data || []}
                 type={promotions?.summery?.showType || 1}
-            />
+            /> */}
             {/*安装弹窗*/}
             <DesktopModal source={"page"} />
         </>

src/dialog/auto.ts

@@ -1,4 +1,5 @@
 "use client";
+
 import React from "react";
 import dialogManage from "./manager";
 
@@ -12,17 +13,25 @@ const AutoShowDialog = () => {
         if (!data.length) return;
         setTimeout(() => {
             doShow();
-        }, 3000);
+        }, 300);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [data]);
 
     const getData = async () => {
-        setData(["WheelSection", "SignInSection"]);
+        setData(["SignInSection", "ImgDialog", "WheelSection"]);
     };
     const doShow = async () => {
-        for (let i = 0; i < data.length; i++) {
+        let showIndex = sessionStorage.getItem("dialogShow");
+        let startShow = showIndex ? Number(showIndex) : 0;
+        if (startShow > data.length - 1) {
+            startShow = 0;
+        }
+        for (let i = startShow; i < data.length; i++) {
             const key = data[i];
-            await dialogManage.showDialog(key);
+            await dialogManage.showDialog(key, {
+                imgUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2024%2F05%2F1018%2F283462633_4_20240510061136195&refer=http%3A%2F%2Fimage109.360doc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1748074870&t=edae5f7537eb641d9c78e774b2634cfd",
+            });
+            sessionStorage.setItem("dialogShow", `${i + 1}`);
         }
     };
 

src/dialog/img/index.module.scss

@@ -0,0 +1,41 @@
+.imgDialog {
+    width: 80%;
+    height: 4rem;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &Container {
+        width: 100%;
+        position: relative;
+        height: 100%;
+        background-color: #000;
+        border-radius: 0.1rem;
+        overflow: hidden;
+    }
+    .close {
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 1;
+        padding: 0.05rem 0.05rem 0.1rem 0.1rem;
+        overflow: hidden;
+        &:after {
+            content: "";
+            background-color: rgba(0, 0, 0, 0.5);
+            position: absolute;
+            width: 200%;
+            height: 200%;
+            top: -100%;
+            right: -100%;
+            border-radius: 0.4rem;
+        }
+    }
+    img {
+        width: 100%;
+        height: 100%;
+    }
+}

src/dialog/img/index.tsx

@@ -1,24 +1,52 @@
 "use client";
+import { useRouter } from "@/i18n/routing";
 import { Mask } from "antd-mobile";
+import clsx from "clsx";
 import React from "react";
 import dialogManage from "../manager";
+import styles from "./index.module.scss";
 
 const ImgDialog = () => {
     const keyName = "ImgDialog"; // 确保这个keyName是唯一的，与其他地方的keyName不同，以避免冲突
+    const [data, setData] = React.useState<any>({});
+    const [visible, setVisible] = React.useState<boolean>(false); // 初始值为false，不显示对话框
 
+    const router = useRouter();
+
+    const handler = {
+        key: keyName,
+        show(data: any, idx: number) {
+            if (!data) return "close";
+            setData(data);
+            setVisible(true);
+        },
+        hide() {
+            setVisible(false);
+        },
+    };
     React.useEffect(() => {
-        dialogManage.registerDialog({
-            key: keyName,
-            show(data: any, idx: number) {
-                console.log(data, idx);
-            },
-            hide() {},
-        });
-    });
+        dialogManage.registerDialog(handler);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const close = () => {
+        dialogManage.hideDialog(keyName);
+    };
 
     return (
         <>
-            <Mask visible={false}></Mask>
+            <Mask visible={visible} onMaskClick={close}>
+                <div className={styles.imgDialog}>
+                    <div className={styles.imgDialogContainer}>
+                        <img src={data.imgUrl} alt="" onClick={() => router.push("/deposit")} />
+                        <div className={clsx(styles.close)} onClick={close}>
+                            <i
+                                className={clsx("iconfont icon-guanbi relative z-10 text-[.14rem]")}
+                            ></i>
+                        </div>
+                    </div>
+                </div>
+            </Mask>
         </>
     );
 };

src/dialog/manager.ts

@@ -1,6 +1,6 @@
 interface RegisterParams {
     key: string; // 唯一标识
-    show: Function; // 显示函数
+    show: (...p: any) => "close" | undefined | void; // 显示函数
     hide?: Function; // 隐藏函数
 }
 
@@ -25,10 +25,10 @@ class DialogManage {
     showDialog(key: string, ...args: any[]) {
         return new Promise((resolve) => {
             const dialog = this._dialogs.get(key);
-            console.log("showDialog", Object.fromEntries(this._dialogs));
             this._resolve = resolve;
-            if (dialog) {
-                dialog.show && dialog.show(...args);
+            if (dialog?.show) {
+                const res = dialog.show(...args);
+                if (res === "close") return resolve("close");
             } else {
                 console.error(`Dialog with key ${key} not found`);
                 this._resolve("error");

src/dialog/sign/index.tsx

@@ -56,12 +56,13 @@ const SignInSection: FC = () => {
         dialogManager.registerDialog({
             key: keyName,
             show() {
-                if (!checkIsShowed()) {
-                    destoryComponent();
+                if (!checkIsShowed() && getToken()) {
+                    localStorage.setItem("sign", Date.now().toString());
+                    SignInRef?.current?.onOpen();
+                    return;
                 }
-                SignInRef?.current?.onOpen();
+                return "close";
             },
-            hide() {},
         });
     }, []);
 
@@ -74,16 +75,6 @@ const SignInSection: FC = () => {
     }
     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>
         </>
     );

src/dialog/wheel/index.tsx

@@ -24,17 +24,16 @@ const WheelSection = () => {
             show() {
                 wheelModalRef?.current?.onOpen(data);
             },
-            hide() {},
         });
-        // dialogManager.showDialog(keyName);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [keyName]);
+    }, [keyName, data]);
 
     const getData = async () => {
+        // await setWheel();
         const data = await setWheel();
-        // if (data && useWheelStore.getState().status === 1) {
-        //     setData(data);
-        // }
+        if (data && useWheelStore.getState().status === 1) {
+            setData(data);
+        }
     };
 
     const destoryComponent = () => {