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 class="picture" v-if="info.pic">
			<img :src="info.pic" style="width: 100%;" alt="">
			
		</view>
		
		</view>
		<!-- 评论 -->
		<template v-if="info.typeName!=='通知公告'">
			
		
		<view class="comment" v-if="info.title&&info.listComment&&info.listComment.length"   >
			<view class="title">
				精华评论
			</view>
			
		<view class="comment-item"  v-for="(item,i) in info.listComment" :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.name
					}" >
						{{item.name?item.name:'用户异常'}}
					</view>
					<view class="date">
						{{item.date}}
					</view>
				</view>
				<view class="comment-content">
					{{item.content}}
					<view class="mine" v-if="item.isMine">
						<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>
		</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:[],
				 back:true,
				recordsTotal:0,
				
			}
		},
		onLoad(op){
			if(op.back&&op.back=="share"){
				this.back=false
			}
			this.id=op.id
			this.userInfo=this.carhelp.getPersonInfo()
			this.getInfo(true)
			
		},
	
		methods: {
			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();
					
				}).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();
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			changeLikes(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				
				API.changeLikes({
					newsId:this.id
				}).then((res) => {
					
					this.getInfo(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;
					
					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%;'
							
					    }
							 
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	page{
		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>