feat: 修改领取效果

src/app/[locale]/(doings)/jackpot/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { claimActivityReward, getJackpotInfo, GetJackpotResponse } from "@/api/activity";
+import GlobalNotify from "@/components/ModalPopup/GlobalNotifyModal";
 import { formatAmount } from "@/utils";
 import { Toast } from "antd-mobile";
 import clsx from "clsx";
@@ -45,6 +46,9 @@ const Jackpot: React.FC = () => {
     const [actKey, setActKey] = React.useState<number | string>(2);
     const [infoData, setInfoData] = React.useState<GetJackpotResponse>();
     const activeId = searchParams.get("activity_id");
+    const [amount, setAmount] = React.useState<string>("12.30");
+    const [visible, setVisible] = React.useState<boolean>(false);
+
     const images = React.useMemo(() => {
         return [
             "/jackpot/2.png",
@@ -85,6 +89,7 @@ const Jackpot: React.FC = () => {
         if (!activeId) return;
         try {
             const res = await getJackpotInfo({ activity_id: Number(activeId) });
+            setVisible(true);
             if (res.code === 200) {
                 if (res.data.list) {
                     const keys = Object.keys(res.data.list);
@@ -137,11 +142,9 @@ const Jackpot: React.FC = () => {
                 id: curTabData.id,
             });
             if (res.code === 200 && res?.data?.code === 1) {
-                await getInfoData();
-                Toast.show({
-                    content: "Reclamação bem-sucedida",
-                    maskClickable: false,
-                });
+                setAmount(formatAmount(res?.data?.data?.amount));
+                setVisible(true);
+                getInfoData();
             } else {
                 throw new Error(t(`code.400`));
             }
@@ -268,6 +271,12 @@ const Jackpot: React.FC = () => {
                     </div>
                 </div>
             </div>
+            <GlobalNotify
+                amount={amount}
+                visible={visible}
+                onChange={() => setVisible(false)}
+                deraction={5000}
+            ></GlobalNotify>
         </div>
     );
 };

src/app/[locale]/providers.tsx

@@ -231,6 +231,7 @@ const GlobalNotify = () => {
         </>
     );
 };
+
 const Layout = ({ children, themeProps }: ProvidersProps) => {
     const pathname = usePathname();
 

src/components/ModalPopup/GlobalNotifyModal/index.tsx

@@ -0,0 +1,123 @@
+import { Mask } from "antd-mobile";
+import Image from "next/image";
+import React, { FC } from "react";
+
+interface Prop {
+    amount: string;
+    visible: boolean;
+    onChange?: (visible: boolean) => void; // 可选的回调函数，用于更新父组件的 visible 状态
+    deraction?: number;
+}
+
+let timer: number | null = null;
+const GlobalNotify: FC<Prop> = ({ amount, visible = false, onChange, deraction = 0 }) => {
+    const maskClick = React.useMemo(() => {
+        return () => {
+            if (onChange && typeof onChange === "function") {
+                onChange(false);
+            }
+        };
+    }, [onChange]);
+
+    React.useEffect(() => {
+        if (visible && deraction > 0) {
+            setTimeout(() => {
+                maskClick();
+            }, deraction);
+        }
+        if (visible && timer) {
+            clearTimeout(timer);
+            timer = null;
+        }
+    }, [visible, deraction, maskClick]);
+
+    return (
+        <>
+            <Mask visible={visible} onMaskClick={maskClick}>
+                <div className="absolute left-0 top-[22%] w-[100%]">
+                    <div className={"relative h-[2.6rem]"}>
+                        {/*内容*/}
+                        <div
+                            className={"absolute left-0 top-0 z-10 h-[100%] w-[100%] p-[0.4167rem]"}
+                        >
+                            <div className={"flex h-[100%] flex-col items-center justify-center"}>
+                                <p className={"text-[0.2083rem] font-semibold text-[#532e0a]"}>
+                                    GANHE UM BÔNUS DE
+                                </p>
+                                <p
+                                    className={
+                                        "text-[0.5rem] font-black leading-[0.5rem]" +
+                                        " text-[#ec5c52]"
+                                    }
+                                >
+                                    {amount}
+                                </p>
+                            </div>
+                        </div>
+                        {/*title*/}
+                        <Image
+                            src={"/notify/title.png"}
+                            className={
+                                "absolute -top-[0.7rem] left-1/2 -translate-x-1/2" +
+                                " w-[2.7778rem]"
+                            }
+                            alt={""}
+                            width={400}
+                            height={70}
+                        />
+
+                        {/*铃铛*/}
+                        <Image
+                            src={"/notify/bell.png"}
+                            className={
+                                "absolute -top-[0.1rem] left-1/2 w-[0.8333rem] -translate-x-1/2"
+                            }
+                            alt={""}
+                            width={120}
+                            height={70}
+                        />
+                        {/*金币*/}
+                        <Image
+                            src={"/notify/money.png"}
+                            alt={""}
+                            width={750}
+                            className={
+                                "animate-slow-bounce absolute -top-[0.5rem] left-0 h-[3.2rem]"
+                            }
+                            height={512}
+                        />
+                        {/*光*/}
+                        <Image
+                            src={"/notify/light.png"}
+                            alt={""}
+                            width={750}
+                            className={
+                                "absolute -top-[120px] left-0 -z-10 h-[4.2rem] animate-spin" +
+                                " border-[green]"
+                            }
+                            style={{ animationDuration: "4s" }}
+                            height={512}
+                        />
+                        <Image
+                            src={"/notify/light1.png"}
+                            alt={""}
+                            width={750}
+                            className={"absolute -top-[80px] left-0 -z-10 h-[3.2rem]"}
+                            height={512}
+                        />
+                        {/*背景*/}
+                        <Image
+                            src={"/notify/bg.png"}
+                            alt={""}
+                            width={750}
+                            height={424}
+                            className={"mx-auto h-[2.6rem] w-[90%]"}
+                        />
+                    </div>
+                </div>
+            </Mask>
+        </>
+    );
+};
+
+export default GlobalNotify;