zkxw/mobile-h5/components/AttachList.vue

<template>
  <view class="d-attach-list">
    <view class="d-attach-upload" @click="$emit('upload')">
      <view class="up-icon"><van-icon name="plus" /></view>
      <view class="up-text">
        <view class="up-title">添加附件</view>
        <view class="up-sub">支持 PDF / 图片 / Office，可多选上传</view>
      </view>
      <van-icon name="arrow" color="#22c55e" />
    </view>

    <view
      v-for="a in files"
      :key="a.name"
      class="d-attach-card"
      :class="fileTypeClass(a.name)"
    >
      <view class="file-icon">
        <van-icon :name="fileTypeIcon(a.name)" />
        <text class="ext">{{ fileExt(a.name) }}</text>
      </view>
      <view class="file-body">
        <view class="file-name">{{ a.name }}</view>
        <view class="file-meta">
          <text>{{ a.size || '—' }}</text>
          <text>{{ a.time || '—' }}</text>
        </view>
      </view>
      <view class="file-ops">
        <view class="op-btn btn-preview" @click="$emit('preview', a)">
          <van-icon name="eye-o" />
        </view>
        <view class="op-btn btn-download" @click="$emit('download', a)">
          <view class="icon-download">
            <view style="width:28rpx;height:28rpx;position:relative">
              <van-icon name="down" size="14px" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'AttachList',
    props: {
      files: { type: Array, default: () => [] }
    },
    emits: ['upload', 'preview', 'download'],
    methods: {
      fileExt(name) {
        const i = (name || '').lastIndexOf('.')
        return i >= 0 ? name.slice(i + 1).slice(0, 4) : 'FILE'
      },
      fileTypeClass(name) {
        const ext = this.fileExt(name).toLowerCase()
        if (ext === 'pdf') return 'ft-pdf'
        if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext)) return 'ft-img'
        if (['xls', 'xlsx', 'csv'].includes(ext)) return 'ft-xls'
        if (['doc', 'docx'].includes(ext)) return 'ft-doc'
        return 'ft-other'
      },
      fileTypeIcon(name) {
        const cls = this.fileTypeClass(name)
        if (cls === 'ft-pdf') return 'description'
        if (cls === 'ft-img') return 'photo-o'
        if (cls === 'ft-xls') return 'bar-chart-o'
        if (cls === 'ft-doc') return 'records'
        return 'bag-o'
      }
    }
  }
</script>