底部tab组件

src/components/Footer/index.tsx

@@ -1,58 +1,74 @@
 "use client";
-import { useRouter } from "@/i18n";
-import { FC, PropsWithChildren, ReactNode } from "react";
+import { usePathname, useRouter} from "@/i18n";
+import { FC, PropsWithChildren, ReactNode, useEffect } from "react";
 import clsx from "clsx";
 import "./style.scss";
 
 /**
  * @description 底部Tab组件
- * @param footerPlaceholder 底部占位元素
- * @param footerRender 底部渲染元素
+ * @param children 插槽内容
  *
  */
 export interface FooterProps {
-    footerPlaceholder?: boolean;
-    footerRender?: () => ReactNode;
+    children?: () => ReactNode;
 }
 
-const Footer: FC<PropsWithChildren<FooterProps>> = (props) => {
+const Footer: FC<PropsWithChildren<FooterProps>> = () => {
+    const tabList = [
+        {
+            iconSpanName: 'icon-home',
+            label: 'Início',
+            path: '/'
+        },
+        {
+            iconSpanName: 'icon-qianbao1',
+            label: 'Depósito',
+            path: '/deposit'
+        },
+        {
+            iconSpanName: 'icon-afiliado',
+            label: 'Afiliado',
+            path: '/affiliate/summary'
+        },
+        {
+            iconSpanName: 'icon-tiyu',
+            label: 'Esportes',
+            path: '/'
+        },
+        {
+            iconSpanName: 'icon-yonghu',
+            label: 'Perfil',
+            path: '/profile'
+        },
+    ]
+
+    const pathname = usePathname()
+
     const router = useRouter();
+    const goPage = (path = '/') => {
+        router.push(path)
+    }
 
     return (
         <div className="footer-box">
             <ul>
-                <li>
-                    <div className="icon-box">
-                        <span className="iconfont icon-home"></span>
-                    </div>
-                    <label>Início</label>
-                </li>
-                <li className="active">
-                    <div className="icon-box">
-                        <span className="iconfont icon-qianbao1"></span>
-                    </div>
-                    <label>Depósito</label>
-                </li>
-                <li>
-                    <div className="icon-box">
-                        <i className="icon-afiliado"></i>
-                        <i className="icon-rs"></i>
-                    </div>
-                    <label>Afiliado</label>
-                </li>
-                <li>
-                    <div className="icon-box">
-                        <span className="iconfont icon-tiyu"></span>
-                        <i className="icon-hot"></i>
-                    </div>
-                    <label>Esportes</label>
-                </li>
-                <li>
-                    <div className="icon-box">
-                        <span className="iconfont icon-yonghu"></span>
-                    </div>
-                    <label>Perfil</label>
-                </li>
+                {
+                    tabList.map((item, index) => {
+                        return (
+                            <li className={clsx(item.path == pathname && 'active')} onClick={() => goPage(item.path)} key={index}>
+                                <div className="icon-box">
+                                    {
+                                        index == 2 ? (
+                                            <><i className="icon-afiliado"></i><i className="icon-rs"></i></>
+                                        ) : <span className={clsx('iconfont',item.iconSpanName)}></span>
+                                    }
+                                    { index == 3 && <b className="icon-hot"></b> }
+                                </div>
+                                <label>{item.label}</label>
+                            </li>
+                        )
+                    })
+                }
             </ul>
         </div>
     );

src/components/Footer/style.scss

@@ -79,6 +79,7 @@
           height: .25rem;
           background: url('/img/iconTab/hot.png') no-repeat;
           background-size: 100%;
+          font-weight: normal;
         }
       }