xusfood_client/xushuo/dynamicdetails.vue

<template>
	<view class="">
		<u-navbar
			title="详情"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="page-wrap">
			<view class="base-info" v-if="type=='swiperDetail'">
				<view class="title">{{swiperDetails.name}}</view>
				<view class="info u-flex u-row-between">
					<view class="time">{{swiperDetails.createTime}}</view>
					<!-- <view class="view-count">{{swiperDetails.viewCount}}</view> -->
				</view>
			</view>
			<view v-else class="base-info">
				<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>
			
			<view class="" v-if="type=='swiperDetail'">
				<u--image :src="swiperDetails.sliderImg" :showLoading="true" width="100%" mode="aspectFill"></u--image>
				<view class="" v-html="swiperDetails.detail"></view>
			</view>
			<view v-else 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,
			type:'',
			pageData:{
				title:'',
				content:''
			},
			swiperDetails:{},
		}
	},
	onLoad(page) {
		this.id = page.id;
		this.type = page.type;
		if(this.type=='swiperDetail'){
			console.log('this.id',this.id);
			this.getSwiperDetails(this.id);
		}else{
			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);
			})
		},
		getSwiperDetails(id){
			this.$u.api.swiperDetails({id:id}).then(res=>{
				this.swiperDetails = res.data;
				// console.log('res',res);
				}).catch(err=>{
				console.log('getSwiperDetails',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;
}
.page-wrap{
	font-size: 26rpx;
	font-weight: 400;
	color: #666666;
	line-height: 44rpx;
	p{
		text-indent: 2em;
	}
	/deep/ .u-image{
		margin-bottom: 20rpx;
	}
}
.content{
	font-size: 26rpx;
	font-weight: 400;
	color: #666666;
	line-height: 44rpx;
	margin: 20rpx 0;
}
.u-image{
	max-width: 100%;
}
</style>