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> -->
    <el-config-provider :locale="elementLocale">
    <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="/growth_report">
                <span>{{ t("tabbar.growthReport") }}</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="/agri_file">
                <span>{{ t("tabbar.agriFile") }}</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>{{ t("tabbar.agriRecord") }}</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>
            <tabbar-item replace to="/youwei_trace">
                <span>{{ t("tabbar.trace") }}</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>
        <!-- </template> -->

        <!-- 普通农户：首页、农事服务、用户管理、个人中心（保留原逻辑） -->
        <!-- <template v-else-if="userType == 1">
            <tabbar-item replace to="/home" v-if="curRole == 0 || curRole == 2">
                <span>{{ $t('首页') }}</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>{{ $t('农事服务') }}</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>{{ $t('用户管理') }}</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>{{ $t('个人中心') }}</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 />
    </el-config-provider>
</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";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/en";
import { useI18n } from "@/i18n";

const { t, locale } = useI18n();
const store = useStore();
const elementLocale = computed(() => (locale.value === "en" ? en : zhCn));
const route = useRoute();
const router = useRouter();

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

// 获取用户是否为托管农户，并缓存 USER_TYPE（与 dev_login.vue 逻辑一致）
const fetchUserType = async () => {
    
    userType.value = "2";
    localStorage.setItem("USER_TYPE", "2");

    // // 检查是否有 token，没有 token 则不调用接口
    // const token = store.state.app.token || localStorage.getItem("token");
    // if (!token) {
    //     // 没有 token 时使用缓存的值
    //     userType.value = localStorage.getItem("USER_TYPE") || "1";
    //     return;
    // }

    // try {
    //     const { data } = await VE_API.farm.userFarmSelectOption({ userType: 2 });
    //     if (Array.isArray(data) && data.length > 0) {
    //         // 有托管农户数据
    //         userType.value = "2";
    //         localStorage.setItem("USER_TYPE", "2");
    //     } else {
    //         userType.value = "1";
    //         localStorage.setItem("USER_TYPE", "1");
    //     }
    // } catch (error) {
    //     // 请求失败时保留默认值
    //     userType.value = localStorage.getItem("USER_TYPE") || "1";
    // }
};

let tabBarHeight = 0;

// 监听 token 变化，当有 token 时调用接口获取用户类型
watch(
    () => store.state.app.token,
    (newToken) => {
        if (newToken) {
            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>