feat: 修改

src/api/activity.ts

@@ -286,3 +286,11 @@ export const getRankDetail = async (params: RankRequestParams) => {
         data: params,
     });
 };
+
+///v1/api/user/rank/refreshRank
+export const refreshRank = async (params: { area_id: number }) => {
+    return server.post<RankItem>({
+        url: "/v1/api/user/rank/refreshRank",
+        data: params,
+    });
+};

src/app/[locale]/(doings)/fission/(locale)/page.module.scss

@@ -87,14 +87,16 @@
         top: 0;
         padding-top: 0.21rem;
         font-size: 0.14rem;
-        font-weight: 700;
+        font-weight: 900;
         text-align: center;
+        color: #ffec00;
         background: linear-gradient(to bottom, #ffffc2, #ffd74c);
         -webkit-background-clip: text;
         background-clip: text;
         color: transparent;
         filter: drop-shadow(2px 2px 0 #fd1d9c) drop-shadow(2px -2px 0 #fd1d9c)
             drop-shadow(-2px 2px 0 #fd1d9c) drop-shadow(-2px -2px 0 #fd1d9c);
+
         &:after {
             content: "";
             position: absolute;

src/app/[locale]/(doings)/rank/detail/history.tsx

@@ -3,6 +3,7 @@ import { getRankDetail, Rank, RankDetail, RankRequestParams, RankReward } from "
 import Empty from "@/components/Empty";
 import TipsModal from "@/components/TipsModal";
 import Vip from "@/components/Vip";
+import { HeaderImageMap } from "@/enums";
 import { InfiniteScroll } from "antd-mobile";
 import clsx from "clsx";
 import React from "react";
@@ -27,6 +28,7 @@ const History = React.forwardRef<ModalProps, Props>(({ areaId, type }, ref) => {
         page: 0,
     });
 
+    const container = React.useRef<HTMLDivElement>(null);
     const getNumber = (num: number) => {
         if (num > 3) return num;
         return <img className="inline-block w-[.3rem]" src={`/rank/t${num}.webp`} alt=""></img>;
@@ -44,9 +46,12 @@ const History = React.forwardRef<ModalProps, Props>(({ areaId, type }, ref) => {
     });
 
     React.useEffect(() => {
-        pageInfo.current.page = 0;
-        setNoMore(false);
-        setRankList([]);
+        if (visible) {
+            pageInfo.current.page = 0;
+
+            setNoMore(false);
+            setRankList([]);
+        }
         // getData();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [visible]);
@@ -78,7 +83,10 @@ const History = React.forwardRef<ModalProps, Props>(({ areaId, type }, ref) => {
             className={styles.tipModal}
             ref={tipModals}
             visible={visible}
-            onChange={(visible) => setVisible(visible)}
+            onChange={(visible) => {
+                if (container.current) container.current?.scrollTo({ top: 0 });
+                setVisible(visible);
+            }}
             title={
                 <div className="p-[.1rem] text-left">
                     <span className="text-[#fff]">Conjunto de prémios:</span>
@@ -86,7 +94,7 @@ const History = React.forwardRef<ModalProps, Props>(({ areaId, type }, ref) => {
                 </div>
             }
         >
-            <div className="h-[60vh] overflow-auto bg-[#1f2830] p-[.1rem]">
+            <div className="h-[60vh] overflow-auto bg-[#1f2830] p-[.1rem]" ref={container}>
                 {!!rankList?.length && (
                     <>
                         {rankList.map((item) => {
@@ -101,7 +109,7 @@ const History = React.forwardRef<ModalProps, Props>(({ areaId, type }, ref) => {
                                     </div>
                                     <div className={clsx(styles.normalHeader, "mr-[.2rem]")}>
                                         <img
-                                            src="https://img1.baidu.com/it/u=1699323843,2372946297&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=983"
+                                            src={HeaderImageMap.get(item.avatar)?.img}
                                             alt=""
                                             className={styles.headerImage}
                                         />

src/app/[locale]/(doings)/rank/detail/middle.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { GameItem, Rank, RankDetail, RankReward } from "@/api/activity";
 import Vip from "@/components/Vip";
+import { HeaderImageMap } from "@/enums";
 import clsx from "clsx";
 import React from "react";
 import styles from "./page.module.scss";
@@ -36,25 +37,26 @@ const MiddleContainer: React.FC<Props> = ({ data, rankList = [], gamesInfo }) =>
 
     const watchPosition = () => {
         let targetId = "middleContainer";
+        const mainBox = document.querySelector("#mainBox");
+        const top = mainBox?.getBoundingClientRect()?.top || 60;
+        const stickyBox: any = document.querySelector("#stickyBox");
+        const stickyRect = stickyBox?.getBoundingClientRect();
         hrefCfg.forEach((item) => {
             const dom = document.querySelector(`#${item.id}`);
             if (dom) {
                 const rect = dom.getBoundingClientRect();
-                if (rect.top < item.spaceTop) {
+                if (rect.top < top + item.spaceTop + stickyRect?.height || 0) {
                     targetId = item.id;
                 }
             }
-            const stickyBox: any = document.querySelector("#stickyBox");
-            if (stickyBox) {
-                const stickyRect = stickyBox.getBoundingClientRect();
-                if (stickyRect.top < 60) {
-                    stickyBox.style.background = "rgba(0,0,0,.7)";
-                } else {
-                    stickyBox.style.background = "rgba(255,255,255,0)";
-                }
-            }
         });
-        if (actIdRef.current !== targetId) {
+
+        if (stickyBox) {
+            if (stickyRect.top <= top) {
+                stickyBox.style.background = "#272629";
+            } else {
+                stickyBox.style.background = "rgba(255,255,255,0)";
+            }
         }
         setActId(targetId);
         requestAnimationFrame(watchPosition);
@@ -79,17 +81,17 @@ const MiddleContainer: React.FC<Props> = ({ data, rankList = [], gamesInfo }) =>
             {
                 text: "Classificaçães",
                 id: "middleContainer",
-                spaceTop: 60,
+                spaceTop: 5,
             },
             {
                 text: `Jogos(${gamesInfo?.count})`,
                 id: "jackpot",
-                spaceTop: 100,
+                spaceTop: 40,
             },
             {
                 text: "Regras",
                 id: "rankFooter",
-                spaceTop: 60,
+                spaceTop: 5,
             },
         ];
     }, [gamesInfo]);
@@ -128,8 +130,6 @@ const MiddleContainer: React.FC<Props> = ({ data, rankList = [], gamesInfo }) =>
                         <img src="/rank/bg2.webp" alt="" />
                         <div className={clsx(styles.persons, "px-[.2rem]")}>
                             {headerData.map((item: Rank, idx) => {
-                                // const curVip = vipImagesMap.get(item?.vipLevel || 1);
-                                // console.log(123123, item);
                                 if (!item) {
                                     return <div key={idx} className={styles.personItem}></div>;
                                 }
@@ -143,7 +143,7 @@ const MiddleContainer: React.FC<Props> = ({ data, rankList = [], gamesInfo }) =>
                                                     alt=""
                                                 />
                                                 <img
-                                                    src="https://img1.baidu.com/it/u=1699323843,2372946297&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=983"
+                                                    src={HeaderImageMap.get(item.avatar)?.img}
                                                     alt=""
                                                     className={styles.userHeader}
                                                 />
@@ -219,7 +219,7 @@ const MiddleContainer: React.FC<Props> = ({ data, rankList = [], gamesInfo }) =>
                                 </div>
                                 <div className={clsx(styles.normalHeader, "mr-[.2rem]")}>
                                     <img
-                                        src="https://img1.baidu.com/it/u=1699323843,2372946297&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=983"
+                                        src={HeaderImageMap.get(item.avatar)?.img}
                                         alt=""
                                         className={styles.headerImage}
                                     />
@@ -253,7 +253,7 @@ const MiddleContainer: React.FC<Props> = ({ data, rankList = [], gamesInfo }) =>
                             </div>
                             <div className={clsx(styles.normalHeader, "mr-[.2rem]")}>
                                 <img
-                                    src="https://img1.baidu.com/it/u=1699323843,2372946297&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=983"
+                                    src={HeaderImageMap.get(data?.self_rank?.avatar)?.img}
                                     alt=""
                                     className={styles.headerImage}
                                 />

src/app/[locale]/(doings)/rank/detail/page.module.scss

@@ -164,7 +164,7 @@
     display: flex;
     position: sticky;
     top: 0;
-    z-index: 2;
+    z-index: 4;
     padding: 0.1rem;
     .gideItem {
         flex: 1;

src/app/[locale]/(doings)/rank/detail/page.tsx

@@ -119,7 +119,7 @@ const Page = () => {
                     setModalType(-1);
                     historyRef.current?.onOpen();
                 }}
-                className="absolute right-[0px] top-[300px] z-[5] rounded-[.08rem_0_0_.08rem] bg-[rgba(255,255,255,.2)] px-[.1rem] py-[.04rem]"
+                className="absolute right-[0px] top-[320px] z-[5] rounded-[.08rem_0_0_.08rem] bg-[rgba(255,255,255,.2)] px-[.1rem] py-[.04rem]"
             >
                 <i className="iconfont icon-tubiaozhizuomoban- mr-[.06rem]"></i>
                 <span>Histórico</span>

src/app/[locale]/(doings)/rank/detail/swiper.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { RankItem } from "@/api/activity";
+import { RankItem, refreshRank } from "@/api/activity";
 import CutDown from "@/components/CutDown2";
 import { timeFormat } from "@/utils/methods";
 import clsx from "clsx";
@@ -17,29 +17,70 @@ interface Props {
 
 const RankSwiper: React.FC<Props> = ({ data = [], onChange, areaId }) => {
     const swiperRef = React.useRef<SwiperClass | null>(null);
+    const [innerData, setInnerData] = React.useState(data);
+    const timer = React.useRef<NodeJS.Timeout | null>(null);
     const doChange = (type: 1 | -1) => {
         if (swiperRef.current) {
             if (type === 1) swiperRef.current.slideNext();
             if (type === -1) swiperRef.current.slidePrev();
         }
     };
-
     React.useEffect(() => {
-        const idx = data.findIndex((item) => item.area_id === areaId);
+        console.log(9999);
+        setInnerData(data || []);
+    }, [data]);
 
+    React.useEffect(() => {
+        const idx = innerData.findIndex((item) => item.area_id === areaId);
         if (idx !== -1) {
             setTimeout(() => {
                 swiperRef.current?.slideTo(idx);
             }, 100);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [data, areaId]);
 
+    React.useEffect(() => {
+        if (timer.current) {
+            clearTimeout(timer.current);
+        }
+        timer.current = null;
+        refresh(areaId);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [areaId]);
+    const refresh = async (id?: number) => {
+        if (!id) return;
+        const res = await refreshRank({ area_id: id });
+        if (res?.code === 200) {
+            setInnerData((value) => {
+                const result = [...value];
+                for (let i = 0; i < result.length; i++) {
+                    if (result[i].area_id !== id) {
+                        continue;
+                    }
+                    result[i].total = res.data.total;
+                    break;
+                }
+                return result;
+            });
+        }
+        if (timer.current) {
+            clearTimeout(timer.current);
+            timer.current = null;
+        }
+
+        timer.current = setTimeout(() => {
+            refresh(id);
+        }, 1000 * 60);
+    };
+
     const slideChange = (swiper: any) => {
         if (typeof onChange === "function") {
             onChange(data[swiper.realIndex]);
         }
     };
-    if (!data?.length) return null;
+    if (!innerData?.length) return null;
+
     return (
         <div className={styles.swiperBox}>
             <Swiper
@@ -50,7 +91,7 @@ const RankSwiper: React.FC<Props> = ({ data = [], onChange, areaId }) => {
                 // pagination={true}
                 onSlideChange={slideChange}
             >
-                {data.map((item) => {
+                {innerData.map((item) => {
                     return (
                         <SwiperSlide key={item.id}>
                             <div
@@ -98,4 +139,4 @@ const RankSwiper: React.FC<Props> = ({ data = [], onChange, areaId }) => {
     );
 };
 
-export default RankSwiper;
+export default React.memo(RankSwiper);

src/app/[locale]/(doings)/rank/layout.tsx

@@ -14,7 +14,9 @@ export default async function Layout({
     return (
         <div className={styles.page}>
             <HeaderBack showBack={true} title={"Perfil"} />
-            <main className={"main-header"}>{children}</main>
+            <main className={"main-header"} id="mainBox">
+                {children}
+            </main>
         </div>
     );
 }

src/components/Layout/style.module.scss

@@ -7,7 +7,7 @@
 .providerBox {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 5px;
+    gap: 10px;
 }
 .providerItem {
     aspect-ratio: 1/1;
@@ -41,7 +41,7 @@
 .qianbao {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    gap: 5px;
+    gap: 10px;
     .qianbaoItem {
         cursor: pointer;
         display: flex;
@@ -61,7 +61,7 @@
 .promotionBox {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    gap: 5px;
+    gap: 10px;
     .promotionItem {
         width: 100%;
         cursor: pointer;

src/enums/index.tsx

@@ -97,3 +97,12 @@ export enum GameListTypeEnum {
     TAG = "tag_id",
     DEFAULT = "",
 }
+
+export const HeaderImageMap = new Map<number, Record<string, any>>([
+    [
+        1,
+        {
+            img: "/user_header/h_1.webp",
+        },
+    ],
+]);