delivery-depot-uniapp/pages/grainDepositor/grainDepositorLayout.vue

<template>
  <view class="container">
    <select-warehouse v-if="currentTab == 0"></select-warehouse>
    <my-warehouse v-if="currentTab == 1"></my-warehouse>
    <system-settings v-if="currentTab == 2"></system-settings>
    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view
        class="tab-item"
        :class="{ active: currentTab == 0 }"
        @click="switchTab(0)"
      >
		<text class="iconfont icon-xuanze" :style="{ color: currentTab === 0 ? '#1d5fdf' : '748498' }"></text>
        <text>选择交收库</text>
      </view>
      <view
        class="tab-item"
        :class="{ active: currentTab == 1 }"
        @click="switchTab(1)"
      >
		<text class="iconfont icon-cangku" :style="{ color: currentTab === 1 ? '#1d5fdf' : '748498' }"></text>
        <text>我的交收库</text>
      </view>
      <view
        class="tab-item"
        :class="{ active: currentTab == 2 }"
        @click="switchTab(2)"
      >
		<text class="iconfont icon-shezhi" :style="{ color: currentTab === 2 ? '#1d5fdf' : '748498' }"></text>
        <text>系统设置</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import SelectWarehouse from "./components/selectWarehouse.vue";
import MyWarehouse from "./components/myWarehouse.vue";
import SystemSettings from "@/pages/systemSet/systemSet.vue";
import { ref, reactive, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const currentTab = ref(0);

const switchTab = (index) => {
  currentTab.value = index;
}

onLoad(async (options) => {
  if (options && options.tabIndex) {
	  currentTab.value = options.tabIndex;
  }
})
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;
  background: linear-gradient(180deg, #cfddfc 0%, #eff2f5 30%);
  position: relative;
  padding-bottom: 100rpx;
}

.tab-bar {
  height: 100rpx;
  display: flex;
  background-color: #FFFFFF;
  border-top: 1rpx solid #BDC1C4;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: #738598;
	.iconfont{ font-size: 44rpx;}
	
    &.active {
      color: #1E60DC;
    }

    text {
      margin-top: 4rpx;
    }
  }
}
</style>