Merge branch 'xudh' into sport

src/components/Logo/index.jsx

@@ -11,11 +11,12 @@ import logo_dark from '@assets/logo/logo.png';
 import logo_light from '@assets/logo/logo_w.png';
 import logo_small from '@assets/logo/logo_small4.png';
 import logo_small_black from '@assets/logo/logo_small4.png';
+import logo_small_light from '@assets/logo/logo_small5.png';
 import {APP_THEME} from "@constants/app";
 
 const Logo = ({size = 'md'}) => {
     const {theme,isMobile} = useThemeProvider();
-    const logourl=isMobile()?(theme===APP_THEME.DARK?logo_small:logo_small_black):(theme===APP_THEME.DARK?logo_dark:logo_light);
+    const logourl=isMobile()?(theme===APP_THEME.DARK?logo_small_black:logo_small_light):(theme===APP_THEME.DARK?logo_dark:logo_light);
     // const logourl=(theme=='dark'?logo_dark:logo_light);
     return (
         <NavLink className={`${styles.logo} ${styles[size]}`} to="/">

src/features/protectSlice.js

@@ -22,7 +22,7 @@ const reducerProtectGet=(state,action,arg)=>{
     let msg=getHttpMsg(payload);
     if (payload&&payload.code===200){
         let CurProtectTimes=state.protectInfo.CurProtectTimes!=null?Number(state.protectInfo.CurProtectTimes):0;
-        CurProtectTimes=CurProtectTimes-1;
+        CurProtectTimes=CurProtectTimes+1;
         state.protectInfo.CurProtectTimes=CurProtectTimes;
         if (msg!=null&&msg!="")toast.success(msg);
     }

src/widgets/WProtect/index.jsx

@@ -8,9 +8,10 @@ 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 {reqProtectCheck, reqProtectGet} from "@features/api";
 import {APP_WELFARE} from "@constants/app";
 import {useThemeProvider} from "@contexts/themeContext";
+import {getUserInfo} from "@features/mainSlice";
 const i18n=global.i18n;
 const WProtect = () => {
     const [isShow, setIsShow] = useState(false);
@@ -18,9 +19,11 @@ const WProtect = () => {
     const status=useSelector(getProtectGetStatus);
     const dispatch = useDispatch();
     const {setWelfTabState}=useThemeProvider();
+    const user=useSelector(getUserInfo);
     const show=()=>{
         setIsShow(true);
         setWelfTabState(APP_WELFARE.PROTECT);
+        dispatch(reqProtectCheck());
     }
     const hide=()=>{
         setIsShow(false);
@@ -31,10 +34,19 @@ const WProtect = () => {
             hide();
         }
     }
+    const checkCanProtect=()=>{
+        if (user!=null&&protectInfo!=null){
+            let Score=Number(user.Score)*global.CASH_BASE;
+            let ProtectLimit=protectInfo.ProtectLimit!=null?parseInt(protectInfo.ProtectLimit):0;
+            let CurProtectTimes=protectInfo.CurProtectTimes!=null?parseInt(protectInfo.CurProtectTimes):0;
+            let ProtectTimes=protectInfo.ProtectTimes!=null?parseInt(protectInfo.ProtectTimes):0;
+            return (Score<ProtectLimit)&&(CurProtectTimes<ProtectTimes);
+        }
+        return false;
+    }
     const onGetProtect=()=>{
         if (status===REQ_STATUS.LOADING)return;
-        let CurProtectTimes=protectInfo.CurProtectTimes!=null?parseInt(protectInfo.CurProtectTimes):0;
-        if (CurProtectTimes<=0)return;
+        if (!checkCanProtect())return;
         let ProtectNum=protectInfo.ProtectNum!=null?parseInt(protectInfo.ProtectNum):0;
         dispatch(reqProtectGet({callback:callback,ProtectNum:ProtectNum}));
     }
@@ -64,8 +76,9 @@ const WProtect = () => {
         )
     }
     const renderGetBtn=()=>{
+        let isDisabled=!checkCanProtect();
         return (
-            <button className={styles.p_get_btn} onClick={onGetProtect}>
+            <button className={`${styles.p_get_btn} ${isDisabled?styles.p_get_btn_disabled:''}`} onClick={onGetProtect} disabled={isDisabled}>
                 {
                     status===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"}/>): (
                         <span className={styles.text}>

src/widgets/WProtect/styles.module.scss

@@ -88,6 +88,9 @@ $btn_bg:"./../../assets/protect/p_btn.png";
   & .text{
     margin-top: -0.3rem;
   }
+  &_disabled{
+    filter: brightness(60%);
+  }
 }
 .p_close{
   position: absolute;

src/widgets/WWelfarebar/index.jsx

@@ -1,5 +1,5 @@
 import styles from './styles.module.scss';
-import {useEffect, useState} from "react";
+import {useEffect, useRef, useState} from "react";
 import {reqFirstPayConfig, reqProtectCheck} from "@features/api";
 import {useDispatch, useSelector} from "react-redux";
 import {getFirstBonus, getOpenRelief, getPopBindPhone, getUserInfo} from "@features/mainSlice";
@@ -62,6 +62,7 @@ const WWelfarebar = () => {
     const {welfTabState,isMobile}=useThemeProvider();
     const {open} = useSidebar();
     const {pathname} = useLocation();
+    const starPRef=useRef(null);
     const getWelfTabState=(key)=>{
         if (welfTabState===key)return true;
         return false;
@@ -168,6 +169,7 @@ const WWelfarebar = () => {
         if (pathname.startsWith(ROUTE_PATH.SPORTS)){
             isClose=true;
         }
+        const stars=Array.from({ length: 5 }, (_, index) => index);
         return (
             <div className={`${styles.container} ${extra}`}>
                 <div className={`${styles.content} ${isClose?styles.content_close:''}`}>
@@ -175,19 +177,42 @@ const WWelfarebar = () => {
                                 onClick={() => {
                                     global.showProtectReward();
                                 }}>
-                        <img className={styles.wlf_protect} src={require("@assets/welfare/fundos_"+i18n.language+".png")}/>
+                        <div className={styles.wlf_protect}>
+                            <img src={require("@assets/welfare/fundos_" + i18n.language + ".png")}/>
+                            <div ref={starPRef} className={styles.p_stars}>
+                                {
+                                    stars.map((item,index)=>{
+                                        return (
+                                            <div key={index} className={`${styles.star} ${styles['star_ani_'+index]}`}></div>
+                                        )
+                                    })
+                                }
+                            </div>
+                        </div>
                     </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_"+i18n.language+".png")}/>
+                        <div className={styles.wlf_first}>
+                            <div className={styles.wlf_first_mask} style={{
+                                webkitMask:`url(${require("@assets/welfare/first.png")}) 0 0/100%`
+                            }}>
+                                <img className={styles.f_img} src={require("@assets/welfare/first.png")}/>
+                            </div>
+                            <img className={styles.f_txt} src={require("@assets/welfare/first_"+i18n.language+".png")}/>
+                        </div>
                     </WelfareBtn>
                     <WelfareBtn key={"bind"} open={openBind} pressDown={getWelfTabState(APP_WELFARE.BIND)}
                                 onClick={() => {
                                     global.showBindPhone();
                                 }}>
-                        <img className={styles.wlf_bind} src={require("@assets/welfare/veri_"+i18n.language+".png")}/>
+                        <div className={styles.wlf_bind}>
+                            <img className={`${styles.b_icon} iconshake`}
+                                 src={require("@assets/welfare/veri_" + i18n.language + ".png")}/>
+                            <img className={`${styles.b_txt}`}
+                                 src={require("@assets/welfare/bind_txt_" + i18n.language + ".png")}/>
+                        </div>
                     </WelfareBtn>
                 </div>
             </div>

src/widgets/WWelfarebar/styles.module.scss

@@ -1,5 +1,8 @@
 $leftb:"./../../assets/welfare/leftb.png";
 $leftb_1:"./../../assets/welfare/leftb_1.png";
+$star:"./../../assets/welfare/star.png";
+
+
 .container{
   display: flex;
   flex-direction: column;
@@ -46,18 +49,160 @@ $leftb_1:"./../../assets/welfare/leftb_1.png";
   }
 }
 .wlf_protect{
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 5rem;
   height: auto;
   margin-left: 0.5rem;
   margin-top: 0.1rem;
+  position: relative;
+  & .p_img{
+    width: 100%;
+    height: auto;
+  }
+  & .p_stars{
+    top: -1rem;
+    left: 0rem;
+    right: 1.4rem;
+    bottom: 1.2rem;
+    position: absolute;
+  }
 }
 .wlf_first{
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 3.2rem;
-  height: auto;
+  aspect-ratio: 91/115;
   margin-left: -0.5rem;
+  position: relative;
+  &_mask{
+    width: 3.2rem;
+    aspect-ratio: 84/86;
+    flex-shrink: 0;
+    position: absolute;
+    overflow: hidden;
+    top: 0;
+    &:after{
+      content: '';
+      position: absolute;
+      inset: -20%;
+      background: linear-gradient(-45deg, rgba(255,255,255,0) 45%, rgb(255,255,255,1), rgba(255,255,255,0) 60%);
+      animation: shark-wrap 3s infinite;
+      transform: translateX(-100%);
+      mix-blend-mode: overlay;
+    }
+  }
+  & .f_img{
+    width: 3.2rem;
+    height: auto;
+  }
+  & .f_txt{
+    position: absolute;
+    z-index: 2;
+    height: 1.52rem;
+    width: auto;
+    top: 2.6rem;
+  }
 }
 .wlf_bind{
+  display: flex;
+  position: relative;
+  justify-content: center;
   width: 3.5rem;
-  height: auto;
+  aspect-ratio: 102/99;
   margin-left: -0.5rem;
+  & .b_icon{
+    width: 3.5rem;
+    height: auto;
+  }
+  & .b_txt{
+    position: absolute;
+    z-index: 2;
+    height: 1rem;
+    width: auto;
+    top: 2.8rem;
+  }
+}
+@keyframes shark-wrap {
+  to {
+    transform: translateX(100%);
+  }
+}
+.star{
+  position: absolute;
+  width: 1rem;
+  aspect-ratio: 23/28;
+  background: url($star) no-repeat;
+  background-size: 100% 100%;
+  opacity: 0;
+}
+.star_ani_0{
+  top: 1rem;
+  left: 1rem;
+  width: 0.45rem;
+  animation: blinking_1 3s linear infinite;
+}
+.star_ani_1{
+  width: 0.6rem;
+  top: 2.2rem;
+  right: 1rem;
+  animation: blinking_2 6.5s linear infinite;
+}
+.star_ani_2{
+  width: 0.4rem;
+  top: 2.8rem;
+  right: 0.5rem;
+  animation: blinking_2 4.5s linear infinite;
+}
+.star_ani_3{
+  width: 0.35rem;
+  top: 3rem;
+  right: -0.5rem;
+  animation: blinking_1 3.5s linear infinite;
+}
+.star_ani_4{
+  width: 0.4rem;
+  top: 1rem;
+  right: 0rem;
+  animation: blinking_2 5.5s linear infinite;
+}
+@keyframes blinking{
+  0%,100%{
+    transform: scale(1);
+    opacity: 0;
+  }
+  50%{
+    transform: scale(1.5);
+    opacity: 1;
+  }
+}
+@keyframes blinking_1{
+  0%,25%{
+    transform: scale(1);
+    opacity: 0;
+  }
+  50%{
+    transform: scale(1.5);
+    opacity: 1;
+  }
+  75%,100%{
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+@keyframes blinking_2{
+  0%,33%{
+    transform: scale(1);
+    opacity: 0;
+  }
+  50%{
+    transform: scale(1.5);
+    opacity: 1;
+  }
+  66%,100%{
+    transform: scale(1);
+    opacity: 0;
+  }
 }