From b678f1efe042d752bcdea58e8e5c965e8a158751 Mon Sep 17 00:00:00 2001 From: allence Date: Wed, 5 Jul 2023 18:40:32 +0800 Subject: [PATCH] feat(web): add balance info at header (#1359) --- web/index.html | 2 +- web/src/App.tsx | 5 +++-- web/src/components/ChargeButton/index.tsx | 5 ++--- web/src/layouts/Header/UserBalance/index.tsx | 21 ++++++++++++++++++++ web/src/layouts/Header/index.tsx | 3 +++ web/src/pages/homepage/language.tsx | 2 +- web/src/utils/format.ts | 2 +- 7 files changed, 32 insertions(+), 8 deletions(-) create mode 100644 web/src/layouts/Header/UserBalance/index.tsx diff --git a/web/index.html b/web/index.html index 527e016598..80ffe4672e 100644 --- a/web/index.html +++ b/web/index.html @@ -1,5 +1,5 @@ - + diff --git a/web/src/App.tsx b/web/src/App.tsx index 61a31592ac..f9943b46a0 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -32,7 +32,7 @@ const queryClient = new QueryClient({ }); function APP() { - useTranslation(); + const { i18n } = useTranslation(); const getSiteSettings = useSiteSettingStore((state) => state.getSiteSettings); @@ -49,8 +49,9 @@ function APP() { }); useEffect(() => { + document.documentElement.lang = i18n.language; getSiteSettings(); - }, [getSiteSettings]); + }, [getSiteSettings, i18n.language]); return ( <> diff --git a/web/src/components/ChargeButton/index.tsx b/web/src/components/ChargeButton/index.tsx index 74cb919da0..b08e1be2b7 100644 --- a/web/src/components/ChargeButton/index.tsx +++ b/web/src/components/ChargeButton/index.tsx @@ -75,7 +75,6 @@ export default function ChargeButton(props: { amount?: number; children: React.R enabled: isOpen, onSuccess: (res) => { setBonus(res.data); - console.log(res.data); }, }, ); @@ -99,13 +98,13 @@ export default function ChargeButton(props: { amount?: number; children: React.R
{t("Balance")} - ¥ {formatPrice(accountRes?.data?.balance)} + {formatPrice(accountRes?.data?.balance)}
{bonus &&

{t("Recharge amount")}

}
{(bonus || []).map((item) => ( -
+
{item.reward && ( {t("application.bonus")} ¥{item.reward / 100} diff --git a/web/src/layouts/Header/UserBalance/index.tsx b/web/src/layouts/Header/UserBalance/index.tsx new file mode 100644 index 0000000000..4def15d28b --- /dev/null +++ b/web/src/layouts/Header/UserBalance/index.tsx @@ -0,0 +1,21 @@ +import { useTranslation } from "react-i18next"; + +import ChargeButton from "@/components/ChargeButton"; +import { formatPrice } from "@/utils/format"; + +import { useAccountQuery } from "@/pages/home/service"; + +export default function UserBalance() { + const { t } = useTranslation(); + const { data: { data: balanceData = {} } = {} } = useAccountQuery(); + + return ( +
+ {t("Balance")}: + {formatPrice(balanceData.balance)} + + {t("ChargeNow")} + +
+ ); +} diff --git a/web/src/layouts/Header/index.tsx b/web/src/layouts/Header/index.tsx index 8358cb261d..9daf5ef873 100644 --- a/web/src/layouts/Header/index.tsx +++ b/web/src/layouts/Header/index.tsx @@ -8,6 +8,7 @@ import { ChatIcon, ContactIcon, TextIcon } from "@/components/CommonIcon"; import { COLOR_MODE } from "@/constants"; import { getAvatarUrl } from "@/utils/getAvatarUrl"; +import UserBalance from "./UserBalance"; import UserSetting from "./UserSetting"; import useGlobalStore from "@/pages/globalStore"; @@ -17,6 +18,7 @@ const Header = (props: { width: string }) => { const { width } = props; const { t } = useTranslation(); const { userInfo } = useGlobalStore((state) => state); + const { colorMode } = useColorMode(); const darkMode = colorMode === COLOR_MODE.dark; const { toggleColorMode } = useColorMode(); @@ -113,6 +115,7 @@ const Header = (props: { width: string }) => { ); })} +
{ const { i18n } = useTranslation(); return ( -
+