老虎机需求修改

src/components/ModalPopup/SlotsModal/index.tsx

@@ -2,9 +2,11 @@
 import { getGiveReceiveApi, SlotParams, SlotType } from "@/api/slots";
 import { flatPoint } from "@/utils/methods";
 import { SlotMachine } from "@lucky-canvas/react";
-import { Mask, Toast } from "antd-mobile";
+import { Mask, Toast, Button } from "antd-mobile";
 import clsx from "clsx";
 import { useTranslations } from "next-intl";
+import { useRouter } from "@/i18n/routing";
+import TipsModal, { ModalProps } from "@/components/TipsModal";
 import { FC, forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
 import animation from "../animations.module.scss";
 
@@ -167,10 +169,11 @@ const ColorWill = () => {
 interface SlotsClientProps {
     slotSource: SlotType;
     onRotateAfter?: () => void;
+    showTipsModal?: (data: any) => void;
 }
 
 const SlotsClient: FC<SlotsClientProps> = (props) => {
-    const { slotSource, onRotateAfter } = props;
+    const { slotSource, onRotateAfter, showTipsModal } = props;
     const slotsRef = useRef<any>(null);
     const t = useTranslations();
 
@@ -220,16 +223,35 @@ const SlotsClient: FC<SlotsClientProps> = (props) => {
         const Interval = setInterval(() => {
             const num = Math.floor(Math.random() * 99) + 1;
             setRatio(() => numberPadding(num, 2));
-        }, 500);
+        }, 200);
+
+        // setTimeout(() => {
+        //     slotsRef.current?.stop(numberPadding(5733));
+        //     setTimeout(() => {
+        //         Interval && clearInterval(Interval);
+        //         setRatio(numberPadding(73, 2));
+        //     }, 1600);
+            
+        //     setTimeout(() => {
+        //         showTipsModal && showTipsModal({amount: 5666, rollover: 38})
+        //     }, 3000);
+        // }, 3000);
 
         // 数据获取
         getGiveReceiveApi(params as SlotParams)
             .then((res) => {
                 setTimeout(() => {
-                    Interval && clearInterval(Interval);
                     const rollover = flatPoint(res.data.rollover / 100);
                     slotsRef.current?.stop(numberPadding(res.data.amount));
-                    setRatio(numberPadding(rollover > 100 ? 99 : rollover, 2));
+
+                    setTimeout(() => {
+                        Interval && clearInterval(Interval);
+                        setRatio(numberPadding(rollover > 100 ? 99 : rollover, 2));
+                    }, 1600);
+
+                    setTimeout(() => {
+                        showTipsModal && showTipsModal({amount: res.data.amount, rollover: rollover > 100 ? 99 : rollover})
+                    }, 3000);
                 }, 3000);
             })
             .catch((error) => {
@@ -293,6 +315,20 @@ const SlotsClient: FC<SlotsClientProps> = (props) => {
                             </div>
                             <div className={"z-10 flex h-[100%] items-center"}>
                                 <img src="/slots/ratio/x.png" alt="" className={"h-[0.4167rem]"} />
+
+                                {/* <div className={"w-[0.4rem] h-[0.4514rem]"} style={{position: 'relative'}}>
+                                    <img src="/slots/ratio/0.png" alt="" className={"h-[0.4514rem]"} style={{position: 'absolute', left: 0, top: 0,  opacity: ratio[0] == 0 ? 1: 0}} />
+                                    <img src="/slots/ratio/1.png" alt="" className={"h-[0.4514rem]"} style={{position: 'absolute', left: 0, top: 0, opacity: ratio[0] == 1 ? 1: 0}} />
+                                    <img src="/slots/ratio/2.png" alt="" className={"h-[0.4514rem]"} style={{position: 'absolute', left: 0, top: 0, opacity: ratio[0] == 2 ? 1: 0}} />
+                                    <img src="/slots/ratio/3.png" alt="" className={"h-[0.4514rem]"} style={{position: 'absolute', left: 0, top: 0, opacity: ratio[0] == 3 ? 1: 0}} />
+                                    <img src="/slots/ratio/4.png" alt="" className={"h-[0.4514rem]"} style={{position: 'absolute', left: 0, top: 0, opacity: ratio[0] == 4 ? 1: 0}} />
+                                    <img src="/slots/ratio/5.png" alt="" className={"h-[0.4514rem]"} style={{position: 'absolute', left: 0, top: 0, opacity: ratio[0] == 5 ? 1: 0}} />
+                                    <img src="/slots/ratio/6.png" alt="" className={"h-[0.4514rem]"} style={{position: 'absolute', left: 0, top: 0, opacity: ratio[0] == 6 ? 1: 0}} />
+                                    <img src="/slots/ratio/7.png" alt="" className={"h-[0.4514rem]"} style={{position: 'absolute', left: 0, top: 0, opacity: ratio[0] == 7 ? 1: 0}} />
+                                    <img src="/slots/ratio/8.png" alt="" className={"h-[0.4514rem]"} style={{position: 'absolute', left: 0, top: 0, opacity: ratio[0] == 8 ? 1: 0}} />
+                                    <img src="/slots/ratio/9.png" alt="" className={"h-[0.4514rem]"} style={{position: 'absolute', left: 0, top: 0, opacity: ratio[0] == 9 ? 1: 0}} />
+                                </div> */}
+
                                 {ratio.map((n, index) => (
                                     <img
                                         key={index}
@@ -381,6 +417,20 @@ const SlotsModal = forwardRef<SlotModalRefProps, Props>(function SlotsModal(prop
         onAfterHandler();
     };
 
+    // 提示框
+    const tipsRef = useRef<ModalProps>(null);
+    const [obterFree, setObterFree] = useState<any>({amount: 0, rollover: 0});
+    const showTipsModal = (data: any) => {
+        setObterFree({...data})
+        setVisible(false)
+        tipsRef.current?.onOpen();
+    }
+    const router = useRouter();
+    const goGame = () => {
+        tipsRef.current?.onClose();
+        router.push(`/freeGames`);
+    };
+
     return (
         <>
             <Mask visible={visible} destroyOnClose={true} getContainer={null}>
@@ -407,9 +457,30 @@ const SlotsModal = forwardRef<SlotModalRefProps, Props>(function SlotsModal(prop
                             <img src="/slots/will-light3.png" alt="" className={light4} />
                         </div>
                     </div>
-                    {slotSource && <SlotsClient onRotateAfter={handler} slotSource={slotSource} />}
+                    {slotSource && <SlotsClient onRotateAfter={handler} slotSource={slotSource} showTipsModal={showTipsModal}/>}
                 </div>
             </Mask>
+            <TipsModal ref={tipsRef} title={'Obter Free'}>
+                <p className={"text-left text-[0.12rem] font-medium text-[#666]"}>
+                    Ganhe moedas grátis：{obterFree.amount}
+                </p>
+                <p className={"text-left text-[0.12rem] font-medium text-[#666] mt-[.06rem]"}>
+                    Requisito de rolagem：{obterFree.rollover}X
+                </p>
+                <div className={"mt-[0.08rem] flex justify-center"}>
+                    <Button
+                        color={"primary"}
+                        className={"mx-auto"}
+                        style={{
+                            "--background-color": "var(--primary-color)",
+                            "--border-color": "var(--primary-color)",
+                        }}
+                        onClick={goGame}
+                    >
+                        Iniciar o jogo
+                    </Button>
+                </div>
+            </TipsModal>
         </>
     );
 });