front-end/ghsApp/src/admin/item/lakala-components/AttachmentCard.vue

<template>
  <view class="attachment" @click="$emit('upload')">
    <view>
      <text class="attach-title">{{ title }}</text>
      <text class="attach-tip">请上传{{ title }}</text>
    </view>
    <image v-if="item && item.ossPath" :src="imageSrc" mode="aspectFill" />
    <view v-else class="camera">＋</view>
  </view>
</template>
<script>
export default {
  props: { title: { type: String, default: '' }, imgType: { type: String, default: '' }, items: { type: Array, default: () => [] } },
  computed: {
    item() { return this.items.find(v => v.imgType === this.imgType); },
    imageSrc() {
      const path = this.item.ossPath || '';
      if (/^https?:\/\//.test(path)) return path;
      return `${this.$constant.imgUrl}/${path}`;
    }
  }
};
</script>
<style scoped>
.attachment { margin: 0 24upx 24upx; padding: 24upx; background: #fff; border-radius: 18upx; min-height: 180upx; display: flex; align-items: center; justify-content: space-between; }
.attach-title { display: block; font-size: 32upx; color: #111; margin-bottom: 12upx; }
.attach-tip { color: #999; font-size: 28upx; }
.attachment image, .camera { width: 260upx; height: 160upx; border-radius: 12upx; background: #e9f3ff; }
.camera { color: #288bf5; font-size: 60upx; display: flex; align-items: center; justify-content: center; }
</style>