添加掉落金币效果

src/App.js

@@ -54,6 +54,7 @@ import {
     reqWithdrawBaseInfo
 } from "@features/api";
 import LoadingScreen from "@components/LoadingScreen";
+import DropCoins from "@components/DropCoins";
 import {reqPayConfig} from "@features/paySlice";
 import {connectHall, disconnectHall} from "@features/actions/hallClient";
 import * as toast from "react-toastify";
@@ -238,6 +239,7 @@ const App = () => {
         <CacheProvider value={cacheRtl}>
             <MuiThemeProvider theme={muiTheme}>
                 <ThemeProvider theme={{theme: theme}}>
+                    <DropCoins/>
                     <SidebarProvider>
                         <ThemeStyles/>
                         <ToastContainer theme={theme} autoClose={2500}

src/components/DropCoins.jsx

@@ -0,0 +1,45 @@
+// components
+import Lottie from 'lottie-react';
+import Spring from '@components/Spring';
+
+// assets
+// import ball from '@assets/logo.json';
+import logo from '@assets/dropcoin.json';
+import flycoin from '@assets/flycoin.json';
+import {useRef} from "react";
+import styled from "styled-components/macro";
+
+
+const DropCoins = ({...props}) => {
+    const coinRef = useRef(null);
+    const coins = [useRef(null),useRef(null),useRef(null),useRef(null)]
+    setTimeout(()=>{
+        coinRef.current.setSpeed(1.5);
+        coinRef.current.play()
+    },100)
+
+    coins.forEach((coin,i)=>{
+        setTimeout(()=>{
+            coin.current.play();
+            // coin.current.setSpeed(1.4+i*0.2);
+        },i*500)
+        setTimeout(()=>{
+            coin.current.play();
+            coin.current.setSpeed(0.9-(3-i)*0.1);
+        },i*500+100)
+    })
+
+
+    return (
+        <Spring {...props} className="d-flex align-items-center justify-content-center flex-1 w-100 h-100 top_view">
+            <Lottie lottieRef={coinRef} loop={false} autoplay={false} className="top_view"  animationData={logo} speed={1.5}  />
+            {/*<Lottie loop={false}   animationData={flycoin} className="top_view" style={{marginLeft:"-15rem"}} />*/}
+            <Lottie loop={false} lottieRef={coins[0]} autoplay={false} animationData={flycoin} className="top_view" style={{marginLeft:"-70%",marginTop:"-25rem",width:"25rem"}} />
+            <Lottie loop={false} lottieRef={coins[1]} autoplay={false} animationData={flycoin} className="top_view" style={{marginLeft:"-20%",marginTop:"-35rem",width:"18rem"}} />
+            <Lottie loop={false} lottieRef={coins[2]} autoplay={false} animationData={flycoin} className="top_view"  style={{marginRight:"-20%",marginTop:"-15rem",width:"20rem"}} />
+            <Lottie loop={false} lottieRef={coins[3]} autoplay={false} animationData={flycoin} className="top_view"  style={{marginRight:"-60%",marginTop:"-20rem",width:"22rem"}}/>
+        </Spring>
+    )
+}
+
+export default DropCoins

src/constants/app.js

@@ -8,9 +8,9 @@ const APP_GENDER={
     OTHER:2,
 }
 const APP_CHANNEL={
-    PackageName:"com.ouro777.j15",
-    Channel:"com.ouro777.j15",
-    ChannelNumber:271
+    // PackageName:"com.ouro777.j15",
+    // Channel:"com.ouro777.j15",
+    // ChannelNumber:271
 }
 const APP_SERVER={
     SERVER_URL:"wss://wstest.ouro777.com:10000",

src/features/actions/hallClient.js

@@ -17,9 +17,14 @@ const roger=(message,dispatch)=>{
     if (message){
         let {cmd}=message;
         switch (cmd){
-            case "pay_finish":{
-                //充值完成 message={Golds:12.xx,PayNum:10}
-                handlePayFinish(message,dispatch)
+            case "pay_finish": {
+                //充值完成 message={cmd:...,data:{Golds:12.xx,PayNum:10}}
+                handlePayFinish(message, dispatch)
+                break;
+            }
+            case "call_client":{
+                //调用客户端接口，比如将进入游戏的客户端踢出返回，强制登出等 message={cmd:"",data:{}}
+
                 break;
             }
         }

src/features/api.js

@@ -24,7 +24,7 @@ import {
 } from "@api/config";
 import Http from "@api/request";
 import {updateGameList} from "@features/pageSlice";
-import {APP_CHANNEL} from "@constants/app";
+// import {APP_CHANNEL} from "@constants/app";
 import {updateAddScore, updateInsurePass, updateUserInfo, updateUserScore} from "@features/mainSlice";
 import {formatCash, localStorageGet, sleep} from "@utils/helpers";
 import {LOCAL_ACTIVITY_C, LOCAL_CUSTOM_LOCK, LOCAL_WHEEL_INVITE_CODE} from "@constants/localkey";
@@ -218,8 +218,8 @@ export const reqFirstPayConfig=createAsyncThunk(
         let params={
             url:APP_FIRSTPAY_CONFIG,
             params:{
-                Channel:APP_CHANNEL.Channel,
-                ChannelNumber:APP_CHANNEL.ChannelNumber,
+                // Channel:APP_CHANNEL.Channel,
+                // ChannelNumber:APP_CHANNEL.ChannelNumber,
                 // UserID:arg
             }
         }
@@ -254,7 +254,7 @@ export const reqPaymentOrder=createAsyncThunk(
                 buyIp:"",
                 pay_type:payType,
                 GiftsID:GiftsID,
-                pck:APP_CHANNEL.Channel,
+                // pck:APP_CHANNEL.Channel,
                 eventType:1,
                 AdId:user.GlobalUID,
                 userName:user.NickName,

src/styles/_utils.scss

@@ -169,6 +169,10 @@
 .z-2 {
     z-index: 2;
 }
+.top_view {
+    position: absolute;
+    z-index: 1201;
+}
 
 .text-uppercase {
     text-transform: uppercase;