|
@@ -1,185 +0,0 @@
|
|
|
-"use client";
|
|
|
-import { getUserInfoApi, getUserMoneyApi } from "@/api/user";
|
|
|
-import { useRouter } from "@/i18n";
|
|
|
-import { useGlobalStore } from "@/stores";
|
|
|
-import { ProgressBar } from "antd-mobile";
|
|
|
-import clsx from "clsx";
|
|
|
-import { useTranslations } from "next-intl";
|
|
|
-import dynamic from "next/dynamic";
|
|
|
-import { FC, Fragment, useEffect, useState } from "react";
|
|
|
-import ItemCom from "./component/ItemCom";
|
|
|
-import "./page.scss";
|
|
|
-
|
|
|
-const vipImages = [
|
|
|
- { leve: 1, src: "/vip/1.png", color: "#686868" },
|
|
|
- { leve: 2, src: "/vip/2-3-4.png", color: "#844C4F" },
|
|
|
- { leve: 3, src: "/vip/2-3-4.png", color: "#844C4F" },
|
|
|
- { leve: 4, src: "/vip/2-3-4.png", color: "#844C4F" },
|
|
|
- { leve: 5, src: "/vip/5-6-7.png", color: "#707386" },
|
|
|
- { leve: 6, src: "/vip/5-6-7.png", color: "#707386" },
|
|
|
- { leve: 7, src: "/vip/5-6-7.png", color: "#707386" },
|
|
|
- { leve: 8, src: "/vip/8-9-10.png", color: "#894622" },
|
|
|
- { leve: 9, src: "/vip/8-9-10.png", color: "#894622" },
|
|
|
- { leve: 10, src: "/vip/8-9-10.png", color: "#894622" },
|
|
|
-];
|
|
|
-interface Props {}
|
|
|
-// const ItemCom = dynamic(() => import("./component/ItemCom"));
|
|
|
-const MaskCom = dynamic(() => import("./component/MaskCom"));
|
|
|
-const ModalCom = dynamic(() => import("./component/ModalCom"));
|
|
|
-const Profile: FC<Props> = () => {
|
|
|
- const t = useTranslations("ProfilePage");
|
|
|
-
|
|
|
- const { token, userInfo, setUserInfo } = useGlobalStore();
|
|
|
-
|
|
|
- const level = 1;
|
|
|
- const process = 10;
|
|
|
-
|
|
|
- const userInfoRequest = async () => {
|
|
|
- getUserInfoApi().then((res) => {
|
|
|
- res.code == 200 && setUserInfo(res.data);
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
- let [money, setMoney] = useState({
|
|
|
- Score: 0,
|
|
|
- point: 0,
|
|
|
- });
|
|
|
- const userMoneyRequest = async () => {
|
|
|
- getUserMoneyApi().then((res) => {
|
|
|
- res.code == 200 &&
|
|
|
- setMoney({
|
|
|
- Score: res.data?.Score || 0.0,
|
|
|
- point: res.data?.point || 0.0,
|
|
|
- });
|
|
|
- });
|
|
|
- };
|
|
|
- useEffect(() => {
|
|
|
- if (token) {
|
|
|
- userInfoRequest();
|
|
|
- userMoneyRequest();
|
|
|
- }
|
|
|
- // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
- }, [token]);
|
|
|
-
|
|
|
- const router = useRouter();
|
|
|
- const goPage = (path = "/") => {
|
|
|
- router.push(path);
|
|
|
- };
|
|
|
-
|
|
|
- const [visible, setVisible] = useState(false);
|
|
|
- const callbackFun = () => {
|
|
|
- setVisible(!visible);
|
|
|
- };
|
|
|
-
|
|
|
- const divClassName = clsx("bgImg", token && "default");
|
|
|
- const divClassName2 = clsx("userContent", token && "active");
|
|
|
- const divClassName3 = clsx("userInfo", token && "active");
|
|
|
-
|
|
|
- const vipIconElement = vipImages.map((item, index) => {
|
|
|
- if (item.leve === level) {
|
|
|
- return (
|
|
|
- <Fragment key={index}>
|
|
|
- <img src={item.src} className={"icon-image"} alt="vip" key={index} />
|
|
|
- <span className={"icon-level"} style={{ color: item.color }}>
|
|
|
- {item.leve}
|
|
|
- </span>
|
|
|
- </Fragment>
|
|
|
- );
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- return (
|
|
|
- <div className="profile-box">
|
|
|
- <div className={divClassName2}>
|
|
|
- <div className={divClassName3}>
|
|
|
- <div>
|
|
|
- <div className={divClassName}></div>
|
|
|
- {token && (
|
|
|
- <div>
|
|
|
- <span>{t("Conta")}</span>
|
|
|
- <span className="phone">{userInfo?.user_phone || ""}</span>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- {token ? (
|
|
|
- <div
|
|
|
- className="goto"
|
|
|
- onClick={() =>
|
|
|
- goPage(
|
|
|
- `/confirmPassword?userPhone=${userInfo.user_phone}&code=123456&alter=true`
|
|
|
- )
|
|
|
- }
|
|
|
- >
|
|
|
- <span className="iconfont icon-xiangzuo1"></span>
|
|
|
- </div>
|
|
|
- ) : (
|
|
|
- <div className="goto" onClick={() => goPage("/login")}>
|
|
|
- <span>{t("Login")}</span>
|
|
|
- <span className="iconfont icon-xiangzuo1"></span>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- {/*vipcard*/}
|
|
|
- <div className={"vip-card"}>
|
|
|
- <div className={"vip-card__icon"}>{vipIconElement}</div>
|
|
|
- <div className={"vip-card-process"}>
|
|
|
- <div className={"process-top"}>{process}xp</div>
|
|
|
- <div>
|
|
|
- <ProgressBar
|
|
|
- percent={process}
|
|
|
- style={{
|
|
|
- "--fill-color": "#fb8b05",
|
|
|
- "--track-width": "0.0694rem",
|
|
|
- }}
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div className={"process-bottom"}>
|
|
|
- <span>VIP{level}</span>
|
|
|
- <span className={"process-bottom-desc"}>leia 400 atualizando para</span>
|
|
|
- <span>VIP{level + 1 >= 11 ? "MAX" : level + 1}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- {token && (
|
|
|
- <div className="coin">
|
|
|
- <div>
|
|
|
- <span className="iconfont icon-icon-wallet"></span>
|
|
|
- <div>
|
|
|
- <span>{t("Saldo")}</span>
|
|
|
- <div className="num">
|
|
|
- <span className="uppercase">brl </span>
|
|
|
- <span>{money.Score || 0.0}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <span className="iconfont icon-gift2"></span>
|
|
|
- <div>
|
|
|
- <span onClick={() => setVisible(true)}>
|
|
|
- {t("Bônus")} <img className="a" src="/img/a.png" alt="" />
|
|
|
- </span>
|
|
|
- <div className="num">
|
|
|
- <span className="uppercase">brl </span>
|
|
|
- <span>{money.point || 0.0}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </div>
|
|
|
-
|
|
|
- <div className="link">
|
|
|
- <span onClick={() => goPage("/deposit")}>{t("Depósito")}</span>
|
|
|
- <span onClick={() => goPage(token ? "/withdraw" : `/login?redirect=/withdraw`)}>
|
|
|
- {t("Sacar")}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <ItemCom />
|
|
|
- <ModalCom />
|
|
|
- <MaskCom visible={visible} callbackFun={callbackFun} />
|
|
|
- </div>
|
|
|
- );
|
|
|
-};
|
|
|
-
|
|
|
-export default Profile;
|