feat: 首充弹窗

src/api/promo.ts

@@ -143,6 +143,8 @@ export interface FirstPay {
      */
     pay_type: string[];
     end_time: number;
+    count_down: number; // 倒计时
+    current_num: number; // 当前等级
 }
 
 export interface FirstPayCondition {

src/app/[locale]/(TabBar)/[[...share]]/@actionWidget/Service.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { ServiceTypes } from "@/api/customservice";
-import { getPaysApi, lredPacketApi, PayDataType, redPacketApi } from "@/api/promo";
+import { lredPacketApi, redPacketApi } from "@/api/promo";
 import UserRecharge, { ModalRefProps, Timeout } from "@/components/ModalPopup/RechargeModal";
 import RedPacketModal, { RedPacketModalProps } from "@/components/ModalPopup/RedPacketModal";
 import SlotsModal, { SlotModalRefProps } from "@/components/ModalPopup/SlotsModal";
@@ -11,10 +11,10 @@ import { getGiveInfoApi } from "@/api/slots";
 import SignInModal, { SignInModalProps } from "@/components/ModalPopup/SignInModal";
 import { useEventPoint } from "@/hooks/useEventPoint";
 import { Link } from "@/i18n/routing";
+import { useFirstPayStore } from "@/stores/useFirstPayStore";
 import { useGlobalNoticeStore } from "@/stores/useGlobalNoticeStore";
-import { SignType, useSignStore } from "@/stores/useSignStore";
+import { useSignStore } from "@/stores/useSignStore";
 import useWheelStore from "@/stores/useWheelStore";
-import { server } from "@/utils/client";
 import { getToken } from "@/utils/Cookies";
 import { useRequest } from "ahooks";
 import { Badge } from "antd-mobile";
@@ -108,58 +108,64 @@ const WheelSection = () => {
 const PaySection = () => {
     const token = getToken();
 
+    const { firstPay, getPayData } = useFirstPayStore((state) => {
+        return {
+            firstPay: state.first_pay,
+            getPayData: state.getPayData,
+        };
+    });
+
     const userRechargeRef = useRef<ModalRefProps>(null);
     // 首充活动
-    const getPayInfo = async (): Promise<PayDataType> => {
-        if (token) {
-            const result = await getPaysApi();
-            return result.data;
-        } else {
-            return Promise.resolve({
-                first_pay: [],
-                pay: [],
-            });
-        }
-    };
+    // const getPayInfo = async (): Promise<PayDataType> => {
+    //     if (token) {
+    //         const result = await getPaysApi();
+    //         return result.data;
+    //     } else {
+    //         return Promise.resolve({
+    //             first_pay: [],
+    //             pay: [],
+    //         });
+    //     }
+    // };
+    // const getPayInfo = async (): Promise<PayDataType> => {};
 
-    const { data: paysInfo, run: payRun } = useRequest<PayDataType, any>(getPayInfo, {
+    const { data, run: payRun } = useRequest(getPayData, {
         pollingErrorRetryCount: 1,
         pollingWhenHidden: false,
     });
     return (
         <>
-            {paysInfo &&
-                paysInfo.first_pay &&
-                paysInfo.first_pay.map((item, index) => {
-                    return (
-                        <div
-                            key={index}
-                            className={`mb-[0.2778rem] flex cursor-pointer flex-col items-center`}
-                        >
-                            <img
-                                className={"w-[0.54rem]"}
-                                src="/hby/recharge.png"
-                                onClick={() => {
-                                    userRechargeRef.current?.onOpen &&
-                                        userRechargeRef.current?.onOpen(paysInfo?.first_pay, index);
-                                }}
+            {firstPay.map((item, index) => {
+                return (
+                    <div
+                        key={index}
+                        className={`mb-[0.2778rem] flex cursor-pointer flex-col items-center`}
+                    >
+                        <img
+                            className={"w-[0.54rem]"}
+                            src="/hby/recharge.png"
+                            onClick={() => {
+                                userRechargeRef.current?.onOpen &&
+                                    userRechargeRef.current?.onOpen(firstPay, index);
+                            }}
+                        />
+                        {item.count_down > 0 ? (
+                            <Timeout
+                                className={
+                                    "relative before:left-0 before:top-0 before:content-['']" +
+                                    " -m-[0.0417rem] before:h-[100%] before:blur-[0.0486rem]" +
+                                    " before:absolute before:-z-10 before:w-[100%] before:bg-[#ed9d00]" +
+                                    " text-[0.08rem]" +
+                                    " z-1 text-[#fff]"
+                                }
+                                endTime={item.count_down}
+                                onEndHandler={payRun}
                             />
-                            {item.end_time > 0 ? (
-                                <Timeout
-                                    className={
-                                        "relative before:left-0 before:top-0 before:content-['']" +
-                                        " -m-[0.0417rem] before:h-[100%] before:blur-[0.0486rem]" +
-                                        " before:absolute before:-z-10 before:w-[100%] before:bg-[#ed9d00]" +
-                                        " text-[0.08rem]" +
-                                        " z-1 text-[#fff]"
-                                    }
-                                    endTime={item.end_time}
-                                    onEndHandler={payRun}
-                                />
-                            ) : null}
-                        </div>
-                    );
-                })}
+                        ) : null}
+                    </div>
+                );
+            })}
 
             {/*首充弹窗*/}
             <UserRecharge ref={userRechargeRef} />
@@ -277,26 +283,17 @@ const CustomerSection: FC<Omit<Props, "socials">> = (props) => {
 /**
  * 签到活动
  */
-
-const getSignDetailsApi = (data: { activity_id: number }) => {
-    return server.post<SignType>({
-        url: "/v1/api/user/activity/signInInfo",
-        data,
-    });
-};
 const SignInSection: FC = () => {
     const SignInRef = useRef<SignInModalProps>(null);
 
-    const { setSignData, signData } = useSignStore((state) => {
+    const { getSignData, signData } = useSignStore((state) => {
         return {
-            setSignData: state.setSignData,
+            getSignData: state.getSignData,
             signData: state.signData,
         };
     });
     useEffect(() => {
-        if (getToken()) {
-            // setSignData({ active_id: 3 });
-        }
+        getSignData({ active_id: 14 });
     }, []);
 
     const signInHandle = () => {

src/app/[locale]/(doings)/depositing/page.tsx

@@ -1,8 +1,24 @@
-import { TimeLeft } from "@/app/[locale]/(doings)/depositing/Client";
+"use client";
+import { FirstPay } from "@/api/promo";
 import { Link } from "@/i18n/routing";
+import { useFirstPayStore } from "@/stores/useFirstPayStore";
 import Image from "next/image";
+import { useEffect } from "react";
+import { TimeLeft } from "./Client";
 
 const Page = () => {
+    const { first_pay, getFirstPayData } = useFirstPayStore((state) => ({
+        first_pay: state.first_pay,
+        getFirstPayData: state.getFirstPayData,
+    }));
+
+    const firstTarget: Partial<FirstPay> = Array.isArray(first_pay) ? first_pay[0] : {};
+    const total = firstTarget?.condition?.length || 0;
+    useEffect(() => {
+        getFirstPayData();
+    }, []);
+
+    console.log(`🚀🚀🚀🚀🚀-> in page.tsx on 17`, first_pay);
     return (
         <div className={"p-[0.12rem]"}>
             <Image src={"/depositing/banner.png"} alt={""} width={750} height={115} />
@@ -16,49 +32,39 @@ const Page = () => {
                 experiência de jogo na plataforma.
             </p>
 
-            <div className={"relative h-[0.9rem]"}>
-                <div className={"absolute left-0 top-0 flex h-[100%] w-[100%] border p-[0.125rem]"}>
-                    <div className={"flex-1"}>
-                        <p className={"text-[0.14rem] font-black text-[#ffde00]"}>Bônus de 1º </p>
-                        <p className={"text-[0.14rem] font-black text-[#ffde00]"}>depósito 120%</p>
-                        <p>Depósito mínimo:us$10.0</p>
-                    </div>
-                    <div
-                        className={`mr-[0.1rem] mt-[0.0972rem] w-[0.4472rem] rotate-[20deg] transform text-[0.15rem] font-black text-[#000]`}
-                    >
-                        120%
+            {firstTarget?.condition?.map((pay, index) => {
+                return (
+                    <div className={"relative h-[0.9rem]"} key={index}>
+                        <div
+                            className={
+                                "absolute left-0 top-0 flex h-[100%] w-[100%] border p-[0.125rem]"
+                            }
+                        >
+                            <div className={"flex-1"}>
+                                <p className={"text-[0.14rem] font-black text-[#ffde00]"}>
+                                    Bônus de {index + 1}º{" "}
+                                </p>
+                                <p className={"text-[0.14rem] font-black text-[#ffde00]"}>
+                                    depósito {pay.reward}%
+                                </p>
+                                <p>Depósito mínimo:us${pay.amount}</p>
+                            </div>
+                            <div
+                                className={`mr-[0.1rem] mt-[0.06rem] h-[0.35rem] w-[0.44rem] rotate-[20deg] transform text-right text-[0.14rem] font-black leading-[0.35rem] text-[#000]`}
+                            >
+                                {pay.reward}%
+                            </div>
+                        </div>
+                        <Image
+                            src={`/depositing/level${(index % total) + 1}.png`}
+                            className={"mb-[0.0694rem] mt-[0.1389rem] h-[100%]"}
+                            alt={""}
+                            width={750}
+                            height={70}
+                        />
                     </div>
-                </div>
-                <Image
-                    src={"/depositing/level1.png"}
-                    className={"mb-[10px] mt-[20px] h-[100%]"}
-                    alt={""}
-                    width={750}
-                    height={70}
-                />
-            </div>
-            <Image
-                src={"/depositing/level2.png"}
-                className={"my-[10px]"}
-                alt={""}
-                width={750}
-                height={70}
-            />
-            <Image
-                src={"/depositing/level3.png"}
-                className={"my-[10px]"}
-                alt={""}
-                width={750}
-                height={70}
-            />
-            <Image
-                src={"/depositing/level4.png"}
-                className={"my-[10px]"}
-                alt={""}
-                width={750}
-                height={70}
-            />
-
+                );
+            })}
             <div className={"relative mt-[20px]"}>
                 <Image
                     src={"/depositing/level-wrap.png"}
@@ -73,7 +79,7 @@ const Page = () => {
                         " px-[10px] font-semibold"
                     }
                 >
-                    Tempos de recarga atuais: 1vez
+                    Tempos de recarga atuais: {firstTarget?.current_num ?? 1}vez
                 </div>
             </div>
 
@@ -92,7 +98,7 @@ const Page = () => {
                     }
                 >
                     <p className={"mr-[10px]"}>Contagem regressiva de expiração:</p>
-                    <TimeLeft endTime={new Date().getTime() + 86400000} />
+                    <TimeLeft endTime={firstTarget?.count_down ?? 0} />
                 </div>
             </div>
 
@@ -115,12 +121,28 @@ const Page = () => {
                 </Link>
             </div>
 
+            <p className={"font-semibold"}>Elegibilidade</p>
+            <ul className={"list-disc px-[20px] text-[14px]"}>
+                <li>
+                    Novos Usuários: o bônus está disponível exclusivamente para os novos usuários
+                    que não tenham depositado anteriormente na plataforma BCWIN777.COM.
+                </li>
+                <li>
+                    Requisitos de Verificação: os usuários devem fornecer um e-mail ou número de
+                    telefone válido para concluir o processo de registro e verificação. A
+                    BCWIN777.COM tem o direito de exigir que os usuários complementem a verificação
+                    de identidade quando necessário.
+                </li>
+            </ul>
             <p className={"font-semibold"}>Estrutura de bônus</p>
             <ul className={"list-disc px-[20px] text-[14px]"}>
-                <li>Bônus de 1º depósito: bônus de 120% de até US$ 500,00 + 100 slots grátis.</li>
-                <li>Bônus de 2º depósito: bônus de 100% até US$ 300,00 + 100 slots grátis.</li>
-                <li>Bônus de 3º depósito: bônus de 150% até US$ 500,00 + 100 slots grátis.</li>
-                <li>Bônus de 4º depósito: bônus de 100% até US$ 300,00 + 100 slots grátis.</li>
+                {firstTarget?.condition?.map((pay, index) => {
+                    return (
+                        <li key={index}>
+                            Bônus de {index + 1}º depósito: bônus de {pay.reward}%
+                        </li>
+                    );
+                })}
             </ul>
 
             <p className={"font-semibold"}>Ativação do bônus de depósito</p>

src/app/[locale]/(doings)/signIn/page.tsx

@@ -1,10 +1,19 @@
+"use client";
 /* eslint-disable @next/next/no-img-element */
 import { BoxListCom } from "@/components/ModalPopup/SignInModal";
+import { useSignStore } from "@/stores/useSignStore";
 import { useTranslations } from "next-intl";
-import { FC } from "react";
+import { FC, useEffect } from "react";
 
 const SignIn: FC = () => {
     const t = useTranslations("signInPage");
+    const { getSignData, signData } = useSignStore((state) => ({
+        signData: state.signData,
+        getSignData: state.getSignData,
+    }));
+    useEffect(() => {
+        getSignData({ active_id: 3 });
+    }, []);
     return (
         <>
             <div className="relative h-[100%] w-[100%]">

src/components/ModalPopup/RechargeModal/index.tsx

@@ -56,9 +56,21 @@ export const RechargeContent: FC<RechargeContentProps> = (props) => {
         }
         onCancel && onCancel();
     };
+    const colors: any = {
+        1: "from-[#d93b1a] to-[#ff9a1f]",
+        2: "from-[#29f19c] to-[#02a1f9]",
+        3: "from-[#12d6df] to-[#f70fff]",
+        4: "from-[#0dccff] to-[#4760ff]",
+    };
+    const text: any = {
+        1: "st",
+        2: "nd",
+        3: "rd",
+        4: "th",
+    };
     return (
         <div className={""}>
-            <div className={"relative mt-[10vh]"}>
+            <div className={"relative mt-[18%]"}>
                 {type === "popup" ? (
                     <div
                         onClick={onCancel}
@@ -68,14 +80,16 @@ export const RechargeContent: FC<RechargeContentProps> = (props) => {
                             " flex items-center justify-center"
                         }
                     >
-                        <span className={"iconfont icon-guanbi"}></span>
+                        <span className={"iconfont icon-guanbi text-[0.0972rem]"}></span>
                     </div>
                 ) : null}
 
                 <div className={"absolute -top-[0.34rem] left-0 -z-10 h-[100%] w-[100%]"}>
                     <img src={"/recharge/bg.png"} className={"h-[100%] w-[100%]"} />
                 </div>
-                <div className={"absolute left-0 top-0 -z-[9] h-[100%] w-[100%]"}>
+                <div
+                    className={"animate-slow-bounce absolute left-0 top-0 -z-[9] h-[100%] w-[100%]"}
+                >
                     <img src={"/recharge/bg1.png"} className={"h-[100%] w-[100%]"} />
                 </div>
                 <Image
@@ -83,47 +97,52 @@ export const RechargeContent: FC<RechargeContentProps> = (props) => {
                     alt={"recharge"}
                     className={"z-2 w-[100%]"}
                     width={750}
-                    height={694}
+                    height={300}
                 />
-                <div
-                    className={
-                        "absolute bottom-[0.59rem] h-[0.50rem] w-[100%] " + " flex justify-center"
-                    }
-                >
-                    <svg viewBox="0 -15 200 50" style={{ width: "100%", height: "100%" }}>
-                        <path d="M0 30 C 50 10, 150 10 200 30" fill="transparent" id="circle" />
-                        <text
-                            style={{
-                                fill: "#ff3333",
-                                fontSize: "22px",
-                                fontWeight: "bold",
-                                textShadow: "0.1em 0.1em rgba(0,0,0,0.5)",
-                            }}
-                        >
-                            <textPath
-                                xlinkHref="#circle"
-                                textAnchor="middle"
-                                startOffset="50%"
-                                dy="0"
-                            >
-                                <tspan>{t("rechargeTitle")}</tspan>
-                            </textPath>
-                        </text>
-                    </svg>
-                </div>
-                <div
-                    className={
-                        "absolute bottom-[0px] right-[50%] flex h-[0.45rem] " +
-                        " items-center" +
-                        " mb-[0.13rem] translate-x-1/2 font-bold text-[#fee5c1]"
-                    }
-                >
-                    {t("rechargeTips")}
-                </div>
             </div>
             {/*倒计时*/}
-            {recharge && recharge.end_time !== 0 ? <Timeout endTime={recharge.end_time} /> : null}
+            {recharge && recharge.count_down !== 0 ? (
+                <Timeout endTime={recharge.count_down} />
+            ) : null}
 
+            <div className={"grid grid-cols-2 justify-center gap-[0.1389rem] p-[0.1389rem]"}>
+                {recharge?.condition.map((item: any, index: number) => {
+                    // @ts-ignore
+                    return (
+                        <div key={index} className={"relative justify-self-center"}>
+                            <Image
+                                src={`/recharge/leve-wrap${index + 1}.png`}
+                                alt={""}
+                                width={200}
+                                height={200}
+                                className={"h-[1.3rem] w-[2.0486rem]"}
+                            />
+
+                            <div className={"absolute bottom-0 left-0 right-0 top-0 p-[0.1389rem]"}>
+                                <div
+                                    className={clsx(
+                                        "text-center text-[transparent] " +
+                                            " bg-gradient-to-r bg-clip-text",
+                                        colors[index + (1 % recharge?.condition?.length)]
+                                    )}
+                                >
+                                    <p className={"text-[0.1544rem]"}>Bônus de depósito</p>
+                                    <p className={"text-[0.3472rem] font-black"}>{item.reward}%</p>
+                                </div>
+                                <div
+                                    className={
+                                        "absolute bottom-[0.0347rem] left-0 right-0 h-[0.2778rem]" +
+                                        " text-center text-[0.2rem] leading-[0.2778rem]"
+                                    }
+                                >
+                                    {index + 1}
+                                    {text[index + 1]}
+                                </div>
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
             <div className={"relative flex w-[100%] justify-center"}>
                 <div
                     style={{

src/stores/useFirstPayStore.ts

@@ -0,0 +1,40 @@
+import { FirstPay, getPaysApi, Pay, PayDataType } from "@/api/promo";
+import { getToken } from "@/utils/Cookies";
+import { create } from "zustand";
+
+interface State {
+    first_pay: FirstPay[];
+    pay: Pay[];
+}
+
+interface Action {
+    getPayData: () => Promise<PayDataType | undefined>;
+    getFirstPayData: () => void;
+}
+
+const initState: State = {
+    first_pay: [],
+    pay: [],
+};
+
+export const useFirstPayStore = create<State & Action>()((set, get) => {
+    return {
+        ...initState,
+        getPayData: async () => {
+            if (getToken()) {
+                return getPaysApi().then((res) => {
+                    const first_pay = Array.isArray(res.data.first_pay) ? res.data.first_pay : [];
+                    const pay = Array.isArray(res.data.pay) ? res.data.pay : [];
+                    set((value) => ({ ...value, first_pay, pay }));
+                    return res.data;
+                });
+            }
+        },
+
+        getFirstPayData: () => {
+            if (!get().first_pay.length) {
+                get().getPayData();
+            }
+        },
+    };
+});

src/stores/useSignStore.ts

@@ -1,4 +1,5 @@
 import { server } from "@/utils/client";
+import { getToken } from "@/utils/Cookies";
 import { create } from "zustand";
 
 export interface SignType {
@@ -103,14 +104,14 @@ interface State {
 }
 
 interface Action {
-    setSignData: (data: { activity_id: number }) => void;
+    getSignData: (data: { active_id: number }) => void;
 }
 
 const initState: State = {
     signData: {},
 };
-const getSignDetailsApi = (data: { activity_id: number }) => {
-    return server.post<SignType>({
+const getSignDetailsApi = (data: { active_id: number }) => {
+    return server.post<SignType | []>({
         url: "/v1/api/user/activity/signInInfo",
         data,
     });
@@ -118,15 +119,13 @@ const getSignDetailsApi = (data: { activity_id: number }) => {
 export const useSignStore = create<State & Action>()((set, get) => {
     return {
         ...initState,
-        setSignData: (data) => {
-            if (Object.keys(get().signData).length === 0) {
+        getSignData: (data) => {
+            if (Object.keys(get().signData).length === 0 && getToken()) {
                 getSignDetailsApi(data).then((res) => {
-                    set((value) => ({ ...value, signData: res.data }));
+                    const resultData = Array.isArray(res.data) ? {} : res.data;
+                    set((value) => ({ ...value, signData: resultData }));
                 });
             }
         },
-        getSignData: () => {
-            return get().signData;
-        },
     };
 });