delivery-depot-uniapp/pages/warehouse/warehouse.vue

<template>
  <view class="page">
    <view class="navbar">
      <view
        v-for="(item, index) in navList"
        :key="index"
        class="nav-item"
        :class="{ current: tabCurrentIndex === index }"
        @click="tabClick(index)"
      >
        {{ item.text }}
      </view>
    </view>
    <swiper
      :current="tabCurrentIndex"
      class="swiper-box"
      duration="300"
      @change="changeTab"
    >
      <swiper-item class="tab-content">
        <scroll-view class="list-scroll-content" scroll-y>
          <view class="warehouse-list">
            <view
              v-for="(warehouseItem, index) in warehousesList"
              :key="index"
              class="warehouse-item"
              @click="goPage(warehouseItem)"
            >
              <view class="warehouse-header">
                <view class="info-container">
                  <view class="warehouse-name">
                    <image
                      src="../../static/icons/warehouse-ico.png"
                      mode="widthFix"
                    ></image>
                    <text>仓房名称：{{ warehouseItem.cfmc }}</text>
                  </view>
                </view>
                <view class="select-button" v-if="sourcePage != 'self'">
                  <checkbox
                    :checked="warehouseItem.checked"
                    @click.stop="handleCheck(index)"
                  />
                </view>
              </view>
              <view class="warehouse-details">
                <view class="detail-row">
                  <text
                    >仓库类型：{{
                      getDictLabelSync(
                        DICT_TYPE.SYSTEM_CFLX,
                        warehouseItem.cflx
                      )
                    }}</text
                  >
                  <text
                    >仓库状态：{{
                      getDictLabelSync(
                        DICT_TYPE.SYSTEM_CAZT,
                        warehouseItem.cazt
                      )
                    }}</text
                  >
                </view>
                <view class="detail-row">
                  <text>设计仓容：{{ warehouseItem.sjcr }}</text>
                  <text
                    >是否空仓：{{
                      warehouseItem.sfkc === 0 ? "否" : "是"
                    }}</text
                  >
                </view>
                <view class="detail-row">
                  <text
                    >租仓参考价：{{ warehouseItem.zcckj || "-" }}
                    元/月
                  </text>
                  <text
                    >委托保管参考价：{{
                      warehouseItem.wtbgckj || "-"
                    }}元/吨/月</text
                  >
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="button-container" v-if="sourcePage != 'self'">
          <view class="button-pad">
            <button class="confirm" @click="confirmSelection">确认选择</button>
          </view>
        </view>
      </swiper-item>
      <swiper-item class="tab-content">
        <scroll-view class="info-scroll-content" scroll-y>
          <view class="warehouse-info">
            <warehouse-info :kqInfo="kqInfo"></warehouse-info>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getDictOptions, DICT_TYPE, getDictLabelSync } from "@/utils/dict.js";
import {
  getCaxxByKqIdForClr,
  getKqxxByKqId,
  getStoreroom,
} from "@/api/grainDepositor";
import warehouseInfo from "./components/warehouseInfo/warehouseInfo.vue";
const sourcePage = ref("all");
const navList = [
  {
    state: 0,
    text: "仓房基本信息",
    loadingType: "more",
    orderList: [],
  },
  {
    state: 1,
    text: "库区基本信息",
    loadingType: "more",
    orderList: [],
  },
];
const tabCurrentIndex = ref(0);
const tabClick = (index) => {
  tabCurrentIndex.value = index;
};
const detailkqId = ref(null);
const warehousesList = ref([]);
const kqInfo = ref({
  resid: "",
});

onLoad(async (options) => {
  if (options && options.kqId) {
    sourcePage.value = options.source;
    detailkqId.value = options.kqId;

    let postData = {
      listType: 3,
      kqId: detailkqId.value,
    };
    if (sourcePage.value === "self") {
      postData.listType = 4;
    }
    const getData = await getCaxxByKqIdForClr(postData);
    warehousesList.value = getData.data;

    const getKqxx = await getKqxxByKqId({ kqId: detailkqId.value });
    kqInfo.value = getKqxx.data;
  } else {
    console.warn("没有接收到 id 参数");
  }
});

