fix: 更新首充活动

messages/br.json

@@ -34,7 +34,7 @@
     "save": "Save to Screen",
     "saveTips": "We'd like to add the BCWIN.COM to your initial screen for the latest free bets and bonus updates.",
     "rechargeTitle": "depósitos  prémios",
-    "rechargeTips": "obter {num}",
+    "rechargeTips": "obter 100%",
     "rechargeButton": "confirmação"
 
   },

messages/en.json

@@ -35,7 +35,7 @@
     "saveTips": "We'd like to add the BCWIN.COM to your initial screen for the latest free bets and bonus updates.",
 
     "rechargeTitle": "depósitos  prémios",
-    "rechargeTips": "obter {num}",
+    "rechargeTips": "obter 100%",
     "rechargeButton": "confirmação"
 
   },

src/api/promo.ts

@@ -69,6 +69,7 @@ export interface FirstPay {
      * 支付类型
      */
     pay_type: string[];
+    end_time: number;
 }
 
 export interface FirstPayCondition {
@@ -154,13 +155,7 @@ export interface PayCondition {
 }
 
 export const getPaysApi = async () => {
-    return server
-        .post<PayDataType>({
-            url: "/v1/api/front/activity/pay",
-        })
-        .then((res) => {
-            if (res.code === 200) {
-                return res.data;
-            }
-        });
+    return server.post<PayDataType>({
+        url: "/v1/api/front/activity/pay",
+    });
 };

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

@@ -2,7 +2,7 @@
 import { ServiceTypes } from "@/api/customservice";
 import { getPaysApi, lredPacketApi, PayDataType, redPacketApi } from "@/api/promo";
 import RedPacketModal, { RedPacketModalProps } from "@/components/Box/RedPacketModal";
-import UserRecharge, { ModalRefProps } from "@/components/Box/UserRecharge";
+import UserRecharge, { ModalRefProps, Timeout } from "@/components/Box/UserRecharge";
 import { Link } from "@/i18n";
 import { useGlobalNoticeStore } from "@/stores/useGlobalNoticeStore";
 import { useSocialStore } from "@/stores/useSocials";
@@ -16,6 +16,7 @@ interface Props {
     services: ServiceTypes[];
     socials: ServiceTypes[];
 }
+
 const ServiceWidget: FC<Props> = (props) => {
     const token = getToken();
     const { services, socials } = props;
@@ -23,9 +24,11 @@ const ServiceWidget: FC<Props> = (props) => {
 
     const newServices = services.filter((item) => item.is_suspend !== 1);
     const setSocials = useSocialStore((state) => state.setSocials);
-    const RedPacketModalRef = useRef<RedPacketModalProps>(null);
+    const redPacketModalRef = useRef<RedPacketModalProps>(null);
+
+    /// 首充活动ref
+    const userRechargeRef = useRef<ModalRefProps | null>(null);
 
-    const userRechargeRef = useRef<ModalRefProps>(null);
     useEffect(() => {
         // 数据存储，侧边栏使用
         setSocials(socials);
@@ -64,19 +67,25 @@ const ServiceWidget: FC<Props> = (props) => {
     });
 
     // 首充活动
-
-    const getPayInfo = async () => {
-        if (token) {
-            return getPaysApi();
+    const getPayInfo = async (): Promise<PayDataType> => {
+        try {
+            if (token) {
+                const result = await getPaysApi();
+                return result.data;
+            } else {
+                return Promise.reject("not login");
+            }
+        } catch (e) {
+            return Promise.resolve({
+                first_pay: [],
+                pay: [],
+            });
         }
-        return Promise.resolve({});
     };
     const { data: paysInfo } = useRequest<PayDataType, any>(getPayInfo, {
         pollingErrorRetryCount: 1,
         pollingWhenHidden: false,
     });
-    console.log(`🚀🚀🚀🚀🚀-> in Service.tsx on 69`, paysInfo);
-
     return (
         <>
             <div
@@ -85,14 +94,26 @@ const ServiceWidget: FC<Props> = (props) => {
                 {/*首充*/}
                 {paysInfo?.first_pay?.map((item, index) => {
                     return (
-                        <div key={index} className={`mb-[0.0694rem] cursor-pointer`}>
+                        <div
+                            key={index}
+                            className={`mb-[0.0694rem] flex cursor-pointer flex-col items-center`}
+                        >
                             <img
-                                className={"h-[0.3889rem] w-[0.3889rem]"}
-                                src="/hby/red-icon.png"
+                                className={"w-[0.4889rem]"}
+                                src="/hby/recharge.png"
                                 onClick={() => {
+                                    // @ts-ignore
                                     userRechargeRef.current?.onOpen(paysInfo.first_pay, index);
                                 }}
                             />
+                            {item.end_time > 0 ? (
+                                <Timeout
+                                    className={
+                                        "bg-[#ffa800] text-[0.08rem] text-[#fff] shadow-[0_0_3px_0.03rem_#ffa800]"
+                                    }
+                                    endTime={item.end_time}
+                                />
+                            ) : null}
                         </div>
                     );
                 })}
@@ -104,7 +125,7 @@ const ServiceWidget: FC<Props> = (props) => {
                                 className={"h-[0.3889rem] w-[0.3889rem]"}
                                 src="/hby/red-icon.gif"
                                 onClick={() => {
-                                    RedPacketModalRef.current?.onOpen(packets, index);
+                                    redPacketModalRef.current?.onOpen(packets, index);
                                 }}
                             />
                         </div>
@@ -144,7 +165,8 @@ const ServiceWidget: FC<Props> = (props) => {
                 )}
             </div>
 
-            <RedPacketModal ref={RedPacketModalRef} onAfterHandler={run} />
+            <RedPacketModal ref={redPacketModalRef} onAfterHandler={run} />
+
             <UserRecharge ref={userRechargeRef} />
 
             <div className={`grid grid-cols-${newServices.length >= 5 ? 5 : newServices.length}`}>

src/app/[locale]/(TabBar)/[[...share]]/_home/HomeNoticeBar.tsx

@@ -15,13 +15,21 @@ const HomeNoticeBar: FC<Props> = (props) => {
                 direction="vertical"
                 className={"text-[yellow]"}
                 indicator={() => null}
-                style={{ "--height": "0.2083rem" }}
+                style={{ "--height": "0.4167rem" }}
                 loop
                 autoplay
             >
                 {notices.map((notice, index) => (
                     <Swiper.Item key={index}>
-                        <Box none action={notice.action_type} actionData={notice.action_params}>
+                        <Box
+                            none
+                            action={notice.action_type}
+                            className={
+                                "flex h-[0.4167rem] items-center overflow-hidden" +
+                                " flex-wrap text-ellipsis"
+                            }
+                            actionData={notice.action_params}
+                        >
                             <div dangerouslySetInnerHTML={{ __html: notice.content! }}></div>
                         </Box>
                     </Swiper.Item>

src/app/[locale]/(navbar)/recharge/page.tsx

@@ -1,13 +1,6 @@
-"use client";
 import { RechargeContent } from "@/components/Box/UserRecharge";
-import { useEffect } from "react";
 
 const Page = () => {
-    useEffect(() => {}, []);
-    return (
-        <div>
-            <RechargeContent onCancel={() => {}} type={"page"} />
-        </div>
-    );
+    return <RechargeContent type={"page"} />;
 };
 export default Page;

src/app/[locale]/(navbar)/withdraw/WithdrawWidget.tsx

@@ -9,7 +9,8 @@ import TipsModal, { ModalProps } from "@/components/TipsModal";
 import { useUserInfoStore } from "@/stores/useUserInfoStore";
 import { useWalletStore } from "@/stores/useWalletStore";
 import { isEmail } from "@/utils";
-import { ActionSheet, Form, Input, Toast } from "antd-mobile";
+import { percentage } from "@/utils/methods";
+import { ActionSheet, Form, Input, ProgressBar, Toast } from "antd-mobile";
 import type { Action } from "antd-mobile/es/components/action-sheet";
 import { FormInstance } from "antd-mobile/es/components/form";
 import { useTranslations } from "next-intl";
@@ -106,7 +107,7 @@ const WithdrawWidget: FC<Props> = (props) => {
     const score = useWalletStore((state) => state.score)!;
 
     const withdrawRef = useRef<ModalProps>(null);
-
+    // 表单
     const formRef = useRef<FormInstance>(null);
 
     const [activeWallet, setActiveWallet] = useState<WithDrawType>(channels[0]);
@@ -286,7 +287,8 @@ const WithdrawWidget: FC<Props> = (props) => {
                                 <span className="tip">{wallet.score} BRL</span>
                             </li>
                             <li>
-                                {t("WithdrawPage.Valor")} <span className="tip">0 BRL</span>{" "}
+                                {t("WithdrawPage.Valor")}{" "}
+                                <span className="tip">{wallet.total_score_rollover} BRL</span>{" "}
                                 <span
                                     className="iconfont icon-iconhelp"
                                     onClick={() => withdrawRef.current?.onOpen()}
@@ -303,12 +305,39 @@ const WithdrawWidget: FC<Props> = (props) => {
                 </div>
             </Box>
 
-            <TipsModal title={"提现弹窗"} ref={withdrawRef}>
+            <TipsModal
+                title={
+                    <div className={"flex items-center justify-center"}>
+                        <i className={"iconfont icon-liwuhuodong text-[0.2778rem]"}></i>
+                        Proxima retirada de bonus
+                    </div>
+                }
+                ref={withdrawRef}
+            >
                 <ul>
-                    <li>1</li>
-                    <li>2</li>
-                    <li>3</li>
-                    <li>4</li>
+                    <li className={"mb-[0.0694rem]"}>
+                        <span>Bouns R$</span>
+                        <span>{wallet.score}</span>
+                    </li>
+                    <li>
+                        <ProgressBar
+                            percent={percentage(
+                                wallet.target_score_rollover,
+                                wallet.total_score_rollover
+                            )}
+                            className={"mb-[0.0694rem] flex-1"}
+                            style={{
+                                "--fill-color": "#fb8b05",
+                                "--track-width": "0.0694rem",
+                            }}
+                        />
+                        <div>
+                            <span>FALTA APOSTAR R$</span>
+                            <span>
+                                {wallet.total_score_rollover - wallet.target_score_rollover}
+                            </span>
+                        </div>
+                    </li>
                 </ul>
             </TipsModal>
         </>

src/components/Box/UserRecharge.tsx

@@ -1,7 +1,9 @@
 "use client";
 import { useRouter } from "@/i18n";
 import { getToken } from "@/utils/Cookies";
+import { useCountDown } from "ahooks";
 import { Mask } from "antd-mobile";
+import clsx from "clsx";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { FC, forwardRef, useImperativeHandle, useRef, useState } from "react";
@@ -14,21 +16,44 @@ export interface ModalRefProps {
 }
 
 export interface RechargeContentProps {
-    onCancel: () => void;
+    onCancel?: () => void;
+    recharge?: any;
     type?: "page" | "popup";
 }
+
+export function Timeout(props: { endTime: number; className?: string }) {
+    const { endTime, className } = props;
+    const [countdown, time] = useCountDown({
+        targetDate: endTime * 1000,
+        onEnd: () => {
+            console.log(`🚀🚀🚀🚀🚀-> in UserRecharge.tsx on 26 倒计时拘束`);
+        },
+    });
+    const cls = clsx(
+        className ? className : "w-full mb-[0.0694rem] text-center text-[0.1528rem] font-bold"
+    );
+    const countdownText = `${time.days > 0 ? (time.days + "d").padStart(2, "0") : ""}`;
+    return (
+        <div className={cls}>
+            {countdownText}
+            {`${time.hours}`.padStart(2, "0")}h{`${time.minutes}`.padStart(2, "0")}m
+            {`${time.seconds}`.padStart(2, "0")}s
+        </div>
+    );
+}
 export const RechargeContent: FC<RechargeContentProps> = (props) => {
-    const { onCancel, type = "popup" } = props;
+    const { onCancel, type = "popup", recharge } = props;
     const t = useTranslations("HomePage");
     const token = getToken();
     const router = useRouter();
+
     const receiveHandler = () => {
         if (token) {
             router.push("/deposit");
         } else {
             router.push("/login?redirect=deposit");
         }
-        onCancel();
+        onCancel && onCancel();
     };
     return (
         <div className={""}>
@@ -92,9 +117,12 @@ export const RechargeContent: FC<RechargeContentProps> = (props) => {
                         " mb-[0.13rem] translate-x-1/2 font-bold text-[#fee5c1]"
                     }
                 >
-                    {t("rechargeTips", { num: "100%" })}
+                    {t("rechargeTips")}
                 </div>
             </div>
+            {/*倒计时*/}
+            {recharge && recharge.end_time !== 0 ? <Timeout endTime={recharge.end_time} /> : null}
+
             <div className={"relative flex w-[100%] justify-center"}>
                 <div
                     style={{
@@ -125,7 +153,6 @@ const UserRecharge = forwardRef<ModalRefProps, Props>(function UserRecharge(prop
             onClose: () => setVisible(false),
             onOpen: (source: any, index?: number) => {
                 recharges.current = source;
-                console.log(`🚀🚀🚀🚀🚀-> in UserRecharge.tsx on 36`, source);
                 if (index !== null && index !== undefined) {
                     activeIndex.current = index;
                 }
@@ -135,7 +162,10 @@ const UserRecharge = forwardRef<ModalRefProps, Props>(function UserRecharge(prop
     });
     return (
         <Mask visible={visible} onMaskClick={() => setVisible(false)}>
-            <RechargeContent onCancel={() => setVisible(false)} />
+            <RechargeContent
+                onCancel={() => setVisible(false)}
+                recharge={recharges.current?.[activeIndex.current]}
+            />
         </Mask>
     );
 });

src/components/TipsModal/index.tsx

@@ -1,9 +1,9 @@
 "use client";
 import { Mask } from "antd-mobile";
-import { forwardRef, PropsWithChildren, useImperativeHandle, useState } from "react";
+import { forwardRef, PropsWithChildren, ReactNode, useImperativeHandle, useState } from "react";
 
 type Props = {
-    title?: string;
+    title?: string | ReactNode;
 };
 export type ModalProps = {
     onClose: () => void;