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">
        <!-- keep-alive 必须常驻；用内部 component 的 v-if 区分是否缓存，避免切到非缓存页时整棵 keep-alive 被销毁 -->
        <router-view v-slot="{ Component }">
            <keep-alive>
                <component :is="Component" v-if="Component && route.meta.keepAlive" :key="route.name" />
            </keep-alive>
            <component :is="Component" v-if="Component && !route.meta.keepAlive" :key="route.name" />
        </router-view>


        <Tabbar class="tabbar" route fixed v-show="showTab" active-color="#FFD489" inactive-color="#B5B5B5">
            <tabbar-item replace to="/growth_report">
                <span>{{ t("tabbar.situationAssessment") }}</span>
                <template #icon="props">
                    <img :class="props.active ? 'active-icon' : 'inactive-icon'"
                        src="@/assets/img/tab_bar/home-active.png" />
                </template>
            </tabbar-item>
            <tabbar-item replace to="/diagnosis_report">
                <span>诊断报告</span>
                <template #icon="props">
                    <img :class="props.active ? 'active-icon' : 'inactive-icon'"
                        src="@/assets/img/tab_bar/report-active.png" />
                </template>
            </tabbar-item>
            <tabbar-item replace to="/agri_file">
                <span>{{ t("tabbar.agriFile") }}</span>
                <template #icon="props">
                    <img :class="props.active ? 'active-icon' : 'inactive-icon'"
                        src="@/assets/img/tab_bar/tree-active.png" />
                </template>
            </tabbar-item>
            <tabbar-item replace to="/work_execute">
                <span>{{ t("tabbar.schedule") }}</span>
                <template #icon="props">
                    <img :class="props.active ? 'active-icon' : 'inactive-icon'"
                        src="@/assets/img/tab_bar/task-active.png" />
                </template>
            </tabbar-item>
        </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;
    --van-tabbar-background: #1D1D1D;
    --van-tabbar-item-active-background: #1D1D1D;

    .inactive-icon {
        filter: grayscale(100%);
    }
    &::after {
        border: none;
    }
}
</style>

<style lang="scss">
.van-overlay {
    backdrop-filter: blur(4px);
}
</style>