const handleCheck = (index) => {
  warehousesList.value[index].checked = !warehousesList.value[index].checked;
};

const changeTab = () => {};
const confirmSelection = async () => {
  const selIds = warehousesList.value
    .filter((item) => item.checked) // 筛选出checked为true的项
    .map((item) => item.caId); // 提取每个项的caId

  if (selIds.length > 0) {
    try {
      const getData = await getStoreroom({ caIds: selIds });
      uni.navigateTo({
        url: `/pages/grainDepositor/grainDepositorLayout?tabIndex=1`,
      });
    } catch (error) {
      console.error("请求失败:", error);
    }
  } else {
    uni.navigateTo({
      url: `/pages/grainDepositor/grainDepositorLayout?tabIndex=1`,
    });
    console.warn("未选择任何仓库");
  }
};
const goPage = async (warehouseItem) => {
  if (sourcePage.value === "self") {
    uni.navigateTo({
      url: `/pages/infoDetails/infoDetailsLayout?caId=${warehouseItem.caId}`,
    });
  }
};
// 组件挂载时预加载需要的字典
onMounted(async () => {
  await getDictOptions(DICT_TYPE.SYSTEM_CAZT);
  await getDictOptions(DICT_TYPE.SYSTEM_CFLX);
});
</script>

<style lang="scss" scoped>
.page {
  position: relative; // 确保伪元素相对于 .page 定位
}

.page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200rpx; // 设置渐变的高度
  background: linear-gradient(180deg, #cfddfc, #eff2f5);
  z-index: -1; // 确保它在内容之下
}

.warehouse-list {
  padding: 40rpx 20rpx 20rpx;

  .warehouse-item {
    background: linear-gradient(180deg, #ffffff, #f5f8ff);
    border-radius: 10px;
    padding: 20px 15px 10px;
    margin-bottom: 25rpx;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    .warehouse-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start; // 对齐到顶部
      padding-bottom: 30rpx;
      border-bottom: 1px solid #e7e8ea;
      font-size: 35rpx;
      color: #00122f;

      .info-container {
        flex-grow: 1;

        .warehouse-name,
        .warehouse-address {
          display: flex;
          align-items: center;
          margin-bottom: 5px;

          &:last-child {
            margin-bottom: 0;
          }

          image {
            width: 20px;
            height: 20px;
            margin-right: 10px;
          }
        }
      }

      .select-button {
        display: flex;
        align-items: flex-start;
        margin-left: 10px;
      }
    }

    .warehouse-details {
      padding-top: 30rpx;
      font-size: 30rpx;
      color: #747476;

      .detail-row {
        display: flex;
        margin-bottom: 10px;
        text {
          flex: 1;
        }
      }
    }
  }
}
.button-container {
  position: fixed;
  bottom: 0;
  background-color: #ffffff;
  width: 100vw;
  padding: 40rpx 0;

  .button-pad {
    padding: 0 40rpx;
    display: flex;
    justify-content: space-between;
  }

  .confirm {
    width: 88%;
    height: 70rpx;
    line-height: 70rpx;
    border-radius: 10rpx;
    background-color: #1e5fdf;
    color: #fff;
    font-size: 28rpx;
    text-align: center;
  }
}

.warehouse-info {
  padding-top: 20rpx;
}

.navbar {
  display: flex;
  height: 40px;
  padding: 0 5px;
  position: relative;
  z-index: 10;

  .nav-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 35rpx;
    position: relative;
    color: #334b68;

    &.current {
      color: #0f2239;
      &:after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 60%;
        height: 0;
        border-bottom: 4px solid #789fec;
      }
    }
  }
}

.swiper-box {
  height: calc(100vh - 80rpx);
}

.list-scroll-content {
  height: calc(100vh - 200rpx);
}
.info-scroll-content {
  height: calc(100vh - 120rpx);
}
</style>