76 lines
2.4 KiB
Vue
76 lines
2.4 KiB
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>
|