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">
const showStorage = ref(false);

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

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

// data-driven nav items
const navs = [
    {
        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',
    },
];

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>