site_8g/src/components/Box/ActivityMask.tsx

"use client";
import { getUserMoneyApi } from "@/api/user";
import { useRequest } from "ahooks";
import { Mask } from "antd-mobile";
import { motion } from "framer-motion";
import { useState } from "react";
import styles from "./activityMask.module.scss";
const ActivityMask = () => {
    const [count, setCount] = useState<number>(0);

    // const wallet = useWalletStore((state) => state.wallet);
    // useEffect(() => {
    //     if (wallet?.notice?.lose_score > 0) {
    //         setVisible(true);
    //     }
    // }, [wallet?.notice?.lose_score]);

    const { run, cancel } = useRequest(getUserMoneyApi, {
        pollingInterval: 5000,
        pollingWhenHidden: true,
        pollingErrorRetryCount: 3,
        staleTime: 5000,
        onError: (error) => {},
        onSuccess: (res) => {
            if (res.data.notice.lose_score > 0) {
                setCount(res.data.notice.lose_score);
                cancel();
            }
        },
    });

    return (
        <Mask
            visible={!!count}
            destroyOnClose={true}
            getContainer={null}
            onMaskClick={() => {
                setCount(0);
                run();
            }}
        >
            {/*<div*/}
            {/*    className={"absolute right-[0.2083rem] top-[20%] z-50"}*/}
            {/*    onClick={() => setVisible(false)}*/}
            {/*>*/}
            {/*    <span className={"iconfont icon-guanbi"}></span>*/}
            {/*</div>*/}
            <div
                className={"absolute top-[18%] z-50 w-[100%]"}
                onClick={() => {
                    setCount(0);
                    run();
                }}
            >
                <div className={"relative flex h-[4.4653rem] w-[100%] justify-center"}>
                    <img
                        alt={""}
                        src={"/doings/activity.png"}
                        className={"h-[100%]" + " object-contain" + " absolute"}
                    />

                    <motion.div
                        className={"absolute -top-[13%] -z-10 flex h-[4.1667rem] items-center"}
                        animate={{
                            rotate: [0, 90, 180],
                        }}
                        transition={{
                            duration: 10,
                            ease: "linear",
                            repeat: Infinity,
                        }}
                    >
                        <img src="/img/light.png" alt="" />
                    </motion.div>

                    <motion.div
                        className={"absolute -top-[23%] -z-[9] flex h-[4.1667rem] items-center"}
                        animate={{
                            rotate: [0, 90, 180],
                        }}
                        transition={{
                            duration: 20,
                            ease: "linear",
                            repeat: Infinity,
                        }}
                    >
                        <img src="/img/light-1.png" alt="" />
                    </motion.div>

                    <div
                        className={
                            "absolute left-[50%] top-[28%] h-[2.8rem] w-[56%]" +
                            " -translate-x-1/2 p-[0.0694rem]"
                        }
                    >
                        <div className={"mt-[0.35rem] text-center font-[Arial]"}>
                            <div
                                className={styles.ActivityShadow}
                                // @ts-ignore
                                style={{ "--font-size": "0.2583rem" }}
                                data-text={"PRESENTE"}
                            >
                                PRESENTE
                            </div>

                            <div
                                className={`${styles.ActivityShadow} -mt-[0.1389rem]`}
                                // @ts-ignore
                                style={{ "--font-size": "0.4167rem" }}
                                data-text={`R$${count}`}
                            >
                                R${count}
                            </div>
                        </div>

                        <div className={"absolute bottom-0 text-center text-[#663f23]"}>
                            <p>Não tive sorte hoje,</p>
                            <p>Continue com o bom trabalho</p>
                        </div>
                    </div>
                </div>
            </div>
        </Mask>
    );
};

export default ActivityMask;