delivery-depot-uniapp/pages/infoDetails/crk/detail.vue

<template>
  <view class="content">
    <!-- 第一个信息框 -->
    <view class="base-info-box">
      <info-item isFirst="true" label="业务时间" :value="baseInfo.ywsj" />
      <info-item
        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.jz" />
      <!-- <info-item label="结算单价(元)" :value="baseInfo.kqmc" /> -->
      <info-item label="车船号" :value="baseInfo.cch" />
      <!-- <info-item
        isImage="true"
        :label="pageIndex == 0 ? '出库照片' : '入库照片'"
        :value="baseInfo.fileIds"
      /> -->

      <view class="info-item-component">
        <text class="label">
          {{ pageIndex == 0 ? "出库照片" : "入库照片" }}
        </text>
        <view class="images-container">
          <image
            @click="previewImage(src.url)"
            v-for="(src, index) in imageSources"
            :key="index"
            class="kqt-image"
            :src="src.url"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, toRaw } from "vue";
import { getDictOptions, DICT_TYPE, getDictLabelSync } from "@/utils/dict.js";
import { onLoad } from "@dcloudio/uni-app";
import InfoItem from "@/pages/components/InfoItem.vue";
import { getImageInfo } from "@/api/task";
const baseInfo = ref({});
// 0是出库，1是入库
const pageIndex = ref(0);
const imageSources = ref([]);

onLoad(async (options) => {
  if (options) {
    baseInfo.value = JSON.parse(decodeURIComponent(options.getData));
    pageIndex.value = options.pageIndex;

    console.log(baseInfo.value.fileIds, "baseInfo.value.fileIds ");

    if (baseInfo.value.fileIds instanceof Array) {
      imageSources.value = (
        await getImageInfo({ ids: baseInfo.value.fileIds })
      ).data;
    } else if (
      baseInfo.value.fileIds instanceof String &&
      JSON.parse(baseInfo.value.fileIds).length > 0
    ) {
      imageSources.value = (
        await getImageInfo({ ids: JSON.parse(baseInfo.value.fileIds) })
      ).data;
    }

    // imageSources.value = (
    //   await getImageInfo({ ids: baseInfo.value.fileIds })
    // ).data;

    // console.log(imageSources.value, "imageSources.value");
  }
});

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