|
@@ -1,202 +0,0 @@
|
|
|
-"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;
|