delivery-depot-uniapp/pages/components/InfoItem.vue

<template>
  <view :class="[isFirst ? 'no-border' : '', 'info-item-component']">
    <text class="label">{{ label }}</text>
    <template v-if="isImage">
      <view class="images-container">
        <image
          v-for="(src, index) in imageSources"
          :key="index"
          class="kqt-image"
          :src="src.url"
          @click="previewImage(src.url)"
        />
      </view>
    </template>
    <text v-else class="value">{{ value }}</text>
  </view>
</template>
<script setup>
import { defineProps, computed, ref, watch } from "vue";
import { getImageInfo } from "@/api/task";
const props = defineProps({
  label: String,
  value: {
    type: [String, Array],
    default: "[]",
  },
  isFirst: Boolean,
  isImage: Boolean,
});

const imageSources = ref([]);

// const getImageSources = async (props.) => {
//   imageSources.value = (await getImageInfo({ ids: JSON.parse(newVal) })).data;
// };

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

watch(
  () => props.value,
  async (newVal) => {
    if (
      (props.label === "附件" ||
        props.label === "质检码单照片" ||
        props.label === "出库照片" ||
        props.label === "入库照片") &&
      newVal
    ) {
      // 打印newVal数据类型
      let ids = JSON.parse(newVal);

      if (ids.length === 0) {
        imageSources.value = [];
        return;
      } else {
        imageSources.value = (await getImageInfo({ ids })).data;
      }
    }
  },
  {
    // deep: true,
    immediate: true,
  }
);
</script>
<style lang="scss" scoped>
.info-item-component {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-top: 1px solid #e5e9ed;

  &.no-border {
    border: none;
  }

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