property/user_ui/news/pages/news/detail.vue

<template>
	<view class="ndetail " @click="getComflag">
		<image :src="nonews" v-if="datainfo.status==2" class="noimg"></image>
		<block v-else>
			<!-- 详情 -->
			<view class="ndbox mb12">
				<view class="plr15">
					<view class="tit">{{datainfo.communityTitle}}</view>
					<view class="time mb12">{{datainfo.publishTime}}</view>
					<view class="rich">
						<rich-text :nodes="communityContent" style="word-break: break-all;"></rich-text>
					</view>
				</view>
			</view>
			<view class="ndbox mb12 plr15">
				<view class="flext mb15">
					<view class="pltit flex0">评论<text>({{datainfo.userComment}})</text></view>
					<view class="flex1"></view>
					<view class="pltitnum"><text>{{datainfo.userLikes}}</text>赞<text class="line">|</text><text>{{datainfo.userShare}}</text> 分享</view>

				</view>
				
				<!-- 评论列表 -->
				<box-list :datainfo="commentlist" type="comment" @getZhanFn="getZhanFn" @getShouFn="getShouFn" @getDzFn="getplDzFn" @getHfFn="getplHfFn" @getDelFn="getDelFn"></box-list>
			</view>
			<!-- 评论 -->
				<view class="pjfbtn" @click.stop="btns" :style="{bottom: `${bottom}px`}">
					<view class="mb10 plr20">
						<view class="flexc pjfbox ">
							<textarea :placeholder="placeholder"  :adjust-position="adjustpos" :focus="isfocus" v-model="text" :auto-height="autoHeight" :cursor-spacing='curspac' fixed="true" :show-confirm-bar="confirmBar" ></textarea>
							<view class="btns" @click.stop="getPinLunFn">发送</view>
						</view>
					</view>
					
					<view class="ndbfox flexc">
						<view class="flexcc ndbflist" @touchend.prevent="getshareFn">
							<image :src="share"></image>
							<view>{{datainfo.userShare}}</view>
						</view>
						<view class="flexcc ndbflist" @touchend.prevent="getHfFna">
							<image :src="nicona"></image>
							<view>{{datainfo.userComment}}</view>
						</view>
						<view class="flexcc ndbflist" @click.stop="getDzFn('1')">
							<image :src="nicond" v-if="datainfo.isLike=='Y'"></image>
							<image :src="niconb" v-else></image>
							<view>{{datainfo.userLikes}}</view>
						</view>
						<view class="flexcc ndbflist" @click.stop="getScFn('1')">
							<image :src="starb" v-if="datainfo.isStar=='Y'"></image>
							<image :src="niconc" v-else></image>
							<view>{{datainfo.userStars}}</view>
						</view>
					</view>
				</view>
		</block>	
		<loading></loading>	
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import {newsDet} from "@/api/work/manage.js"
	import boxList from "@/news/components/box/list.vue"
	import {getRootComment,getParentComment,commentIndex,giveTheThumbs,getStars,commentContentPut,deletepl,setShare} from "@/api/work/news.js"
	export default{
		components:{boxList},
		data(){
			return{
				nicona:require('@/news/static/news/nicona.png'),
				niconb:require('@/news/static/news/niconb.png'),
				niconc:require('@/news/static/news/niconc.png'),
				nicond:require('@/news/static/news/nicond.png'),
				nicone:require('@/news/static/news/nicone.png'),
				niconf:require('@/news/static/news/niconf.png'),
				share:require('@/news/static/news/share.png'),
				starb:require('@/news/static/news/starb.png'),
				head:require('@/news/static/news/head.png'),
				upimg:require('@/mine/static/house/up.png'),
				nonews:require('@/news/static/news/nonews.png'),
				baseUrl:config.baseUrl,
				autoHeight:true,
				confirmBar:false,
				adrfixed:true,
				adjustpos:false,
				curspac:0,//光标和键盘距离
				placeholder:'发表我的评论',
				datainfo:{
					
				},
				communityContent:'',
				text:'',
				id:"",
				commentlist:[],//评论列表
				commenttotal:"0",
				pageSize: 10,
				pageNum: 1,
				userId:this.$store.state.user.userId,
				nickName:this.$store.state.user.nickName,
				avatar:this.$store.state.user.avatar,
				isRoot:'1',//isRoot,根评论id 1:根评论 2：子评论
				isfocus:false,
				plinfo:'',//二级评论信息
				bottom:0,
				tenantId:this.$store.state.user.tenantId,
			}
		},
		onLoad: function(e) {
			this.id=e.id;
			this.getDetailFn();
			this.getRootComment();
			// #ifndef H5
			uni.onKeyboardHeightChange(res=> { //监听键盘高度变化
			    const res_keyboard = uni.getSystemInfoSync();
			    // let key_height = res.height - (res_keyboard.screenHeight - res_keyboard.windowHeight)
			     this.bottom = `${ res.height>0 ? res.height : 0}`;
				  // if(this.bottom==0){
				  // 	this.isfocus=false;
				  // }
			})
			// #endif
		},
		// 上拉触底加载更多触发事件
		onReachBottom() {
			if (this.reachflag) {
				this.pageNum++
				this.getDataFn()
			}
		},
		onPageScroll(e) {
			this.isfocus=false;
		},
		methods:{
			checkPermi, checkRole,
			//评论
			 getComflag(){
				 if(this.isfocus){
					 this.isfocus=false;
					 this.placeholder="发表我的评论"
					 this.isRoot='1'
				 }
			 },
			 // 分享
			 getshareFn(){
				 var params={
					 communityId:this.id,
					 tenantId:this.tenantId
				 }
				 setShare(params).then(res=>{
					 if(res.code==200){
						 this.$toast("分享成功")
						 this.datainfo.userShare++
					 }
				 })
			 },
			 btns(){
				 
			 },
			getDetailFn(){
				newsDet(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
						var data=JSON.parse(JSON.stringify(res.data))
						if(data.communityContent){
							this.communityContent=this.formatRichText(data.communityContent)
						}
					}
				})
			},
			// 删除
			getDelFn(id){
				var that=this;
				// var info=JSON.parse(JSON.stringify(data))
				// var type=info.type;
				// var pid=info.pid;
				deletepl(id).then(res=>{
					if(res.code==200){
						this.$toast("删除成功");
						uni.$emit('partyNewsList')
						setTimeout(function(){
							// 删除数据
							that.getRootComment()
						},1500)
					}
				})
			},
			getZhanFn(obj){
				// 获取自己
				var obj=JSON.parse(JSON.stringify(obj));
				var idx=obj.idx;
				var list=JSON.parse(JSON.stringify(this.commentlist))[idx]
				var params={
					parentId:list.id,
					pageSize:list.pageSize,
					pageNum: list.pageNum,
					tenantId:this.tenantId
				}
				getParentComment(params).then(res=>{
					if(res.code==200){
						var reachflag=true;
						if (res.rows.length < obj.pageSize) {
							list.reachflag = false
						} else {
							var num = parseInt(res.rows.length) + parseInt(obj.pageSize) * parseInt(obj.pageNum -	1)
							if (num < obj.childrenListCount) {
								list.reachflag = true
							} else {
								list.reachflag = false
							}
						}
						list.childrenList=list.childrenList.concat(res.rows)
						list.pageNum=obj.pageNum++
						this.commentlist.splice(idx,1,list)
					}
				})
			},
			
			// 点赞
			getDzFn(type,info){
				var params={
					userId:this.userId,
					nickName:this.nickName,
					avatar:this.avatar,
					targetType:type,
					communityId:this.id,
					tenantId:this.tenantId
				}
				if(type==1){
					params.targetId=this.id;
					params.targetTitle=this.datainfo.communityTitle;
				}else {
					params.targetId=info.id;
					params.targetTitle=info.content;
				}
				giveTheThumbs(params).then(res=>{
					if(res.code==200){
						uni.$emit('partyNewsList')
						if(type==1){
							if(this.datainfo.isLike=='Y'){
								this.$toast("取消点赞成功");
								this.datainfo.isLike='N';
								this.datainfo.userLikes--;
							}else{
								this.$toast("点赞成功");
								this.datainfo.isLike='Y';
								this.datainfo.userLikes++;
							}
						}else{
							var idx=info.idx;
							var aidx=info.aidx;
							var atype=info.atype;
							var obj=JSON.parse(JSON.stringify(this.commentlist))[idx];
							if(atype&&atype=='ejdz'){
								var erobj=obj.childrenList[aidx];
								if(erobj.isLike=='Y'){
									this.$toast("取消点赞成功");
									erobj.isLike='N';
									erobj.likeCount--;
								}else{
									this.$toast("点赞成功");
									erobj.isLike='Y';
									erobj.likeCount++;
								}
								obj.childrenList[aidx]=JSON.parse(JSON.stringify(erobj))
								this.commentlist.splice(idx,1,obj)
							}else{
								if(obj.isLike=='Y'){
									this.$toast("取消点赞成功");
									obj.isLike='N';
									obj.likeCount--;
								}else{
									this.$toast("点赞成功");
									obj.isLike='Y';
									obj.likeCount++;
								}
								this.commentlist.splice(idx,1,obj)
							}
						}	
					}
				})
			},
			getplDzFn(data){
				var info=JSON.parse(JSON.stringify(data))
				this.getDzFn('2',info)
			},
			// 收藏
			getScFn(type){
				var params={
					userId:this.userId,
					nickName:this.nickName,
					avatar:this.avatar,
					targetType:'1',//目标类型（1：社区 2：党建 ）
					tenantId:this.tenantId
				}
				params.targetId=this.id;
				params.targetTitle=this.datainfo.communityTitle;
				getStars(params).then(res=>{
					if(res.code==200){
						uni.$emit('partyNewsList')
						if(this.datainfo.isStar=='Y'){
							this.$toast("取消收藏成功");
							this.datainfo.isStar='N';
							this.datainfo.userStars--;
						}else{
							this.$toast("收藏成功");
							this.datainfo.isStar='Y';
							this.datainfo.userStars++
						}	
					}
				})
			},
			// 评论回复
			getHfFna(data){
				var that=this;
				this.isRoot='1';
				this.placeholder='发表我的评论'
				this.isfocus=true;
			},
			getplHfFn(data){
				this.isfocus=false;
				var that=this;
				this.plinfo=JSON.parse(JSON.stringify(data))
				this.placeholder='回复：'+data.toNickName
				this.isRoot='2';
				this.isfocus=true;
			},
			getPinLunFn(){
				var params={
					userId:this.userId,
					nickName:this.nickName,
					avatar:this.avatar,
					isRoot:this.isRoot,
					communityId:this.id,
					communityType:this.datainfo.communityType,
					communityTitle:this.datainfo.communityTitle,
					commentContent:this.text,
					tenantId:this.tenantId
				}
				
				if(this.isRoot==2){
					var info=JSON.parse(JSON.stringify(this.plinfo))
					if(info.type=='ejhf'){
						params.toRoot='Y';
					}
					params.parentId=info.parentId;
					params.toUserId=info.toUserId;
					params.toNickName=info.toNickName;
					params.toAvatar=info.toAvatar;
				}
				commentIndex(params).then(res=>{
					if(res.code==200){
						this.$toast('评论成功，等待审核')
						this.text='';
						this.isfocus=false;
					}
				})
			},
			getShouFn(idx){
				var list=JSON.parse(JSON.stringify(this.commentlist))[idx];
				list.childrenList=[];
				list.pageNum=1;
				list.reachflag=true;
				this.commentlist.splice(idx,1,list)
			},
			getRootComment(){
				var that=this;
				var params={
					communityId:this.id,
					pageSize:this.pageSize,
					pageNum: this.pageNum,
					tenantId:this.tenantId
				}
				// userid,头像，nickname,标题(或者评论对象的内容)  点赞收藏评论,   
				getRootComment(params).then(res=>{
					if(res.code==200){
						this.commenttotal=res.total;
						if (res.rows.length < this.pageSize) {
							this.reachflag = false
							this.wtdt = '到底了~';
						} else {
							var num = parseInt(res.rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum -	1)
							if (num < res.total) {
								this.reachflag = true
								this.wtdt = ''
							} else {
								this.reachflag = false
								this.wtdt = '到底了~';
							}
						}
						var newArr=JSON.parse(JSON.stringify(res.rows))
						newArr.forEach(ite=>{
							ite.pageSize=1
							ite.pageNum=10
							ite.reachflag=true
						})
						if (this.pageNum == 1) {
							this.commentlist = newArr;
						} else {
							this.commentlist = this.list.concat(newArr)
						}
					}
				})
			},
			//解析富文本方法
			formatRichText(html) {
					let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
						match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '').replace(/style=""/gi, '');
						match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
						match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
						return match;
					});
					newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
						match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
						return match;
					});
					newContent = newContent.replace(/<br[^>]*\/>/gi, '');
					newContent = newContent.replace(/\<img src="/gi,
						'<img style="max-width:100%;height:auto;display:block;margin:10rpx auto;" src="' +baseUrl);
					return newContent;
			},
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.ndetail{
	min-height: 100vh;padding: 20rpx 18rpx 100rpx;
	.ndbox{background: #FFFFFF;border-radius: 20rpx;padding-top: 30rpx;padding-bottom: 20rpx;
		.tit{font-weight: bold;font-size: 32rpx;color: #272727;margin-bottom: 14rpx;text-align: center;padding-top: 4rpx;}
		.time{font-weight: 500;font-size: 24rpx;color: #AAAAAA;text-align: center;}
		.rich{padding: 28rpx 0;}	
		//border-top: 2rpx solid #E5E5E5;
	}
}
.pltitnum{font-weight: 500;font-size: 26rpx;color: #AAAAAA;
	text{display: inline-block;margin-right:10rpx;
		&.line{margin: 0 12rpx;}
	}
}
.pltit{font-weight: bold;font-size: 30rpx;color: #272727;
	text{margin-left: 24rpx;font-size: 24rpx;color: #666666;}
}
.plr20{padding: 0 40rpx;}
.pjfbtn{background: #FFFFFF;position: fixed;bottom: 0;left: 0;right: 0;padding:26rpx 0rpx 20rpx;box-shadow: 0px 0px 18rpx 0px rgba(159,159,159,0.47);
	.pjfbox{background: #E6E6E6;border-radius: 10rpx;
		textarea{flex: 1;font-size: 26rpx;color: #222327;min-height: 100rpx;font-size: 26rpx;margin: 0;background: #E6E6E6;box-sizing: border-box;padding: 10rpx 0 10rpx 36rpx;border-radius:10rpx 0 0 10rpx;}
		.btns{nt-weight: bold;padding: 0 34rpx;height: 60rpx;line-height: 60rpx;flex: 0 0 auto;
		font-size: 26rpx;
	}
	
color: #314081;}
}
.ndbfox{
	// border-top: 2rpx solid #E5E5E5;
		.ndbflist{width: 33.3%;padding: 20rpx 0;box-sizing: border-box;
		image{width: 26rpx;height: 26rpx;margin-right: 26rpx;}
		view{font-weight: 500;font-size: 26rpx;color: #666666;}
	}
}
// .pjfbtn /deep/ .uni-easyinput{flex: 1;font-size: 26rpx;color: #222327;}
// .pjfbtn /deep/ .uni-textarea-textarea{min-height: 40rpx;font-size: 26rpx;margin: 0;background: #E6E6E6;box-sizing: border-box;padding: 10rpx 0 10rpx 36rpx;border-radius:10rpx 0 0 10rpx;}
</style>