|
@@ -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;
|