feat: 修改BTN状态

src/api/activity.ts

@@ -1,3 +1,4 @@
+import { BtnTypeEnum } from "@/enums";
 import { server } from "@/utils/client";
 
 export interface GetJackpotRequestParams {}
@@ -97,6 +98,7 @@ export interface ContinuousCfgItem {
     target_num: number;
     target_reward: number;
     isCanClaim?: boolean;
+    btnType?: BtnTypeEnum;
 }
 
 export interface ContinuousStageItem {

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

@@ -175,7 +175,7 @@ const DepositData: FC<Props> = (props) => {
         }
 
         return false;
-    }, [shopInfo]);
+    }, [btns, formInput]);
 
     // useLayoutEffect(() => {
     //     getDepositApi().then((data) => {

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

@@ -33,7 +33,9 @@ const Deposit = () => {
         const res = await getShopListApi();
         if (res?.code === 200 && res?.data) {
             setShopTypeList(res?.data || []);
-            doChangeChannel(res?.data[actIdx].pay_channel[0]);
+            if (res?.data[actIdx]?.pay_channel[0]) {
+                doChangeChannel(res?.data[actIdx]?.pay_channel[0]);
+            }
         }
     };
 

src/app/[locale]/(doings)/continuous/page.module.scss

@@ -336,9 +336,14 @@
         display: flex;
         align-items: center;
         justify-content: center;
+        text-align: center;
+        line-height: 1;
         &.disabled {
             background-image: url("/continuous/btn1.png");
         }
