소스 검색

fix: 修改签到活动路由

ansoni 3 달 전
부모
커밋
0b64e8d356
4개의 변경된 파일234개의 추가작업 그리고 21개의 파일을 삭제
  1. 10 21
      .env.local
  2. BIN
      public/sign.zip
  3. 22 0
      src/app/[locale]/(doings)/signinActivity/layout.tsx
  4. 202 0
      src/app/[locale]/(doings)/signinActivity/page.tsx

+ 10 - 21
.env.local

@@ -1,24 +1,13 @@
-# 环境
 #baseurl
-# NEXT_PUBLIC_BASE_URL=http://192.168.0.71:8800
-NEXT_PUBLIC_BASE_URL=http://192.168.0.84:8800
-# NEXT_PUBLIC_BASE_URL=https://3rd-api.tiktokjakjkl.icu
+NEXT_PUBLIC_BASE_URL=https://hk-api.tiktokjakjkl.icu
 #share link
-NEXT_PUBLIC_SHARE_URL=http://192.168.0.84:3000
-
+NEXT_PUBLIC_SHARE_URL=https://hk-site.tiktokjakjkl.icu
 #firebase
-NEXT_PUBLIC_FIREBASE_APIKEY=AIzaSyDAWORGKhdyzb5KeqTi535VmD5gN2Cdle8
-NEXT_PUBLIC_FIREBASE_AUTHDOMAIN=bcwin-a99b1.firebaseapp.com
-
-
-
-
-NEXT_PUBLIC_FIREBASE_PROJECTID=bcwin-a99b1
-NEXT_PUBLIC_FIREBASE_STORAGEBUCKET=bcwin-a99b1.appspot.com
-NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID=1055413612814
-NEXT_PUBLIC_FIREBASE_APPID=1:1055413612814:web:7a563237de8e43849d275f
-
-
-
-NEXT_PUBLIC_FIREBASE_MEASUREMENTID=G-467M2BYJMS
-NEXT_PUBLIC_FIREBASE_KEYS=BAOsT7kii-ctLzGrgXe_wYhfuxlme1v4njnD0uPSKp3DpSnrUa2e709b9dRaeYVU7jF_qIx1y9tEv0CvilDCdnM
+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

BIN
public/sign.zip


+ 22 - 0
src/app/[locale]/(doings)/signinActivity/layout.tsx

@@ -0,0 +1,22 @@
+import HeaderBack from "@/components/HeaderBack";
+
+export default function Layout({
+    children,
+    params: { locale },
+}: {
+    children: React.ReactNode;
+    params: { locale: string };
+}) {
+    return (
+        <>
+            <HeaderBack
+                showBack={true}
+                className={"bg-[#0d1933] text-[white]"}
+                title={"Sign in and get the gift"}
+            />
+            <main className={"main-header bg-[url(/signDetails/bg3.png)] text-[#000]"}>
+                {children}
+            </main>
+        </>
+    );
+}

+ 202 - 0
src/app/[locale]/(doings)/signinActivity/page.tsx

