jp-railway/pages/news/articleDetails.vue

<template>
	<view>
		
		<u-navbar :isBack="back" ></u-navbar>
		 
		  <share-server ref="share"  ></share-server>
	<!-- 新闻内容 -->
	    <view class="content">
	    	<view class="title">
	    		{{info.title}}
	    	</view>
			<view class="infos">
				<view class="date">
					{{info.createTime}}
				</view>
				<view class="pageview"  >
					<view class="icon">
						<u-icon name="eye" size="32"></u-icon>
					</view>
					<view class="number">
						{{info.hits}}
					</view>
				</view>
			</view>
	    <view class="text news-content" v-html="info.content">
	    	
	    
	    </view>
		
	
		
		</view>
		<!-- 评论 -->
		<template v-if="typeNameBl">
			
		
		<view class="comment" v-if="info.title&&infolistComment&&infolistComment.length"   >
			<view class="title">
				精华评论
			</view>
			
		<view class="comment-item"  v-for="(item,i) in infolistComment" :key="i" >
			<view class="photo">
				<img  v-if="item.headImg" :src="item.headImg" alt="">
				<u-avatar  v-else  size="80" ></u-avatar>
				
			</view>
			<view class="details">
				<view class="name-date">
					<view class="name" :class="{
						red:!item.userName
					}" >
						{{item.userName?item.userName:'用户异常'}}
					</view>
					<view class="date">
						{{item.date}}
					</view>
				</view>
				<view class="comment-content">
					{{item.content}}
					<view class="mine" v-if="userInfo&&(item.userId==userInfo.id)">
						<view class="my-comment">
							我的评论<span style="color:red;margin-left: 2px;"  v-if="item.status==0">[审批中]</span>
						</view>
						 
						<view class="delete" @click="newsCommentsdelete(item.id)">
							删除	
						</view>
					</view>
				</view>
			   
			</view>
		</view>
			<u-divider  style="margin-top: 20px;"   v-if="infolistComment.length==recordsTotal" >已经到底了，欢迎留下你的评论</u-divider>
		
		</view>
		
		<view class="bottom"  v-if="userInfo" >
			<view class="input" @click="showMessage=true">
				<view class="inputT">发表评论</view>
			</view>
			<view class="like" :class="{
				red:info.iLike
			}" @click="changeLikes()">
				<view class="icon">
					<u-icon name="thumb-up"   size="32"></u-icon>
				</view>
				<view class="number">
					{{info.likesNum}}
				</view>
			</view>
		</view>
		<view class="bottom"  v-else >
			<view class="input" @click="issueMethod()">
				<view class="inputT">未登录,前往登录</view>
			</view>
			<view class="like" :class="{
				red:info.iLike
			}" >
				<view class="icon">
					<u-icon name="thumb-up"   size="32"></u-icon>
				</view>
				<view class="number">
					{{info.likesNum}}
				</view>
			</view>
		</view>
		</template>
		<u-popup v-model="showMessage" border-radius="34" mode="bottom" >
			<view class="showMessage">
				<view class="showMessage1"><h3>发表评论({{content.length}}/50)</h3></view>
				<view class="showMessage2">
					<textarea name="" id=""   style="  width:100%"
					v-model="content" maxlength="50"
					cols="30" rows="5" placeholder="填写内容"></textarea>
				</view>
				<view class="showMessage3">
					<u-button type="primary" @click="submitMessage()">提交</u-button>
				</view>
			</view>
					
			</u-popup>
		
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/news.js'
	import ShareServer from '@/components/ShareServer.vue'
	
	export default {
		components: {
		  ShareServer
		},
		data() {
			return {
				id:"",
				content:"",
				info:{},
				showMessage:false,
				userInfo:null,
				list:[],
				infolistComment:[],
				listForm:{
					pageIndex:1,
					newsId:"",
					queryStatus:0,
					pageSize:10,
				},
				 back:true,
				recordsTotal:0,
				getNewsCommentsListBl:true,
			}
		},
		onLoad(op){
			if(op.back&&op.back=="share"){
				this.back=false
			}
			this.id=op.id
			this.listForm.newsId=this.id;
			this.userInfo=this.carhelp.getPersonInfo()
			this.getInfo(true)
			
		},
		computed:{
			typeNameBl(){
				if(this.info&&(this.info.typeName=='图片新闻'||this.info.typeName=='政务动态')){
					return true
				}else{
					return false
				}
			}
		},
		methods: {
			onReachBottom() {
				if (this.infolistComment.length < this.recordsTotal&&this.getNewsCommentsListBl) {			
					this.myLoadmore();
				}
			},
			myLoadmore(){
				this.listForm.pageIndex += 1;
				this.getNewsCommentsList();
			},
			issueMethod(){
				uni.showModal({
					title:"提示",
					content:"未登录,登录后参与评论",
					confirmText:"前往登录",
					showCancel:true,
					success: function (res) {
						if(res.confirm){
							uni.navigateTo({
								url:'/pages/login/index'
							})
						}
					}
				})
				
			},
			newsCommentsdelete(id){
				uni.showModal({
					title: '提示',
					content: '是否删除评论？',
					
					success: res=>{
						if (res.confirm) {
							this.newsCommentsdeletemethods(id)
						} else if (res.cancel) {
							//('用户点击取消');
						}
					}
				});
			},
			newsCommentsdeletemethods(id){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.newsCommentsdelete(id).then((res) => {
				
					uni.showToast({
						title: "删除成功",
						icon: "none"
					})
					
					//this.getInfo();
					this.getNewsCommentsList(true)
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			submitMessage(){
				if(!this.content){
					uni.showToast({
						title: "请填写内容",
						icon: "none"
					})
					return
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.commentNews({
					newsId:this.id,
					content:this.content,
				}).then((res) => {
					this.content=""
					uni.showToast({
						title: "提交成功",
						icon: "none"
					})
					this.showMessage=false
					//this.getInfo();
					
					this.getNewsCommentsList(true)
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			changeLikes(){
				if(!this.info.iLike){
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					
					
					API.changeLikes({
						newsId:this.id
					}).then((res) => {
						this.info.iLike=true;
						this.info.likesNum++;
						uni.hideLoading();
						//this.getInfo(true)
					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				}else{
					uni.showToast({
						title: "您已经点过赞了",
						icon: "none"
					})
				}
				
			},
			getNewsCommentsList(bl){
				if(this.typeNameBl){
					
				}else{
					return
				}
				if(bl){
					this.listForm.pageIndex=1;
					this.infolistComment=[];
					this.getNewsCommentsListBl=false
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if(this.userInfo){
					this.listForm.queryStatus =1
				}
				API.newsCommentsList(this.listForm).then((res) => {
					uni.hideLoading();
					this.infolistComment = [
						...this.infolistComment,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
					this.$nextTick(()=>{
						this.getNewsCommentsListBl=true
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
				
			},
			getInfo(bl){
				if(bl){
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
				}
				
				var userId=null
				if(this.userInfo){
					userId=this.userInfo.id
				}
				
				API.detail({
					id:this.id,
					userId:userId
				}).then((res) => {
					
					
					if(bl){
						uni.hideLoading();
					}
					this.info=res.data;
					if(this.$refs.share){
						this.$refs.share.setUrl("/pages/news/articleDetails?back=share&id="+this.id);
						
						this.$refs.share.setTitle(this.info.title,this.id);
						
					}
					
					this.$nextTick(()=>{
					    var list =document.getElementsByClassName("news-content")[0].getElementsByTagName("img");
						
						for(var i=0;i<list.length;i++){
					        list[i].style='width: 100%;height: 100%;'
							
					    }
							 
					})
					this.getNewsCommentsList();
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style>
	
</style>
<style lang="scss" scoped>
	.showPointsRuleClass{
		    padding: 10px 30px;
	}
	
	page{
		border-top: 1px solid #f1f1f1;
		
		padding-bottom:100px;
		font-family: 'Regular';
	}
	
	// 新闻内容
	.content{
		
		padding: 32rpx 32rpx 48rpx 32rpx;
		background-color: #fff;
		.title{
			color: rgba(16, 16, 16, 1);
			font-size: 20px;
			text-align: justify;
		     font-weight: 550;
			 font-family: 'SemiBold';
		}
		.infos{
			display: flex;
			justify-content: space-between;
			padding: 24rpx 0 32rpx 0;
			border-bottom: 1px solid rgba(241, 241, 241, 1);
			color: rgba(119, 119, 119, 1);
			font-size: 12px;
			.pageview{
				display: flex;
			}
			.icon{
				margin-right:8rpx ;
			}
		}
		.text{
			margin-top: 40rpx;
			line-height: 28px;
			color: rgba(51, 51, 51, 1);
		}
		.picture{
			
			margin-top: 40rpx;
			img{
				width: 100%;
				height: 155px;
			}
			.pic-title{
				margin-top: 7px;
				color: rgba(119, 119, 119, 1);
				font-size: 12px;
				text-align: center;
			}
		}
	}
	.showMessage{
		padding: 60rpx 50rpx ;
		.showMessage2{
			background-color: #E5E7EA;
			margin: 40rpx 0;
			textarea{
				padding: 8rpx;
				border-radius:34px;
			}
		}
		
	}
	// 评论
	.comment{
		margin-top:24rpx;
		background-color: #fff;
		padding: 32rpx 32rpx 48rpx 32rpx;
		.title{
			color: rgba(51, 51, 51, 1);
			font-size: 18px;
		}
		.comment-item:last-of-type{
			.comment-content{
				border: none;
			}
		}
		.comment-item{
			display: flex;
			padding-top: 58rpx;
			.photo{
				margin-top: -12px;
				img{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50px;
				}
			}
			.details{
				margin-left: 24rpx;
				width: 100%;
				.name-date{
					display: flex;
					justify-content: space-between;
					.name{
						color: rgba(51, 51, 51, 1);
						font-size: 16px;
					}
					.date{
						color: rgba(119, 119, 119, 1);
						font-size: 12px;
					}
				}
				
			}
			.comment-content{
				margin-top: 16rpx;
				color: rgba(51, 51, 51, 1);
				line-height: 20px;
				border-bottom: 1px solid rgba(232, 232, 232, 1);
				padding-bottom: 40rpx;
				.mine{
					margin-top: 16rpx;
					display: flex;
					justify-content: space-between;
						line-height: 20px;
					.my-comment{
						
						color: rgba(119, 119, 119, 1);
						font-size: 12px;
						border: 1px solid rgba(153, 153, 153, 1);
						padding: 0rpx 12rpx;
						border-radius: 4px;
					}
					.delete{
						color: rgba(119, 119, 119, 1);
						font-size: 12px;
					}
				}
			}
			
			
		}
	}
    .red{
    	color: red !important;
    }
	.bottom{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		padding: 16rpx 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.input{
			background-color: rgba(229, 231, 234, 1);
			height: 32px;
			line-height: 32px;
			border-radius: 8rpx;
			width: 520rpx;
			padding-left: 16rpx;
		}
		/deep/.uni-input-placeholder{
			text-indent: 28rpx;
		}
		/deep/.uni-input-input{
			text-indent: 28rpx;
		}
		
		.like{
			display: flex;
			.number{
				margin-left: 16rpx;
			}
		}
	}
  
</style>