From 08fbd58c6108cd45b96c7f41d0e8557f9d1d271b Mon Sep 17 00:00:00 2001
From: FrozenArcher <yhy242989105@hotmail.com>
Date: Mon, 4 Mar 2024 19:47:18 +0800
Subject: [PATCH] add tab bar

---
 src/app.config.ts                  |  2 +-
 src/custom-tab-bar/index.config.ts |  3 ++
 src/custom-tab-bar/index.scss      |  3 ++
 src/custom-tab-bar/index.tsx       | 66 ++++++++++++++++++++++++++++++
 src/pages/index/index.config.ts    |  1 -
 src/pages/index/index.tsx          | 12 ++++--
 src/pages/repair/repair.tsx        | 11 +++++
 src/pages/user/user.tsx            | 11 +++++
 8 files changed, 103 insertions(+), 6 deletions(-)
 create mode 100644 src/custom-tab-bar/index.config.ts
 create mode 100644 src/custom-tab-bar/index.scss
 create mode 100644 src/custom-tab-bar/index.tsx

diff --git a/src/app.config.ts b/src/app.config.ts
index 0daa919..a9fb978 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -3,7 +3,7 @@ export default defineAppConfig({
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',
-    navigationBarTitleText: 'WeChat',
+    navigationBarTitleText: 'EVA Notify',
     navigationBarTextStyle: 'black',
   },
   tabBar: {
diff --git a/src/custom-tab-bar/index.config.ts b/src/custom-tab-bar/index.config.ts
new file mode 100644
index 0000000..fd50080
--- /dev/null
+++ b/src/custom-tab-bar/index.config.ts
@@ -0,0 +1,3 @@
+export default {
+  component: true,
+};
diff --git a/src/custom-tab-bar/index.scss b/src/custom-tab-bar/index.scss
new file mode 100644
index 0000000..7889c63
--- /dev/null
+++ b/src/custom-tab-bar/index.scss
@@ -0,0 +1,3 @@
+@import "~taro-ui/dist/style/components/tab-bar.scss";
+@import "~taro-ui/dist/style/components/badge.scss";
+@import "~taro-ui/dist/style/components/icon.scss";
\ No newline at end of file
diff --git a/src/custom-tab-bar/index.tsx b/src/custom-tab-bar/index.tsx
new file mode 100644
index 0000000..b48d76f
--- /dev/null
+++ b/src/custom-tab-bar/index.tsx
@@ -0,0 +1,66 @@
+import { Component, ReactNode } from 'react';
+import { AtTabBar } from 'taro-ui';
+import Taro from '@tarojs/taro';
+import 'taro-ui/dist/style/index.scss';
+import './index.scss';
+
+const navList: Array<Taro.TabBarItem> = [
+  {
+    pagePath: '/pages/index/index',
+    text: '主页',
+  },
+  {
+    pagePath: '/pages/repair/repair',
+    text: '维修',
+  },
+  {
+    pagePath: '/pages/user/user',
+    text: '我的',
+  },
+];
+
+export default class Index extends Component {
+  state = {
+    selected: 0,
+    tabList: [
+      {
+        title: '主页',
+        iconType: 'home',
+      },
+      {
+        title: '维修',
+        iconType: 'settings',
+      },
+      {
+        title: '我的',
+        iconType: 'user',
+      },
+    ],
+  };
+
+  handleClick(idx: number) {
+    this.switchTab(idx, navList[idx].pagePath);
+  }
+
+  switchTab(idx: number, url: string) {
+    this.setSelected(idx);
+    Taro.switchTab({ url });
+  }
+
+  setSelected(idx: number) {
+    this.setState({
+      selected: idx,
+    });
+  }
+
+  render(): ReactNode {
+    return (
+      <AtTabBar
+        fixed
+        tabList={this.state.tabList}
+        onClick={this.handleClick.bind(this)}
+        current={this.state.selected}
+      />
+    );
+  }
+}
diff --git a/src/pages/index/index.config.ts b/src/pages/index/index.config.ts
index e4ea550..a9ca517 100644
--- a/src/pages/index/index.config.ts
+++ b/src/pages/index/index.config.ts
@@ -1,4 +1,3 @@
 export default definePageConfig({
-  navigationBarTitleText: '首页',
   usingComponents: {},
 });
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 6174b23..1700871 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -1,6 +1,7 @@
 import { View, Text } from '@tarojs/components';
 import { Component, ReactNode } from 'react';
-import { AtButton } from 'taro-ui';
+import Taro from '@tarojs/taro';
+import type CustomTabBar from '../../custom-tab-bar';
 import './index.scss';
 
 class Index extends Component {
@@ -8,14 +9,17 @@ class Index extends Component {
     msg: 'Hello World!',
   };
 
-  onReady() {
-    console.log('Index is ready');
+  // 以下是TabBar相关
+  pageCtx = Taro.getCurrentInstance().page;
+  componentDidShow() {
+    const tabbar = Taro.getTabBar<CustomTabBar>(this.pageCtx);
+    tabbar?.setSelected(0);
   }
+  // 以上是TabBar相关
 
   render(): ReactNode {
     return (
       <View>
-        <AtButton type='primary' size='normal'></AtButton>
         <Text>{this.state.msg}</Text>
       </View>
     );
diff --git a/src/pages/repair/repair.tsx b/src/pages/repair/repair.tsx
index 9d6d222..11ee8ad 100644
--- a/src/pages/repair/repair.tsx
+++ b/src/pages/repair/repair.tsx
@@ -1,7 +1,18 @@
 import { View, Text } from '@tarojs/components';
 import { Component, ReactNode } from 'react';
+import Taro from '@tarojs/taro';
+import type CustomTabBar from '../../custom-tab-bar';
+import './repair.scss';
 
 export default class RepairPage extends Component {
+  // 以下是TabBar相关
+  pageCtx = Taro.getCurrentInstance().page;
+  componentDidShow() {
+    const tabbar = Taro.getTabBar<CustomTabBar>(this.pageCtx);
+    tabbar?.setSelected(1);
+  }
+  // 以上是TabBar相关
+
   render(): ReactNode {
     return (
       <View>
diff --git a/src/pages/user/user.tsx b/src/pages/user/user.tsx
index 3c4ebcb..6dadcbe 100644
--- a/src/pages/user/user.tsx
+++ b/src/pages/user/user.tsx
@@ -1,7 +1,18 @@
 import { View, Text } from '@tarojs/components';
 import { Component, ReactNode } from 'react';
+import Taro from '@tarojs/taro';
+import type CustomTabBar from '../../custom-tab-bar';
+import './user.scss';
 
 export default class UserPage extends Component {
+  // 以下是TabBar相关
+  pageCtx = Taro.getCurrentInstance().page;
+  componentDidShow() {
+    const tabbar = Taro.getTabBar<CustomTabBar>(this.pageCtx);
+    tabbar?.setSelected(2);
+  }
+  // 以上是TabBar相关
+
   render(): ReactNode {
     return (
       <View>