fix: transactions 页面多语言优化

src/app/[locale]/(TabBar)/[[...share]]/_home/HomePrize.tsx

@@ -1,17 +1,17 @@
 "use client";
-import { gamesNoticeWinApi, GameListRep } from "@/api/home";
+import { GameListRep, gamesNoticeWinApi } from "@/api/home";
 import Box from "@/components/Box";
+import styles from "@/components/Card/style.module.scss";
+import useGame from "@/hooks/useGame";
+import { useRouter } from "@/i18n/routing";
+import { useWalletStore } from "@/stores/useWalletStore";
+import { getToken } from "@/utils/Cookies";
+import { useRequest } from "ahooks";
 import { Button, Popup } from "antd-mobile";
 import { useTranslations } from "next-intl";
 import { FC, useState } from "react";
 import { Autoplay } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
-import { useRouter } from "@/i18n/routing";
-import { getToken } from "@/utils/Cookies";
-import { useWalletStore } from "@/stores/useWalletStore";
-import useGame from "@/hooks/useGame";
-import { useRequest } from "ahooks";
-import styles from "@/components/Card/style.module.scss";
 
 interface Props {}
 
@@ -35,10 +35,10 @@ const HomePrize: FC<Props> = () => {
     const [gameInfo, setGameInfo] = useState<any>({});
     const handler = (game: GameListRep) => {
         setVisible(true);
-        setGameInfo(game)
-        console.log(game)
+        setGameInfo(game);
+        console.log(game);
     };
-    
+
     const router = useRouter();
     const token = getToken();
     const wallet = useWalletStore((state) => state.wallet);
@@ -75,15 +75,28 @@ const HomePrize: FC<Props> = () => {
                 autoplay={{
                     delay: 3000,
                 }}
-                modules={[Autoplay]}             
+                modules={[Autoplay]}
                 className="mySwiper"
             >
                 {winImg.map((prize: any, index: number) => (
                     <SwiperSlide key={index}>
-                        <div className={"w-[1.1rem] bg-[#1c1e22]"} onClick={() => handler(prize)} style={{borderRadius: ".1rem"}}>
-                            <img className={"h-[1.54rem]"} src={prize.game_icon} alt="" style={{borderRadius: ".1rem"}}/>
+                        <div
+                            className={"w-[1.1rem] bg-[#1c1e22]"}
+                            onClick={() => handler(prize)}
+                            style={{ borderRadius: ".1rem" }}
+                        >
+                            <img
+                                className={"h-[1.54rem]"}
+                                src={prize.game_icon}
+                                alt=""
+                                style={{ borderRadius: ".1rem" }}
+                            />
                             <div className={"px-[0.13rem] pb-[0.0347rem] text-[0.13rem]"}>
-                                <p className={"text-[#98a7b5]"}>{prize.phone ? prize.phone.slice(0,3) + '*****' + prize.phone.slice(-3): ''}</p>
+                                <p className={"text-[#98a7b5]"}>
+                                    {prize.phone
+                                        ? prize.phone.slice(0, 3) + "*****" + prize.phone.slice(-3)
+                                        : ""}
+                                </p>
                                 <p className={"text-[#43c937]"}>R${prize.amount}</p>
                             </div>
                         </div>

src/app/[locale]/(navbar)/help/layout.tsx

@@ -0,0 +1,24 @@
+import HeaderBack from "@/components/HeaderBack";
+import { getTranslations } from "next-intl/server";
+import { ReactNode } from "react";
+export const generateMetadata = async () => {
+    const t = await getTranslations("titles");
+    return {
+        title: t("message"),
+    };
+};
+export default async function Layout({
+    children,
+    params: { locale },
+}: {
+    children: ReactNode;
+    params: { locale: string };
+}) {
+    const t = await getTranslations("ProfilePage");
+    return (
+        <>
+            <HeaderBack showBack={true} title={"Ajuda"} />
+            <main className={"main-header bg-[#282828]"}>{children}</main>
+        </>
+    );
+}

src/app/[locale]/(navbar)/help/page.tsx

@@ -0,0 +1,89 @@
+import { FC } from "react";
+
+interface HelpTitle {
+    title: string;
+}
+const HelpTitle: FC<HelpTitle> = (props) => {
+    const { title } = props;
+    return <div className={"text-[.16rem] font-bold text-[#fcde26]"}>{title}</div>;
+};
+const Page = () => {
+    const platform = "BCWIN777";
+    return (
+        <div className={"p-[0.1389rem] text-[0.14rem]"}>
+            <div className={"border-b-[1px] border-[#3f3f3f] pb-[0.1389rem]"}>
+                <HelpTitle title={"Como criar uma Conta"} />
+                <ul className={"ml-[20px] list-decimal px-[0.1389rem]"}>
+                    <li>
+                        Abra seu navegador e digite:{" "}
+                        <span className={"text-[#009d81]"}>{platform}</span>
+                    </li>
+                    <li>
+                        Quando a página {platform} abrir, clique em
+                        <span className={"text-[#009d81]"}>“Cadastre-se”</span>
+                    </li>
+                    <li>
+                        Insira seu número e senha de seis ou mais caracteres e selecione &quot;Criar
+                        Usuário&quot; para receber um PIN por sms.
+                    </li>
+                    <li>Insira o PIN e sua conta será ativada.</li>
+                </ul>
+                <div className={"font-semibold"}>
+                    Obs.: Selecione uma senha que não vai esquecer, pois ela será utilizada para
+                    visitar
+                    <span className={"text-[#009d81]"}> {platform}</span>
+                </div>
+            </div>
+
+            <div className={"mt-[0.1389rem] border-b-[1px] border-[#3f3f3f] pb-[0.1389rem]"}>
+                <HelpTitle title={"Como fazer uma Aposta"} />
+                <HelpTitle title={"WEB"} />
+                <ul className={"ml-[20px] list-decimal px-[0.1389rem]"}>
+                    <li>
+                        Abra seu navegador e digite:{" "}
+                        <span className={"text-[#009d81]"}>{platform}</span>
+                    </li>
+                    <li>Quando a página {platform} abrir, clique em login.</li>
+                    <li>Insira seu número e senha para entrar na sua conta.</li>
+                    <li>Selecione um jogo e clique no botão de jogar.</li>
+                    <li>Você verá a interface principal do jogo.</li>
+                    <li>Insira sua aposta desejada.</li>
+                    <li>Clique em “Fazer aposta”</li>
+                </ul>
+            </div>
+
+            <div className={"mt-[0.1389rem] border-b-[1px] border-[#3f3f3f] pb-[0.1389rem]"}>
+                <HelpTitle title={"Como Verificar Minhas Apostas e Conta Declaração"} />
+                <ul className={"ml-[20px] list-decimal px-[0.1389rem]"}>
+                    <li>
+                        Abra seu navegador e digite:{" "}
+                        <span className={"text-[#009d81]"}>{platform}</span>
+                    </li>
+                    <li>Quando a página {platform} abrir, clique em login.</li>
+                    <li>Digite seu número e senha para acessar sua conta.</li>
+                    <li>Clique em &quot;Perfil&quot; no menu abaixo.</li>
+                    <li>Clique em &quot;Minhas Apostas&quot;</li>
+                    <li>Quando a página aparecer, você verá o relatório</li>
+                </ul>
+            </div>
+
+            <div className={"mt-[0.1389rem] border-b-[1px] border-[#3f3f3f] pb-[0.1389rem]"}>
+                <HelpTitle title={"Esqueci minha senha"} />
+                <ul className={"ml-[20px] list-decimal px-[0.1389rem]"}>
+                    <li>
+                        Abra seu navegador e digite:{" "}
+                        <span className={"text-[#009d81]"}>{platform}</span>
+                    </li>
+                    <li>Quando a página {platform} abrir, clique em login.</li>
+                    <li>
+                        Insira seu número de telefone e clique em &quot;esqueci minha senha&quot;
+                    </li>
+                    <li>Você receberá um sms com um PIN para resetar.</li>
+                    <li>Insira o PIN e escolha sua nova senha.</li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default Page;

src/app/[locale]/(navbar)/transactions/Bets.tsx

@@ -28,7 +28,7 @@ const Bets = () => {
             const newData = (res.data || []).map((item) => {
                 return {
                     ...item,
-                    amount: -item.amount
+                    amount: -item.amount,
                 };
             });
             setSourceData((value) => ({ page: res.page, list: [...value.list, ...newData] }));
@@ -41,7 +41,7 @@ const Bets = () => {
     };
     return (
         <>
-            <Message data={sourceData.list} />
+            <Message data={sourceData.list} isTranslate={true} />
             <InfiniteScroll loadMore={loadMore} hasMore={!sourceData.page.is_end!} />
         </>
     );

src/app/[locale]/(navbar)/transactions/components/Message.tsx

@@ -6,9 +6,10 @@ import { useTranslations } from "next-intl";
 
 type Props = {
     data: (DepositsRep & { order_status?: number })[];
+    isTranslate?: boolean;
 };
 const Message = (props: Props) => {
-    const { data = [] } = props;
+    const { data = [], isTranslate = false } = props;
     const t = useTranslations();
     const copyHandler = (text: string) => {
         copyText(text);
@@ -38,7 +39,11 @@ const Message = (props: Props) => {
                         </div>
                         <div className={"flex justify-between text-[12px] text-[#acacac]"}>
                             <p>{timeFormat(item.time)}</p>
-                            <p>{t(`withdrawStatus.${item?.order_status}`)}</p>
+                            {isTranslate ? (
+                                <p>{t(`withdrawStatus.${item?.order_status}`)}</p>
+                            ) : (
+                                <p>{item.status}</p>
+                            )}
                         </div>
                     </Box>
                 );

src/app/[locale]/providers.tsx

@@ -4,7 +4,6 @@ import Loading from "@/components/Loading";
 import { useSystemStore } from "@/stores/useSystemStore";
 import { ConfigProvider } from "antd-mobile";
 import enUS from "antd-mobile/es/locales/en-US";
-import { useLocale } from "next-intl";
 import { ThemeProviderProps } from "next-themes/dist/types";
 import { ReactNode, useLayoutEffect, useRef } from "react";
 import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
@@ -84,7 +83,6 @@ const Layout = ({ children, themeProps }: ProvidersProps) => {
         isCollapse: state.isCollapse,
         setCollapse: state.setCollapse,
     }));
-    const local = useLocale();
 
     const swiperRef = useRef<SwiperClass>();
     const homeContainerRef = useRef<HTMLDivElement>(null);

src/components/Layout/Sidebar.tsx

@@ -1,10 +1,11 @@
+"use client";
 import Box from "@/components/Box";
-import { Link, useRouter } from "@/i18n/routing";
+import { Link, usePathname, useRouter } from "@/i18n/routing";
 import { useSocialStore } from "@/stores/useSocials";
 import { useSystemStore } from "@/stores/useSystemStore";
 import { Input } from "antd-mobile";
 import { useTranslations } from "next-intl";
-import { FC, PropsWithChildren, useRef } from "react";
+import { FC, PropsWithChildren, useEffect, useRef } from "react";
 import { useSwiper } from "swiper/react";
 interface Props {}
 
@@ -15,34 +16,58 @@ const cardData = [
     { url: "", icon: "https://9f.com/images/homePage/card/c-firstdeposit.png", desc: "" },
 ];
 const tabs = [
-    { name: "casino", id: 1 },
-    { name: "esportes", id: 2 },
+    { name: "casino", id: 1, icon: "pro-niuyouguo" },
+    { name: "esportes", id: 2, icon: "pro-zuqiu" },
 ];
 const Sidebar: FC<PropsWithChildren<Props>> = (props) => {
     const t = useTranslations("Sidebar");
     const socials = useSocialStore((state) => state.socials);
 
-    const setCollapse = useSystemStore((state) => state.setCollapse);
     const swiper = useSwiper();
     const router = useRouter();
     const tab = useRef<HTMLDivElement>(null);
     const bgRef = useRef<HTMLDivElement>(null);
-    const tabHandler = (index: number) => {
+
+    const pathname = usePathname();
+    const { isCollapse, setCollapse } = useSystemStore((state) => ({
+        isCollapse: state.isCollapse,
+        setCollapse: state.setCollapse,
+    }));
+
+    const tabHandler = (index: number, isAction = true) => {
         bgRef.current?.setAttribute(
             "style",
             `transform: translateX(${tab.current?.clientWidth! * index}px)`
         );
-        if (index === 1) {
-            router.push("/sports");
-        } else {
-            router.push("/");
+        if (isAction) {
+            switch (index) {
+                case 0:
+                    router.push("/");
+                    break;
+                case 1:
+                    router.push("/sports");
+                    break;
+                case 2:
+                    router.push("/help");
+                    break;
+            }
+            // 关闭侧边栏按钮
+            setCollapse(false);
+            // 关闭swiper
+            swiper.slideNext();
         }
-        // 关闭侧边栏按钮
-        setCollapse(false);
-        // 关闭swiper
-        swiper.slideNext();
+
         return index;
     };
+
+    useEffect(() => {
+        if (pathname === "/") {
+            tabHandler(0, false);
+        } else {
+            tabHandler(1, false);
+        }
+    }, [isCollapse]);
+
     return (
         <Box>
             {/*tabs*/}
@@ -53,9 +78,15 @@ const Sidebar: FC<PropsWithChildren<Props>> = (props) => {
                             <div
                                 key={index}
                                 onClick={() => tabHandler(index)}
-                                className={"z-20 flex-1 cursor-pointer text-center"}
+                                className={
+                                    "z-20 flex h-[0.3056rem] flex-1 justify-center" +
+                                    " cursor-pointer items-center"
+                                }
                                 ref={tab}
                             >
+                                <span
+                                    className={`pro-iconfont ${item.icon} mr-[0.05rem] text-[20px]`}
+                                ></span>
                                 {t(item.name)}
                             </div>
                         );
@@ -96,6 +127,7 @@ const Sidebar: FC<PropsWithChildren<Props>> = (props) => {
             {/*  Esportes */}
             <section
                 className={"flex items-center rounded-[3px] bg-[#3a3a3a] p-[0.08rem] text-[#fff]"}
+                onClick={() => tabHandler(1)}
             >
                 <i className={"iconfont icon-tiyu mr-[0.0694rem] text-[0.15rem]"}></i>
                 <div className={"flex-1"}>{t("esportes")}</div>
@@ -147,23 +179,26 @@ const Sidebar: FC<PropsWithChildren<Props>> = (props) => {
             </section>
 
             <section className={"mt-[0.11rem] text-[#7d7d7d]"}>
-                <div className={"flex items-center p-[0.08rem]"}>
+                <div onClick={() => tabHandler(2)} className={"flex items-center p-[0.08rem]"}>
                     <i className={"iconfont icon-bangzhu mr-[0.0694rem] text-[0.15rem]"}></i>
                     <div className={"flex-1"}> {t("ajude")}</div>
                 </div>
-                <div className={"flex items-center p-[0.08rem]"}>
+                <Link
+                    href="mailto:support@bcwin777"
+                    className={"flex items-center p-[0.08rem] text-[#7d7d7d]"}
+                >
                     <i className={"iconfont icon-duanxinguanli mr-[0.0694rem] text-[0.15rem]"}></i>
                     <div className={"flex-1"}> {t("email")}</div>
-                </div>
-                <div className={"flex items-center p-[0.08rem]"}>
-                    <i className={"iconfont icon-fenxiang mr-[0.0694rem] text-[0.15rem]"}></i>
-                    <div className={"flex-1"}> {t("inicial")} </div>
-                </div>
-            </section>
-            <section className={"flex justify-between p-[0.08rem] text-[12px] text-[#7d7d7d]"}>
-                <span>Version</span>
-                <span>0.0.2</span>
+                </Link>
+                {/*<div className={"flex items-center p-[0.08rem]"}>*/}
+                {/*    <i className={"iconfont icon-fenxiang mr-[0.0694rem] text-[0.15rem]"}></i>*/}
+                {/*    <div className={"flex-1"}> {t("inicial")} </div>*/}
+                {/*</div>*/}
             </section>
+            {/*<section className={"flex justify-between p-[0.08rem] text-[12px] text-[#7d7d7d]"}>*/}
+            {/*    <span>Version</span>*/}
+            {/*    <span>0.0.2</span>*/}
+            {/*</section>*/}
         </Box>
     );
 };

src/components/Loading/index.tsx

@@ -1,4 +1,10 @@
+"use client";
+import { SpinLoading } from "antd-mobile";
 const Loading = () => {
-    return <div>loading....</div>;
+    return (
+        <div className="loading">
+            <SpinLoading />
+        </div>
+    );
 };
 export default Loading;