Browse Source

feat: 修改弹窗相关

year 2 months ago
parent
commit
cf0ae7cfab

+ 3 - 0
src/api/home.ts

@@ -261,6 +261,9 @@ export interface NoticeRep {
 }
 export interface PromotionRep extends Omit<BannerRep, "content"> {
     content: Content;
+    activity_id: number;
+    pop_type: 1 | 2 | 3; //1一天一次;2登录弹出;3返回大厅弹出
+    content_type: 1 | 2 | 3; //1图片,2文本,3方法
 }
 
 export type SearchProps = {

+ 3 - 2
src/app/[locale]/(TabBar)/[[...share]]/@actionWidget/Dialog.tsx

@@ -1,7 +1,7 @@
 import DialogImg from "@/dialog/img";
 import DialogPay from "@/dialog/pay";
-import DialogPromation from "@/dialog/promotion";
 import DialogSign from "@/dialog/sign";
+import DialogText from "@/dialog/text";
 import DialogWheel from "@/dialog/wheel";
 
 const Dialogs = () => {
@@ -11,7 +11,8 @@ const Dialogs = () => {
             <DialogSign></DialogSign>
             <DialogPay></DialogPay>
             <DialogImg></DialogImg>
-            <DialogPromation></DialogPromation>
+            <DialogText></DialogText>
+            {/* <DialogPromation></DialogPromation> */}
         </>
     );
 };

+ 1 - 1
src/app/[locale]/(doings)/continuous/page.tsx

@@ -256,7 +256,7 @@ const Page = () => {
                 activity_id: Number(query.activity_id),
                 id: data.days,
             });
-            debugger;
+
             if (res.code === 200 && res?.data?.code === 1) {
                 const amountObj: any = {};
                 if (res?.data?.reward) {

+ 20 - 0
src/app/[locale]/(doings)/rechargeproxy/layout.tsx

@@ -0,0 +1,20 @@
+import HeaderBack from "@/components/HeaderBack";
+import { getTranslations } from "next-intl/server";
+import { ReactNode } from "react";
+import styles from "./page.module.scss";
+
+export default async function Layout({
+    children,
+    params: { locale },
+}: {
+    children: ReactNode;
+    params: { locale: string };
+}) {
+    const t = await getTranslations("Header");
+    return (
+        <div className={styles.page}>
+            <HeaderBack showBack={true} title={"Bónus Misterioso"} useBg={true} />
+            <main className={"main-header"}>{children}</main>
+        </div>
+    );
+}

+ 7 - 0
src/app/[locale]/(doings)/rechargeproxy/page.module.scss

@@ -0,0 +1,7 @@
+.page {
+    height: 100%;
+}
+.rechargeProxyPage {
+    height: 100%;
+    overflow: auto;
+}

+ 14 - 0
src/app/[locale]/(doings)/rechargeproxy/page.tsx

@@ -0,0 +1,14 @@
+"use client";
+import clsx from "clsx";
+import React from "react";
+import styles from "./page.module.scss";
+
+const RechargeProxy: React.FC = () => {
+    return (
+        <div className={clsx(styles.rechargeProxyPage)}>
+            <div>2323</div>
+        </div>
+    );
+};
+
+export default RechargeProxy;

+ 66 - 6
src/dialog/auto.ts

@@ -1,10 +1,26 @@
 "use client";
-
+import { PromotionRep } from "@/api/home";
+import { server } from "@/utils/client";
+import { getToken } from "@/utils/Cookies";
+import dayjs from "dayjs";
 import React from "react";
 import dialogManage from "./manager";
 
+//"ImgDialog","WheelSection", "SignInSection", "HomePromotion", "TextDialog"
+
+const getPromotions = async () => {
+    return server
+        .request<PromotionRep[], { summery: { showType: 1 | 2 } }>({
+            url: "/v1/api/front/pop_list",
+            method: "POST",
+        })
+        .then((res) => {
+            if (res.code === 200) return res;
+        });
+};
+
 const AutoShowDialog = () => {
-    const [data, setData] = React.useState<string[]>([]);
+    const [data, setData] = React.useState<PromotionRep[]>([]);
 
     React.useEffect(() => {
         getData();
@@ -18,18 +34,62 @@ const AutoShowDialog = () => {
     }, [data]);
 
     const getData = async () => {
-        //"ImgDialog",
-        setData(["WheelSection", "SignInSection", "HomePromotion"]);
+        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);
+        }
+    };
+    const checkIsShowed = (data: PromotionRep) => {
+        const showTime = localStorage.getItem(`dialog_${data.id}`);
+        if (showTime) {
+            const nextDay = dayjs(Number(showTime)).add(1, "day").format("YYYY-MM-DD");
+            if ((dayjs(nextDay).isAfter(dayjs()), "day")) {
+                return true;
+            }
+        }
+        return false;
     };
     const doShow = async () => {
+        //记录点击的索引
         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);
+            const curData = data[i];
+            // 一天只展示一次
+            if (curData.pop_type === 1 && checkIsShowed(curData)) continue;
+            // 未登录的用户不展示
+            if (curData.pop_type === 2 && !getToken()) continue;
+
+            try {
+                switch (curData.content_type) {
+                    // 图片展示
+                    case 1:
+                        await dialogManage.showDialog("ImgDialog", curData);
+                        break;
+                    // 富文本展示
+                    case 2:
+                        await dialogManage.showDialog("TextDialog", curData);
+                        break;
+                    // 直接调用方法
+                    case 3:
+                        curData?.action_params ? await eval(curData?.action_params || "") : "";
+                        break;
+                }
+            } catch {
+                continue;
+            }
+            // 一天只展示一次
+            if (curData.pop_type === 1) {
+                localStorage.setItem(`dialog_${curData.id}`, Date.now().toString());
+            }
+            // 记录当前展示到几个了
             sessionStorage.setItem("dialogShow", `${i + 1}`);
         }
     };

