manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/components/page/footer.vue

<template>
  <div class="w-full bg-white">
    <van-tabbar v-model="currentRouteName" safe-area-inset-bottom :fixed="false" @change="toPath">
      <template v-for="item in tabBarOption">
        <van-tabbar-item :name="item.pathName" :icon="item.icon" v-if="item.pathName != 'news'">{{ item.title
          }}</van-tabbar-item>
        <van-tabbar-item :name="item.pathName" :icon="item.icon"
          :badge="userInfo.numberOfMessages" v-else>{{ item.title }}</van-tabbar-item>
      </template>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, onActivated } from 'vue';
import { useRoute } from 'vue-router'
import { useLifecycle } from '@hooks/useCommon.js';
import useRouterStore from "@store/useRouterStore.js";
import useInfoStore from "@store/useInfoStore.js";
import tabBarOption from "../../tabBar"

const route = useRoute()
const router = useRouterStore()
const currentRouteName = ref(route.name)
const userInfo = useInfoStore()

function toPath(name) {
  router.switchTabBar({ pathName: name })
}

useLifecycle({
  load: () => {
    currentRouteName.value = route.name
  }
});

</script>

<style lang='scss' scoped>
/* 样式代码 */
</style>