|
@@ -1,7 +1,18 @@
|
|
|
"use client";
|
|
|
import GlobalNotify from "@/components/ModalPopup/GlobalNotifyModal";
|
|
|
|
|
|
+import {
|
|
|
+ doClaimShopApi,
|
|
|
+ getShopInfoApi,
|
|
|
+ ShopActivityRewardItem,
|
|
|
+ ShopInfo,
|
|
|
+ ShopProductItem,
|
|
|
+} from "@/api/depositsApi";
|
|
|
+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 "swiper/css/pagination";
|
|
|
import { Pagination } from "swiper/modules";
|
|
@@ -9,10 +20,40 @@ import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
|
|
|
import styles from "./page.module.scss";
|
|
|
|
|
|
const CardPage = () => {
|
|
|
+ const searchParams = useSearchParams();
|
|
|
const swiperRef = React.useRef<SwiperClass | null>(null);
|
|
|
const [act, setAct] = React.useState(0);
|
|
|
const [amount, setAmount] = React.useState<any>({});
|
|
|
const [visible, setVisible] = React.useState<boolean>(false);
|
|
|
+ const [shopInfo, setShopInfo] = React.useState<ShopInfo>({} as ShopInfo);
|
|
|
+ const [loading, setLoading] = React.useState(false);
|
|
|
+ const shop_id = React.useMemo(() => {
|
|
|
+ return Number(searchParams.get("shop_id"));
|
|
|
+ }, []);
|
|
|
+ const t = useTranslations();
|
|
|
+
|
|
|
+ React.useEffect(() => {
|
|
|
+ getInfo();
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ const getInfo = async () => {
|
|
|
+ if (!shop_id) {
|
|
|
+ setShopInfo({} as ShopInfo);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ setLoading(true);
|
|
|
+ const res = await getShopInfoApi({ shop_id });
|
|
|
+ if (res?.code === 200 && res?.data) {
|
|
|
+ res.data.products.sort((a: any, b: any) => {
|
|
|
+ return a.pay - b.pay;
|
|
|
+ }); //TODO: sort sho
|
|
|
+ setShopInfo(res.data);
|
|
|
+ }
|
|
|
+ } finally {
|
|
|
+ setLoading(false);
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
const doChange = (type: 1 | -1) => {
|
|
|
if (swiperRef.current) {
|
|
@@ -25,6 +66,66 @@ const CardPage = () => {
|
|
|
return [1, 2, 3, 4, 5];
|
|
|
}, []);
|
|
|
|
|
|
+ const getActiveInfo = (itemData: ShopProductItem) => {
|
|
|
+ const amountInfo = itemData.activity_reward.find((item: ShopActivityRewardItem) => {
|
|
|
+ return item.item_id === 1;
|
|
|
+ });
|
|
|
+ const boundsInfo = itemData.activity_reward.find((item: ShopActivityRewardItem) => {
|
|
|
+ return item.item_id === 2;
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ amount: amountInfo?.amount || 0,
|
|
|
+ amountRollover: amountInfo?.rollover || 0,
|
|
|
+ bouns: boundsInfo?.amount || 0,
|
|
|
+ bounsRollover: boundsInfo?.rollover || 0,
|
|
|
+ };
|
|
|
+ };
|
|
|
+
|
|
|
+ const doClaim = async (itemData: ShopProductItem) => {
|
|
|
+ if (!itemData.id) {
|
|
|
+ Toast.show({ content: "Missing product ID" });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (itemData.is_suss !== 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ const res = await doClaimShopApi({
|
|
|
+ id: itemData.id,
|
|
|
+ });
|
|
|
+
|
|
|
+ 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);
|
|
|
+ getInfo();
|
|
|
+ } else {
|
|
|
+ throw new Error(t(`code.400`));
|
|
|
+ }
|
|
|
+ } catch (error: any) {
|
|
|
+ if (error) {
|
|
|
+ Toast.show({
|
|
|
+ content: error.message || error.toString(),
|
|
|
+ maskClickable: false,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
return (
|
|
|
<div className={styles.CardPage}>
|
|
|
<div className={styles.top}>
|
|
@@ -45,147 +146,160 @@ const CardPage = () => {
|
|
|
clickable: true,
|
|
|
}}
|
|
|
>
|
|
|
- {data.map((key) => {
|
|
|
- return (
|
|
|
- <SwiperSlide
|
|
|
- key={key}
|
|
|
- className={clsx(styles.swiperSlide, {
|
|
|
- [styles.swiperSlideBlue]: key === 1,
|
|
|
- [styles.swiperSlideGold]: key === 2,
|
|
|
- })}
|
|
|
- >
|
|
|
- <div className={styles.swiperItem}>
|
|
|
- <div
|
|
|
- className={clsx(
|
|
|
- "flex flex-row items-center justify-between",
|
|
|
- styles.swiperItemTop
|
|
|
- )}
|
|
|
- >
|
|
|
- <div className={clsx(styles.leftContent, "pl-[.1rem]")}>
|
|
|
- CARTãO DE MêS{key}
|
|
|
- </div>
|
|
|
+ {!!shopInfo?.products?.length &&
|
|
|
+ shopInfo?.products.map((item) => {
|
|
|
+ const itemInfo = getActiveInfo(item);
|
|
|
+ return (
|
|
|
+ <SwiperSlide
|
|
|
+ key={item.id}
|
|
|
+ className={clsx(styles.swiperSlide, {
|
|
|
+ [styles.swiperSlideBlue]: item.id === 1,
|
|
|
+ [styles.swiperSlideGold]: item.id === 2,
|
|
|
+ })}
|
|
|
+ >
|
|
|
+ <div className={styles.swiperItem}>
|
|
|
<div
|
|
|
className={clsx(
|
|
|
- styles.rightContent,
|
|
|
- "pr-[.12rem] pt-[.02rem] text-[.1rem]"
|
|
|
+ "flex flex-row items-center justify-between",
|
|
|
+ styles.swiperItemTop
|
|
|
)}
|
|
|
>
|
|
|
- Já foi comprado
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div className={styles.cardContainerOut}>
|
|
|
- <div className={styles.cardContent}>
|
|
|
- <div className={styles.cardLeft}>
|
|
|
- <div className={clsx("text-[.12rem] font-bold")}>
|
|
|
- PARA RECARREGAR
|
|
|
- </div>
|
|
|
- <div
|
|
|
- className={clsx(
|
|
|
- "my-[.04rem] text-[.36rem] font-bold",
|
|
|
- styles.money
|
|
|
- )}
|
|
|
- >
|
|
|
- 500R
|
|
|
- </div>
|
|
|
- <div className="pb-[.2rem] text-[.15rem] font-bold">
|
|
|
- EXTRA 271%
|
|
|
- </div>
|
|
|
+ <div className={clsx(styles.leftContent, "pl-[.1rem]")}>
|
|
|
+ {shop_id === 4 && "CARTãO DE MêS"}
|
|
|
+ {shop_id === 3 && "Cartão Semanal"}
|
|
|
</div>
|
|
|
- <div className={styles.cardRight}>
|
|
|
- <div
|
|
|
- className={clsx(
|
|
|
- "text-[.12rem] font-bold",
|
|
|
- styles.text
|
|
|
- )}
|
|
|
- >
|
|
|
- RECEBA POR DIA
|
|
|
- </div>
|
|
|
- <div className="text-[.12rem] font-bold">
|
|
|
- NUMERÁRIO 10R
|
|
|
- </div>
|
|
|
- <div className="text-[.12rem] font-bold">
|
|
|
- BÔNUS 38R
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div className={styles.rili}>
|
|
|
- <div className={styles.riliContent}>
|
|
|
- <div className="text-[.14rem] font-bold text-[#ac4b31]">
|
|
|
- 30
|
|
|
- </div>
|
|
|
- <div className="text-[.12rem] text-[#ac4b31]">
|
|
|
- dias
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div className={styles.lingqu}>
|
|
|
<div
|
|
|
className={clsx(
|
|
|
- styles.lingquTop,
|
|
|
- "text-[.15rem] font-bold text-[#e4292d]"
|
|
|
+ styles.rightContent,
|
|
|
+ "pr-[.12rem] pt-[.02rem] text-[.1rem]"
|
|
|
)}
|
|
|
>
|
|
|
- Receba por dia
|
|
|
+ {item.is_suss > -1 && "Já foi comprado"}
|
|
|
</div>
|
|
|
- <div className={clsx(styles.lingquContent)}>
|
|
|
- <div className={clsx(styles.lingquInfo)}>
|
|
|
- {key == 2 && (
|
|
|
- <>
|
|
|
- <div className="text-center text-[.16rem] font-bold text-[#fffc03]">
|
|
|
- Você ainda não comprou
|
|
|
- </div>
|
|
|
- <div className={styles.btn2}>
|
|
|
- comprar
|
|
|
- </div>
|
|
|
- </>
|
|
|
- )}
|
|
|
- {key !== 2 && (
|
|
|
- <>
|
|
|
- <div
|
|
|
- className={clsx(
|
|
|
- "text-[.18rem] font-bold",
|
|
|
- styles.receiveText
|
|
|
- )}
|
|
|
- >
|
|
|
- NUMERÁRIO 10R
|
|
|
- </div>
|
|
|
- <div
|
|
|
- className={clsx(
|
|
|
- "text-[.18rem]",
|
|
|
- styles.receiveText
|
|
|
- )}
|
|
|
- >
|
|
|
- +
|
|
|
- </div>
|
|
|
- <div
|
|
|
- className={clsx(
|
|
|
- "text-[.18rem] font-bold",
|
|
|
- styles.receiveText
|
|
|
- )}
|
|
|
- >
|
|
|
- BÔNUS 38R
|
|
|
- </div>
|
|
|
- <div
|
|
|
- className={clsx(
|
|
|
- "mt-[.08rem] text-[.18rem] font-bold",
|
|
|
- styles.receiveText2
|
|
|
- )}
|
|
|
- >
|
|
|
- XX DIAS RESTANTES
|
|
|
- </div>
|
|
|
- <div className={styles.btn}>
|
|
|
- Resgatar
|
|
|
- </div>
|
|
|
- </>
|
|
|
- )}
|
|
|
+ </div>
|
|
|
+ <div className={styles.cardContainerOut}>
|
|
|
+ <div className={styles.cardContent}>
|
|
|
+ <div className={styles.cardLeft}>
|
|
|
+ <div
|
|
|
+ className={clsx("text-[.12rem] font-bold")}
|
|
|
+ >
|
|
|
+ PARA RECARREGAR
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ className={clsx(
|
|
|
+ "my-[.04rem] text-[.36rem] font-bold",
|
|
|
+ styles.money
|
|
|
+ )}
|
|
|
+ >
|
|
|
+ {item.par_value}R
|
|
|
+ </div>
|
|
|
+ <div className="pb-[.2rem] text-[.15rem] font-bold">
|
|
|
+ EXTRA {item.desc}%
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className={styles.cardRight}>
|
|
|
+ <div
|
|
|
+ className={clsx(
|
|
|
+ "text-[.12rem] font-bold",
|
|
|
+ styles.text
|
|
|
+ )}
|
|
|
+ >
|
|
|
+ RECEBA POR DIA
|
|
|
+ </div>
|
|
|
+ <div className="text-[.12rem] font-bold">
|
|
|
+ NUMERÁRIO {itemInfo.amount}R
|
|
|
+ </div>
|
|
|
+ <div className="text-[.12rem] font-bold">
|
|
|
+ BÔNUS {itemInfo.bouns}R
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className={styles.rili}>
|
|
|
+ <div className={styles.riliContent}>
|
|
|
+ <div className="text-[.14rem] font-bold text-[#ac4b31]">
|
|
|
+ {shop_id === 4 ? "30" : ""}
|
|
|
+ {shop_id === 3 ? "7" : ""}
|
|
|
+ </div>
|
|
|
+ <div className="text-[.12rem] text-[#ac4b31]">
|
|
|
+ dias
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ {item.is_suss > -1 && (
|
|
|
+ <div className={styles.lingqu}>
|
|
|
+ <div
|
|
|
+ className={clsx(
|
|
|
+ styles.lingquTop,
|
|
|
+ "text-[.15rem] font-bold text-[#e4292d]"
|
|
|
+ )}
|
|
|
+ >
|
|
|
+ Receba por dia
|
|
|
+ </div>
|
|
|
+ <div className={clsx(styles.lingquContent)}>
|
|
|
+ <div className={clsx(styles.lingquInfo)}>
|
|
|
+ {item.id == 2 && (
|
|
|
+ <>
|
|
|
+ <div className="text-center text-[.16rem] font-bold text-[#fffc03]">
|
|
|
+ Você ainda não comprou
|
|
|
+ </div>
|
|
|
+ <div className={styles.btn2}>
|
|
|
+ comprar
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ {item.id !== 2 && (
|
|
|
+ <>
|
|
|
+ <div
|
|
|
+ className={clsx(
|
|
|
+ "text-[.18rem] font-bold",
|
|
|
+ styles.receiveText
|
|
|
+ )}
|
|
|
+ >
|
|
|
+ NUMERÁRIO{itemInfo.amount}R
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ className={clsx(
|
|
|
+ "text-[.18rem]",
|
|
|
+ styles.receiveText
|
|
|
+ )}
|
|
|
+ >
|
|
|
+ +
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ className={clsx(
|
|
|
+ "text-[.18rem] font-bold",
|
|
|
+ styles.receiveText
|
|
|
+ )}
|
|
|
+ >
|
|
|
+ BÔNUS {itemInfo.bouns}R
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ className={clsx(
|
|
|
+ "mt-[.08rem] text-[.18rem] font-bold",
|
|
|
+ styles.receiveText2
|
|
|
+ )}
|
|
|
+ >
|
|
|
+ {item.days} DIAS RESTANTES
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ className={styles.btn}
|
|
|
+ onClick={() =>
|
|
|
+ doClaim(item)
|
|
|
+ }
|
|
|
+ >
|
|
|
+ Resgatar
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </SwiperSlide>
|
|
|
- );
|
|
|
- })}
|
|
|
+ </SwiperSlide>
|
|
|
+ );
|
|
|
+ })}
|
|
|
</Swiper>
|
|
|
<div className={styles.pagation}>
|
|
|
<div
|
|
@@ -215,20 +329,18 @@ const CardPage = () => {
|
|
|
<div>Taxa de retirada de dinheiro</div>
|
|
|
<div>Bônus retirada nultiplicação</div>
|
|
|
</div>
|
|
|
- <div className={styles.configItem}>
|
|
|
- <div>1</div>
|
|
|
- <div>2</div>
|
|
|
- <div>3</div>
|
|
|
- <div>4</div>
|
|
|
- <div>5</div>
|
|
|
- </div>
|
|
|
- <div className={styles.configItem}>
|
|
|
- <div>1</div>
|
|
|
- <div>2</div>
|
|
|
- <div>3</div>
|
|
|
- <div>4</div>
|
|
|
- <div>5</div>
|
|
|
- </div>
|
|
|
+ {shopInfo?.products?.map((item) => {
|
|
|
+ const itemInfo = getActiveInfo(item);
|
|
|
+ return (
|
|
|
+ <div key={item.id} className={styles.configItem}>
|
|
|
+ <div>{item.par_value}</div>
|
|
|
+ <div>{itemInfo.amount}</div>
|
|
|
+ <div>{itemInfo.bouns}</div>
|
|
|
+ <div>{itemInfo.amountRollover}</div>
|
|
|
+ <div>{itemInfo.bounsRollover}</div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
</div>
|
|
|
<div className={styles.introbox}>
|
|
|
<div className={styles.introContainer}>
|