|
|
@@ -1,8 +1,142 @@
|
|
|
+import { CashbackTypes } from "@/api/cashback";
|
|
|
+import { UserVipInfo } from "@/api/user";
|
|
|
+import Box from "@/components/Box";
|
|
|
+import { vipImages } from "@/utils/constant";
|
|
|
+import { flatPoint, percentage } from "@/utils/methods";
|
|
|
+import { server } from "@/utils/server";
|
|
|
import { getTranslations } from "next-intl/server";
|
|
|
+import Image from "next/image";
|
|
|
+import CashbackTable from "./CashbackTable";
|
|
|
+import Progress from "./components/Progress";
|
|
|
+import Week from "./Week";
|
|
|
|
|
|
-const page = async () => {
|
|
|
- const t = await getTranslations("cashback");
|
|
|
- return <></>;
|
|
|
+const getVipInfoApi = async () => {
|
|
|
+ return server
|
|
|
+ .request<UserVipInfo>({
|
|
|
+ url: "/v1/api/user/user_vip_info",
|
|
|
+ method: "post",
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code === 200) return res.data;
|
|
|
+ return {
|
|
|
+ vip_exp: 0,
|
|
|
+ vip_level: 0,
|
|
|
+ vip_next_level: 0,
|
|
|
+ vip_score_exp: 0,
|
|
|
+ };
|
|
|
+ });
|
|
|
};
|
|
|
|
|
|
-export default page;
|
|
|
+const getCashBackApi = async () => {
|
|
|
+ return server
|
|
|
+ .request<CashbackTypes>({
|
|
|
+ url: "/v1/api/front/activity_cash",
|
|
|
+ method: "post",
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ return res.data;
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ return {
|
|
|
+ rules: [],
|
|
|
+ last_period: { end_time: 0, start_time: 0 },
|
|
|
+ next_period: {
|
|
|
+ end_time: 0,
|
|
|
+ start_time: 0,
|
|
|
+ },
|
|
|
+ amount: 0,
|
|
|
+ bet: 0,
|
|
|
+ status: "expired",
|
|
|
+ max_amount: 0,
|
|
|
+ };
|
|
|
+ });
|
|
|
+};
|
|
|
+const CashbackInfo = async () => {
|
|
|
+ const vipInfo = await getVipInfoApi();
|
|
|
+ const cashbackInfo = await getCashBackApi();
|
|
|
+ const currentGrade = cashbackInfo.rules?.find(
|
|
|
+ (item) => item.level === (vipInfo.vip_level || 1)
|
|
|
+ );
|
|
|
+ const maxGrade = cashbackInfo.rules?.at(-1);
|
|
|
+
|
|
|
+ const t = await getTranslations();
|
|
|
+ const vipIconElement = vipImages.map((item, index) => {
|
|
|
+ if (item.leve === vipInfo.vip_level) {
|
|
|
+ return (
|
|
|
+ <div key={index} className={"relative mr-[10px]"}>
|
|
|
+ <Image src={item.src} alt={"vip"} height={100} width={100} />
|
|
|
+ <span
|
|
|
+ className={"absolute bottom-[25%] w-[100%] text-center text-[0.16rem]"}
|
|
|
+ style={{ color: item.color }}
|
|
|
+ >
|
|
|
+ {item.leve}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <Box
|
|
|
+ className={
|
|
|
+ "w-full rounded-[20px_20px_0_0] bg-gradient-to-b from-[#ffaa30]" +
|
|
|
+ " mx-[0.1rem] to-[#ffe6be]"
|
|
|
+ }
|
|
|
+ >
|
|
|
+ <div className={"flex"}>
|
|
|
+ {vipIconElement}
|
|
|
+ <div className={"flex-1"}>
|
|
|
+ <div className={"flex items-baseline"}>
|
|
|
+ <span className={"mr-[0.06rem] text-[0.25rem] font-bold"}>
|
|
|
+ {currentGrade?.cashback}%
|
|
|
+ </span>
|
|
|
+ <span className={"mr-[0.06rem] text-[0.25rem] font-bold"}>
|
|
|
+ {t("cashback.cashbackTitle")}
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ className={
|
|
|
+ "w-[100%] text-right align-text-bottom text-[0.1rem] text-[#383838]"
|
|
|
+ }
|
|
|
+ >
|
|
|
+ Max {maxGrade?.cashback}%
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div className={"mt-[0.1rem]"}>
|
|
|
+ <Progress num={percentage(vipInfo?.vip_exp, vipInfo.vip_score_exp)} />
|
|
|
+ <div className={"font-lightl mt-[0.04rem] text-right text-[0.1rem]"}>
|
|
|
+ {t("ProfilePage.expTips", {
|
|
|
+ exp: flatPoint(vipInfo.vip_score_exp - vipInfo.vip_exp),
|
|
|
+ })}
|
|
|
+ VIP{vipInfo.vip_next_level}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Box>
|
|
|
+
|
|
|
+ <Week cashbackInfo={cashbackInfo} />
|
|
|
+
|
|
|
+ <CashbackTable cashbackInfo={cashbackInfo} />
|
|
|
+
|
|
|
+ <div className={"mt-[0.0694rem]"}>
|
|
|
+ <h1 className={"font-bold text-primary-color"}>{t("cashback.rules")}</h1>
|
|
|
+ <ul
|
|
|
+ className={
|
|
|
+ "list-decimal pl-[0.1389rem] text-[0.14rem] leading-[0.18rem]" +
|
|
|
+ " text-[#fff]"
|
|
|
+ }
|
|
|
+ >
|
|
|
+ <li>{t("cashback.rulesFirst")} </li>
|
|
|
+ <li>{t("cashback.rulesSecond")}</li>
|
|
|
+ <li>{t("cashback.rulesThird")}</li>
|
|
|
+ <li>{t("cashback.rulesFourth")}</li>
|
|
|
+ <li>{t("cashback.rulesFifth")}</li>
|
|
|
+ <li>{t("cashback.rulesSixth", { max: cashbackInfo.max_amount ?? 0 })}</li>
|
|
|
+ <li>{t("cashback.rulesSeventh")}</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+export default CashbackInfo;
|
ansoni