ut-tabar.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <view class="d-flex a-c j-sb bg-fff pd-10">
  3. <view
  4. v-for="item in navs"
  5. :key="item.id"
  6. @click="navigate(item)"
  7. class="c-#999 f-s-24 d-flex flex-cln j-c a-c flex1"
  8. >
  9. <image
  10. :class="'w-64 h-64'"
  11. :src="activeTab === item.id ? item.activeIcon : item.icon"
  12. mode="widthFix"
  13. />
  14. <view class="text-center" :class="activeTab === item.id ? 'c-primary f-w-5' : ''">
  15. {{ item.label }}
  16. </view>
  17. </view>
  18. </view>
  19. <view class="bg-fff" :style="{ height: `${safeAreaBottom}px` }"></view>
  20. </template>
  21. <script setup lang="ts">
  22. const showStorage = ref(false);
  23. defineProps<{
  24. activeTab?: string; // 当前活跃的tab标识符:'base' | 'planting' | 'warehouse' | 'processing' | 'more'
  25. }>();
  26. const windowInfo = uni.getWindowInfo();
  27. const safeAreaBottom = windowInfo.safeAreaInsets.bottom;
  28. // data-driven nav items
  29. const navs = [
  30. {
  31. id: 'base',
  32. label: '基地',
  33. icon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomBase.png',
  34. activeIcon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomBaseActive.png',
  35. url: '/pages/plant/base/index',
  36. },
  37. {
  38. id: 'planting',
  39. label: '种养殖',
  40. icon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomPlantingBreeding.png',
  41. activeIcon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomPlantingBreedingActive.png',
  42. url: '/pages/plant/port/index',
  43. },
  44. {
  45. id: 'processing',
  46. label: '加工包装',
  47. icon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomProcessingPackaging.png',
  48. activeIcon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomProcessingPackagingActive.png',
  49. url: '/pages/plant/processing/index',
  50. },
  51. {
  52. id: 'storage',
  53. label: '仓储',
  54. icon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomWarehouse.png',
  55. activeIcon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomWarehouseActive.png',
  56. url: '/pages/plant/storage/index',
  57. },
  58. {
  59. id: 'more',
  60. label: '更多',
  61. icon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomMore.png',
  62. activeIcon: 'https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/bottomMoreActive.png',
  63. url: '/pages/plant/more/index',
  64. },
  65. ];
  66. function navigate(item: { id: string; url: string }) {
  67. // certain tabs should clear showStorage flag
  68. if (item.id === 'base' || item.id === 'planting') {
  69. showStorage.value = false;
  70. }
  71. uni.$u.route({ type: 'switchTab', url: item.url });
  72. }
  73. </script>