Kaynağa Gözat

feat: 修改活动弹窗

year 3 ay önce
ebeveyn
işleme
2360e91289

+ 27 - 4
src/app/[locale]/(TabBar)/[[...share]]/_home/HomePromotion.tsx

@@ -16,11 +16,14 @@ interface Props {
 const HomePromotion: FC<Props> = (props) => {
     const { data, type } = props;
     const [visible, setVisible] = useState(false);
+    const [innerData, setInnerData] = useState<PromotionRep[]>([]);
+    const [actIdx, setActIdx] = useState(0);
 
     useEffect(() => {
         const isClosePromotion = sessionStorage.getItem("isClosePromotion");
         // 如果 type 为 1  && 有isNow为true 表示已经弹出,
         const shouldShowPromotion = () => {
+            // return true;
             // 如果不等于1而数据又是时间,清除
             if (type !== 1 && dayjs().isSame(isClosePromotion, "days")) {
                 sessionStorage.removeItem("isClosePromotion");
@@ -37,9 +40,26 @@ const HomePromotion: FC<Props> = (props) => {
         setVisible(flag);
     }, []);
 
+    useEffect(() => {
+        if (data) {
+            setInnerData([...data]);
+        }
+    }, [data]);
+
+    useEffect(() => {
+        if (innerData.length === 0) {
+            visible && setVisible(false);
+        }
+    }, [innerData, visible]);
+
     const closeHandler = (e: MouseEvent<HTMLElement>) => {
         e.stopPropagation();
-        setVisible(false);
+        setInnerData((idata) => {
+            idata.splice(actIdx, 1);
+
+            return [...idata];
+        });
+
         if (type === 1) {
             sessionStorage.setItem("isClosePromotion", dayjs().format("YYYY-MM-DD"));
         }
@@ -48,7 +68,6 @@ const HomePromotion: FC<Props> = (props) => {
             sessionStorage.setItem("isClosePromotion", "true");
         }
     };
-
     if (data && data.length === 0) return null;
     return (
         <div>
@@ -94,15 +113,18 @@ const HomePromotion: FC<Props> = (props) => {
                         grabCursor={true}
                         navigation={true}
                         className={"min-h-[3.8rem]"}
+                        onSlideChange={(swiper) => {
+                            setActIdx(swiper.activeIndex);
+                            // console.log('当前 active 的 slide 索引:', swiper.activeIndex);
+                        }}
                     >
-                        {data?.map((promotion, index) => (
+                        {innerData?.map((promotion, index) => (
                             <SwiperSlide key={index}>
                                 <Box
                                     action={promotion.action_type}
                                     actionData={promotion.action_params}
                                 >
                                     <div
-                                        onClick={(e) => closeHandler(e)}
                                         className={
                                             "relative h-[3.4722rem] w-[100%] rounded-[0.1389rem]"
                                         }
@@ -117,6 +139,7 @@ const HomePromotion: FC<Props> = (props) => {
                                                 " h-[0.5556rem] w-[0.5556rem]" +
                                                 " rounded-tr-[0.1389rem]"
                                             }
+                                            onClick={(e) => closeHandler(e)}
                                         >
                                             <i
                                                 className={