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">
        <img
          :src="getImageUrl(props.active ? item.iconActive : item.icon)"
          alt=""
        />
      </template>
      {{ item.title }}
    </van-tabbar-item>
  </van-tabbar>
</template>

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

const active = ref(0);
let tabBarData = reactive([]);
watch(
  () => useUserStore().roles,
  () => {
    const roles = useUserStore().roles;
    if (roles.includes("leader")) {
      tabBarData = [
        {
          icon: "index",
          iconActive: "indexActive",
          title: "首页",
          to: {
            name: "LeaderIndex"
          }
        },
        {
          icon: "command",
          iconActive: "commandActive",
          title: "移动指挥",
          to: {
            name: "MobileControl"
          }
        },
        {
          icon: "contact",
          iconActive: "contactActive",
          title: "通讯录",
          to: {
            name: "AddressBook"
          }
        },
        {
          icon: "mine",
          iconActive: "mineActive",
          title: "我的",
          to: {
            name: "My"
          }
        }
      ];
    } else if (roles.includes("worker")) {
      tabBarData = [
        {
          icon: "index",
          iconActive: "indexActive",
          title: "首页",
          to: {
            name: "WorkerIndex"
          }
        },
        {
          icon: "command",
          iconActive: "commandActive",
          title: "事件管理",
          to: {
            name: "workerEvent"
          }
        },
        {
          icon: "contact",
          iconActive: "contactActive",
          title: "值班管理",
          to: {
            name: "Duty"
          }
        },
        {
          icon: "mine",
          iconActive: "mineActive",
          title: "我的",
          to: {
            name: "My"
          }
        }
      ];
    }
  },
  {
    immediate: true,
    deep: true
  }
);

const getImageUrl = name => {
  return new URL(`../../assets/images/tabBar/${name}.png`, import.meta.url)
    .href;
};
onMounted(() => {
  /*
  const mobile_control_status =
    localStorage.getItem("mobile_control_status") || "0";
  // 动态切换平时态或者应急态
  if (mobile_control_status === "1") {
    tabBarData[1] = {
      icon: "command",
      iconActive: "command",
      title: "移动指挥",
      to: {
        name: "MobileControl"
      }
    };
  }
  */
});
</script>
<style lang="scss" scoped>
.custom-tabbar {
  height: 55px !important;
  :deep(.van-tabbar) {
    height: 55px !important;
  }
  :deep(.van-tabbar-item) {
    height: 55px !important;
  }
}
</style>