+        &.rechargebtn {
+            background-image: url("/continuous/btn3.png");
+        }
     }
 }
 .canGet {

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

@@ -10,6 +10,7 @@ import {
 } from "@/api/activity";
 import CutDown from "@/components/CutDown";
 import GlobalNotify from "@/components/ModalPopup/GlobalNotifyModal";
+import { BtnTypeEnum, BtnTypeMap } from "@/enums";
 import { useRouter } from "@/i18n/routing";
 import { formatAmount } from "@/utils/index";
 import { Toast } from "antd-mobile";
@@ -64,9 +65,16 @@ const DayItem = ({
         }
     };
 
+    // const btnType = React.useMemo(() => {
+    //     if (!data) return BtnTypeEnum.DISABLED;
+    //     if (data.is_sign === 0 && data.is_suss === 0) return BtnTypeEnum.DEPOSITE;
+    //     if (data.isCanClaim) return BtnTypeEnum.CANCLAIM;
+    //     return BtnTypeEnum.DISABLED;
+    // }, [data]);
+
     return (
         <div>
-            {data.id >= 2 && data.isCanClaim && (
+            {data.id >= 2 && data.btnType === BtnTypeEnum.DEPOSITE && (
                 <div className="mb-[.1rem] flex flex-row justify-center">
                     <div className={styles.canGet}>Grande Prêmio Disponível</div>
                 </div>
@@ -97,11 +105,13 @@ const DayItem = ({
                         </div>
                         <div
                             className={clsx(styles.premioItemBtn, {
-                                [styles.disabled]: !data.isCanClaim,
+                                [styles.disabled]: data.btnType === BtnTypeEnum.DISABLED,
+                                [styles.rechargebtn]: data.btnType === BtnTypeEnum.DEPOSITE,
                             })}
                             onClick={doClaim}
                         >
-                            {data.is_sign === 0 ? "Recebido" : "Receber"}
+                            {data.btnType != undefined && BtnTypeMap.get(data.btnType)}
+                            {/* {data.is_sign === 0 ? "Recebido" : "Receber"} */}
                         </div>
                     </div>
                 </div>
@@ -171,7 +181,6 @@ const Page = () => {
         }
         const result: StageItem[] = stags
             .map((item) => {
-                console.log(112233, item);
                 return {
                     ...item,
                     ...cfg1[item.id],
@@ -236,15 +245,29 @@ const Page = () => {
         if (!data?.list?.config_list) return [];
         const result = [] as ContinuousCfgItem[];
         data?.list?.config_list.forEach((item) => {
-            if (
-                item.is_sign === 0 ||
-                item.is_suss === 1 ||
-                !(item.start_at * 1000 < Date.now() && item.end_at * 1000 > Date.now())
-            ) {
-                item.isCanClaim = false;
-            } else {
-                item.isCanClaim = true;
+            if (item.is_sign === 1 && item.is_suss === 0) {
+                if (item.start_at * 1000 < Date.now() && item.end_at * 1000 > Date.now()) {
+                    item.btnType = BtnTypeEnum.CANCLAIM;
+                } else {
+                    item.btnType = BtnTypeEnum.DISABLED;
+                }
+            }
+            if (item.is_sign === 0 && item.is_suss === 0) {
+                item.btnType = BtnTypeEnum.DEPOSITE;
             }
+            if (!item.btnType) {
+                item.btnType = BtnTypeEnum.DISABLED;
+            }
+
+            // if (
+            //     item.is_sign === 0 ||
+            //     item.is_suss === 1 ||
+            //     !(item.start_at * 1000 < Date.now() && item.end_at * 1000 > Date.now())
+            // ) {
+            //     item.isCanClaim = false;
+            // } else {
+            //     item.isCanClaim = true;
+            // }
             result.push(item);
         });
         return result.sort((a, b) => a.days - b.days);
@@ -259,7 +282,11 @@ const Page = () => {
             Toast.show({ content: "Missing activity ID" });
             return;
         }
-        if (!data.isCanClaim) {
+        if (data.btnType === BtnTypeEnum.DISABLED) {
+            return;
+        }
+        if (data.btnType === BtnTypeEnum.DEPOSITE) {
+            router.push("/deposit");
             return;
         }
         try {

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

@@ -1,6 +1,7 @@
 "use client";
 import { claimActivityReward, getJackpotInfo, GetJackpotResponse } from "@/api/activity";
 import GlobalNotify from "@/components/ModalPopup/GlobalNotifyModal";
+import { BtnTypeEnum, BtnTypeMap } from "@/enums";
 import { useRouter } from "@/i18n/routing";
 import { formatAmount } from "@/utils";
 import { Toast } from "antd-mobile";
@@ -12,36 +13,6 @@ import { useSearchParams } from "next/navigation";
 import React from "react";
 import styles from "./style.module.scss";
 
-// const tabCftg = React.useMemo(() => {
-//     return [
-//         {
-//             image: "/jackpot/2.png",
-//             text: "Dia 2",
-//             key: 2,
-//         },
-//         {
-//             image: "/jackpot/3.png",
-//             text: "Dia 3",
-//             key: 3,
-//         },
-//         {
-//             image: "/jackpot/7.png",
-//             text: "Dia 7",
-//             key: 7,
-//         },
-//         {
-//             image: "/jackpot/15.png",
-//             text: "Dia 15",
-//             key: 15,
-//         },
-//         {
-//             image: "/jackpot/30.png",
-//             text: "Dia 30",
-//             key: 30,
-//         },
-//     ];
-// }, []);
-
 const Jackpot: React.FC = () => {
     const router = useRouter();
     const searchParams = useSearchParams();
@@ -91,9 +62,22 @@ const Jackpot: React.FC = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    const isDisabled = React.useMemo(() => {
-        if (!(infoData?.reward && infoData?.reward > 0)) return true;
-        return !(curTabData?.is_unlock && !curTabData.is_suss);
+    // const isDisabled = React.useMemo(() => {
+    //     if (!(infoData?.reward && infoData?.reward > 0)) return true;
+    //     return !(curTabData?.is_unlock && !curTabData.is_suss);
+    // }, [curTabData, infoData]);
+
+    const btnType = React.useMemo(() => {
+        if (!(infoData?.reward && infoData?.reward > 0)) {
+            return BtnTypeEnum.DISABLED;
+        }
+        if (curTabData?.is_unlock && !curTabData.is_suss) {
+            return BtnTypeEnum.CANCLAIM;
+        }
+        if (!curTabData?.is_unlock && !curTabData.is_suss) {
+            return BtnTypeEnum.DEPOSITE;
+        }
+        return BtnTypeEnum.DISABLED;
     }, [curTabData, infoData]);
 
     const getInfoData = async () => {
@@ -150,7 +134,11 @@ const Jackpot: React.FC = () => {
     };
 
     const doClaim = async () => {
-        if (isDisabled) return;
+        if (btnType === BtnTypeEnum.DISABLED) return;
+        if (btnType === BtnTypeEnum.DEPOSITE) {
+            router.push("/deposit");
+            return;
+        }
         try {
             const res = await claimActivityReward({
                 activity_id: Number(activeId),
@@ -214,7 +202,7 @@ const Jackpot: React.FC = () => {
                                     key={key}
                                     onClick={() => setActKey(Number(key))}
                                 >
-                                    <img src={images[idx]} />
+                                    <img src={images[idx]} alt="" />
                                     <span>Dia {key}</span>
                                 </div>
                             );
@@ -297,11 +285,18 @@ const Jackpot: React.FC = () => {
                 <div className={clsx("mt-[.2rem] flex flex-row justify-center")}>
                     <div
                         className={clsx(styles.btn, {
-                            [styles.disabled]: isDisabled,
+                            [styles.disabled]: btnType === BtnTypeEnum.DISABLED,
+                            [styles.recharge]: btnType === BtnTypeEnum.DEPOSITE,
                         })}
                         onClick={doClaim}
                     >
-                        <span className={clsx("mt-[.1rem] text-[.2rem] font-[900]")}>RECEBER</span>
+                        <span className={clsx("text-[.14rem] font-[900]")}>
+                            {BtnTypeMap.get(btnType)}
+
+                            {/* {btnType === BtnTypeEnum.DISABLED && "Recompensa Recebida"}
+                            {btnType === BtnTypeEnum.CANCLAIM && "Receber Recompensa"}
+                            {btnType === BtnTypeEnum.DEPOSITE && "Recarregar"} */}
+                        </span>
                     </div>
                 </div>
                 <div className={clsx("ml-[.14rem] mr-[.14rem] mt-[.2rem]")}>

src/app/[locale]/(doings)/jackpot/style.module.scss

@@ -135,12 +135,23 @@
         background-repeat: no-repeat;
         background-size: 100% auto;
         background-position: left top;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         text-align: center;
-        padding-top: 0.08rem;
         cursor: pointer;
+        word-break: break-word;
+        box-sizing: border-box;
+        padding-left: 0.1rem;
+        padding-right: 0.1rem;
+        padding-bottom: 0.3rem;
+        line-height: 1.2;
         &.disabled {
             background-image: url("/jackpot/button_disabled.png");
         }
+        &.recharge {
+            background-image: url("/jackpot/button_deposite.png");
+        }
     }
     .textStroke {
         -webkit-text-stroke: 1px red;

src/enums/index.tsx

@@ -0,0 +1,12 @@
+export enum BtnTypeEnum {
+    "DISABLED",
+    "DEPOSITE",
+    "CANCLAIM",
+    "CLAIMED",
+}
+
+export const BtnTypeMap = new Map<BtnTypeEnum, string>([
+    [BtnTypeEnum.DISABLED, "Recompensa Recebida"],
+    [BtnTypeEnum.DEPOSITE, "Recarregar"],
+    [BtnTypeEnum.CANCLAIM, "Receber Recompensa"],
+]);