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

<template>
    <view class="warehouse-list">
      <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">
				  <text class="labeltext">库区名称：</text>
				  <text>{{ kuqItem.kqmc }}</text>
			  </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>{{ 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>
</template>

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

const kuqList = ref([]);

onMounted(async () => {
	const getData = await getAllStoreroomList({});
	kuqList.value = getData.data.records
})

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

</script>

<style lang="scss" scoped>

.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;
          margin-bottom: 5px;
		  line-height: 55rpx;

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

          .icon {
			  padding-top: 7rpx;
			  width: 22px;
			  height: 22px;
			  margin-right: 15rpx;
			}
  
			.text-container {
			  flex: 1;
			  word-break: break-all;
			}
        }
      }
    }

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

</style>