fix: 更新体育

src/api/home.ts

@@ -147,6 +147,7 @@ export const getGamesApi = () => {
  */
 export interface GameInfo {
     game_url: string;
+    brand_id: string;
 }
 /**
  * form.LoginGameReq
@@ -172,6 +173,7 @@ export interface GameRequest {
      * 用于主页按钮和重新导向 URL (部份游戏提供此功能)
      */
     return_url?: string;
+    mode: 1 | 2 | 3;
 }
 export const getGameDetailApi = (data: GameRequest) => {
     return server.post<GameInfo>({

src/app/[locale]/(TabBar)/sports/SportsClient.tsx

@@ -0,0 +1,59 @@
+"use client";
+import { useTranslations } from "next-intl";
+import Script from "next/script";
+import { FC, useEffect, useRef } from "react";
+
+interface Props {
+    brand_id: string;
+    token: string;
+}
+
+const SportsClient: FC<Props> = (props) => {
+    const t = useTranslations("ProfilePage");
+    const btRef = useRef(null);
+    const { brand_id, token } = props;
+    const onLoad = () => {
+        // @ts-ignore
+        const bt = new BTRenderer();
+        btRef.current = bt;
+        bt.initialize({
+            brand_id: brand_id,
+            token: token,
+            onTokenExpired: function () {
+                console.log(`🚀🚀🚀🚀🚀-> in page.tsx on 20`, "token 过期");
+            },
+            themeName: "default",
+            lang: "pt-br",
+            target: document.getElementById("betby"),
+            betSlipOffsetBottom: 80,
+            betSlipOffsetRight: 750,
+            betSlipZIndex: 0,
+            onRouteChange: function () {},
+            onLogin: function () {},
+            onRegister: function () {},
+            onSessionRefresh: function () {},
+            onBetSlipStateChange: function () {},
+        });
+    };
+
+    useEffect(() => {
+        // @ts-ignore
+        if (window.BTRenderer) {
+            onLoad();
+        }
+        return () => {
+            // @ts-ignore
+            btRef.current?.kill();
+        };
+    }, []);
+
+    return (
+        <>
+            <div id="betby" className={"h-[100%]"}></div>
+
+            <Script src={"https://ui.invisiblesport.com/bt-renderer.min.js"} onLoad={onLoad} />
+        </>
+    );
+};
+
+export default SportsClient;

src/app/[locale]/(TabBar)/sports/page.tsx

@@ -1,56 +1,15 @@
-"use client";
-import { useTranslations } from "next-intl";
-import Script from "next/script";
-import { FC, useEffect, useRef } from "react";
-
-interface Props {}
-
-const Sports: FC<Props> = () => {
-    const t = useTranslations("ProfilePage");
-    const btRef = useRef(null);
-    const onLoad = () => {
-        // @ts-ignore
-        const bt = new BTRenderer();
-
-        btRef.current = bt;
-        bt.initialize({
-            brand_id: "2438427001506373639",
-            token: "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9.eyJjdXJyZW5jeSI6Ik1ZUiIsImV4cCI6MTczMjUxNTQ4MSwiaWF0IjoxNzMyNTAxMDgxLCJpc3MiOiIyNDM4NDI3MDAxNTA2MzczNjM5IiwianRpIjoiYTNVMWZjMmhKa2QxYTVaMkFiN2NjZWREYWQiLCJsYW5nIjoiY24iLCJuYW1lIjoiMTAwMDAxMDEiLCJzdWIiOiIxMDAwMDEwMSJ9.GraOmhETc1WhaUayTgyZMAkSYIxt9IE78JWwZ0SkYmw6YLCbxA-iL3WjJUBDhIU653CAO_ftcaPUPiFDOiq_zg",
-            onTokenExpired: function () {
-                console.log(`🚀🚀🚀🚀🚀-> in page.tsx on 20`, "token 过期");
-            },
-            themeName: "default",
-            lang: "pt-br",
-            target: document.getElementById("betby"),
-            betSlipOffsetBottom: 80,
-            betSlipOffsetRight: 750,
-            betSlipZIndex: 0,
-            onRouteChange: function () {},
-            onLogin: function () {},
-            onRegister: function () {},
-            onSessionRefresh: function () {},
-            onBetSlipStateChange: function () {},
-        });
-    };
-
-    useEffect(() => {
-        // @ts-ignore
-        if (window.BTRenderer) {
-            onLoad();
-        }
-        return () => {
-            // @ts-ignore
-            btRef.current?.kill();
-        };
-    }, []);
-
-    return (
-        <>
-            <div id="betby" className={"h-[100%]"}></div>
-
-            <Script src={"https://ui.invisiblesport.com/bt-renderer.min.js"} onLoad={onLoad} />
-        </>
-    );
+import { GameInfo, GameRequest } from "@/api/home";
+import { server } from "@/utils/server";
+import SportsClient from "./SportsClient";
+const getGameDetailApi = async (data: GameRequest) => {
+    return server.request<GameInfo>({
+        url: "/v1/api/front/game_info_by_id",
+        method: "post",
+        data,
+    });
 };
-
-export default Sports;
+const Page = async () => {
+    const result = await getGameDetailApi({ id: "sportsBet", mode: 1 });
+    return <SportsClient brand_id={result.data.brand_id} token={result.data.game_url} />;
+};
+export default Page;

src/app/[locale]/(navbar)/cashWheel/CashWheelClient.tsx

@@ -3,6 +3,9 @@
 import Box from "@/components/Box";
 import { useUserInfoStore } from "@/stores/useUserInfoStore";
 import { LuckyWheel } from "@lucky-canvas/react";
+import { useCountDown } from "ahooks";
+import { Popup } from "antd-mobile";
+import Image from "next/image";
 import { useEffect, useRef, useState } from "react";
 import LotteryWheel from "./LotteryWheel";
 import styles from "./style.module.scss";
@@ -372,26 +375,28 @@ const WheelWallet = () => {
 };
 const DrawMain = () => {
     const myLucky = useRef<any>();
-
+    const desktopWheelRef = useRef<any>();
     const [blocks] = useState([
         {
-            // padding: "20",
+            padding: "0",
             imgs: [
-                // {
-                //     src: "/wheels/wheel-bg.png",
-                //     width: "100%",
-                //     height: "100%",
-                // },
+                {
+                    src: "/wheels/center-light.png",
+                    width: "100%",
+                    height: "100%",
+                },
             ],
         },
     ]);
     const [prizes] = useState([
-        { fonts: [{ text: "0", top: "20%" }], background: "#e9e8fe" },
-        { fonts: [{ text: "1", top: "20%" }], background: "#b8c5f2" },
-        { fonts: [{ text: "2", top: "20%" }], background: "#e9e8fe" },
-        { fonts: [{ text: "3", top: "10%" }], background: "#b8c5f2" },
-        { fonts: [{ text: "4", top: "10%" }], background: "#e9e8fe" },
-        { fonts: [{ text: "5", top: "10%" }], background: "#b8c5f2" },
+        { background: "#fde187", fonts: [{ text: "0", top: "20%" }] },
+        { background: "#faf3c3", fonts: [{ text: "1", top: "20%" }] },
+        { background: "#fde187", fonts: [{ text: "2", top: "20%" }] },
+        { background: "#faf3c3", fonts: [{ text: "3", top: "20%" }] },
+        { background: "#fde187", fonts: [{ text: "4", top: "20%" }] },
+        { background: "#faf3c3", fonts: [{ text: "5", top: "20%" }] },
+        { background: "#fde187", fonts: [{ text: "6", top: "20%" }] },
+        { background: "#faf3c3", fonts: [{ text: "7", top: "20%" }] },
     ]);
     const [buttons] = useState([
         {
@@ -408,39 +413,195 @@ const DrawMain = () => {
     return (
         <div className={"relative"}>
             <WheelWallet />
-            <div className={"relative border-[1px]"}>
-                <img src={"/wheels/wheel-bg.png"} className={"h-[6rem] w-[100%] pt-[0.1389rem]"} />
-                <div className={"flex h-[2.3rem] w-[100%] " + " justify-center border-[1px]"}>
-                    <LuckyWheel
-                        ref={myLucky}
-                        width="2.3rem"
-                        height="2.3rem"
-                        blocks={blocks}
-                        prizes={prizes}
-                        buttons={buttons}
-                        onStart={() => {
-                            // 点击抽奖按钮会触发star回调
-                            myLucky.current?.play();
-                            setTimeout(() => {
-                                const index = (Math.random() * 6) >> 0;
-                                myLucky.current?.stop(index);
-                            }, 2500);
-                        }}
-                        onEnd={(prize: any) => {
-                            // 抽奖结束会触发end回调
-                            alert("恭喜你抽到 " + prize.fonts[0].text + " 号奖品");
-                        }}
-                    />
+
+            <div className={"relative hidden w-[100%] pt-[20px] md:block"}>
+                <img src={"/wheels/wheel-bg.png"} className={"w-[100%]"} />
+                {/*定位到中心圆*/}
+                <div className={"absolute bottom-[0.0347rem] h-[2.6736rem] w-[100%]"}>
+                    <div className={"flex h-[100%] w-[100%] justify-center text-center"}>
+                        {/* 图片切换动画 */}
+                        <img
+                            src="/wheels/light-1.png"
+                            alt=""
+                            className={"mr-[0.0556rem] h-[100%]"}
+                        />
+
+                        <div
+                            className={
+                                "mr-[0.07rem] flex h-[2.3rem] w-[2.3rem] " +
+                                " absolute" +
+                                " bottom-[0.2rem]"
+                            }
+                        >
+                            {/*<div*/}
+                            {/*    className={*/}
+                            {/*        "absolute h-[100%] w-[100%] rounded-[50%] " +*/}
+                            {/*        " z-50 border-[red]" +*/}
+                            {/*        ""*/}
+                            {/*    }*/}
+                            {/*    style={{*/}
+                            {/*        boxShadow: "rgba(255, 255, 255, 1) 0px 0px 60px 12px inset",*/}
+                            {/*    }}*/}
+                            {/*>*/}
+                            {/*</div>*/}
+
+                            <LuckyWheel
+                                ref={myLucky}
+                                width="2.3rem"
+                                height="2.3rem"
+                                blocks={blocks}
+                                prizes={prizes}
+                                buttons={buttons}
+                                onStart={() => {
+                                    // 点击抽奖按钮会触发star回调
+                                    myLucky.current?.play();
+                                    setTimeout(() => {
+                                        const index = (Math.random() * 6) >> 0;
+                                        myLucky.current?.stop(index);
+                                    }, 2500);
+                                }}
+                                onEnd={(prize: any) => {
+                                    // 抽奖结束会触发end回调
+                                    alert("恭喜你抽到 " + prize.fonts[0].text + " 号奖品");
+                                }}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className={"relative block w-[100%] pt-[20px] md:hidden"}>
+                <img src={"/wheels/wheel-bg.png"} className={"w-[100%]"} />
+                {/*定位到中心圆*/}
+                <div className={"absolute bottom-[0.0347rem]" + " h-[2.5rem]" + " w-[100%]"}>
+                    <div className={"flex h-[100%] w-[100%] justify-center text-center"}>
+                        {/* 图片切换动画 */}
+                        <img
+                            src="/wheels/light-1.png"
+                            alt=""
+                            className={"mr-[0.0556rem] h-[100%]"}
+                        />
+
+                        <div
+                            className={
+                                "-mr-[0.08rem] flex h-[2.3rem] w-[2.3rem] " +
+                                " absolute" +
+                                " bottom-[0.03rem]"
+                            }
+                        >
+                            {/*<div*/}
+                            {/*    className={*/}
+                            {/*        "absolute h-[100%] w-[100%] rounded-[50%] " +*/}
+                            {/*        " z-50 border-[red]" +*/}
+                            {/*        ""*/}
+                            {/*    }*/}
+                            {/*    style={{*/}
+                            {/*        boxShadow: "rgba(255, 255, 255, 1) 0px 0px 60px 12px inset",*/}
+                            {/*    }}*/}
+                            {/*>*/}
+                            {/*</div>*/}
+
+                            <LuckyWheel
+                                ref={desktopWheelRef}
+                                width="2.15rem"
+                                height="2.15rem"
+                                blocks={blocks}
+                                prizes={prizes}
+                                buttons={buttons}
+                                onStart={() => {
+                                    // 点击抽奖按钮会触发star回调
+                                    desktopWheelRef.current?.play();
+                                    setTimeout(() => {
+                                        const index = (Math.random() * 6) >> 0;
+                                        desktopWheelRef.current?.stop(index);
+                                    }, 2500);
+                                }}
+                                onEnd={(prize: any) => {
+                                    // 抽奖结束会触发end回调
+                                    alert("恭喜你抽到 " + prize.fonts[0].text + " 号奖品");
+                                }}
+                            />
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
     );
 };
+const CountdownClient = () => {
+    const [_, formattedRes] = useCountDown({
+        leftTime: 60 * 100000,
+    });
+    const { days, hours, minutes, seconds } = formattedRes;
+    return (
+        <div className={"relative flex justify-center"}>
+            <img src="/wheels/countdown-bg.png" alt="" />
+            <span className={"absolute bottom-[50%] translate-y-1/2"}>
+                {String(hours).padStart(2, "0")}:{String(minutes).padStart(2, "0")}:
+                {String(seconds).padStart(2, "0")}
+            </span>
+        </div>
+    );
+};
+const ShareClient = () => {
+    const handler = () => {};
+    const [visible, setVisible] = useState(false);
+    return (
+        <>
+            <div className={"p-[0.1389rem]"}>
+                <div
+                    className={
+                        "rounded-[0.1111rem] bg-gradient-to-b from-[#84ea24_20%] to-[#1b781a]" +
+                        " h-[0.4861rem]"
+                    }
+                >
+                    <div className={"flex h-[100%] p-[0.0694rem]"}>
+                        <div
+                            className={
+                                "flex-1 rounded-[0.0694rem] bg-[rgba(255,255,255,0.5)]" +
+                                " flex items-center pl-[0.0694rem]"
+                            }
+                        >
+                            <span className={""}>Compartilhe mais, saque mais rápido.</span>
+                        </div>
+                        {/*  anniu */}
+                        <div
+                            className={"flex w-[0.4167rem] items-center pl-[0.0694rem]"}
+                            onClick={() => setVisible(true)}
+                        >
+                            <Image src={"/wheels/share.png"} alt={"share"} width={30} height={30} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <Popup
+                visible={visible}
+                getContainer={null}
+                onMaskClick={() => {
+                    setVisible(false);
+                }}
+                onClose={() => {
+                    setVisible(false);
+                }}
+                showCloseButton
+                bodyStyle={{ height: "30vh", background: "#fff" }}
+            >
+                <div className={"p-[20px] text-[#000]"}>
+                    <h1>1.Convide amlgos para ajudar com saques</h1>
+                </div>
+            </Popup>
+        </>
+    );
+};
 const CashWheelClient = () => {
     return (
         <>
             <DrawMain />
-            <div className={"text-center"}></div>
+            {/*倒计时*/}
+            <CountdownClient />
+            {/*分享*/}
+            <ShareClient />
             <div className={styles.cashWheelClient}>
                 {/*<CashMainCom />*/}
                 {/*<DrawContent />*/}

src/utils/methods/index.ts

@@ -91,3 +91,15 @@ export const percentage = (current: number, source: number) => {
 export const flatPoint = (num: number) => {
     return Math.ceil(num * 100) / 100;
 };
+
+/**
+ * @description 是否是移动端
+ */
+export function isMobile(): boolean {
+    try {
+        document.createEvent("TouchEvent");
+        return true;
+    } catch (e) {
+        return false;
+    }
+}