fix: 更新红包雨，修改惠充

messages/br.json

@@ -32,7 +32,10 @@
     "gameTag":"Games",
     "cancel": "Cancelar",
     "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."
+    "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}",
+    "rechargeButton": "confirmação"
 
   },
   "Sidebar": {
@@ -306,7 +309,11 @@
     "rulesFifth": "5. If you have not bet during the period in which the cashback was active or if your earnings of the last week or total earnings are greater than your losses, you will not receive cashback.",
     "rulesSixth": "6. Cashback maximum per person per week: R$ 10000",
     "rulesSeventh": "7. Cashback value can be extracted directly or used to continue playing"
-
+  },
+  "packetsPopup": {
+    "title": "Chuva de dinheiro",
+    "receiveSuccess": "Boa sorte! Parabéns pelo seu prêmio!",
+    "receiveWarring": "Há muitos participantes,  por favor tentem novamente na \npróxima sessão."
   },
   "code": {
     "200": "successful",
@@ -349,7 +356,9 @@
     "1407":"",
     "1501": "",
     "1502":"",
-    "1503": ""
+    "1503": "",
+    "1600": "Order creation failed",
+    "1601": "The top-up channel does not exist"
   },
   "form": {
     "phone":"Phone Number",

messages/en.json

@@ -32,7 +32,11 @@
     "gameTag":"Games",
     "cancel": "Cancelar",
     "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."
+    "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}",
+    "rechargeButton": "confirmação"
 
   },
   "Sidebar": {
@@ -306,7 +310,11 @@
     "rulesFifth": "5. If you have not bet during the period in which the cashback was active or if your earnings of the last week or total earnings are greater than your losses, you will not receive cashback.",
     "rulesSixth": "6. Cashback maximum per person per week: R$ 10000",
     "rulesSeventh": "7. Cashback value can be extracted directly or used to continue playing"
-
+  },
+  "packetsPopup": {
+    "title": "Money rain",
+    "receiveSuccess": "Good luck! Congratulations on your prize!",
+    "receiveWarring": "There are many participants, please try again at\n next session."
   },
   "code": {
     "200": "successful",
@@ -349,7 +357,9 @@
     "1407":"",
     "1501": "",
     "1502":"",
-    "1503": ""
+    "1503": "",
+    "1600": "Order creation failed",
+    "1601": "The top-up channel does not exist"
   },
   "form": {
     "phone":"Phone Number",

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "node scripts/swEnv.js .env.development .env.local && next dev",
+    "dev": "node scripts/swEnv.js .env.development .env.local && next dev ",
 
     "dev:prod": "node scripts/swEnv.js .env.production .env.local  && next dev",
     "build:prod": "node scripts/swEnv.js .env.production .env.local  && next build",

public/swenv.js

@@ -1,13 +1,13 @@
 
   const process = {
     env: {
-        NEXT_PUBLIC_FIREBASE_APIKEY: 'undefined',
-        NEXT_PUBLIC_FIREBASE_AUTHDOMAIN: 'undefined',
-        NEXT_PUBLIC_FIREBASE_PROJECTID: 'undefined',
-        NEXT_PUBLIC_FIREBASE_STORAGEBUCKET: 'undefined',
-        NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID: 'undefined',
-        NEXT_PUBLIC_FIREBASE_APPID: 'undefined',
-        NEXT_PUBLIC_FIREBASE_MEASUREMENTID: 'undefined',
-        NEXT_PUBLIC_FIREBASE_KEYS: 'undefined',
+      NEXT_PUBLIC_FIREBASE_APIKEY:"AIzaSyCIE8xtySsYztsSgmQJx_aqPrrpHEuvgvw",
+      NEXT_PUBLIC_FIREBASE_AUTHDOMAIN:"bcwin777-1bdda.firebaseapp.com",
+      NEXT_PUBLIC_FIREBASE_PROJECTID:"bcwin777-1bdda",
+      NEXT_PUBLIC_FIREBASE_STORAGEBUCKET:"bcwin777-1bdda.firebasestorage.app",
+      NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID:"542456379513",
+      NEXT_PUBLIC_FIREBASE_APPID:"1:542456379513:web:851a46fc639085170bfca8",
+      NEXT_PUBLIC_FIREBASE_MEASUREMENTID:"G-GV6Y8DXHHD",
+      NEXT_PUBLIC_FIREBASE_KEYS:"BOCfpA08vK6uxhMdRblnx9gPVBLx9WpTn9AutVNhHQQpVtXzDIKW0X6cmsNRaFDhyFDJfMqWjqC7mq6uDFIKU_M"
     }
 }

scripts/swEnv.js

@@ -18,21 +18,3 @@ fs.copyFile(sourcePath, targetPath, (err) => {
     }
     console.log(`成功复制文件从 ${sourcePath} 到 ${targetPath}`);
 });
-
-fs.writeFileSync(
-    "./public/swenv.js",
-    `
-  const process = {
-    env: {
-        NEXT_PUBLIC_FIREBASE_APIKEY: '${process.env.NEXT_PUBLIC_FIREBASE_APIKEY}',
-        NEXT_PUBLIC_FIREBASE_AUTHDOMAIN: '${process.env.NEXT_PUBLIC_FIREBASE_AUTHDOMAIN}',
-        NEXT_PUBLIC_FIREBASE_PROJECTID: '${process.env.NEXT_PUBLIC_FIREBASE_PROJECTID}',
-        NEXT_PUBLIC_FIREBASE_STORAGEBUCKET: '${process.env.NEXT_PUBLIC_FIREBASE_STORAGEBUCKET}',
-        NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID: '${process.env.NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID}',
-        NEXT_PUBLIC_FIREBASE_APPID: '${process.env.NEXT_PUBLIC_FIREBASE_APPID}',
-        NEXT_PUBLIC_FIREBASE_MEASUREMENTID: '${process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENTID}',
-        NEXT_PUBLIC_FIREBASE_KEYS: '${process.env.NEXT_PUBLIC_FIREBASE_KEYS}',
-    }
-}
-`
-);

scripts/writeVariable.js

@@ -0,0 +1,19 @@
+const fs = require("fs");
+
+fs.writeFileSync(
+    "./public/swenv.js",
+    `
+  const process = {
+    env: {
+        NEXT_PUBLIC_FIREBASE_APIKEY: '${process.env.NEXT_PUBLIC_FIREBASE_APIKEY}',
+        NEXT_PUBLIC_FIREBASE_AUTHDOMAIN: '${process.env.NEXT_PUBLIC_FIREBASE_AUTHDOMAIN}',
+        NEXT_PUBLIC_FIREBASE_PROJECTID: '${process.env.NEXT_PUBLIC_FIREBASE_PROJECTID}',
+        NEXT_PUBLIC_FIREBASE_STORAGEBUCKET: '${process.env.NEXT_PUBLIC_FIREBASE_STORAGEBUCKET}',
+        NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID: '${process.env.NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID}',
+        NEXT_PUBLIC_FIREBASE_APPID: '${process.env.NEXT_PUBLIC_FIREBASE_APPID}',
+        NEXT_PUBLIC_FIREBASE_MEASUREMENTID: '${process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENTID}',
+        NEXT_PUBLIC_FIREBASE_KEYS: '${process.env.NEXT_PUBLIC_FIREBASE_KEYS}',
+    }
+}
+`
+);

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

@@ -9,7 +9,7 @@ import { getToken } from "@/utils/Cookies";
 import { useRequest } from "ahooks";
 import { Badge } from "antd-mobile";
 import { useTranslations } from "next-intl";
