no message

src/App.js

@@ -44,7 +44,14 @@ import Layout from "@layout/Layout";
 import {getBFP, getFetchStatus, getUserID, getUserInfo} from '@features/mainSlice';
 import {useDispatch, useSelector} from "react-redux";
 import {REQ_STATUS} from "@api/config";
-import {reqCustomService, reqGetRoutes, reqMailCheck, reqTurnplateIndex, reqWithdrawBaseInfo} from "@features/api";
+import {
+    reqCustomService,
+    reqGetRoutes,
+    reqMailCheck,
+    reqRedpackCheck, reqRedpackConfig,
+    reqTurnplateIndex,
+    reqWithdrawBaseInfo
+} from "@features/api";
 import LoadingScreen from "@components/LoadingScreen";
 import {reqPayConfig} from "@features/paySlice";
 import {connectHall, disconnectHall} from "@features/actions/hallClient";
@@ -130,29 +137,9 @@ const App = () => {
             }
         }
     }
-    //初始化
-    useEffect(() => {
-        // scroll to top on route change
-        loadFont();
-        //请求routes
-        startReqRoutes();
-        checkInviteCode();
-        appRef.current && appRef.current.scrollTo(0, 0);
-        preventDefault();
-        reProgressierInstallBanner();
-        // preventTouchMove();
-        return ()=>{
-
-        }
-    }, []);
-    useEffect(()=>{
+    const reqInitData=()=>{
         if (userID!=0){
             dispatch(connectHall());
-            //withdraw
-            // dispatch(reqWithdrawBaseInfo());
-            //turnplate
-            // dispatch(reqTurnplateIndex());
-            //rest code
             localStorageSet(LOCAL_WHEEL_INVITE_CODE,"");
             localStorageSet(LOCAL_ACTIVITY_C,"");
             dispatch(reqMailCheck());
@@ -166,6 +153,30 @@ const App = () => {
         //customer
         dispatch(reqCustomService());
         dispatch(reqTurnplateIndex());
+        //redpack
+        dispatch(reqRedpackCheck());
+        dispatch(reqRedpackConfig());
+    }
+    const appInitData=()=>{
+        // scroll to top on route change
+        loadFont();
+        //请求routes
+        startReqRoutes();
+        checkInviteCode();
+        appRef.current && appRef.current.scrollTo(0, 0);
+        preventDefault();
+        reProgressierInstallBanner();
+        // preventTouchMove();
+    }
+    //初始化
+    useEffect(() => {
+        appInitData();
+        return ()=>{
+
+        }
+    }, []);
+    useEffect(()=>{
+        reqInitData();
     },[userID])
     //转盘
     useEffect(()=>{

src/api/config.js

@@ -73,3 +73,8 @@ export const APP_MAIL_CHECK=BASE_PREFIX+"mail/check";
 export const APP_MAIL_READ=BASE_PREFIX+"mail/read";
 export const APP_MAIL_DEL=BASE_PREFIX+"mail/del";
 export const APP_MAIL_TAKE=BASE_PREFIX+"mail/take";
+// /game/redpack/check
+// /game/redpack/receive
+export const APP_REDPACK_CHECK=BASE_PREFIX+"redpack/check";
+export const APP_REDPACK_RECEIVE=BASE_PREFIX+"redpack/receive";
+export const APP_REDPACK_CONFIG=BASE_PREFIX+"redpack/config";

src/api/request.js

@@ -39,7 +39,7 @@ const service = axios.create({
     baseURL: BASE_API,
     withCredentials: true,
     timeout: 10000, // Request timeout
-    retry:5,//重复5次
+    retry:2,//重复5次
     retryDelay:1000
 });
 //出错重试 retry

src/app/store.js

@@ -7,6 +7,7 @@ import PayReducer from '@features/paySlice';
 import SocketReducer from '@features/socketSlice';
 import TurnplateReducer from '@features/turnplateSlice';
 import MailReducer from '@features/mailSlice';
+import RedPackReducer from '@features/redpackSlice';
 export default configureStore({
     reducer: {
         // todos: TodosReducer,
@@ -16,7 +17,8 @@ export default configureStore({
         pay:PayReducer,
         socket:SocketReducer,
         turnplate:TurnplateReducer,
-        mail:MailReducer
+        mail:MailReducer,
+        redpack:RedPackReducer
     },
     middleware:(getDefaultMiddleware => {
         let middlewares=getDefaultMiddleware();

src/components/AutoWinList/index.jsx

@@ -301,12 +301,14 @@ const AutoWinList=({data})=>{
                                         {/*    effect={"blur"}*/}
                                         {/*    wrapperClassName={`lazy-image ${styles.game_icon_m}`}*/}
                                         {/*/>*/}
-                                        <LazyImgix
-                                            src={item.img}
-                                            alt={"game-icon"}
-                                            width={48}
-                                            className={`${styles.game_icon_m}`}
-                                        />
+                                        <div className={styles.game_icon_m}>
+                                            <LazyImgix
+                                                src={item.img}
+                                                alt={"game-icon"}
+                                                width={48}
+                                                className={`${styles.game_icon_m}`}
+                                            />
+                                        </div>
                                         <div className={styles.user_name_m}>
                                             {item.nick}
                                         </div>

src/features/api.js

@@ -14,7 +14,7 @@ import {
     APP_LOGOUT, APP_MAIL_CHECK, APP_MAIL_DEL, APP_MAIL_LIST, APP_MAIL_READ, APP_MAIL_TAKE,
     APP_PAGE_MODULES, APP_PAY_ORDER_LIST,
     APP_PAYMENT_ORDER,
-    APP_RECHARGE_CONFIG,
+    APP_RECHARGE_CONFIG, APP_REDPACK_CHECK, APP_REDPACK_CONFIG, APP_REDPACK_RECEIVE,
     APP_REGISTER,
     APP_ROUTES, APP_TURNPLATE_BONUS, APP_TURNPLATE_HELP, APP_TURNPLATE_INDEX, APP_TURNPLATE_KAN,
     APP_WITHDRAW_BASE_INFO,
@@ -25,7 +25,7 @@ import {
 import Http from "@api/request";
 import {updateGameList} from "@features/pageSlice";
 import {APP_CHANNEL} from "@constants/app";
-import {updateInsurePass, updateUserInfo, updateUserScore} from "@features/mainSlice";
+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";
 import {toast} from "react-toastify";
@@ -566,4 +566,45 @@ export const reqMailTake=createAsyncThunk(
         return response;
     }
 )
+//redpack
+export const reqRedpackCheck=createAsyncThunk(
+    APP_REDPACK_CHECK,
+    async (arg,thunkAPI)=>{
+        let params={
+            url:APP_REDPACK_CHECK,
+        }
+        const response=await Http.get(params);
+        return response;
+    }
+)
+export const reqRedpackRecive=createAsyncThunk(
+    APP_REDPACK_RECEIVE,
+    async (arg,thunkAPI)=>{
+        let params={
+            url:APP_REDPACK_RECEIVE,
+        }
+        const response=await Http.get(params);
+        if (response&&response.code===200){
+            let data=response.data;
+            if (data){
+                let amount=data.amount;
+                if (amount!=null){
+                    let score=amount/global.CASH_BASE;
+                    thunkAPI.dispatch(updateAddScore(score));
+                }
+            }
+        }
+        return response;
+    }
+)
+export const reqRedpackConfig=createAsyncThunk(
+    APP_REDPACK_CONFIG,
+    async (arg,thunkAPI)=>{
+        let params={
+            url:APP_REDPACK_CONFIG,
+        }
+        const response=await Http.get(params);
+        return response;
+    }
+)
 //api

src/features/mainSlice.js

@@ -351,6 +351,12 @@ export const Main=createSlice({
                 if(state.userInfo)state.userInfo.Score=Number(score);
             }
         },
+        updateAddScore:(state, action)=>{
+            let score=action.payload;
+            if (score!=null){
+                if(state.userInfo)state.userInfo.Score=state.userInfo.Score+Number(score);
+            }
+        }
     },
     extraReducers: (builder) => {
         // Add reducers for additional action types here, and handle loading state as needed
@@ -368,7 +374,7 @@ export const Main=createSlice({
         buildReqReducer(builder,reqCustomLeaveMsg,reducerCustomLeaveMsg,customLeaveMsgStatus);
     },
 })
-export const {logout,updateUserInfo,updateUserScore} = Main.actions;
+export const {logout,updateUserInfo,updateUserScore,updateAddScore} = Main.actions;
 //数据获取
 export const getFetchStatus=(state)=>{
     return state.main.status;

src/features/redpackSlice.js

@@ -0,0 +1,131 @@
+import {createSlice} from "@reduxjs/toolkit";
+import {REQ_STATUS} from "@api/config";
+import {buildReqReducer, reqRedpackCheck, reqRedpackConfig, reqRedpackRecive} from "@features/api";
+import {getHttpMsg} from "@utils/helpers";
+import {toast} from "react-toastify";
+const objInfo={}
+const clearCDTimer=()=>{
+    if (objInfo.cdTimer!=null){
+        clearInterval(objInfo.cdTimer);
+        objInfo.cdTimer=null;
+    }
+}
+const checkRedpackLeftTime=(data)=>{
+    clearCDTimer();
+    let next_in_seconds=Number(data.next_in_seconds);
+    let deadline=data.deadline;
+    if (next_in_seconds>0){
+        objInfo.cdTimer=setInterval(()=>{
+            let now=Date.now();
+            let during=deadline-now;
+            during=Math.floor(during/1000);
+            if (during<=0){
+                global.dispatch(reqRedpackCheck());
+                clearCDTimer();
+            }
+            else{
+                global.dispatch(updateCD(during));
+            }
+        },1000);
+    }
+}
+
+const reducerRedpackCheck=(state,action,arg)=>{
+    let payload=action.payload;
+    // payload={"data":{"status":1,"max":24680},"result":"","msg":"success","code":200};
+    if (payload&&payload.code===200){
+        let data=payload.data;
+        if (data){
+            let next_in_seconds=data.next_in_seconds?Number(data.next_in_seconds):0;
+            let deadline=Date.now()+(next_in_seconds*1000);
+            data.deadline=deadline;
+            state.redPackData=data;
+            checkRedpackLeftTime(data);
+        }
+    }
+}
+const redpackCheckStatus=(state,status,arg)=>{
+    state.status.RedpackCheck=status;
+}
+const reducerRedpackRecive=(state,action,arg)=>{
+    let payload=action.payload;
+    // let msg=getHttpMsg(payload);
+    if (payload&&payload.code===200){
+        let data=payload.data;
+        if (data){
+            let amount=data.amount;
+            // state.redPackData.amount=amount;
+            // state.redPackData.status=2;
+            state.redPackData=Object.assign({},state.redPackData,{amount:amount,status:2})
+        }
+        // if (msg!=null&&msg!==""){
+        //     toast.success(msg);
+        // }
+    }else
+    {
+        let obj=payload.msg;
+        let msg="";
+        if (obj){
+            if (obj.message!=null){
+                msg=obj.message;
+            }
+        }
+        if (msg!=null&&msg!==""){
+            toast.error(msg);
+        }
+    }
+}
+const redpackReciveStatus=(state,status,arg)=>{
+    state.status.RedpackRecive=status;
+}
+const reducerRedpackConfig=(state,action,arg)=>{
+    let payload=action.payload;
+    if (payload&&payload.code===200){
+        state.config=payload.data;
+    }
+}
+const redpackConfigStatus=(state,status,arg)=>{
+    state.status.RedpackConfig=status;
+}
+
+export const RedpackSlice = createSlice({
+    name: "redpack",
+    initialState: {
+        status:{
+            RedpackCheck:REQ_STATUS.NONE,
+            RedpackRecive:REQ_STATUS.NONE,
+            RedpackConfig:REQ_STATUS.NONE,
+        },
+        redPackData:null,
+        config:[]
+    },
+    reducers:{
+        updateCD:((state, action) => {
+            let payload=action.payload;
+            if (payload!=null){
+                if (state.redPackData!=null){
+                    state.redPackData.next_in_seconds=payload;
+                }
+            }
+        }),
+        updateAlRecivedStatus:((state, action) => {
+            state.redPackData.status=-1;
+        })
+    },
+    extraReducers: (builder) => {
+        buildReqReducer(builder,reqRedpackCheck,reducerRedpackCheck,redpackCheckStatus);
+        buildReqReducer(builder,reqRedpackRecive,reducerRedpackRecive,redpackReciveStatus);
+        buildReqReducer(builder,reqRedpackConfig,reducerRedpackConfig,redpackConfigStatus);
+    }
+})
+export const {updateCD,updateAlRecivedStatus}=RedpackSlice.actions;
+export const getRedPackInfo=(state)=>{
+    return state.redpack.redPackData;
+}
+export const getRedPackConfig=(state)=>{
+    return state.redpack.config;
+}
+export const getReciveStatus=(state)=>{
+    return state.redpack.status.RedpackRecive;
+}
+export default RedpackSlice.reducer;

src/layout/Routes/RouteContainer.jsx

@@ -1,5 +1,5 @@
 import {ROUTE_TYPE_FULL, ROUTE_TYPE_IN, ROUTE_TYPE_POP, ROUTE_TYPE_POP_OR_FULL,ROUTE_TYPE_CUSTOM} from "@constants/routes";
-import React from "react";
+import React, {cloneElement} from "react";
 import Popup from "@components/Popup";
 import SubScreen from "@components/SubScreen";
 import {useNavigate} from "react-router-dom";

src/locales/languages/en_US.json

@@ -456,7 +456,8 @@
     },
     "redOpen": {
       "time_tips": "Collection Schedule:",
-      "max_drop": "Max drop "
+      "max_drop": "Max drop ",
+      "already_collect": "Already collected"
     }
   }
 }

src/utils/helpers.js

@@ -56,6 +56,9 @@ export const preventDefault = () => {
     document.querySelectorAll('a[href="#"]').forEach(a => {
         a.addEventListener('click', e => e.preventDefault());
     });
+    document.addEventListener("click",(e)=>{
+        // console.log(e);
+    })
 }
 
 // get club info by id

src/widgets/WMoneyRain/index.jsx

@@ -13,8 +13,16 @@ import time_icon from "@assets/moneyrain/shijian_bai.png";
 import star_icon from "@assets/moneyrain/bofang_bai.png";
 import rain_bg1 from "@assets/moneyrain/rain_bg1.png";
 import rain_bg2 from "@assets/moneyrain/rain_bg2.png";
-import {format2LongChips, stringFormat} from "@utils/helpers";
+import {format2LongChips, formatCash, formatTime, stringFormat} from "@utils/helpers";
 import WRainAni from "@widgets/WMoneyRain/WRainAni/WRainAni";
+import {useDispatch, useSelector} from "react-redux";
+import {getReciveStatus, getRedPackConfig, getRedPackInfo, updateAlRecivedStatus} from "@features/redpackSlice";
+import {useEffect, useState} from "react";
+import {reqRedpackCheck, reqRedpackRecive} from "@features/api";
+import {getConfig} from "@features/paySlice";
+import {REQ_STATUS} from "@api/config";
+import SmallLoading from "@components/SmallLoading";
+import CountUp from "react-countup";
 const i18n=global.i18n;
 const StyledRules=styled.div`
     background: url(${rain_bg3});
@@ -30,6 +38,30 @@ const StyledRedOpen=styled.div`
 `
 
 const WMoneyRain = ({close}) => {
+    const redpack=useSelector(getRedPackInfo);
+    const config=useSelector(getRedPackConfig);
+    const reciveStatus=useSelector(getReciveStatus);
+    const [open,setOpen]=useState(true);
+    const dispatch=useDispatch();
+    useEffect(()=>{
+        dispatch(reqRedpackCheck());
+        return ()=>{
+
+        }
+    },[]);
+    useEffect(()=>{
+        if (!open){
+            if (redpack&&redpack.status===2){
+                dispatch(updateAlRecivedStatus())
+            }
+        }
+    },[open])
+    const getDropMax=()=>{
+        if (redpack==null)return 0;
+        let max=Number(redpack.max);
+        max=max*global.CASH_BASE;
+        return max;
+    }
     const getRuleTxt=(totalStr)=>{
         let txt=[];
         for (let i = 0; i < 4; i++) {
@@ -39,23 +71,47 @@ const WMoneyRain = ({close}) => {
         }
         return txt;
     }
+    const getTimeConfig=()=>{
+        let timeData=[];
+        if (config){
+            for (let i = 0; i < config.length; i++) {
+                let item=config[i];
+                if (item){
+                    let str=item.StartTime+"-"+item.EndTime;
+                    timeData.push(str);
+                }
+            }
+        }
+        return timeData;
+    }
+    const onClickCollect=()=>{
+        if (redpack==null)return;
+        if (redpack.status!==1)return;
+        if (reciveStatus===REQ_STATUS.LOADING)return;
+        dispatch(reqRedpackRecive());
+    }
+    const onClose=()=>{
+        setOpen(false);
+        if(close)close();
+    }
     const renderRules=()=>{
         let toatlNum=10000000;
-        let maxNum=777700;
+        let maxNum=getDropMax();
         let totalStr=format2LongChips(toatlNum);
         let maxStr=format2LongChips(maxNum);
-        let timeData=[
-            "12:00-12:59",
-            "14:00-14:59",
-            "18:00-18:59",
-            "20:00-20:59"
-        ];
+        // let timeData=[
+        //     "12:00-12:59",
+        //     "14:00-14:59",
+        //     "18:00-18:59",
+        //     "20:00-20:59"
+        // ];
+        let timeData=getTimeConfig();
         let timeLen=timeData.length;
         let rules=getRuleTxt(totalStr);
         return (
-            <Grow in={true} timeout={500}>
+            <Grow in={open} timeout={500}>
                 <StyledRules className={styles.rule_container}>
-                    <button className={styles.close} onClick={close}>
+                    <button className={styles.close} onClick={onClose}>
                         <img src={close_bai}/>
                     </button>
                     <div className={styles.title}>
@@ -114,13 +170,13 @@ const WMoneyRain = ({close}) => {
     }
     const renderRedPack=()=>{
         let toatlNum=10000000;
-        let maxNum=777700;
+        let maxNum=getDropMax();
         let totalStr=format2LongChips(toatlNum);
         let maxStr=format2LongChips(maxNum);
         return (
-            <Grow in={true} timeout={500}>
+            <Grow in={open} timeout={500}>
                 <StyledRedPack className={styles.red_pack_con}>
-                    <button className={styles.close} onClick={close}>
+                    <button className={styles.close} onClick={onClose}>
                         <img src={close_bai}/>
                     </button>
                     <div className={styles.title}>
@@ -137,8 +193,9 @@ const WMoneyRain = ({close}) => {
                         </div>
                     </div>
                     <div className={styles.red_btn_con}>
-                        <button className={styles.red_btn}>
-                            {i18n.t("moneyRain.redPack.btn")}
+                        <button className={styles.red_btn} onClick={onClickCollect}>
+                            {reciveStatus===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"}></SmallLoading>):(i18n.t("moneyRain.redPack.btn"))}
+                            {/*{i18n.t("moneyRain.redPack.btn")}*/}
                         </button>
                     </div>
                 </StyledRedPack>
@@ -146,38 +203,99 @@ const WMoneyRain = ({close}) => {
         )
     }
     const renderRedOpen=()=>{
-        let reciveNum=10000;
-        let maxNum=777700;
-        let maxStr=format2LongChips(maxNum);
-        let reciveStr=format2LongChips(reciveNum);
+        let reciveNum=redpack.amount;
+        // reciveNum=34;
+        let maxNum=getDropMax();
+        let maxStr=global.DOLLAR+" "+format2LongChips(maxNum);
+        let reciveStr=global.DOLLAR+" "+format2LongChips(reciveNum);
+        let next_in_seconds=redpack.next_in_seconds;
+        let timeStr=formatTime(next_in_seconds);
+        return (
+            <Fade in={open} timeout={500}>
+                <Grow in={open} timeout={500}>
+                    <StyledRedOpen className={styles.red_open_con}>
+                        <button className={styles.close} onClick={onClose} style={{right: "0.5rem"}}>
+                            <img src={close_icon}/>
+                        </button>
+                        <div className={styles.red_amount_uint}>{i18n.t("moneyRain.redOpen.max_drop")+maxStr}</div>
+                        {/*<div className={styles.red_amount_recive}>{reciveStr}</div>*/}
+                        <CountUp
+                            start={0}
+                            end={Number(formatCash(reciveNum))}
+                            duration={1}
+                            separator=" "
+                            decimals={2}
+                            prefix={global.DOLLAR+" "}
+                            startOnMount
+                        >
+                            {({ countUpRef, start }) => {
+                                return (
+                                    <div ref={(ref)=>{
+                                        countUpRef.current=ref;
+                                        start();
+                                    }} className={styles.red_amount_recive}/>
+                                )
+                            }}
+                        </CountUp>
+                        {/*<div className={styles.red_open_tips}>*/}
+                        {/*    <div>{i18n.t("moneyRain.redOpen.time_tips")}</div>*/}
+                        {/*    <div className={styles.time}>{timeStr}</div>*/}
+                        {/*</div>*/}
+                    </StyledRedOpen>
+                </Grow>
+            </Fade>
+        )
+    }
+    const renderAlRecived=()=>{
+        let maxNum=getDropMax();
+        let maxStr=global.DOLLAR+" "+format2LongChips(maxNum);
         return (
-            <Grow in={true} timeout={500}>
+            <Grow in={open} timeout={500}>
                 <StyledRedOpen className={styles.red_open_con}>
-                    <button className={styles.close} onClick={close} style={{right: "0.5rem"}}>
+                    <button className={styles.close} onClick={onClose} style={{right: "0.5rem"}}>
                         <img src={close_icon}/>
                     </button>
-                    <div className={styles.red_amount_uint}>{i18n.t("moneyRain.redOpen.max_drop")+maxStr}</div>
-                    <div className={styles.red_amount_recive}>{reciveStr}</div>
-                    <div className={styles.red_open_tips}>
-                        <div>{i18n.t("moneyRain.redOpen.time_tips")}</div>
-                        <div className={styles.time}>12:00:01</div>
-                    </div>
+                    {/*<div className={styles.red_amount_uint}>{i18n.t("moneyRain.redOpen.max_drop")+maxStr}</div>*/}
+                    <div className={styles.red_already_recived}>{i18n.t("moneyRain.redOpen.already_collect")}</div>
                 </StyledRedOpen>
             </Grow>
         )
     }
+    const checkStatusRender=()=>{
+        // return renderAlRecived();
+        // return renderRedOpen();
+        if (redpack===null)return (<></>);
+        let status=redpack.status;
+        //时间未到
+        if (status===0){
+            return renderRules();
+        }
+        //领取
+        else if (status===1){
+            return renderRedPack();
+        }
+        //领取奖励
+        else if (status===2){
+            return renderRedOpen();
+        }
+        else if (status===-1){
+            // return renderAlRecived();
+            return renderRules();
+        }
+    }
     const renderMain = () => {
         return (
             <>
                 {/*{renderRules()}*/}
                 {/*{renderRedPack()}*/}
-                {renderRedOpen()}
+                {/*{renderRedOpen()}*/}
+                {checkStatusRender()}
             </>
         )
     }
     return (
-        <Modal open={true} onClose={close} closeAfterTransition>
-            <Fade in={true} timeout={500}>
+        <Modal open={open} onClose={onClose} closeAfterTransition>
+            <Fade in={open} timeout={500}>
                 <div className={styles.container}>
                     <WRainAni></WRainAni>
                     <div className={styles.content}>

src/widgets/WMoneyRain/styles.module.scss

@@ -202,10 +202,11 @@
   font-size: 1rem;
   font-weight: 600;
   & .red_amount_uint{
+    //margin-top: 1rem;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 1.3rem;
+    font-size: 1.1rem;
     color: #740000;
   }
   & .red_amount_recive{
@@ -213,10 +214,22 @@
     align-items: center;
     justify-content: center;
     margin-top: 4.5rem;
-    font-size: 3.5rem;
+    font-size: 3rem;
     font-weight: bold;
     color: #970000;
   }
+  & .red_already_recived{
+    margin-top: 4.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    font-size: 1.8rem;
+    font-weight: 600;
+    color: #740000;
+    line-height: 3rem;
+    opacity: 0.6;
+  }
   & .red_open_tips{
     margin-top: 3rem;
     display: flex;

src/widgets/WPromotion/index.jsx

@@ -1,11 +1,15 @@
 import styles from './styles.module.scss';
 import Spring from "@components/Spring";
-import React from "react";
+import React, {useEffect} from "react";
 import icon_1 from "@assets/promotion/icon_1.svg";
 import banner_1 from "@assets/promotion/banner_1.png";
 import icon_2 from "@assets/promotion/icon_2.svg";
 import banner_2 from "@assets/promotion/banner_2.png";
 import {useNavigate} from "react-router-dom";
+import {useDispatch, useSelector} from "react-redux";
+import {getRedPackInfo} from "@features/redpackSlice";
+import {formatTime} from "@utils/helpers";
+import {reqRedpackCheck} from "@features/api";
 const icons=[
     null,
     icon_1,
@@ -18,6 +22,8 @@ const banners=[
 ]
 const WPromotion=({close})=>{
     const navigate=useNavigate();
+    const redpack=useSelector(getRedPackInfo);
+    const dispatch=useDispatch();
     let data=[
         {
             id:1,
@@ -34,27 +40,64 @@ const WPromotion=({close})=>{
             link:"#/moneyrain",
         }
     ]
-    const renderList=()=>{
+    useEffect(()=>{
+        dispatch(reqRedpackCheck());
+    },[])
+    const renderRedPackItem=(item)=>{
+        if (redpack==null)return (<></>);
+        let status=redpack.status;
+        let cdLeft=redpack.next_in_seconds;
+        let cdLeftStr=formatTime(cdLeft);
+        return (
+            <>
+                <div className={styles.gift_title}>{status!==0?item.title:cdLeftStr}</div>
+                <button className={styles.git_fun_item} onClick={() => {
+                    navigate(item.link);
+                }}>
+                    <div className={styles.left}>
+                        <div className={styles.icon_con}>
+                            <img className={"iconshake"} src={icons[item.id]}/>
+                            {
+                                status===1? (<div className={styles.red_dot}></div>):(<></>)
+                            }
+                        </div>
+                    </div>
+                    <div className={styles.right}>
+                        <img src={banners[item.id]}/>
+                    </div>
+                </button>
+            </>
+        )
+    }
+    const renderItem = (item) => {
+        if (item.id === 2) return (renderRedPackItem(item));
+        return (
+            <>
+                <div className={styles.gift_title}>{item.title}</div>
+                <button className={styles.git_fun_item} onClick={() => {
+                    navigate(item.link);
+                }}>
+                    <div className={styles.left}>
+                        <div className={styles.icon_con}>
+                            <img className={"iconshake"} src={icons[item.id]}/>
+                            <div className={styles.red_dot}></div>
+                        </div>
+                    </div>
+                    <div className={styles.right}>
+                        <img src={banners[item.id]}/>
+                    </div>
+                </button>
+            </>
+        )
+    }
+    const renderList = () => {
         return (
             <>
                 {
-                    data.map((item,index)=>{
+                    data.map((item, index) => {
                         return (
                             <div key={index} className={styles.gift_item}>
-                                <div className={styles.gift_title}>{item.title}</div>
-                                <button className={styles.git_fun_item} onClick={()=>{
-                                    navigate(item.link);
-                                }}>
-                                    <div className={styles.left}>
-                                        <div className={styles.icon_con}>
-                                            <img className={"iconshake"} src={icons[item.id]}/>
-                                            <div className={styles.red_dot}></div>
-                                        </div>
-                                    </div>
-                                    <div className={styles.right}>
-                                        <img src={banners[item.id]}/>
-                                    </div>
-                                </button>
+                                {renderItem(item)}
                             </div>
                         )
                     })