福利中心

src/App.js

@@ -56,7 +56,7 @@ import {
     reqAgentCheck, reqCheckinCheck,
     reqCustomService, reqFavoGet, reqFirstPayConfig, reqGameActivity, reqGameInfo,
     reqGetRoutes,
-    reqMailCheck,
+    reqMailCheck, reqProtectCheck,
     reqRedpackCheck, reqRedpackConfig,
     reqTurnplateIndex,
     reqWithdrawBaseInfo

src/app/store.js

@@ -11,6 +11,7 @@ import RedPackReducer from '@features/redpackSlice';
 import AgentReducer from '@features/agentSlice';
 import ActivityReducer from '@features/activitySlice';
 import CheckInReducer from '@features/checkInSlice';
+import ProtectReducer from '@features/protectSlice';
 export default configureStore({
     reducer: {
         // todos: TodosReducer,
@@ -25,6 +26,7 @@ export default configureStore({
         agent:AgentReducer,
         activity:ActivityReducer,
         checkIn:CheckInReducer,
+        protect:ProtectReducer,
     },
     middleware:(getDefaultMiddleware => {
         let middlewares=getDefaultMiddleware();

src/constants/app.js

@@ -16,9 +16,15 @@ const APP_SERVER={
     SERVER_URL:"wss://wstest.ouro777.com:10000",
     ROOM_HALL:"hall",
 }
+const APP_WELFARE={
+    PROTECT:0,
+    FIRST_PAY:1,
+    BIND:2
+}
 export {
     APP_THEME,
     APP_GENDER,
     APP_CHANNEL,
-    APP_SERVER
+    APP_SERVER,
+    APP_WELFARE
 };

src/contexts/themeContext.js

@@ -67,6 +67,7 @@ export const ThemeProvider = ({children}) => {
     const isLogin=useSelector(isLogined);
     const user=useSelector(getUserInfo);
     const {preLocation,gameID}=usePreviousRoute();
+    const [welfTabState,setWelfTabState]=useState(-1);
     const initWindowSize=()=>{
         if (isMobile())global.device="m";
         else global.device="d";
@@ -210,7 +211,9 @@ export const ThemeProvider = ({children}) => {
                 toggleSoundOpen,
                 //preroute hook
                 preLocation,
-                gameID
+                gameID,
+                welfTabState,
+                setWelfTabState
             }}>
             {children}
         </ThemeContext.Provider>

src/features/api.js

@@ -31,7 +31,7 @@ import {
     APP_MAIL_TAKE,
     APP_PAGE_MODULES,
     APP_PAY_ORDER_LIST,
-    APP_PAYMENT_ORDER,
+    APP_PAYMENT_ORDER, APP_PROTECT_CHECK, APP_PROTECT_GET,
     APP_RECHARGE_CONFIG,
     APP_REDPACK_CHECK,
     APP_REDPACK_CONFIG,
@@ -829,4 +829,30 @@ export const reqSMSLogin=createAsyncThunk(
         return response;
     }
 )
+//protect
+export const reqProtectCheck=createAsyncThunk(
+    APP_PROTECT_CHECK,
+    async (arg,thunkAPI)=>{
+        let params={
+            url:APP_PROTECT_CHECK,
+        }
+        const response=await Http.get(params);
+        return response;
+    }
+)
+export const reqProtectGet=createAsyncThunk(
+    APP_PROTECT_GET,
+    async (arg,thunkAPI)=>{
+        let params={
+            url:APP_PROTECT_GET,
+        }
+        const response=await Http.get(params);
+        if (response&&response.code==200){
+            // let updateAddScore
+            let ProtectNum=Number(formatCash(arg.ProtectNum));
+            thunkAPI.dispatch(updateAddScore(ProtectNum));
+        }
+        return response;
+    }
+)
 //api

src/features/mainSlice.js

@@ -209,6 +209,7 @@ const reducerRoutes=(state,action)=>{
             if (!!conf.popWheel)popWheel=conf.popWheel;
             //弹出绑定电话奖励,并显示浮标
             if (!!conf.popBindPhone)popBindPhone=hasPhone?0:conf.popBindPhone;
+            console.log("hasPhonehasPhonehasPhonehasPhone"+popBindPhone+"hasPhonehasPhone"+hasPhone)
             //显示首冲浮标
             if (!!conf.firstBonus)firstBonus=conf.firstBonus;
             //显示救济浮标
@@ -806,6 +807,12 @@ export const getUpgradeBonus=(state)=>{
 export const getPopBindPhone=(state)=>{
     return state.main.popBindPhone;
 }
+export const getFirstBonus=(state)=>{
+    return state.main.firstBonus;
+}
+export const getOpenRelief=(state)=>{
+    return state.main.openRelief;
+}
 //数据获取
 export default Main.reducer;
 

src/features/paySlice.js

@@ -283,6 +283,9 @@ export const {updatePayFinish,setChangePayPassType} = Pay.actions;
 export const getConfig=(state)=>{
     return state.pay.config;
 }
+export const getOFirstPay=(state)=>{
+    return state.pay.firstconfig;
+}
 export const getFirstPay=(state)=>{
     let firstconfig=state.pay.firstconfig;
     let config=state.pay.config;

src/features/protectSlice.js

@@ -0,0 +1,63 @@
+import {createSlice} from "@reduxjs/toolkit";
+import {REQ_STATUS} from "@api/config";
+import {buildReqReducer, reqProtectCheck, reqProtectGet} from "@features/api";
+import {getHttpMsg} from "@utils/helpers";
+import {toast} from "react-toastify";
+const reducerProtectCheck=(state,action,arg)=>{
+    let payload=action.payload;
+    if (payload&&payload.code===200){
+        let data=payload.data;
+        if (data!=null){
+            let info=data[0];
+            if (info!=null)state.protectInfo=info;
+        }
+    }
+}
+const protectCheckStatus=(state,status,arg)=>{
+    state.status.ProtectCheck=status;
+}
+
+const reducerProtectGet=(state,action,arg)=>{
+    let payload=action.payload;
+    let msg=getHttpMsg(payload);
+    if (payload&&payload.code===200){
+        let CurProtectTimes=state.protectInfo.CurProtectTimes!=null?Number(state.protectInfo.CurProtectTimes):0;
+        CurProtectTimes=CurProtectTimes-1;
+        state.protectInfo.CurProtectTimes=CurProtectTimes;
+        if (msg!=null&&msg!="")toast.success(msg);
+    }
+    else
+    {
+        if (msg!=null&&msg!="")toast.error(msg);
+    }
+    if (arg.callback!=null)arg.callback(payload);
+}
+const protectGetStatus=(state,status,arg)=>{
+    state.status.ProtectGet=status;
+}
+
+export const ProtectSlice = createSlice({
+    name: "protect",
+    initialState: {
+        protectInfo: {},
+        status:{
+            ProtectCheck:REQ_STATUS.NONE,
+            ProtectGet:REQ_STATUS.NONE,
+        }
+    },
+    reducers: {
+
+    },
+    extraReducers: (builder) => {
+        buildReqReducer(builder,reqProtectCheck,reducerProtectCheck,protectCheckStatus);
+        buildReqReducer(builder,reqProtectGet,reducerProtectGet,protectGetStatus);
+    }
+})
+export const {} = ProtectSlice.actions;
+export const getProtectInfo=(state)=>{
+    return state.protect.protectInfo;
+}
+export const getProtectGetStatus=(state)=>{
+    return state.protect.status.ProtectGet;
+}
+export default ProtectSlice.reducer;

src/locales/languages/en_US.json

@@ -628,7 +628,7 @@
   "protect": {
     "title": "Relief Funds",
     "des": "You can get it when your balance is less than ",
-    "tips": "Only 1 time a day",
+    "tips": "Only {0} time a day",
     "btn_get": "To obtain"
   },
   "firstPay": {

src/locales/languages/es_MX.json

@@ -614,6 +614,15 @@
     "content": "Después de la vinculación, podrás iniciar sesión en el juego a través de tu número de teléfono móvil, ¡lo cual es seguro!",
     "tips": "Cuentas de invitado de Play. Si reemplazas o reinstalas tu teléfono, perderás tu cuenta. Se recomienda la membresía inmediata"
   },
+  "protect": {
+    "title": "Fondos de ayuda",
+    "des": "Puedes obtenerlo cuando tu saldo sea inferior a ",
+    "tips": "Sólo {0} vez al día",
+    "btn_get": "Para obtener"
+  },
+  "firstPay": {
+    "only_need": "Solo necesito"
+  },
   "web": {
     "activity": {
       "redpack_not_available": "No hay RedPack",

src/locales/languages/pt_BR.json

@@ -614,6 +614,15 @@
     "content": "Após a vinculação, você pode fazer login no jogo usando seu número de celular, que é seguro!",
     "tips": "Jogue contas de convidado. Se você substituir ou reinstalar seu telefone, você perderá sua conta. A assinatura imediata é recomendada"
   },
+  "protect": {
+    "title": "Fundos de Socorro",
+    "des": "Você pode obtê-lo quando seu saldo for inferior a ",
+    "tips": "Apenas {0} vez por dia",
+    "btn_get": "Obter"
+  },
+  "firstPay": {
+    "only_need": "Só precisa"
+  },
   "web": {
     "activity": {
       "redpack_not_available": "Não há RedPack",

src/locales/languages/ru_RU.json

@@ -614,6 +614,15 @@
     "content": "После привязки вы сможете войти в игру через свой номер мобильного телефона, это безопасно!",
     "tips": "Играйте в гостевые аккаунты. Если вы замените или переустановите свой телефон, вы потеряете свой аккаунт. Рекомендуется немедленное членство"
   },
+  "protect": {
+    "title": "Фонды помощи",
+    "des": "Вы можете получить его, когда ваш баланс будет меньше ",
+    "tips": "Только {0} раз в день",
+    "btn_get": "Чтобы получить"
+  },
+  "firstPay": {
+    "only_need": "Нужно только"
+  },
   "web": {
     "activity": {
       "redpack_not_available": "Нет RedPack",

src/locales/languages/zh_TW.json

@@ -614,6 +614,15 @@
     "content": "綁定後即可透過手機號碼登入遊戲，安全！",
     "tips": "玩訪客帳戶。如果您更換或重新安裝手機，您將遺\u200B\u200B失您的帳戶。建議立即加入會員"
   },
+  "protect": {
+    "title": "救濟基金",
+    "des": "當您的餘額低於 ",
+    "tips": "每天僅限{0}次",
+    "btn_get": "獲得"
+  },
+  "firstPay": {
+    "only_need": "只需要"
+  },
   "web": {
     "activity": {
       "redpack_not_available": "沒有紅包",

src/widgets/WBindPhone/index.jsx

@@ -14,6 +14,8 @@ import SmallLoading from "@components/SmallLoading";
 import {CircularProgress} from "@mui/material";
 import {toast} from "react-toastify";
 import {reqBindSMS, reqSendCode} from "@features/api";
+import {APP_WELFARE} from "@constants/app";
+import {useThemeProvider} from "@contexts/themeContext";
 const i18n=global.i18n;
 const objInfo={
     cdTimer:null
@@ -28,6 +30,7 @@ const WBindPhone=({})=>{
     const upgradBonus=useSelector(getUpgradeBonus);
     const regCoins=formatCash(upgradBonus,0);
     const dispatch=useDispatch();
+    const {setWelfTabState}=useThemeProvider();
     const {register, handleSubmit, formState: {errors}, control} = useForm({
         defaultValues: {
             phone: '',
@@ -39,9 +42,11 @@ const WBindPhone=({})=>{
     // /bindsms    {phone,code,password,repassword}
     const show=()=>{
         setIsShow(true);
+        setWelfTabState(APP_WELFARE.BIND);
     }
     const hide=()=>{
         setIsShow(false);
+        setWelfTabState(-1);
     }
     const validatePhone=(value)=>{
         return validateCountryPhone(country,value);

src/widgets/WFirstPay/index.jsx

@@ -3,15 +3,33 @@ import styles from "./styles.module.scss";
 import Modal from "@mui/material/Modal";
 import Fade from "@mui/material/Fade";
 import Grow from "@mui/material/Grow";
+import {useDispatch, useSelector} from "react-redux";
+import {getOFirstPay, getPaymentOrderStatus} from "@features/paySlice";
+import {ROUTE_PATH} from "@constants/routes";
+import {REQ_STATUS} from "@api/config";
+import {reqPaymentOrder} from "@features/api";
+import {useNavigate} from "react-router-dom";
+import {getUserInfo} from "@features/mainSlice";
+import SmallLoading from "@components/SmallLoading";
+import {useThemeProvider} from "@contexts/themeContext";
+import {APP_WELFARE} from "@constants/app";
 const i18n=global.i18n;
 
 const WFirstPay=()=>{
     const [isShow, setIsShow] = useState(false);
+    const firstPayConf=useSelector(getOFirstPay);
+    const dispatch = useDispatch();
+    const navigate=useNavigate();
+    const user=useSelector(getUserInfo);
+    const orderStatus=useSelector(getPaymentOrderStatus);
+    const {setWelfTabState}=useThemeProvider();
     const show=()=>{
         setIsShow(true);
+        setWelfTabState(APP_WELFARE.FIRST_PAY);
     }
     const hide=()=>{
         setIsShow(false);
+        setWelfTabState(-1);
     }
     useEffect(()=>{
         const firstPay={
@@ -22,6 +40,79 @@ const WFirstPay=()=>{
         return ()=>{
         }
     },[])
+    const onGetPaymentCallback=()=>{
+        hide();
+        navigate(ROUTE_PATH.PAY_ORDER);
+    }
+    const onGetPaymentOder=(data)=>{
+        if (orderStatus===REQ_STATUS.LOADING)return;
+        data.user=user;
+        data.callback=onGetPaymentCallback;
+        dispatch(reqPaymentOrder(data));
+    }
+    const renderMain=()=>{
+        if (firstPayConf==null)return (<></>);
+        let first_pay=firstPayConf.first_pay;
+        let give=0;
+        let money=0;
+        let total=0;
+        let precent="";
+        if (first_pay!=null){
+            give=Number(first_pay.give);
+            money=Number(first_pay.money);
+            total=give+money;
+            precent='+'+Math.floor(give*100/money)+'%';
+        }
+        return (
+            <div className={styles.f_main}>
+                <img className={styles.bglight} src={require('@assets/firstPay/bglight.png')}/>
+                <div className={styles.pack_con}>
+                    <div className={styles.percent_con}>
+                        <div data-title={precent} className={styles.text}>{precent}</div>
+                    </div>
+                    <div className={styles.bonus_con}>
+                        <div data-title={total} className={styles.bonus}>{total}</div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+    const renderPayBtn=()=>{
+        if (firstPayConf==null)return (<></>);
+        let first_pay=firstPayConf.first_pay;
+        let money=0;
+        let payType=0;
+        if (first_pay!=null){
+            money=Number(first_pay.money);
+            let gear=first_pay.gear;
+            if (gear!=null){
+                gear=JSON.parse(gear);
+                if (gear)gear=gear[0];
+                payType=gear.id;
+            }
+        }
+        return (
+            <button className={styles.f_btnpay} onClick={()=>{
+                onGetPaymentOder({
+                    price:money,
+                    goodsName:"firstpay",
+                    payType:payType,
+                    GiftsID:201
+                })
+            }}>
+                {
+                    orderStatus===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"}/>):(
+                        <>
+                            <span data-title={i18n.t("firstPay.only_need")}
+                                  className={styles.label}>{i18n.t("firstPay.only_need")}</span>
+                            <span data-title={global.DOLLAR + money}
+                                  className={styles.pay_num}>{global.DOLLAR + money}</span>
+                        </>
+                    )
+                }
+            </button>
+        )
+    }
     return (
         <Modal open={isShow} onClose={hide} closeAfterTransition>
             <Fade in={isShow} timeout={500}>
@@ -29,21 +120,8 @@ const WFirstPay=()=>{
                     <Grow in={isShow} timeout={500}>
                         <div className={styles.f_con}>
                             <img className={styles.title} src={require(`@assets/firstPay/${i18n.language}.png`)}/>
-                            <div className={styles.f_main}>
-                                <img className={styles.bglight} src={require('@assets/firstPay/bglight.png')}/>
-                                <div className={styles.pack_con}>
-                                    <div className={styles.percent_con}>
-                                        <div data-title="+50%" className={styles.text}>+50%</div>
-                                    </div>
-                                    <div className={styles.bonus_con}>
-                                        <div data-title={"20"} className={styles.bonus}>20</div>
-                                    </div>
-                                </div>
-                            </div>
-                            <button className={styles.f_btnpay}>
-                                <span data-title={i18n.t("firstPay.only_need")} className={styles.label}>{i18n.t("firstPay.only_need")}</span>
-                                <span data-title={global.DOLLAR+10} className={styles.pay_num}>{global.DOLLAR+10}</span>
-                            </button>
+                            {renderMain()}
+                            {renderPayBtn()}
                         </div>
                     </Grow>
                 </div>

src/widgets/WProtect/index.jsx

@@ -4,14 +4,39 @@ import Modal from "@mui/material/Modal";
 import styles from "./styles.module.scss";
 import Grow from "@mui/material/Grow";
 import SmallLoading from "@components/SmallLoading";
+import {useDispatch, useSelector} from "react-redux";
+import {getProtectGetStatus, getProtectInfo} from "@features/protectSlice";
+import {formatCash, stringFormat} from "@utils/helpers";
+import {REQ_STATUS} from "@api/config";
+import {reqProtectGet} from "@features/api";
+import {APP_WELFARE} from "@constants/app";
+import {useThemeProvider} from "@contexts/themeContext";
 const i18n=global.i18n;
 const WProtect = () => {
     const [isShow, setIsShow] = useState(false);
+    const protectInfo=useSelector(getProtectInfo);
+    const status=useSelector(getProtectGetStatus);
+    const dispatch = useDispatch();
+    const {setWelfTabState}=useThemeProvider();
     const show=()=>{
         setIsShow(true);
+        setWelfTabState(APP_WELFARE.PROTECT);
     }
     const hide=()=>{
         setIsShow(false);
+        setWelfTabState(-1);
+    }
+    const callback=(payload)=>{
+        if (payload&&payload.code===200){
+            hide();
+        }
+    }
+    const onGetProtect=()=>{
+        if (status===REQ_STATUS.LOADING)return;
+        let CurProtectTimes=protectInfo.CurProtectTimes!=null?parseInt(protectInfo.CurProtectTimes):0;
+        if (CurProtectTimes<=0)return;
+        let ProtectNum=protectInfo.ProtectNum!=null?parseInt(protectInfo.ProtectNum):0;
+        dispatch(reqProtectGet({callback:callback,ProtectNum:ProtectNum}));
     }
     useEffect(()=>{
         const protectReward={
@@ -22,30 +47,47 @@ const WProtect = () => {
         return ()=>{
         }
     },[])
+    const renderInfo=()=>{
+        let ProtectLimit=protectInfo.ProtectLimit?formatCash(Number(protectInfo.ProtectLimit),0):0;
+        let ProtectNum=protectInfo.ProtectNum?formatCash(Number(protectInfo.ProtectNum),0):0;
+        let ProtectTimes=protectInfo.ProtectTimes?parseInt(protectInfo.ProtectTimes):0;
+        return (
+            <div className={styles.p_info}>
+                <span className={styles.title}>{i18n.t("protect.title")}</span>
+                <div className={styles.des}>
+                    {i18n.t("protect.des")}
+                    <span className={styles.coin}>{global.DOLLAR + ProtectLimit}</span>
+                </div>
+                <div className={styles.rewad}>{global.DOLLAR + ProtectNum}</div>
+                <span className={styles.tips}>{stringFormat(i18n.t("protect.tips"),[ProtectTimes])}</span>
+            </div>
+        )
+    }
+    const renderGetBtn=()=>{
+        return (
+            <button className={styles.p_get_btn} onClick={onGetProtect}>
+                {
+                    status===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"}/>): (
+                        <span className={styles.text}>
+                            {i18n.t("protect.btn_get")}
+                        </span>
+                    )
+                }
+            </button>
+        )
+    }
     return (
         <Modal open={isShow} onClose={hide} closeAfterTransition>
             <Fade in={isShow} timeout={500}>
                 <div className={styles.container}>
                     <Grow in={isShow} timeout={500}>
-                        <div className={styles.p_con}>
+                    <div className={styles.p_con}>
                             <button className={styles.p_close} onClick={hide}>
                                 <img src={require("@assets/protect/p_close.png")}/>
                             </button>
                             <div className={styles.p_content}>
-                                <div className={styles.p_info}>
-                                    <span className={styles.title}>{i18n.t("protect.title")}</span>
-                                    <div className={styles.des}>
-                                        {i18n.t("protect.des")}
-                                        <span className={styles.coin}>{global.DOLLAR+2}</span>
-                                    </div>
-                                    <div className={styles.rewad}>{global.DOLLAR+1}</div>
-                                    <span className={styles.tips}>{i18n.t("protect.tips")}</span>
-                                </div>
-                                <button className={styles.p_get_btn}>
-                                    <span className={styles.text}>
-                                        {i18n.t("protect.btn_get")}
-                                    </span>
-                                </button>
+                                {renderInfo()}
+                                {renderGetBtn()}
                             </div>
                         </div>
                     </Grow>

src/widgets/WWelfarebar/index.jsx

@@ -1,18 +1,17 @@
 import styles from './styles.module.scss';
-import {useState} from "react";
-const WelfareBtn=({children,...props})=>{
-    const [isPressed, setIsPressed] = useState(false);
-    const handleMouseDown = () => {
-        setIsPressed(true);
-    };
-
-    const handleMouseUp = () => {
-        setIsPressed(false);
-    };
+import {useEffect, useState} from "react";
+import {reqFirstPayConfig, reqProtectCheck} from "@features/api";
+import {useDispatch, useSelector} from "react-redux";
+import {getFirstBonus, getOpenRelief, getPopBindPhone, getUserInfo} from "@features/mainSlice";
+import {APP_WELFARE} from "@constants/app";
+import {getCurrPayOrder, getOFirstPay} from "@features/paySlice";
+import {getProtectInfo} from "@features/protectSlice";
+import {formatCash} from "@utils/helpers";
+import {useThemeProvider} from "@contexts/themeContext";
+import {useSidebar} from "@contexts/sidebarContext";
+const WelfareBtn=({children,open=false,pressDown=false,...props})=>{
     return (
-        <button className={`${styles.wlf_btn} ${isPressed?styles.wlf_btn_press:''}`}
-                onMouseDown={handleMouseDown}
-                onMouseUp={handleMouseUp}
+        <button className={`${styles.wlf_btn} ${open?styles.wlf_btn_open:styles.wlf_btn_close} ${pressDown?styles.wlf_btn_press:''}`}
                 {...props}
         >
             {
@@ -22,26 +21,151 @@ const WelfareBtn=({children,...props})=>{
     )
 }
 const WWelfarebar = () => {
-    return (
-        <div className={styles.container}>
-            <div className={styles.content}>
-                <WelfareBtn key={"protect"} onClick={()=>{
-                    global.showProtectReward();
-                }}>
-                    <img className={styles.wlf_protect} src={require("@assets/welfare/protect.png")}/>
-                </WelfareBtn>
-                <WelfareBtn key={"first_pay"} onClick={()=>{
-                    global.showFirstPay();
-                }}>
-                    <img className={styles.wlf_first} src={require("@assets/welfare/first_pay.png")}/>
-                </WelfareBtn>
-                <WelfareBtn key={"bind"} onClick={()=>{
-                    global.showBindPhone();
-                }}>
-                    <img className={styles.wlf_bind} src={require("@assets/welfare/bind.png")}/>
-                </WelfareBtn>
+    const dispatch = useDispatch();
+    const user=useSelector(getUserInfo);
+    //0:1,1:1,2:1
+    // const [openState, setOpenState] = useState({});
+    const [openProtect,setOpenProtect]=useState(0);
+    const [openFirst,setOpenFirst]=useState(0);
+    const [openBind,setOpenBind]=useState(0);
+    const firstPayConf=useSelector(getOFirstPay);
+    const popBindPhone=useSelector(getPopBindPhone);
+    const firstBonus=useSelector(getFirstBonus);
+    const openRelief=useSelector(getOpenRelief);
+    const protectInfo=useSelector(getProtectInfo);
+    const orderInfo=useSelector(getCurrPayOrder);
+    const {welfTabState,isMobile}=useThemeProvider();
+    const {open} = useSidebar();
+    const getWelfTabState=(key)=>{
+        if (welfTabState===key)return true;
+        return false;
+    }
+    const changeNewState=(key,state)=>{
+        // let newOpenState= Object.assign({},openState);
+        // newOpenState[key]=state;
+        // setOpenState(newOpenState);
+        // state=1;
+        switch (key){
+            case APP_WELFARE.PROTECT:
+                setOpenProtect(state);
+                break;
+            case APP_WELFARE.FIRST_PAY:
+                setOpenFirst(state);
+                break;
+            case APP_WELFARE.BIND:
+                setOpenBind(state);
+                break;
+        }
+    }
+    const checkProtect=()=>{
+        let state=0;
+        if (openRelief){
+            if (protectInfo!=null){
+                if (user.UserID>0){
+                    let CurProtectTimes=protectInfo.CurProtectTimes!=null?parseInt(protectInfo.CurProtectTimes):0;
+                    if (CurProtectTimes>0)state=1;
+                }
+            }
+        }
+        changeNewState(APP_WELFARE.PROTECT,state);
+    }
+    const checkProtectLimit=()=>{
+        if (protectInfo!=null){
+            let ProtectLimit=protectInfo.ProtectLimit;
+            if (ProtectLimit!=null){
+                ProtectLimit=Number(ProtectLimit);
+                ProtectLimit=Number(formatCash(ProtectLimit))
+                let Score=user.Score;
+                if (Score<=ProtectLimit){
+                    dispatch(reqProtectCheck());
+                }
+            }
+        }
+    }
+    const checkFirstPay=()=>{
+        let state=0;
+        if (firstBonus){
+            if (user.UserID>0){
+                if (firstPayConf!=null)state=1;
+            }
+        }
+        changeNewState(APP_WELFARE.FIRST_PAY,state);
+    }
+    const checkFirstPayStatus=()=>{
+        if (orderInfo!=null){
+            if (orderInfo.status==="success"){
+                dispatch(reqFirstPayConfig());
+            }
+        }
+    }
+    const checkBind=()=>{
+        let state=0;
+        if (popBindPhone){
+            if (user.UserID>0){
+                if (user.Phone==null||user.Phone===""){
+                    state=1;
+                }
+            }
+        }
+        changeNewState(APP_WELFARE.BIND,state);
+    }
+    useEffect(()=>{
+        let UserID=user.UserID;
+        if (UserID>0){
+            dispatch(reqProtectCheck());
+            dispatch(reqFirstPayConfig());
+        }
+    },[user.UserID]);
+    useEffect(() => {
+        checkProtectLimit();
+    }, [user.Score]);
+    useEffect(()=>{
+        checkFirstPay();
+    },[firstPayConf]);
+    useEffect(()=>{
+        checkBind();
+    },[popBindPhone,user.Phone]);
+    useEffect(()=>{
+        checkProtect();
+    },[protectInfo])
+    useEffect(()=>{
+        checkFirstPayStatus();
+    },[orderInfo])
+    const renderBar=()=>{
+        let extra='';
+        if (!isMobile()){
+            if (open)extra='sidebar-open';
+            else extra='sidebar-close';
+        }
+        return (
+            <div className={`${styles.container} ${extra}`}>
+                <div className={styles.content}>
+                    <WelfareBtn key={"protect"} open={openProtect} pressDown={getWelfTabState(APP_WELFARE.PROTECT)}
+                                onClick={() => {
+                                    global.showProtectReward();
+                                }}>
+                        <img className={styles.wlf_protect} src={require("@assets/welfare/protect.png")}/>
+                    </WelfareBtn>
+                    <WelfareBtn key={"first_pay"} open={openFirst} pressDown={getWelfTabState(APP_WELFARE.FIRST_PAY)}
+                                onClick={() => {
+                                    global.showFirstPay();
+                                }}>
+                        <img className={styles.wlf_first} src={require("@assets/welfare/first_pay.png")}/>
+                    </WelfareBtn>
+                    <WelfareBtn key={"bind"} open={openBind} pressDown={getWelfTabState(APP_WELFARE.BIND)}
+                                onClick={() => {
+                                    global.showBindPhone();
+                                }}>
+                        <img className={styles.wlf_bind} src={require("@assets/welfare/bind.png")}/>
+                    </WelfareBtn>
+                </div>
             </div>
-        </div>
+        )
+    }
+    return (
+        <>
+            {renderBar()}
+        </>
     )
 }
 export default WWelfarebar;

src/widgets/WWelfarebar/styles.module.scss

@@ -25,6 +25,19 @@ $leftb_1:"./../../assets/welfare/leftb_1.png";
   background-size: 100% 100%;
   &_press{
     background: url($leftb_1);
+    background-size: 100% 100%;
+  }
+  opacity: 0;
+  transform: translateX(-100%);
+  &_open{
+    opacity: 1;
+    transform: translateX(0%);
+    transition: opacity .3s ease, .3s ease;
+  }
+  &_close{
+    opacity: 0;
+    transform: translateX(-100%);
+    transition: opacity .3s ease, transform .3s ease;
   }
 }
 .wlf_protect{