ygoa_miniapp/components/ygoa/attachmentList.vue

<template>
	<view class="message_attachment">
		<uni-row :gutter="0">
			<uni-col v-for="(attachment, index) in attachments" :key="index" :xs="{span: 24}" :sm="6">
				<view class="attachment">
					<text @click="seeAttachment(attachment.path)"
						class="file_name uni-ellipsis">{{ attachment.fileName || '附件名为空' }}</text>
					<view class="icon-container">
						<view>
							<uni-icons @click="shareAttachment(attachment.path)" :size="14" color="#2196f3" type="redo-filled" style="margin-left:10px;">
								分享
							</uni-icons>
							<uni-icons @click="copyAttachment(attachment.path)" :size="14" color="#2196f3" type="download-filled" style="margin-left:10px;">
								复制链接
							</uni-icons>
						</view>
						<!-- <view v-else>
							<uni-icons @click="deleteAttachment(attachment)" :size="14" color="#ff0000" type="close" style="margin-left:10px;">
								删除
							</uni-icons>
						</view> -->
					</view>
				</view>
			</uni-col>
		</uni-row>
	</view>
</template>

<script setup lang="ts">
	import config from '@/config';
	import $tab from '@/plugins/tab';
	import { onMounted, ref } from 'vue';
	import $modal from '@/plugins/modal.js'

	onMounted(() => {
		startAttachmentCheck();
	})
	const intervalId = ref(null); // 定时器ID

	// TODO: 根据接口返回的数据动态生成process表单
	// const props = defineProps(['attachments'])
	const props = defineProps({
		attachments: {
			type: Array,
			required: true,
			default: []
		},
		canEdit:{
			type: Boolean,
			default: false
		}
	})
	const emits = defineEmits([
		'clickDelete', // 点击分段器
	])
	//检查附件列表是否有数据
	function startAttachmentCheck() {
		intervalId.value = setInterval(() => {
			if (props.attachments) {
				// console.log('props', props.attachments);
				clearInterval(intervalId.value); // 清除定时器    
			}
		}, 100); // 每0.1秒检查一次
	}

	//预览文件
	function seeAttachment(path) {
		const isIOS = () => {
			const systemInfo = uni.getSystemInfoSync();
			return /iOS/i.test(systemInfo.system);
		}
		// console.log('====',isIOS());
		// 下载文件
		wx.downloadFile({
			url: config.baseUrlPre + path, // 需要下载的文件地址
			success: (res) => {
				if (res.statusCode === 200) {
					// 下载成功，打开文档（临时文件路径res.tempFilePath）
					//文件拓展名
					const extension = res.tempFilePath.split('.').pop().toLowerCase();
					const supportedTypes = ['jpg', 'jpeg', 'png'];
					if (isIOS() && supportedTypes.includes(extension)) {
						uni.previewImage({
							urls: [res.tempFilePath],
						});
					}else{
						wx.openDocument({
							filePath: res.tempFilePath,
							success: (res)=> {
								console.log('文档打开成功');
							},
							fail: (err)=> {
								console.error('打开文档失败：', err);
							}
						});
					}		
				} else {
					// $modal.alert('err1')
					console.error('下载文件失败，状态码：', res.statusCode);
				}
			},
			fail: (err) => {
				console.error('下载文件失败：', err);
				// $modal.alert('err2', JSON.stringify(err))
			}
		});

		// uni.downloadFile({
		// 	url: config.baseUrlPre + path, // 需要下载的文件地址
		// 	success: (res) => {
		// 		if (res.statusCode === 200) {
		// 			// 下载成功，打开文档（临时文件路径 res.tempFilePath）
		// 			uni.openDocument({
		// 				filePath: res.tempFilePath,
		// 				fileType: getFileExtension(res.tempFilePath), // 明确指定文件扩展名
		// 				success: () => {
		// 					console.log('文档打开成功');
		// 				},
		// 				fail: (err) => {
		// 					console.error('打开文档失败：', err);
		// 					// 可以选择向用户显示错误信息
		// 					$modal.showToast('打开文档失败')
		// 				}
		// 			});
		// 		} else {
		// 			console.error('下载文件失败，状态码：', res.statusCode);
		// 			// 向用户显示下载失败的信息
		// 			$modal.showToast('下载文件失败')
		// 		}
		// 	},
		// 	fail: (err) => {
		// 		console.error('下载文件失败：', err);
		// 		// 向用户显示下载失败的信息
		// 		$modal.showToast('下载文件失败')
		// 	}
		// });

		// uni.downloadFile({
		//         url: config.baseUrlPre + path, // 需要下载的文件地址
		//         success: (res) => {
		//             if (res.statusCode === 200) {
		//                 const tempFilePath = res.tempFilePath;
		//                 const extension = getFileExtension(tempFilePath);
		// 				if(isIOS) {
		// 					// 检查文件类型是否受支持
		// 					const supportedTypes = ['pdf', 'jpg', 'jpeg', 'png', 'mp4']; // 根据需要添加更多支持的类型
		// 					if (!supportedTypes.includes(extension)) {
		// 						console.warn('文件类型不受支持：', extension);
		// 						uni.showToast({ title: '文件类型不受支持', icon: 'none' });
		// 						return;
		// 					}
		// 				}

		//                 uni.openDocument({
		//                     filePath: tempFilePath,
		//                     fileType: extension, // 明确指定文件扩展名
		//                     success: () => {
		//                         console.log('文档打开成功');
		//                     },
		//                     fail: (err) => {
		//                         console.error('打开文档失败：', JSON.stringify(err));
		//                         uni.showToast({ title: '打开文档失败', icon: 'none' });
		//                     }
		//                 });
		//             } else {
		//                 console.error('下载文件失败，状态码：', res.statusCode);
		//                 uni.showToast({ title: '下载文件失败', icon: 'none' });
		//             }
		//         },
		//         fail: (err) => {
		//             uni.hideLoading();
		//             console.error('下载文件失败：', JSON.stringify(err));
		//             uni.showToast({ title: '下载文件失败', icon: 'none' });
		//         }
		//     });

	}

	//文件分享
	function shareAttachment(path) {
		uni.downloadFile({
			url: config.baseUrlPre + path,
			success: (res) => {
				if (res.statusCode === 200) {
					wx.shareFileMessage({
						filePath: res.tempFilePath,
						fileName: path.split('/').pop(),
						success() { },
						fail: console.error,
					})
				}
			}
		});

	}

	//复制下载链接
	function copyAttachment(path) {
		wx.setClipboardData({
			data: config.baseUrlPre + path,
			success: (res) => {
				$modal.msgSuccess('下载链接已复制')
			}
		});
	}
	function deleteAttachment(file) {
		// console.log('delAttachment: ',file);
		emits('clickDelete', file)
	}
</script>

<style lang="scss">
	.attachment {
		color: #2196f3;
		margin-left: 5px;
		display: flex;
		/* 使用 flexbox 布局 */
		justify-content: space-between;
		/* 在空余空间时，图标靠右 */
		align-items: center;
		/* 垂直居中对齐 */
	}

	.icon-container {
		display: flex;
		/* 图标使用 flexbox 布局 */
		justify-content: flex-end;
		/* 使图标靠右 */
	}

	.file_name {
		max-width: 22vh;
	}
</style>