|
@@ -1,14 +1,46 @@
|
|
|
"use client";
|
|
|
+import { AgentPayInfo, claimAgentPayReward, getAgentPayInfo } from "@/api/activity";
|
|
|
import AdSwiperBox from "@/components/AdSwiperBox";
|
|
|
import CustomButton from "@/components/CustomButton";
|
|
|
import InviteBox from "@/components/InviteBox";
|
|
|
import ShareText from "@/components/ShareText";
|
|
|
import { useRouter } from "@/i18n/routing";
|
|
|
+import { formatAmount } from "@/utils";
|
|
|
+import { Toast } from "antd-mobile";
|
|
|
import clsx from "clsx";
|
|
|
+import { useTranslations } from "next-intl";
|
|
|
+import React from "react";
|
|
|
import styles from "./page.module.scss";
|
|
|
|
|
|
const Page = () => {
|
|
|
const router = useRouter();
|
|
|
+ const [data, setData] = React.useState<AgentPayInfo>();
|
|
|
+ const t = useTranslations();
|
|
|
+
|
|
|
+ React.useEffect(() => {
|
|
|
+ getInfo();
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ const getInfo = async () => {
|
|
|
+ const res = await getAgentPayInfo();
|
|
|
+ if (res.code === 200) {
|
|
|
+ setData(res.data);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const doClaim = async () => {
|
|
|
+ Toast.show({ icon: "loading" });
|
|
|
+ try {
|
|
|
+ const res = await claimAgentPayReward();
|
|
|
+ if (res.code === 200) {
|
|
|
+ Toast.show({ content: t("code.200") });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ throw new Error(res.code.toString());
|
|
|
+ } catch (err: any) {
|
|
|
+ Toast.show({ icon: "fail", content: t(`code.${err.message || 400}`) });
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
return (
|
|
|
<div className="p-[.1rem]">
|
|
@@ -19,14 +51,16 @@ const Page = () => {
|
|
|
<div className="text-[14px] font-normal">Convidados</div>
|
|
|
<div className="mt-[.06rem] flex items-center">
|
|
|
<i className="iconfont icon-fangke2 mr-[.1rem] text-[22px] text-[var(--textColor4)]"></i>
|
|
|
- <span className="text-[18px] font-black">0</span>
|
|
|
+ <span className="text-[18px] font-black">
|
|
|
+ {data?.total_user_num || 0}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="flex flex-1 flex-col items-center py-[.04rem]">
|
|
|
<div className="text-[14px] font-normal">Total promocional</div>
|
|
|
<div className="mt-[.06rem] flex items-center">
|
|
|
<span className="text-[18px] font-black text-[var(--textColor4)]">
|
|
|
- R$ 0.00
|
|
|
+ R$ {formatAmount(data?.total_pay_amount || 0)}
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -35,23 +69,30 @@ const Page = () => {
|
|
|
<div>Usuários que recarregaram</div>
|
|
|
<div className="mt-[.06rem] flex items-center">
|
|
|
<i className="iconfont icon-fangke2 mr-[.1rem] text-[22px] text-[var(--textColor4)]"></i>
|
|
|
- <span className="text-[18px] font-black">0</span>
|
|
|
+ <span className="text-[18px] font-black">{data?.direct_user_num || 0}</span>
|
|
|
</div>
|
|
|
<div className="mt-[.25rem]">Pode ser resgatado</div>
|
|
|
<span className="mt-[.15rem] text-[24px] font-black text-[var(--textColor4)]">
|
|
|
- R$ 0.00
|
|
|
+ R$ {formatAmount(data?.reward_amount || 0)}
|
|
|
</span>
|
|
|
- <CustomButton className="mt-[.1rem] !w-[1.5rem] !py-[.08rem]">
|
|
|
+ <CustomButton
|
|
|
+ className="mt-[.1rem] !w-[1.5rem] !py-[.08rem]"
|
|
|
+ disabled={!data?.reward_amount || data?.reward_amount <= 0}
|
|
|
+ onClick={doClaim}
|
|
|
+ >
|
|
|
Receba
|
|
|
</CustomButton>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="mt-[.1rem] flex items-center justify-between">
|
|
|
- <CustomButton className={styles.agentBtn}>
|
|
|
+ <CustomButton className={styles.agentBtn} onClick={() => router.push("/fission")}>
|
|
|
<i className="iconfont icon-hongbao mr-[.1rem] text-[var(--primary-button)]"></i>
|
|
|
<span>Agente</span>
|
|
|
</CustomButton>
|
|
|
- <CustomButton className={styles.agentBtn}>
|
|
|
+ <CustomButton
|
|
|
+ className={styles.agentBtn}
|
|
|
+ onClick={() => router.push("/raffleWheel")}
|
|
|
+ >
|
|
|
<i className="iconfont icon-spin mr-[.1rem] text-[var(--primary-button)]"></i>
|
|
|
<span>Ganhe R$100</span>
|
|
|
</CustomButton>
|
|
@@ -75,13 +116,18 @@ const Page = () => {
|
|
|
<div className="mt-[15px] flex flex-col gap-[10px] break-all rounded-[var(--borderRadius)] bg-[#fff] p-[15px] py-[20px] text-[12px]">
|
|
|
<span>
|
|
|
Quando o amino que você convidou fizer uma recarga, você receberá{" "}
|
|
|
- <span className="text-[var(--textColor4)]">10%</span> do valor recarregado
|
|
|
- porele
|
|
|
+ <span className="text-[var(--textColor4)]">
|
|
|
+ {(data?.direct_commission_rate || 0) * 100}%
|
|
|
+ </span>{" "}
|
|
|
+ do valor recarregado porele
|
|
|
</span>
|
|
|
<span>
|
|
|
Quando o amigo que o seu amigo convidou fizer uma recarga, você receberá{" "}
|
|
|
- <span className="text-[var(--textColor4)]">1%</span> do valor recarregado por
|
|
|
- ele.
|
|
|
+ <span className="text-[var(--textColor4)]">
|
|
|
+ {" "}
|
|
|
+ {(data?.secondary_commission_rate || 0) * 100}%
|
|
|
+ </span>{" "}
|
|
|
+ do valor recarregado por ele.
|
|
|
</span>
|
|
|
<span>
|
|
|
Você receberá uma comissão sobre cada recarga, então quanto mais recargas forem
|
|
@@ -98,13 +144,32 @@ const Page = () => {
|
|
|
<div className="flex-1 py-[.08rem] text-center">Valor</div>
|
|
|
<div className="flex-1 py-[.08rem] text-center">Recompensa</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div className="flex items-center justify-center py-[1.5rem] text-[12px]">
|
|
|
- Sem dados disponíveis
|
|
|
- </div>
|
|
|
+ {!!data?.commissions?.length &&
|
|
|
+ data.commissions.map((item) => {
|
|
|
+ return (
|
|
|
+ <div key={item.user_id} className="flex items-center justify-between">
|
|
|
+ <div className="flex-1 py-[.08rem] text-center">{item.user_id}</div>
|
|
|
+ <div className="flex-1 py-[.08rem] text-center">
|
|
|
+ {item.pay_amount}
|
|
|
+ </div>
|
|
|
+ <div className="flex-1 py-[.08rem] text-center">
|
|
|
+ {item.commission_amount}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ {!data?.commissions?.length && (
|
|
|
+ <div className="flex items-center justify-center py-[1.5rem] text-[12px]">
|
|
|
+ Sem dados disponíveis
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
</div>
|
|
|
- <ShareText></ShareText>
|
|
|
- <AdSwiperBox className="mt-[.1rem]"></AdSwiperBox>
|
|
|
+ <ShareText text={data?.agent_text}></ShareText>
|
|
|
+ <AdSwiperBox
|
|
|
+ className="mt-[.1rem]"
|
|
|
+ text={data?.agent_text}
|
|
|
+ images={data?.agent_images}
|
|
|
+ ></AdSwiperBox>
|
|
|
</div>
|
|
|
);
|
|
|
};
|