no message

src/App.js

@@ -142,7 +142,9 @@ const App = () => {
         }
     }
     const reqInitData=()=>{
-        if (userID!=0){
+        //未初始化
+        if (userID===-1)return;
+        if (userID>0){
             dispatch(connectHall());
             localStorageSet(LOCAL_WHEEL_INVITE_CODE,"");
             localStorageSet(LOCAL_ACTIVITY_C,"");

src/features/mainSlice.js

@@ -323,7 +323,7 @@ export const Main=createSlice({
             register:REQ_STATUS.NONE,
             logout:REQ_STATUS.NONE,
         },
-        userInfo: {},
+        userInfo: null,
         isLogin:0,
         modifyStatus:{
             info:REQ_STATUS.NONE,
@@ -495,10 +495,11 @@ export const getUserInfo=(state)=>{
     return state.main.userInfo;
 }
 export const getUserID=(state)=>{
-    let uid=0;
+    let uid=-1;
     let userInfo=state.main.userInfo;
     if (userInfo){
         if (userInfo.UserID!=null)uid=userInfo.UserID;
+        else uid=0;
     }
     return uid;
 }

src/widgets/WPromotion/index.jsx

@@ -7,6 +7,7 @@ import icon_2 from "@assets/promotion/icon_2.svg";
 import banner_2 from "@assets/promotion/banner_2.png";
 import icon_3 from "@assets/promotion/icon_3.svg";
 import banner_3 from "@assets/promotion/banner_3.png";
+import new_icon from "@assets/promotion/new.png";
 import {useNavigate} from "react-router-dom";
 import {useDispatch, useSelector} from "react-redux";
 import {getRedPackInfo} from "@features/redpackSlice";
@@ -14,6 +15,10 @@ import {formatTime} from "@utils/helpers";
 import {reqRedpackCheck} from "@features/api";
 import {getTurnplate} from "@features/turnplateSlice";
 import {getActivityList} from "@features/activitySlice";
+import LazyImgix from "@components/Imgix/LazyImgix";
+import {getBonusList} from "@features/agentSlice";
+import clock from "@assets/promotion/clock.json";
+import Lottie from "lottie-react";
 const icons=[
     null,
     icon_1,
@@ -30,31 +35,32 @@ const WPromotion=({close})=>{
     const navigate=useNavigate();
     const redpack=useSelector(getRedPackInfo);
     const turnplate=useSelector(getTurnplate);
+    const agentBonus=useSelector(getBonusList);
     const dispatch=useDispatch();
-    const list=useSelector(getActivityList);
-    let data=[
-        {
-            id:1,
-            title:"Tycoon",
-            icon:"",
-            banner:"",
-            link:"#/cashwheel",
-        },
-        {
-            id:2,
-            title:"Collection",
-            icon:"",
-            banner:"",
-            link:"#/moneyrain",
-        },
-        {
-            id:3,
-            title:"Agent",
-            icon:"",
-            banner:"",
-            link:"#/agent",
-        }
-    ]
+    const data=useSelector(getActivityList);
+    // let data=[
+    //     {
+    //         id:1,
+    //         title:"Tycoon",
+    //         icon:"",
+    //         banner:"",
+    //         link:"#/cashwheel",
+    //     },
+    //     {
+    //         id:2,
+    //         title:"Collection",
+    //         icon:"",
+    //         banner:"",
+    //         link:"#/moneyrain",
+    //     },
+    //     {
+    //         id:3,
+    //         title:"Agent",
+    //         icon:"",
+    //         banner:"",
+    //         link:"#/agent",
+    //     }
+    // ]
     useEffect(()=>{
         dispatch(reqRedpackCheck());
     },[])
@@ -92,25 +98,92 @@ const WPromotion=({close})=>{
             </>
         )
     }
+    const checkDot=(item)=>{
+        if (item.id===1){
+            if (turnplate&&turnplate.times>0){
+                return true;
+            }
+        }
+        else if (item.id===2){
+            if (agentBonus&&agentBonus.length>0){
+                return true;
+            }
+        }
+        else if (item.id===3){
+            if (redpack&&redpack.status===1){
+                return true;
+            }
+        }
+        return false;
+    }
+    // const checkRender
+    const checkRenderLeft=(item)=>{
+        if (item.id===3){}
+        return (
+            <></>
+        )
+    }
+    const checkRenderCD=(item)=>{
+        if (redpack==null)return (<></>);
+        let status=redpack.status;
+        if (status!==0)return (<></>);
+        let cdLeft=redpack.next_in_seconds;
+        let cdLeftStr=formatTime(cdLeft);
+        return (
+            <div className={styles.item_right}>
+                <div className={styles.clock_item}>
+                    {cdLeftStr}
+                    <Lottie animationData={clock} className={styles.clock_icon} />
+                </div>
+            </div>
+        )
+    }
+    const checkRenderRight=(item)=>{
+        let isdot=checkDot(item);
+        if (isdot){
+            return (
+                <div className={styles.item_right}>
+                    <img src={new_icon} className={`${styles.act_new} iconshake`}/>
+                </div>
+            )
+        }
+        else {
+            if (item.id===3){
+                return checkRenderCD(item);
+            }
+        }
+        return (
+            <></>
+        )
+    }
     const renderItem = (item) => {
-        if (item.id === 2) return (renderRedPackItem(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>*/}
+        //                     {checkRenderDot(item)}
+        //                 </div>
+        //             </div>
+        //             <div className={styles.right}>
+        //                 <img src={banners[item.id]}/>
+        //             </div>
+        //         </button>
+        //     </>
+        // )
         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>*/}
-                            {checkRenderDot(item)}
-                        </div>
-                    </div>
-                    <div className={styles.right}>
-                        <img src={banners[item.id]}/>
-                    </div>
-                </button>
+                <LazyImgix src={item.img} alt={item.title} className={styles.banner} width={1350}></LazyImgix>
+                <div className={styles.item_content}>
+                    {checkRenderLeft(item)}
+                    {checkRenderRight(item)}
+                </div>
             </>
         )
     }
@@ -120,9 +193,11 @@ const WPromotion=({close})=>{
                 {
                     data.map((item, index) => {
                         return (
-                            <div key={index} className={styles.gift_item}>
+                            <button key={index} className={styles.act_item} onClick={()=>{
+                                navigate(item.link);
+                            }}>
                                 {renderItem(item)}
-                            </div>
+                            </button>
                         )
                     })
                 }

src/widgets/WPromotion/styles.module.scss

@@ -4,14 +4,68 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  padding: 1rem .75rem;
+  padding: 1rem;
   background-color: var(--widget-bg);
 }
 .content{
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  margin-top: 0.5rem;
+  gap: 0.7rem;
+}
+.act_new{
+  top: 0;
+  right: 0;
+  width: 5.8rem;
+  height: auto;
+}
+.clock_item{
+  margin-right: 0.7rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.3rem 0.8rem;
+  background-color: #22272b;
+  height: 2rem;
+  border-radius: 0.3rem;
+  font-size: 1rem;
+  color: #fff;
+  & .clock_icon{
+    margin-right: -1.5rem;
+    width: 2.4rem;
+    height: 2.4rem;
+  }
+}
+.act_item{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  aspect-ratio: 1350/583;
+  position: relative;
+  & .banner{
+    width: 100%;
+    height: auto;
+    border-radius: 0.5rem;
+    z-index: 0;
+  }
+  & .item_content{
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    & .item_left{
+      position: absolute;
+      top: 1rem;
+      left: 1rem;
+    }
+    & .item_right{
+      position: absolute;
+      bottom: 0.3rem;
+      right: 0.2rem;
+    }
+  }
 }
 .gift_item{
   display: flex;