uni-zhihuikuangshan/pages/my/message-reminder/message-detail/message-detail.vue

<template>
	<view>
		<view class="content">
			<view class="title">{{detail.title}}</view>
			<view class="time">{{detail.created_at}}</view>
			<view class="line">发送人：{{detail.send_user}}</view>
			<view class="line" v-if="detail.scope != 'all'">接收人：{{detail.scope}}</view>
			<view class="line" v-if="detail.scope == 'all'">接收人：所有人</view>
			<view class="inner" v-html="detail.content"></view>

			<view class="section" v-if="detail.files.length > 0">
				<view class="title">附件：</view>
				<view>
					<view class="file_list">
						<view class="item" v-for="(item,index) in detail.files" :key="index"
							@click="open_file(item.path)">
							<view class="left">
								<view class="icon"></view>
								<view class="info">
									<view class="name">{{item.fileName}}</view>
								</view>
							</view>
							<view class="right">
								<uni-icons type="arrowright"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: {}
			};
		},
		onLoad() {
			const self = this
			const eventChannel = this.getOpenerEventChannel()
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('acceptDataFromOpenerPage', (data) => {
				// console.log(data.data)
				this.detail = data.data
				console.log(this.detail)
			})

			// 设置标题
			uni.setNavigationBarTitle({
				title: this.detail.title
			})
			
			this.read(this.detail.id)
		},
		methods: {
			// 标为已读
			read(id) {
				// console.log(this.detail.id)
				this.$api.message_read({
					id: id
				}).then((res) => {
					console.log(res)
					this.get_message_list()
				})
			},
			// 预览文件
			open_file(path) {
				uni.downloadFile({
					url: path,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
			},
		}

	}
</script>

<style lang="scss">
	.content {
		width: 749rpx;
		box-sizing: border-box;
		padding: 24rpx;
	}

	.title {
		line-height: 30px;
	}

	.time {
		line-height: 30px;
		font-size: 14px;
		color: #999;
	}

	.line {
		line-height: 30px;
		font-size: 16px;
	}

	.inner {
		margin: 20px 0;
		text-indent: 2rem;
		word-break: break-all;
		overflow: hidden;
	}

	.file_list {
		.item {
			height: 30px;

			display: flex;
			justify-content: space-between;
			align-items: center;

			border-bottom: 1px solid #ECF0F1;
			padding: 8px 0;

			.left {
				display: flex;

				.icon {}

				.info {
					.name {
						font-size: 16px;
						font-family: MicrosoftYaHei;
						color: #2C3E50;
					}

				}
			}

			.right {}
		}
	}
</style>