Преглед изворни кода

多钱包首页点击进入游戏无弹窗bug

XianCH пре 6 месеци
родитељ
комит
752b79e5c3
2 измењених фајлова са 15 додато и 10 уклоњено
  1. 13 9
      src/components/Card/Card.tsx
  2. 2 1
      src/components/TipsModal/index.tsx

+ 13 - 9
src/components/Card/Card.tsx

@@ -5,9 +5,9 @@ import useGame from "@/hooks/useGame";
 import { useRouter } from "@/i18n/routing";
 import { useWalletStore } from "@/stores/useWalletStore";
 import { getToken } from "@/utils/Cookies";
-import { Button, Popup } from "antd-mobile";
+import { Button, CenterPopup, Popup } from "antd-mobile";
 import { useTranslations } from "next-intl";
-import { FC, PropsWithChildren, ReactNode, useRef, useState } from "react";
+import { FC, PropsWithChildren, ReactNode, useEffect, useRef, useState } from "react";
 import styles from "./style.module.scss";
 import { userInfoApi } from "@/api/login";
 import TipsModal, { ModalProps } from "../TipsModal";
@@ -30,6 +30,7 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
     const gameRef = useRef<GameListRep & { mode: GameRequest["mode"] } | null>(null);
 
     const [visible, setVisible] = useState(false);
+    const element = useRef<HTMLElement | null>(null);
 
     const router = useRouter();
     const token = getToken();
@@ -37,6 +38,9 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
         setVisible(true);
         brandRef.current = game;
     };
+    useEffect(() => {
+        element.current = document.getElementById("app");
+    }, []);
     const playGameHandler = async (game: GameListRep) => {
         if (!token) {
             router.push("/login?redirect=/");
@@ -140,16 +144,16 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
                         <div className={"flex w-[2.2rem] justify-around"}>
                             {/* 只是PG游戏展示demo试玩按钮 */}
                             {
-                               (item?.category_name === 'Pragmaticplay' || item?.category_name === 'PP') && <Button
-                                    onClick={() => playGameHandler({...item!, demo: 1})}
+                                (item?.category_name === 'Pragmaticplay' || item?.category_name === 'PP') && <Button
+                                    onClick={() => playGameHandler({ ...item!, demo: 1 })}
                                     className={
-                                    "h-[0.39rem] w-[0.89rem] rounded-[0.05rem] text-[0.15rem]" +
-                                    " bg-[#3a3a3a]" +
-                                    " font-bold"
+                                        "h-[0.39rem] w-[0.89rem] rounded-[0.05rem] text-[0.15rem]" +
+                                        " bg-[#3a3a3a]" +
+                                        " font-bold"
                                     }
                                 >
                                     {t("demo")}
-                                </Button> 
+                                </Button>
                             }
                             <Button
                                 onClick={() => playGameHandler(item!)}
@@ -166,7 +170,7 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
                 </Box>
             </Popup>
 
-            <TipsModal title={"Tips"} ref={gameModelRef}>
+            <TipsModal title={"Tips"} ref={gameModelRef} getContainer={element.current}>
                 <p className={"text-left text-[0.12rem] font-medium text-[#666]"}>
                     Há jogos inconclusos continuar o jogo
                 </p>

+ 2 - 1
src/components/TipsModal/index.tsx

@@ -5,6 +5,7 @@ import { forwardRef, PropsWithChildren, ReactNode, useImperativeHandle, useState
 type Props = {
     title?: string | ReactNode;
     onBeforeClose?: () => void;
+    getContainer?:any
 };
 export type ModalProps = {
     onClose: () => void;
@@ -20,7 +21,7 @@ const TipsModal = forwardRef<ModalProps, PropsWithChildren<Props>>(function Tips
         };
     });
     return (
-        <Mask visible={visible} onMaskClick={() => setVisible(false)}>
+        <Mask visible={visible} onMaskClick={() => setVisible(false)} getContainer={props?.getContainer}>
             <div className="flex h-[100dvh] h-[100vh] items-center justify-center">
                 <div className="mask-box w-[3.4rem] rounded-[10px] bg-[#fff] p-[0.1389rem] text-[#000]">
                     <div className={"mb-[10px] flex"}>