fix: slots 第一版

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

@@ -6,6 +6,7 @@ import UserRecharge, { ModalRefProps, Timeout } from "@/components/Box/UserRecha
 import WheelModal, { WheelModalProps } from "@/components/Box/WheelModal";
 
 import { getWheelApi } from "@/api/cashWheel";
+import SlotsModal from "@/components/Box/SlotsModal";
 import { Link } from "@/i18n/routing";
 import { useGlobalNoticeStore } from "@/stores/useGlobalNoticeStore";
 import { useSocialStore } from "@/stores/useSocials";
@@ -216,6 +217,9 @@ const ServiceWidget: FC<Props> = (props) => {
             {/*  轮盘弹窗 */}
             <WheelModal ref={wheelModalRef} />
 
+            {/*随机送*/}
+            <SlotsModal />
+
             <div
                 className={`grid`}
                 style={{

src/components/Box/SlotsModal.tsx

@@ -0,0 +1,162 @@
+import { WheelModalProps } from "@/components/Box/WheelModal";
+import { SlotMachine } from "@lucky-canvas/react";
+import { Mask } from "antd-mobile";
+import { forwardRef, memo, useImperativeHandle, useRef, useState } from "react";
+import animation from "./animations.module.scss";
+interface Props {}
+
+const randomColor = () => {
+    const r = Math.floor(Math.random() * 256);
+    const g = Math.floor(Math.random() * 256);
+    const b = Math.floor(Math.random() * 256);
+    const a = Math.random();
+    let rgba = `rgba(${r},${g},${b},${a})`;
+    return rgba;
+};
+const SlotsClient = () => {
+    const prizes = [
+        {
+            background: "#bac5ee",
+            borderRadius: "10px",
+        },
+        {
+            background: "#bac5ee",
+            borderRadius: "10px",
+        },
+    ];
+    const slots = [{}, {}, {}, {}];
+
+    const slotsRef = useRef(null);
+
+    return (
+        <>
+            <div className={"border-[1px] border-[red]"}>
+                <div className={"relative m-[0.1389rem] h-[3.3333rem]"}>
+                    <img
+                        src={"/slots/slots-bg.png"}
+                        className={"h-[100%] w-[100%]" + "object-cover" + " " + ""}
+                    />
+                    <div className={"absolute top-0 h-[2.47rem]"}>
+                        <img
+                            src={"/slots/light-1.png"}
+                            alt={""}
+                            className={`h-[100%] ${animation.flashingAnimation}`}
+                        />
+                        <img
+                            src="/slots/light-2.png"
+                            alt=""
+                            className={`absolute top-0 h-[100%] ${animation.antiFlashingAnimation} `}
+                        />
+                        <div
+                            className={
+                                "absolute left-[52%] top-0 -translate-x-1/2" +
+                                " h-[0.625rem] w-[1.6rem]" +
+                                " border-[1px] border-[green]"
+                            }
+                        >
+                            {/*<div*/}
+                            {/*    className={*/}
+                            {/*        "h-[0.625rem] w-[1.8rem] " +*/}
+                            {/*        " relative flex items-center justify-center border-[1px]" +*/}
+                            {/*        " border-[blue]"*/}
+                            {/*    }*/}
+                            {/*>*/}
+                            {/*    <div*/}
+                            {/*        className={*/}
+                            {/*            "absolute left-0 top-0 flex w-[100%] border-4" +*/}
+                            {/*            " -z-1 h-[100%] flex-wrap overflow-hidden px-[10px]"*/}
+                            {/*        }*/}
+                            {/*    >*/}
+                            {/*        {Array(200)*/}
+                            {/*            .fill(0)*/}
+                            {/*            .map((n, index) => {*/}
+                            {/*                return (*/}
+                            {/*                    <div*/}
+                            {/*                        style={{ background: randomColor() }}*/}
+                            {/*                        key={index}*/}
+                            {/*                        className={*/}
+                            {/*                            "h-[0.0694rem] w-[0.0694rem]" +*/}
+                            {/*                            " rounded-[50%]"*/}
+                            {/*                        }*/}
+                            {/*                    ></div>*/}
+                            {/*                );*/}
+                            {/*            })}*/}
+                            {/*    </div>*/}
+                            {/*    <div className={"flex h-[100%] items-center"}>*/}
+                            {/*        <img*/}
+                            {/*            src={"/slots/0.png"}*/}
+                            {/*            alt={""}*/}
+                            {/*            className={"relative z-10 h-[0.4rem]"}*/}
+                            {/*        />*/}
+                            {/*    </div>*/}
+                            {/*</div>*/}
+                        </div>
+                    </div>
+
+                    {/*<div*/}
+                    {/*    className={*/}
+                    {/*        "absolute bottom-[50%] left-0 flex w-[100%] translate-y-1/2 " +*/}
+                    {/*        " p-[20px]" +*/}
+                    {/*        " justify-center"*/}
+                    {/*    }*/}
+                    {/*></div>*/}
+                </div>
+            </div>
+
+            <div className={"hidden"}>
+                <SlotMachine
+                    slots={slots}
+                    ref={slotsRef}
+                    width="440px"
+                    height="201px"
+                    prizes={prizes}
+                ></SlotMachine>
+            </div>
+        </>
+    );
+};
+const SlotsModal = forwardRef<WheelModalProps, Props>(function RedPacketModal(props, ref) {
+    const [visible, setVisible] = useState(true);
+
+    const [detailsVisible, setDetailsVisible] = useState(false);
+
+    useImperativeHandle(ref, () => {
+        return {
+            onClose: () => setVisible(false),
+            onOpen: () => {
+                setVisible(true);
+            },
+        };
+    });
+
+    const onRotateEnd = () => {
+        setVisible(false);
+        setDetailsVisible(true);
+    };
+
+    const onUnload = () => {
+        setDetailsVisible(false);
+    };
+    return (
+        <>
+            <Mask visible={detailsVisible} getContainer={null} destroyOnClose={true}>
+                <div className={"absolute top-[18%] z-50 w-[100%] px-[0.1389rem]"}>
+                    <div>中奖</div>
+                </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 top-[18%] w-[100%]"}>
+                    <SlotsClient />
+                </div>
+            </Mask>
+        </>
+    );
+});
+
+export default memo(SlotsModal);

src/components/Box/WheelModal.module.scss

@@ -258,82 +258,3 @@
   }
 }
 
-
-
-.flashing{
-  animation: bling  0.15s linear  infinite  alternate;
-}
-@keyframes bling {
-    0% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-}
-.closeFlashing{
-  //animation: closebling 0.2s  ease infinite ;
-}
-@keyframes closebling {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-.floatAnimation {
-  animation: floating 2s  ease  infinite alternate;
-}
-@keyframes floating {
-  0% {
-    transform: translateY(0);
-  }
-  100% {
-    transform: translateY(20px);
-  }
-}
-
-.rotateAnimation{
-  animation: rotating 10s  linear  infinite ;
-}
-@keyframes rotating {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  20% {
-    transform: rotate(72deg);
-  }
-
-  40% {
-    transform: rotate(144deg);
-  }
-
-  60% {
-    transform: rotate(216deg);
-  }
-
-  80% {
-    transform: rotate(288deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-
-}
-
-
-.activeAnimation{
-  animation: activing  0.3s ease  infinite alternate;
-}
-@keyframes activing {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}

src/components/Box/WheelModal.tsx

@@ -11,6 +11,7 @@ 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";
+import animation from "./animations.module.scss";
 type Props = {
     onAfterHandler?: () => void;
 };
@@ -239,14 +240,14 @@ export const WheelClient: FC<WheelProps> = (props) => {
                 alt=""
                 width={750}
                 height={300}
-                className={`absolute h-[100%] ${styles.floatAnimation}`}
+                className={`absolute h-[100%] ${animation.floatAnimation}`}
             />
             <div className={"absolute h-[3.0833rem] w-[100%] overflow-hidden"}>
                 <Image
                     width={750}
                     height={300}
                     src="/wheels/bg-light.png"
-                    className={`absolute -top-[0.2778rem] left-0 -z-[1] ${styles.rotateAnimation}`}
+                    className={`absolute -top-[0.2778rem] left-0 -z-[1] ${animation.rotateAnimation}`}
                     alt=""
                 />
             </div>
@@ -272,11 +273,15 @@ export const WheelClient: FC<WheelProps> = (props) => {
                 }
             >
                 <div className={"relative flex h-[100%] w-[100%] justify-center"}>
-                    <img src="/wheels/light-1.png" alt="" className={`absolute h-[100%]`} />
+                    <img
+                        src="/wheels/light-1.png"
+                        alt=""
+                        className={`absolute h-[100%] ${animation.flashingAnimation}`}
+                    />
                     <img
                         src="/wheels/light-2.png"
                         alt=""
-                        className={`absolute h-[100%] ${styles.flashing}`}
+                        className={`absolute h-[100%] ${animation.antiFlashingAnimation}`}
                     />
                     {/*<img*/}
                     {/*    src="/wheels/light-3.png"*/}
@@ -286,7 +291,7 @@ export const WheelClient: FC<WheelProps> = (props) => {
                     <img
                         ref={activeRef}
                         src="/wheels/active-bg.png"
-                        className={`absolute z-10 ml-[0.0694rem] mt-[0.1389rem] hidden h-[1.3889rem] ${styles.activeAnimation}`}
+                        className={`absolute z-10 ml-[0.0694rem] mt-[0.1389rem] hidden h-[1.3889rem] ${animation.activeAnimation}`}
                         alt=""
                     />
 

src/components/Box/animations.module.scss

@@ -0,0 +1,81 @@
+$time: 0.8s;
+.flashingAnimation {
+  animation: flashing $time  linear infinite ;
+}
+@keyframes flashing {
+  0%, 50% {
+    opacity: 0;
+  }
+  50.01%, 100% {
+    opacity: 1;
+  }
+}
+.antiFlashingAnimation {
+  animation: antiFlashing $time  linear infinite ;
+  animation-delay: $time;
+}
+@keyframes antiFlashing {
+  0%, 50% {
+    opacity: 1;
+  }
+  50.01%, 100% {
+    opacity: 0;
+  }
+}
+
+
+
+.activeAnimation{
+  animation: activing  0.3s ease  infinite alternate;
+}
+@keyframes activing {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+
+.rotateAnimation{
+  animation: rotating 10s  linear  infinite ;
+}
+@keyframes rotating {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  20% {
+    transform: rotate(72deg);
+  }
+
+  40% {
+    transform: rotate(144deg);
+  }
+
+  60% {
+    transform: rotate(216deg);
+  }
+
+  80% {
+    transform: rotate(288deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+
+}
+
+.floatAnimation {
+  animation: floating 2s  ease  infinite alternate;
+}
+@keyframes floating {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(20px);
+  }
+}

src/components/Box/index.tsx

@@ -165,6 +165,7 @@ const Box: FC<PropsWithChildren<Props>> = (props) => {
             </Tag>
 
             <RedPacketModal ref={packetModalRef} />
+
             {pwaModal}
         </>
     );

src/types/lucky-canvas.d.ts

@@ -1,15 +1,18 @@
 declare module "@lucky-canvas/react" {
     import { FC } from "react";
     interface LuckyCanvasProps<B = any, P = any, A = any> {
-        ref: any;
+        ref?: any;
         width: string;
         height: string;
-        blocks: B[];
-        prizes: P[];
+        blocks?: B[];
+        prizes?: P[];
         buttons?: A[];
         onStart?: () => void;
-        onEnd: (p: P) => void;
-        defaultConfig: any;
+        onEnd?: (p: P) => void;
+        slots?: any[];
+        defaultConfig?: any;
     }
     export const LuckyWheel: FC<LuckyCanvasProps>;
+
+    export const SlotMachine: FC<LuckyCanvasProps>;
 }