zhishifufei_uniapp/pages/my/noticeDetail.vue

<template>
  
  <BaseContainer>
    <NavBar :title="info.message_types.name" />
		<view class="info">
			<view class="info-box flex flex-center-x">
				<image :src="info.message_types.pic" mode="aspectFill"></image>
				<view class="box-content">
					<view>{{ info.message_types.name }}</view>
					<view>{{ info.message_types.update_time }}</view>
				</view>
			</view>
			<mp-html
				v-if="!!info.content"
				class="swiper-conter"
				container-style="padding: 30rpx;background: #ffffff;"
				:content="info.content"
			></mp-html>
		</view>
  </BaseContainer>
</template>

<script>
import { setReaded } from '@/api/user';
import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html.vue";

export default {
  components: {
    mpHtml,
  },
  data() {
    return {
			info: {},
    };
  },
  onLoad(options) {
		console.log(options);
		this.info = options.info ? JSON.parse(options.info) : {};
		console.log(this.info);
		this.setReaded();
  },
  methods: {
		async setReaded() {
			if (this.info.is_read === 1) {
				return;
			}
			try{
				await setReaded({ id: this.info.id});
			}catch(e){
				//TODO handle the exception
			}
		},
  },
};
</script>

<style scoped lang="scss">
	::v-deep {
		._root {
			width: 690rpx;
			margin: 20rpx auto 0;
			padding: 60rpx 40rpx!important;
		}
	}
	.info {
		width: 690rpx;
		margin: 10rpx auto 0;
		background: #FFFFFF;
		border-radius: 10rpx;
		.info-box {
			padding: 45rpx 0 15rpx;
			border-bottom: 1rpx solid #E6E6E6;
			image {
				width: 83rpx;
				height: 83rpx;
				flex-shrink: 0;
				margin-right: 20rpx;
			}
			.box-content {
				flex: 1;
				view {
					color: #999999;
					font-size: 20rpx;
					line-height: 20rpx;
					&:first-child {
						color: #333;
						font-size: 30rpx;
						line-height: 30rpx;
						margin-bottom: 20rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
	}
</style>