fix: 更新轮盘

src/api/cashWheel.ts

@@ -18,9 +18,9 @@ export interface Activity {
      */
     share_enable: string;
     /**
-     * 分享手机号开关
+     * 分享手机号开关1 开启 2 关闭
      */
-    share_phone_enable: string;
+    share_phone_enable: 1 | 2;
     // 短信内容
     note: string;
 }

src/app/[locale]/(TabBar)/[[...share]]/@actionWidget/Service.tsx

@@ -9,12 +9,13 @@ import { getWheelApi } from "@/api/cashWheel";
 import { Link } from "@/i18n/routing";
 import { useGlobalNoticeStore } from "@/stores/useGlobalNoticeStore";
 import { useSocialStore } from "@/stores/useSocials";
+import useWheelStore from "@/stores/useWheelStore";
 import { getToken } from "@/utils/Cookies";
 import { useRequest } from "ahooks";
 import { Badge } from "antd-mobile";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
-import { FC, useEffect, useRef, useState } from "react";
+import { FC, useEffect, useRef } from "react";
 
 interface Props {
     services: ServiceTypes[];
@@ -24,10 +25,15 @@ interface Props {
 const ServiceWidget: FC<Props> = (props) => {
     const token = getToken();
     const { services, socials } = props;
-    console.log(`🚀🚀🚀🚀🚀-> in Service.tsx on 28`, services);
-    const defaultService = services.find((item) => item.is_suspend === 1);
 
-    const newServices = services.filter((item) => item.is_suspend !== 1);
+    const { wheelStatus, wheelCurrent, setWheel } = useWheelStore((state) => ({
+        wheelStatus: state.status,
+        wheelCurrent: state.currentWheel,
+        setWheel: state.setWheel,
+    }));
+    const defaultService = services?.find((item) => item.is_suspend === 1);
+
+    const newServices = services?.filter((item) => item.is_suspend !== 1);
     const setSocials = useSocialStore((state) => state.setSocials);
     const redPacketModalRef = useRef<RedPacketModalProps>(null);
 
@@ -43,25 +49,12 @@ const ServiceWidget: FC<Props> = (props) => {
             return res.data;
         });
     };
-    //  1: 转 2: 待领取 3: nothing
-    const [visibleWheel, setVisibleWheel] = useState<1 | 2 | 3 | undefined>(undefined);
     useEffect(() => {
         // 数据存储，侧边栏使用
         setSocials(socials);
-        getWheel().then((res) => {
-            if (res === undefined || Array.isArray(res)) {
-                setVisibleWheel(3);
-                return res;
-            }
-
-            if (res && res.activate.can === 1 && res.not_receive === null) {
-                setVisibleWheel(1);
-                wheelModalRef.current?.onOpen(res);
-                return;
-            }
-            if (res && res.not_receive && res.not_receive.length > 0) {
-                setVisibleWheel(2);
-                return;
+        setWheel().then((data) => {
+            if (data && useWheelStore.getState().status === 1) {
+                wheelModalRef.current?.onOpen(data);
             }
         });
     }, []);
@@ -122,7 +115,7 @@ const ServiceWidget: FC<Props> = (props) => {
                 className={`absolute bottom-[0.84rem] right-[0.12rem] z-50 flex w-[0.6944rem] flex-col items-center justify-center`}
             >
                 {/*轮盘  */}
-                {visibleWheel === 2 ? (
+                {wheelStatus === 2 ? (
                     <Link
                         href={"/cashWheel"}
                         className={
@@ -226,7 +219,7 @@ const ServiceWidget: FC<Props> = (props) => {
             <div
                 className={`grid`}
                 style={{
-                    gridTemplateColumns: ` repeat(${newServices.length >= 5 ? 5 : newServices.length},1fr)`,
+                    gridTemplateColumns: ` repeat(${newServices && newServices.length >= 5 ? 5 : (newServices?.length ?? 1)},1fr)`,
                 }}
             >
                 {newServices.map((service, index) => {

src/app/[locale]/(TabBar)/profile/component/ItemCom/index.tsx

@@ -37,7 +37,7 @@ const ItemCom: FC<ItemComProps> = ({ type = "login" }) => {
             desc: "",
             icon: "icon-mianfei",
             color: "#20894d",
-            url: "/",
+            url: "/cashWheel",
             content: null,
         },
         {

src/app/[locale]/(enter)/components/Form/index.tsx

@@ -240,7 +240,10 @@ const FormComponent: FC<Props> = (props) => {
             /// 登录
             loginHandler(values).then(() => {
                 Toast.clear();
-                router.replace(`/${searchParams.get("redirect")}` || "/");
+                const redirect = searchParams.get("redirect")
+                    ? `/${searchParams.get("redirect")}`
+                    : "/";
+                router.replace(redirect);
             });
         }
     };

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

@@ -1,18 +1,29 @@
 "use client";
 
-import { getWheelApi, getWheelReceiveApi, WheelsType } from "@/api/cashWheel";
+import { getWheelReceiveApi } from "@/api/cashWheel";
 import Box from "@/components/Box";
 import { WheelClient } from "@/components/Box/WheelModal";
 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 } from "ahooks";
+import { useCountDown, useRequest } from "ahooks";
 import { Popup, Toast } from "antd-mobile";
 import clsx from "clsx";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
-import { createContext, FC, Fragment, useContext, useEffect, useState } from "react";
+import {
+    createContext,
+    FC,
+    forwardRef,
+    Fragment,
+    useContext,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from "react";
 import LotteryWheel from "./LotteryWheel";
 import styles from "./style.module.scss";
 interface Props {
@@ -20,8 +31,9 @@ interface Props {
     allHistory: any[];
     phones: any[];
 }
-interface ContextType extends WheelsType, Props {
-    handler: () => void;
+interface ContextType extends Props {
+    cancelHandler: () => void;
+    startHandler: () => void;
 }
 const WheelContext = createContext<Partial<ContextType>>({});
 
@@ -222,7 +234,7 @@ const Report = () => {
                 <ul className={styles.tipsContent}>
                     <li>1.Você pode iniciar um saque quando o valor acumulado atingir 100 BRL. </li>
                     <li>
-                        2.Convidar amigos para se registrarem no 9f.com irá ajudá- lo a sacar
+                        2.Convidar amigos para se registrarem no BCWIN777.com irá ajudá- lo a sacar
                         dinheiro rapidamente.
                     </li>
                     <li>3. Cada usuário receberá uma única rodada grátis por dia. </li>
@@ -242,7 +254,17 @@ const Report = () => {
 };
 const WheelWallet = () => {
     const user = useUserInfoStore((state) => state.userInfo);
-    const wheel = useContext(WheelContext);
+    const { statusWheel, currentWheel, setWheel, totalCount } = useWheelStore((state) => ({
+        statusWheel: state.status,
+        currentWheel: state.currentWheel,
+        setWheel: state.setWheel,
+        totalCount: state.totalCount,
+    }));
+    const [count, setCount] = useState<number>(0);
+    useEffect(() => {
+        console.log(`🚀🚀🚀🚀🚀-> in CashWheelClient.tsx on 252`, currentWheel);
+        setCount(currentWheel.amount || 0);
+    }, [currentWheel.amount]);
     return (
         <Box className={"w-[100%]"}>
             <div
@@ -259,11 +281,7 @@ const WheelWallet = () => {
                         <span>{user.user_phone}</span>
                     </div>
                     <div className={"text-[0.4861rem] font-bold text-[#008213]"}>
-                        <NumberFlow
-                            value={wheel.activate?.amount! || 0}
-                            prefix={"R$ "}
-                            trend={+1}
-                        />
+                        <NumberFlow value={count} prefix={"R$ "} trend={+1} />
                     </div>
                 </div>
                 <div
@@ -273,11 +291,7 @@ const WheelWallet = () => {
                 >
                     <span className={"mr-[10px] text-[#008213]"}>Faltam para O saque</span>
                     <span className={"text-[#eef100]"}>
-                        <NumberFlow
-                            value={wheel.num! - wheel.activate?.amount! || 0}
-                            prefix={"R$ "}
-                            trend={-1}
-                        />
+                        <NumberFlow value={totalCount - count} prefix={"R$ "} trend={-1} />
                     </span>
                 </div>
                 {/*top*/}
@@ -288,32 +302,55 @@ const WheelWallet = () => {
 
 const DrawMain = () => {
     const wheel = useContext(WheelContext);
-
+    const { statusWheel, currentWheel, receiveTarget, setWheel } = useWheelStore((state) => ({
+        statusWheel: state.status,
+        currentWheel: state.currentWheel,
+        setWheel: state.setWheel,
+        receiveTarget: state.receiveTarget,
+    }));
+    const shareRef = useRef<{ open: () => void } | null>(null);
     return (
-        <div className={""}>
+        <>
             <WheelWallet />
 
             <div className={"-mt-[0.2083rem]"}>
-                <WheelClient isRotate={true} wheel={wheel} onRotateEnd={wheel.handler!} />
+                <WheelClient
+                    isRotate={true}
+                    onRotateEnd={wheel.startHandler}
+                    onRotateDisable={() => shareRef.current?.open()}
+                    onRotateBefore={wheel.cancelHandler}
+                />
             </div>
-        </div>
+
+            {/*倒计时*/}
+            <CountdownClient />
+            {/*分享*/}
+            {currentWheel.end_time && currentWheel.end_time > 0 ? (
+                <ShareClient ref={shareRef} />
+            ) : null}
+        </>
     );
 };
 const CountdownClient = () => {
     const wheel = useContext(WheelContext);
-
+    const { setWheel, currentWheel, receiveTarget } = useWheelStore((state) => ({
+        statusWheel: state.status,
+        currentWheel: state.currentWheel,
+        setWheel: state.setWheel,
+        receiveTarget: state.receiveTarget,
+    }));
     const [_, formattedRes] = useCountDown({
-        leftTime: wheel.activate?.end_time! * 1000 - Date.now(),
+        leftTime: currentWheel.end_time ? currentWheel.end_time * 1000 - Date.now() : 0,
     });
     const { days, hours, minutes, seconds } = formattedRes;
     const receiveHandler = () => {
-        getWheelReceiveApi({ unique_id: wheel.not_receive![0].unique_id }).then((res) => {
-            wheel.handler && wheel.handler();
+        getWheelReceiveApi({ unique_id: receiveTarget.unique_id! }).then((res) => {
+            setWheel();
         });
     };
     return (
         <div className={"relative flex justify-center"}>
-            {wheel.not_receive && wheel.not_receive.length > 0 ? (
+            {receiveTarget.unique_id ? (
                 <div className={"mt-[10px]"}>
                     <Image
                         src={"/wheels/receive-button.png"}
@@ -343,15 +380,26 @@ const phones = Array(9)
             .padStart(4, "0")}`;
         return num;
     });
-const ShareClient = () => {
+const ShareClient = forwardRef<{ open: () => void }, {}>(function ShareClient(props, ref) {
     const [visible, setVisible] = useState(false);
     const wheel = useContext(WheelContext);
     const user = useUserInfoStore((state) => state.userInfo);
-    const currentWheel = wheel.activities?.[0];
+    const { statusWheel, currentWheel, receiveTarget } = useWheelStore((state) => ({
+        statusWheel: state.status,
+        currentWheel: state.currentWheel,
+        setWheel: state.setWheel,
+        receiveTarget: state.receiveTarget,
+    }));
+
+    useImperativeHandle(ref, () => {
+        return {
+            open: () => setVisible(true),
+        };
+    });
 
     const [currentPhoneIndex, setCurrentPhoneIndex] = useState(0);
 
-    const shareUrl = `${process.env.NEXT_PUBLIC_SHARE_URL}/br/sharecwbr?turntable=${wheel.activities && wheel.activities[0].id}&user=${user.id}&time=${wheel.activate?.end_time}`;
+    const shareUrl = `${process.env.NEXT_PUBLIC_SHARE_URL}/br/sharecwbr?turntable=${currentWheel.id}&user=${user.id}&time=${currentWheel.end_time}`;
     const url = encodeURIComponent(`${shareUrl}`);
     const text = encodeURIComponent(`Receba 100 BRL de graça,Pix SAQUE RÁPIDO`);
     const t = useTranslations();
@@ -394,7 +442,7 @@ const ShareClient = () => {
     };
 
     const smsHandler = () => {
-        const phoneNumber = `sms:${wheel.phones?.join(",")}?body=${currentWheel?.note + url}`;
+        const phoneNumber = `sms:${wheel.phones?.join(",")}?body=${currentWheel.note + url}`;
         window.location.href = phoneNumber;
     };
 
@@ -481,105 +529,105 @@ const ShareClient = () => {
                         </div>
                     </div>
 
-                    <div className={"mt-[0.0694rem]"}>
-                        <h1>2.Enviar convite para jogador aleatório ajudar</h1>
+                    {currentWheel.share_phone_enable === 1 ? (
+                        <div className={"mt-[0.0694rem]"}>
+                            <h1>2.Enviar convite para jogador aleatório ajudar</h1>
 
-                        <div className={"mt-[0.0694rem] bg-[#000] p-[10px]"}>
-                            <div className={"grid grid-cols-3 gap-[5px] text-[0.0833rem]"}>
-                                {wheel.phones?.map((phone, index) => {
-                                    return (
-                                        <span
-                                            style={{
-                                                color: index < currentPhoneIndex ? "#fff" : "#ccc",
-                                            }}
-                                            key={index}
-                                        >
-                                            {phone}
-                                        </span>
-                                    );
-                                })}
-                            </div>
+                            <div className={"mt-[0.0694rem] bg-[#000] p-[10px]"}>
+                                <div className={"grid grid-cols-3 gap-[5px] text-[0.0833rem]"}>
+                                    {wheel.phones?.map((phone, index) => {
+                                        return (
+                                            <span
+                                                style={{
+                                                    color:
+                                                        index < currentPhoneIndex ? "#fff" : "#ccc",
+                                                }}
+                                                key={index}
+                                            >
+                                                {phone}
+                                            </span>
+                                        );
+                                    })}
+                                </div>
 
-                            <div
-                                className={
-                                    "grid grid-cols-2 gap-[0.1389rem] text-[0.12rem] text-[#fff]"
-                                }
-                            >
                                 <div
-                                    onClick={handler}
                                     className={
-                                        "flex items-center rounded-[0.0694rem] bg-[#10cb8c]" +
-                                        " p-[0.0694rem] text-[#fff]"
+                                        "grid grid-cols-2 gap-[0.1389rem] text-[0.12rem] text-[#fff]"
                                     }
                                 >
-                                    <div className={"flex-1"}>
-                                        <p>Enviar Mensagem </p>
-                                        <p>no WhatsAPP</p>
+                                    <div
+                                        onClick={handler}
+                                        className={
+                                            "flex items-center rounded-[0.0694rem] bg-[#10cb8c]" +
+                                            " p-[0.0694rem] text-[#fff]"
+                                        }
+                                    >
+                                        <div className={"flex-1"}>
+                                            <p>Enviar Mensagem </p>
+                                            <p>no WhatsAPP</p>
+                                        </div>
+                                        <Image
+                                            src={"/summary/WhatsApp-nobg.png"}
+                                            alt={"whatsApp"}
+                                            width={40}
+                                            height={40}
+                                        />
                                     </div>
-                                    <Image
-                                        src={"/summary/WhatsApp-nobg.png"}
-                                        alt={"whatsApp"}
-                                        width={40}
-                                        height={40}
-                                    />
-                                </div>
-                                <div
-                                    onClick={smsHandler}
-                                    className={
-                                        "flex items-center rounded-[10px] bg-[#35b2fe]" +
-                                        " p-[0.0694rem] text-[#fff]"
-                                    }
-                                >
-                                    <div className={"flex-1"}>
-                                        <p>Enviar Mensagem </p>
-                                        <p>SMS</p>
+                                    <div
+                                        onClick={smsHandler}
+                                        className={
+                                            "flex items-center rounded-[10px] bg-[#35b2fe]" +
+                                            " p-[0.0694rem] text-[#fff]"
+                                        }
+                                    >
+                                        <div className={"flex-1"}>
+                                            <p>Enviar Mensagem </p>
+                                            <p>SMS</p>
+                                        </div>
+                                        <Image
+                                            src={"/summary/SMS.png"}
+                                            alt={"whatsApp"}
+                                            width={40}
+                                            height={40}
+                                        />
                                     </div>
-                                    <Image
-                                        src={"/summary/SMS.png"}
-                                        alt={"whatsApp"}
-                                        width={40}
-                                        height={40}
-                                    />
                                 </div>
                             </div>
                         </div>
-                    </div>
+                    ) : null}
                 </div>
             </Popup>
         </>
     );
-};
+});
 
 const CashWheelClient: FC<Props> = (props) => {
-    const getWheelData = async () => {
-        return getWheelApi().then((res) => {
-            if (res.code === 200) {
-                setValues((staticValue) => {
-                    return { ...staticValue, ...res.data };
-                });
-            }
-            return res;
-        });
-    };
+    const { statusWheel, currentWheel, receiveTarget, setWheel } = useWheelStore((state) => ({
+        statusWheel: state.status,
+        currentWheel: state.currentWheel,
+        setWheel: state.setWheel,
+        receiveTarget: state.receiveTarget,
+    }));
 
-    const [values, setValues] = useState<Partial<ContextType>>({
-        num: 100,
-        allHistory: props.allHistory || [],
-        phones: props.phones || [],
-        handler: getWheelData,
+    const { run, cancel } = useRequest<any, any>(setWheel, {
+        pollingInterval: 5000,
+        pollingErrorRetryCount: 1,
+        pollingWhenHidden: false,
     });
-    useEffect(() => {
-        getWheelData();
-    }, []);
+    useEffect(() => {}, []);
 
     return (
         <>
-            <WheelContext.Provider value={values}>
+            <WheelContext.Provider
+                value={{
+                    allHistory: props.allHistory || [],
+                    phones: props.phones || [],
+                    cancelHandler: cancel,
+                    startHandler: run,
+                }}
+            >
                 <DrawMain />
-                {/*倒计时*/}
-                <CountdownClient />
-                {/*分享*/}
-                {values.activate && values.activate?.end_time > 0 ? <ShareClient /> : null}
+
                 <div className={styles.cashWheelClient}>
                     {/*<CashMainCom />*/}
                     {/*<DrawContent />*/}

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

@@ -15,9 +15,16 @@ const getPhoneNumbersApi = () => {
     });
 };
 
+const getWheelApi = () => {
+    return server.request<any[]>({
+        url: "/v1/api/user/turntable/phone_number",
+        method: "POST",
+    });
+};
 const CashWheel = async () => {
     const historyResult = await getAllHistoryApi();
     const phonesResult = await getPhoneNumbersApi();
+
     return <CashWheelClient allHistory={historyResult.data} phones={phonesResult.data} />;
 };
 

src/components/Box/WheelModal.module.scss

@@ -261,18 +261,18 @@
 
 
 .flashing{
-  animation: bling  0.8s ease  infinite alternate;
+  animation: bling  0.15s linear  infinite  alternate;
 }
 @keyframes bling {
     0% {
-      opacity: 0;
+      opacity: 1;
     }
     100% {
-      opacity: 1;
+      opacity: 0;
     }
 }
 .closeFlashing{
-  animation: closebling 0.8s  ease infinite alternate;
+  //animation: closebling 0.2s  ease infinite ;
 }
 @keyframes closebling {
   0% {

src/components/Box/WheelModal.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { getWheelApi, getWheelRunApi, WheelsType } from "@/api/cashWheel";
+import { getWheelRunApi, WheelsType } from "@/api/cashWheel";
 import Progress from "@/app/[locale]/(navbar)/cashback/@cashbackInfo/components/Progress";
 import { useRouter } from "@/i18n/routing";
-import { getToken } from "@/utils/Cookies";
+import useWheelStore from "@/stores/useWheelStore";
 import { percentage, timeFormat } from "@/utils/methods";
 import { LuckyWheel } from "@lucky-canvas/react";
 import NumberFlow from "@number-flow/react";
@@ -147,11 +147,19 @@ const defaultConfig = {
  */
 export interface WheelProps {
     isRotate: boolean;
-    wheel: Partial<WheelsType>;
     onRotateEnd?: () => void;
+    onRotateBefore?: () => void;
+    onRotateDisable?: () => void;
 }
+const noop = () => {};
 export const WheelClient: FC<WheelProps> = (props) => {
-    const { isRotate, wheel, onRotateEnd } = props;
+    const { isRotate, onRotateEnd = noop, onRotateBefore = noop, onRotateDisable = noop } = props;
+
+    const { statusWheel, currentWheel, setWheel } = useWheelStore((state) => ({
+        statusWheel: state.status,
+        currentWheel: state.currentWheel,
+        setWheel: state.setWheel,
+    }));
 
     // 选中 dom
     const activeRef = useRef<HTMLImageElement | null>(null);
@@ -161,9 +169,7 @@ export const WheelClient: FC<WheelProps> = (props) => {
 
     const router = useRouter();
 
-    const current = { ...(wheel?.activities?.[0] || {}), ...(wheel?.activate || {}) };
-
-    const [buttonText, setButtonText] = useState<string>("0"); // 0 -> false 1:true
+    const [buttonText, setButtonText] = useState<number>(0); // 0 -> false 1:true
 
     // 当前中奖
     const currentWin = useRef<any>({});
@@ -174,17 +180,22 @@ export const WheelClient: FC<WheelProps> = (props) => {
         }
         // 正在旋转中
         if (rotating.current) return;
-        if (!current.can) return;
-        // 如果包含还没领取的奖励
-        if (wheel.not_receive && wheel.not_receive.length > 0) return;
-        // 当前活动不存在
-        if (!current.id) return;
+
+        // 如果是没有旋转次数
+        if (currentWheel.can === 0) {
+            onRotateDisable();
+        }
+        if (statusWheel !== 1) return;
+
         // 开始旋转中
         wheelRef.current?.play();
         // 点击抽奖按钮会触发star回调
         rotating.current = true;
 
-        getWheelRunApi({ activity_id: current.id })
+        // 开始旋转前回调
+        onRotateBefore();
+
+        getWheelRunApi({ activity_id: currentWheel.id! })
             .then((res) => {
                 setTimeout(() => {
                     wheelRef.current?.stop(res.data.index);
@@ -200,23 +211,26 @@ export const WheelClient: FC<WheelProps> = (props) => {
         activeRef.current!.style.display = "block";
 
         if (currentWin.current.amount > 0) {
-            setButtonText(`+${currentWin.current.amount}`);
+            setButtonText(currentWin.current.amount);
         } else {
-            setButtonText(`${current.can || 0}`);
+            setButtonText(currentWheel.can || 0);
         }
 
         setTimeout(() => {
-            onRotateEnd && onRotateEnd();
-            rotating.current = false;
-            if (activeRef.current) {
-                activeRef.current.style.display = "none";
-            }
+            setWheel().then((data) => {
+                rotating.current = false;
+                if (activeRef.current) {
+                    activeRef.current.style.display = "none";
+                }
+                onRotateEnd && onRotateEnd();
+                setButtonText(data?.activate.can || 0);
+            });
         }, 2000);
     };
 
     useEffect(() => {
-        setButtonText(`${current.can || 0}`);
-    }, [wheel]);
+        setButtonText(currentWheel.can || 0);
+    }, [currentWheel.can]);
 
     return (
         <div className={"relative w-[100%] transform"}>
@@ -252,7 +266,11 @@ export const WheelClient: FC<WheelProps> = (props) => {
                 className={"absolute left-[11.5%] top-[41%] z-10 w-[76%]"}
             />
             {/*定位到中心圆*/}
-            <div className={"absolute bottom-[0px] z-10 h-[3.15rem] w-[100%] p-[0.1389rem]"}>
+            <div
+                className={
+                    "absolute bottom-[0px] z-10 h-[3.12rem] w-[100%] p-[0.1389rem] pb-[0.1597rem]"
+                }
+            >
                 <div className={"relative flex h-[100%] w-[100%] justify-center"}>
                     <img src="/wheels/light-1.png" alt="" className={`absolute h-[100%]`} />
                     <img
@@ -260,11 +278,11 @@ export const WheelClient: FC<WheelProps> = (props) => {
                         alt=""
                         className={`absolute h-[100%] ${styles.flashing}`}
                     />
-                    <img
-                        src="/wheels/light-3.png"
-                        alt=""
-                        className={`absolute h-[100%] ${styles.closeFlashing}`}
-                    />
+                    {/*<img*/}
+                    {/*    src="/wheels/light-3.png"*/}
+                    {/*    alt=""*/}
+                    {/*    className={`absolute h-[100%] ${styles.closeFlashing}`}*/}
+                    {/*/>*/}
                     <img
                         ref={activeRef}
                         src="/wheels/active-bg.png"
@@ -274,7 +292,8 @@ export const WheelClient: FC<WheelProps> = (props) => {
 
                     <div
                         className={
-                            "relative h-[100%] w-[2.62rem] rounded-[50%] px-[0.0486rem] py-[0.1736rem]"
+                            "relative h-[100%] w-[2.62rem] rounded-[50%] px-[0.0486rem]" +
+                            " py-[0.1536rem]"
                         }
                     >
                         <LuckyWheel
@@ -294,23 +313,28 @@ export const WheelClient: FC<WheelProps> = (props) => {
                             }
                         >
                             <div
-                                className={"flex justify-center"}
+                                className={"relative flex h-[1.8rem] justify-center"}
                                 onClick={() => startRotate("desktop")}
                             >
                                 <Image
                                     src={"/wheels/pointer.png"}
-                                    className={"h-[0.8722rem] object-contain"}
-                                    width={120}
+                                    className={"h-[1.8rem]" + " object-contain"}
+                                    width={200}
                                     height={150}
                                     alt={"start"}
                                 />
-                                <span
+                                <div
                                     className={
-                                        "absolute bottom-[43%] translate-y-1/2 text-[#ffdb0e]"
+                                        "absolute bottom-[50%] translate-y-1/2 text-center" +
+                                        " text-[#ffdb0e]" +
+                                        " text-[0.2222rem] font-black"
                                     }
                                 >
-                                    {buttonText}
-                                </span>
+                                    <p className={"-mt-[0.2778rem] h-[0.22rem]"}>
+                                        {buttonText > 0 && buttonText !== 1 ? "+" : ""}
+                                    </p>
+                                    <NumberFlow value={buttonText} />
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -352,35 +376,48 @@ export const LeftListClient = () => {
         </>
     );
 };
-const DetailClient = (props: { wheel: Partial<WheelsType>; onUnload: () => void }) => {
-    const { wheel, onUnload } = props;
+const DetailClient = (props: { onUnload: () => void }) => {
+    const { onUnload } = props;
     const router = useRouter();
+    const { totalCount, currentWheel, setWheel } = useWheelStore((state) => ({
+        statusWheel: state.status,
+        currentWheel: state.currentWheel,
+        setWheel: state.setWheel,
+        totalCount: state.totalCount,
+    }));
+
+    const [count, setCount] = useState(0);
     const goPage = () => {
         router.push("/cashWheel");
         onUnload();
     };
+
+    useEffect(() => {
+        setCount(currentWheel.amount || 0);
+    }, [currentWheel.amount]);
     return (
         <div className={`${styles.cashMain} ${styles.cashMain} ${styles.type1}`}>
             <div className={styles.haveCash}>
                 <img src="/wheel/cash.png" alt="" className={styles.cashImg} />
                 <div className={styles.cash}>
-                    <NumberFlow value={wheel.activate?.amount || 0} prefix={"R$ "} trend={+1} />
+                    <NumberFlow value={count} prefix={"R$ "} trend={+1} />
                 </div>
                 <span className={styles.withdraw}>
                     <img src="/wheel/pix.png" alt="" /> SACAR{" "}
                 </span>
             </div>
             <div className={styles.progress}>
-                <div className={styles.num}> {percentage(wheel.activate?.amount || 0, 100)}%</div>
+                <div className={styles.num}> {percentage(count, 100)}%</div>
                 {/*<div className={styles.bar}>*/}
                 {/*    <span style={{ width: "calc(97.15% - 1rem)" }}></span>*/}
                 {/*</div>*/}
-                <Progress num={percentage(wheel.activate?.amount || 0, 100)} />
+                <Progress num={percentage(count, 100)} />
             </div>
             <div className={styles.needCash}>
                 Ainda e necessário{" "}
                 <span className={styles.needCashNum}>
-                    <NumberFlow value={100 - (wheel.activate?.amount || 0)} trend={-1} />
+                    {" "}
+                    <NumberFlow value={totalCount - count} trend={-1} />
                 </span>{" "}
                 para realizar do saque{" "}
             </div>
@@ -393,7 +430,7 @@ const DetailClient = (props: { wheel: Partial<WheelsType>; onUnload: () => void
             >
                 Reivindique mais para sacar
             </div>
-            <div className={"mt-[10px] h-[400px] w-[100%] overflow-hidden"}>
+            <div className={"mt-[10px] h-[2.0833rem] w-[100%] overflow-hidden"}>
                 <LeftListClient />
             </div>
         </div>
@@ -404,45 +441,19 @@ const WheelModal = forwardRef<WheelModalProps, Props>(function RedPacketModal(pr
     const [visible, setVisible] = useState(false);
 
     const [detailsVisible, setDetailsVisible] = useState(false);
-    const [wheel, setWheel] = useState<Partial<WheelsType>>({});
 
     useImperativeHandle(ref, () => {
         return {
             onClose: () => setVisible(false),
-            onOpen: (wheelValue: WheelsType) => {
+            onOpen: () => {
                 setVisible(true);
-                setWheel(wheelValue);
             },
         };
     });
 
-    const getWheel = () => {
-        if (!getToken()) return Promise.resolve(undefined);
-        return getWheelApi().then((res) => {
-            setWheel(res.data);
-            return res.data;
-        });
-    };
-
-    // useEffect(() => {
-    //     getWheel().then((res) => {
-    //         if (
-    //             res &&
-    //             res.activities &&
-    //             res.activities.length > 0 &&
-    //             res.activate.can &&
-    //             !res.not_receive?.length
-    //         ) {
-    //             setVisible(true);
-    //         }
-    //     });
-    // }, []);
-
     const onRotateEnd = () => {
         setVisible(false);
         setDetailsVisible(true);
-
-        getWheel();
     };
 
     const onUnload = () => {
@@ -451,7 +462,7 @@ const WheelModal = forwardRef<WheelModalProps, Props>(function RedPacketModal(pr
     return (
         <>
             <Mask visible={detailsVisible} getContainer={null} destroyOnClose={true}>
-                <div className={"absolute top-[10%] z-50 w-[100%] p-[0.1389rem]"}>
+                <div className={"absolute top-[18%] z-50 w-[100%] px-[0.1389rem]"}>
                     <div className={"rounded-[0.0694rem] bg-[#232327FF] p-[0.0694rem]"}>
                         <div className={"flex items-center"}>
                             <div className={"flex flex-1"}>
@@ -469,7 +480,7 @@ const WheelModal = forwardRef<WheelModalProps, Props>(function RedPacketModal(pr
                             ></span>
                         </div>
 
-                        <DetailClient wheel={wheel} onUnload={onUnload} />
+                        <DetailClient onUnload={onUnload} />
                     </div>
                 </div>
             </Mask>
@@ -481,7 +492,7 @@ const WheelModal = forwardRef<WheelModalProps, Props>(function RedPacketModal(pr
                     <span className={"iconfont icon-guanbi"}></span>
                 </div>
                 <div className={"absolute top-[5%] w-[100%]"}>
-                    <WheelClient isRotate={true} wheel={wheel} onRotateEnd={onRotateEnd} />
+                    <WheelClient isRotate={true} onRotateEnd={onRotateEnd} />
                 </div>
             </Mask>
         </>

src/components/Card/Card.tsx

@@ -57,6 +57,7 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
             } else {
                 Toast.show("data Error");
             }
+            Toast.clear();
         });
     };
     return (

src/stores/useWheelStore.ts

@@ -0,0 +1,64 @@
+import { Activate, Activity, getWheelApi, NotReceive, WheelsType } from "@/api/cashWheel";
+import { getToken } from "@/utils/Cookies";
+import { create } from "zustand";
+
+/**
+ * 轮盘store
+ */
+interface CurrentWheel extends Activate, Activity {}
+
+interface State {
+    status: 1 | 2 | 3; // status: 1可旋转 2可领取 3 不展示
+    currentWheel: Partial<CurrentWheel>;
+    totalCount: number;
+    receiveTarget: Partial<NotReceive>;
+}
+
+interface Action {
+    setWheel: () => Promise<WheelsType | undefined>;
+}
+
+const initialState: State = {
+    status: 3,
+    currentWheel: {},
+    totalCount: 100,
+    receiveTarget: {},
+};
+
+/**
+ * @description 系统配置
+ */
+export const useWheelStore = create<State & Action>()((set, get) => {
+    return {
+        ...initialState,
+        setWheel: () => {
+            if (!getToken()) return Promise.resolve(undefined);
+            return getWheelApi().then((res) => {
+                const { data } = res;
+                if (Array.isArray(data)) {
+                    set((state) => ({ ...state, status: 3 }));
+                    return undefined;
+                }
+                let source = { ...(data.activities?.[0] || {}), ...data.activate };
+                if (data.not_receive) {
+                    set((state) => ({
+                        ...state,
+                        status: 2,
+                        currentWheel: source,
+                        receiveTarget: data.not_receive[0],
+                    }));
+                    return data;
+                }
+                if (source.can === 1 && data.not_receive === null) {
+                    set((state) => ({ ...state, status: 1, currentWheel: source }));
+                    return data;
+                }
+                set((state) => ({ ...state, status: 3, currentWheel: source }));
+                return data;
+            });
+        },
+        reset: () => set(initialState),
+    };
+});
+
+export default useWheelStore;