feats

src/app.config.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-undef
 export default defineAppConfig({
   pages: [
     'pages/home/index',
@@ -10,40 +11,6 @@ export default defineAppConfig({
     'pages/reporting/detail/index',
     'pages/reset-password/index',
   ],
-  tabBar: {
-    list: [
-      {
-        pagePath: "pages/home/index",
-        text: "首页",
-        iconPath: "/assets/tabbar/page.png",
-        selectedIconPath: "/assets/tabbar/page click.png"
-      },
-      {
-        pagePath: "pages/reporting/index",
-        text: "公告",
-        iconPath: "/assets/tabbar/notice.png",
-        selectedIconPath: "/assets/tabbar/notice click.png"
-      },
-      {
-        pagePath: "pages/index3/index",
-        text: "发布",
-        iconPath: "/assets/tabbar/release.png",
-        selectedIconPath: "/assets/tabbar/release click.png"
-      },
-      {
-        pagePath: "pages/index4/index",
-        text: "测评标准",
-        iconPath: "/assets/tabbar/evaluation.png",
-        selectedIconPath: "/assets/tabbar/evaluation click.png"
-      },
-      {
-        pagePath: "pages/index5/index",
-        text: "我的",
-        iconPath: "/assets/tabbar/my.png",
-        selectedIconPath: "/assets/tabbar/my click.png"
-      },
-    ],
-  },
   window: {
     // backgroundColor: '#1A7565',
     backgroundTextStyle: 'light',

src/layouts/TabBar.jsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { Image } from '@tarojs/components';
+import { Tabbar, TabbarItem } from '@antmjs/vantui';
+import homeIcon from '@/assets/tabbar/page.png';
+import homeActiveIcon from '@/assets/tabbar/page click.png';
+import noticeIcon from '@/assets/tabbar/notice.png';
+import noticeActiveIcon from '@/assets/tabbar/notice click.png';
+import issueIcon from '@/assets/tabbar/release.png';
+import issueActiveIcon from '@/assets/tabbar/release click.png';
+import checkIcon from '@/assets/tabbar/evaluation.png';
+import checkActiveIcon from '@/assets/tabbar/evaluation click.png';
+import mineIcon from '@/assets/tabbar/my.png';
+import mineActiveIcon from '@/assets/tabbar/my click.png';
+
+const tabPages = {
+  home: '/pages/home/index',
+  notice: '/pages/index3/index',
+  issue: '/pages/issue/add/index',
+  check: '/pages/index4/index',
+  mine: '/pages/index5/index',
+}
+
+export default (props) => {
+  const { active = -1, className } = props;
+
+  const onChange = (e) => {
+    Taro.reLaunch({
+      url: tabPages[e.detail]
+    })
+  }
+
+  return (
+    <Tabbar
+      activeColor="#1A7565"
+      className={className}
+      active={active}
+      onChange={onChange}
+    >
+      <TabbarItem
+        name="home"
+        renderIcon={
+          <Image
+            src={homeIcon}
+            mode="aspectFit"
+            style="width: 30px; height: 18px;"
+          ></Image>
+        }
+        renderIconActive={
+          <Image
+            src={homeActiveIcon}
+            mode="aspectFit"
+            style="width: 30px; height: 18px;"
+          ></Image>
+        }
+      >
+        首页
+      </TabbarItem>
+      <TabbarItem
+        name="notice"
+        renderIcon={
+          <Image
+            src={noticeIcon}
+            mode="aspectFit"
+            style="width: 30px; height: 18px;"
+          ></Image>
+        }
+        renderIconActive={
+          <Image
+            src={noticeActiveIcon}
+            mode="aspectFit"
+            style="width: 30px; height: 18px;"
+          ></Image>
+        }
+      >
+        公告
+      </TabbarItem>
+      <TabbarItem
+        name="issue"
+        renderIcon={
+          <Image
+            src={issueIcon}
+            mode="aspectFit"
+            style="width: 30px; height: 18px;"
+          ></Image>
+        }
+        renderIconActive={
+          <Image
+            src={issueActiveIcon}
+            mode="aspectFit"
+            style="width: 30px; height: 18px;"
+          ></Image>
+        }
+      >
+        发布
+      </TabbarItem>
+      <TabbarItem
+        name="check"
+        renderIcon={
+          <Image
+            src={checkIcon}
+            mode="aspectFit"
+            style="width: 30px; height: 18px;"
+          ></Image>
+        }
+        renderIconActive={
+          <Image
+            src={checkActiveIcon}
+            mode="aspectFit"
+            style="width: 30px; height: 18px;"
+          ></Image>
+        }
+      >
+        测评标准
+      </TabbarItem>
+      <TabbarItem
+        name="mine"
+        renderIcon={
+          <Image
+            src={mineIcon}
+            mode="aspectFit"
+            style="width: 30px; height: 18px;"
+          ></Image>
+        }
+        renderIconActive={
+          <Image
+            src={mineActiveIcon}
+            mode="aspectFit"
+            style="width: 30px; height: 18px;"
+          ></Image>
+        }
+      >
+        我的
+      </TabbarItem>
+    </Tabbar>
+  )
+}

src/layouts/index.jsx

@@ -1,26 +1,19 @@
 import React from 'react';
 import Taro from '@tarojs/taro';
-import { View } from '@tarojs/components';
+import { View, Image } from '@tarojs/components';
 import { useModel } from '@/store';
 import { Loading } from '@antmjs/vantui';
 import Auth from '@/components/Auth';
+import TabBar from './TabBar';
 import laySty from './layout.module.less';
 
 export default (props) => {
-  const { className, style, roles, showTabBar } = props;
+  const { className, style, roles, tabBar = false } = props;
 
   const { person, user } = useModel('user');
 
   const classNames = `${laySty['page-wrapper']} ${className}`;
 
-  React.useMemo(() => {
-    if (showTabBar) {
-      Taro.showTabBar();
-    } else {
-      Taro.hideTabBar();
-    }
-  }, [showTabBar]);
-
   React.useEffect(() => {
     if (person && !user) {
       const currentPage = Taro.getCurrentPages().slice().pop();      
@@ -34,18 +27,23 @@ export default (props) => {
 
   return (
     <View className={classNames} style={style}>
+      <View className={laySty['page-conatiner']}>
+        {
+          !person && (
+            <View className={laySty.loading}>
+              <Loading size="32px" vertical>
+                加载中...
+              </Loading>
+            </View>
+          )
+        }
+        <Auth roles={roles}>
+        {props.children}
+        </Auth>
+      </View>
       {
-        !person && (
-          <View className={laySty.loading}>
-            <Loading size="32px" vertical>
-              加载中...
-            </Loading>
-          </View>
-        )
+        tabBar && <TabBar className={laySty['page-tabbar']} active={tabBar} />
       }
-      <Auth roles={roles}>
-      {props.children}
-      </Auth>
     </View>
   )
 }

src/layouts/layout.module.less

@@ -1,7 +1,20 @@
 
 .page-wrapper {
   position: relative;
-  height: 100%;
+  width: 100%;
+  box-sizing: content-box;
+  height: calc(100% - env(safe-area-inset-bottom));
+  padding-bottom: env(safe-area-inset-bottom);
+
+  .page-conatiner {
+    width: 100%;
+    height: calc(100% - var(--tabbar-height, 100rpx));
+    overflow: hidden;
+  }
+
+  .page-tabbar {
+    flex: none;
+  }
 
   .loading {
     position: fixed;

src/pages/home/index.jsx

@@ -12,7 +12,7 @@ export default (props) => {
   const { user } = useModel('user');
 
   return (
-    <Page showTabBar className='index'>
+    <Page tabBar="home" className='index'>
       <Head user={user} />
       <BannerCard />
       <MenuCard />