yjxp-web/src/components/Tabbar/index.vue

<template>
  <van-tabbar
    v-model="active"
    :placeholder="true"
    :route="true"
    fixed
    class="custom-tabbar"
  >
    <van-tabbar-item
      v-for="(item, index) in tabBarData"
      :key="index"
      :icon="item.icon"
      :to="item.to"
    >
      <template #icon="props">
        <van-badge :content="item.num" max="99" :show-zero="false">
          <img
            :src="getImageUrl(props.active ? item.iconActive : item.icon)"
            alt=""
          />
        </van-badge>
      </template>
        <div>{{ item.title }}</div>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue";
import useUserStore from "@/store/modules/user";
import { getUnreadMsgCount } from "@/api/InformationReception/InformationReception";

const active = ref(0);
let tabBarData = ref([]);

const getImageUrl = name => {
  return new URL(`../../assets/images/tabBar/${name}.png`, import.meta.url)
    .href;
};

// 设置定时器，刷新统计数
const fetchInterval = process.env.NODE_ENV === 'development' ? 60000 : 10000; // 每60秒刷新一次(刷新太频繁影响调试)
let intervalId: any | null = null;
const startFetchingData = () => {
  if (!intervalId) {
    intervalId = setInterval(() => {
      fetchData();
    }, fetchInterval);
  }
};

const stopFetchingData = () => {
  if (intervalId) {
    clearInterval(intervalId);
    intervalId = null;
  }
};

const fetchData = async () => {
  getUnreadMsgCount({"msg_types": "事件管理,值班管理"}).then((res)=>{
    tabBarData.value.forEach((v)=>{
      let obj = res.data.find(item=>item.name === v.title);
      if(obj) {
        v.num = ""+obj.num;
      }
    })
  })
}

watch(
    () => useUserStore().roles,
    () => {
      const roles = useUserStore().roles;
      if (roles.includes("leader")) {
        tabBarData.value = [
          {
            icon: "index",
            iconActive: "indexActive",
            title: "首页",
            num: '0',
            to: {
              name: "LeaderIndex"
            }
          },
          {
            icon: "command",
            iconActive: "commandActive",
            title: "移动指挥",
            num: '0',
            to: {
              name: "MobileControl"
            }
          },
          {
            icon: "threepro",
            iconActive: "threeproActive",
            title: "三防责任人",
            num: '0',
            to: {
              name: "ThreePreventionResponsiblePerson"
            }
          },
          // {
          //   icon: "contact",
          //   iconActive: "contactActive",
          //   title: "通讯录",
          //   to: {
          //     name: "AddressBook"
          //   }
          // },
          // {
          //   icon: "mine",
          //   iconActive: "mineActive",
          //   title: "我的",
          //   to: {
          //     name: "My"
          //   }
          // }
        ];
      } else if (roles.includes("worker")) {
        tabBarData.value = [
          {
            icon: "index",
            iconActive: "indexActive",
            title: "首页",
            num: '0',
            to: {
              name: "WorkerIndex"
            }
          },
          {
            icon: "command",
            iconActive: "commandActive",
            num: '0',
            title: "事件管理",
            to: {
              name: "workerEvent"
            }
          },
          {
            icon: "contact",
            iconActive: "contactActive",
            num: '0',
            title: "值班管理",
            to: {
              name: "Duty"
            }
          },
          // {
          //   icon: "mine",
          //   iconActive: "mineActive",
          //   title: "我的",
          //   to: {
          //     name: "My"
          //   }
          // }
        ];
        fetchData();
      }
    },
    {
      immediate: true,
      deep: true
    }
);

onMounted(() => {
  startFetchingData();
});
onUnmounted(() => {
  stopFetchingData();
});

</script>
<style lang="scss" scoped>
.custom-tabbar {
  height: 55px !important;
  :deep(.van-tabbar) {
    height: 55px !important;
  }
  :deep(.van-tabbar-item) {
    height: 55px !important;
  }
  :deep(.van-tabbar-item__icon) {
    .van-badge {
      margin-top: 0;
    }
    .van-badge--top-right {
      top: 7px
    }
  }
}
</style>