feat: 修改对接弹窗各类型数据

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

@@ -1,5 +1,7 @@
 import DialogImg from "@/dialog/img";
 import DialogPay from "@/dialog/pay";
+import DialogPwaInstall from "@/dialog/pwaInstall";
+import DialogRedPacket from "@/dialog/redPacket";
 import DialogSign from "@/dialog/sign";
 import DialogText from "@/dialog/text";
 import DialogWheel from "@/dialog/wheel";
@@ -12,6 +14,8 @@ const Dialogs = () => {
             <DialogPay></DialogPay>
             <DialogImg></DialogImg>
             <DialogText></DialogText>
+            <DialogRedPacket></DialogRedPacket>
+            <DialogPwaInstall></DialogPwaInstall>
             {/* <DialogPromation></DialogPromation> */}
         </>
     );

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

@@ -147,7 +147,7 @@ const SignIn: FC = () => {
                     />
                     {/* 免费盒子 */}
                     <div className="mt-[0.4227rem]">
-                        <BoxListCom type="page" />
+                        <BoxListCom type="page" onClaim={doClaim} />
                     </div>
                     {/* 充值盒子 */}
                     {/* <div className="h-[1.3273rem]">

src/components/ModalPopup/RedPacketModal/index.tsx

@@ -6,6 +6,7 @@ import { getToken } from "@/utils/Cookies";
 import { Mask, Toast } from "antd-mobile";
 import { useTranslations } from "next-intl";
 import { FC, forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
+
 const randomX = (len: number) => {
     return Math.floor(Math.random() * len);
 };
@@ -144,12 +145,18 @@ const PacketEndDetail: FC<Omit<PacketDetailsProps, "onReciveRed" | "redAmount">>
                         </div>
                     </div>
 
-                    <div className={"absolute left-0  top-[37%] right-0  flex justify-center" }>
-                      <div className={'  text-[#ffffe3] text-center w-[1.6667rem] h-[0.5556rem]' +
-                        ' bg-[url(/redpacket/bet-bg.png)] bg-no-repeat bg-contain  flex' +
-                        ' justify-center '}>
-                        <p className={'font-black text-[0.2083rem] mt-[0.0694rem]'}>{packet?.times?.length ?? 0}X Por dia</p>
-                      </div>
+                    <div className={"absolute left-0 right-0 top-[37%] flex justify-center"}>
+                        <div
+                            className={
+                                "h-[0.5556rem] w-[1.6667rem] text-center text-[#ffffe3]" +
+                                " flex bg-[url(/redpacket/bet-bg.png)] bg-contain bg-no-repeat" +
+                                " justify-center"
+                            }
+                        >
+                            <p className={"mt-[0.0694rem] text-[0.2083rem] font-black"}>
+                                {packet?.times?.length ?? 0}X Por dia
+                            </p>
+                        </div>
                     </div>
 
                     <div

src/components/ModalPopup/SignInModal/index.tsx

@@ -18,12 +18,13 @@ export interface SignInModalProps {
 interface BoxParams {
     startDays?: number;
     type?: "page" | "modal";
+    onClaim: () => void;
 }
 interface BoxList {
     handleOpening: (index: number) => void;
 }
 export const BoxListCom = forwardRef<BoxList, BoxParams>(function BoxListCom(
-    { startDays = 1, type = "modal" }: BoxParams,
+    { startDays = 1, type = "modal", onClaim }: BoxParams,
     ref
 ) {
     const signData = useSignStore((state) => state.signData);
@@ -39,13 +40,29 @@ export const BoxListCom = forwardRef<BoxList, BoxParams>(function BoxListCom(
             handleOpening,
         };
     });
+
+    const doClick = (item: any, idx: number) => {
+        if (
+            !item.is_suss &&
+            signData.cur_num === idx &&
+            signData.is_op &&
+            typeof onClaim === "function"
+        ) {
+            onClaim();
+        }
+    };
+
     return (
         <>
             <div className={`w-[100%] ${type === "page" ? styles.page : styles.modal}`}>
                 <div className="flex h-[100%] w-[100%] flex-wrap justify-start">
                     {signData?.list?.map((item, index) => {
                         return (
-                            <div className="h-[100%] w-[20%]" key={index}>
+                            <div
+                                className="h-[100%] w-[20%]"
+                                key={index}
+                                onClick={() => doClick(item, index)}
+                            >
                                 <div className="h-[100%] w-[100%]">
                                     <div
                                         className={`relative text-center ${styles.text} text-[white]`}
@@ -321,7 +338,7 @@ const SignInModal = forwardRef(function SignInModal(props: SignInModalProps1, re
                                         <div className="absolute left-0 top-0 w-[100%]">
                                             <div className="relative mt-[0.51rem] w-[100%]">
                                                 <div className="max-h-[3rem] overflow-auto">
-                                                    <BoxListCom ref={boxRef} />
+                                                    <BoxListCom ref={boxRef} onClaim={doClaim} />
                                                 </div>
 
                                                 <div

src/dialog/auto.ts

@@ -36,9 +36,6 @@ const AutoShowDialog = () => {
     const getData = async () => {
         const res = await getPromotions();
         if (res?.code === 200 && res?.data?.length) {
-            // res.data[0].content_type = 3;
-            // res.data[0].action_params = 'dialogManage.showDialog("SignInSection")';
-            // res.data[0].pop_type = 1;
             setData(res.data);
         }
     };
@@ -59,13 +56,18 @@ const AutoShowDialog = () => {
         if (startShow > data.length - 1) {
             startShow = 0;
         }
-
         for (let i = startShow; i < data.length; i++) {
             const curData = data[i];
             // 一天只展示一次
-            if (curData.pop_type === 1 && checkIsShowed(curData)) continue;
+            if (curData.pop_type === 1 && checkIsShowed(curData)) {
+                sessionStorage.setItem("dialogShow", `${i + 1}`);
+                continue;
+            }
             // 未登录的用户不展示
-            if (curData.pop_type === 2 && !getToken()) continue;
+            if (curData.pop_type === 2 && !getToken()) {
+                sessionStorage.setItem("dialogShow", `${i + 1}`);
+                continue;
+            }
 
             try {
                 switch (curData.content_type) {
@@ -77,12 +79,14 @@ const AutoShowDialog = () => {
                     case 2:
                         await dialogManage.showDialog("TextDialog", curData);
                         break;
-                    // 直接调用方法
                     case 3:
-                        curData?.action_params ? await eval(curData?.action_params || "") : "";
+                        if (curData.action_type === 5) {
+                            curData?.action_params ? await eval(curData?.action_params || "") : "";
+                        }
                         break;
                 }
-            } catch {
+            } catch (err) {
+                sessionStorage.setItem("dialogShow", `${i + 1}`);
                 continue;
             }
             // 一天只展示一次

src/dialog/img/index.module.scss

@@ -34,6 +34,7 @@
             border-radius: 0.4rem;
         }
     }
+
     img {
         width: 100%;
         height: 100%;

src/dialog/img/index.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { ModalEnum } from "@/components/Box/types";
 import { useRouter } from "@/i18n/routing";
 import { Mask } from "antd-mobile";
 import clsx from "clsx";
@@ -32,8 +33,7 @@ const ImgDialog = () => {
     const close = () => {
         dialogManage.hideDialog(keyName);
     };
-    //点击功能, 1:无功能,2:跳转外部链接,3:跳转页面,4:跳转弹窗,5:跳转打开游戏,6:跳转Live Chat客服,7:跳转内部文档
-    const doFun = () => {
+    const doFun = async () => {
         switch (data.action_type) {
             case 2:
                 window.open(data.action_params, "_blank");
@@ -43,7 +43,18 @@ const ImgDialog = () => {
                 if (data.activity_id) {
                     path = `${data.action_params}?activity_id=${data.activity_id}`;
                 }
-                router.push(path);
+                if (path) router.push(path);
+                break;
+            case 4:
+                if (data.action_params === ModalEnum.red_packet) {
+                    dialogManage.showDialog("RedPacket");
+                }
+                if (data.action_params === ModalEnum.pwa_install) {
+                    dialogManage.showDialog("PwaInstall");
+                }
+                break;
+            case 5:
+                data?.action_params ? await eval(data?.action_params || "") : "";
                 break;
             default:
                 break;

src/dialog/manager.ts

@@ -6,10 +6,10 @@ interface RegisterParams {
 
 class DialogManage {
     private _dialogs: Map<string, RegisterParams>; // 存储所有的dialogManage
-    private _resolve: Function | null; // 存储当前的resolve函数
+    private _resolves: Map<string, Function>;
     constructor() {
         this._dialogs = new Map();
-        this._resolve = null;
+        this._resolves = new Map();
     }
 
     registerDialog({ key, show, hide }: RegisterParams) {
@@ -25,13 +25,16 @@ class DialogManage {
     showDialog(key: string, ...args: any[]) {
         return new Promise((resolve) => {
             const dialog = this._dialogs.get(key);
-            this._resolve = resolve;
+
             if (dialog?.show) {
                 const res = dialog.show(...args);
-                if (res === "close") return resolve("close");
+                if (res === "close") {
+                    return resolve("close");
+                }
+                this._resolves.set(key, resolve);
             } else {
                 console.error(`Dialog with key ${key} not found`);
-                this._resolve("error");
+                resolve("error");
             }
         });
     }
@@ -42,7 +45,11 @@ class DialogManage {
         } else {
             console.error(`Dialog with key ${key} not found`);
         }
-        if (this._resolve) this._resolve("close");
+        let resolveFun = this._resolves.get(key);
+        if (resolveFun && typeof resolveFun === "function") {
+            resolveFun("close");
+            this._resolves.delete(key);
+        }
     }
 }
 

src/dialog/pwaInstall/index.tsx

@@ -0,0 +1,21 @@
+"use client";
+import DesktopModal, { DesktopRefProps } from "@/components/ModalPopup/DesktopModal";
+import React from "react";
+import dialogManage from "../manager";
+
+const PwaInstall = () => {
+    const pwaModalRef = React.useRef<DesktopRefProps>(null);
+
+    React.useEffect(() => {
+        dialogManage.registerDialog({
+            key: "PwaInstall",
+            show() {
+                pwaModalRef?.current?.onOpen();
+            },
+        });
+    }, []);
+
+    return <DesktopModal ref={pwaModalRef} source={"components"} />;
+};
+
+export default PwaInstall;

src/dialog/redPacket/index.tsx

@@ -0,0 +1,45 @@
+"use client";
+import { lredPacketApi, redPacketApi } from "@/api/promo";
+import RedPacketModal, { RedPacketModalProps } from "@/components/ModalPopup/RedPacketModal";
+import { getToken } from "@/utils/Cookies";
+import React from "react";
+import dialogManage from "../manager";
+
+const isStartPacketsHandler = async () => {
+    let packets = [];
+    if (getToken()) {
+        let redPacketInfo = await lredPacketApi();
+        packets = redPacketInfo.data?.red_packets || [];
+    } else {
+        let redPacketInfo = await redPacketApi();
+        packets = redPacketInfo.data || [];
+    }
+    return packets;
+};
+
+const RedPacket = () => {
+    const packetModalRef = React.useRef<RedPacketModalProps>(null);
+    const [data, setData] = React.useState<any>([]);
+
+    React.useEffect(() => {
+        isStartPacketsHandler().then((data) => {
+            setData(data);
+        });
+    }, []);
+    React.useEffect(() => {
+        dialogManage.registerDialog({
+            key: "RedPacket",
+            show() {
+                packetModalRef?.current?.onOpen(data);
+            },
+        });
+    }, [data]);
+
+    return (
+        <>
+            <RedPacketModal ref={packetModalRef} />
+        </>
+    );
+};
+
+export default RedPacket;

src/dialog/text/index.module.scss

@@ -34,8 +34,17 @@
             border-radius: 0.4rem;
         }
     }
-    img {
+    .textBox {
         width: 100%;
         height: 100%;
+        overflow: auto;
+        word-break: break-all;
+        color: #fff;
+        padding: 0.1rem;
+        box-sizing: border-box;
+        padding-top: 0.2rem;
+        img {
+            max-width: 100%;
+        }
     }
 }

src/dialog/text/index.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { ModalEnum } from "@/components/Box/types";
 import { useRouter } from "@/i18n/routing";
 import { Mask } from "antd-mobile";
 import clsx from "clsx";
@@ -33,7 +34,7 @@ const ImgDialog = () => {
         dialogManage.hideDialog(keyName);
     };
     //点击功能, 1:无功能,2:跳转外部链接,3:跳转页面,4:跳转弹窗,5:跳转打开游戏,6:跳转Live Chat客服,7:跳转内部文档
-    const doFun = () => {
+    const doFun = async () => {
         switch (data.action_type) {
             case 2:
                 window.open(data.action_params, "_blank");
@@ -45,6 +46,17 @@ const ImgDialog = () => {
                 }
                 router.push(path);
                 break;
+            case 4:
+                if (data.action_params === ModalEnum.red_packet) {
+                    dialogManage.showDialog("RedPacket");
+                }
+                if (data.action_params === ModalEnum.pwa_install) {
+                    dialogManage.showDialog("PwaInstall");
+                }
+                break;
+            case 5:
+                data?.action_params ? await eval(data?.action_params || "") : "";
+                break;
             default:
                 break;
         }
@@ -55,7 +67,11 @@ const ImgDialog = () => {
             <Mask visible={visible} onMaskClick={close}>
                 <div className={styles.imgDialog}>
                     <div className={styles.imgDialogContainer}>
-                        <img src={data?.content?.image} alt="" onClick={doFun} />
+                        <div
+                            dangerouslySetInnerHTML={{ __html: data?.content?.text }}
+                            className={styles.textBox}
+                            onCanPlay={doFun}
+                        ></div>
                         <div className={clsx(styles.close)} onClick={close}>
                             <i
                                 className={clsx("iconfont icon-guanbi relative z-10 text-[.14rem]")}