|
|
@@ -2,6 +2,7 @@
|
|
|
import { UserInfoRep, UserVipInfo, Wallet } from "@/api/user";
|
|
|
import TipsModal, { ModalProps } from "@/components/TipsModal";
|
|
|
import { Link, useRouter } from "@/i18n/routing";
|
|
|
+import { useWalletStore } from "@/stores/useWalletStore";
|
|
|
import { WalletEnum } from "@/types";
|
|
|
import { vipImages } from "@/utils/constant";
|
|
|
import { flatPoint, percentage } from "@/utils/methods";
|
|
|
@@ -65,34 +66,125 @@ const VipCard = (props: { userVip: UserVipInfo }) => {
|
|
|
const Progress = (props: { percent: number }) => {
|
|
|
const { percent } = props;
|
|
|
return (
|
|
|
- <ProgressBar
|
|
|
- percent={percent}
|
|
|
- className={"mr-[0.0694rem] flex-1"}
|
|
|
- style={{
|
|
|
- "--fill-color": "var(--primary-color)",
|
|
|
- "--track-width": "0.0694rem",
|
|
|
- }}
|
|
|
- />
|
|
|
+ <div className="flex">
|
|
|
+ <ProgressBar
|
|
|
+ percent={percent}
|
|
|
+ className={"mr-[0.0694rem] flex-1"}
|
|
|
+ style={{
|
|
|
+ "--fill-color": "var(--primary-color)",
|
|
|
+ "--track-width": "0.0694rem",
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <span className={"text-primary-color"}>{percent}%</span>
|
|
|
+ </div>
|
|
|
);
|
|
|
};
|
|
|
-// 现金
|
|
|
-const Balance = (props: { wallet: Wallet }) => {
|
|
|
- const { wallet } = props;
|
|
|
- const num = 1;
|
|
|
+const WalletContent = (props: {
|
|
|
+ percentage: number;
|
|
|
+ type: string;
|
|
|
+ difference: number;
|
|
|
+ current: number;
|
|
|
+}) => {
|
|
|
+ const { percentage, type, difference, current } = props;
|
|
|
const t = useTranslations("ProfilePage");
|
|
|
return (
|
|
|
<div>
|
|
|
+ <div className={"mb-[0.12rem] text-[0.12rem]"}>
|
|
|
+ <span className={"mr-[10px]"}>{type}</span>
|
|
|
+ <i className={"mr-[10px] indent-[10px] text-[0.1528rem] font-bold"}>R$</i>
|
|
|
+ <span>{current}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Progress percent={percentage} />
|
|
|
+
|
|
|
<div>
|
|
|
- <span>{t("Saldo")}</span>
|
|
|
- <span></span>
|
|
|
- <span>{wallet.score}</span>
|
|
|
+ <span>{t("modalBottomTips")}</span>
|
|
|
+ <span>{difference.toFixed(2)}</span>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+// 现金
|
|
|
+const BalanceContent = (props: { wallet: Wallet }) => {
|
|
|
+ const { wallet } = props;
|
|
|
+ const t = useTranslations("ProfilePage");
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <WalletContent
|
|
|
+ difference={wallet.target_score_rollover - wallet.current_score_rollover}
|
|
|
+ type={t("balance")}
|
|
|
+ current={wallet.score || 0}
|
|
|
+ percentage={percentage(wallet.current_score_rollover, wallet.target_score_rollover)}
|
|
|
+ />
|
|
|
+ </>
|
|
|
+ );
|
|
|
+};
|
|
|
|
|
|
- <Progress percent={num} />
|
|
|
+const BonusContent = (props: { wallet: Wallet }) => {
|
|
|
+ const { wallet } = props;
|
|
|
+ const t = useTranslations("ProfilePage");
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <WalletContent
|
|
|
+ difference={wallet.target_point_rollover - wallet.current_point_rollover}
|
|
|
+ type={t("bonus")}
|
|
|
+ current={wallet.point || 0}
|
|
|
+ percentage={percentage(wallet.current_point_rollover, wallet.target_point_rollover)}
|
|
|
+ />
|
|
|
+ <p className={"text-center"}>{t("bonusArticle")}</p>
|
|
|
+ <ul className={"ml-[0.1389rem] list-decimal text-[0.12rem] text-[#666]"}>
|
|
|
+ <li>{t("bonusDesc1")}</li>
|
|
|
+ <li>{t("bonusDesc2")}</li>
|
|
|
+ <li>{t("bonusDesc3")}</li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
+const FreeContent = (props: { wallet: Wallet }) => {
|
|
|
+ const { wallet } = props;
|
|
|
+ const t = useTranslations("ProfilePage");
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <WalletContent
|
|
|
+ difference={wallet.target_free_score_rollover - wallet.current_free_score_rollover}
|
|
|
+ type={t("free")}
|
|
|
+ current={wallet.free_score || 0}
|
|
|
+ percentage={percentage(
|
|
|
+ wallet.current_free_score_rollover,
|
|
|
+ wallet.target_free_score_rollover
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ <p className={"text-center"}>{t("freeArticle")}</p>
|
|
|
+ <ul className={"ml-[0.1389rem] list-decimal text-[0.12rem] text-[#666]"}>
|
|
|
+ <li>{t("freeDesc1")}</li>
|
|
|
+ <li>{t("freeDesc2")}</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+const ReplayContent = (props: { wallet: Wallet }) => {
|
|
|
+ const { wallet } = props;
|
|
|
+ const t = useTranslations("ProfilePage");
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <WalletContent
|
|
|
+ difference={wallet.target_lose_score_rollover - wallet.current_lose_score_rollover}
|
|
|
+ type={t("replay")}
|
|
|
+ current={wallet.free_score || 0}
|
|
|
+ percentage={percentage(
|
|
|
+ wallet.current_lose_score_rollover,
|
|
|
+ wallet.target_lose_score_rollover
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ <p className={"text-center"}>{t("replayArticle")}</p>
|
|
|
+ <ul className={"ml-[0.1389rem] list-decimal text-[0.12rem] text-[#666]"}>
|
|
|
+ <li>{t("replayDesc1")}</li>
|
|
|
+ <li>{t("replayDesc2")}</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
const WalletCard = (props: { userMoney: Wallet }) => {
|
|
|
const { userMoney } = props;
|
|
|
const t = useTranslations("ProfilePage");
|
|
|
@@ -107,7 +199,12 @@ const WalletCard = (props: { userMoney: Wallet }) => {
|
|
|
router.push(`/${key}`);
|
|
|
};
|
|
|
const tipsRef = useRef<ModalProps>(null);
|
|
|
- const [tipsStatus, setTipsStatus] = useState<keyof typeof WalletEnum>("Balance");
|
|
|
+ const [tipsStatus, setTipsStatus] = useState<keyof typeof WalletEnum>("Bonus");
|
|
|
+
|
|
|
+ const modalHandler = (key: keyof typeof WalletEnum) => {
|
|
|
+ setTipsStatus(key);
|
|
|
+ tipsRef.current?.onOpen();
|
|
|
+ };
|
|
|
|
|
|
return (
|
|
|
<>
|
|
|
@@ -123,19 +220,30 @@ const WalletCard = (props: { userMoney: Wallet }) => {
|
|
|
}
|
|
|
>
|
|
|
{/*现金*/}
|
|
|
- {tipsStatus === WalletEnum.Balance ? <Balance wallet={userMoney} /> : null}
|
|
|
+ {tipsStatus === WalletEnum.Balance ? <BalanceContent wallet={userMoney} /> : null}
|
|
|
{/* 彩金*/}
|
|
|
- {/*<div>彩金</div>*/}
|
|
|
+ {tipsStatus === WalletEnum.Bonus ? <BonusContent wallet={userMoney} /> : null}
|
|
|
{/* 免费币 */}
|
|
|
- {/*<div>免费币</div>*/}
|
|
|
+ {tipsStatus === WalletEnum.Free ? <FreeContent wallet={userMoney} /> : null}
|
|
|
{/* 重玩币 */}
|
|
|
- {/*<div>重玩币</div>*/}
|
|
|
+ {tipsStatus === WalletEnum.Replay ? <ReplayContent wallet={userMoney} /> : null}
|
|
|
</TipsModal>
|
|
|
<div className="coin">
|
|
|
<span className="coin_left__icon iconfont icon-icon-wallet"></span>
|
|
|
<div className={"coin_right_wallet"}>
|
|
|
<div className={"wallet_left_border"}>
|
|
|
- <span>{t("Saldo")}</span>
|
|
|
+ <div className={"wallet_header"}>
|
|
|
+ <span>{t("balance")}</span>
|
|
|
+ <Image
|
|
|
+ className="wallet_header__icon"
|
|
|
+ src="/img/a.png"
|
|
|
+ alt="question"
|
|
|
+ onClick={() => modalHandler(WalletEnum.Balance)}
|
|
|
+ width={15}
|
|
|
+ height={15}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
<div className="num">
|
|
|
<span className="uppercase">brl </span>
|
|
|
<span>{userMoney.score || 0.0}</span>
|
|
|
@@ -148,7 +256,7 @@ const WalletCard = (props: { userMoney: Wallet }) => {
|
|
|
className="wallet_header__icon"
|
|
|
src="/img/a.png"
|
|
|
alt="question"
|
|
|
- onClick={() => tipsRef.current?.onOpen()}
|
|
|
+ onClick={() => modalHandler(WalletEnum.Bonus)}
|
|
|
width={15}
|
|
|
height={15}
|
|
|
/>
|
|
|
@@ -167,9 +275,9 @@ const WalletCard = (props: { userMoney: Wallet }) => {
|
|
|
alt="question"
|
|
|
width={15}
|
|
|
height={15}
|
|
|
- onClick={(event) => {
|
|
|
- event.stopPropagation();
|
|
|
- setVisible(true);
|
|
|
+ onClick={(e) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ modalHandler(WalletEnum.Free);
|
|
|
}}
|
|
|
/>
|
|
|
</div>
|
|
|
@@ -185,9 +293,9 @@ const WalletCard = (props: { userMoney: Wallet }) => {
|
|
|
className="wallet_header__icon"
|
|
|
src="/img/a.png"
|
|
|
alt="question"
|
|
|
- onClick={(event) => {
|
|
|
- event.stopPropagation();
|
|
|
- setVisible(true);
|
|
|
+ onClick={(e) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ modalHandler(WalletEnum.Replay);
|
|
|
}}
|
|
|
width={15}
|
|
|
height={15}
|
|
|
@@ -204,13 +312,14 @@ const WalletCard = (props: { userMoney: Wallet }) => {
|
|
|
);
|
|
|
};
|
|
|
export const ProfileHeader = (props: Props) => {
|
|
|
- const { userInfo, userMoney, userVip } = props;
|
|
|
+ const { userInfo, userVip } = props;
|
|
|
const t = useTranslations("ProfilePage");
|
|
|
|
|
|
+ const wallet = useWalletStore((state) => state.wallet);
|
|
|
const router = useRouter();
|
|
|
|
|
|
const handler = () => {
|
|
|
- if (!!userMoney.score) {
|
|
|
+ if (!!wallet.score) {
|
|
|
router.push("/withdraw");
|
|
|
} else {
|
|
|
Toast.show("no monry");
|
|
|
@@ -236,7 +345,7 @@ export const ProfileHeader = (props: Props) => {
|
|
|
{/*vipcard*/}
|
|
|
<VipCard userVip={userVip} />
|
|
|
|
|
|
- <WalletCard userMoney={userMoney} />
|
|
|
+ <WalletCard userMoney={wallet} />
|
|
|
</div>
|
|
|
|
|
|
<div className="link">
|
Before