veterans_H5/h5_web/pages/newsDetails/newsDetails.vue

<template>
	<view class="news-details">
		<view class="news-details-header">
			<view class="news-details-header-title">{{ newsInfo.artTitle }}</view>
			<view class="news-details-header-subtitle">
				<view>来源：{{ newsInfo.artAuthor }}</view>
				<view>{{ formatDate(newsInfo.createTime) }}</view>
			</view>
		</view>
		<view class="news-details-content">
			<u-parse :html="newsInfo.artContent"></u-parse>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default{
		data(){
			return{
				newsInfo: ''
			}
		},
		onLoad(page){
			if (page.artId) {
				this.getDetails(page.artId)
			}
		},
		onShow(){
			
		},
		methods:{
			// 获取详情
			getDetails(id) {
				this.$u.api.getNewsDetails({ id }).then(res=>{
					if (res.code === 200) {
						this.newsInfo = res.data
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
					}
				})
				.catch(err => {
					this.$refs.uToast.show({
						title: '操作失败!',
						type: 'error'
					})
				})
			},
			/**
			 * 初始化日期 MM-dd hh:mm
			 */
			formatDate(date) {
				let value;
				if (date) {
					value = this.$u.timeFormat(date.replace(/-/g, '/'), 'mm-dd hh:MM')
				}
				return value;
			}
		}
	}
</script>

<style lang="scss" scoped>
	// @import  '@/static/css/quill.bubble.scss';
	// @import  '@/static/css/quill.core.scss';
	// @import  '@/static/css/quill.snow.scss';
	.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: 40rpx;
			}
			&-subtitle {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				color: #6F6F6F;
				font-size: 26rpx;
			}
		}
		&-content {
			padding: 18rpx 0;
			line-height: 50rpx;
			font-size: 28rpx;
		}
	}
</style>