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">
        <!-- 托管农户：首页、作物档案、农事记录 -->
        <template v-if="userType == 2">
            <tabbar-item replace to="/home">
                <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="/monitor">
                <span>作物档案</span>
                <template #icon="props">
                    <img
                        :src="
                            props.active
                                ? require('@/assets/img/tab_bar/tree-active.png')
                                : require('@/assets/img/tab_bar/tree.png')
                        "
                    />
                </template>
            </tabbar-item>
            <tabbar-item replace to="/agri_record">
                <span>农事记录</span>
                <template #icon="props">
                    <img
                        :src="
                            props.active
                                ? require('@/assets/img/tab_bar/task-active.png')
                                : require('@/assets/img/tab_bar/task.png')
                        "
                    />
                </template>
            </tabbar-item>
        </template>

        <!-- 普通农户：首页、农事服务、用户管理、个人中心（保留原逻辑） -->
        <template v-else-if="userType == 1">
            <tabbar-item replace to="/home" v-if="curRole == 0 || curRole == 2">
                <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">
                <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">
                <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>
        </template>
    </Tabbar>

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

<script setup>
import { NumberKeyboard } from "vant";
import { Tabbar, TabbarItem } from "vant";
import { nextTick, watch, onMounted, ref, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { NH, 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(0);

let tabBarHeight = 0;

// USER_TYPE: 1 普通农户，2 托管农户
const userType = ref(localStorage.getItem("USER_TYPE") || null);
// 防止重复请求的标志
const isFetchingUserType = ref(false);

// 获取用户是否为托管农户，并缓存 USER_TYPE
const fetchUserType = async () => {
    if (isFetchingUserType.value) return;
    isFetchingUserType.value = true;
    try {
        const { data } = await VE_API.farm.userFarmSelectOption({ userType: 2 });
        if (Array.isArray(data) && data.length > 0) {
            localStorage.setItem("USER_TYPE", "2");
            userType.value = "2";
        } else {
            localStorage.setItem("USER_TYPE", "1");
            userType.value = "1";
        }
    } catch (error) {
        // 获取用户类型失败时的错误处理
    } finally {
        isFetchingUserType.value = false;
    }
};

// 监听 token 变化，当有 token 时获取用户类型
const token = computed(() => store.getters.token);
watch(token, async (newToken) => {
    if (newToken) {
        await fetchUserType();
    }
}, { immediate: true });

onMounted(() => {
    setTimeout(() => {
        curRole.value = store.state.app.curRole;
        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);
            }
            curRole.value = store.state.app.curRole
        });
    },
    { immediate: false }
);
</script>
<style lang="scss" scoped>
.tabbar {
    position: fixed;
    pointer-events: all;
    z-index: 9999;
}
</style>