feiniao-farm-h5/src/App.vue

<!--
 * @Author: your name
 * @Date: 2021-01-07 09:49:29
 * @LastEditTime: 2021-11-01 14:08:55
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3-element-admin\src\App.vue
-->
<template>
    <!-- <router-view v-slot="{ Component }">
  <keep-alive exclude="GardenReport">
    <component :is="Component" />
  </keep-alive>
</router-view> -->
    <router-view v-slot="{ Component }">
        <keep-alive v-if="route.meta && route.meta.keepAlive">
            <component :is="Component" />
        </keep-alive>

        <component v-else :is="Component" />
    </router-view>

    <Tabbar class="tabbar" route fixed v-show="showTab" active-color="#2199F8" inactive-color="#898989">
        <tabbar-item replace to="/home" v-if="curRole == 0">
            <span>农场监测</span>
            <template #icon="props">
                <img
                    :src="
                        props.active
                            ? require('@/assets/img/tab_bar/home-active.png')
                            : require('@/assets/img/tab_bar/home.png')
                    "
                />
            </template>
        </tabbar-item>
        <!-- 专家 -->
        <tabbar-item replace to="/farm_manage" v-if="curRole == 1">
            <span>农场管理</span>
            <template #icon="props">
                <img
                    :src="
                        props.active
                            ? require('@/assets/img/tab_bar/home-active.png')
                            : require('@/assets/img/tab_bar/home.png')
                    "
                />
            </template>
        </tabbar-item>
        <tabbar-item replace to="/task_condition" v-if="curRole == 2">
            <span>农情需求</span>
            <template #icon="props">
                <img
                    :src="
                        props.active
                            ? require('@/assets/img/tab_bar/service-active.png')
                            : require('@/assets/img/tab_bar/service.png')
                    "
                />
            </template>
        </tabbar-item>
        <tabbar-item replace to="/plan" v-if="curRole != 2">
            <span>农事方案</span>
            <template #icon="props">
                <img
                    :src="
                        props.active
                            ? require('@/assets/img/tab_bar/farm-active.png')
                            : require('@/assets/img/tab_bar/farm.png')
                    "
                />
            </template>
        </tabbar-item>
        <tabbar-item replace to="/message" v-if="curRole == 0">
            <span>农资农服</span>
            <template #icon="props">
                <img
                    :src="
                        props.active
                            ? require('@/assets/img/tab_bar/service-active.png')
                            : require('@/assets/img/tab_bar/service.png')
                    "
                />
            </template>
        </tabbar-item>
        <tabbar-item replace to="/user" v-if="curRole != 0">
            <span>用户管理</span>
            <template #icon="props">
                <img
                    :src="
                        props.active
                            ? require('@/assets/img/tab_bar/user-active.png')
                            : require('@/assets/img/tab_bar/user.png')
                    "
                />
            </template>
        </tabbar-item>
        <tabbar-item replace to="/mine">
            <span>个人中心</span>
            <template #icon="props">
                <img
                    :src="
                        props.active
                            ? require('@/assets/img/tab_bar/mine-active.png')
                            : require('@/assets/img/tab_bar/mine.png')
                    "
                />
            </template>
        </tabbar-item>
    </Tabbar>

    <!-- 开启底部安全区适配 -->
    <number-keyboard safe-area-inset-bottom />
</template>

<script setup>
import { NumberKeyboard } from "vant";
import { Tabbar, TabbarItem } from "vant";
import { nextTick, watch, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
// import {NH,NF,NZ,EXPERT} from "@/common/user_role";
const store = useStore();
const route = useRoute();
const router = useRouter();

// 首页loading加载完才显示底部导航栏
const showTab = ref(false);
// 0: 农户, 1: 专家, 2:农资农服
const curRole = ref(2);

let tabBarHeight = 0;
onMounted(() => {
    setTimeout(() => {
        if (route.meta.showTabbar) {
            showTab.value = true;
        }
        nextTick(() => {
            const tabBarElement = document.querySelector(".van-tabbar");
            if (tabBarElement) {
                tabBarHeight = tabBarElement.offsetHeight;
                localStorage.setItem("tabBarHeight", tabBarHeight);
                store.commit("home/SET_TAB_BAR_HEIGHT", tabBarHeight);
            }
        });
    }, 500);
});

watch(
    () => route.name,
    (newName, oldName) => {
        // 在这里执行你的自定义逻辑
        showTab.value = false;
        if (route.meta.showTabbar) {
            showTab.value = true;
        }
        nextTick(() => {
            const tabBarElement = document.querySelector(".van-tabbar");
            if (tabBarElement) {
                tabBarHeight = tabBarElement.offsetHeight;
                localStorage.setItem("tabBarHeight", tabBarHeight);
                store.commit("home/SET_TAB_BAR_HEIGHT", tabBarHeight);
            }
        });
    },
    { immediate: false }
);
</script>
<style lang="scss" scoped>
.tabbar {
    position: fixed;
    pointer-events: all;
    z-index: 9999;
}
</style>