|
@@ -1,119 +1,117 @@
|
|
|
"use client";
|
|
|
-import { FC, PropsWithChildren, useEffect, useState } from "react";
|
|
|
+import { getUserInfoApi, getUserMoneyApi } from "@/api/user";
|
|
|
import { useRouter } from "@/i18n";
|
|
|
+import { useGlobalStore } from "@/stores";
|
|
|
import clsx from "clsx";
|
|
|
+import { useTranslations } from "next-intl";
|
|
|
+import { FC, useEffect, useState } from "react";
|
|
|
import ItemCom from "./component/ItemCom";
|
|
|
-import ModalCom from "./component/ModalCom";
|
|
|
import MaskCom from "./component/MaskCom";
|
|
|
-import './page.scss'
|
|
|
-import { useGlobalStore } from '@/stores';
|
|
|
-import { getUserInfoApi, getUserMoneyApi } from "@/api/user";
|
|
|
-import { useTranslations } from "next-intl";
|
|
|
+import ModalCom from "./component/ModalCom";
|
|
|
+import "./page.scss";
|
|
|
|
|
|
interface Props {}
|
|
|
|
|
|
-const Profile: FC<PropsWithChildren<Props>> = () => {
|
|
|
+const Profile: FC<Props> = () => {
|
|
|
const t = useTranslations("ProfilePage");
|
|
|
-
|
|
|
+
|
|
|
const { token, userInfo, setUserInfo } = useGlobalStore();
|
|
|
const userInfoRequest = async () => {
|
|
|
- getUserInfoApi().then(res => {
|
|
|
- res.code == 200 && setUserInfo(res.data)
|
|
|
- })
|
|
|
- }
|
|
|
+ getUserInfoApi().then((res) => {
|
|
|
+ res.code == 200 && setUserInfo(res.data);
|
|
|
+ });
|
|
|
+ };
|
|
|
|
|
|
let [money, setMoney] = useState({
|
|
|
deposit: 0,
|
|
|
- point: 0
|
|
|
- })
|
|
|
+ point: 0,
|
|
|
+ });
|
|
|
const userMoneyRequest = async () => {
|
|
|
- getUserMoneyApi().then(res => {
|
|
|
- res.code == 200 && setMoney({
|
|
|
- deposit: res.data.deposit,
|
|
|
- point: res.data.point
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
+ getUserMoneyApi().then((res) => {
|
|
|
+ res.code == 200 &&
|
|
|
+ setMoney({
|
|
|
+ deposit: res.data.deposit,
|
|
|
+ point: res.data.point,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ };
|
|
|
useEffect(() => {
|
|
|
if (token) {
|
|
|
- userInfoRequest()
|
|
|
- userMoneyRequest()
|
|
|
+ userInfoRequest();
|
|
|
+ userMoneyRequest();
|
|
|
}
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
- }, [])
|
|
|
-
|
|
|
+ }, []);
|
|
|
|
|
|
const router = useRouter();
|
|
|
- const goPage = (path = '/') => {
|
|
|
- router.push(path)
|
|
|
- }
|
|
|
+ const goPage = (path = "/") => {
|
|
|
+ router.push(path);
|
|
|
+ };
|
|
|
|
|
|
const [visible, setVisible] = useState(false);
|
|
|
const callbackFun = () => {
|
|
|
- setVisible(!visible)
|
|
|
- }
|
|
|
+ setVisible(!visible);
|
|
|
+ };
|
|
|
|
|
|
- const divClassName = clsx('bgImg', token && 'default');
|
|
|
+ const divClassName = clsx("bgImg", token && "default");
|
|
|
return (
|
|
|
<div className="profile-box">
|
|
|
<div className="userContent">
|
|
|
<div className="userInfo">
|
|
|
<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('/login')}>
|
|
|
- <span>{t('Login')}</span>
|
|
|
- <span className="iconfont icon-xiangzuo1"></span>
|
|
|
+ {token && (
|
|
|
+ <div>
|
|
|
+ <span>{t("Conta")}</span>
|
|
|
+ <span className="phone">{userInfo?.user_phone || ""}</span>
|
|
|
</div>
|
|
|
- )
|
|
|
- }
|
|
|
-
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ {!token && (
|
|
|
+ <div className="goto" onClick={() => goPage("/login")}>
|
|
|
+ <span>{t("Login")}</span>
|
|
|
+ <span className="iconfont icon-xiangzuo1"></span>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
</div>
|
|
|
- {
|
|
|
- token && (
|
|
|
- <div className="coin">
|
|
|
+ {token && (
|
|
|
+ <div className="coin">
|
|
|
+ <div>
|
|
|
+ <span className="iconfont icon-icon-wallet"></span>
|
|
|
<div>
|
|
|
- <span className="iconfont icon-icon-wallet"></span>
|
|
|
- <div>
|
|
|
- <span>{t('Saldo')}</span>
|
|
|
- <div className="num">
|
|
|
- <span className="uppercase">brl </span>
|
|
|
- <span>{ money.deposit || 0.00 }</span>
|
|
|
- </div>
|
|
|
+ <span>{t("Saldo")}</span>
|
|
|
+ <div className="num">
|
|
|
+ <span className="uppercase">brl </span>
|
|
|
+ <span>{money.deposit || 0.0}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span className="iconfont icon-gift2"></span>
|
|
|
<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.00 }</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>
|
|
|
+ <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)}/>
|
|
|
+ <ModalCom />
|
|
|
+ <MaskCom visible={visible} callbackFun={callbackFun} />
|
|
|
</div>
|
|
|
);
|
|
|
};
|