|
@@ -1,5 +1,7 @@
|
|
|
"use client";
|
|
|
import {
|
|
|
+ claimActivityReward,
|
|
|
+ ContinuousCfgItem,
|
|
|
ContinuousListItem,
|
|
|
ContinuousResult,
|
|
|
ContinuousRewardItem,
|
|
@@ -7,8 +9,12 @@ import {
|
|
|
getContinuousRechargeInfo,
|
|
|
} from "@/api/activity";
|
|
|
import CutDown from "@/components/CutDown";
|
|
|
+import GlobalNotify from "@/components/ModalPopup/GlobalNotifyModal";
|
|
|
import { useRouter } from "@/i18n/routing";
|
|
|
+import { formatAmount } from "@/utils/index";
|
|
|
+import { Toast } from "antd-mobile";
|
|
|
import clsx from "clsx";
|
|
|
+import { useTranslations } from "next-intl";
|
|
|
import { useSearchParams } from "next/navigation";
|
|
|
import React from "react";
|
|
|
import styles from "./page.module.scss";
|
|
@@ -32,26 +38,68 @@ interface RewardItem {
|
|
|
dayId: number;
|
|
|
data: ContinuousRewardItem[];
|
|
|
}
|
|
|
+//"#297fcf"
|
|
|
+const DayItem = ({
|
|
|
+ data,
|
|
|
+ idx,
|
|
|
+ onClaim,
|
|
|
+}: {
|
|
|
+ data: ContinuousCfgItem;
|
|
|
+ idx: number;
|
|
|
+ onClaim: Function;
|
|
|
+}) => {
|
|
|
+ const dayColor = [
|
|
|
+ "#12940f",
|
|
|
+ "#297fcf",
|
|
|
+ "#ec3920",
|
|
|
+ "#12940f",
|
|
|
+ "#297fcf",
|
|
|
+ "#ec3920",
|
|
|
+ "#12940f",
|
|
|
+ "#297fcf",
|
|
|
+ "#ec3920",
|
|
|
+ ];
|
|
|
+
|
|
|
+ const doClaim = () => {
|
|
|
+ if (onClaim && typeof onClaim === "function") {
|
|
|
+ onClaim(data);
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
-const DayItem = ({ dayColor = "#297fcf", num = 0 }) => {
|
|
|
return (
|
|
|
<div>
|
|
|
- <div className="mb-[.1rem] flex flex-row justify-center">
|
|
|
- <div className={styles.canGet}>Grande Prêmio Disponível</div>
|
|
|
- </div>
|
|
|
- <div className="item-center mb-[.1rem] flex flex-row justify-center">
|
|
|
- <CutDown endTime={232323} itemBgColor="rgba(255,255,255,.4)"></CutDown>
|
|
|
- </div>
|
|
|
+ {data.id >= 2 && (
|
|
|
+ <div className="mb-[.1rem] flex flex-row justify-center">
|
|
|
+ <div className={styles.canGet}>Grande Prêmio Disponível</div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {!!data.end_at && (
|
|
|
+ <div className="item-center mb-[.1rem] flex flex-row justify-center">
|
|
|
+ <CutDown
|
|
|
+ endTime={data.end_at - Date.now() / 1000}
|
|
|
+ itemBgColor="rgba(255,255,255,.4)"
|
|
|
+ ></CutDown>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
<div className={styles.premioItem}>
|
|
|
<div className={styles.premioItemDay}>
|
|
|
- <span style={{ color: dayColor }}>{num}</span>
|
|
|
+ <span style={{ color: dayColor[idx] }}>{data.days}</span>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <div className="text-[.16rem] font-bold">Recarga contínua por 7 dias</div>
|
|
|
+ <div className="text-[.16rem] font-bold">
|
|
|
+ Recarga contínua por {data.days} dias
|
|
|
+ </div>
|
|
|
<div className="flrx-row flex items-center justify-between">
|
|
|
- <div>Recompensa de login Platinum 1R</div>
|
|
|
- <div className={styles.premioItemBtn}>Recebido</div>
|
|
|
- {/* Receber */}
|
|
|
+ <div>Recompensa de login Platinum {data.target_reward}R</div>
|
|
|
+ <div
|
|
|
+ className={clsx(styles.premioItemBtn, {
|
|
|
+ [styles.disabled]: data.is_sign === 0,
|
|
|
+ })}
|
|
|
+ onClick={doClaim}
|
|
|
+ >
|
|
|
+ {data.is_sign === 0 ? "Recebido" : "Receber"}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -60,24 +108,18 @@ const DayItem = ({ dayColor = "#297fcf", num = 0 }) => {
|
|
|
};
|
|
|
|
|
|
const Page = () => {
|
|
|
+ const t = useTranslations();
|
|
|
const query = Object.fromEntries(useSearchParams());
|
|
|
const [data, setData] = React.useState<ContinuousResult>({} as ContinuousResult);
|
|
|
const router = useRouter();
|
|
|
const dayContainer = React.useRef<HTMLDivElement>(null);
|
|
|
- const colors = [
|
|
|
- "#4eb04c",
|
|
|
- "#297fce",
|
|
|
- "#ec3b23",
|
|
|
- "#4eb04c",
|
|
|
- "#297fce",
|
|
|
- "#ec3b23",
|
|
|
- "#4eb04c",
|
|
|
- "#297fce",
|
|
|
- "#ec3b23",
|
|
|
- ];
|
|
|
+
|
|
|
+ const [amount, setAmount] = React.useState<any>({});
|
|
|
+ const [visible, setVisible] = React.useState<boolean>(false);
|
|
|
|
|
|
React.useEffect(() => {
|
|
|
getData();
|
|
|
+ // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
}, []);
|
|
|
const getData = async () => {
|
|
|
const res = await getContinuousRechargeInfo({ activity_id: Number(query.activity_id) });
|
|
@@ -126,6 +168,7 @@ const Page = () => {
|
|
|
}
|
|
|
const result: StageItem[] = stags
|
|
|
.map((item) => {
|
|
|
+ console.log(112233, item);
|
|
|
return {
|
|
|
...item,
|
|
|
...cfg1[item.id],
|
|
@@ -169,10 +212,78 @@ const Page = () => {
|
|
|
return result;
|
|
|
}, [data?.list?.reward_list]);
|
|
|
|
|
|
+ const waitDay = React.useMemo(() => {
|
|
|
+ if (!data?.list?.reward_list) {
|
|
|
+ return 9999;
|
|
|
+ }
|
|
|
+ const keys = Object.keys(data?.list?.reward_list);
|
|
|
+ let result = 9999;
|
|
|
+ for (let i = 0; i < keys.length; i++) {
|
|
|
+ const key = keys[i];
|
|
|
+ if (Number(keys[i]) < data.cur_num) {
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ result = Number(key) - data.cur_num;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ return result;
|
|
|
+ }, [data]);
|
|
|
+
|
|
|
+ const waitList = React.useMemo<ContinuousCfgItem[]>(() => {
|
|
|
+ if (!data?.list?.config_list) return [];
|
|
|
+ const result = [] as ContinuousCfgItem[];
|
|
|
+ data?.list?.config_list.forEach((item) => {
|
|
|
+ // if (item.id <= data.cur_num) {
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ result.push(item);
|
|
|
+ });
|
|
|
+ return result;
|
|
|
+ }, [data?.list?.config_list]);
|
|
|
+
|
|
|
const goDeposit = () => {
|
|
|
router.push("/deposit");
|
|
|
};
|
|
|
|
|
|
+ const doClaim = async (data: ContinuousCfgItem) => {
|
|
|
+ if (!data.is_sign) return;
|
|
|
+ try {
|
|
|
+ const res = await claimActivityReward({
|
|
|
+ activity_id: Number(query.activity_id),
|
|
|
+ id: data.days,
|
|
|
+ });
|
|
|
+ if (res.code === 200 && res?.data?.code === 1) {
|
|
|
+ const amountObj: any = {};
|
|
|
+ if (res?.data?.reward) {
|
|
|
+ res?.data?.reward.forEach((item: any) => {
|
|
|
+ amountObj[`coin_${item.coin_type}`] = formatAmount(item.amount);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (res?.data?.extra_reward) {
|
|
|
+ res?.data?.extra_reward.forEach((item: any) => {
|
|
|
+ amountObj[`coin_${item.coin_type}`] = formatAmount(
|
|
|
+ new BigNumber(amountObj[`coin_${item.coin_type}`] || 0)
|
|
|
+ .plus(item.amount)
|
|
|
+ .toString()
|
|
|
+ );
|
|
|
+ });
|
|
|
+ }
|
|
|
+ setAmount(amountObj);
|
|
|
+ setVisible(true);
|
|
|
+ getData();
|
|
|
+ } else {
|
|
|
+ throw new Error(t(`code.400`));
|
|
|
+ }
|
|
|
+ } catch (error: any) {
|
|
|
+ if (error) {
|
|
|
+ Toast.show({
|
|
|
+ content: error.message || error.toString(),
|
|
|
+ maskClickable: false,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
return (
|
|
|
<div className={clsx(styles.continuePage)}>
|
|
|
<div className={styles.container}>
|
|
@@ -184,80 +295,106 @@ const Page = () => {
|
|
|
</div>
|
|
|
<div className={styles.content}>
|
|
|
<div className={styles.tip}>
|
|
|
- <div className={styles.text}>Check-in 5 dias consecutivos</div>
|
|
|
+ <div className={styles.text}>Check-in {waitDay} dias consecutivos</div>
|
|
|
</div>
|
|
|
|
|
|
<div className={styles.inner}>
|
|
|
<div className={styles.innerContainer}>
|
|
|
- <div className={styles.box}>
|
|
|
- {!!stage.length &&
|
|
|
- stage.map((item) => {
|
|
|
- return (
|
|
|
- <div
|
|
|
- key={item.id}
|
|
|
- className={styles.boxItem}
|
|
|
- style={{
|
|
|
- backgroundImage: `url('/continuous/v${item.id}.png')`,
|
|
|
- }}
|
|
|
- >
|
|
|
- <div className={styles.boxItemTop}>
|
|
|
- <div className={styles.boxItemTopText}>
|
|
|
- {item.text}
|
|
|
- </div>
|
|
|
- <div className={styles.boxItemTopText}>
|
|
|
- {item.text2}
|
|
|
+ {!!stage.length && (
|
|
|
+ <div className={styles.stageBox}>
|
|
|
+ <div className={styles.stageBoxContainer}>
|
|
|
+ <div className="mb-[.1rem] text-center text-[.16rem] font-bold">
|
|
|
+ Alcançado nesta data
|
|
|
+ </div>
|
|
|
+ <div className={styles.box}>
|
|
|
+ {stage.map((item) => {
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ key={item.id}
|
|
|
+ className={styles.boxItem}
|
|
|
+ style={{
|
|
|
+ backgroundImage: `url('/continuous/v${item.id}.png')`,
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <div className={styles.boxItemTop}>
|
|
|
+ <div className={styles.boxItemTopText}>
|
|
|
+ {item.text}
|
|
|
+ </div>
|
|
|
+ <div className={styles.boxItemTopText}>
|
|
|
+ {item.text2}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className={styles.boxItemBottom}>
|
|
|
+ <div>{item.footer}</div>
|
|
|
+ <div>{item.footer2}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div className={styles.boxItemBottom}>
|
|
|
- <div>{item.footer}</div>
|
|
|
- <div>{item.footer2}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- );
|
|
|
- })}
|
|
|
- </div>
|
|
|
- <div className={styles.daybox}>
|
|
|
- <div className={styles.dayContainer} ref={dayContainer}>
|
|
|
- {!!list?.length &&
|
|
|
- list.map((item) => {
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ {!!list?.length && (
|
|
|
+ <div className={styles.daybox}>
|
|
|
+ <div className={styles.dayContainer} ref={dayContainer}>
|
|
|
+ {list.map((item: any) => {
|
|
|
return (
|
|
|
<div
|
|
|
key={item.dayId}
|
|
|
- className={clsx(styles.dayItem, styles.active)}
|
|
|
+ className={clsx(styles.dayItem, {
|
|
|
+ [styles.active]: item.data.is_sign,
|
|
|
+ })}
|
|
|
>
|
|
|
<div className={styles.dayItemText}>
|
|
|
{item.dayId} dia
|
|
|
</div>
|
|
|
<div className={styles.dayitemTextActive}>
|
|
|
- <img src="/continuous/s1.png" alt="" />
|
|
|
+ <img
|
|
|
+ src={`/continuous/s${item.data.id}.png`}
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
<div className="flex flex-row items-end text-[#dbc6ff]">
|
|
|
<span className="relative top-[1px] mt-[2px] text-[.13rem]">
|
|
|
- {/* {item} */}
|
|
|
+ {item.dayId}
|
|
|
</span>
|
|
|
<span>dia</span>
|
|
|
</div>
|
|
|
<div>recarga</div>
|
|
|
- <div className="text-[#ffb400]">10000</div>
|
|
|
+ <div className="mt-[.03rem] w-[100%] overflow-hidden text-ellipsis text-[#ffb400]">
|
|
|
+ {item?.data?.pay_num}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
})}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div className={styles.premio}>
|
|
|
- <div className={styles.premioTitle}>
|
|
|
- <span className={styles.premioTitleText}>
|
|
|
- Prévia do Grande Prêmio
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div className={styles.premioContainer}>
|
|
|
- <div className={styles.premioContent}>
|
|
|
- <DayItem num={5}></DayItem>
|
|
|
- <DayItem num={15}></DayItem>
|
|
|
- <DayItem num={25}></DayItem>
|
|
|
+ )}
|
|
|
+ {!!waitList.length && (
|
|
|
+ <div className={styles.premio}>
|
|
|
+ <div className={styles.premioTitle}>
|
|
|
+ <span className={styles.premioTitleText}>
|
|
|
+ Prévia do Grande Prêmio
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div className={styles.premioContainer}>
|
|
|
+ <div className={styles.premioContent}>
|
|
|
+ {waitList.map((item, idx: number) => {
|
|
|
+ return (
|
|
|
+ <DayItem
|
|
|
+ key={item.days}
|
|
|
+ data={item}
|
|
|
+ idx={idx}
|
|
|
+ onClaim={doClaim}
|
|
|
+ ></DayItem>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ )}
|
|
|
+
|
|
|
<div className={styles.introbox}>
|
|
|
<div className={styles.introContainer}>
|
|
|
<div className={styles.introTitle}>
|
|
@@ -330,6 +467,12 @@ const Page = () => {
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <GlobalNotify
|
|
|
+ amount={amount}
|
|
|
+ visible={visible}
|
|
|
+ onChange={() => setVisible(false)}
|
|
|
+ deraction={5000}
|
|
|
+ ></GlobalNotify>
|
|
|
</div>
|
|
|
);
|
|
|
};
|