fix: 更新ui

src/components/Box/WheelModal.module.scss

@@ -261,7 +261,7 @@
 
 
 .flashing{
-  animation: bling  2s ease-out infinite;
+  animation: bling  0.8s ease  infinite alternate;
 }
 @keyframes bling {
     0% {
@@ -272,7 +272,7 @@
     }
 }
 .closeFlashing{
-  animation: closebling 2s ease-out infinite;
+  animation: closebling 0.8s  ease infinite alternate;
 }
 @keyframes closebling {
   0% {
@@ -282,3 +282,15 @@
     opacity: 0;
   }
 }
+
+.floatAnimation {
+  animation: floating 2s  ease  infinite alternate;
+}
+@keyframes floating {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(20px);
+  }
+}

src/components/Box/WheelModal.tsx

@@ -1,15 +1,15 @@
 "use client";
 
-import { getWheelApi, WheelsType } from "@/api/cashWheel";
+import { getWheelApi, 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 { percentage, timeFormat } from "@/utils/methods";
+import { LuckyWheel } from "@lucky-canvas/react";
 import { Mask } from "antd-mobile";
 import Image from "next/image";
 import { FC, forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import styles from "./WheelModal.module.scss";
-
 type Props = {
     onAfterHandler?: () => void;
 };
@@ -180,17 +180,17 @@ export const WheelClient: FC<WheelProps> = (props) => {
         // 点击抽奖按钮会触发star回调
         rotating.current = true;
 
-        // getWheelRunApi({ activity_id: current.id })
-        //     .then((res) => {
-        //         setTimeout(() => {
-        //             wheelRef.current?.stop(res.data.index);
-        //
-        //             currentWin.current = res.data;
-        //         }, 2000);
-        //     })
-        //     .catch(() => {
-        //         wheelRef.current?.init();
-        //     });
+        getWheelRunApi({ activity_id: current.id })
+            .then((res) => {
+                setTimeout(() => {
+                    wheelRef.current?.stop(res.data.index);
+
+                    currentWin.current = res.data;
+                }, 2000);
+            })
+            .catch(() => {
+                wheelRef.current?.init();
+            });
     };
     const endRotate = (prize: any) => {
         rotating.current = false;
@@ -212,7 +212,11 @@ export const WheelClient: FC<WheelProps> = (props) => {
 
     return (
         <div className={"relative w-[100%]"}>
-            <img src="/wheels/aura.png" alt="" className={"absolute h-[100%]"} />
+            <img
+                src="/wheels/aura.png"
+                alt=""
+                className={`absolute h-[100%] ${styles.floatAnimation}`}
+            />
             <img
                 src={"/wheels/wheel-bg.png"}
                 className={"mx-auto h-[5.6rem] w-[100%] object-cover"}
@@ -222,12 +226,7 @@ export const WheelClient: FC<WheelProps> = (props) => {
                 className={"absolute left-[11.5%] top-[41%] z-10 w-[76%]"}
             />
             {/*定位到中心圆*/}
-            <div
-                className={
-                    "absolute bottom-[0px] h-[3.15rem] w-[100%] border-[1px] " +
-                    " border-[1px] p-[0.1389rem]"
-                }
-            >
+            <div className={"absolute bottom-[0px] h-[3.15rem] w-[100%] p-[0.1389rem]"}>
                 <div className={"relative flex h-[100%] w-[100%] justify-center"}>
                     <img src="/wheels/light-1.png" alt="" className={`absolute h-[100%]`} />
                     <img
@@ -241,69 +240,46 @@ export const WheelClient: FC<WheelProps> = (props) => {
                         className={`absolute h-[100%] ${styles.closeFlashing}`}
                     />
 
-                    <div className={"border-[1px] border-[red]"}>1</div>
+                    <div
+                        className={
+                            "relative h-[100%] w-[2.62rem] rounded-[50%] px-[0.0486rem] py-[0.1736rem]"
+                        }
+                    >
+                        <div
+                            className={"absolute bottom-[50%] left-0 z-50 w-[100%] translate-y-1/2"}
+                        >
+                            <div
+                                className={"flex justify-center"}
+                                onClick={() => startRotate("desktop")}
+                            >
+                                <Image
+                                    src={"/wheels/pointer.png"}
+                                    className={"h-[0.8722rem] object-contain"}
+                                    width={120}
+                                    height={150}
+                                    alt={"start"}
+                                />
+                                <span
+                                    className={
+                                        "absolute bottom-[43%] translate-y-1/2 text-[#ffdb0e]"
+                                    }
+                                >
+                                    {buttonText}
+                                </span>
+                            </div>
+                        </div>
+                        <LuckyWheel
+                            ref={wheelRef}
+                            width="2.52rem"
+                            height="2.52rem"
+                            blocks={blocks}
+                            defaultConfig={defaultConfig}
+                            prizes={prizes}
+                            onEnd={(prize: any) => endRotate(prize)}
+                        />
+                    </div>
                 </div>
-
-                {/*<div*/}
-                {/*    className={*/}
-                {/*        "absolute bottom-[0] left-0 flex h-[100%] w-[100%] justify-center " +*/}
-                {/*        " border-[1px]"*/}
-                {/*    }*/}
-                {/*>*/}
-                {/*    123*/}
-                {/*</div>*/}
             </div>
-
-            {/*<div className={"absolute bottom-[30px] h-[2.7rem] w-[100%] border-[1px] p-[5px]"}>*/}
-            {/*    /!*光圈图片  *!/*/}
-            {/*    <div className={"flex h-[100%] w-[100%] justify-center"}>*/}
-            {/*        <img src="/wheels/light-1.png" alt="" className={"h-[100%]"} />*/}
-            {/*    </div>*/}
-            {/*    /!*转盘*!/*/}
-            {/*    <div*/}
-            {/*        className={*/}
-            {/*            "absolute bottom-[0] flex h-[100%] w-[100%] justify-center p-[0.1389rem]"*/}
-            {/*        }*/}
-            {/*    >*/}
-            {/*        <div*/}
-            {/*            className={*/}
-            {/*                "relative mr-[0.06rem] mt-[0.05rem] h-[2.4rem] w-[2.4rem]" +*/}
-            {/*                " rounded-[50%]"*/}
-            {/*            }*/}
-            {/*        >*/}
-            {/*            <div className={"absolute bottom-[50%] z-50 w-[100%] translate-y-1/2"}>*/}
-            {/*                <div*/}
-            {/*                    className={"flex justify-center"}*/}
-            {/*                    onClick={() => startRotate("desktop")}*/}
-            {/*                >*/}
-            {/*                    <Image*/}
-            {/*                        src={"/wheels/pointer.png"}*/}
-            {/*                        className={"h-[0.6944rem] w-[0.625rem] object-contain"}*/}
-            {/*                        width={90}*/}
-            {/*                        height={120}*/}
-            {/*                        alt={"start"}*/}
-            {/*                    />*/}
-            {/*                    <span*/}
-            {/*                        className={*/}
-            {/*                            "absolute bottom-[40%] translate-y-1/2 text-[#ffdb0e]"*/}
-            {/*                        }*/}
-            {/*                    >*/}
-            {/*                        {buttonText}*/}
-            {/*                    </span>*/}
-            {/*                </div>*/}
-            {/*            </div>*/}
-            {/*            <LuckyWheel*/}
-            {/*                ref={wheelRef}*/}
-            {/*                width="2.4rem"*/}
-            {/*                height="2.4rem"*/}
-            {/*                blocks={blocks}*/}
-            {/*                defaultConfig={defaultConfig}*/}
-            {/*                prizes={prizes}*/}
-            {/*                onEnd={(prize: any) => endRotate(prize)}*/}
-            {/*            />*/}
-            {/*        </div>*/}
-            {/*    </div>*/}
-            {/*</div>*/}
         </div>
     );
 };
@@ -465,12 +441,12 @@ const WheelModal = forwardRef<WheelModalProps, Props>(function RedPacketModal(pr
                 </div>
             </Mask>
             <Mask visible={visible} destroyOnClose={true} getContainer={null}>
-                {/*<div*/}
-                {/*    className={"absolute right-[0.2083rem] top-[18%] z-50"}*/}
-                {/*    onClick={() => setVisible(false)}*/}
-                {/*>*/}
-                {/*    <span className={"iconfont icon-guanbi"}></span>*/}
-                {/*</div>*/}
+                <div
+                    className={"absolute right-[0.2083rem] top-[18%] z-50"}
+                    onClick={() => setVisible(false)}
+                >
+                    <span className={"iconfont icon-guanbi"}></span>
+                </div>
                 <div className={"absolute top-[5%] w-[100%]"}>
                     <WheelClient isRotate={true} wheel={wheel} onRotateEnd={onRotateEnd} />
                 </div>