|
|
@@ -13,11 +13,11 @@ import CustomButton from "@/components/CustomButton";
|
|
|
import CutDown from "@/components/CutDown";
|
|
|
import HeaderBack from "@/components/HeaderBack";
|
|
|
import Tabs from "@/components/Tabs";
|
|
|
-import { HeaderImageMap, RankSourceMap } from "@/enums";
|
|
|
+import { HeaderImageMap, RankSourceMap, RankTypeMap } from "@/enums";
|
|
|
import { useRouter } from "@/i18n/routing";
|
|
|
import { cryptoStr } from "@/utils";
|
|
|
import { useRequest } from "ahooks";
|
|
|
-import { InfiniteScroll } from "antd-mobile";
|
|
|
+import { InfiniteScroll, Loading } from "antd-mobile";
|
|
|
import clsx from "clsx";
|
|
|
import Image from "next/image";
|
|
|
import React from "react";
|
|
|
@@ -39,11 +39,19 @@ const Page = () => {
|
|
|
source: 1,
|
|
|
type: 1,
|
|
|
});
|
|
|
+ const [isChange, setIsChange] = React.useState<boolean>(false);
|
|
|
// source 来源(1现金投注2现金+彩金投注3免费币投注4重玩币投注5现金充值6邀请玩家)
|
|
|
// type 榜单类型(0小时榜1日榜单2周榜单3月榜)
|
|
|
|
|
|
+ const doChange = () => {
|
|
|
+ setIsChange(true);
|
|
|
+ setTimeout(() => {
|
|
|
+ setIsChange(false);
|
|
|
+ }, 1000);
|
|
|
+ };
|
|
|
+
|
|
|
const pageInfo = React.useRef({
|
|
|
- page: 0,
|
|
|
+ page: 1,
|
|
|
});
|
|
|
const SourceObject = React.useMemo(() => {
|
|
|
if (!rankData?.length) return [];
|
|
|
@@ -85,14 +93,14 @@ const Page = () => {
|
|
|
if (!SourceObject[currentSource.source]) return [];
|
|
|
const result: any = [];
|
|
|
Object.keys(SourceObject[currentSource.source]).forEach((key) => {
|
|
|
- const curType = RankSourceMap.get(Number(key)) || ({} as any);
|
|
|
+ const curType = RankTypeMap.get(Number(key)) || ({} as any);
|
|
|
const curData = SourceObject[currentSource.source][key];
|
|
|
|
|
|
result.push({
|
|
|
id: key,
|
|
|
name: (
|
|
|
<div className="flex flex-col items-center justify-center">
|
|
|
- <div className="text-[14px] font-black leading-[1]">DIA</div>
|
|
|
+ <div className="text-[14px] font-black leading-[1]">{curType.text}</div>
|
|
|
<div className="flex flex-row items-center justify-center gap-[5px] text-[12px] text-[var(--primary-button)]">
|
|
|
<i className="iconfont icon-daojishi-hui !text-[13px]"></i>
|
|
|
<div className="countdownTimer needsclick flex flex-row items-center justify-center gap-[1px]">
|
|
|
@@ -134,7 +142,6 @@ const Page = () => {
|
|
|
setRankData(res?.data || []);
|
|
|
}
|
|
|
};
|
|
|
-
|
|
|
React.useEffect(() => {
|
|
|
getRankData();
|
|
|
}, []);
|
|
|
@@ -143,7 +150,7 @@ const Page = () => {
|
|
|
pageInfo.current.page = 0;
|
|
|
setRankList([]);
|
|
|
setData({} as any);
|
|
|
- getData(areaId);
|
|
|
+ // getData(areaId);
|
|
|
}, [areaId]);
|
|
|
|
|
|
const getData = async (id: number) => {
|
|
|
@@ -184,6 +191,7 @@ const Page = () => {
|
|
|
|
|
|
const sourceChange = (actKey: any, key: any) => {
|
|
|
setCurrentSource((state: any) => ({ ...state, [key]: actKey }));
|
|
|
+ doChange();
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
@@ -214,162 +222,171 @@ const Page = () => {
|
|
|
onChanage={(val) => sourceChange(val, "type")}
|
|
|
></Tabs>
|
|
|
</div>
|
|
|
- <div className="min-h-[0] flex-1 overflow-auto">
|
|
|
- <div
|
|
|
- className={clsx(
|
|
|
- styles.total,
|
|
|
- "flex w-full flex-row items-stretch gap-[15px] rounded-[var(--borderRadius)] p-[15px]"
|
|
|
- )}
|
|
|
- >
|
|
|
- <img
|
|
|
- src="/rank/H7_jackpot_jiangbei_icon.webp"
|
|
|
- alt=""
|
|
|
- className="w-[100px]"
|
|
|
- />
|
|
|
- <div className="flex flex-1 flex-col justify-between leading-[1]">
|
|
|
- <div className="flex items-center">
|
|
|
- <img
|
|
|
- className="w-[10px]"
|
|
|
- src="/rank/H7_jackpot_yezi_icon.webp"
|
|
|
+ {!isChange && (
|
|
|
+ <div className="min-h-[0] flex-1 overflow-auto">
|
|
|
+ <div
|
|
|
+ className={clsx(
|
|
|
+ styles.total,
|
|
|
+ "flex w-full flex-row items-stretch gap-[15px] rounded-[var(--borderRadius)] p-[15px]"
|
|
|
+ )}
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="/rank/H7_jackpot_jiangbei_icon.webp"
|
|
|
+ alt=""
|
|
|
+ className="w-[100px]"
|
|
|
+ />
|
|
|
+ <div className="flex flex-1 flex-col justify-between leading-[1]">
|
|
|
+ <div className="flex items-center">
|
|
|
+ <img
|
|
|
+ className="w-[10px]"
|
|
|
+ src="/rank/H7_jackpot_yezi_icon.webp"
|
|
|
+ style={{
|
|
|
+ transform: "rotateY(180deg)",
|
|
|
+ transformOrigin: "center",
|
|
|
+ }}
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <span className="mx-[.1rem] text-[14px] font-black">
|
|
|
+ Daily Contest
|
|
|
+ </span>
|
|
|
+ <img
|
|
|
+ className="w-[10px]"
|
|
|
+ src="/rank/H7_jackpot_yezi_icon.webp"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div className="text text-[14px]">Contest prize pool</div>
|
|
|
+ <div
|
|
|
style={{
|
|
|
- transform: "rotateY(180deg)",
|
|
|
- transformOrigin: "center",
|
|
|
+ boxShadow: "0 0 0 1px var(--primary-button) inset",
|
|
|
}}
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <span className="mx-[.1rem] text-[14px] font-black">
|
|
|
- Daily Contest
|
|
|
- </span>
|
|
|
- <img
|
|
|
- className="w-[10px]"
|
|
|
- src="/rank/H7_jackpot_yezi_icon.webp"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div className="text text-[14px]">Contest prize pool</div>
|
|
|
- <div
|
|
|
- style={{
|
|
|
- boxShadow: "0 0 0 1px var(--primary-button) inset",
|
|
|
- }}
|
|
|
- className="flex items-center rounded-[var(--borderRadius)] bg-[#fff] py-[6px] pl-[20px] text-[17px] font-black tracking-[2px] text-[var(--textColor4)]"
|
|
|
- >
|
|
|
- R$ {data?.total || 0}
|
|
|
- </div>
|
|
|
- <div className="text-[12px]">
|
|
|
- 2025-07-30 00:00 ~ 2025-07-31 00:00
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div className="mt-[.1rem] rounded-[var(--borderRadius)] bg-[var(--main-background)] px-[15px] py-[10px]">
|
|
|
- <div className="flex items-center justify-between border-b-[1px] border-[var(--primary-button)] pb-[.1rem]">
|
|
|
- <Image
|
|
|
- src={HeaderImageMap.get(1)?.img || "/img/avatar.webp"}
|
|
|
- className={"mr-[.1rem] h-[58px] w-[58px] rounded-[50%]"}
|
|
|
- alt={"avatar"}
|
|
|
- width={120}
|
|
|
- height={120}
|
|
|
- />
|
|
|
- <div className="flex flex-1 flex-col justify-between">
|
|
|
- <div className="font-black">
|
|
|
- {cryptoStr(data?.self_rank?.nickName)}
|
|
|
+ className="flex items-center rounded-[var(--borderRadius)] bg-[#fff] py-[6px] pl-[20px] text-[17px] font-black tracking-[2px] text-[var(--textColor4)]"
|
|
|
+ >
|
|
|
+ R$ {data?.total || 0}
|
|
|
+ </div>
|
|
|
+ <div className="text-[12px]">
|
|
|
+ 2025-07-30 00:00 ~ 2025-07-31 00:00
|
|
|
</div>
|
|
|
- <div>Apostas: 0</div>
|
|
|
</div>
|
|
|
- <CustomButton className="!px-[.1rem] !py-[.08rem]">
|
|
|
- Aposte
|
|
|
- </CustomButton>
|
|
|
</div>
|
|
|
- <div className="mt-[10px] flex items-center">
|
|
|
- <div className="flex flex-1 flex-col items-center justify-between border-r-[1px] border-[var(--primary-button)]">
|
|
|
- <div className="text-[14px] font-black">Meu ranking</div>
|
|
|
- <div className="mt-[8px] text-[16px] font-black">
|
|
|
- Fora do ranking
|
|
|
+ <div className="mt-[.1rem] rounded-[var(--borderRadius)] bg-[var(--main-background)] px-[15px] py-[10px]">
|
|
|
+ <div className="flex items-center justify-between border-b-[1px] border-[var(--primary-button)] pb-[.1rem]">
|
|
|
+ <Image
|
|
|
+ src={HeaderImageMap.get(1)?.img || "/img/avatar.webp"}
|
|
|
+ className={"mr-[.1rem] h-[58px] w-[58px] rounded-[50%]"}
|
|
|
+ alt={"avatar"}
|
|
|
+ width={120}
|
|
|
+ height={120}
|
|
|
+ />
|
|
|
+ <div className="flex flex-1 flex-col justify-between">
|
|
|
+ <div className="font-black">
|
|
|
+ {cryptoStr(data?.self_rank?.nickName)}
|
|
|
+ </div>
|
|
|
+ <div>Apostas: 0</div>
|
|
|
</div>
|
|
|
+ <CustomButton className="!px-[.1rem] !py-[.08rem]">
|
|
|
+ Aposte
|
|
|
+ </CustomButton>
|
|
|
</div>
|
|
|
- <div className="flex flex-1 flex-col items-center justify-between">
|
|
|
- <div className="text-[14px] font-black">Prêmio</div>
|
|
|
- <div className="mt-[8px] text-[14px] font-black">
|
|
|
- {data?.self_rank?.reward && data.self_rank.reward[0]
|
|
|
- ? data.self_rank.reward[0].amount
|
|
|
- : 0}{" "}
|
|
|
- <span className="text-[var(--textColor4)]">
|
|
|
- (
|
|
|
+ <div className="mt-[10px] flex items-center">
|
|
|
+ <div className="flex flex-1 flex-col items-center justify-between border-r-[1px] border-[var(--primary-button)]">
|
|
|
+ <div className="text-[14px] font-black">
|
|
|
+ Meu ranking
|
|
|
+ </div>
|
|
|
+ <div className="mt-[8px] text-[16px] font-black">
|
|
|
+ Fora do ranking
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="flex flex-1 flex-col items-center justify-between">
|
|
|
+ <div className="text-[14px] font-black">Prêmio</div>
|
|
|
+ <div className="mt-[8px] text-[14px] font-black">
|
|
|
{data?.self_rank?.reward && data.self_rank.reward[0]
|
|
|
- ? data.self_rank.reward[0].ratio
|
|
|
- : 0}
|
|
|
- %)
|
|
|
- </span>
|
|
|
+ ? data.self_rank.reward[0].amount
|
|
|
+ : 0}{" "}
|
|
|
+ <span className="text-[var(--textColor4)]">
|
|
|
+ (
|
|
|
+ {data?.self_rank?.reward &&
|
|
|
+ data.self_rank.reward[0]
|
|
|
+ ? data.self_rank.reward[0].ratio
|
|
|
+ : 0}
|
|
|
+ %)
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <h3 className="py-[.1rem] text-center text-[14px] text-[var(--textColor2)]">
|
|
|
- Aposte para subir no ranking
|
|
|
- </h3>
|
|
|
- <div className="mt-[.1rem] flex items-center justify-between">
|
|
|
- <CustomButton
|
|
|
- className={styles.agentBtn}
|
|
|
- onClick={() => router.push("/rank/history")}
|
|
|
- >
|
|
|
- <i className="iconfont icon-huodejiangli mr-[.1rem] scale-[1.4] transform text-[var(--primary-button)]"></i>
|
|
|
- <span className="text-[var(--textColor1)]">
|
|
|
- Prêmio histórico
|
|
|
- </span>
|
|
|
- </CustomButton>
|
|
|
- <CustomButton
|
|
|
- className={styles.agentBtn}
|
|
|
- onClick={() => router.push("/rank/rules")}
|
|
|
- >
|
|
|
- <i className="iconfont icon-wenjian mr-[.1rem] scale-[1.4] transform text-[var(--primary-button)]"></i>
|
|
|
- <span className="text-[var(--textColor1)]">Regras</span>
|
|
|
- </CustomButton>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div className="flex items-center px-[10px] py-[10px] text-[.13rem] font-black">
|
|
|
- <div className="w-[40px] text-center">Rank</div>
|
|
|
- <div className="w-[100px] text-center">Jogador</div>
|
|
|
- <div className="w-[80px] text-center">Apostas</div>
|
|
|
- <div className="flex-1 text-right">Prêmio</div>
|
|
|
+ <h3 className="py-[.1rem] text-center text-[14px] text-[var(--textColor2)]">
|
|
|
+ Aposte para subir no ranking
|
|
|
+ </h3>
|
|
|
+ <div className="mt-[.1rem] flex items-center justify-between">
|
|
|
+ <CustomButton
|
|
|
+ className={styles.agentBtn}
|
|
|
+ onClick={() => router.push("/rank/history")}
|
|
|
+ >
|
|
|
+ <i className="iconfont icon-huodejiangli mr-[.1rem] scale-[1.4] transform text-[var(--primary-button)]"></i>
|
|
|
+ <span className="text-[var(--textColor1)]">
|
|
|
+ Prêmio histórico
|
|
|
+ </span>
|
|
|
+ </CustomButton>
|
|
|
+ <CustomButton
|
|
|
+ className={styles.agentBtn}
|
|
|
+ onClick={() => router.push("/rank/rules")}
|
|
|
+ >
|
|
|
+ <i className="iconfont icon-wenjian mr-[.1rem] scale-[1.4] transform text-[var(--primary-button)]"></i>
|
|
|
+ <span className="text-[var(--textColor1)]">Regras</span>
|
|
|
+ </CustomButton>
|
|
|
</div>
|
|
|
- {!!rankList?.length &&
|
|
|
- rankList.map((item) => {
|
|
|
- let curReward: RankReward = {} as RankReward;
|
|
|
- if (item?.reward?.length) {
|
|
|
- curReward = item?.reward[0];
|
|
|
- }
|
|
|
- return (
|
|
|
- <div
|
|
|
- key={item.rank}
|
|
|
- className="flex items-center px-[10px] py-[10px] text-[.12rem] font-normal"
|
|
|
- >
|
|
|
- <div className="w-[40px] text-center">
|
|
|
- {getNumber(item.rank)}
|
|
|
- </div>
|
|
|
- <div className="w-[100px] text-center">
|
|
|
- {cryptoStr(item?.nickName)}
|
|
|
- </div>
|
|
|
- <div className="w-[80px] text-center text-[var(--textColor4)]">
|
|
|
- {item.score}
|
|
|
- </div>
|
|
|
- <div className="flex-1 text-right text-[var(--textColor4)]">
|
|
|
- R${curReward?.amount || 0}
|
|
|
- <span className="text-[var(--textColor1)]">
|
|
|
- ({curReward?.ratio || 0}%)
|
|
|
- </span>
|
|
|
+ <div>
|
|
|
+ <div className="flex items-center px-[10px] py-[10px] text-[.13rem] font-black">
|
|
|
+ <div className="w-[40px] text-center">Rank</div>
|
|
|
+ <div className="w-[100px] text-center">Jogador</div>
|
|
|
+ <div className="w-[80px] text-center">Apostas</div>
|
|
|
+ <div className="flex-1 text-right">Prêmio</div>
|
|
|
+ </div>
|
|
|
+ {!!rankList?.length &&
|
|
|
+ rankList.map((item) => {
|
|
|
+ let curReward: RankReward = {} as RankReward;
|
|
|
+ if (item?.reward?.length) {
|
|
|
+ curReward = item?.reward[0];
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ key={item.rank}
|
|
|
+ className="flex items-center px-[10px] py-[10px] text-[.12rem] font-normal"
|
|
|
+ >
|
|
|
+ <div className="w-[40px] text-center">
|
|
|
+ {getNumber(item.rank)}
|
|
|
+ </div>
|
|
|
+ <div className="w-[100px] text-center">
|
|
|
+ {cryptoStr(item?.nickName)}
|
|
|
+ </div>
|
|
|
+ <div className="w-[80px] text-center text-[var(--textColor4)]">
|
|
|
+ {item.score}
|
|
|
+ </div>
|
|
|
+ <div className="flex-1 text-right text-[var(--textColor4)]">
|
|
|
+ R${curReward?.amount || 0}
|
|
|
+ <span className="text-[var(--textColor1)]">
|
|
|
+ ({curReward?.ratio || 0}%)
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- );
|
|
|
- })}
|
|
|
- <InfiniteScroll
|
|
|
- hasMore={!noMore}
|
|
|
- loadMore={async () => {
|
|
|
- if (loading || !pageInfo.current.page) return;
|
|
|
- pageInfo.current.page++;
|
|
|
- await getData(areaId);
|
|
|
- }}
|
|
|
- ></InfiniteScroll>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ <InfiniteScroll
|
|
|
+ hasMore={!noMore}
|
|
|
+ loadMore={async () => {
|
|
|
+ pageInfo.current.page++;
|
|
|
+ await getData(areaId);
|
|
|
+ }}
|
|
|
+ ></InfiniteScroll>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ )}
|
|
|
+ {isChange && (
|
|
|
+ <div className="flex flex-1 items-center justify-center rounded-[.1rem] bg-[var(--main-background)]">
|
|
|
+ <Loading></Loading>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
</div>
|
|
|
</div>
|
|
|
</main>
|
year