feat: 修改

src/app/[locale]/(TabBar)/[[...share]]/_home/HomePrize.tsx

@@ -1,12 +1,15 @@
 "use client";
 import { BannerRep, PrizeTypes } from "@/api/home";
 import { Card } from "@/components/Card";
+import NoticeBox from "@/components/NoticeBox";
 import { Tabs } from "antd-mobile";
 import clsx from "clsx";
 import React, { FC } from "react";
-import { Autoplay, FreeMode } from "swiper/modules";
+import "swiper/css";
+import { Autoplay } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 import styles from "./prize.module.scss";
+
 interface Props {
     data: PrizeTypes[];
     notices?: BannerRep[];
@@ -15,22 +18,29 @@ interface Props {
 
 const HomePrize: FC<Props> = (props) => {
     const { data, type, notices } = props;
+    const noticeSwiperRef = React.useRef<any>(null);
+    const [act, setAct] = React.useState<number>(0);
 
     const renderData = React.useMemo(() => {
         if (type !== "notice") return data;
         const result: any = [];
         if (!!data?.length) {
+            let bigWin: string[] = [];
             data.forEach((item) => {
-                result.push({
-                    text: ` ${item.phone ? item.phone.slice(0, 1) + "*****" + item.phone.slice(-3) : ""}
-                                acabou de retirar {prize.amount} R$`,
-                });
+                bigWin.push(
+                    `${item.phone ? item.phone.slice(0, 1) + "*****" + item.phone.slice(-3) : ""} acabou de retirar {prize.amount} R$`
+                );
+            });
+            result.push({
+                dataType: "bigWin",
+                data: bigWin,
             });
         }
         if (!!notices?.length) {
             notices?.forEach((item) => {
                 result.push({
-                    text: item.content,
+                    dataType: "notice",
+                    data: item.content,
                 });
             });
         }
@@ -38,6 +48,14 @@ const HomePrize: FC<Props> = (props) => {
         return result;
     }, [data, notices, type]);
 
+    const noticeEnd = (idx: number) => {
+        if (noticeSwiperRef.current) {
+            const toIndex = idx + 1 >= renderData.length ? 0 : idx + 1;
+            setAct(toIndex);
+            noticeSwiperRef.current?.slideToLoop(toIndex);
+        }
+    };
+
     if (!renderData?.length) return null;
 
     if (type === "notice") {
@@ -52,26 +70,23 @@ const HomePrize: FC<Props> = (props) => {
                         "iconfont icon-yangshengqi mr-[0.06rem] text-[.14rem] text-[var(--textColor6)]"
                     }
                 ></div>
+                {/* <NoticeBox content={renderData[0].data}></NoticeBox> */}
                 <Swiper
-                    spaceBetween={30}
+                    direction="vertical"
                     loop
-                    autoplay={{
-                        delay: 0,
-                    }}
-                    speed={5000}
-                    freeMode
-                    slidesPerView={"auto"}
-                    modules={[Autoplay, FreeMode]}
+                    slidesPerView={1}
                     className="homeNoticeSwiper"
+                    onSwiper={(swiper) => {
+                        noticeSwiperRef.current = swiper;
+                    }}
                 >
                     {renderData.map((item: any, index: number) => (
                         <SwiperSlide key={index}>
-                            <div
-                                className={
-                                    "textBox inline-block !text-[.12rem] text-[var(--textColor1)]"
-                                }
-                                dangerouslySetInnerHTML={{ __html: item.text }}
-                            ></div>
+                            <NoticeBox
+                                content={item.data}
+                                start={index === act}
+                                onEnd={() => noticeEnd(index)}
+                            ></NoticeBox>
                         </SwiperSlide>
                     ))}
                 </Swiper>

src/app/[locale]/(TabBar)/[[...share]]/_home/HomeTabs.tsx

@@ -223,6 +223,17 @@ const Tabs: FC<Props> = (props) => {
 
     React.useEffect(() => {
         initScroll();
+        window.addEventListener("resize", () => {
+            getContainerInfo();
+            getStickyContainerInfo();
+        });
+        return () => {
+            window.removeEventListener("resize", () => {
+                getContainerInfo();
+                getStickyContainerInfo();
+            });
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     const getStickyContainerInfo = () => {

src/components/NoticeBox/index.module.scss

@@ -0,0 +1,10 @@
+.noticeBox {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+}
+.content {
+    white-space: nowrap;
+}

src/components/NoticeBox/index.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import styles from "./index.module.scss";
+
+interface Props {
+    content: string;
+    speed?: number; //每100px走完的时间
+    onEnd?: () => void;
+    start?: boolean;
+}
+
+const NoticeBox: React.FC<Props> = ({ content, speed = 100, onEnd, start = true }) => {
+    const contextRef = React.useRef<HTMLDivElement | null>(null);
+    const noticeBoxRef = React.useRef<HTMLDivElement | null>(null);
+    const timeRef = React.useRef<NodeJS.Timeout | null>(null);
+    React.useEffect(() => {
+        if (start) {
+            if (timeRef.current) {
+                clearTimeout(timeRef.current);
+                timeRef.current = null;
+            }
+            timeRef.current = setTimeout(() => {
+                doRun();
+            }, 10);
+        }
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [start]);
+    const doRun = () => {
+        if (!content) return;
+        if (contextRef.current && noticeBoxRef.current) {
+            const width = contextRef.current.offsetWidth;
+            if (noticeBoxRef.current.offsetWidth > width) {
+                setTimeout(() => {
+                    doEnd();
+                }, 3000);
+                return;
+            }
+            contextRef.current.style.transform = `translateX(-100%)`;
+            contextRef.current.style.transition = `${width / speed}s linear`;
+        }
+    };
+
+    const doEnd = () => {
+        if (contextRef.current) {
+            contextRef.current.style.transition = `none`;
+            contextRef.current.style.transform = `translateX(0)`;
+        }
+        if (typeof onEnd === "function") {
+            onEnd();
+        }
+    };
+
+    return (
+        <div className={styles.noticeBox} ref={noticeBoxRef}>
+            <div
+                className={styles.content}
+                ref={contextRef}
+                onTransitionEnd={doEnd}
+                dangerouslySetInnerHTML={{ __html: content }}
+            ></div>
+        </div>
+    );
+};
+export default NoticeBox;

src/dialog/auto.tsx

@@ -6,7 +6,7 @@ import feedback from "@/feedback";
 import { usePathname } from "@/i18n/routing";
 import { useUserInfoStore } from "@/stores/useUserInfoStore";
 import useWheelStore from "@/stores/useWheelStore";
-import { commonMask } from "@/utils";
+import { commonMask, sleep } from "@/utils";
 import { server } from "@/utils/client";
 import { getToken } from "@/utils/Cookies";
 import { Local } from "@/utils/storage";
@@ -197,9 +197,8 @@ const AutoShowDialog = () => {
         }
 
         for (let i = startShow; i < data.length; i++) {
+            if (window.location.pathname.length > 3) break;
             const curData = data[i];
-
-            if (pathName !== "/") return;
             if (!checkIsCanShow(curData)) {
                 // saveShowIndex(i);
                 continue;
@@ -278,6 +277,7 @@ const AutoShowDialog = () => {
             // 记录当前展示到几个了
             // saveShowIndex(i);
             if (curData.id) saveCache(curData.pop_type, curData.id);
+            await sleep(300);
         }
     };
 

src/utils/index.ts

@@ -110,6 +110,9 @@ export const goBlankPage = async (handler: Function | string, target = "_self")
 export const commonMask = {
     count: 0,
     show() {
+        if (this.count <= 0) {
+            this.count === 0;
+        }
         if (this.count > 0) {
             this.count++;
             return;
@@ -122,7 +125,9 @@ export const commonMask = {
         }
     },
     hide() {
-        this.count--;
+        if (this.count > 0) {
+            this.count--;
+        }
         if (this.count >= 1) {
             return;
         }
@@ -184,3 +189,10 @@ export const isPWAorAPK = (): boolean => {
         !!window?.isAndroidAPK
     );
 };
+export const sleep = (wait: number = 1000) => {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve(true);
+        }, wait);
+    });
+};