delivery-depot-uniapp/pages/grainDepositor/components/selectWarehouse.vue

<template>
  <!-- <view class="warehouse-list"> -->

  <scroll-view
    scroll-y
    @scrolltolower="loadMore"
    class="warehouse-list"
    refresher-enabled
    :refresher-triggered="isRefreshing"
    @refresherrefresh="onRefresh"
  >
    <view
      v-for="(kuqItem, index) in kuqList"
      :key="index"
      @click="goDetailPage(kuqItem)"
      class="warehouse-item"
    >
      <view class="warehouse-header">
        <view class="info-container">
          <view class="warehouse-name">
            <image src="@/static/icons/warehouse-ico.png" class="icon"></image>
            <view class="text-container">
              <view class="labeltext">库区名称：</view>
              <view class="valuetext">{{ kuqItem.kqmc }}</view>
            </view>
          </view>
          <view class="warehouse-address">
            <image src="@/static/icons/location-ico.png" class="icon"></image>
            <view class="text-container">
              <text class="labeltext">库区地址：</text>
              <text class="valuetext">{{ kuqItem.jtdz }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="warehouse-details">
        <view class="detail-row">
          <text>联系人: {{ kuqItem.kqfzr }}</text>
          <text>联系电话: {{ kuqItem.lxdh }}</text>
        </view>
      </view>
    </view>

    <!-- 添加底部提示 -->
    <view v-if="finished || !kuqList.length" class="no-more">没有更多数据了~</view>
  </scroll-view>
  <!-- </view> -->
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { getAllStoreroomList } from "@/api/grainDepositor";

const kuqList = ref([]);
const pageNo = ref(1);
const pageSize = ref(10);
const finished = ref(false);
const loading = ref(false);
const isRefreshing = ref(false);

// 获取数据的方法
const getData = async (isRefresh = false) => {
  if (loading.value) return;

  loading.value = true;

  try {
    const res = await getAllStoreroomList({
      pageNo: pageNo.value,
      pageSize: pageSize.value,
    });

    if (isRefresh || pageNo.value === 1) {
      kuqList.value = res.data.records;
    } else {
      kuqList.value = [...kuqList.value, ...res.data.records];
    }

    // 判断是否还有更多数据
    if (res.data.records.length < pageSize.value) {
      finished.value = true;
    } else {
      finished.value = false;
    }
  } catch (error) {
    console.error(error);
  } finally {
    loading.value = false;
    isRefreshing.value = false;
    uni.hideLoading();
  }
};

// 下拉刷新
const onRefresh = async () => {
  isRefreshing.value = true;
  pageNo.value = 1;
  finished.value = false;
  await getData(true);
};

// 上拉加载更多
const loadMore = async () => {
  if (finished.value || loading.value) return;
  pageNo.value++;
  await getData();
};

onMounted(() => {
  getData();
});

const goDetailPage = (info) => {
  uni.navigateTo({
    url: `/pages/warehouse/warehouse?kqId=${info.kqId}&source=all`,
  });
};
</script>

<style lang="scss" scoped>
.warehouse-list {
  padding: 40rpx 20rpx 100rpx 20rpx;
  box-sizing: border-box;
  height: 100vh;
  .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;
          margin-bottom: 5px;
          line-height: 55rpx;

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

          .icon {
            padding-top: 7rpx;
            width: 22px;
            height: 22px;
            margin-right: 15rpx;
          }

          .text-container {
            display: flex;
            flex: 1;
            word-break: break-all;

            .labeltext {
              // flex-wrap: nowrap;
              // 文字禁止换行
              white-space: nowrap;
            }
            .valuetext {
              text-align: right;
            }
          }
        }
      }
    }

    .warehouse-details {
      padding-top: 30rpx;
      font-size: 30rpx;
      color: #747476;
      .detail-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
      }
    }
  }

  .no-more {
    text-align: center;
    color: #999;
    font-size: 24rpx;
    padding: 20rpx 0;
  }
}
</style>