游戏弹窗

src/app/[locale]/(TabBar)/[[...share]]/_home/HomePrize.tsx

@@ -1,13 +1,22 @@
 "use client";
-import { gamesNoticeWinApi } from "@/api/home";
+import { gamesNoticeWinApi, GameListRep } from "@/api/home";
+import Box from "@/components/Box";
+import { Button, Popup } from "antd-mobile";
 import { useTranslations } from "next-intl";
 import { FC, useEffect, useState } from "react";
 import { Autoplay } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
+import { useRouter } from "@/i18n/routing";
+import { getToken } from "@/utils/Cookies";
+import { useWalletStore } from "@/stores/useWalletStore";
+import useGame from "@/hooks/useGame";
+import styles from "@/components/Card/style.module.scss";
+
 interface Props {}
 
 const HomePrize: FC<Props> = () => {
     const t = useTranslations("HomePage");
+    const tt = useTranslations("Game");
 
     const [winImg, setWinImg] = useState<any>([]);
     const gamesNoticeWinRequest = async () => {
@@ -20,6 +29,37 @@ const HomePrize: FC<Props> = () => {
         gamesNoticeWinRequest()
     }, [])
 
+    const [visible, setVisible] = useState(false);
+    const [gameInfo, setGameInfo] = useState({});
+    const handler = (game: GameListRep) => {
+        setVisible(true);
+        setGameInfo(game)
+        console.log(game)
+    };
+    
+    const router = useRouter();
+    const token = getToken();
+    const wallet = useWalletStore((state) => state.wallet);
+    const { getGameUrl } = useGame();
+    const playGameHandler = () => {
+        setVisible(true);
+        if (!token) {
+            router.push("/login?redirect=/");
+            return;
+        }
+        let groupType = 1;
+        if (groupType === 1 && Number(wallet.score) + wallet.point <= 0) {
+            router.push("/deposit");
+            return;
+        }
+
+        const params = {
+            id: gameInfo.id + "",
+            mode: groupType!,
+        };
+        getGameUrl(gameInfo, params);
+    };
+
     return (
         <div className={"my-[0.0694rem]"}>
             <div className={"mb-[0.0347rem]"}>{t("prize")}</div>
@@ -38,16 +78,64 @@ const HomePrize: FC<Props> = () => {
             >
                 {winImg.map((prize: any, index: number) => (
                     <SwiperSlide key={index}>
-                        <div className={"w-[1.1rem] bg-[#1c1e22]"}>
+                        <div className={"w-[1.1rem] bg-[#1c1e22]"} onClick={() => handler(prize)}>
                             <img className={"h-[1.54rem]"} src={prize.game_icon} alt="" />
                             <div className={"px-[0.13rem] pb-[0.0347rem] text-[0.13rem]"}>
-                                <p className={"text-[#98a7b5]"}>{prize.phone}</p>
+                                <p className={"text-[#98a7b5]"}>{prize.phone ? prize.phone.slice(0,3) + '*****' + prize.phone.slice(-3): ''}</p>
                                 <p className={"text-[#43c937]"}>R${prize.amount}</p>
                             </div>
                         </div>
                     </SwiperSlide>
                 ))}
             </Swiper>
+            <Popup
+                visible={visible}
+                onMaskClick={() => {
+                    setVisible(false);
+                }}
+                onClose={() => {
+                    setVisible(false);
+                }}
+                showCloseButton={true}
+                getContainer={() => document.querySelector("#app")!}
+                bodyStyle={{ background: "#1c1c1c" }}
+            >
+                <Box className={"w-1/1 flex w-[4.02rem] flex-1"}>
+                    <div className={styles.cardWrap} style={{ width: "1.1rem" }}>
+                        <img
+                            src={gameInfo?.game_icon}
+                            alt={gameInfo?.game_name_cn}
+                            className={"h-[100%] w-[100%]"}
+                        />
+                    </div>
+                    <div className={styles.cardWrapGmeInfo}>
+                        <p className={"h-[0.6rem]"}>{gameInfo?.game_name_cn}</p>
+
+                        <div className={"flex w-[2.2rem] justify-around"}>
+                            {/*<Button*/}
+                            {/*    onClick={playGameHandler}*/}
+                            {/*    className={*/}
+                            {/*        "h-[0.39rem] w-[0.89rem] rounded-[0.05rem] text-[0.15rem]" +*/}
+                            {/*        " bg-[#3a3a3a]" +*/}
+                            {/*        " font-bold"*/}
+                            {/*    }*/}
+                            {/*>*/}
+                            {/*    {t("demo")}*/}
+                            {/*</Button>*/}
+                            <Button
+                                onClick={playGameHandler}
+                                style={{
+                                    "--background-color": "#009d80",
+                                    "--border-color": "#009d80",
+                                }}
+                                className={`h-[0.39rem] w-[0.89rem] rounded-[0.05rem] bg-[#] text-[0.15rem] font-bold`}
+                            >
+                                {tt("join")}
+                            </Button>
+                        </div>
+                    </div>
+                </Box>
+            </Popup>
         </div>
     );
 };