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

<template>
  <view class="content">
    <!-- 第一个信息框 -->
    <view class="base-info-box">
      <info-item isFirst="true" label="库区名称" :value="kqInfo.kqmc" />
      <info-item label="所属企业" :value="kqInfo.dwmc" />
      <info-item label="统一社会信用代码" :value="kqInfo.tyxydm" />
      <info-item label="企业性质" :value="filterXZ(kqInfo.qyxz)" />
      <info-item label="库区地址" :value="kqInfo.jtdz" />
      <info-item label="库区负责人" :value="kqInfo.kqfzr" />
      <info-item label="库区联系方式" :value="kqInfo.lxdh" />
    </view>

    <!-- 第二个信息框 -->
    <view class="base-info-box">
      <info-item isFirst="true" label="占地面积(m²)" :value="kqInfo.zdmj" />
      <info-item label="经度" :value="kqInfo.jd" />
      <info-item label="纬度" :value="kqInfo.wd" />
      <!-- <info-item isImage="true" label="库区图" :value="kqInfo.resid" /> -->
      <view class="info-item-component">
        <text class="label">库区图</text>
        <view class="images-container">
          <image
            @click="previewImage(src)"
            v-for="(src, index) in kqInfo.resid.split(',')"
            :key="index"
            class="kqt-image"
            :src="src"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, toRaw } from "vue";
import { dictData } from "@/api/user";
import InfoItem from "@/pages/components/InfoItem.vue";
const props = defineProps(["kqInfo"]);

const imageSources = ref([]);

// 初始化拿字典数据
const qyxzList = ref([]);
onMounted(() => {
  dictData("system_qyxz").then((res) => {
    qyxzList.value = res.data;
  });

  // imageSources.value =
});

const filterXZ = (value) => {
  return qyxzList.value.find((item) => item.value === value)?.label;
};

const previewImage = (url) => {
  uni.previewImage({
    urls: [url],
  });
};
</script>

<style lang="scss" scoped>
.content {
  padding: 20rpx;
}

.base-info-box {
  background: #ffffff;
  border-radius: 20rpx;
  margin-bottom: 40rpx;
  padding: 20rpx;
}

.info-item-component {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-top: 1px solid #e5e9ed;
}

.label {
  font-weight: bold;
  color: #777777;
}

.value {
  flex: 1;
  text-align: right;
  color: #0f2239;
  font-weight: 600;
}

.images-container {
  max-width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .kqt-image {
    max-width: 100%;
    margin-bottom: 10rpx;
  }
}
</style>