miniapp/src/layouts/TabBar.jsx

import React from 'react';
import Taro from '@tarojs/taro';
import { Image } from '@tarojs/components';
import { Tabbar, TabbarItem } from '@antmjs/vantui';
import {
  ROLE_INSPECTOR,
  ROLE_MANAGER,
  ROLE_ORG_USER,
  ROLE_ORG_MANAGER,
  ROLE_QUERY_PERSON,
  ROLE_CITIZEN
} from '@/utils/user';
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 home = {
  name: 'home',
  label: '首页',
  icon: homeIcon,
  activeIcon: homeActiveIcon,
  page: '/pages/home/index'
}
const notice = {
  name: 'notice',
  label: '公告',
  icon: noticeIcon,
  activeIcon: noticeActiveIcon,
  page: '/pages/notice/index'
}
const issue = {
  name: 'issue',
  label: '发布',
  icon: issueIcon,
  activeIcon: issueActiveIcon,
  page: '/pages/issue/edit/index'
}
const check = {
  name: 'check',
  label: '测评标准',
  icon: checkIcon,
  activeIcon: checkActiveIcon,
  page: '/pages/checkStand/index'
}
const mine = {
  name: 'mine',
  label: '我的',
  icon: mineIcon,
  activeIcon: mineActiveIcon,
  page: '/pages/my/index'
}

export default (props) => {
  const { active = -1, className, user } = props;

  const tabItems = React.useMemo(() => {
    if (!user) return [];

    if (user.dutyList.indexOf(ROLE_INSPECTOR) > -1 // 督察员
      || user.dutyList.indexOf(ROLE_MANAGER) > -1 // 管理员
    ) {
      return [
        home,
        notice,
        issue,
        check,
        mine
      ]
    }

    if (user.dutyList.indexOf(ROLE_ORG_USER) > -1) {
      return [
        home,
        notice,
        mine,
      ]
    }

    return [];
  }, [user]);

  const onChange = (e) => {
    const url = tabItems.filter(x => x.name === e.detail)[0].page;
    Taro.reLaunch({ url })
  }

  return (
    <Tabbar
      activeColor="#1A7565"
      className={className}
      active={active}
      onChange={onChange}
    >
      {
        tabItems.map(item => (
          <TabbarItem
            key={item.name}
            name={item.name}
            renderIcon={
              <Image
                src={item.icon}
                mode="aspectFit"
                style="width: 30px; height: 18px;"
              ></Image>
            }
            renderIconActive={
              <Image
                src={item.activeIcon}
                mode="aspectFit"
                style="width: 30px; height: 18px;"
              ></Image>
            }
          >
            {item.label}
          </TabbarItem>
        ))
      }
    </Tabbar>
  )
}