ソースを参照

fix: 修改红包雨

Before 6 ヶ月 前
コミット
4bdaef860d

+ 3 - 6
.env.local

@@ -1,11 +1,7 @@
-# 环境
 #baseurl
-# NEXT_PUBLIC_BASE_URL=http://192.168.0.71:8800
-NEXT_PUBLIC_BASE_URL=http://192.168.0.84:8800
-#NEXT_PUBLIC_BASE_URL=https://3rd-api.tiktokjakjkl.icu
+NEXT_PUBLIC_BASE_URL=https://3rd-api.tiktokjakjkl.icu
 #share link
-NEXT_PUBLIC_SHARE_URL=http://192.168.0.84:3000
-
+NEXT_PUBLIC_SHARE_URL=https://3rd-site.tiktokjakjkl.icu
 #firebase
 NEXT_PUBLIC_FIREBASE_APIKEY=AIzaSyDAWORGKhdyzb5KeqTi535VmD5gN2Cdle8
 NEXT_PUBLIC_FIREBASE_AUTHDOMAIN=bcwin-a99b1.firebaseapp.com
@@ -15,3 +11,4 @@ NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID=1055413612814
 NEXT_PUBLIC_FIREBASE_APPID=1:1055413612814:web:7a563237de8e43849d275f
 NEXT_PUBLIC_FIREBASE_MEASUREMENTID=G-467M2BYJMS
 NEXT_PUBLIC_FIREBASE_KEYS=BAOsT7kii-ctLzGrgXe_wYhfuxlme1v4njnD0uPSKp3DpSnrUa2e709b9dRaeYVU7jF_qIx1y9tEv0CvilDCdnM
+

+ 2 - 2
.env.production

@@ -1,7 +1,7 @@
 #baseurl
-NEXT_PUBLIC_BASE_URL=https://api.bcwin777.bet
+NEXT_PUBLIC_BASE_URL=https://api.bcwin777.com
 #share link
-NEXT_PUBLIC_SHARE_URL=https://bcwin777.bet
+NEXT_PUBLIC_SHARE_URL=https://bcwin777.com
 
 #firebase
 NEXT_PUBLIC_FIREBASE_APIKEY=AIzaSyCIE8xtySsYztsSgmQJx_aqPrrpHEuvgvw

BIN
public/redpacket/isReceiveBg.png


BIN
public/redpacket/isStartBg.png


+ 25 - 7
src/app/[locale]/game/page.tsx

@@ -14,6 +14,8 @@ const Page = () => {
             router.push("/");
         }
     };
