feat(web): add balance info at header (#1359)

labring · Jul 5, 2023 · b678f1e · b678f1e
1 parent 8d88d0a
commit b678f1e
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 8 deletions.
diff --git a/web/index.html b/web/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 
 <head>
   <meta charset="UTF-8" />

diff --git 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
@@ -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
               <div className="flex items-center pb-6">
                 <span className="mr-6 text-second">{t("Balance")}</span>
                 <span className="text-[24px] font-semibold">
-                  ¥ {formatPrice(accountRes?.data?.balance)}
+                  {formatPrice(accountRes?.data?.balance)}
                 </span>
               </div>
               {bonus && <p className="mb-4 text-second">{t("Recharge amount")}</p>}
               <div className="mb-5 grid grid-cols-3 gap-4">
                 {(bonus || []).map((item) => (
-                  <div className="relative">
+                  <div className="relative" key={item.amount}>
                     {item.reward && (
                       <span className="absolute left-20 top-1 z-50 whitespace-nowrap rounded-full rounded-bl-none bg-purple-200 px-4 py-[1.5px] text-[12px] text-purple-600">
                         {t("application.bonus")} ¥{item.reward / 100}

diff --git a/web/src/layouts/Header/UserBalance/index.tsx 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 (
+    <div className="mr-4 text-lg">
+      <span className="mr-2">{t("Balance")}:</span>
+      <span className="mr-2">{formatPrice(balanceData.balance)}</span>
+      <ChargeButton>
+        <span className="cursor-pointer font-normal text-blue-800">{t("ChargeNow")}</span>
+      </ChargeButton>
+    </div>
+  );
+}
diff --git 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 }) => {
                 </a>
               );
             })}
+            <UserBalance />
             <Language fontSize={20} />
             <div
               className="mr-8 cursor-pointer pb-1"

diff --git a/web/src/pages/homepage/language.tsx b/web/src/pages/homepage/language.tsx
@@ -7,7 +7,7 @@ const Language = (props: { fontSize: number }) => {
   const { i18n } = useTranslation();
 
   return (
-    <div className="mr-7">
+    <div className="mr-4">
       <a
         className="flex items-center text-lg"
         href={"/language"}

diff --git a/web/src/utils/format.ts b/web/src/utils/format.ts
@@ -82,7 +82,7 @@ export function formatPort(port: number | undefined) {
 }
 
 export function formatPrice(price?: number) {
-  return price ? (price / 100).toFixed(2) : "-";
+  return price ? "¥" + (price / 100).toFixed(2) : "-";
 }
 
 export function convertMoney(money: number) {