@@ -0,0 +1,202 @@
+"use client";
+/* eslint-disable @next/next/no-img-element */
+import { claimActivityReward } from "@/api/activity";
+import { UserVipInfo } from "@/api/user";
+import GlobalNotify from "@/components/ModalPopup/GlobalNotifyModal";
+import { BoxListCom } from "@/components/ModalPopup/SignInModal";
+import { useSignStore } from "@/stores/useSignStore";
+import { formatAmount } from "@/utils";
+import { server } from "@/utils/client";
+import { Toast } from "antd-mobile";
+import BigNumber from "bignumber.js";
+import { useTranslations } from "next-intl";
+import { useSearchParams } from "next/navigation";
+import { FC, useEffect, useMemo, useState } from "react";
+
+const getVipApi = async () => {
+    return server
+        .request<UserVipInfo>({
+            url: "/v1/api/user/user_vip_info",
+            method: "POST",
+        })
+        .then((res) => {
+            if (res.code === 200) return res.data;
+        });
+};
+
+const SignIn: FC = () => {
+    const searchParams = useSearchParams();
+    const activity_id = Number(searchParams.get("activity_id"));
+    const t = useTranslations("signInPage");
+    const tCode = useTranslations();
+    const [vipInfo, setVipInfo] = useState<UserVipInfo | null>(null);
+    const [visible, setVisible] = useState(false);
+    const [amount, setAmount] = useState({});
+
+    useEffect(() => {
+        getVipInfo();
+    }, []);
+    const getVipInfo = async () => {
+        const vipInfoRes = await getVipApi();
+        if (vipInfoRes) {
+            setVipInfo(vipInfoRes);
+        }
+    };
+
+    const { getSignData, signData } = useSignStore((state) => ({
+        signData: state.signData,
+        getSignData: state.getSignData,
+    }));
+    useEffect(() => {
+        getSignData({ activity_id });
+    }, []);
+
+    const curData = useMemo(() => {
+        if (!signData || !signData.list || signData.cur_num == undefined) return null;
+        return signData.list[signData.cur_num];
+    }, [signData]);
+
+    const doClaim = async () => {
+        if (!curData) return null;
+        try {
+            const res = await claimActivityReward({
+                activity_id,
+                id: curData.id as number,
+            });
+            if (res.code === 200 && res?.data?.code === 1) {
+                getSignData({ activity_id });
+                if (res?.data?.reward) {
+                    const amountObj: any = {};
+                    res?.data?.reward.forEach((item: any) => {
+                        amountObj[`coin_${item.coin_type}`] = formatAmount(item.amount);
+                    });
+                    //extra_reward
+                    res?.data?.reward.forEach((item: any) => {
+                        amountObj[`coin_${item.coin_type}`] = formatAmount(
+                            new BigNumber(amountObj[`coin_${item.coin_type}`] || 0)
+                                .plus(item.amount)
+                                .toString()
+                        );
+                    });
+                    setAmount(amountObj);
+                }
+
+                setVisible(true);
+            } else {
+                throw new Error(tCode(`code.400`));
+            }
+        } catch (error: any) {
+            if (error) {
+                Toast.show({
+                    content: error.message || error.toString(),
+                    maskClickable: false,
+                });
+            }
+        }
+    };
+
+    return (
+        <>
+            <div className="relative h-[100%] w-[100%]">
+                {/* 主题图片及背景 */}
+                <div className="relative h-[3.1863rem]">
+                    <img
+                        src="/signDetails/themeBg.png"
+                        alt=""
+                        className="absolute h-[100%] w-[100%]"
+                    />
+                    <div className="relative top-[-0.3363rem] z-50 flex h-[3.0591rem] justify-center">
+                        <img src="/signDetails/theme.png" alt="" className="h-[100%]" />
+                    </div>
+                    <div className="absolute bottom-[0.2136rem] z-50 h-[.3636rem] w-[100%]">
+                        <img src="/signDetails/vip_bg.png" alt="" className="h-[100%] w-[100%]" />
+                        <div className="absolute top-0 h-[100%] w-[100%] px-[0.25rem] text-[white]">
+                            <img
+                                src="/signDetails/vip.png"
+                                alt=""
+                                className="absolute top-[10%] h-[80%]"
+                            />
+                            <div className="relative left-[10%] h-[100%]">
+                                <p className="h-[50%] text-[0.12rem] font-bold leading-[0.2rem]">
+                                    VIP {vipInfo?.vip_level || 0}
+                                </p>
+                                <p className="h-[50%] text-[0.1rem] font-bold leading-[0.12rem]">
+                                    quanto maior o nível VlP, mais abundantes s?o as recompensas
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {/* 活动背景 */}
+                <div className="absolute top-[2.9727rem] w-[100%]">
+                    {/* 右上角文本 */}
+                    <div className="absolute right-[0.1rem] top-0 z-50 h-[0.32rem] w-[20%] text-center text-[0.11rem] font-bold text-[white]">
+                        <p className={"h-[0.16rem]"}>
+                            {signData?.cur_num ? signData?.cur_num + 1 : 0}
+                        </p>
+                        <p className={"h-[0.16rem] text-[yellow]"}>
+                            Day {signData?.list?.length || 0}
+                        </p>
+                    </div>
+                    <img
+                        src="/signDetails/bg3.png"
+                        alt=""
+                        className="z-1 absolute h-[100%] w-[100%]"
+                    />
+                    {/* 免费盒子 */}
+                    <div className="mt-[0.4227rem]">
+                        <BoxListCom type="page" />
+                    </div>
+                    {/* 充值盒子 */}
+                    {/* <div className="h-[1.3273rem]">
+                        <PayBoxList type="page" />
+                    </div> */}
+                    {/* 签到按钮 */}
+                    <div
+                        className={"relative mt-[0.25rem] flex h-[.6045rem] justify-center"}
+                        onClick={doClaim}
+                    >
+                        <img src="/sign/button.png" className={"h-[100%]"} alt="" />
+                        <span className="absolute text-[0.16rem] font-bold leading-[0.375rem] text-[white]">
+                            Sign-in
+                        </span>
+                    </div>
+                    {/* 活动描述文本背景 */}
+                    <div className="relative flex h-[4.4rem] justify-center">
+                        <div className="relative h-[100%]">
+                            <img src="/signDetails/bg2.png" className={"h-[100%]"} alt="" />
+                            <div className="absolute top-0 h-[100%] w-[100%]">
+                                {/* title标题 */}
+                                <div className="h-[0.425rem] text-center text-[.18rem] font-bold leading-[0.425rem] text-[white]">
+                                    <p>Activity dedscription</p>
+                                </div>
+                                {/* 描述内容 */}
+                                <div className="h-[3.3455rem] w-[100%] px-[0.15rem] py-[0.2091rem]">
+                                    <ul
+                                        className={
+                                            "break-word list-decimal pl-[.2455rem] pr-[.1rem] pt-0 text-[.14rem] leading-[.23rem] text-[white]"
+                                        }
+                                    >
+                                        <li>{t("desc1")}</li>
+                                        <li>{t("desc2")}</li>
+                                        <li>{t("desc3")}</li>
+                                        <li>{t("desc4")}</li>
+                                        <li>{t("desc5")}</li>
+                                        <li>{t("desc6")}</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <GlobalNotify
+                    amount={amount}
+                    visible={visible}
+                    onChange={() => setVisible(false)}
+                    deraction={5000}
+                ></GlobalNotify>
+            </div>
+        </>
+    );
+};
+export default SignIn;