feat: 调整动画展示

src/app/[locale]/(navbar)/vip/page.tsx

@@ -180,6 +180,29 @@ const Page = () => {
 
     const doClaim = async (rewardData: RewardItemData) => {
         curReward.current = rewardData;
+        if ([5, 6].includes(rewardData.type)) {
+            const res = rewardData.reward.find((item) => item.amount > 0);
+            if (!res) {
+                const feedRes = await feedback.showModal({
+                    content: (
+                        <div className="pb-[.1rem]">
+                            <div className="flex h-[50px] items-center justify-center text-[20px] font-black">
+                                DICA
+                            </div>
+                            <div className="mt-[.2rem] flex items-center justify-center">
+                                Ser VIP pode desbloquear recompensas
+                            </div>
+                        </div>
+                    ),
+                    confirmText: "Deposite",
+                    width: "90%",
+                });
+                if (feedRes.confirm) {
+                    router.replace("/deposit");
+                }
+                return;
+            }
+        }
         if (rewardData.status !== 1) return;
 
         if (renderType1.includes(rewardData.type) && rewardData.double_pay > 0) {
@@ -254,7 +277,8 @@ const Page = () => {
         if ([5, 6].includes(data.type)) {
             const res = data.reward.find((item) => item.amount > 0);
             if (!res) {
-                text = "Upgrade VIP";
+                text = "Menos de 1? Ajuda!";
+                status = "primary";
             }
         }
         return (
@@ -305,9 +329,9 @@ const Page = () => {
                                             hasAmount = true;
                                         }
                                     });
-                                    if (!hasAmount) {
-                                        isGray = true;
-                                    }
+                                    // if (!hasAmount) {
+                                    //     isGray = true;
+                                    // }
                                 }
                                 return (
                                     <div

src/feedback/WrapHoc/index.module.scss

@@ -14,16 +14,21 @@
     position: relative;
     .mask {
         height: 100%;
-        background: rgba(0, 0, 0, 0.6); /* 半透明白色背景 */
-        color: black; /* 文字颜色 */
+        background: rgba(0, 0, 0, 0.6);
         text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* 文字阴影 */
         backdrop-filter: blur(10px); /* 应用模糊效果 */
+        color: black; /* 文字颜色 */
         max-width: 4.02rem;
         margin: 0 auto;
         position: absolute;
         left: 0;
         top: 0;
         width: 100%;
+        transition: all 0.2s ease-in-out;
+        opacity: 0;
+        &.show {
+            opacity: 1;
+        }
     }
     .container {
         height: 100%;

src/feedback/WrapHoc/index.tsx

@@ -20,8 +20,12 @@ const WrapHoc: React.FC<Props> = ({
     ...props
 }) => {
     const [visible, setVisible] = React.useState(false);
+    const [maskVisible, setMaskVisible] = React.useState(false);
     React.useEffect(() => {
         setVisible(true);
+        setTimeout(() => {
+            setMaskVisible(true);
+        }, 10);
         return () => {
             setVisible(false);
         };
@@ -29,11 +33,15 @@ const WrapHoc: React.FC<Props> = ({
 
     const close = (resData: any) => {
         if (animateTime) {
+            setTimeout(() => {
+                setMaskVisible(false);
+            }, animateTime - 100);
             setTimeout(() => {
                 doClose(resData);
             }, animateTime);
             return;
         }
+        setMaskVisible(false);
         doClose(resData);
     };
     const doClose = (resData: any) => {
@@ -54,10 +62,11 @@ const WrapHoc: React.FC<Props> = ({
     };
 
     if (!visible) return null;
+
     return (
         <div className={styles.wrapBox}>
             <div className={clsx(styles.wrapBoxContainer)}>
-                <div className={styles.mask}></div>
+                <div className={clsx(styles.mask, { [styles.show]: maskVisible })}></div>
                 <div
                     className={clsx(styles.container, styles[position])}
                     onClick={() => {

src/feedback/dialog/component.tsx

@@ -38,7 +38,7 @@ const Components: React.FC<Props> = ({
     React.useEffect(() => {
         setTimeout(() => {
             setAnimateType(1);
-        }, 100);
+        }, 10);
     }, []);
 
     const doClose = (p: keyof ModalBoxResType | Record<string, any>) => {