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">
						<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>
			</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: []
		}
	})
	//检查附件列表是否有数据
	function startAttachmentCheck() {
		intervalId.value = setInterval(() => {
			if (props.attachments) {
				// console.log('props', props.attachments);
				clearInterval(intervalId.value); // 清除定时器    
			}
		}, 100); // 每0.1秒检查一次
	}

	//预览文件
	function seeAttachment(path) {
		console.log('path',path);
		// 下载文件
		wx.downloadFile({
			url: config.baseUrlPre + path, // 需要下载的文件地址
			success:  (res)=> {
				if (res.statusCode === 200) {
					// 下载成功，打开文档（临时文件路径res.tempFilePath）
					wx.openDocument({
						filePath: res.tempFilePath,
						success: function (res) {
							console.log('文档打开成功');
						},
						fail: function (err) {
							// $modal.alert('err', JSON.stringify(err))
							console.error('打开文档失败：', err);
						}
					});
				} else {
					// $modal.alert('err1')
					console.error('下载文件失败，状态码：', res.statusCode);
				}
			},
			fail:  (err)=> {
				console.error('下载文件失败：', err);
				// $modal.alert('err2', JSON.stringify(err))
			}
		});

	}

	//文件分享
	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('下载链接已复制')
			}
		});
	}
</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>