+    const [game_url, setGameUrl] = useState<string | null>();
+    console.log(`🚀🚀🚀🚀🚀-> in page.tsx on 18`, game_url);
     useEffect(() => {
         // @ts-ignore
         window.quit = () => {
@@ -29,6 +31,8 @@ const Page = () => {
     useEffect(() => {
         const parmas: any = new URLSearchParams(url);
         setCategoryName(parmas.get("category_name"));
+
+        setGameUrl(sessionStorage.getItem("game_url"));
     }, [url]);
     const goBlack = () => {
         router.push("/");
@@ -48,13 +52,27 @@ const Page = () => {
     return (
         <>
             <div style={{ width: "100%", height: "100%", backgroundColor: "#000" }}>
-                <iframe
-                    id="iframe_game"
-                    src={url}
-                    width={"100%"}
-                    height={"100%"}
-                    style={{ paddingBottom: ".5rem" }}
-                ></iframe>
+                {game_url ? (
+                    <>
+                        <iframe
+                            srcDoc={game_url}
+                            width={"100%"}
+                            height={"100%"}
+                            style={{ paddingBottom: ".5rem" }}
+                        ></iframe>
+                    </>
+                ) : (
+                    <>
+                        <iframe
+                            id="iframe_game"
+                            src={url}
+                            width={"100%"}
+                            height={"100%"}
+                            style={{ paddingBottom: ".5rem" }}
+                        ></iframe>
+                    </>
+                )}
+
                 {/* 真人游戏添加关闭按钮 */}
                 {showClose && ["evolution", "PG"].includes(categoryName) && (
                     <div

+ 1 - 1
src/components/Layout/Sidebar.tsx

@@ -54,7 +54,7 @@ const Sidebar: FC<PropsWithChildren<Props>> = (props) => {
                     router.push("/promo");
                     break;
                 case 4:
-                    router.push("/promo");
+                    router.push("/deposit");
                     break;
             }
             // 关闭侧边栏按钮

+ 168 - 76
src/components/ModalPopup/RedPacketModal/index.tsx

@@ -4,10 +4,8 @@ import { receiveRedPacketApi } from "@/api/promo";
 import { useRouter } from "@/i18n/routing";
 import { getToken } from "@/utils/Cookies";
 import { Mask } from "antd-mobile";
-import clsx from "clsx";
 import { useTranslations } from "next-intl";
 import { FC, forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
-import styles from "./style.module.scss";
 const randomX = (len: number) => {
     return Math.floor(Math.random() * len);
 };
@@ -37,8 +35,79 @@ type DescProps = {
     onClose: () => void;
 };
 
-const HbyInfoDetail = (props: any) => {
-    const { iconImg, onCloseHby } = props;
+export interface RedPacketTypes {
+    countdown: number;
+    /**
+     * 活动结束时间戳
+     */
+    end_time: number;
+
+    /**
+     * 活动详情图片
+     */
+    icon: string;
+    /**
+     * 活动ID
+     */
+    id: number;
+    /**
+     * 红包索引
+     */
+    index: number;
+    /**
+     * 是否能领取
+     */
+    can_receive: boolean;
+    /**
+     * 是否领取
+     */
+    is_receive: boolean;
+    /**
+     *  是否开始
+     */
+    is_start: boolean;
+    /**
+     * 红包详情
+     */
+    rewards: Reward[];
+    /**
+     * 活动开始时间戳
+     */
+    start_time: number;
+    /**
+     * 显示时间
+     */
+    time_string: string;
+    times: string[];
+}
+
+export interface Reward {
+    /**
+     * 红包等级
+     */
+    level: number;
+    max_amount: number;
+    max_vip: number;
+    min_amount: number;
+    min_vip: number;
+    multiple: number;
+    /**
+     * 红包名称
+     */
+    name: string;
+    total: number;
+}
+
+interface PacketDetailsProps {
+    packet: RedPacketTypes;
+    iconImg: string;
+    onCloseHby: () => void;
+    onReciveRed: () => void;
+    redAmount: number;
+}
+/// 红包详情
+const PacketEndDetail: FC<Omit<PacketDetailsProps, "onReciveRed" | "redAmount">> = (props) => {
+    const { iconImg, onCloseHby, packet } = props;
     const router = useRouter();
     const token = getToken();
     const handler = () => {
@@ -47,13 +116,12 @@ const HbyInfoDetail = (props: any) => {
         }
         onCloseHby();
     };
-    const str = "12:00".split("");
-
+    const str = packet.time_string.split("");
     return (
-        <div className={`absolute h-[100%] w-[100%]`} onClick={onCloseHby}>
+        <div className={`absolute h-[100%] w-[100%]`} onClick={handler}>
             <div className={"flex h-[100%] w-[100%] items-center"}>
                 <div className={"relative h-[6.2rem] w-[100%]"}>
-                    <img className={"h-[6.2rem] w-[100%]"} src="/redpacket/isEndBg.png" alt="" />
+                    <img className={"h-[6.2rem] w-[100%]"} src={iconImg} alt="" />
                     {/* 下一场开始时间*/}
                     <div className={"absolute top-[27%] w-[100%]"}>
                         <div className={"relative h-[0.4306rem] border-primary-color"}>
@@ -77,76 +145,93 @@ const HbyInfoDetail = (props: any) => {
 
                     <div
                         className={
-                            "absolute top-[53%] h-[0.6944rem] w-[100%] px-[0.5556rem]" +
-                            " overflow-scroll border-primary-color text-primary-color"
+                            "absolute top-[53%] h-[0.6944rem] w-[100%] px-[0.6944rem]" +
+                            " grid grid-cols-3 overflow-scroll border-primary-color" +
+                            " text-[18px] text-[red]"
                         }
-                    ></div>
+                    >
+                        {packet.times.map((time, parentIndex) => {
+                            return (
+                                <div key={parentIndex} className={""}>
+                                    {time}
+                                </div>
+                            );
+                        })}
+                    </div>
                 </div>
             </div>
         </div>
     );
 };
 
-const HbyInfo = (props: any) => {
-    const { iconImg, onCloseHby, onReciveRed } = props;
-    if (!iconImg) return;
+const PacketStartDetail: FC<Omit<PacketDetailsProps, "redAmount">> = (props) => {
+    const { iconImg, onCloseHby, onReciveRed, packet } = props;
+    const maxCount = packet.rewards
+        .reduce((p, n) => (p > n.max_amount ? p : n.max_amount), 0)
+        .toFixed(2);
     return (
-        <div
-            className={`absolute left-1/2 top-[50%] -translate-x-1/2 -translate-y-1/2 ${styles.redclose}`}
-        >
-            {/* <Image src={"/hby/close.png"} alt={"close"} width={20} height={20} onClick={onCloseHby} className={styles.closeIcon}/> */}
-            <div onClick={onCloseHby} className={styles.closeIcon}></div>
-            <img
-                src={iconImg}
-                alt={"icon"}
-                width={559}
-                height={687}
-                onClick={onReciveRed}
-                className={styles.redIcon}
-            />
-            {/* <div className={styles.title}>Chuva de dinheiro</div>
-      <div className={styles.desc}>
-        <ul className={styles.desclist}>
-          <li className={styles.descitem}>  Membros recarregados podem reivindicar gratuitamente. </li>
-          <div className={styles.line}></div>
-          <li className={styles.descitem}> Valor máximo de queda em dinheiro: R$7.777 </li>
-        </ul>
-      </div>
-      <div className={styles.openBtn} onClick={onReciveRed}>AGARRAR</div> */}
+        <div className={`absolute h-[100%] w-[100%]`} onClick={onCloseHby}>
+            <div className={"flex h-[100%] w-[100%]"}>
+                <div className={"relative h-[6.25rem] w-[100%] md:mt-[30px]"}>
+                    <img src="/redpacket/isStartBg.png" alt="" className={"h-[6.25rem] w-[100%]"} />
+
+                    <div
+                        className={
+                            "absolute top-[70%] h-[0.6944rem] w-[100%] px-[0.7rem]" +
+                            " text-center text-[0.16rem] font-bold text-[#019632]" +
+                            " [text-shadow:1px_1px_#fff]"
+                        }
+                    >
+                        <p>Valor máximo de queda em</p>
+                        <p>
+                            dinheiro: <span className={"text-primary-color"}>R${maxCount}</span>
+                        </p>
+                    </div>
+                    <div
+                        className={
+                            "absolute bottom-[10%] left-[50%] h-[65px] w-[250px] " +
+                            " -translate-x-1/2"
+                        }
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            onReciveRed();
+                        }}
+                    ></div>
+                </div>
+            </div>
         </div>
-        // <div data-v-f333135e="" className={`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 ${styles.redopen}`}>
-        //   <Image src={"/hby/close.png"} alt={"close"} width={20} height={20} onClick={onCloseHby} className={styles.closeIcon}/>
-        //   <div className={styles.title}>Chuva de dinheiro</div>
-        //   <div className={styles.cash}>1.96</div>
-        //   <div className={styles.tips}>Valor máximo de queda em dinheiro:Cada sessäo de chuva de dinheiro é </div>
-        // </div>
     );
 };
 
-const HbyInfo2 = (props: any) => {
+const PacketReceiveDetail: FC<Omit<PacketDetailsProps, "onReciveRed" | "packet">> = (props) => {
     const { iconImg, onCloseHby, redAmount } = props;
-    const hbyInfoClass = clsx(
-        `${styles.redopen} absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2  bg-no-repeat bg-cover`
-    );
+
     const t = useTranslations("packetsPopup");
     return (
-        <div
-            className={hbyInfoClass}
-            style={{ background: `url(${iconImg})`, backgroundSize: "100% 100%" }}
-        >
-            <img
-                src={"/hby/close.png"}
-                alt={"close"}
-                width={30}
-                height={30}
-                onClick={onCloseHby}
-                className={styles.closeIcon}
-            />
-
-            <div className={styles.title}>{t("title")}</div>
-            <div className={styles.cash}>{redAmount}</div>
-            <div className={styles.tips}>
-                {redAmount > 0 ? t("receiveSuccess") : t("receiveWarring")}
+        <div className={`absolute h-[100%] w-[100%]`} onClick={onCloseHby}>
+            <div className={"flex h-[100%] w-[100%]"}>
+                <div className={"relative h-[6.25rem] w-[100%] md:mt-[30px]"}>
+                    <img src={iconImg} alt="" className={"h-[6.25rem] w-[100%]"} />
+                    <div
+                        className={
+                            "absolute top-[28%] w-[100%] text-center font-black" +
+                            " text-[0.4167rem] text-[#1fa62e]"
+                        }
+                    >
+                        <p>R$</p>
+                        <p className={"-mt-[0.0694rem]"}>{redAmount.toFixed(2)}</p>
+                    </div>
+
+                    <div
+                        className={
+                            "absolute bottom-[15%] h-[1.1rem] px-[0.8333rem]" + " text-[#ff9000]"
+                        }
+                    >
+                        <div className={"text-center text-[0.1667rem] font-bold"}>
+                            {redAmount > 0 ? t("receiveSuccess") : t("receiveWarring")}
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     );
@@ -177,6 +262,7 @@ enum Status {
 interface Snowflake {
     x: number; // 水平位置
     y: number; // 垂直位置
+    opacity: number; // 透明度
     scale: number; // 缩放比例
     speedX: number; // 水平移动速度
     speedY: number; // 垂直下落速度
@@ -208,6 +294,7 @@ const Snowfall: FC<SnowfallProps> = ({ images, snowflakeCount = 80, onClose = ()
             speedY: Math.random() * 5 + 1,
             rotate: Math.random() * 180,
             rotateSpeed: Math.random() * 2 - 1,
+            opacity: Math.random() * (1.2 - 0.5) + 0.5,
             image: imageElements.current[Math.floor(Math.random() * imageElements.current.length)],
         }));
     };
@@ -252,7 +339,7 @@ const Snowfall: FC<SnowfallProps> = ({ images, snowflakeCount = 80, onClose = ()
                 }
 
                 ctx.save();
-                ctx.globalAlpha = 1;
+                ctx.globalAlpha = flake.opacity;
                 ctx.translate(
                     flake.x + (imgHeight * flake.scale) / 2,
                     flake.y + (imgWidth * flake.scale) / 2
@@ -295,13 +382,13 @@ const Snowfall: FC<SnowfallProps> = ({ images, snowflakeCount = 80, onClose = ()
 const RedPacketModal = forwardRef<RedPacketModalProps, Props>(function RedPacketModal(props, ref) {
     const { onAfterHandler } = props;
     const [visible, setVisible] = useState(false);
-    const [iconLists, setIconLists] = useState<any>([]);
+    const [iconLists, setIconLists] = useState<string[]>([]);
     // 初始状态为is_end, 展示活动详情页
     const [status, setStatus] = useState<Status>(Status.is_end);
-    const packetCurrent = useRef<any>({});
-    const packets = useRef<any[]>([]);
+    const packetCurrent = useRef<RedPacketTypes | null>(null);
+    const packets = useRef<RedPacketTypes[]>([]);
 
-    const [redAmount, setRedAmount] = useState<any>(1);
+    const [redAmount, setRedAmount] = useState<number>(1);
     const activeIndex = useRef<number>(0);
     const token = getToken();
     const element = useRef<HTMLElement | null>(null);
@@ -326,10 +413,10 @@ const RedPacketModal = forwardRef<RedPacketModalProps, Props>(function RedPacket
             let actList = packets.current;
             // 是否有已开始但是没领过的红包
             let packetsFilter = actList
-                .filter((aItem: any) => {
+                .filter((aItem) => {
                     return aItem.can_receive && aItem.is_start && !aItem.is_receive;
                 })
-                .sort((pre: any, next: any) => pre.end_time - next.end_time);
+                .sort((pre, next) => pre.end_time - next.end_time);
 
             // 有可领取红包
             if (packetsFilter.length > 0) {
@@ -347,7 +434,7 @@ const RedPacketModal = forwardRef<RedPacketModalProps, Props>(function RedPacket
             } else {
                 // 无可领取红包
                 // 展示最近可领红包详情
-                let packets = actList.sort((pre: any, next: any) => pre.end_time - next.end_time);
+                let packets = actList.sort((pre, next) => pre.end_time - next.end_time);
                 packetCurrent.current = packets[0];
                 setIconLists(JSON.parse(packets[0].icon));
                 // 无可领取红包展示详情
@@ -361,8 +448,8 @@ const RedPacketModal = forwardRef<RedPacketModalProps, Props>(function RedPacket
     const onReciveRed = async () => {
         try {
             let paramsData = {
-                id: packetCurrent.current?.id,
-                index: packetCurrent.current?.index,
+                id: packetCurrent.current?.id!,
+                index: packetCurrent.current?.index!,
             };
             let receiveRedPacketInfo = await receiveRedPacketApi(paramsData);
             let redNum = receiveRedPacketInfo.data;
@@ -388,19 +475,24 @@ const RedPacketModal = forwardRef<RedPacketModalProps, Props>(function RedPacket
             <Snowfall images={ImagesData} onClose={() => setVisible(false)} />
 
             {status === Status.is_start ? (
-                <HbyInfo
+                <PacketStartDetail
                     onCloseHby={() => setVisible(false)}
                     onReciveRed={onReciveRed}
                     iconImg={iconLists[1]}
+                    packet={packetCurrent.current!}
                 />
             ) : status === Status.is_receive ? (
-                <HbyInfo2
+                <PacketReceiveDetail
                     onCloseHby={() => setVisible(false)}
                     redAmount={redAmount}
                     iconImg={iconLists[2]}
                 />
             ) : (
-                <HbyInfoDetail onCloseHby={() => setVisible(false)} iconImg={iconLists[0]} />
+                <PacketEndDetail
+                    onCloseHby={() => setVisible(false)}
+                    iconImg={iconLists[0]}
+                    packet={packetCurrent.current!}
+                />
             )}
         </Mask>
     );

+ 18 - 0
src/hooks/useGame.tsx

@@ -22,14 +22,32 @@ const useGame = () => {
             .then((res) => {
                 Toast.clear();
                 if (res.data && res.data.game_url) {
+                    const game_url = res.data.game_url;
                     const url = `${encodeURI(res.data.game_url)}&brand=${brand}&return_url=${window.location.href.replace(pathname, "")}&category_name=${game.provider}`;
+                    console.log(`🚀🚀🚀🚀🚀-> in useGame.tsx on 26`, url);
+                    //
+                    console.log(`🚀🚀🚀🚀🚀-> in useGame.tsx on 28`);
+                    // 然后是文档对象
+                    if (game_url.indexOf("!doctype")) {
+                        // sessionStorage.setItem("game_url", res.data.game_url);
+                        // router.push(`/game`);
+                        console.log(`🚀🚀🚀🚀🚀-> in useGame.tsx on 34`, "文档对象");
+                    } else if (game_url.indexOf("https")) {
+                        // 如果是https
+                        console.log(`🚀🚀🚀🚀🚀-> in useGame.tsx on 38 https`, game_url);
+                    } else {
+                        console.log(`🚀🚀🚀🚀🚀-> in useGame.tsx on 40 http`, game_url);
+                    }
+
                     const protocol = new URL(url).protocol;
                     if (
                         whiteUrls.indexOf(window.location.hostname) !== -1 ||
                         protocol === "https:"
                     ) {
+                        console.log(`🚀🚀🚀🚀🚀-> in useGame.tsx on 31`, url);
                         router.push(`/game?${url}`);
                     } else {
+                        console.log(`🚀🚀🚀🚀🚀-> in useGame.tsx on 33`, res.data);
                         window.open(url);
                     }
                 } else {

+ 1 - 0
src/utils/server/index.ts

@@ -51,6 +51,7 @@ class Server {
         options = requestInterceptor(options);
         const { method = "GET", url, headers = {}, data = {}, body, ...other } = options;
         const params = JSON.stringify(data);
+        console.log(`🚀🚀🚀🚀🚀-> in index.ts on 54`, url);
         try {
             const response = await fetch(`${config.NEXT_PUBLIC_BASE_URL}${url}`, {
                 method: method,