veterans_H5/h5_web/pages/notification/noticeDetails/noticeDetails.vue

<!-- 消息详情 -->
<template>
	<view class="news-details">
		<u-navbar back-text="" title="" back-icon-color="#FFFFFF" :background="{ background: '#3D5D4C' }" :border-bottom="false"></u-navbar>
		<view class="news-details-header">
			<view class="news-details-header-title">{{ info.name }}</view>
			<view class="news-details-header-subtitle">
				<view v-if="info.createBy">来源：{{ info.createBy }}</view>
				<view>{{ info.releasTime }}</view>
			</view>
		</view>
		<view class="news-details-content">
			<u-parse :html="info.content"></u-parse>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default{
		data(){
			return{
				info: ''
			}
		},
		onLoad(page){
			if (page.id) {
				this.getDetails(page.id)
			}
		},
		onShow(){
			
		},
		methods:{
			// 获取详情
			getDetails(id) {
				this.$u.api.noticeApi.getNoticeDetailsApi({ id }).then(res=>{
					if (res.code === 200) {
						this.info = res.data
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
					}
				})
				.catch(err => {
					this.$refs.uToast.show({
						title: '操作失败!',
						type: 'error'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.news-details {
		padding: 30rpx 44rpx;
		font-family: 'PingFangSC-Regular, PingFang SC';
		&-header {
			border-bottom: solid 1px #DBDBDB;
			padding-bottom: 22rpx;
			&-title {
				color: #000;
				font-size: 36rpx;
			}
			&-subtitle {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				color: #6F6F6F;
				font-size: 24rpx;
			}
		}
		&-content {
			padding: 18rpx 0;
			line-height: 50rpx;
		}
	}
</style>