|
@@ -2,7 +2,9 @@
|
|
|
import { getVipReliefInfo, RelieInfo } from "@/api/activity";
|
|
|
import CustomButton from "@/components/CustomButton";
|
|
|
import feedback from "@/feedback";
|
|
|
+import { formatAmount } from "@/utils";
|
|
|
import clsx from "clsx";
|
|
|
+import dayjs from "dayjs";
|
|
|
import React from "react";
|
|
|
import styles from "./page.module.scss";
|
|
|
|
|
@@ -20,25 +22,136 @@ const Page = () => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
- const openDialog = async () => {
|
|
|
- feedback.showModal({
|
|
|
- content: (
|
|
|
- <div className="relative">
|
|
|
- <div>23232</div>
|
|
|
- <div></div>
|
|
|
- <div></div>
|
|
|
+ const loseSplite = React.useMemo(() => {
|
|
|
+ if (!data?.rewards) return [];
|
|
|
+ const loseArr: any = {};
|
|
|
+
|
|
|
+ if (data?.rewards?.length > 0) {
|
|
|
+ loseArr[`0~${Math.abs(data?.rewards[0].loss_amount)}`] = null;
|
|
|
+ }
|
|
|
+
|
|
|
+ for (let i = 0; i < data?.rewards.length; i++) {
|
|
|
+ const cur = data?.rewards[i];
|
|
|
+ const next = data?.rewards[i + 1];
|
|
|
+ let start = Math.abs(cur.loss_amount);
|
|
|
+ let end = next?.loss_amount ? Math.abs(next?.loss_amount) : `∞`;
|
|
|
+ let key = `${start}~${end}`;
|
|
|
+ loseArr[key] = {
|
|
|
+ key,
|
|
|
+ ...cur,
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ return loseArr;
|
|
|
+ }, [data]);
|
|
|
+
|
|
|
+ const needPay = React.useMemo(() => {
|
|
|
+ if (!data?.rewards) return 0;
|
|
|
+ const loss_amount = data?.last_week?.loss_amount || 0;
|
|
|
+ console.log(loss_amount);
|
|
|
+ let loseInfo = null;
|
|
|
+ for (let key in loseSplite) {
|
|
|
+ const [start, end] = key.split("~");
|
|
|
+
|
|
|
+ if (
|
|
|
+ Math.abs(loss_amount) >= Number(start) &&
|
|
|
+ Math.abs(loss_amount) < Number(end === "∞" ? Infinity : end)
|
|
|
+ ) {
|
|
|
+ loseInfo = loseSplite[key];
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return loseInfo;
|
|
|
+ }, [data, loseSplite]);
|
|
|
+
|
|
|
+ const confirmRender = (dialog: any) => {
|
|
|
+ return (
|
|
|
+ <div className="relative">
|
|
|
+ <div className="mb-[.1rem] text-center text-[.12rem] text-[var(--textColor1)]">
|
|
|
+ <i className="iconfont icon-gantanhao text-[.14rem] text-[#ecc720]"></i> ocê
|
|
|
+ está quase lá! Recarregue{" "}
|
|
|
+ <span className="text-[#11de68]">R${data?.last_week?.double_amount}</span>
|
|
|
+ (progresso:{" "}
|
|
|
+ <span className="text-[#11de68]">
|
|
|
+ R${(needPay?.pay_amount || 0) - (data?.last_week?.double_pay_amount || 0)}
|
|
|
+ /R${needPay?.pay_amount || 0}
|
|
|
+ </span>
|
|
|
+ )para desbloquear recompensas incríveis!
|
|
|
+ </div>
|
|
|
+ <div className="relative flex justify-between rounded-[.1rem] bg-[var(--main-background)] p-[.1rem]">
|
|
|
+ <div>
|
|
|
+ <div className="font-bold">Sem upgrade e resgatar</div>
|
|
|
+ <div className="mt-[.06rem] text-[.18rem] font-black leading-[1] text-[var(--textColor4)]">
|
|
|
+ R$ {formatAmount(data?.last_week?.normal_amount || 0)}
|
|
|
+ </div>
|
|
|
+ <CustomButton
|
|
|
+ // onClick={() => doSingleClaim({ ...contentProps })}
|
|
|
+ disabled={(data?.last_week?.double_pay_amount || 0) <= 0}
|
|
|
+ className="mt-[.1rem] !min-w-[120px] !px-[12px] !py-[6px] !text-[12px]"
|
|
|
+ >
|
|
|
+ check in
|
|
|
+ </CustomButton>
|
|
|
+ </div>
|
|
|
+ <img
|
|
|
+ src="/vip/d1.webp"
|
|
|
+ className="absolute right-[.1rem] top-[50%] !h-[auto] w-[.9rem] translate-y-[-50%] transform"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
</div>
|
|
|
- ),
|
|
|
- width: "80%",
|
|
|
- useDefaultFooter: false,
|
|
|
- });
|
|
|
+ <div className="relative mt-[.1rem] flex justify-between rounded-[.1rem] bg-[var(--main-background)] p-[.1rem]">
|
|
|
+ <div>
|
|
|
+ <div className="font-bold">Deposite e ganhe upgrade</div>
|
|
|
+ <div className="mt-[.06rem] text-[.32rem] font-black leading-[1] text-[var(--textColor4)]">
|
|
|
+ {formatAmount(data?.last_week?.double_amount || 0)}
|
|
|
+ </div>
|
|
|
+ <CustomButton
|
|
|
+ // onClick={() => multClick({ ...contentProps })}
|
|
|
+ className="mt-[.1rem] !min-w-[120px] !px-[12px] !py-[6px] !text-[12px]"
|
|
|
+ >
|
|
|
+ text
|
|
|
+ {(data?.last_week?.double_pay_amount || 0) <= 0
|
|
|
+ ? "check in"
|
|
|
+ : `R$ ${formatAmount(data?.last_week?.double_pay_amount || 0)} Ativa`}
|
|
|
+ </CustomButton>
|
|
|
+ </div>
|
|
|
+ <img
|
|
|
+ src="/vip/d2.webp"
|
|
|
+ className="absolute right-[.1rem] top-[50%] !h-[auto] w-[1.2rem] translate-y-[-50%] transform"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div className="absolute right-[.05rem] top-[60%] translate-y-[-50%] transform">
|
|
|
+ <img src="/vip/d3.webp" className="w-[1.1rem]" alt="" />
|
|
|
+ <div
|
|
|
+ className="absolute right-[.15rem] top-[55%] translate-y-[-50%] text-[.12rem] text-[.3rem] font-black leading-[1] text-[#e8ed08]"
|
|
|
+ style={{
|
|
|
+ textShadow: `2px 0 #11de68,0 2px #11de68,-2px 0 #11de68,-2px -2px #11de68`,
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ x{data?.last_week?.double_num}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ const openDialog = async () => {
|
|
|
+ if (data?.last_week.normal_amount === 0) return;
|
|
|
+ if (data?.double_enable) {
|
|
|
+ feedback.showModal({
|
|
|
+ content: confirmRender,
|
|
|
+ width: "80%",
|
|
|
+ useDefaultFooter: false,
|
|
|
+ });
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
<>
|
|
|
<div className={styles.top}>
|
|
|
<span className="time-bg-color rounded-[var(--borderRadius)] bg-[#0000004d] px-[10px] text-[12px] text-[var(--textColor4)]">
|
|
|
- 2025-07-28 00:00 ~ 2025-08-04 00:00
|
|
|
+ {dayjs(data?.this_week?.start_time).format(`YYYY-MM-DD HH:mm`)} ~{" "}
|
|
|
+ {dayjs(data?.this_week?.end_time).format(`YYYY-MM-DD HH:mm`)}
|
|
|
</span>
|
|
|
<div className="flex items-center pt-[.1rem]">
|
|
|
<div className="flex-1">
|
|
@@ -47,7 +160,7 @@ const Page = () => {
|
|
|
Lucro semanal
|
|
|
</span>
|
|
|
<span className="text-[16px] font-black text-[var(--textColor1)]">
|
|
|
- R$ -0,00
|
|
|
+ R$ -{formatAmount(data?.this_week?.loss_amount || 0)}
|
|
|
</span>
|
|
|
</div>
|
|
|
<div className="flex flex-col gap-[4px]">
|
|
@@ -55,7 +168,12 @@ const Page = () => {
|
|
|
Compensação semanal
|
|
|
</span>
|
|
|
<span className="text-[16px] font-black text-[var(--textColor1)]">
|
|
|
- R$ 0,00 <span className="text-[16px] font-black">/ R$ 0,00</span>
|
|
|
+ R$ {formatAmount(data?.this_week?.normal_amount || 0)}{" "}
|
|
|
+ {data?.double_enable && (
|
|
|
+ <span className="text-[16px] font-black">
|
|
|
+ / R$ {formatAmount(data?.this_week?.double_amount || 0)}
|
|
|
+ </span>
|
|
|
+ )}
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -78,7 +196,11 @@ const Page = () => {
|
|
|
<div className="w-[80%] text-center">
|
|
|
<i className="iconfont icon-gantanhao pr-[6px] align-middle !text-[16px] text-[var(--textColor4)]"></i>
|
|
|
<span>Lucro esta semana </span>
|
|
|
- <span>-300</span>
|
|
|
+ <span>
|
|
|
+ {0 - (data?.this_week?.double_pay_amount || 0) > 0
|
|
|
+ ? 0
|
|
|
+ : formatAmount(0 - (data?.this_week?.double_pay_amount || 0))}
|
|
|
+ </span>
|
|
|
<span> por semana e desbloqueie sua recompensa!</span>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -87,13 +209,28 @@ const Page = () => {
|
|
|
<div className="flex flex-col items-center gap-[8px] rounded-[var(--borderRadius)] bg-[var(--main-background)] p-[15px] text-[12px]">
|
|
|
<div className="w-full text-center">Valor da compensação da semana passada</div>
|
|
|
<span className="time-bg-color rounded-[var(--borderRadius)] bg-[#0000004d] px-[10px] text-[12px] text-[var(--textColor4)]">
|
|
|
- 2025-08-04 00:00
|
|
|
+ {dayjs(data?.this_week?.end_time).format(`YYYY-MM-DD HH:mm`)}
|
|
|
</span>
|
|
|
<div className="flex w-full flex-row items-center justify-center gap-[8px] text-[22px] font-black text-[var(--textColor1)]">
|
|
|
- R$ 0,00 / R$ 0,00
|
|
|
+ R$ {formatAmount(data?.last_week?.normal_amount || 0)}
|
|
|
+ {data?.double_enable && (
|
|
|
+ <>/ R$ {formatAmount(data?.last_week?.double_amount || 0)}</>
|
|
|
+ )}
|
|
|
</div>
|
|
|
- <CustomButton className="mt-[8px] w-full" onClick={openDialog}>
|
|
|
- Unopened
|
|
|
+ {}
|
|
|
+ <CustomButton
|
|
|
+ className="mt-[8px] w-full"
|
|
|
+ onClick={openDialog}
|
|
|
+ disabled={
|
|
|
+ ![0, 1].includes(data?.last_week?.status || 0) ||
|
|
|
+ data?.last_week?.normal_amount === 0
|
|
|
+ }
|
|
|
+ >
|
|
|
+ {(data?.last_week?.status === 0 || data?.last_week?.normal_amount === 0) &&
|
|
|
+ "Unopened"}
|
|
|
+ {data?.last_week?.status === 1 && "Receber"}
|
|
|
+ {data?.last_week?.status === 2 && "Recebered"}
|
|
|
+ {data?.last_week?.status === 3 && "Expired"}
|
|
|
</CustomButton>
|
|
|
</div>
|
|
|
<div className="mt-[.1rem] flex flex-col gap-[8px] rounded-[var(--borderRadius)] bg-[var(--primary13)] p-[15px] text-[12px] font-normal">
|
|
@@ -101,22 +238,20 @@ const Page = () => {
|
|
|
<div className="flex-1 text-center">Lucro esta semana</div>
|
|
|
<div className="flex-1 text-center">Compensação</div>
|
|
|
</div>
|
|
|
- <div className="flex items-center py-[.08rem]">
|
|
|
- <div className="flex-1 text-center">Nivel Upgrade</div>
|
|
|
- <div className="flex-1 text-center">Taxa de Resgate</div>
|
|
|
- </div>
|
|
|
- <div className="flex items-center py-[.08rem]">
|
|
|
- <div className="flex-1 text-center">Nivel Upgrade</div>
|
|
|
- <div className="flex-1 text-center">Taxa de Resgate</div>
|
|
|
- </div>
|
|
|
- <div className="flex items-center py-[.08rem]">
|
|
|
- <div className="flex-1 text-center">Nivel Upgrade</div>
|
|
|
- <div className="flex-1 text-center">Taxa de Resgate</div>
|
|
|
- </div>
|
|
|
- <div className="flex items-center py-[.08rem]">
|
|
|
- <div className="flex-1 text-center">Nivel Upgrade</div>
|
|
|
- <div className="flex-1 text-center">Taxa de Resgate</div>
|
|
|
- </div>
|
|
|
+ {!!data?.rewards?.length &&
|
|
|
+ data.rewards.map((item, idx) => {
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ key={`${item.loss_amount}_${idx}`}
|
|
|
+ className="flex items-center py-[.08rem]"
|
|
|
+ >
|
|
|
+ <div className="flex-1 text-center">{item.loss_amount}</div>
|
|
|
+ <div className="flex-1 text-center">
|
|
|
+ {item.normal_rate}% ({item.double_rate}%)
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
</div>
|
|
|
<div
|
|
|
className={clsx(
|