delivery-depot-uniapp/pages/infoDetails/lqjc/index.vue

<template>
  <view class="content">
    <view class="base-info-box">
      <info-item
        isFirst="true"
        label="粮食品种"
        :value="getDictLabelSync(DICT_TYPE.SYSTEM_LSPZ, baseInfo.lspzmc) || '--'
        "
      />
      <info-item
        label="粮食等级"
        :value="
          getDictLabelSync(DICT_TYPE.SYSTEM_LSDJ, baseInfo.lsdjbm) || '--'
        "
      />
      <info-item label="仓房外温(℃)" :value="baseInfo.cww || '--'" />
      <info-item label="仓房外湿(%)" :value="baseInfo.cws || '--'" />
      <info-item label="仓房内温(℃)" :value="baseInfo.cnw || '--'" />
      <info-item label="仓房内湿(%)" :value="baseInfo.cns || '--'" />
      <info-item label="粮食最高温(℃)" :value="baseInfo.lszgw || '--'" />
      <info-item label="粮食最低温(℃)" :value="baseInfo.lszdw || '--'" />
      <info-item label="粮食平均温(℃)" :value="baseInfo.lspjw || '--'" />
      <info-item isImage="true" label="附件" :value="baseInfo.fileIds" />

      <!-- <view class="info-item-component">
        <text class="label">附件</text>
        <view class="images-container">
          <image
            v-for="(src, index) in imageSources"
            :key="index"
            class="kqt-image"
            :src="src.url"
          />
        </view>
      </view> -->
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getDictOptions, DICT_TYPE, getDictLabelSync } from "@/utils/dict.js";
import InfoItem from "@/pages/components/InfoItem.vue";
const props = defineProps(["baseInfo"]);
import { getImageInfo } from "@/api/task";

const imageSources = ref([]);

onMounted(async () => {
  imageSources.value = (
    await getImageInfo({ ids: props.baseInfo.fileIds })
  ).data;
});
</script>

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

.info-item-component {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-top: 1px solid #e5e9ed;
}
.base-info-box {
  background: #ffffff;
  border-radius: 20rpx;
  margin-bottom: 120rpx;
  padding: 20rpx;
}

.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>