forestry-wx/src/components/ut-tabar/ut-tabar.vue

<template>
    <view class="d-flex a-c j-sb bg-fff pd-10">
        <view v-for="item in navs" :key="item.id" @click="navigate(item)"
            class="c-#999 f-s-24 d-flex flex-cln j-c a-c flex1">
            <image :class="'w-64 h-64'" :src="activeTab === item.id ? item.activeIcon : item.icon" mode="widthFix" />
            <view class="text-center" :class="activeTab === item.id ? 'c-primary f-w-5' : ''">
                {{ item.label }}
            </view>
        </view>
    </view>
    <view class="bg-fff" :style="{ height: `${safeAreaBottom}px` }"></view>
</template>

<script setup lang="ts">
import { useInfoStore } from '@/store';
import { computed } from 'vue';

const showStorage = ref(false);
const infoStore = useInfoStore();

defineProps<{
    activeTab?: string; // 当前活跃的 tab 标识符：'base' | 'planting' | 'warehouse' | 'processing' | 'more'
}>();

const windowInfo = uni.getWindowInfo();
const safeAreaBottom = windowInfo.safeAreaInsets.bottom;

// 默认导航项
const defaultNavs = [
    {
        id: 'base',
        label: '基地',
        icon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomBase.png',
        activeIcon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomBaseActive.png',
        url: '/pages/plant/base/index',
    },
    {
        id: 'planting',
        label: '种养殖',
        icon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomPlantingBreeding.png',
        activeIcon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomPlantingBreedingActive.png',
        url: '/pages/plant/port/index',
    },
    {
        id: 'processing',
        label: '加工包装',
        icon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomProcessingPackaging.png',
        activeIcon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomProcessingPackagingActive.png',
        url: '/pages/plant/processing/index',
    },
    {
        id: 'storage',
        label: '仓储',
        icon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomWarehouse.png',
        activeIcon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomWarehouseActive.png',
        url: '/pages/plant/storage/index',
    },
    {
        id: 'more',
        label: '更多',
        icon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomMore.png',
        activeIcon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomMoreActive.png',
        url: '/pages/plant/more/index',
    },
];

// 自定义导航项（仅显示 processing, storage, more）
const customNavs = [
    {
        id: 'processing',
        label: '加工包装',
        icon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomProcessingPackaging.png',
        activeIcon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomProcessingPackagingActive.png',
        url: '/pages/plant/processing/index',
    },
    {
        id: 'storage',
        label: '仓储',
        icon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomWarehouse.png',
        activeIcon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomWarehouseActive.png',
        url: '/pages/plant/storage/index',
    },
    {
        id: 'more',
        label: '更多',
        icon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomMore.png',
        activeIcon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomMoreActive.png',
        url: '/pages/plant/more/index',
    },
];

// 根据 navConfig 动态计算导航项
const navs = computed(() => {
    if (infoStore.navConfig !== 'default') {
        return customNavs;
    }
    // 默认显示全部导航项
    return defaultNavs;
});

function navigate(item: { id: string; url: string }) {
    // certain tabs should clear showStorage flag
    if (item.id === 'base' || item.id === 'planting') {
        showStorage.value = false;
    }
    uni.$u.route({ type: 'switchTab', url: item.url });
}
</script>