fix prettier

.prettierrc

@@ -1,5 +1,5 @@
 {
-    "printWidth": 120,
+    "printWidth": 80,
     "tabWidth": 2,
     "useTabs": false,
     "semi": true,

src/app.config.ts

@@ -3,7 +3,7 @@ export default defineAppConfig({
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',
-    navigationBarTitleText: 'WeChat',
+    navigationBarTitleText: 'EVA Notify',
     navigationBarTextStyle: 'black',
   },
   tabBar: {

src/custom-tab-bar/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  component: true,
+};

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";

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}
+      />
+    );
+  }
+}

src/pages/index/index.config.ts

@@ -1,4 +1,3 @@
 export default definePageConfig({
-  navigationBarTitleText: '首页',
   usingComponents: {},
 });

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() {
+  // 以下是TabBar相关
-    console.log('Index is ready');
+  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>
     );

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>

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>