veterans_H5/h5_web/pages/policyInfo/policyInfoDetails.vue

<template>
	<view class="policyinfodetails">
		<u-navbar back-text="" title="" back-icon-color="#FFFFFF" :background="{background: '#3D5D4C' }"></u-navbar>
		<view class="policyinfodetails-header">
			<view class="policyinfodetails-header-title">{{ policyInfoDetailsObj.artTitle }}</view>
			<view class="policyinfodetails-header-subtitle">
				<view>来源：{{ policyInfoDetailsObj.artAuthor }}</view>
				<view>{{ formatDate(policyInfoDetailsObj.createTime) }}</view>
			</view>
		</view>
		<view class="policyinfodetails-content">
      <view class="ql-editor">
        <u-parse :html="policyInfoDetailsObj.artContent"></u-parse>
      </view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default{
		data(){
			return{
				policyInfoDetailsObj: ''
			}
		},
		onLoad(page){
			if (page.artId) {
				this.getDetails(page.artId);
			}
		},
		onShow(){
			
		},
		methods:{
			// 获取详情
			getDetails(id) {
				this.$u.api.policyInfo.getPolicyInfoDetails({ id: id })
				.then(res=>{
					if (res.code === 200) {
						this.policyInfoDetailsObj = 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';
	.policyinfodetails {
		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;
		}
	}
</style>