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

<template>
  <view class="container">
    <hwk :baseInfo="hwkInfo" v-if="currentTab == 0"></hwk>
    <crk :caId="caId" v-if="currentTab == 1"></crk>
    <zj :caId="caId" v-if="currentTab == 2"></zj>
    <lqjc :baseInfo="lqjcInfo" v-if="currentTab == 3"></lqjc>
    <sy :baseInfo="syInfo" 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 { getDictOptions, DICT_TYPE, getDictLabelSync } from "@/utils/dict.js";
import {
  getInfoByCfId,
  getSyxxByCfId,
  getLqjcxxByCfId,
  getCrkxxByCfId,
  getZjxxByCfId,
} from "@/api/grainDepositor";

const currentTab = ref(0);
const caId = ref("");
const hwkInfo = ref({});
const syInfo = ref({});
const lqjcInfo = ref({});
const ckList = ref([]);
const rkList = ref([]);
// const zjxxList = ref({});

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

  if (index === 0) {
    uni.setNavigationBarTitle({
      title: "货位卡",
    });
  } else if (index === 1) {
    uni.setNavigationBarTitle({
      title: "出入库",
    });
  } else if (index === 2) {
    uni.setNavigationBarTitle({
      title: "质检",
    });
  } else if (index === 3) {
    uni.setNavigationBarTitle({
      title: "粮情检测",
    });
  } else if (index === 4) {
    uni.setNavigationBarTitle({
      title: "损益",
    });
  }
};

onLoad(async (options) => {
  if (options && options.caId) {
    caId.value = options.caId;
    const getHwkData = await getInfoByCfId(caId.value);

    if (getHwkData.code === 0 && getHwkData.data !== null) {
      hwkInfo.value = getHwkData.data;
    }

    const getSyData = await getSyxxByCfId(caId.value);

    if (getSyData.code === 0 && getSyData.data !== null) {
      syInfo.value = getSyData.data;
    }

    const getLqjcData = await getLqjcxxByCfId(caId.value);
    // 12992 // 维护好的数据

    if (getLqjcData.code === 0 && getLqjcData.data !== null) {
      lqjcInfo.value = getLqjcData.data;
    }

    //"出入库类型crklx(0:出库,1:入库)")
    const ckPostData = {
      caId: caId.value,
      // caId: 645228342333509, // 维护好的数据
      crklx: 0,
    };
    const getCkData = await getCrkxxByCfId(ckPostData);

    if (getCkData.code === 0 && getCkData.data !== null) {
      ckList.value = getCkData.data.records;

      // console.log(JSON.parse(newVal), newVal, newVal[0], "tiemNEwv");
    }

    const rkPostData = {
      caId: caId.value,
      // caId: 645228342333509, // 维护好的数据
      crklx: 1,
    };
    const getRkData = await getCrkxxByCfId(rkPostData);

    if (getRkData.code === 0 && getRkData.data !== null) {
      rkList.value = getRkData.data.records;
    }

    // const zjxxPostData = {
    // caId: caId.value,
    // caId: 645228342333509, // 维护好的数据
    // };
    // const getZjxxData = await getZjxxByCfId(zjxxPostData);

    // zjxxList.value = getZjxxData.data.records;
  }
});

onMounted(async () => {
  await getDictOptions(DICT_TYPE.SYSTEM_LSDJ);
  await getDictOptions(DICT_TYPE.SYSTEM_LSPZ);
});
</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>