fix: 增加领取时间限制

messages/br.json

@@ -267,6 +267,7 @@
     "beforeTips": "Periodo",
     "cashbackStatus": "VIP cashback statuses",
     "rules": "TERMOS E REGRAS",
+    "receiveButton": "Reivindicar Agora",
     "rulesFirst": "1. O cashback semanal é dado como recompensa todas as semanas.",
     "rulesSecond": "2. O período sobre o qual é calculado o cashback semanal vai de segunda-feira às 00:00 a domingo às 23:59.",
     "rulesThird": "3. Horário de solicitação do cashback: De segunda-feira da próxima semana 06:00 a sexta-feira 23:59, expirará se não for resgatado.",

messages/en.json

@@ -267,7 +267,7 @@
     "afterTips": "Time of claim",
     "beforeTips": "Period",
     "cashbackStatus": "VIP cashback statuses",
-
+    "receiveButton": "Require Now",
     "rules": "TERMS AND RULES",
     "rulesFirst": "1. The weekly cashback is given as a reward every week.",
     "rulesSecond": "2. The period for which weekly cashback is calculated goes from Monday to Sunday at 11:59 p.m.",

messages/zh.json

@@ -266,6 +266,7 @@
     "afterTips": "返现时间",
     "beforeTips": "期间",
     "cashbackStatus": "VIP 返现状态",
+    "receiveButton": "立即领取",
     "rules": "条款和规则",
     "rulesFirst": "1.每周返现作为每周的奖励。",
     "rulesSecond": "2.计算每周现金返还的时间为周一至周日晚上11:59。",

src/app/[locale]/(navbar)/cashback/@cashbackInfo/Week.tsx

@@ -40,15 +40,7 @@ const Page = async (props: Props) => {
                     {timeFormat(cashbackInfo.last_period.end_time, local)}
                 </span>
             </p>
-            <Extract />
-
-            <div className={"mt-[0.05rem]"}>
-                <p> {t("afterTips")} </p>
-                <p>
-                    {timeFormat(cashbackInfo.next_period.start_time, local)} ~{" "}
-                    {timeFormat(cashbackInfo.next_period.end_time, local)}
-                </p>
-            </div>
+            <Extract cashbackInfo={cashbackInfo} local={local} />
         </Box>
     );
 };

src/app/[locale]/(navbar)/cashback/@cashbackInfo/components/Extract.tsx

@@ -1,21 +1,58 @@
 "use client";
+import { CashbackTypes } from "@/api/cashback";
 import ButtonOwn from "@/components/ButtonOwn";
 import { server } from "@/utils/client";
+import { timeFormat } from "@/utils/methods";
+import { Toast } from "antd-mobile";
+import { useAnimate } from "framer-motion";
+import { useTranslations } from "next-intl";
+interface Props {
+    local: string;
+    cashbackInfo: CashbackTypes;
+}
+const Extract = (props: Props) => {
+    const { local, cashbackInfo } = props;
+    const [scope, animate] = useAnimate();
 
-const Extract = () => {
+    const t = useTranslations("cashback");
     const getCashbackGiveApi = () => {
-        return server.post({
-            url: "/api/v1/front/activity_cash_give",
-        });
+        if (cashbackInfo.status !== "pending") {
+            animate(
+                scope.current,
+                { color: ["#000", "#ffaa30", "#000"] },
+                {
+                    duration: 0.6,
+                    repeat: 2,
+                }
+            );
+            return;
+        }
+        return server
+            .post({
+                url: "/v1/api/front/activity_cash_give",
+            })
+            .then((res) => {
+                if (res.code === 200) Toast.show("Success");
+            });
     };
     return (
-        <ButtonOwn
-            active={true}
-            style={{ height: "0.28rem", lineHeight: "0.28rem" }}
-            callbackFun={getCashbackGiveApi}
-        >
-            <span className={"text-[0.1rem]"}>Reivindicar Agora</span>
-        </ButtonOwn>
+        <>
+            <ButtonOwn
+                active={true}
+                style={{ height: "0.28rem", lineHeight: "0.28rem" }}
+                callbackFun={getCashbackGiveApi}
+            >
+                <span className={"text-[0.1rem]"}>{t("receiveButton")}</span>
+            </ButtonOwn>
+
+            <div className={"mt-[0.05rem]"} ref={scope}>
+                <p> {t("afterTips")} </p>
+                <p>
+                    {timeFormat(cashbackInfo.next_period.start_time, local)} ~{" "}
+                    {timeFormat(cashbackInfo.next_period.end_time, local)}
+                </p>
+            </div>
+        </>
     );
 };