+ 18 - 1
src/dialog/img/index.tsx

@@ -32,13 +32,30 @@ const ImgDialog = () => {
     const close = () => {
         dialogManage.hideDialog(keyName);
     };
+    //点击功能, 1:无功能,2:跳转外部链接,3:跳转页面,4:跳转弹窗,5:跳转打开游戏,6:跳转Live Chat客服,7:跳转内部文档
+    const doFun = () => {
+        switch (data.action_type) {
+            case 2:
+                window.open(data.action_params, "_blank");
+                break;
+            case 3:
+                let path = data.action_params;
+                if (data.activity_id) {
+                    path = `${data.action_params}?activity_id=${data.activity_id}`;
+                }
+                router.push(path);
+                break;
+            default:
+                break;
+        }
+    };
 
     return (
         <>
             <Mask visible={visible} onMaskClick={close}>
                 <div className={styles.imgDialog}>
                     <div className={styles.imgDialogContainer}>
-                        <img src={data.imgUrl} alt="" onClick={() => router.push("/deposit")} />
+                        <img src={data?.content?.image} alt="" onClick={doFun} />
                         <div className={clsx(styles.close)} onClick={close}>
                             <i
                                 className={clsx("iconfont icon-guanbi relative z-10 text-[.14rem]")}

+ 2 - 0
src/dialog/manager.ts

@@ -47,5 +47,7 @@ class DialogManage {
 }
 
 const dialogManage = new DialogManage();
+// 为 Window 类型添加自定义属性 dialogManage
 
+global.dialogManage = dialogManage;
 export default dialogManage;

+ 6 - 2
src/dialog/sign/index.tsx

@@ -56,11 +56,15 @@ const SignInSection: FC = () => {
         dialogManager.registerDialog({
             key: keyName,
             show() {
-                if (!checkIsShowed() && getToken()) {
-                    localStorage.setItem("sign", Date.now().toString());
+                if (getToken()) {
                     SignInRef?.current?.onOpen();
                     return;
                 }
+                // if (!checkIsShowed() && getToken()) {
+                //     localStorage.setItem("sign", Date.now().toString());
+                //     SignInRef?.current?.onOpen();
+                //     return;
+                // }
                 return "close";
             },
         });

+ 41 - 0
src/dialog/text/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%;
+    }
+}

+ 71 - 0
src/dialog/text/index.tsx

@@ -0,0 +1,71 @@
+"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 = "TextDialog"; // 确保这个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(handler);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const close = () => {
+        dialogManage.hideDialog(keyName);
+    };
+    //点击功能, 1:无功能,2:跳转外部链接,3:跳转页面,4:跳转弹窗,5:跳转打开游戏,6:跳转Live Chat客服,7:跳转内部文档
+    const doFun = () => {
+        switch (data.action_type) {
+            case 2:
+                window.open(data.action_params, "_blank");
+                break;
+            case 3:
+                let path = data.action_params;
+                if (data.activity_id) {
+                    path = `${data.action_params}?activity_id=${data.activity_id}`;
+                }
+                router.push(path);
+                break;
+            default:
+                break;
+        }
+    };
+
+    return (
+        <>
+            <Mask visible={visible} onMaskClick={close}>
+                <div className={styles.imgDialog}>
+                    <div className={styles.imgDialogContainer}>
+                        <img src={data?.content?.image} alt="" onClick={doFun} />
+                        <div className={clsx(styles.close)} onClick={close}>
+                            <i
+                                className={clsx("iconfont icon-guanbi relative z-10 text-[.14rem]")}
+                            ></i>
+                        </div>
+                    </div>
+                </div>
+            </Mask>
+        </>
+    );
+};
+
+export default ImgDialog;

+ 7 - 0
src/types/global.d.ts

@@ -12,6 +12,13 @@ declare global {
     }
 
     namespace window {}
+
+    var dialogManage: DialogManage;
+}
+declare global {
+    interface Window {
+        dialogManage: DialogManage;
+    }
 }
 
 export {};