|
@@ -1,78 +1,180 @@
|
|
"use client";
|
|
"use client";
|
|
|
|
+import { claimActivityReward, getJackpotInfo, GetJackpotResponse } from "@/api/activity";
|
|
|
|
+import { formatAmount } from "@/utils";
|
|
|
|
+import { Toast } from "antd-mobile";
|
|
import clsx from "clsx";
|
|
import clsx from "clsx";
|
|
|
|
+import dayjs from "dayjs";
|
|
|
|
+import { useTranslations } from "next-intl";
|
|
|
|
+import { useSearchParams } from "next/navigation";
|
|
import React from "react";
|
|
import React from "react";
|
|
import styles from "./style.module.scss";
|
|
import styles from "./style.module.scss";
|
|
|
|
|
|
|
|
+// const tabCftg = React.useMemo(() => {
|
|
|
|
+// return [
|
|
|
|
+// {
|
|
|
|
+// image: "/jackpot/2.png",
|
|
|
|
+// text: "Dia 2",
|
|
|
|
+// key: 2,
|
|
|
|
+// },
|
|
|
|
+// {
|
|
|
|
+// image: "/jackpot/3.png",
|
|
|
|
+// text: "Dia 3",
|
|
|
|
+// key: 3,
|
|
|
|
+// },
|
|
|
|
+// {
|
|
|
|
+// image: "/jackpot/7.png",
|
|
|
|
+// text: "Dia 7",
|
|
|
|
+// key: 7,
|
|
|
|
+// },
|
|
|
|
+// {
|
|
|
|
+// image: "/jackpot/15.png",
|
|
|
|
+// text: "Dia 15",
|
|
|
|
+// key: 15,
|
|
|
|
+// },
|
|
|
|
+// {
|
|
|
|
+// image: "/jackpot/30.png",
|
|
|
|
+// text: "Dia 30",
|
|
|
|
+// key: 30,
|
|
|
|
+// },
|
|
|
|
+// ];
|
|
|
|
+// }, []);
|
|
|
|
+
|
|
const Jackpot: React.FC = () => {
|
|
const Jackpot: React.FC = () => {
|
|
- const [actKey, setActKey] = React.useState<number>(2);
|
|
|
|
- const tabCftg = React.useMemo(() => {
|
|
|
|
|
|
+ const searchParams = useSearchParams();
|
|
|
|
+ const t = useTranslations();
|
|
|
|
+ const [actKey, setActKey] = React.useState<number | string>(2);
|
|
|
|
+ const [infoData, setInfoData] = React.useState<GetJackpotResponse>();
|
|
|
|
+ const activeId = searchParams.get("activity_id");
|
|
|
|
+ const images = React.useMemo(() => {
|
|
return [
|
|
return [
|
|
- {
|
|
|
|
- image: "/jackpot/2.png",
|
|
|
|
- text: "Dia 2",
|
|
|
|
- key: 2,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- image: "/jackpot/3.png",
|
|
|
|
- text: "Dia 3",
|
|
|
|
- key: 3,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- image: "/jackpot/7.png",
|
|
|
|
- text: "Dia 7",
|
|
|
|
- key: 7,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- image: "/jackpot/15.png",
|
|
|
|
- text: "Dia 15",
|
|
|
|
- key: 15,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- image: "/jackpot/30.png",
|
|
|
|
- text: "Dia 30",
|
|
|
|
- key: 30,
|
|
|
|
- },
|
|
|
|
|
|
+ "/jackpot/2.png",
|
|
|
|
+ "/jackpot/3.png",
|
|
|
|
+ "/jackpot/7.png",
|
|
|
|
+ "/jackpot/15.png",
|
|
|
|
+ "/jackpot/30.png",
|
|
];
|
|
];
|
|
}, []);
|
|
}, []);
|
|
|
|
+ const curTabData: any = React.useMemo(() => {
|
|
|
|
+ return infoData?.list[`${actKey}`] || {};
|
|
|
|
+ }, [actKey, infoData]);
|
|
|
|
+
|
|
const list = React.useMemo(() => {
|
|
const list = React.useMemo(() => {
|
|
const base = [
|
|
const base = [
|
|
{
|
|
{
|
|
left: "Ãmbito do depósito",
|
|
left: "Ãmbito do depósito",
|
|
right: "Bónus Misterioso",
|
|
right: "Bónus Misterioso",
|
|
},
|
|
},
|
|
- {
|
|
|
|
- left: "12323",
|
|
|
|
- right: "R$ 1,999.00",
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- left: "12323",
|
|
|
|
- right: "R$ 1,999.00",
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- left: "123223233",
|
|
|
|
- right: "R$ 1,999.00",
|
|
|
|
- },
|
|
|
|
];
|
|
];
|
|
|
|
+ if (curTabData?.arr) {
|
|
|
|
+ for (let i = 0; i < curTabData.arr.length; i++) {
|
|
|
|
+ const item = curTabData.arr[i];
|
|
|
|
+ base.push({
|
|
|
|
+ left: `R$ ${formatAmount(item.min)}-${formatAmount(item.max)}`,
|
|
|
|
+ right: `R$ ${formatAmount(item.show_min)}-${formatAmount(item.show_max)}`,
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ }
|
|
return base;
|
|
return base;
|
|
|
|
+ }, [curTabData]);
|
|
|
|
+ React.useEffect(() => {
|
|
|
|
+ getInfoData();
|
|
|
|
+ // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
}, []);
|
|
|
|
|
|
|
|
+ const getInfoData = async () => {
|
|
|
|
+ if (!activeId) return;
|
|
|
|
+ try {
|
|
|
|
+ const res = await getJackpotInfo({ activity_id: Number(activeId) });
|
|
|
|
+ if (res.code === 200) {
|
|
|
|
+ if (res.data.list) {
|
|
|
|
+ const keys = Object.keys(res.data.list);
|
|
|
|
+ const result: any = {};
|
|
|
|
+ let initKey = 0;
|
|
|
|
+ if (keys.length > 0) {
|
|
|
|
+ for (let i = 0; i < keys.length; i++) {
|
|
|
|
+ const curKey = keys[i];
|
|
|
|
+ const curItem = res.data.list[curKey];
|
|
|
|
+ if (i === 0) {
|
|
|
|
+ initKey = Number(curKey);
|
|
|
|
+ }
|
|
|
|
+ if (curItem?.is_unlock && !curItem?.is_suss) {
|
|
|
|
+ initKey = Number(curKey);
|
|
|
|
+ }
|
|
|
|
+ let time = null;
|
|
|
|
+ if (res.data) {
|
|
|
|
+ time = dayjs(res.data.start_at * 1000)
|
|
|
|
+ .add(Number(curKey), "day")
|
|
|
|
+ .format("YYYY-MM-DD HH:mm");
|
|
|
|
+ }
|
|
|
|
+ result[curKey] = {
|
|
|
|
+ ...curItem,
|
|
|
|
+ time,
|
|
|
|
+ };
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ setInfoData({ ...res.data, list: result });
|
|
|
|
+ setActKey(Number(initKey));
|
|
|
|
+ } else {
|
|
|
|
+ throw new Error(t(`activity.claimError`));
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ throw new Error(t(`code.${res.code}`));
|
|
|
|
+ }
|
|
|
|
+ } catch (error: any) {
|
|
|
|
+ if (error) {
|
|
|
|
+ Toast.show({
|
|
|
|
+ content: error.message || error.toString(),
|
|
|
|
+ maskClickable: false,
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ const doClaim = async () => {
|
|
|
|
+ try {
|
|
|
|
+ const res = await claimActivityReward({
|
|
|
|
+ activity_id: Number(activeId),
|
|
|
|
+ id: curTabData.id,
|
|
|
|
+ });
|
|
|
|
+ if (res.code === 200 && res?.data?.code === 1) {
|
|
|
|
+ await getInfoData();
|
|
|
|
+ Toast.show({
|
|
|
|
+ content: "Reclamação bem-sucedida",
|
|
|
|
+ maskClickable: false,
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ throw new Error(t(`code.400`));
|
|
|
|
+ }
|
|
|
|
+ } catch (error: any) {
|
|
|
|
+ if (error) {
|
|
|
|
+ Toast.show({
|
|
|
|
+ content: error.message || error.toString(),
|
|
|
|
+ maskClickable: false,
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+
|
|
return (
|
|
return (
|
|
<div className={styles.main}>
|
|
<div className={styles.main}>
|
|
<div className={styles.container}>
|
|
<div className={styles.container}>
|
|
<div className={styles.tab}>
|
|
<div className={styles.tab}>
|
|
- {tabCftg.map((item) => {
|
|
|
|
- return (
|
|
|
|
- <div
|
|
|
|
- className={clsx(styles.tabItem, {
|
|
|
|
- [styles.active]: actKey === item.key,
|
|
|
|
- })}
|
|
|
|
- key={item.key}
|
|
|
|
- >
|
|
|
|
- <img src={item.image} />
|
|
|
|
- <span>{item.text}</span>
|
|
|
|
- </div>
|
|
|
|
- );
|
|
|
|
- })}
|
|
|
|
|
|
+ {infoData?.list &&
|
|
|
|
+ Object.keys(infoData?.list).map((key: string | number, idx: number) => {
|
|
|
|
+ const item = infoData?.list[key];
|
|
|
|
+ return (
|
|
|
|
+ <div
|
|
|
|
+ className={clsx(styles.tabItem, {
|
|
|
|
+ [styles.active]: actKey === Number(key),
|
|
|
|
+ })}
|
|
|
|
+ key={key}
|
|
|
|
+ onClick={() => setActKey(Number(key))}
|
|
|
|
+ >
|
|
|
|
+ <img src={images[idx]} />
|
|
|
|
+ <span>Dia {key}</span>
|
|
|
|
+ </div>
|
|
|
|
+ );
|
|
|
|
+ })}
|
|
</div>
|
|
</div>
|
|
<div className={clsx(styles.intro)}>
|
|
<div className={clsx(styles.intro)}>
|
|
<div
|
|
<div
|
|
@@ -83,13 +185,19 @@ const Jackpot: React.FC = () => {
|
|
>
|
|
>
|
|
<div className={clsx("flex flex-row justify-between")}>
|
|
<div className={clsx("flex flex-row justify-between")}>
|
|
<div className={clsx(styles.name, styles.date)}>Hora de registo:</div>
|
|
<div className={clsx(styles.name, styles.date)}>Hora de registo:</div>
|
|
- <div>2025-04-11 16:30</div>
|
|
|
|
|
|
+ <div>
|
|
|
|
+ {infoData?.display_start_time
|
|
|
|
+ ? dayjs(infoData?.display_start_time * 1000).format(
|
|
|
|
+ "YYYY-MM-DD HH:mm"
|
|
|
|
+ )
|
|
|
|
+ : ""}
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
<div className={clsx("flex flex-row justify-between")}>
|
|
<div className={clsx("flex flex-row justify-between")}>
|
|
<div className={clsx(styles.name, styles.coin)}>
|
|
<div className={clsx(styles.name, styles.coin)}>
|
|
- Depósito total de 2 Dias:
|
|
|
|
|
|
+ Depósito total de {actKey} Dias:
|
|
</div>
|
|
</div>
|
|
- <div>R$ 5,000.00</div>
|
|
|
|
|
|
+ <div>R$ {formatAmount(curTabData.extra_pay_amount)}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={clsx(styles.introBottom, styles.big)}>
|
|
<div className={clsx(styles.introBottom, styles.big)}>
|
|
@@ -99,26 +207,31 @@ const Jackpot: React.FC = () => {
|
|
<div
|
|
<div
|
|
className={clsx(
|
|
className={clsx(
|
|
styles.date,
|
|
styles.date,
|
|
- "relative mt-[.08rem] flex flex-row items-center pl-[.3rem] text-[.15rem] font-bold"
|
|
|
|
|
|
+ "relative mt-[.08rem] flex h-[.2rem] w-[1.8rem] flex-row items-center pl-[.3rem] text-[.15rem] font-bold"
|
|
)}
|
|
)}
|
|
>
|
|
>
|
|
- 2025-04-11 16:30
|
|
|
|
|
|
+ {curTabData.time}
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
className={clsx(
|
|
className={clsx(
|
|
styles.coin,
|
|
styles.coin,
|
|
- "relative mt-[.08rem] flex flex-row items-center pl-[.3rem] text-[.15rem] font-bold"
|
|
|
|
|
|
+ "relative mt-[.08rem] flex h-[.2rem] w-[1.8rem] flex-row items-center pl-[.3rem] text-[.15rem] font-bold"
|
|
)}
|
|
)}
|
|
>
|
|
>
|
|
Bónus misterioso
|
|
Bónus misterioso
|
|
</div>
|
|
</div>
|
|
<div className={clsx("mt-[.08rem] text-[.18rem] font-bold text-[#ffd200]")}>
|
|
<div className={clsx("mt-[.08rem] text-[.18rem] font-bold text-[#ffd200]")}>
|
|
- R$1,999.00
|
|
|
|
|
|
+ R$ {formatAmount(curTabData.extra_num)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={clsx("mt-[.2rem] flex flex-row justify-center")}>
|
|
<div className={clsx("mt-[.2rem] flex flex-row justify-center")}>
|
|
- <div className={clsx(styles.btn)}>
|
|
|
|
|
|
+ <div
|
|
|
|
+ className={clsx(styles.btn, {
|
|
|
|
+ [styles.disabled]: !(!curTabData.is_suss && curTabData.is_unlock),
|
|
|
|
+ })}
|
|
|
|
+ onClick={doClaim}
|
|
|
|
+ >
|
|
<span className={clsx("mt-[.1rem] text-[.2rem] font-[900]")}>RECEBER</span>
|
|
<span className={clsx("mt-[.1rem] text-[.2rem] font-[900]")}>RECEBER</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|