feat: 游戏增加页内弹窗

src/api/customservice.ts

@@ -16,8 +16,11 @@ export interface ServiceTypes {
      * 跳转地址
      */
     url: string;
-    is_suspend: number;
-    register_show: number;
+    is_suspend: 1 | 2;
+    // 注册页显示
+    register_show: 1 | 2;
+    // 首页显示
+    status: 1 | 2;
 }
 export const getServicesApi = async () => {
     return server

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

@@ -35,7 +35,7 @@ const ServiceWidget: FC<Props> = (props) => {
     }));
     const defaultService = services?.find((item) => item.is_suspend === 1);
 
-    const newServices = services?.filter((item) => item.is_suspend !== 1) || [];
+    const newServices = services?.filter((item) => item.status === 1) || [];
     const setSocials = useSocialStore((state) => state.setSocials);
     const redPacketModalRef = useRef<RedPacketModalProps>(null);
 
@@ -131,7 +131,6 @@ const ServiceWidget: FC<Props> = (props) => {
         pollingWhenHidden: false,
     });
     const slotHandler = () => {
-        console.log(`🚀🚀🚀🚀🚀-> in Service.tsx on 147`, slots);
         slotsRef.current?.onOpen(slots);
     };
     return (

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

@@ -3,7 +3,6 @@ import Desktop from "@/components/Box/Desktop";
 import { server } from "@/utils/server";
 import HomeMessage from "../_home/HomeMessage";
 import HomePromotion from "../_home/HomePromotion";
-import ActivityMask from "./ActivityMask";
 const getPromotions = async () => {
     return server
         .request<PromotionRep[], { summery: { showType: 1 | 2 } }>({
@@ -42,9 +41,6 @@ const Page = async () => {
             />
             {/*安装弹窗*/}
             <Desktop source={"page"} />
-
-            {/*  */}
-            <ActivityMask />
         </>
     );
 };

src/app/[locale]/(TabBar)/[[...share]]/@popupWidget/style.module.scss

@@ -1,20 +0,0 @@
-
-.ActivityShadow {
-  font-weight: 900;
-  font-size: var(--font-size, 0.2778rem);
-  text-shadow: 0 1px 0 #fff;
-  color: #fbce72;
-  &::before {
-    content: attr(data-text);
-    font-weight: 900;
-    font-size: var(--font-size, 0.2778rem);
-    position: absolute;
-    z-index: 10;
-    background: linear-gradient(to bottom, #fbd68f, #ed7d03);
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-    text-shadow: none;
-  }
-
-}

src/app/[locale]/(wheel)/cashWheel/page.tsx

@@ -35,7 +35,7 @@ const getWheelApi = async () => {
 const CashWheel = async () => {
     const historyResult = await getAllHistoryApi();
     const phonesResult = await getPhoneNumbersApi();
-    const wheels = await getWheelApi();
+    await getWheelApi();
 
     return <CashWheelClient allHistory={historyResult.data} phones={phonesResult.data} />;
 };

src/app/[locale]/game/layout.tsx

@@ -0,0 +1,24 @@
+import HeaderBack from "@/components/HeaderBack";
+import { getTranslations } from "next-intl/server";
+import { ReactNode } from "react";
+export const generateMetadata = async () => {
+    const t = await getTranslations("titles");
+    return {
+        title: t("transactions"),
+    };
+};
+export default async function Layout({
+    children,
+    params: { locale },
+}: {
+    children: ReactNode;
+    params: { locale: string };
+}) {
+    const t = await getTranslations("Header");
+    return (
+        <>
+            <HeaderBack showBack={true} title={""} />
+            <main className={"main-header bg-[#282828]"}>{children}</main>
+        </>
+    );
+}

src/app/[locale]/game/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import ActivityMask from "@/components/Box/ActivityMask";
+import { useSearchParams } from "next/navigation";
+
+const Page = () => {
+    const searchParams = useSearchParams();
+    const url = decodeURIComponent(`${searchParams}`);
+
+    return (
+        <>
+            <div style={{ width: "100%", height: "100%" }}>
+                <iframe src={url} width={"100%"} height={"100%"}></iframe>
+            </div>
+
+            {/* 数千补偿 */}
+            <ActivityMask />
+        </>
+    );
+};
+
+export default Page;

src/app/[locale]/(TabBar)/[[...share]]/@popupWidget/ActivityMask.tsx → src/components/Box/ActivityMask.tsx

@@ -1,28 +1,57 @@
 "use client";
-import { useWalletStore } from "@/stores/useWalletStore";
+import { getUserMoneyApi } from "@/api/user";
+import { useRequest } from "ahooks";
 import { Mask } from "antd-mobile";
 import { motion } from "framer-motion";
-import { useEffect, useState } from "react";
-import styles from "./style.module.scss";
+import { useState } from "react";
+import styles from "./activityMask.module.scss";
 const ActivityMask = () => {
-    const [visible, setVisible] = useState<boolean>(false);
+    const [count, setCount] = useState<number>(0);
 
-    const wallet = useWalletStore((state) => state.wallet);
-    useEffect(() => {
-        if (wallet?.notice?.lose_score > 0) {
-            setVisible(true);
-        }
-    }, [wallet?.notice?.lose_score]);
+    // const wallet = useWalletStore((state) => state.wallet);
+    // useEffect(() => {
+    //     if (wallet?.notice?.lose_score > 0) {
+    //         setVisible(true);
+    //     }
+    // }, [wallet?.notice?.lose_score]);
+
+    const { run, cancel } = useRequest(getUserMoneyApi, {
+        pollingInterval: 5000,
+        pollingWhenHidden: true,
+        pollingErrorRetryCount: 3,
+        staleTime: 5000,
+        onError: (error) => {},
+        onSuccess: (res) => {
+            if (res.data.notice.lose_score > 0) {
+                setCount(res.data.notice.lose_score);
+                cancel();
+            }
+        },
+    });
 
     return (
-        <Mask visible={visible} destroyOnClose={true} getContainer={null}>
+        <Mask
+            visible={!!count}
+            destroyOnClose={true}
+            getContainer={null}
+            onMaskClick={() => {
+                setCount(0);
+                run();
+            }}
+        >
             {/*<div*/}
             {/*    className={"absolute right-[0.2083rem] top-[20%] z-50"}*/}
             {/*    onClick={() => setVisible(false)}*/}
             {/*>*/}
             {/*    <span className={"iconfont icon-guanbi"}></span>*/}
             {/*</div>*/}
-            <div className={"absolute top-[18%] z-50 w-[100%]"} onClick={() => setVisible(false)}>
+            <div
+                className={"absolute top-[18%] z-50 w-[100%]"}
+                onClick={() => {
+                    setCount(0);
+                    run();
+                }}
+            >
                 <div className={"relative flex h-[4.4653rem] w-[100%] justify-center"}>
                     <img
                         alt={""}
@@ -78,9 +107,9 @@ const ActivityMask = () => {
                                 className={`${styles.ActivityShadow} -mt-[0.1389rem]`}
                                 // @ts-ignore
                                 style={{ "--font-size": "0.4167rem" }}
-                                data-text={`R$${wallet?.notice?.lose_score}`}
+                                data-text={`R$${count}`}
                             >
-                                R${wallet?.notice?.lose_score}
+                                R${count}
                             </div>
                         </div>
 

src/components/Box/activityMask.module.scss

@@ -0,0 +1,20 @@
+
+.ActivityShadow {
+  font-weight: 900;
+  font-size: var(--font-size, 0.2778rem);
+  text-shadow: 0 1px 0 #fff;
+  color: #fbce72;
+  &::before {
+    content: attr(data-text);
+    font-weight: 900;
+    font-size: var(--font-size, 0.2778rem);
+    position: absolute;
+    z-index: 10;
+    background: linear-gradient(to bottom, #fbd68f, #ed7d03);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: none;
+  }
+
+}

src/components/Card/Card.tsx

@@ -56,7 +56,8 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
                 Toast.clear();
                 if (res.data && res.data.game_url) {
                     const url = `${res.data?.game_url}&brand=${brandRef.current}&return_url=${process.env.NEXT_PUBLIC_SHARE_URL}`;
-                    window.open(url);
+                    // window.open(url);
+                    router.push(`/game?${url}`);
                 } else {
                     Toast.show(tcode("code.500"));
                 }