fix: 更新红包雨展示逻辑

src/app/[locale]/(TabBar)/gameList/[[...gameListFlag]]/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { GameListRep, searchGameListApi, SearchProps } from "@/api/home";
+import { Category, GameListRep, searchGameListApi, SearchProps } from "@/api/home";
 import Box from "@/components/Box";
 import GroupCard from "@/components/Card/GroupCard";
 import { Pagination } from "@/types";
@@ -37,7 +37,11 @@ const GameListFlag: FC<Props> = (props) => {
     };
     return (
         <Box>
-            <GroupCard data={target.games} row={1} group={{ bet_type: +searchParams.type }} />
+            <GroupCard
+                data={target.games}
+                row={1}
+                groupType={Number(searchParams.type) as Category["bet_type"]}
+            />
             <InfiniteScroll loadMore={loadMore} hasMore={!target.page.is_end!} />
         </Box>
     );

src/components/Box/RedPacketModal.tsx

@@ -335,7 +335,6 @@ const HbyInfo = (props: any) => {
 
 const HbyInfo2 = (props: any) => {
     const { iconImg, onCloseHby, redAmount } = props;
-    console.log(`🚀🚀🚀🚀🚀-> in PopupHby.tsx on 364`, iconImg);
     return (
         <div
             className={`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 ${styles.redopen}`}
@@ -358,7 +357,9 @@ const HbyInfo2 = (props: any) => {
     );
 };
 
-type Props = {};
+type Props = {
+    onAfter?: () => {};
+};
 export type RedPacketModalProps = {
     onClose: () => void;
     onOpen: (index?: number) => void;
@@ -368,7 +369,7 @@ export type RedPacketModalProps = {
  * @description 红包的三种状态
  * is_start 可领取 展示红包领取组件
  * is_receive 已领取 展示领取详情组件
- * is_end 可展示 展示详情界面
+ * is_end 可展示 展示说明页
  */
 enum Status {
     is_start,
@@ -377,16 +378,16 @@ enum Status {
 }
 
 const RedPacketModal = forwardRef<RedPacketModalProps, Props>(function RedPacketModal(props, ref) {
+    const { onAfter } = props;
     const [visible, setVisible] = useState(false);
-
     const [iconLists, setIconLists] = useState<any>([]);
-    const [isShowRed, setIsShowRed] = useState(false);
-    const [isShowReciveRed, setIsShowReciveRed] = useState(false);
-    const [isShowRedDetail, setIsShowRedDetail] = useState(false);
+    // 初始状态为is_end, 展示活动详情页
+    const [status, setStatus] = useState<Status>(Status.is_end);
+    const packet = useRef<any>({});
 
     const [redPacketInfo, setRedPacketInfo] = useState<any>({});
     const [redAmount, setRedAmount] = useState<any>(0);
-    const activeIndex = useRef<number | null>(null);
+    const activeIndex = useRef<number>(0);
     const token = getToken();
     useImperativeHandle(ref, () => {
         return {
@@ -417,65 +418,35 @@ const RedPacketModal = forwardRef<RedPacketModalProps, Props>(function RedPacket
                 actList = redPacketInfo.data;
             }
             // 是否有已开始但是没领过的红包
-            let packets = actList.filter((aItem: any) => {
-                return !!aItem.is_start && !aItem.is_receive;
-            });
-
-            let current = null;
-            if (activeIndex.current !== null && activeIndex.current !== undefined) {
-                current = packets[activeIndex.current];
+            let packets = actList
+                .filter((aItem: any) => {
+                    return aItem.is_start && !aItem.is_receive;
+                })
+                .sort((pre: any, next: any) => pre.end_time - next.end_time);
+
+            // 有可领取红包
+            if (packets.length > 0) {
+                let current = packets[activeIndex.current];
+                let iconList = JSON.parse(current.icon);
+                // 红包
+                packet.current = current;
+                // 有可领取红包
+                setStatus(Status.is_start);
+                setIconLists(iconList);
             } else {
-                current = findCurrentActivity(packets);
+                // 无可领取红包
+                // 展示最近可领红包详情
+                let packets = actList.sort((pre: any, next: any) => pre.end_time - next.end_time);
+                packet.current = packets[0];
+                setIconLists(JSON.parse(packets[0].icon));
+                // 无可领取红包展示详情
+                setStatus(Status.is_end);
             }
-
-            let isShowRed = packets.length > 0;
-            let isShowRedDetail = packets.length === 0;
-            //
-            // let redInfo = isShowRed ? isHasStartAct[0] : {};
-            // if (activeIndex.current !== undefined && activeIndex.current !== null) {
-            //     redInfo = isHasStartAct[activeIndex.current];
-            // }
-            // let curAct = isShowRedDetail ? findCurrentActivity(actList) : actList[0];
-            let iconList = JSON.parse(current.icon);
-
-            setIconLists(iconList);
-            setRedPacketInfo(current);
-            setIsShowRed(isShowRed);
-            setIsShowRedDetail(isShowRedDetail);
         } catch (error) {
             console.log("redPacketInfo===>error:", error);
         }
     };
 
-    // 筛选出离当前时间最近的活动
-    const findCurrentActivity = (activities: any) => {
-        const now = Math.floor(Date.now() / 1000); // 获取当前时间的时间戳（单位：秒）
-        let closestActivity = null;
-        let isInRange = false;
-
-        // 遍历活动数据
-        for (let i = 0; i < activities.length; i++) {
-            const activity = activities[i];
-
-            // 检查当前时间是否在活动的时间范围内
-            if (now >= activity.start_time && now <= activity.end_time) {
-                isInRange = true;
-                return activity; // 如果在范围内，直接返回当前活动
-            }
-
-            // 如果不在范围内，记录离当前时间最近的活动
-            if (
-                !closestActivity ||
-                Math.abs(now - activity.end_time) < Math.abs(now - closestActivity.end_time)
-            ) {
-                closestActivity = activity;
-            }
-        }
-
-        // 如果不在任何活动范围内，返回离当前时间最近的活动
-        return closestActivity;
-    };
-
     const onReciveRed = async () => {
         try {
             let paramsData = {
@@ -484,8 +455,10 @@ const RedPacketModal = forwardRef<RedPacketModalProps, Props>(function RedPacket
             };
             let receiveRedPacketInfo = await receiveRedPacketApi(paramsData);
             let redNum = receiveRedPacketInfo.data;
-            setIsShowRed(false);
-            setIsShowReciveRed(true);
+            if (onAfter) {
+                onAfter();
+            }
+            setStatus(Status.is_receive);
             setRedAmount(redNum?.amount);
         } catch (error) {
             console.log("redPacketInfo===>error:", error);
@@ -494,22 +467,20 @@ const RedPacketModal = forwardRef<RedPacketModalProps, Props>(function RedPacket
     return (
         <Mask visible={visible} destroyOnClose={true}>
             <FallAnimation onClose={() => setVisible(false)} />
-            {isShowRedDetail && (
-                <HbyInfoDetail onCloseHby={() => setVisible(false)} iconImg={iconLists[0]} />
-            )}
-            {isShowRed && (
+            {status === Status.is_start ? (
                 <HbyInfo
                     onCloseHby={() => setVisible(false)}
                     onReciveRed={onReciveRed}
                     iconImg={iconLists[1]}
                 />
-            )}
-            {isShowReciveRed && (
+            ) : status === Status.is_receive ? (
                 <HbyInfo2
                     onCloseHby={() => setVisible(false)}
                     redAmount={redAmount}
                     iconImg={iconLists[2]}
                 />
+            ) : (
+                <HbyInfoDetail onCloseHby={() => setVisible(false)} iconImg={iconLists[0]} />
             )}
         </Mask>
     );

src/components/Card/Card.tsx

@@ -12,10 +12,10 @@ import styles from "./style.module.scss";
 export interface CardProps {
     item?: GameListRep;
     render?: (value: GameListRep) => ReactNode;
-    group?: Category;
+    groupType?: Category["bet_type"];
 }
 const Card: FC<PropsWithChildren<CardProps>> = (props) => {
-    const { render, item, group } = props;
+    const { render, item, groupType } = props;
 
     const t = useTranslations("Game");
     const urlRef = useRef<string>("");
@@ -32,7 +32,7 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
         if (!token) return;
         const params = {
             id: game.id,
-            mode: group?.bet_type,
+            mode: groupType,
         };
         getGameDetailApi(params).then((res) => {
             urlRef.current = res.data?.game_url;

src/components/Card/GroupCard.tsx

@@ -7,7 +7,7 @@ export interface GroupProps extends CardProps {
     col?: number;
     row?: number;
     gapX?: number;
-    group?: Category;
+    groupType?: Category["bet_type"];
 }
 
 const GroupCard: FC<GroupProps> = (props) => {

src/components/Card/SwiperGroup.tsx

@@ -122,7 +122,7 @@ const HomeSwiper: FC<PropsWithChildren<SwiperGroupProps>> = (props) => {
                                     <GroupCard
                                         data={data.data}
                                         {...other}
-                                        group={group}
+                                        groupType={group.bet_type}
                                     ></GroupCard>
                                 )}
                             </SwiperSlide>