-import { FC, useEffect, useRef, useState } from "react";
+import { FC, useEffect, useRef } from "react";
 
 interface Props {
     services: ServiceTypes[];
@@ -17,7 +17,7 @@ interface Props {
 }
 const ServiceWidget: FC<Props> = (props) => {
     const token = getToken();
-    const [packets, setPackets] = useState<any[]>([]);
+    // const [packets, setPackets] = useState<any[]>([]);
     const { services, socials } = props;
     const defaultService = services.find((item) => item.is_suspend === 1);
 
@@ -47,84 +47,75 @@ const ServiceWidget: FC<Props> = (props) => {
             }
 
             // 是否有已开始但是没领过的红包
-            let isHasStartAct = actList.filter((aItem: any) => {
+            return actList.filter((aItem: any) => {
                 return aItem.is_start && !aItem.is_receive;
             });
-            console.log(`🚀🚀🚀🚀🚀-> in Service.tsx on 53`, isHasStartAct);
-            setPackets(isHasStartAct);
         } catch (error) {
             console.log("redPacketInfo===>error:", error);
         }
     };
     // 红包雨轮询
-    const { run } = useRequest(getRedPacketInfo, {
+    const { data: packets, run } = useRequest<any[], any>(getRedPacketInfo, {
         pollingInterval: 180000,
         pollingErrorRetryCount: 1,
         pollingWhenHidden: false,
-        onSuccess: (data) => {
-            console.log("data", data);
-        },
     });
 
     return (
         <>
-            {/* 红包雨icon */}
-            {packets.map((item, index) => {
-                return (
-                    <div
-                        key={index}
-                        className={`absolute right-[0.12rem] z-50 flex h-[0.54rem] w-[0.54rem] cursor-pointer items-center justify-center`}
-                        style={{ bottom: `${2.04 + index * 0.5}rem` }}
+            <div
+                className={`absolute bottom-[0.84rem] right-[0.12rem] z-50 flex w-[100px] flex-col items-center justify-center`}
+            >
+                {/* 红包雨icon */}
+                {packets?.map((item, index) => {
+                    return (
+                        <div key={index} className={`mb-[0.0694rem] cursor-pointer`}>
+                            <img
+                                className={"h-[0.3889rem] w-[0.3889rem]"}
+                                src="/hby/red-icon.png"
+                                onClick={() => {
+                                    RedPacketModalRef.current?.onOpen(packets, index);
+                                }}
+                            />
+                        </div>
+                    );
+                })}
+
+                {unread ? (
+                    <Link
+                        href={"/notification"}
+                        className={
+                            "mb-[0.0694rem] flex h-[0.54rem] w-[0.54rem] items-center" +
+                            " justify-center rounded-[50%] bg-gradient-to-b from-[#0575e6] to-[#00f260]"
+                        }
+                    >
+                        <Badge content={!!unread ? unread : null} style={{ "--top": "12px" }}>
+                            <i
+                                className={"iconfont icon-duanxinguanli text-[0.3rem] text-[#fff]"}
+                            ></i>
+                        </Badge>
+                    </Link>
+                ) : null}
+
+                {defaultService && (
+                    <Link
+                        href={defaultService.url}
+                        className={
+                            "flex h-[0.54rem] w-[0.54rem] items-center justify-center rounded-[50%]" +
+                            " bg-gradient-to-b from-[#ff6a01] to-primary-color"
+                        }
+                        target={"_blank"}
                     >
                         <img
                             className={"h-[0.3889rem] w-[0.3889rem]"}
-                            src="/hby/red-icon.png"
-                            onClick={() => {
-                                RedPacketModalRef.current?.onOpen(index);
-                            }}
-                        />
-                    </div>
-                );
-            })}
+                            src={defaultService.icon_url}
+                        ></img>
+                    </Link>
+                )}
+            </div>
 
-            {/* 红包弹窗 */}
-            {/*{isShowRedPacket && (*/}
-            {/*    <PopupHby*/}
-            {/*        onClose={() => {*/}
-            {/*            setIsShowRedPacket(false);*/}
-            {/*        }}*/}
-            {/*    />*/}
-            {/*)}*/}
             <RedPacketModal ref={RedPacketModalRef} onAfterHandler={run} />
 
-            {defaultService && (
-                <Link
-                    href={defaultService.url}
-                    className={
-                        "flex h-[0.54rem] w-[0.54rem] items-center justify-center rounded-[50%]" +
-                        " absolut absolute bottom-[0.84rem] right-[0.12rem] z-50 bg-gradient-to-b from-[#ff6a01] to-primary-color"
-                    }
-                    target={"_blank"}
-                >
-                    <img
-                        className={"h-[0.3889rem] w-[0.3889rem]"}
-                        src={defaultService.icon_url}
-                    ></img>
-                </Link>
-            )}
-
-            <Link
-                href={"/notification"}
-                className={
-                    "flex h-[0.54rem] w-[0.54rem] items-center" +
-                    " absolute bottom-[1.44rem] right-[0.12rem] z-50 justify-center rounded-[50%] bg-gradient-to-b from-[#0575e6] to-[#00f260]"
-                }
-            >
-                <Badge content={!!unread ? unread : null} style={{ "--top": "12px" }}>
-                    <i className={"iconfont icon-duanxinguanli text-[0.3rem] text-[#fff]"}></i>
-                </Badge>
-            </Link>
-
             <div className={`grid grid-cols-${newServices.length >= 5 ? 5 : newServices.length}`}>
                 {newServices.map((service, index) => {
                     return (

src/app/[locale]/(TabBar)/[[...share]]/@popupWidget/UserRecharge.tsx

@@ -0,0 +1,111 @@
+"use client";
+import { useRouter } from "@/i18n";
+import { getToken } from "@/utils/Cookies";
+import { Mask } from "antd-mobile";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { FC, useState } from "react";
+
+interface Props {}
+
+const UserRecharge: FC<Props> = (props) => {
+    const [visible, setVisible] = useState(false);
+    const token = getToken();
+    const router = useRouter();
+    const t = useTranslations("HomePage");
+
+    const receiveHandler = () => {
+        if (token) {
+            router.push("/deposit");
+        } else {
+            router.push("/login?redirect=deposit");
+        }
+        setVisible(false);
+    };
+    return (
+        <Mask visible={visible} onMaskClick={() => setVisible(false)}>
+            <div className={"h-[100vh] h-[10dvh]"}>
+                <div className={"relative mt-[10vh]"}>
+                    <div
+                        onClick={() => setVisible(false)}
+                        className={
+                            "absolute right-[10%] top-0 h-[0.1736rem] w-[0.1736rem]" +
+                            " rounded-[50%] border-[2px] border-[#dcd8bb] text-[#dcd8bb]" +
+                            " flex items-center justify-center"
+                        }
+                    >
+                        <span className={"iconfont icon-guanbi"}></span>
+                    </div>
+
+                    <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%]"}>
+                        <img src={"/recharge/bg1.png"} className={"h-[100%] w-[100%]"} />
+                    </div>
+                    <Image
+                        src={"/recharge/content.png"}
+                        alt={"recharge"}
+                        className={"z-2 w-[100%]"}
+                        width={750}
+                        height={694}
+                    />
+                    <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", { num: "100%" })}
+                    </div>
+                </div>
+                <div className={"relative flex w-[100%] justify-center"}>
+                    <div
+                        style={{
+                            background: "url(/recharge/button.png)",
+                            backgroundRepeat: "no-repeat",
+                            backgroundSize: "100% 100%",
+                        }}
+                        onClick={receiveHandler}
+                        className={
+                            "flex h-[0.7rem] w-[1.5972rem] items-center justify-center" +
+                            " text-[0.1528rem] font-bold text-[#fff]"
+                        }
+                    >
+                        <span> {t("rechargeButton")}</span>
+                    </div>
+                </div>
+            </div>
+        </Mask>
+    );
+};
+
+export default UserRecharge;

src/app/[locale]/(TabBar)/[[...share]]/@popupWidget/page.tsx

@@ -1,4 +1,5 @@
 import { NoticeRep, PromotionRep } from "@/api/home";
+import UserRecharge from "@/app/[locale]/(TabBar)/[[...share]]/@popupWidget/UserRecharge";
 import { server } from "@/utils/server";
 import HomeMessage from "../_home/HomeMessage";
 import HomePromotion from "../_home/HomePromotion";
@@ -41,6 +42,9 @@ const Page = async () => {
             />
             {/*安装弹窗*/}
             <Desktop />
+
+            {/* 新用户充值活动 */}
+            <UserRecharge />
         </>
     );
 };

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

@@ -13,7 +13,7 @@ const Manufacturer = (props: { data: GameListRep[] }) => {
         return <img key={index} className={"rounded-[0.05rem]"} src={item.game_icon} alt="" />;
     });
 
-    return <div className={"grid grid-cols-4 gap-x-2"}>{elements}</div>;
+    return <div className={"grid grid-cols-4 gap-x-2 gap-y-2"}>{elements}</div>;
 };
 
 const HomeGames = (props: Props) => {

src/app/[locale]/(TabBar)/deposit/DepositData.tsx

@@ -9,27 +9,11 @@ import { Form, Input, Toast } from "antd-mobile";
 import { FormInstance } from "antd-mobile/es/components/form";
 import { useTranslations } from "next-intl";
 import { FC, Fragment, useRef, useState } from "react";
-import "./page.scss";
 
+import "@/styles/deposit.scss";
 interface Props {
     deposits: DepositsTypes[];
 }
-const MobileFiled = ({
-    value,
-    onChange,
-    products,
-}: {
-    value?: any;
-    onChange?: (value: any) => void;
-    products: DepositsTypes["products"];
-}) => {
-    const t = useTranslations();
-    return (
-        <>
-            <Input placeholder={t("form.card")} type={"number"} />
-        </>
-    );
-};
 const DepositData: FC<Props> = (props) => {
     const { deposits } = props;
     const t = useTranslations();
@@ -38,30 +22,6 @@ const DepositData: FC<Props> = (props) => {
 
     const formInstanceRef = useRef<FormInstance>(null);
     let [amount, setAmount] = useState<number | undefined>(undefined);
-    // const ChangeAmount = (e: any) => {
-    //     let newAmount = e.target.value.replace(/[^0-9]/g, "");
-    //     if (newAmount > activeType.max_amount) newAmount = activeType.max_amount;
-    //     // if (newAmount < activeType.min_amount) newAmount = activeType.min_amount;
-    //     setAmount(newAmount);
-    // };
-
-    // const userRechargeRequest = async () => {
-    //     if (!amount) return;
-    //     if (amount < activeType.min_amount) {
-    //         Toast.show(`Min  ${activeType.min_amount}`);
-    //         return;
-    //     }
-    //     let res = await getUserRechargeApi({
-    //         amount: amount,
-    //         channel_id: activeType.id,
-    //     });
-    //     console.log(`🚀🚀🚀🚀🚀-> in DepositData.tsx on 38`, res);
-    //     if (res.code === 200) {
-    //         setAmount(undefined);
-    //         Toast.show({ icon: "success", content: t("RechargeSuc"), maskClickable: false });
-    //         await actions();
-    //     }
-    // };
     const titleChangeHandler = (item: DepositsTypes, index: number) => {
         setAmount(undefined);
         setActiveType(item);
@@ -159,14 +119,9 @@ const DepositData: FC<Props> = (props) => {
                                 label=""
                                 rules={[
                                     { required: true, message: t("form.cardReg"), pattern: neReg },
-                                    { min: 11, message: t("form.cardReg") },
                                 ]}
                             >
-                                <Input
-                                    placeholder={t("form.card")}
-                                    maxLength={11}
-                                    type={"number"}
-                                />
+                                <Input placeholder={t("form.card")} maxLength={11} type={"text"} />
                             </Form.Item>
                         </>
                     ) : null}
@@ -184,15 +139,6 @@ const DepositData: FC<Props> = (props) => {
 
                     <div className={"flex flex-col"}>
                         <div className={"flex-1"}>
-                            {/*<div className="amount-box">*/}
-                            {/*    <span>{t("Montante")} (BRL):</span>*/}
-                            {/*    <input*/}
-                            {/*        type="text"*/}
-                            {/*        value={amount}*/}
-                            {/*        onChange={ChangeAmount}*/}
-                            {/*        placeholder={`Mín. ${activeType.min_amount}`}*/}
-                            {/*    />*/}
-                            {/*</div>*/}
                             <ul className="ul-box">
                                 {activeType.products.map((item, index) => (
                                     <li
@@ -219,13 +165,6 @@ const DepositData: FC<Props> = (props) => {
                     {t("DepositPage.depositTips")}
                 </div>
             </Box>
-
-            {/*<div className="topUp">*/}
-            {/*    <ButtonOwn active={amount !== ""} callbackFun={userRechargeRequest}>*/}
-            {/*        {t("DepositarAgora")}*/}
-            {/*    </ButtonOwn>*/}
-            {/*<div className={"mt-[5px] text-[0.12rem] text-primary-color"}>{t("depositTips")}</div>*/}
-            {/*</div>*/}
         </div>
     );
 };

src/app/[locale]/(TabBar)/deposit/page.scss

@@ -1,144 +0,0 @@
-.deposit-box {
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-    padding: 0.1rem .18rem;
-    //background-color: #1f1f1f;
-    //display: flex;
-    //flex-direction: column;
-
-    .img-box {
-      width: .8rem;
-      height: .27rem;
-      margin: .12rem 0;
-      background: url('/img/pixImg.png') no-repeat center;
-      background-size: 100% 100%;
-    }
-
-    .btn-box {
-      margin: .1rem 0;
-      height: .3rem;
-      margin-right: .06rem;
-      width: .98rem !important;
-      flex-shrink: 0;
-      border-radius: .05rem;
-      line-height: .28rem;
-      align-items: center;
-      background: transparent;
-      border: .01px solid #333;
-      //#ff9323
-      border-radius: .05rem;
-      color: #868686;
-      font-size: .1rem;
-      line-height: .28rem;
-      overflow: hidden;
-      cursor: pointer;
-      text-align: center;
-      font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Segoe UI, Arial, Roboto, PingFang SC, miui, Hiragino Sans GB, Microsoft Yahei, sans-serif;
-    }
-    .amount-box {
-      width: 100%;
-      margin: .05rem 0;
-      display: flex;
-      flex-direction: column;
-      span {
-        font-size: .13rem;
-        color: #fff;
-      }
-      input {
-        font-size: .16rem;
-        width: 100%;
-        margin: .12rem 0 .04rem;
-        background-color: #494949;
-        border-radius: .05rem;
-        height: .4rem;
-        color: #868686;
-        text-indent: .14rem;
-        outline: none;
-        &::placeholder {
-          color: #868686;
-        }
-      }
-    }
-    .ul-box {
-      width: 100%;
-      height: auto;
-      -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-      justify-content: space-between;
-      flex-wrap: wrap;
-      //margin-top: .09rem;
-      display: flex;
-      -webkit-box-align: center;
-      -ms-flex-align: center;
-      align-items: center;
-      li {
-        width: 30%;
-        height: .48rem;
-        border-radius: .06rem;
-        color: #fff;
-        font-size: .18rem;
-        background: #494949;
-        display: flex;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        -webkit-box-orient: vertical;
-        -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-        flex-direction: column;
-        -webkit-box-pack: center;
-        -ms-flex-pack: center;
-        justify-content: center;
-        margin-top: .12rem;
-        position: relative;
-        overflow: hidden;
-        cursor: pointer;
-        &.active {
-          background-color: #ff6a01;
-          .hot {
-            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABBCAYAAABlwHJGAAAFSUlEQVR4nOWce2gcRRzHPycBH7GiIqGif1Sw1gpqQJEqUhqtNa2V1IqPiIK0VoOxPiu1qH+JWLDaQpVCW4pFJdb4KhRqUHwlVCgWo5VWDaZoS0PiI9Y0JtbHyK8zy20uu3ezz7vb+8Kyub1ZfjOfm99vfjM7m5xSCh+dCNwILASuBM4HTvArXOV6qs6j/vXAQ8ByYGpGG+7WKmB1IYhZQAcwrbx1S02PA2vEmBvEAuAd4xJZl8SDx4C1Tjsdn78Y6CwLhN+H0raojOuvdV8UEDlgI3BK2jWipxOenAoHvk7LokBoB9YXfiEg5pjYkK4EQsdt2uRvA2lBaAM2eH0pMaK1rBCW7ITLrk/a4n/AMmCLX4G61HtD+hD+BZYCW4sVqkt1qHRDEI39kbRFgXA38FqpghIjpiRdm+NyQ5huzvJZricjgXCXDQRSS5kL3eHhDmhs15+TgfGPiX0dtjekA+Lk0/TZHROWrU8KxjHgdpMX2UulpeFBb0MbH1Dq/pw+ut+MWpm/lFItMpEMesjs03f6mZo2LYfel7W11m1w9S1he8LNwI4wNycHQrLFz9+CoT6oPwtmzobLF8BJ9d7l3TBaNsG8pUGsjQOLgZ1hqxs/iPFRePWJfKPcmnIBLHzG/xd3w2jvgYuusrE4BtwEdEWpdvwg1rVC3zY4uwnmtMGZ58Ch/fDR8zDyvS5z3RpY9Kj3/QJDeo+de/wp/Qf4MHK9Yw2VXZt10JMAWKixo0q9/nScgXFUKdUUJjB6HfGBkIaunKEb6TdCiBwYUrZYueIaUUrNjguCHPHlEcODuuuLS5ze4F9u8UpdRsp+82kYS5KXzwc+i1DbSYoPxPhRu3Iyalxxh/57f+C2HDEQeoLeWErhQUgmKIHN0RlmnXfg49ILLefO1OfRX4JYFAjzgF2h6ltC4UBIQyUtlqHOgSHu4Eymtj9X/P6xEX1umG5rcRi4Ftgdqr4WCgfivEt0Bihyw2hZpc8yfL73ov/93a/oc2OzjbVfgbnAnlB1tVWkkUKGQGc4dIbMd1+YeO3wD/nyMko4cwuvIXayflZKNcY5Ovgd0RMq9xRbZpMyq5Te8MGKfBkZJU5t0D0Fsx7Rttk/3dYaMj1hb0y/eVF5PemaLIkJ4g5ecqbYOG5iptiXztWxQhovARSTYs+6F5rvKwVhELgG2Jdw+/Oy7v5emeAX7090g0I3cdyh/yt9SNJVWoeVUhem4Q7uozQIv/UCNwTnulfMCKZDSqkZaUOwjxGF6wXiDlvm5z+7J0heMcNOB80Q2ZdM3y8u+2DphuHIbxHFgWG/yPIT0AT0R29SSAXquH5xwEsSE+x0QCk1rRzuENw13IpnWc1Rvxkdfkzsl7ZU8MwyvtXnPvPctewQCJ1iR4fxnYkJB0PZT0DRMku3m6zo9U+6JupbcYdcLjcQNamNU9FT7GBrjPsMBMkcyRYIe+01c4fUt8jYKK3tgr0mWapICFhPuqLpS1nAN+sKFauke8Qe0xMqGgIJg9htIAwnaCM2JQVil1loPVKGNoVSEiB6zJJ71UAggWDZbXbwWj7kqBzF2SM+AZqrEQIxgpCn0TeYp9NVqThAdJlH81ULgRhAyA6VRdUOgYggdhgI4zHWp2wKC2K72bh1LAMMjisMiLeBW7MEgRAgOs2O1kxBICCINwyEvxOsT9lkC0I2dt9pNnpnUjYgtpqt/pmFgAUIeeNlSdYhUAKEvPB2j3kNKPPyA7HBvAhWOcvMCcsLxEvmlcCagYAHiHXAg7UGgQIQ8o70I7UIAReI1eaF8ZqVgHjW/OuA2hXwP8DQnuAIx+ICAAAAAElFTkSuQmCC);
-            width: .33rem;
-            height: .325rem;
-            background-size: 100% 100%;
-          }
-          .amountTips {
-            color: #fff;
-          }
-        }
-        .hot {
-          display: inline-block;
-          position: absolute;
-          top: 0;
-          left: 0;
-          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABBCAYAAABlwHJGAAAFWklEQVR4nOWca2gdRRTHf5GApWmxImr0g2i1gkIVlfoqitUa21oxKpa0KD5aoeKLWvpBqH4pQvHRFqwE1CoBS4pBabGgqdZHW/MhEqsG6iMa+0BrqxKjMQ31ETmZs2S4d+/dubuzex/5Q9jHnb0z87tnzjkzu5u60QcppBOBW4CFwFXAecAJBUtXt1bXhzS/AXgMeARorNGO23oCWJsL4kqgHTi7vG3LTKuA56QyG8QC4C0dErWuUWAlsD7oZzDmZwIdZYFw5vVZ1ziqQ3+9fVJA1AEvAZOzbhHNr8DqnXDJQ1nVKBCkshdyP5ChcZ36hmwlEJqWmipPnZ4VhOX6o+dJQCwuK4St62DHyrRr/A94AHi1UIH6zK0hewj/AlJhW7FC9ZmGShuCaPJJadcoEO4FXo8qKM5yatqtGZMN4XC/2cqxnE9HAuFuFwhkljLnDoc158IPX5rjdGD8o76v3fWCbEAMD5qt7ROevTgtGMeBFs2LnCWTLgkr6UsSp58+yK9m1RdwzkVmf8cm2LosKYRFwLZSL8xuNhkGAa+WIRDuiAOBVC1CssXZS+DkRhgZgr5PYecz8Oe34eVty9jdAe2LSqltBLgdeCduc/2DmHo+LO8Y75Stkb9g15bC5m/D2PwUfLLGpcZjwG1AZ5Jm+wfx5PdwxnT4/Sh0vw2/HICzZsKsBTCpwZTp6YRN88KvFxhiPW6+Yhi4FXg/abP9glj8BlxzpxnzMvZtiaXc8xpceLU5mdwxDuvq2YceWu7RWUpH5VcXbV6R/7n4ho2zYV+XOb62JckUfAiY7wsCXkE0XmpMX4ZEoQgharvPlJGyly+JU9MfCmFXgtbmyR+IKae4lRPL6P3Y7M+YVWotgwphT6kXRik+CIn34tgCHfnK7Ew7LXqh5WCv2U6aUkqNAqEJ6IrV3gjFAyEdleRHQl0AQ4ZDMJla+Hjx6xumme3Az641DgA3AN2x2uugeCD2vmi8vsiGsX2d2Ur4XPpu4euvaNbvKVJmXL8BcyXoxmqro+IPDQl9uTAEUI/mNZfdZM7NaBm/RqKEnBNQEmKjE6ZfFcJnXnpbRMnzCHuKHeQPYg0CIpBEiWNDBgC6HrFhfuF02+ioQuhN1D5HuVlEMecXTLGxLEOyxpcfHvcZ4kAFgqTYYjHREI4Ac7KCgJNFBL94WCbY9Dw0q2MUawjmCXZmKcPh9AvM/nfvRQEQHQYk0/o6Vo9iKtoiglifO0W2IQgk6XiYA5VoIr5D/qIh/KiWkCkEnH1E7uKJDAcbgm0pYT7DTYc0RPZ576WDwu6G50s6E8CwV6HDhktwLOVkFummg2oJ/WVgMKbSooZtGVG/tjhYGQ7R2q8Q9ifsSyKVlkfYy2oCpNiymhuEfr3lWFYIxEqo/K0x9imEA3G/wKfiZZbJYXyjw+FQVh2NUvwUOxeG+619CY1z6lrHQmXFKNl6RABDooebT9gnw6GudSxpqihld4PHpMtzdQ5RccrqBs/nmixVJAScE6pk2gvcqOsKFau0LaJHLaGiIZAyiG6FMJBiHd6UFoguXWgddChbEUoDxB5dcq8aCKTgLHfrE7xDnr83dfm0iI+AedUIAY8g5G70zXpjtirlA0Sn3pqvWgh4ACFPqDRXOwQSgtiuEEY8tqdsigtimz64dbwGGIwpDog39RG+moFADBAd+kRrTUGgRBBbFMLfKbanbHIFIQ9236UPetekXEC06aP+NQsBBxDyxsv9tQ6BCBDy7tMyfQ2o5lUIRKu+CJbVwm7ZFQZio74SOGEgEAJiA/DoRINADgh5R3rFRISABWKtvjA+YSUgntZ/HTBxBfwPUDWaaJmlFlUAAAAASUVORK5CYII=);
-          width: .33rem;
-          height: .325rem;
-          background-size: 100% 100%;
-        }
-        .amountContent {
-          width: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          .iconfont {
-            margin-right: .03rem;
-            font-size: .14rem;
-            font-family: SWISSC-BT;
-            color: #fff;
-            font-weight: bold;
-            font-style: oblique;
-          }
-        }
-        .amountTips {
-          font-size: .1rem;
-          color: #ff9500;
-        }
-      }
-    }
-    .topUp {
-      width: 100%;
-      margin: .24rem 0 .4rem;
-    }
-  }

src/app/[locale]/(enter)/components/Form/index.tsx

@@ -21,6 +21,7 @@ import { PickerDate } from "antd-mobile/es/components/date-picker/util";
 import clsx from "clsx";
 import dayjs from "dayjs";
 import { useTranslations } from "next-intl";
+import { useSearchParams } from "next/navigation";
 import { FC, RefObject, useRef, useState } from "react";
 interface MobileFieldProps {
     value?: string;
@@ -39,15 +40,15 @@ const MobileField: FC<MobileFieldProps> = (props) => {
     };
     return (
         <>
-          <Space align="center" className={"text-[#ccc]"}>
-            <Space align="center">+55</Space>
-            <Input
-              placeholder={t("phone")}
-              maxLength={11}
-              value={value}
-              onChange={(e) => changeHandler(e)}
-            />
-          </Space>
+            <Space align="center" className={"text-[#ccc]"}>
+                <Space align="center">+55</Space>
+                <Input
+                    placeholder={t("phone")}
+                    maxLength={11}
+                    value={value}
+                    onChange={(e) => changeHandler(e)}
+                />
+            </Space>
         </>
     );
 };
@@ -125,6 +126,7 @@ const FormComponent: FC<Props> = (props) => {
     const { type = "register", isStrictMode = true } = props;
     const { setUserInfo } = useUserInfoStore();
     const t = useTranslations();
+    const searchParams = useSearchParams();
 
     /// 密码可见
     const [visible, setVisible] = useState(false);
@@ -207,7 +209,7 @@ const FormComponent: FC<Props> = (props) => {
                 const result = await userInfoApi();
                 if (result.code === 200) {
                     setUserInfo(result.data);
-                    router.replace("/");
+                    router.replace(`/${searchParams.get("redirect")}` || "/");
                 }
             }
         }
@@ -341,12 +343,9 @@ const FormComponent: FC<Props> = (props) => {
                         <Form.Item
                             name="passport"
                             label=""
-                            rules={[
-                                { required: true, message: t("form.cardReg"), pattern: neReg },
-                                { min: 11, message: t("form.cardReg") },
-                            ]}
+                            rules={[{ required: true, message: t("form.cardReg"), pattern: neReg }]}
                         >
-                            <Input placeholder={t("form.card")} maxLength={11} type={"number"} />
+                            <Input placeholder={t("form.card")} maxLength={11} type={"text"} />
                         </Form.Item>
 
                         <Form.Item

src/app/[locale]/(navbar)/doings/discount/DepositData.tsx

@@ -0,0 +1,167 @@
+"use client";
+import { DepositsTypes } from "@/api/depositsApi";
+import { getUserRechargeApi } from "@/api/user";
+import Box from "@/components/Box";
+import ButtonOwn from "@/components/ButtonOwn";
+import { useUserInfoStore } from "@/stores/useUserInfoStore";
+import { neReg } from "@/utils";
+import { Form, Input, Toast } from "antd-mobile";
+import { FormInstance } from "antd-mobile/es/components/form";
+import { useTranslations } from "next-intl";
+import { FC, Fragment, useRef, useState } from "react";
+
+import "@/styles/deposit.scss";
+interface Props {
+    deposits: DepositsTypes[];
+}
+const DepositData: FC<Props> = (props) => {
+    const { deposits } = props;
+    const t = useTranslations();
+    const userInfo = useUserInfoStore((state) => state.userInfo);
+    const [activeType, setActiveType] = useState<DepositsTypes>(deposits[0]);
+
+    const formInstanceRef = useRef<FormInstance>(null);
+    let [amount, setAmount] = useState<number | undefined>(undefined);
+    const titleChangeHandler = (item: DepositsTypes, index: number) => {
+        setAmount(undefined);
+        setActiveType(item);
+        formInstanceRef.current?.resetFields();
+    };
+
+    const isStrictMode = true;
+
+    const onFinish = (values: any) => {
+        const params = { ...values, channel_id: activeType.id, amount: +values.amount };
+        getUserRechargeApi(params)
+            .then((res) => {
+                formInstanceRef.current?.resetFields();
+                Toast.show({ icon: "success", content: t("code.200"), maskClickable: false });
+                setAmount(undefined);
+                if (res.data.pay_url) {
+                    window.open(res.data.pay_url);
+                }
+            })
+            .catch((error) => {
+                Toast.show({ content: t(`code${error.data.code}`), maskClickable: false });
+            });
+    };
+    const onValuesChange = (changeValues: any) => {
+        if (changeValues.amount) {
+            setAmount(changeValues.amount);
+        }
+    };
+    const amountChange = (value: number) => {
+        formInstanceRef.current?.setFieldValue("amount", value);
+        setAmount(value);
+    };
+    const amountValidator = (rules: any, value: any) => {
+        if (!value) return Promise.reject(new Error(t("form.amount")));
+        if (+value < activeType.min_amount)
+            return Promise.reject(
+                new Error(t("form.amountMinReg", { amount: activeType.min_amount }))
+            );
+        if (+value > activeType.max_amount)
+            return Promise.reject(
+                new Error(t("form.amountMaxReg", { amount: activeType.max_amount }))
+            );
+        return Promise.resolve();
+    };
+    return (
+        <div className="deposit-box">
+            <div className={"flex flex-wrap"}>
+                {deposits.map((item, index) => {
+                    return (
+                        <Fragment key={item.id}>
+                            <p
+                                className="btn-box truncate"
+                                style={{
+                                    borderColor: activeType.id === item.id ? "#ff9323" : "#333",
+                                }}
+                                onClick={() => titleChangeHandler(item, index)}
+                            >
+                                {item.name}
+                            </p>
+                        </Fragment>
+                    );
+                })}
+            </div>
+
+            <Box className={"custom-form"} style={{ padding: 0 }}>
+                <Form
+                    style={{
+                        "--border-bottom": "none",
+                        "--border-top": "none",
+                        "--border-inner": "none",
+                    }}
+                    ref={formInstanceRef}
+                    footer={
+                        <>
+                            <ButtonOwn active>{t("DepositPage.DepositarAgora")}</ButtonOwn>
+                        </>
+                    }
+                    initialValues={userInfo}
+                    onFinish={onFinish}
+                    onValuesChange={onValuesChange}
+                >
+                    {isStrictMode ? (
+                        <>
+                            <Form.Item
+                                name="user_name"
+                                label=""
+                                rules={[{ required: true, message: t("form.usernameReg") }]}
+                            >
+                                <Input placeholder={t("form.username")} />
+                            </Form.Item>
+                            <Form.Item
+                                name="passport"
+                                label=""
+                                rules={[
+                                    { required: true, message: t("form.cardReg"), pattern: neReg },
+                                ]}
+                            >
+                                <Input placeholder={t("form.card")} maxLength={11} type={"text"} />
+                            </Form.Item>
+                        </>
+                    ) : null}
+                    <Form.Item
+                        name="amount"
+                        label=""
+                        rules={[{ required: true, type: "number", validator: amountValidator }]}
+                    >
+                        <Input
+                            placeholder={`${t("DepositPage.Montante")}(BRL): Mín. ${activeType.min_amount}`}
+                            type={"number"}
+                            maxLength={activeType.max_amount}
+                        />
+                    </Form.Item>
+
+                    <div className={"flex flex-col"}>
+                        <div className={"flex-1"}>
+                            <ul className="ul-box">
+                                {activeType.products.map((item, index) => (
+                                    <li
+                                        className={amount == item.amount ? "active" : ""}
+                                        key={index}
+                                        onClick={() => amountChange(item.amount)}
+                                    >
+                                        {!!item.badge && <span className="hot"></span>}
+                                        <div className="amountContent">
+                                            {/* <span className="iconfont icon-unit-brl"></span> */}
+                                            <span className="iconfont">R$</span>
+                                            <span> {item.amount}</span>
+                                        </div>
+                                        <span className="amountTips">
+                                            {t("DepositPage.Oferecer")} 100%
+                                        </span>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    </div>
+                </Form>
+            </Box>
+        </div>
+    );
+};
+
+export default DepositData;

src/app/[locale]/(navbar)/doings/discount/actions.ts

@@ -0,0 +1,8 @@
+"use server";
+import { revalidatePath } from "next/cache";
+
+const actions = async () => {
+    revalidatePath("/profile");
+};
+
+export default actions;

src/app/[locale]/(navbar)/doings/discount/layout.tsx

@@ -0,0 +1,19 @@
+import HeaderBack from "@/components/HeaderBack";
+import { getTranslations } from "next-intl/server";
+import { ReactNode } from "react";
+
+export default async function Layout({
+    children,
+    params: { locale },
+}: {
+    children: ReactNode;
+    params: { locale: string };
+}) {
+    const t = await getTranslations("Header");
+    return (
+        <>
+            <HeaderBack showBack={true} title={t("deposit")} />
+            <main className={"main-header bg-[#24262b]"}>{children}</main>
+        </>
+    );
+}

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

@@ -0,0 +1,27 @@
+import { DepositsTypes } from "@/api/depositsApi";
+import Empty from "@/components/Empty";
+import { server } from "@/utils/server";
+import DepositData from "./DepositData";
+
+const getDepositApi = async () => {
+    return server
+        .request<DepositsTypes[]>({
+            url: "/v1/api/user/user_deposit_config",
+            method: "post",
+        })
+        .then((res) => {
+            if (res.code === 200) return res.data;
+            return [];
+        });
+};
+const Deposit = async () => {
+    const deposits = await getDepositApi();
+    if (!deposits.length) return <Empty />;
+    return (
+        <>
+            <DepositData deposits={deposits} />
+        </>
+    );
+};
+
+export default Deposit;

src/components/Box/RedPacketModal.tsx

@@ -1,8 +1,11 @@
 "use client";
 
-import { lredPacketApi, receiveRedPacketApi, redPacketApi } from "@/api/promo";
+import { receiveRedPacketApi } from "@/api/promo";
+import { useRouter } from "@/i18n";
 import { getToken } from "@/utils/Cookies";
 import { Mask } from "antd-mobile";
+import clsx from "clsx";
+import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { forwardRef, Fragment, useEffect, useImperativeHandle, useRef, useState } from "react";
 import styles from "./redpacked.module.scss";
@@ -252,13 +255,21 @@ const FallAnimation = (props: any) => {
 
 const HbyInfoDetail = (props: any) => {
     const { iconImg, onCloseHby } = props;
+    const router = useRouter();
+    const token = getToken();
+    const handler = () => {
+        if (!token) {
+            router.push("/login");
+        }
+        onCloseHby();
+    };
     return (
         <div
             className={`absolute left-1/2 top-[50%] w-[90%] -translate-x-1/2 -translate-y-1/2 ${styles.promoRules}`}
         >
             {/* <Image src={"/hby/close.png"} alt={"close"} width={25} height={25} onClick={onCloseHby} className={styles.closeIcon}/> */}
             <div onClick={onCloseHby} className={styles.closeIcon}></div>
-            <Image src={iconImg} alt={"detail"} width={672} height={1044} />
+            <Image src={iconImg} onClick={handler} alt={"detail"} width={672} height={1044} />
             {/* <div className={`h-[0.15rem] text-[#ffd800] text-[0.20rem] text-center ${styles.promoTitle}`}>Dinheiro como chuva</div>
       <div className={styles.titleWrap}>
           <span>R$200.00</span>
@@ -335,9 +346,14 @@ const HbyInfo = (props: any) => {
 
 const HbyInfo2 = (props: any) => {
     const { iconImg, onCloseHby, redAmount } = props;
+    const hbyInfoClass = clsx(
+        `${styles.redopen} absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2  bg-no-repeat bg-cover`
+    );
+    const t = useTranslations("packetsPopup");
     return (
         <div
-            className={`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 ${styles.redopen}`}
+            className={hbyInfoClass}
+            style={{ background: `url(${iconImg})`, backgroundSize: "100% 100%" }}
         >
             <Image
                 src={"/hby/close.png"}
@@ -347,12 +363,12 @@ const HbyInfo2 = (props: any) => {
                 onClick={onCloseHby}
                 className={styles.closeIcon}
             />
-            {/* <div onClick={onCloseHby} className={styles.closeIcon}></div> */}
-            <Image src={iconImg} alt={"icon"} width={559} height={687} />
+
+            <div className={styles.title}>{t("title")}</div>
             <div className={styles.cash}>{redAmount}</div>
-            {/* <div className={styles.title}>Chuva de dinheiro</div>
-      <div className={styles.cash}>{redAmount}</div>
-      <div className={styles.tips}>Valor máximo de queda em dinheiro:Cada sessäo de chuva de dinheiro é </div> */}
+            <div className={styles.tips}>
+                {redAmount > 0 ? t("receiveSuccess") : t("receiveWarring")}
+            </div>
         </div>
     );
 };
@@ -362,7 +378,7 @@ type Props = {
 };
 export type RedPacketModalProps = {
     onClose: () => void;
-    onOpen: (index?: number) => void;
+    onOpen: (source: any[], index?: number) => void;
 };
 
 /**
@@ -383,15 +399,17 @@ const RedPacketModal = forwardRef<RedPacketModalProps, Props>(function RedPacket
     const [iconLists, setIconLists] = useState<any>([]);
     // 初始状态为is_end, 展示活动详情页
     const [status, setStatus] = useState<Status>(Status.is_end);
-    const packet = useRef<any>({});
+    const packetCurrent = useRef<any>({});
+    const packets = useRef<any[]>([]);
 
-    const [redAmount, setRedAmount] = useState<any>(0);
+    const [redAmount, setRedAmount] = useState<any>(1);
     const activeIndex = useRef<number>(0);
     const token = getToken();
     useImperativeHandle(ref, () => {
         return {
             onClose: () => setVisible(false),
-            onOpen: (index?: number) => {
+            onOpen: (source, index?: number) => {
+                packets.current = source;
                 if (index !== null && index !== undefined) {
                     activeIndex.current = index;
                 }
@@ -402,41 +420,35 @@ const RedPacketModal = forwardRef<RedPacketModalProps, Props>(function RedPacket
             },
         };
     });
-    useEffect(() => {
-        // getRedPacketInfo();
-    }, []);
 
     const getRedPacketInfo = async () => {
         try {
-            let actList: any = [];
-            if (token) {
-                let redPacketInfo = await lredPacketApi();
-                actList = redPacketInfo.data?.red_packets || [];
-            } else {
-                let redPacketInfo = await redPacketApi();
-                actList = redPacketInfo.data;
-            }
+            let actList = packets.current;
             // 是否有已开始但是没领过的红包
-            let packets = actList
+            let packetsFilter = actList
                 .filter((aItem: any) => {
                     return aItem.is_start && !aItem.is_receive;
                 })
                 .sort((pre: any, next: any) => pre.end_time - next.end_time);
 
             // 有可领取红包
-            if (packets.length > 0) {
-                let current = packets[activeIndex.current];
+            if (packetsFilter.length > 0) {
+                let current = packetsFilter[activeIndex.current];
                 let iconList = JSON.parse(current.icon);
                 // 红包
-                packet.current = current;
+                packetCurrent.current = current;
                 // 有可领取红包
-                setStatus(Status.is_start);
                 setIconLists(iconList);
+                if (!token) {
+                    setStatus(Status.is_end);
+                } else {
+                    setStatus(Status.is_start);
+                }
             } else {
                 // 无可领取红包
                 // 展示最近可领红包详情
                 let packets = actList.sort((pre: any, next: any) => pre.end_time - next.end_time);
-                packet.current = packets[0];
+                packetCurrent.current = packets[0];
                 setIconLists(JSON.parse(packets[0].icon));
                 // 无可领取红包展示详情
                 setStatus(Status.is_end);
@@ -449,8 +461,8 @@ const RedPacketModal = forwardRef<RedPacketModalProps, Props>(function RedPacket
     const onReciveRed = async () => {
         try {
             let paramsData = {
-                id: packet.current?.id,
-                index: packet.current?.index,
+                id: packetCurrent.current?.id,
+                index: packetCurrent.current?.index,
             };
             let receiveRedPacketInfo = await receiveRedPacketApi(paramsData);
             let redNum = receiveRedPacketInfo.data;

src/components/Box/index.tsx

@@ -1,8 +1,10 @@
 "use client";
 import { ActionType } from "@/api/home";
+import { lredPacketApi, redPacketApi } from "@/api/promo";
 import RedPacketModal, { RedPacketModalProps } from "@/components/Box/RedPacketModal";
 import { useRouter } from "@/i18n";
 import { isHttpUrl } from "@/utils";
+import { getToken } from "@/utils/Cookies";
 import { Toast } from "antd-mobile";
 import clsx from "clsx";
 import { CSSProperties, FC, PropsWithChildren, useRef } from "react";
@@ -45,6 +47,19 @@ const openWindow = (url: string) => {
 enum ModalEnum {
     red_packet = "red_packet",
 }
+
+/**
+ * @description 红包雨验证
+ */
+const isStartPacketsHandler = async () => {
+    if (getToken()) {
+        let redPacketInfo = await lredPacketApi();
+        return redPacketInfo.data?.red_packets || [];
+    } else {
+        let redPacketInfo = await redPacketApi();
+        return redPacketInfo.data || [];
+    }
+};
 const Box: FC<PropsWithChildren<Props>> = (props) => {
     const router = useRouter();
 
@@ -86,7 +101,13 @@ const Box: FC<PropsWithChildren<Props>> = (props) => {
                 break;
             case 4:
                 if (actionData === ModalEnum.red_packet) {
-                    RedPacketModalRef.current?.onOpen();
+                    isStartPacketsHandler().then((data) => {
+                        if (data.length) {
+                            RedPacketModalRef.current?.onOpen(data);
+                        } else {
+                            Toast.show("It is under development");
+                        }
+                    });
                 }
                 break;
             case 5:

src/components/Box/redpacked.module.scss

@@ -269,26 +269,25 @@
     text-align: center;
     font-family: 'Arial-BoldMT,Arial';
     width: 1.595rem;
-    margin-top: .4rem
+    margin-top: 0.2rem
   }
   .cash{
-    position:absolute;
-    top:40%;
     color: #8c0c04;
-    text-align: center;
     font-family: "Arial-BoldMT,Arial";
     font-weight: 700;
-    font-size: .55rem
+    font-size: .55rem;
+    flex: 1;
+    display: flex;
+    align-items: center;
   }
   .tips{
-    margin-top: .3rem;
     width: 1.545rem;
     color: #ffd800;
     text-align: center;
     font-family:" Arial-BoldMT,Arial";
     font-size: .1rem;
     line-height:.12rem;
-    transform: scale(0.96);
+    margin-bottom: 0.3rem;
   }
 
 }

src/components/Card/GroupCard.tsx

@@ -14,7 +14,7 @@ const GroupCard: FC<GroupProps> = (props) => {
     const { col = 3, row = 1, gapX = 8, data, ...other } = props;
     const cls = clsx(
         "grid",
-        `grid-cols-${col} grid-rows-${row} gap-y-4 gap-x-[0.2rem]  justify-between`
+        `grid-cols-${col} grid-rows-${row} gap-y-4  gap-x-[0.2rem]  justify-between`
     );
     return (
         // <div className={"flex flex-wrap justify-between gap-y-4"}>

src/styles/deposit.scss

@@ -0,0 +1,144 @@
+.deposit-box {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  padding: 0.1rem .18rem;
+  //background-color: #1f1f1f;
+  //display: flex;
+  //flex-direction: column;
+
+  .img-box {
+    width: .8rem;
+    height: .27rem;
+    margin: .12rem 0;
+    background: url('/img/pixImg.png') no-repeat center;
+    background-size: 100% 100%;
+  }
+
+  .btn-box {
+    margin: .1rem 0;
+    height: .3rem;
+    margin-right: .06rem;
+    width: .98rem !important;
+    flex-shrink: 0;
+    border-radius: .05rem;
+    line-height: .28rem;
+    align-items: center;
+    background: transparent;
+    border: .01px solid #333;
+    //#ff9323
+    border-radius: .05rem;
+    color: #868686;
+    font-size: .1rem;
+    line-height: .28rem;
+    overflow: hidden;
+    cursor: pointer;
+    text-align: center;
+    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Segoe UI, Arial, Roboto, PingFang SC, miui, Hiragino Sans GB, Microsoft Yahei, sans-serif;
+  }
+  .amount-box {
+    width: 100%;
+    margin: .05rem 0;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: .13rem;
+      color: #fff;
+    }
+    input {
+      font-size: .16rem;
+      width: 100%;
+      margin: .12rem 0 .04rem;
+      background-color: #494949;
+      border-radius: .05rem;
+      height: .4rem;
+      color: #868686;
+      text-indent: .14rem;
+      outline: none;
+      &::placeholder {
+        color: #868686;
+      }
+    }
+  }
+  .ul-box {
+    width: 100%;
+    height: auto;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    //margin-top: .09rem;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    li {
+      width: 30%;
+      height: .48rem;
+      border-radius: .06rem;
+      color: #fff;
+      font-size: .18rem;
+      background: #494949;
+      display: flex;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+      flex-direction: column;
+      -webkit-box-pack: center;
+      -ms-flex-pack: center;
+      justify-content: center;
+      margin-top: .12rem;
+      position: relative;
+      overflow: hidden;
+      cursor: pointer;
+      &.active {
+        background-color: #ff6a01;
+        .hot {
+          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABBCAYAAABlwHJGAAAFSUlEQVR4nOWce2gcRRzHPycBH7GiIqGif1Sw1gpqQJEqUhqtNa2V1IqPiIK0VoOxPiu1qH+JWLDaQpVCW4pFJdb4KhRqUHwlVCgWo5VWDaZoS0PiI9Y0JtbHyK8zy20uu3ezz7vb+8Kyub1ZfjOfm99vfjM7m5xSCh+dCNwILASuBM4HTvArXOV6qs6j/vXAQ8ByYGpGG+7WKmB1IYhZQAcwrbx1S02PA2vEmBvEAuAd4xJZl8SDx4C1Tjsdn78Y6CwLhN+H0raojOuvdV8UEDlgI3BK2jWipxOenAoHvk7LokBoB9YXfiEg5pjYkK4EQsdt2uRvA2lBaAM2eH0pMaK1rBCW7ITLrk/a4n/AMmCLX4G61HtD+hD+BZYCW4sVqkt1qHRDEI39kbRFgXA38FqpghIjpiRdm+NyQ5huzvJZricjgXCXDQRSS5kL3eHhDmhs15+TgfGPiX0dtjekA+Lk0/TZHROWrU8KxjHgdpMX2UulpeFBb0MbH1Dq/pw+ut+MWpm/lFItMpEMesjs03f6mZo2LYfel7W11m1w9S1he8LNwI4wNycHQrLFz9+CoT6oPwtmzobLF8BJ9d7l3TBaNsG8pUGsjQOLgZ1hqxs/iPFRePWJfKPcmnIBLHzG/xd3w2jvgYuusrE4BtwEdEWpdvwg1rVC3zY4uwnmtMGZ58Ch/fDR8zDyvS5z3RpY9Kj3/QJDeo+de/wp/Qf4MHK9Yw2VXZt10JMAWKixo0q9/nScgXFUKdUUJjB6HfGBkIaunKEb6TdCiBwYUrZYueIaUUrNjguCHPHlEcODuuuLS5ze4F9u8UpdRsp+82kYS5KXzwc+i1DbSYoPxPhRu3Iyalxxh/57f+C2HDEQeoLeWErhQUgmKIHN0RlmnXfg49ILLefO1OfRX4JYFAjzgF2h6ltC4UBIQyUtlqHOgSHu4Eymtj9X/P6xEX1umG5rcRi4Ftgdqr4WCgfivEt0Bihyw2hZpc8yfL73ov/93a/oc2OzjbVfgbnAnlB1tVWkkUKGQGc4dIbMd1+YeO3wD/nyMko4cwuvIXayflZKNcY5Ovgd0RMq9xRbZpMyq5Te8MGKfBkZJU5t0D0Fsx7Rttk/3dYaMj1hb0y/eVF5PemaLIkJ4g5ecqbYOG5iptiXztWxQhovARSTYs+6F5rvKwVhELgG2Jdw+/Oy7v5emeAX7090g0I3cdyh/yt9SNJVWoeVUhem4Q7uozQIv/UCNwTnulfMCKZDSqkZaUOwjxGF6wXiDlvm5z+7J0heMcNOB80Q2ZdM3y8u+2DphuHIbxHFgWG/yPIT0AT0R29SSAXquH5xwEsSE+x0QCk1rRzuENw13IpnWc1Rvxkdfkzsl7ZU8MwyvtXnPvPctewQCJ1iR4fxnYkJB0PZT0DRMku3m6zo9U+6JupbcYdcLjcQNamNU9FT7GBrjPsMBMkcyRYIe+01c4fUt8jYKK3tgr0mWapICFhPuqLpS1nAN+sKFauke8Qe0xMqGgIJg9htIAwnaCM2JQVil1loPVKGNoVSEiB6zJJ71UAggWDZbXbwWj7kqBzF2SM+AZqrEQIxgpCn0TeYp9NVqThAdJlH81ULgRhAyA6VRdUOgYggdhgI4zHWp2wKC2K72bh1LAMMjisMiLeBW7MEgRAgOs2O1kxBICCINwyEvxOsT9lkC0I2dt9pNnpnUjYgtpqt/pmFgAUIeeNlSdYhUAKEvPB2j3kNKPPyA7HBvAhWOcvMCcsLxEvmlcCagYAHiHXAg7UGgQIQ8o70I7UIAReI1eaF8ZqVgHjW/OuA2hXwP8DQnuAIx+ICAAAAAElFTkSuQmCC);
+          width: .33rem;
+          height: .325rem;
+          background-size: 100% 100%;
+        }
+        .amountTips {
+          color: #fff;
+        }
+      }
+      .hot {
+        display: inline-block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABBCAYAAABlwHJGAAAFWklEQVR4nOWca2gdRRTHf5GApWmxImr0g2i1gkIVlfoqitUa21oxKpa0KD5aoeKLWvpBqH4pQvHRFqwE1CoBS4pBabGgqdZHW/MhEqsG6iMa+0BrqxKjMQ31ETmZs2S4d+/dubuzex/5Q9jHnb0z87tnzjkzu5u60QcppBOBW4CFwFXAecAJBUtXt1bXhzS/AXgMeARorNGO23oCWJsL4kqgHTi7vG3LTKuA56QyG8QC4C0dErWuUWAlsD7oZzDmZwIdZYFw5vVZ1ziqQ3+9fVJA1AEvAZOzbhHNr8DqnXDJQ1nVKBCkshdyP5ChcZ36hmwlEJqWmipPnZ4VhOX6o+dJQCwuK4St62DHyrRr/A94AHi1UIH6zK0hewj/AlJhW7FC9ZmGShuCaPJJadcoEO4FXo8qKM5yatqtGZMN4XC/2cqxnE9HAuFuFwhkljLnDoc158IPX5rjdGD8o76v3fWCbEAMD5qt7ROevTgtGMeBFs2LnCWTLgkr6UsSp58+yK9m1RdwzkVmf8cm2LosKYRFwLZSL8xuNhkGAa+WIRDuiAOBVC1CssXZS+DkRhgZgr5PYecz8Oe34eVty9jdAe2LSqltBLgdeCduc/2DmHo+LO8Y75Stkb9g15bC5m/D2PwUfLLGpcZjwG1AZ5Jm+wfx5PdwxnT4/Sh0vw2/HICzZsKsBTCpwZTp6YRN88KvFxhiPW6+Yhi4FXg/abP9glj8BlxzpxnzMvZtiaXc8xpceLU5mdwxDuvq2YceWu7RWUpH5VcXbV6R/7n4ho2zYV+XOb62JckUfAiY7wsCXkE0XmpMX4ZEoQgharvPlJGyly+JU9MfCmFXgtbmyR+IKae4lRPL6P3Y7M+YVWotgwphT6kXRik+CIn34tgCHfnK7Ew7LXqh5WCv2U6aUkqNAqEJ6IrV3gjFAyEdleRHQl0AQ4ZDMJla+Hjx6xumme3Az641DgA3AN2x2uugeCD2vmi8vsiGsX2d2Ur4XPpu4euvaNbvKVJmXL8BcyXoxmqro+IPDQl9uTAEUI/mNZfdZM7NaBm/RqKEnBNQEmKjE6ZfFcJnXnpbRMnzCHuKHeQPYg0CIpBEiWNDBgC6HrFhfuF02+ioQuhN1D5HuVlEMecXTLGxLEOyxpcfHvcZ4kAFgqTYYjHREI4Ac7KCgJNFBL94WCbY9Dw0q2MUawjmCXZmKcPh9AvM/nfvRQEQHQYk0/o6Vo9iKtoiglifO0W2IQgk6XiYA5VoIr5D/qIh/KiWkCkEnH1E7uKJDAcbgm0pYT7DTYc0RPZ576WDwu6G50s6E8CwV6HDhktwLOVkFummg2oJ/WVgMKbSooZtGVG/tjhYGQ7R2q8Q9ifsSyKVlkfYy2oCpNiymhuEfr3lWFYIxEqo/K0x9imEA3G/wKfiZZbJYXyjw+FQVh2NUvwUOxeG+619CY1z6lrHQmXFKNl6RABDooebT9gnw6GudSxpqihld4PHpMtzdQ5RccrqBs/nmixVJAScE6pk2gvcqOsKFau0LaJHLaGiIZAyiG6FMJBiHd6UFoguXWgddChbEUoDxB5dcq8aCKTgLHfrE7xDnr83dfm0iI+AedUIAY8g5G70zXpjtirlA0Sn3pqvWgh4ACFPqDRXOwQSgtiuEEY8tqdsigtimz64dbwGGIwpDog39RG+moFADBAd+kRrTUGgRBBbFMLfKbanbHIFIQ9236UPetekXEC06aP+NQsBBxDyxsv9tQ6BCBDy7tMyfQ2o5lUIRKu+CJbVwm7ZFQZio74SOGEgEAJiA/DoRINADgh5R3rFRISABWKtvjA+YSUgntZ/HTBxBfwPUDWaaJmlFlUAAAAASUVORK5CYII=);
+        width: .33rem;
+        height: .325rem;
+        background-size: 100% 100%;
+      }
+      .amountContent {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .iconfont {
+          margin-right: .03rem;
+          font-size: .14rem;
+          font-family: SWISSC-BT;
+          color: #fff;
+          font-weight: bold;
+          font-style: oblique;
+        }
+      }
+      .amountTips {
+        font-size: .1rem;
+        color: #ff9500;
+      }
+    }
+  }
+  .topUp {
+    width: 100%;
+    margin: .24rem 0 .4rem;
+  }
+}