xusfood_client/xushuo/dynamicdetails.vue

<template>
	<view class="">
		<u-navbar
			title="详情"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="page-wrap">
			<view class="title">{{pageData.title}}</view>
			<view class="info u-flex u-row-between">
				<view class="time">{{pageData.createTime}}</view>
				<view class="view-count">{{pageData.viewCount}}</view>
			</view>
			<view class="content-wrap">
				<u--image :src="pageData.mainImg" :showLoading="true" width="100%" mode="aspectFill"></u--image>
				<view class="content">
					{{pageData.content}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			id:null,
			pageData:{
				title:'',
				content:''
			},
		}
	},
	onLoad(page) {
		this.id = page.id;
		this.getDetails(this.id);
		this.addViewCount(this.id);
	},
	methods:{
		getDetails(id){
			this.$u.api.shopNews({id:id}).then(res=>{
				this.pageData = res.data;
				// console.log('res',res);
				}).catch(err=>{
				console.log('shopNews',err.data);
			})
		},
		addViewCount(id){
			this.$u.api.addViewCount({id:id}).then(res=>{
				// console.log('res',res);
				}).catch(err=>{
				console.log('addViewCount',err.data);
			})
		}
	}
}
</script>
<style>
page{background-color: #F5F5F5;}
</style>
<style lang="scss" scoped>
.title{
	font-size: 36rpx;
	font-weight: 600;
	color: #333333;
	line-height: 50rpx;
	margin-bottom: 20rpx;
}
.info{
	margin-bottom: 50rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	line-height: 33rpx;
}
.content{
	font-size: 26rpx;
	font-weight: 400;
	color: #666666;
	line-height: 44rpx;
	margin: 20rpx 0;
}
.u-image{
	max-width: 100%;
}
</style>