great_mobileui/pages/newsdetails.vue

<template>
	<view class="pages">
		<view class="" :style="{height: navHeight+'px' }"></view>
		<view class="navbar-box">
			<u-navbar title="资讯详情" :safeAreaInsetTop="true" @leftClick="leftClick" :titleStyle="{color:'#000'}" leftIconColor="#000" bgColor="transparent"></u-navbar>
		</view>
		<view class="banner">
			<image class="img" :src="details.mainImg||staticUrl+'/img/newsdetails-banner.png'" alt="">
		</view>
		<view class="content-wrap">
			<view class="title">{{details.title}}</view>
			<view class="time">{{ $u.timeFormat(details.onlineTime, 'yyyy-mm-dd') }}</view>
			<view class="centent">
				<u-parse :content="details.centent"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
	import { systemInfo } from "@/mixin.js";
	export default {
		mixins:[systemInfo],
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				id:'',
				details:{},
			}
		},
		onShow() {
		},
		onLoad(page) {
			let that = this;
			this.getSystemInfo();
			this.id = page.id;
			this.getDetails();
			setTimeout(()=>{
				that.addReadRecord()
			},2000);

		},
		methods: {
			leftClick(e){
				let pages = getCurrentPages();
				if(pages.length==1){
					uni.$u.route('/pages/index/index')
				}else{
					uni.navigateBack()
				};
			},
			getDetails(){
				this.$u.api.newsdetails({id:this.id}).then(res=>{
					this.details = res.data;
					// console.log('res',res.data);
				}).catch(err=>{
					console.log('getDetails',err);
				})
			},
			addReadRecord(){
				this.$u.api.addReadRecord({keyId:this.id, accessedPage: "小程序",remark:'资讯浏览'},{custom:{noload:true}}).then(res=>{
					// console.log('res',res.data);
				}).catch(err=>{
					console.log('getDetails',err);
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
.banner{
	.img{
		display: block;
		width: 100%;
		height: 400rpx;
	}
}
.content-wrap{
	padding: 65rpx 32rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	transform: translateY(-20rpx);
	.title{
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		line-height: 22rpx;
		margin-bottom: 30rpx;
	}
	.time{
		font-size: 24rpx;
		font-weight: 400;
		color: #C0C0C0;
		line-height: 22rpx;
		margin-bottom: 40rpx;
	}
	.centent{
		font-size: 28rpx;
		font-weight: 400;
		color: #6B6B6B;
		line-height: 44rpx;
		img,image{
			width: 100%;
			display: block;
			margin: 10rpx auto;
		}
	}
}
</style>