city-life-line/src/components/RepairImagePanel/index.vue

<template>
  <section class="repair-image-panel">
    <div class="repair-image-panel__header">
      <div class="repair-image-panel__title">
        <el-icon><Camera /></el-icon>
        <span>维修前后图片</span>
      </div>
      <span class="repair-image-panel__total">共 {{ allImages.length }} 张</span>
    </div>

    <div class="repair-image-panel__body">
      <div class="repair-image-column">
        <div class="repair-image-column__header">
          <span>维修前</span>
          <el-tag size="small" type="info">{{ beforeImageList.length }} 张</el-tag>
        </div>
        <div v-if="beforeImageList.length" class="repair-image-list">
          <div
            v-for="(img, index) in beforeImageList"
            :key="`before-${index}-${img}`"
            class="repair-image-item"
          >
            <el-image
              class="repair-image-media"
              :src="img"
              :preview-src-list="beforeImageList"
              :initial-index="index"
              fit="cover"
              preview-teleported
            >
              <template #error>
                <div class="repair-image-error">图片加载失败</div>
              </template>
            </el-image>
            <span class="repair-image-item__index">{{ index + 1 }}</span>
          </div>
        </div>
        <div v-else class="repair-image-empty">暂无维修前图片</div>
      </div>

      <div class="repair-image-column">
        <div class="repair-image-column__header">
          <span>维修后</span>
          <el-tag size="small" type="success">{{ afterImageList.length }} 张</el-tag>
        </div>
        <div v-if="afterImageList.length" class="repair-image-list">
          <div
            v-for="(img, index) in afterImageList"
            :key="`after-${index}-${img}`"
            class="repair-image-item"
          >
            <el-image
              class="repair-image-media"
              :src="img"
              :preview-src-list="afterImageList"
              :initial-index="index"
              fit="cover"
              preview-teleported
            >
              <template #error>
                <div class="repair-image-error">图片加载失败</div>
              </template>
            </el-image>
            <span class="repair-image-item__index">{{ index + 1 }}</span>
          </div>
        </div>
        <div v-else class="repair-image-empty">暂无维修后图片</div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { computed } from 'vue'
import { Camera } from '@element-plus/icons-vue'

const props = defineProps({
  beforeImages: {
    type: [String, Array, Object],
    default: ''
  },
  afterImages: {
    type: [String, Array, Object],
    default: ''
  }
})

const baseUrl = import.meta.env.VITE_APP_BASE_API

function normalizeImageUrl(value) {
  const url = String(value || '').trim()
  if (!url || /^(https?:|blob:|data:)/.test(url)) return url
  if (baseUrl && (url === baseUrl || url.startsWith(`${baseUrl}/`))) return url
  return url.startsWith('/') ? baseUrl + url : `${baseUrl}/${url}`
}

function toImageList(value) {
  const values = Array.isArray(value)
    ? value
    : typeof value === 'string'
      ? value.split(',')
      : value
        ? [value]
        : []

  return values
    .map(item => typeof item === 'string' ? item : (item.url || item.fileName || item.name))
    .map(normalizeImageUrl)
    .filter(Boolean)
}

const beforeImageList = computed(() => toImageList(props.beforeImages))
const afterImageList = computed(() => toImageList(props.afterImages))
const allImages = computed(() => beforeImageList.value.concat(afterImageList.value))
</script>

<style scoped lang="scss">
.repair-image-panel {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e9ecef;
}

.repair-image-panel__header,
.repair-image-column__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.repair-image-panel__header {
  margin-bottom: 12px;
}

.repair-image-panel__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.repair-image-panel__total {
  color: #909399;
  font-size: 13px;
}

.repair-image-panel__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.repair-image-column {
  min-width: 0;
  padding: 14px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background: #fafbfc;
}

.repair-image-column__header {
  margin-bottom: 12px;
  color: #606266;
  font-size: 14px;
  font-weight: 600;
}

.repair-image-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 10px;
}

.repair-image-item {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  background: #f2f6fc;
  cursor: pointer;
}

.repair-image-item:hover :deep(.el-image__inner) {
  transform: scale(1.04);
}

.repair-image-media {
  width: 100%;
  height: 100%;
}

.repair-image-media :deep(.el-image__inner) {
  transition: transform 0.2s ease;
}

.repair-image-item__index {
  position: absolute;
  right: 5px;
  bottom: 5px;
  min-width: 20px;
  padding: 2px 5px;
  border-radius: 10px;
  background: rgb(0 0 0 / 55%);
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

.repair-image-empty,
.repair-image-error {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a8abb2;
  font-size: 13px;
}

.repair-image-empty {
  min-height: 120px;
  border: 1px dashed #dcdfe6;
  border-radius: 6px;
}

.repair-image-error {
  width: 100%;
  height: 100%;
}

@media (max-width: 900px) {
  .repair-image-panel__body {
    grid-template-columns: 1fr;
  }
}
</style>