read_opc/reado-app/pages/message/msg-detail/index.vue

<template>
	<view>
		<Nav title="消息详情" isBack @goBack="handelBack" />
		<view class="content">
			<view class="section" v-if="msg">
				<view class="title">
					<h2>{{msg.noticeTitle}}</h2>
				</view>
				<view>
					<view class="time">发布日期：{{msg.createTime}}</view>
				</view>
				<view class="cont">
					<text>{{msg.noticeContent}}</text>
				</view>
				<view class="empty" v-if="!this.msg">
					<u-empty mode="data" icon="../../static/data.png">
					</u-empty>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getToken
	} from "@/utils/auth.js"
	export default {
		data() {
			return {
				id: null,
				state: null,
				msg: null,
			}
		},
		onLoad(options) {
			this.id = options.id
			this.state = options.state
			if (this.id) {
				this.getMsg()
			}
			if (this.id && this.state === '0') {
				this.msgStatus()
			}
		},
		methods: {
			//返回按钮
			handelBack() {
				uni.switchTab({
					url: '/pages/message/index'
				});
			},
			//消息详情接口
			getMsg() {
				uni.$http.get('/messageNotice/getMessageNoticeById', {
					id: this.id
				}).then(res => {
					const data = res.data
					if (data.code === 200) {
						this.msg = data.data
					}
				})
			},
			//改变消息已读状态
			msgStatus() {
				uni.$http.post('/messageNotice/readMessageNoticeById?id=' + this.id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 25rpx;

		.section {
			position: relative;
			text-align: center;

			.title {
				margin-bottom: 40rpx;
				word-wrap: break-word
			}

			.time {
				font-size: 31rpx;
				color: #9fa297;
			}

			.cont {
				margin-top: 60rpx;
				text-align: left;
				word-wrap: break-word
			}

			.empty {
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
			}
		}

	}
</style>