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

<template>
    <up-popup v-model:show="showStorage" title="请选择操作类型" bgColor="#F7F7F7" round="0" zIndex="1000" closeable>
        <view class="min-h-600">
            <view class="c-#333 f-s-34 f-w-500 pd-24">请选择操作类型</view>
            <view class="pd2-10-24">
                <up-grid :border="false" :column="3" gap="10rpx">
                    <up-grid-item>
                        <view class="pd2-10-0 d-flex flex-cln a-c j-c" @click="showStorage = false;$u.route({ url: '/plant/storage/storage-room/list/index' })">
                            <view class="w-109 h-109 bg-#fff radius-50% d-flex a-c j-c mb-10">
                                <image class="w-72 h-72" src="@/static/images/plant/storage/nav_kfgl_icon.png" mode="widthFix" />
                            </view>
                            <view class="c-#333 f-s-28 text-center">库房管理</view>
                        </view>
                    </up-grid-item>
                    <up-grid-item>
                        <view class="pd2-10-0 d-flex flex-cln a-c j-c">
                            <view class="w-109 h-109 bg-#fff radius-50% d-flex a-c j-c mb-10">
                                <image class="w-72 h-72" src="@/static/images/plant/storage/nav_nzk_icon.png" mode="widthFix" />
                            </view>
                            <view class="c-#333 f-s-28 text-center">农资库</view>
                        </view>
                    </up-grid-item>
                    <up-grid-item>
                        <view class="pd2-10-0 d-flex flex-cln a-c j-c">
                            <view class="w-109 h-109 bg-#fff radius-50% d-flex a-c j-c mb-10">
                                <image class="w-72 h-72" src="@/static/images/plant/storage/nav_zyk_icon.png" mode="widthFix" />
                            </view>
                            <view class="c-#333 f-s-28 text-center">种源库</view>
                        </view>
                    </up-grid-item>
                    <up-grid-item>
                        <view class="pd2-10-0 d-flex flex-cln a-c j-c">
                            <view class="w-109 h-109 bg-#fff radius-50% d-flex a-c j-c mb-10">
                                <image class="w-72 h-72" src="@/static/images/plant/storage/nav_xhk_icon.png" mode="widthFix" />
                            </view>
                            <view class="c-#333 f-s-28 text-center">鲜货库</view>
                        </view>
                    </up-grid-item>
                    <up-grid-item>
                        <view class="pd2-10-0 d-flex flex-cln a-c j-c">
                            <view class="w-109 h-109 bg-#fff radius-50% d-flex a-c j-c mb-10">
                                <image class="w-72 h-72" src="@/static/images/plant/storage/nav_zjpk_icon.png" mode="widthFix" />
                            </view>
                            <view class="c-#333 f-s-28 text-center">中间品库</view>
                        </view>
                    </up-grid-item>
                    <up-grid-item>
                        <view class="pd2-10-0 d-flex flex-cln a-c j-c">
                            <view class="w-109 h-109 bg-#fff radius-50% d-flex a-c j-c mb-10">
                                <image class="w-72 h-72" src="@/static/images/plant/storage/nav_cpk_icon.png" mode="widthFix" />
                            </view>
                            <view class="c-#333 f-s-28 text-center">成品库</view>
                        </view>
                    </up-grid-item>
                </up-grid>
            </view>
            <view class="h-210"></view>
        </view>
    </up-popup>
    <view class="w-100%" style="position: fixed; bottom: 0; left: 0; z-index: 1100">
        <view class="p-rtv" style="height: 210rpx">
            <image class="w-100%" src="/static/images/plant/bottombg.png" mode="widthFix" style="position: absolute; bottom: 0; left: 0; z-index: -1" />
            <view class="d-flex h-140 w-100% j-sa" style="position: absolute; bottom: 0; left: 0">
                <view class="d-flex a-c flex1 j-sa">
                    <view @click="showStorage = false;$u.route({ type: 'switchTab', url: '/pages/plant/base/index' })" class="c-#999 f-s-24 d-flex flex-cln j-c a-c">
                        <image v-if="activeTab === 'base' && !showStorage" class="w-80 h-80" src="/static/images/plant/bottomBaseActive.png" mode="widthFix" />
                        <image v-else class="w-80 h-80" src="/static/images/plant/bottomBase.png" mode="widthFix" />
                        <view class="text-center" :class="activeTab === 'base' && !showStorage ? 'c-primary f-w-5' : ''">基地</view>
                    </view>
                    <view @click="showStorage = false;$u.route({ type: 'switchTab', url: '/pages/plant/port/index' })" class="c-#999 f-s-24 d-flex flex-cln j-c a-c">
                        <image v-if="activeTab === 'planting' && !showStorage" class="w-80 h-80" src="/static/images/plant/bottomPlantingBreedingActive.png" mode="widthFix" />
                        <image v-else class="w-80 h-80" src="/static/images/plant/bottomPlantingBreeding.png" mode="widthFix" />
                        <view class="text-center" :class="activeTab === 'planting' && !showStorage ? 'c-primary f-w-5' : ''">种养殖</view>
                    </view>
                </view>
                <view class="w-126 d-flex a-c j-c p-rtv" @click="showStorage = !showStorage">
                    <image v-if="!showStorage" class="w-80 h-80" src="/static/images/plant/bottomWarehouse.png" mode="widthFix" style="position: absolute; top: -40rpx" />
                    <image v-else class="w-80 h-80" src="/static/images/plant/bottomWarehouseActive.png" mode="widthFix" style="position: absolute; top: -40rpx" />
                </view>
                <view class="d-flex a-c flex1 j-sa">
                    <view class="c-#999 f-s-24 d-flex flex-cln j-c a-c">
                        <image v-if="activeTab === 'processing' && !showStorage" class="w-80 h-80" src="/static/images/plant/bottomProcessingPackagingActive.png" mode="widthFix" />
                        <image v-else class="w-80 h-80" src="/static/images/plant/bottomProcessingPackaging.png" mode="widthFix" />
                        <view class="text-center" :class="activeTab === 'processing'  && !showStorage ? 'c-primary f-w-5' : ''">加工包装</view>
                    </view>
                    <view class="c-#999 f-s-24 d-flex flex-cln j-c a-c">
                        <image v-if="activeTab === 'more' && !showStorage" class="w-80 h-80" src="/static/images/plant/bottomMoreActive.png" mode="widthFix" />
                        <image v-else class="w-80 h-80" src="/static/images/plant/bottomMore.png" mode="widthFix" />
                        <view class="text-center" :class="activeTab === 'more' && !showStorage ? 'c-primary f-w-5' : ''">更多</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="bg-#fff" :style="{ height: `${safeAreaBottom}px` }"></view>
    </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;
</script>