yijianbao_user_uniapp/pages_im/pages/conversation/chating/components/MessageItem/FileMessageRender.vue

<template>
	<view class="file_message_container" @click="openFile">
		<view class="file_info">
			<text class="file_name">{{ message.fileElem.fileName }}</text>
			<text class="file_size">{{ getSizeStr }}</text>
		</view>
		<view style="position: relative">
			<image :src="getIcon" alt="" srcset="" />
			<image v-if="!localPath" class="mask" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/file_message/file_mask.png" alt="" srcset="" />
			<image class="mask download" v-if="currentFileIsDownloading" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/file_message/file_suspend.png" alt="" srcset="" />
			<image v-if="!currentFileIsDownloading && !localPath" class="download" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/file_message/file_download.png" alt="" srcset="" />
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import { bytesToSize } from '../../../../../util/imCommon';
import { getFileIcon, checkFileIsExist } from '../../../../../util/common';
export default {
	name: '',
	props: {
		message: Object
	},
	data() {
		return {
			localPath: ''
		};
	},
	computed: {
		...mapGetters(['storeCacheMap']),
		getSizeStr() {
			return bytesToSize(this.message.fileElem.fileSize);
		},
		getIcon() {
			return getFileIcon(this.message.fileElem.fileName);
		},
		currentFileIsDownloading() {
			return this.storeCacheMap[this.message.clientMsgID]?.state === 'pending';
		}
	},
	watch: {
		storeCacheMap: {
			async handler(newVal) {
				const path = newVal[this.message.clientMsgID]?.path;
				this.localPath = await checkFileIsExist({
					key: this.message.clientMsgID,
					path
				});
			}
		}
	},
	mounted() {
		checkFileIsExist({
			key: this.message.clientMsgID,
			path: this.storeCacheMap[this.message.clientMsgID]?.path
		}).then((path) => (this.localPath = path));
	},
	methods: {
		download() {
			if (!this.message.fileElem.sourceUrl) {
				this.$u.toast('无效的链接');
				return;
			}

			if (this.currentFileIsDownloading) return;
			this.$store.dispatch('user/addCacheTask', {
				key: this.message.clientMsgID,
				url: this.message.fileElem.sourceUrl
			});
		},
		openFile() {
			if (!this.localPath) {
				this.download();
				return;
			}

			uni.openDocument({
				filePath: this.localPath,
				fail: () => {
					uni.showToast({
						title: '文件打开失败，请前往文件管理器打开',
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.file_message_container {
	@include vCenterBox();
	padding: 24rpx 32rpx;
	background: #fff;
	justify-content: space-between;
	width: 380rpx;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
	border-radius: 12rpx;
	border: 1px solid #ececec;

	.file_info {
		@include colBox(true);
		height: 44px;
		margin-right: 24rpx;
		max-width: 280rpx;

		.file_name {
			@include nomalEllipsis();
		}

		.file_size {
			color: #999;
			font-size: 24rpx;
		}
	}

	image {
		width: 38px;
		height: 44px;
	}

	.mask {
		top: 0;
		left: 0;
		position: absolute;
	}

	.download {
		width: 44rpx;
		height: 44rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}
</style>