Mail new 动画

src/Global.js

@@ -58,4 +58,10 @@ global.showDropCoins=()=>{
 global.hideDropCoins=()=>{
     if (global.dropCoins)global.dropCoins.hide();
 }
+global.showMailNew=()=>{
+    if (global.mailNew)global.mailNew.show();
+}
+global.hideMailNew=()=>{
+    if (global.mailNew)global.mailNew.hide();
+}
 //wd pass

src/components/MailNew.jsx

@@ -0,0 +1,52 @@
+import {useEffect, useState} from "react";
+import Spring from "@components/Spring";
+import Lottie from "lottie-react";
+import mailnew from "@assets/newmail.json";
+const objInfo={
+    timerIds:[]
+}
+const MailNew = ({...props}) => {
+    const [isShow, setIsShow] = useState(false);
+    const show=()=>{
+        setIsShow(true);
+    }
+    const hide=()=>{
+        setIsShow(false);
+    }
+    const resetTimer=()=>{
+        if (objInfo.timerIds){
+            for (let i = 0; i < objInfo.timerIds; i++) {
+                clearTimeout(objInfo.timerIds[i]);
+            }
+            objInfo.timerIds=[];
+        }
+    }
+    useEffect(()=>{
+        const mailNew={
+            show,
+            hide
+        };
+        global.mailNew=mailNew;
+    },[])
+    useEffect(() => {
+        resetTimer();
+        if (isShow){
+            let timer=setTimeout(()=>{
+                setIsShow(false);
+            },4000);
+            objInfo.timerIds.push(timer);
+        }
+    },[isShow])
+    return (
+        <>
+            {
+                isShow?(
+                    <Spring {...props} className="d-flex align-items-center justify-content-center flex-1 w-100 h-100 top_view">
+                        <Lottie loop={false} autoplay={true} className="top_view"  animationData={mailnew}  />
+                    </Spring>
+                ):(<></>)
+            }
+        </>
+    )
+}
+export default MailNew;

src/features/actions/hallClient.js

@@ -1,6 +1,6 @@
 import {APP_SERVER} from "@constants/app";
 import {connectServer, disconnectServer, onDisconnect, sendToServer} from "@features/socketSlice";
-import {reqGameInfo} from "@features/api";
+import {reqGameInfo, reqMailCheck} from "@features/api";
 import {updatePayFinish} from "@features/paySlice";
 import {trackEvent} from "../../tracking/TrackAll";
 import {toast} from "react-toastify";
@@ -75,6 +75,9 @@ const roger=(message,dispatch)=>{
                         case "refresh_mail":{
                             //有新的邮件刷新邮件
                             //播放动画newmail.json
+                            global.showMailNew();
+                            //刷新mail 红点
+                            dispatch(reqMailCheck());
                             break;
                         }
                     }

src/layout/Layout.jsx

@@ -29,6 +29,7 @@ import {ROUTE_PATH, ROUTE_TYPE_FULL, ROUTE_TYPE_IN} from "@constants/routes";
 import DropCoins from "@components/DropCoins";
 import {toast} from "react-toastify";
 import useEdgeGesture from "@hooks/useEdgeGesture";
+import MailNew from "@components/MailNew";
 const PageNotFound = lazy(() => import('@pages/PageNotFound'));
 
 const Layout=({...props})=>{
@@ -126,6 +127,7 @@ const Layout=({...props})=>{
         return (
             <>
                 <DropCoins/>
+                <MailNew/>
             </>
         )
     }