delivery-depot-uniapp/pages/infoDetails/infoDetailsLayout.vue

<template>
  <view class="container">
    <hwk :baseInfo="hwkInfo" v-if="currentTab == 0"></hwk>
    <crk :kqInfo="1" v-if="currentTab == 1"></crk>
    <zj :kqInfo="1" v-if="currentTab == 2"></zj>
    <lqjc :kqInfo="1" v-if="currentTab == 3"></lqjc>
    <sy :kqInfo="1" v-if="currentTab == 4"></sy>
    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view
        class="tab-item"
        :class="{ active: currentTab == 0 }"
        @click="switchTab(0)"
      >
		<text class="iconfont icon-huoweika" :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-churuku" :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-zhijiandaibanrenwu" :style="{ color: currentTab === 2 ? '#1d5fdf' : '748498' }"></text>
        <text>质检</text>
      </view>
	  <view
	    class="tab-item"
	    :class="{ active: currentTab == 3 }"
	    @click="switchTab(3)"
	  >
	  		<text class="iconfont icon-liangqingjiance" :style="{ color: currentTab === 3 ? '#1d5fdf' : '748498' }"></text>
	    <text>粮情监测</text>
	  </view>
	  <view
	    class="tab-item"
	    :class="{ active: currentTab == 4 }"
	    @click="switchTab(4)"
	  >
	  		<text class="iconfont icon-sunyi" :style="{ color: currentTab === 4 ? '#1d5fdf' : '748498' }"></text>
	    <text>损益</text>
	  </view>
    </view>
  </view>
</template>

<script setup>
import hwk from "./hwk/index.vue";
import crk from "./crk/index.vue";
import zj from "./zj/index.vue";
import lqjc from "./lqjc/index.vue";
import sy from "./sy/index.vue";
import { ref, reactive, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getInfoByCfId } from "@/api/grainDepositor";
	
const currentTab = ref(0);
const caId = ref("");
const hwkInfo = ref({})

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

onLoad(async (options) => {
  if (options && options.caId) {
	  caId.value = options.caId
	  hwkInfo.value = await getInfoByCfId(caId.value);
  }
})
</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>