sugarpark-mini-program/components/tui-chat/message-elements/file-message/index.vue

<template>
	<view>
		<view class="TUI-fileMessage">
			<view class="fileMessage">
				<view class="fileMessage-box">
					<image class="file-icon" src="/static/static/images/file.png"></image>
					<label @tap="download" class="file-title">{{ filePayload.fileName }}</label>
				</view>
			</view>
		</view>
		<view class="pop" v-if="Show">
			<view class="text-box"><text class="download-confirm" @tap.stop="downloadConfirm">下载</text></view>
			<view class="text-box"><text class="abandon" @tap="cancel">取消</text></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			Show: false,
			filePayload: {}
		};
	},

	components: {},
	props: {
		message: {
			type: Object,
			default: () => {}
		},
		isMine: {
			type: Boolean,
			default: true
		}
	},
	watch: {
		message: {
			handler: function(newVal) {
				this.filePayload= newVal.payload;
				// this.setData({
				// 	filePayload: newVal.payload
				// });
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		download() {
			this.Show=true;
			// this.setData({
			// 	Show: true
			// });
		},

		downloadConfirm() {
			uni.downloadFile({
				url: this.filePayload.fileUrl,

				success(res) {
					const filePath = res.tempFilePath;
					uni.openDocument({
						filePath,

						success() {
							console.log('打开文档成功');
						}
					});
				}
			});
		},

		cancel() {
			this.Show=false;
			// this.setData({
			// 	Show: false
			// });
		}
	}
};
</script>
<style>
@import './index.css';
</style>