delivery-depot-uniapp/pages/infoDetails/crk/index.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
          v-if="rkList.length > 0"
          class="list-scroll-content"
          scroll-y
          @scrolltolower="loadMoreRk"
          refresher-enabled
          :refresher-triggered="isRefreshingRk"
          @refresherrefresh="onRefreshRk"
        >
          <view class="warehouse-list">
            <view
              v-for="(rkItem, index) in rkList"
              :key="index"
              class="warehouse-item"
              @click="goPage(rkItem, 1)"
            >
              <view class="warehouse-details">
                <view class="detail-row">
                  <text class="label"
                    >业务时间：<text class="blackValue">{{
                      rkItem.ywsj || "--"
                    }}</text></text
                  >
                  <text class="label"
                    >粮食品种：<text class="blackValue">{{
                      getDictLabelSync(DICT_TYPE.SYSTEM_LSPZ, rkItem.lspzmc) ||
                      "--"
                    }}</text></text
                  >
                </view>
                <view class="detail-row">
                  <text class="label"
                    >粮食等级：<text class="blackValue">{{
                      getDictLabelSync(DICT_TYPE.SYSTEM_LSDJ, rkItem.lsdjbm) ||
                      "--"
                    }}</text></text
                  >
                  <text class="label"
                    >净重(吨)：<text class="blackValue">{{
                      rkItem.jz || "--"
                    }}</text></text
                  >
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
        <view v-else class="no-data">暂无数据</view>
      </swiper-item>
      <swiper-item class="tab-content">
        <scroll-view
          scroll-y
          @scrolltolower="loadMoreCk"
          refresher-enabled
          :refresher-triggered="isRefreshingCk"
          @refresherrefresh="onRefreshCk"
          v-if="ckList.length > 0"
          class="list-scroll-content"
        >
          <view class="warehouse-list">
            <view
              v-for="(ckItem, index) in ckList"
              :key="index"
              class="warehouse-item"
              @click="goPage(ckItem, 0)"
            >
              <view class="warehouse-details">
                <view class="detail-row">
                  <text class="label"
                    >业务时间：<text class="blackValue">{{
                      ckItem.ywsj.slice(0, 10) || "--"
                    }}</text></text
                  >
                  <text class="label"
                    >粮食品种：<text class="blackValue">{{
                      getDictLabelSync(DICT_TYPE.SYSTEM_LSPZ, ckItem.lspzmc) ||
                      "--"
                    }}</text></text
                  >
                </view>
                <view class="detail-row">
                  <text class="label"
                    >粮食等级：<text class="blackValue">{{
                      getDictLabelSync(DICT_TYPE.SYSTEM_LSDJ, ckItem.lsdjbm) ||
                      "--"
                    }}</text></text
                  >
                  <text class="label"
                    >净重(吨)：<text class="blackValue">{{
                      ckItem.jz || "--"
                    }}</text></text
                  >
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
        <view v-else class="no-data">暂无数据</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getDictOptions, DICT_TYPE, getDictLabelSync } from "@/utils/dict.js";
import { getCrkxxByCfId } from "@/api/grainDepositor";
const props = defineProps({
  caId: {
    type: String || Number,
  },
});

const rkList = ref([]);
const ckList = ref([]);

const navList = [
  {
    state: 1,
    text: "入库",
    loadingType: "more",
    orderList: [],
  },
  {
    state: 0,
    text: "出库",
    loadingType: "more",
    orderList: [],
  },
];
const tabCurrentIndex = ref(0);
const tabClick = (index) => {
  tabCurrentIndex.value = index;
};

// 添加分页参数
const rkPageNum = ref(1)
const ckPageNum = ref(1)
const pageSize = ref(10)
const isRefreshingRk = ref(false)
const isRefreshingCk = ref(false)
const rkHasMore = ref(true)
const ckHasMore = ref(true)

onMounted(async () => {
  await getCrkList();
});

//"出入库类型crklx(0:出库,1:入库)")
const getCrkList = async (type = 'init') => {
  const rkPostData = {
    caId: props.caId,
    crklx: 1,
    pageNum: rkPageNum.value,
    pageSize: pageSize.value
  };
  const ckPostData = {
    caId: props.caId,
    crklx: 0,
    pageNum: ckPageNum.value, 
    pageSize: pageSize.value
  };

  if(type === 'init' || type === 'rk') {
    const rkRes = await getCrkxxByCfId(rkPostData);
    if (rkRes.code === 0 && rkRes.data !== null) {
      if(type === 'init' || isRefreshingRk.value) {
        rkList.value = rkRes.data.records;
      } else {
        rkList.value = [...rkList.value, ...rkRes.data.records];
      }
      rkHasMore.value = rkRes.data.records.length === pageSize.value;
    }
  }

  if(type === 'init' || type === 'ck') {
    const ckRes = await getCrkxxByCfId(ckPostData);
    if (ckRes.code === 0 && ckRes.data !== null) {
      if(type === 'init' || isRefreshingCk.value) {
        ckList.value = ckRes.data.records;
      } else {
        ckList.value = [...ckList.value, ...ckRes.data.records];
      }
      ckHasMore.value = ckRes.data.records.length === pageSize.value;
    }
  }
};

// 入库上拉加载更多
const loadMoreRk = async () => {
  if(!rkHasMore.value) return;
  rkPageNum.value++;
  await getCrkList('rk');
}

// 出库上拉加载更多
const loadMoreCk = async () => {
  if(!ckHasMore.value) return;
  ckPageNum.value++;
  await getCrkList('ck');
}

// 入库下拉刷新
const onRefreshRk = async () => {
  isRefreshingRk.value = true;
  rkPageNum.value = 1;
  rkHasMore.value = true;
  await getCrkList('rk');
  isRefreshingRk.value = false;
}

// 出库下拉刷新
const onRefreshCk = async () => {
  isRefreshingCk.value = true;
  ckPageNum.value = 1;
  ckHasMore.value = true;
  await getCrkList('ck');
  isRefreshingCk.value = false;
}

// 修改切换标签页方法
const changeTab = (e) => {
  tabCurrentIndex.value = e.detail.current;
};

const goPage = async (item, pageIndex) => {
  const serializedData = JSON.stringify(item);
  const encodedData = encodeURIComponent(serializedData);
  uni.navigateTo({
    url: `/pages/infoDetails/crk/detail?getData=${encodedData}&pageIndex=${pageIndex}`,
  });
};
</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 {
    border-left: 2px solid #3872e3;
    background: linear-gradient(180deg, #ffffff, #f5f8ff);
    border-radius: 10px;
    padding: 10px 0 10px 20px;
    margin-bottom: 20rpx;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

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

      .detail-row {
        margin-bottom: 10px;
        text.label {
          width: 50%;
          display: inline-flex;
          .blackValue {
            color: #000000;
          }
        }
      }
    }
  }
}
.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;
  }

  .select-all,
  .confirm {
    width: 44%;
    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);
}

.no-data {
  text-align: center;
  color: #999;
  font-size: 30rpx;
  margin-top: 20rpx;
}
</style>