458 lines
11 KiB
Vue
458 lines
11 KiB
Vue
<template>
|
||
<view class="basic-file-preview">
|
||
<view class="section-title">附件</view>
|
||
<view class="file-list" v-if="hasAttachments">
|
||
<!-- 显示所有解析后的附件 -->
|
||
<view
|
||
v-for="(file, index) in parsedAttachments"
|
||
:key="(file as any).id || index"
|
||
class="file-item"
|
||
>
|
||
<view class="file-icon">
|
||
<image
|
||
:src="getFileIcon(getFileSuffix(file))"
|
||
class="icon-image"
|
||
mode="aspectFit"
|
||
/>
|
||
</view>
|
||
<view class="file-info">
|
||
<text class="file-name">{{ getFileName(file) }}</text>
|
||
</view>
|
||
<view class="file-actions">
|
||
<u-button
|
||
v-if="canPreview(getFileSuffix(file)) && !isVideo(getFileSuffix(file))"
|
||
text="预览"
|
||
size="mini"
|
||
type="primary"
|
||
@click="previewFile(file)"
|
||
/>
|
||
<u-button
|
||
v-if="isVideo(getFileSuffix(file))"
|
||
text="播放"
|
||
size="mini"
|
||
type="success"
|
||
@click="previewFile(file)"
|
||
/>
|
||
<u-button
|
||
v-if="isImage(getFileSuffix(file))"
|
||
text="查看"
|
||
size="mini"
|
||
type="warning"
|
||
@click="previewFile(file)"
|
||
/>
|
||
<u-button
|
||
text="下载"
|
||
size="mini"
|
||
type="info"
|
||
@click="downloadFileAction(file)"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else class="no-files">
|
||
<text>暂无附件</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from 'vue';
|
||
import {
|
||
isVideo,
|
||
isImage,
|
||
canPreview,
|
||
previewFile as previewFileUtil,
|
||
previewVideo as previewVideoUtil,
|
||
previewImage as previewImageUtil,
|
||
downloadFile as downloadFileUtil
|
||
} from "@/utils/filePreview";
|
||
import { imagUrl } from "@/utils";
|
||
|
||
// 定义组件属性
|
||
interface Props {
|
||
fileUrl?: string;
|
||
fileName?: string;
|
||
fileFormat?: string;
|
||
files?: FileInfo[];
|
||
}
|
||
|
||
interface FileInfo {
|
||
id?: string;
|
||
name: string;
|
||
size: number;
|
||
url: string;
|
||
resourName?: string;
|
||
resourUrl?: string;
|
||
resSuf?: string;
|
||
}
|
||
|
||
// 定义默认属性值
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
fileUrl: '',
|
||
fileName: '',
|
||
fileFormat: '',
|
||
files: () => []
|
||
});
|
||
|
||
// 定义事件
|
||
const emit = defineEmits<{
|
||
(e: 'preview', file: FileInfo): void;
|
||
(e: 'download', file: FileInfo): void;
|
||
}>();
|
||
|
||
// 检查是否有附件
|
||
const hasAttachments = computed(() => {
|
||
const attachments = [];
|
||
|
||
// 处理files数组
|
||
if (props.files && props.files.length > 0) {
|
||
attachments.push(...props.files);
|
||
}
|
||
// 处理逗号分隔的fileUrl字符串
|
||
else if (props.fileUrl) {
|
||
const fileUrls = props.fileUrl.split(',').map(url => url.trim()).filter(url => url);
|
||
|
||
// 解析fileName字符串（如果存在）
|
||
let fileNames: string[] = [];
|
||
if (props.fileName) {
|
||
fileNames = props.fileName.split(',').map(name => name.trim()).filter(name => name);
|
||
}
|
||
|
||
// 将URL字符串转换为文件对象
|
||
fileUrls.forEach((url, index) => {
|
||
// 优先使用解析出的文件名，如果没有则从URL提取
|
||
let displayName = fileNames[index] || url.split('/').pop() || `文件${index + 1}`;
|
||
const fileFormat = url.split('.').pop() || 'unknown';
|
||
|
||
// 如果文件名包含扩展名，去掉扩展名（保持resourName不包含扩展名）
|
||
let resourName = displayName;
|
||
if (displayName.includes('.' + fileFormat)) {
|
||
resourName = displayName.replace('.' + fileFormat, '');
|
||
}
|
||
|
||
attachments.push({
|
||
id: `file_${index}`,
|
||
name: displayName,
|
||
url: url,
|
||
resourUrl: url,
|
||
resourName: resourName,
|
||
resSuf: fileFormat,
|
||
size: 0
|
||
});
|
||
});
|
||
}
|
||
|
||
return attachments.length > 0;
|
||
});
|
||
|
||
// 计算属性：解析后的附件列表
|
||
const parsedAttachments = computed(() => {
|
||
const attachments = [];
|
||
// 处理files数组
|
||
if (props.files && props.files.length > 0) {
|
||
attachments.push(...props.files);
|
||
}
|
||
// 处理逗号分隔的fileUrl字符串
|
||
else if (props.fileUrl) {
|
||
const fileUrls = props.fileUrl.split(',').map(url => url.trim()).filter(url => url);
|
||
|
||
// 解析fileName字符串（如果存在）
|
||
let fileNames: string[] = [];
|
||
if (props.fileName) {
|
||
fileNames = props.fileName.split(',').map(name => name.trim()).filter(name => name);
|
||
}
|
||
|
||
// 将URL字符串转换为文件对象
|
||
fileUrls.forEach((url, index) => {
|
||
// 优先使用解析出的文件名，如果没有则从URL提取
|
||
let displayName = fileNames[index] || url.split('/').pop() || `文件${index + 1}`;
|
||
const fileFormat = url.split('.').pop() || 'unknown';
|
||
|
||
// 如果文件名包含扩展名，去掉扩展名（保持resourName不包含扩展名）
|
||
let resourName = displayName;
|
||
if (displayName.includes('.' + fileFormat)) {
|
||
resourName = displayName.replace('.' + fileFormat, '');
|
||
}
|
||
|
||
attachments.push({
|
||
id: `file_${index}`,
|
||
name: displayName,
|
||
url: url,
|
||
resourUrl: url,
|
||
resourName: resourName,
|
||
resSuf: fileFormat,
|
||
size: 0
|
||
});
|
||
});
|
||
|
||
console.log('parsedAttachments', fileNames, fileUrls);
|
||
}
|
||
|
||
return attachments;
|
||
});
|
||
|
||
// 获取文件名
|
||
const getFileName = (file: FileInfo) => {
|
||
if (file.resourName) {
|
||
return file.resourName;
|
||
}
|
||
if (file.name) {
|
||
// 如果name包含扩展名，去掉扩展名
|
||
const lastDotIndex = file.name.lastIndexOf('.');
|
||
if (lastDotIndex > 0) {
|
||
return file.name.substring(0, lastDotIndex);
|
||
}
|
||
return file.name;
|
||
}
|
||
return '未知文件';
|
||
};
|
||
|
||
// 获取文件后缀
|
||
const getFileSuffix = (file: FileInfo) => {
|
||
if (file.resSuf) {
|
||
return file.resSuf;
|
||
}
|
||
if (file.url) {
|
||
const lastDotIndex = file.url.lastIndexOf('.');
|
||
if (lastDotIndex > 0) {
|
||
return file.url.substring(lastDotIndex + 1);
|
||
}
|
||
}
|
||
if (file.name) {
|
||
const lastDotIndex = file.name.lastIndexOf('.');
|
||
if (lastDotIndex > 0) {
|
||
return file.name.substring(lastDotIndex + 1);
|
||
}
|
||
}
|
||
return 'unknown';
|
||
};
|
||
|
||
// 获取文件图标
|
||
const getFileIcon = (fileType: string) => {
|
||
const type = fileType.toLowerCase();
|
||
switch (type) {
|
||
case 'pdf':
|
||
return '/static/base/view/pdf.png';
|
||
case 'doc':
|
||
case 'docx':
|
||
return '/static/base/view/word.png';
|
||
case 'xls':
|
||
case 'xlsx':
|
||
return '/static/base/view/excel.png';
|
||
case 'ppt':
|
||
case 'pptx':
|
||
return '/static/base/view/ppt.png';
|
||
case 'zip':
|
||
case 'rar':
|
||
case '7z':
|
||
return '/static/base/view/zip.png';
|
||
default:
|
||
return '/static/base/view/more.png';
|
||
}
|
||
};
|
||
|
||
// 文件预览
|
||
const previewFile = (file: FileInfo) => {
|
||
emit('preview', file);
|
||
|
||
// 确定文件URL和名称
|
||
const fileUrl = file.resourUrl ? imagUrl(file.resourUrl) : file.url;
|
||
const fileName = file.resourName ? `${file.resourName}.${file.resSuf}` : file.name;
|
||
const fileSuf = file.resSuf || file.name.split('.').pop() || '';
|
||
|
||
// 根据文件类型选择预览方式
|
||
if (isVideo(fileSuf)) {
|
||
handlePreviewVideo(file);
|
||
} else if (isImage(fileSuf)) {
|
||
handlePreviewImage(file);
|
||
} else if (canPreview(fileSuf)) {
|
||
handlePreviewDocument(file);
|
||
} else {
|
||
// 不支持预览的文件类型，直接下载
|
||
downloadFileAction(file);
|
||
}
|
||
};
|
||
|
||
// 文档预览
|
||
const handlePreviewDocument = (file: FileInfo) => {
|
||
const fileUrl = file.resourUrl ? imagUrl(file.resourUrl) : file.url;
|
||
const fileName = file.resourName ? `${file.resourName}.${file.resSuf}` : file.name;
|
||
const fileSuf = file.resSuf || file.name.split('.').pop() || '';
|
||
|
||
previewFileUtil(fileUrl, fileName, fileSuf)
|
||
.catch((error: any) => {
|
||
// 预览失败时尝试下载
|
||
downloadFileAction(file);
|
||
});
|
||
};
|
||
|
||
// 视频预览
|
||
const handlePreviewVideo = (file: FileInfo) => {
|
||
const videoUrl = file.resourUrl ? imagUrl(file.resourUrl) : file.url;
|
||
const videoName = file.resourName || file.name;
|
||
|
||
previewVideoUtil(videoUrl, videoName)
|
||
.catch((error: any) => {
|
||
// 视频预览失败时的处理
|
||
});
|
||
};
|
||
|
||
// 图片预览
|
||
const handlePreviewImage = (file: FileInfo) => {
|
||
const imageUrl = file.resourUrl ? imagUrl(file.resourUrl) : file.url;
|
||
|
||
previewImageUtil(imageUrl)
|
||
.catch((error: any) => {
|
||
// 图片预览失败时的处理
|
||
});
|
||
};
|
||
|
||
// 文件下载
|
||
const downloadFileAction = (file: FileInfo) => {
|
||
emit('download', file);
|
||
|
||
const finalUrl = file.resourUrl ? imagUrl(file.resourUrl) : imagUrl(file.url);
|
||
// 获取原始文件名
|
||
const originalFileName = getOriginalFileName(file);
|
||
|
||
// 调用下载工具函数
|
||
downloadFileUtil(finalUrl, originalFileName)
|
||
.then(() => {
|
||
uni.showToast({
|
||
title: "下载成功",
|
||
icon: "success",
|
||
});
|
||
})
|
||
.catch((error) => {
|
||
console.error('下载失败:', error);
|
||
uni.showToast({
|
||
title: "下载失败",
|
||
icon: "error",
|
||
});
|
||
});
|
||
};
|
||
|
||
// 获取原始文件名
|
||
const getOriginalFileName = (file: FileInfo) => {
|
||
// 优先使用resourName，如果没有则使用name，确保文件名正确
|
||
let fileName = '';
|
||
if (file.resourName) {
|
||
// 如果resourName已经包含扩展名，直接使用
|
||
if (file.resSuf && !file.resourName.includes('.' + file.resSuf)) {
|
||
fileName = `${file.resourName}.${file.resSuf}`;
|
||
} else {
|
||
fileName = file.resourName;
|
||
}
|
||
} else if (file.name) {
|
||
// 如果name已经包含扩展名，直接使用
|
||
if (file.resSuf && !file.name.includes('.' + file.resSuf)) {
|
||
fileName = `${file.name}.${file.resSuf}`;
|
||
} else {
|
||
fileName = file.name;
|
||
}
|
||
} else {
|
||
// 最后备用方案，从URL提取文件名
|
||
const urlFileName = file.url.split('/').pop() || '未知文件';
|
||
fileName = urlFileName;
|
||
}
|
||
|
||
return fileName;
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.basic-file-preview {
|
||
margin-bottom: 20px;
|
||
padding: 15px;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
margin-bottom: 15px;
|
||
color: #333;
|
||
border-bottom: 2px solid #007aff;
|
||
padding-bottom: 5px;
|
||
}
|
||
|
||
.file-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 12px;
|
||
border: 1px solid #eee;
|
||
border-radius: 8px;
|
||
margin-bottom: 10px;
|
||
background: #fafafa;
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: translateY(1px);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.file-icon {
|
||
margin-right: 12px;
|
||
width: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.icon-image {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
}
|
||
|
||
.file-info {
|
||
flex: 1;
|
||
|
||
.file-name {
|
||
display: block;
|
||
font-weight: 500;
|
||
margin-bottom: 4px;
|
||
color: #333;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.file-size {
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.file-type {
|
||
font-size: 11px;
|
||
color: #999;
|
||
background: #f0f0f0;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
|
||
.file-actions {
|
||
display: flex;
|
||
gap: 4px;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-end;
|
||
|
||
.u-button {
|
||
min-width: 20px;
|
||
height: 26px;
|
||
font-size: 12px;
|
||
border-radius: 13px;
|
||
padding: 0 6px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.no-files {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
color: #999;
|
||
font-size: 14px;
|
||
}
|
||
</style> |