fix: 修改倒计时组件

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

@@ -40,6 +40,7 @@ const SportsClient: FC<Props> = (props) => {
             brand_id: brand_id,
             token: token,
             onTokenExpired: getGameDetailApi,
+            onSessionRefresh: getGameDetailApi,
             themeName: "default",
             lang: "pt-br",
             target: document.getElementById("betby"),
@@ -54,7 +55,6 @@ const SportsClient: FC<Props> = (props) => {
             onRouteChange: function () {},
             onLogin: function () {},
             onRegister: function () {},
-            onSessionRefresh: function () {},
             onBetSlipStateChange: function () {},
         });
     };

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

@@ -3,13 +3,14 @@
 import { getWheelReceiveApi } from "@/api/cashWheel";
 import Box from "@/components/Box";
 import { WheelClient } from "@/components/ModalPopup/WheelModal";
+import useCountDown from "@/hooks/useCountdown";
 import { Link } from "@/i18n/routing";
 import { useUserInfoStore } from "@/stores/useUserInfoStore";
 import useWheelStore from "@/stores/useWheelStore";
 import { server } from "@/utils/client";
 import { copyText, timeFormat } from "@/utils/methods";
 import NumberFlow from "@number-flow/react";
-import { useCountDown, useRequest } from "ahooks";
+import { useRequest } from "ahooks";
 import { Mask, Popup, Toast } from "antd-mobile";
 import clsx from "clsx";
 import { useTranslations } from "next-intl";
@@ -286,9 +287,9 @@ const CountdownClient = () => {
         setWheel: state.setWheel,
         receiveTarget: state.receiveTarget,
     }));
+
     const [_, formattedRes] = useCountDown({
         leftTime: (currentWheel.count_down || 0) * 1000,
-        // leftTime: 500000,
         onEnd: () => {
             wheel.cancelHandler && wheel.cancelHandler();
             setFinishes(true);

src/components/HeaderBack/index.tsx

@@ -71,7 +71,9 @@ const HeaderBack: FC<PropsWithChildren<HeaderBackProps>> = ({
             <div className={styles.left}>
                 {showBack && <span className={iconClassName1} onClick={() => goPage()}></span>}
             </div>
-            {(title || selfTitle) && <span className={styles.title}>{title || selfTitle}</span>}
+            <div className={styles.title}>
+                {(title || selfTitle) && <span>{title || selfTitle}</span>}
+            </div>
             <div className={styles.content}>{children}</div>
             <span className={styles.right} onClick={() => goPage("home")}>
                 <span className={iconClassName2}></span>

src/components/HeaderBack/style.module.scss

@@ -25,7 +25,7 @@
   }
 
   .content{
-    width: 100%;
+    //width: 100%;
   }
 
   .title {

src/hooks/useCountdown.tsx

@@ -0,0 +1,65 @@
+import { useLatest } from "ahooks";
+import { useEffect, useState } from "react";
+
+export interface Options {
+    // 剩余时间（毫秒）
+    leftTime?: number;
+    // 计时器间隔（毫秒）
+    interval?: number;
+    // 倒计时结束回调
+    onEnd?: () => void;
+}
+
+export interface FormattedRes {
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+    milliseconds: number;
+}
+
+const parseMs = (milliseconds: number): FormattedRes => {
+    return {
+        days: Math.floor(milliseconds / 86400000),
+        hours: Math.floor(milliseconds / 3600000) % 24,
+        minutes: Math.floor(milliseconds / 60000) % 60,
+        seconds: Math.floor(milliseconds / 1000) % 60,
+        milliseconds: Math.floor(milliseconds) % 1000,
+    };
+};
+
+/**
+ * @description 根据服务器返回秒数完成倒计时， 不使用本地时间
+ */
+const useCountdown = (options: Options = {}) => {
+    const { leftTime = 0, interval = 1000, onEnd } = options;
+    const [timeLeft, setTimeLeft] = useState(leftTime);
+    const onEndRef = useLatest(onEnd);
+
+    useEffect(() => {
+        setTimeLeft(leftTime);
+
+        if (leftTime <= 0) {
+            return;
+        }
+
+        const timer = setInterval(() => {
+            setTimeLeft((prev) => {
+                const nextTimeLeft = Math.max(0, prev - interval);
+                if (nextTimeLeft === 0) {
+                    clearInterval(timer);
+                    onEndRef.current?.();
+                }
+                return nextTimeLeft;
+            });
+        }, interval);
+
+        return () => clearInterval(timer);
+    }, [leftTime, interval]);
+
+    const formattedRes = parseMs(timeLeft);
+
+    return [timeLeft, formattedRes] as const;
+};
+
+export default useCountdown;

src/stores/useWheelStore.ts

@@ -20,7 +20,7 @@ interface Action {
 
 const initialState: State = {
     status: 3,
-    currentWheel: {},
+    currentWheel: { count_down: 0 },
     totalCount: 100,
     receiveTarget: {},
 };
@@ -36,7 +36,7 @@ export const useWheelStore = create<State & Action>()((set, get) => {
             return getWheelApi().then((res) => {
                 const { data } = res;
                 if (Array.isArray(data)) {
-                    set((state) => ({ ...state, status: 3 }));
+                    set((state) => ({ ...state, ...initialState }));
                     return undefined;
                 }
                 let source = { ...(data.activities?.[0] || {}), ...data.activate };
@@ -56,6 +56,7 @@ export const useWheelStore = create<State & Action>()((set, get) => {
                         currentWheel: source,
                         receiveTarget: {},
                     }));
+
                     return data;
                 }
                 set((state) => ({ ...state, status: 3, currentWheel: source }));