|
|
@@ -1,47 +1,78 @@
|
|
|
<template>
|
|
|
- <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="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/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'" class="w-80 h-80" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomBaseActive.png" mode="widthFix" />
|
|
|
- <image v-else class="w-80 h-80" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomBase.png" mode="widthFix" />
|
|
|
- <view class="text-center" :class="activeTab === 'base' ? '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'" class="w-80 h-80" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomPlantingBreedingActive.png" mode="widthFix" />
|
|
|
- <image v-else class="w-80 h-80" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomPlantingBreeding.png" mode="widthFix" />
|
|
|
- <view class="text-center" :class="activeTab === 'planting' ? 'c-primary f-w-5' : ''">种养殖</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="w-126 d-flex a-c j-c p-rtv" @click="$u.route({ type: 'switchTab', url: '/pages/plant/storage/index' })">
|
|
|
- <image v-if="activeTab === 'storage'" class="w-80 h-80" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomWarehouseActive.png" mode="widthFix" style="position: absolute; top: -40rpx" />
|
|
|
- <image v-else class="w-80 h-80" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomWarehouse.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" @click="$u.route({ type: 'switchTab', url: '/pages/plant/processing/index' })">
|
|
|
- <image v-if="activeTab === 'processing'" class="w-80 h-80" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomProcessingPackagingActive.png" mode="widthFix" />
|
|
|
- <image v-else class="w-80 h-80" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomProcessingPackaging.png" mode="widthFix" />
|
|
|
- <view class="text-center" :class="activeTab === 'processing' ? 'c-primary f-w-5' : ''">加工包装</view>
|
|
|
- </view>
|
|
|
- <view @click="$u.route({ type: 'switchTab', url: '/pages/plant/more/index' })" class="c-#999 f-s-24 d-flex flex-cln j-c a-c">
|
|
|
- <image v-if="activeTab === 'more'" class="w-80 h-80" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomMoreActive.png" mode="widthFix" />
|
|
|
- <image v-else class="w-80 h-80" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomMore.png" mode="widthFix" />
|
|
|
- <view class="text-center" :class="activeTab === 'more' ? 'c-primary f-w-5' : ''">更多</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <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 class="bg-#fff" :style="{ height: `${safeAreaBottom}px` }"></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>
|