baiyuApp/pages/course/video/comment.vue

<template>
	
	<!-- <view class="scroll-wrap"> -->
		
		 <!-- <view id="popup_content" class="popup_content" style="height: 640px;overflow: hidden;"> -->
			
			<block>
				<mescroll-body  style="background-color: #fff;"   @init="mescrollInit" top="0" bottom="200" :down="downOption" :up="upOption"  @down="downCallback" 
				 @up="upCallback" @emptyclick="emptyClick">
				 
					<view class="es-bc-white es-br-20" style="margin-top: 0;">
						<view class="es-view-w-x1  es-mt-25">
							<view  v-for="(item, index) in dataList"  :key="index" class="es es-mt-20">
								<view class="es-icon-80 es-br">
									<image :src="$isEmpty(item.avatar)?defHeadImg:item.avatar"></image>
								</view>
								<view  class="es-f1 es-ml-21 es-pb-20">
									<view class="es-fs-28 es-fw">{{item.nickName}}</view>
									<view class="es-c-99 es-fs-22 es-mt-4">{{ $formatDate(item.createTime) }}</view>
									<view class="es-fs-26 es-fw-500 es-pt-24 es-pb-25">{{item.content}}</view>
									<view class="es es-c-99">
										<view class="es es-ac" @tap="doLike(item)">
											<view class="es-icon-28" :class="item.liked?'es-icon-course-like2-ac':'es-icon-course-like2'" ></view>
											<view class="es-ml-11 es-fs-26">{{item.likes}}</view>
										</view>
										<view class="es es-ac es-ml-23" @tap="openReplyPop(item)">
											<view class="es-icon-28 es-icon-course-comment"></view>
											<view class="es-ml-11 es-fs-26">{{item.replyCount}}</view>
										</view>
										<view class="es-f1"></view>
										<view class="es es-ac es-pc es-icon-33"  v-if="isMySend(item)" @tap="delComment(item,0)">
											<view class="es-w-33 es-h-9 es-icon es-icon-course-point"></view>
										</view>
									</view>
									
									<view v-if="item.replyList && item.replyList.length>0" class="es-br-20 es-pt-10 es-pb-10 es-view-w-x es-mt-25" style="background-color: #F6F9F8;">
										<view class="es es-pt-20 es-pb-20 comment-reply-item"  v-for="(cItem,idx) in item.replyList"  :key="idx">
											<view class="es-icon-60 es-br">
												<image :src="$isEmpty(cItem.avatar)?defHeadImg:cItem.avatar"></image>
											</view>
											<view class="es-f1 es-ml-11">
												<view class="es-fs-24 es-fw-600">{{cItem.nickName}}</view>
												<view class="es-fs-22 es-c-99 es-mt-10 es-mb-10">{{ $formatDate(cItem.createTime) }}</view>
												<view class="es-fs-24 es-fw-500 es-pt-8 es-pb-14">{{cItem.content}}</view>
												
												<view class="es es-c-99">
													<view class="es es-ac" @tap="doReplyLike(cItem)">
														<view class="es-icon-28" :class="cItem.liked?'es-icon-course-like2-ac':'es-icon-course-like2'" ></view>
														<view class="es-ml-11 es-fs-26">{{cItem.likes}}</view>
													</view>
													<view class="es-f1"></view>
													<view class="es es-ac es-pc es-icon-33"  v-if="isMySend(cItem)" @tap="delComment(cItem,1)">
														<view class="es-w-33 es-h-9 es-icon es-icon-course-point"></view>
													</view>
												</view>
											</view>
										</view>
									</view>
								
									<view @tap="replayClick(item,index)" v-if="item.showReplyBtn"  class="es es-ac es-mt-20 es-pb-20">
										<text  class="es es-ac es-fs-24 es es-ac es-pc  es-pt-10 es-pb-10  es-c-99">
											——展开更多回复
										</text>
									</view>
									
									
									
								</view>
							</view>
						</view>
					</view>
				</mescroll-body>	
				<view :style="'height:'+(KeyHight)+'px'" v-if="KeyHight" ></view>
				<view class="es-h-120 es-auto-bottom" v-else></view>
				<view class="es-fix-bottom es-bc-white es-b-t" v-if="showBoottom">
					<view class="es-h-120 es-view-w-x es es-ac">
						<view class="es-f1 es-ipt es-f1 es-br es-icon-auto es-icon-course-bg2">
							<input ref="txtPing" v-model="pingContent" :focus="isInputFocus" @blur="onblur" :placeholder="placeholder" placeholder-class="es-c" />
						</view>
						<view class="es-fs-30 es-fw-600 es-ml-20 es-c"  :adjust-position="false"
							:always-system="true"  @tap="commentSend()">发布</view>
					</view>
					<view class="es-auto-bottom" v-if="!KeyHight"></view>
				</view>
				<!-- 回复弹出框 -->
				<uni-popup ref="popup" background-color="#fff" >
					<view class="popup-content">
						<view class="es-h-150 es-view-w-x es es-ac">
								<!-- <input ref="txtPing" v-model="pingContent" :focus="isInputFocus" @blur="onblur" :placeholder="placeholder" placeholder-class="es-c" /> -->
							<textarea name="replyPing" v-model="replyContent"  style="background-color: #f7f7f7;" :placeholder="rPlaceholder" :focus="isRInputFocus" @blur="onReplyBlur" placeholder-class="place-hold"></textarea>	
							<view class="es-fs-30 es-fw-600 es-ml-20 es-c"  :adjust-position="false"
								:always-system="true"  @tap="replySend">发布</view>
						</view>
					</view>
				</uni-popup>
	        </block>
	   <!-- 	</view> -->
		
	<!-- </view> -->
	

</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { getComments,getReplies,addComment,doLikeComment,deleteComment } from '@/api/shortvideo.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		props: {
			videoId: {
				type: [String, Number],
				default: 0
			},
			smsNum: {
				type: [String, Number],
				default: 0
			}
		},
		data() {
			return {
				pingContent: '',
				KeyHight:0,
				cateId:0,
				courseId:5,
				totalNum:0,
				viewHeight:400,
				courseData:{},
				pageHei:400,
				downOption: {
					auto: false ,// 不自动加载 (mixin已处理第一个tab触发downCallback)
					use:true
				},
				upOption: {
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					empty:{
						tip: '~ 暂无数据 ~', // 提示
						btnText: '去看看',
						icon:"../../../static/image/nodata.png"
					},
					textNoMore:"已经到底了",
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				    use:true,
				},
				pingType:1,//1:评论   2:回复
				dataList: [], //列表数据
				replyParentId:null,
				isLastPage:false,
				txtPing:null,
				sortType:1,
				isRInputFocus:false,
				isInputFocus:false,
				showBoottom:false,
				placeholder:"发布一条友善的评论",
				canShowReply:false,
				defHeadImg:"@/static/image/course/defHead.png",
				rpyPageNum:0,
				replyContent:"",
				rPlaceholder:"",
				delCommentId:null,
				myUserInfo:{userId:0},
				isAnimaStart:true
			}
		},
		mounted() {
			try {
				const res = uni.getSystemInfoSync();
				let navigationBarHeight=88,tabHei=120;
				let tempHei=res.windowHeight-uni.upx2px(navigationBarHeight+tabHei);
				console.log("qxj tempHei:"+tempHei);
				this.pageHei=tempHei+"px";
			    this.checkUser();
				let that=this;
				uni.$on('reachBottom', (data) => {
					if(!that.isLastPage){
						that.mescroll.triggerUpScroll();
					}
				}); 
			
				// this.txtPing = this.$refs["txtPing"];
				// uni.onKeyboardHeightChange(this.boardHeightChange);
			} catch (e) {
				
			}
		},
		onLoad(options) {
			//this.refreshPage();
			this.txtPing = this.$refs["txtPing"];
			uni.onKeyboardHeightChange(this.boardHeightChange);
		},
		onUnload: function() {
			uni.offKeyboardHeightChange(this.boardHeightChange);
		},
	
		methods: {
	
			downCallback() {
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll(true);
			},
			upCallback(page) {   	
				/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
				const params={"videoId":this.videoId,orderBy:this.sortType==2?'likes':'date'};
				//uni.showLoading({title:""});
				getComments(params,page.num).then(res => {
					    //uni.hideLoading();
						if(res.code==200){
							setTimeout(()=>{
								this.mescroll.endByPage(res.data.list.length, res.data.pages);
								this.isLastPage=res.data.isLastPage;
								if(this.isLastPage){
									this.mescroll.showNoMore()
								}
								if(page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
								let dataList=res.data.list;
								dataList.forEach((item, index)  =>  {
									if(item.replyCount>0){
										item.showReplyBtn=true;
										item.isLastReplyPage=false;
									}else{
										item.showReplyBtn=false;
										item.isLastReplyPage=true;
									}
									item.rpyPageNum=1;
								});
								this.dataList=this.dataList.concat(dataList); //追加新数据
							},100);
						}
					},
					rej => {}
				).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
			},
			refreshPage(){
			    //this.mescroll.hideTopBtn();
			    this.mescroll.resetUpScroll();
			},
			tapCommentType(type){
				this.sortType=type;
				this.refreshPage();
			},
			doLike(item){
				if(!this.$isLogin()){
					this.$showLoginPage();
					return;
				}
				const params={"commentId":item.commentId};
				uni.showLoading({title:""});
				doLikeComment(params).then(res => {
						uni.hideLoading();
						if(res.code==200){
							if(item.liked==0){
								item.likes+=1;
								item.liked=1;
							}else{
								item.likes-=1;
								item.liked=0;
							}
							this.dataList[index]=item;
							this.$forceUpdate();
							uni.showToast({title: '操作成功',icon: 'none',position:'bottom'});
						}else{
							uni.showToast({title: res.msg,icon: 'none'});
						}
					},
					rej => {}
				);
			},
			doReplyLike(item){
				if(!this.$isLogin()){
					this.$showLoginPage();
					return;
				}
				const params={"commentId":item.commentId};
				uni.showLoading({title:""});
				doLikeComment(params).then(res => {
						uni.hideLoading();
						if(res.code==200){
							if(item.liked==0){
								item.likes+=1;
								item.liked=1;
							}else{
								item.likes-=1;
								item.liked=0;
							}
							// this.dataList[index]=item;
							// this.$forceUpdate();
							uni.showToast({title: '操作成功',icon: 'none',position:'bottom'});
						}else{
							uni.showToast({title: res.msg,icon: 'none'});
						}
						
					},
					rej => {}
				);
			},
		
			replayClick(item,index){
				const params={"videoId":this.videoId,"parentId":item.commentId};
				uni.showLoading({title:""});
				getReplies(params,item.rpyPageNum).then(res => {
						uni.hideLoading();
						if(res.code==200){
							if(item.rpyPageNum == 1) item.replyList = []; //如果是第一页需手动制空列表
							item.replyList=item.replyList.concat(res.data.list); //追加新数据
							if(res.data.isLastPage){
								item.showReplyBtn=false;
								item.isLastReplyPage=true;
							}else{
								item.rpyPageNum+=1;
								item.showReplyBtn=true;
								item.isLastReplyPage=false;
							}
							this.dataList[index]=item;
							this.$forceUpdate();
						}
					},
					rej => {}
				).catch(()=>{
					//联网失败, 结束加载
					this.refreshing = false;
					this.refreshText = '加载完成',
					this.reqDataCode=-1;
				});
			},
	
	        /*打开回复弹框*/
			openReplyPop(item){
				this.rPlaceholder="回复"+item.nickName;
			    this.$refs.popup.open("bottom")
				this.replyParentId=item.commentId;
				this.$nextTick(()=>{
					this.replyContent='';
					this.isRInputFocus=true;
				});
		 	},
			//点击评论发送按钮
			commentSend(){
			    this.replyParentId=null;
				if(this.$isEmpty(this.pingContent)){
					uni.showToast({title: '评论内容不能为空',icon: 'none',position:'bottom'});
					return;
				}
				if(!this.$isLogin()){
					this.$showLoginPage();
					return;
				}
				let params={"videoId":this.videoId,"content":this.pingContent};
				this.postComment(params);
			},
			//点击回复发送按钮
			replySend(){
				if(this.$isEmpty(this.replyContent)){
					uni.showToast({title: '回复内容不能为空',icon: 'none',position:'bottom'});
					return;
				}
				if(!this.$isLogin()){
					this.$showLoginPage();
					return;
				}
				let params={"videoId":this.videoId,"content":this.replyContent,"parentId":this.replyParentId};
				this.postComment(params);
			},
			//提交评论请求
			postComment(params){
				let that=this;
				uni.showLoading({title:""});
				addComment(params).then(res => {
						uni.hideLoading();
						if(res.code==200){
							this.pingContent="";
							this.replyContent="";
							this.sendNotify(this.totalNum++);
							if(!this.replyParentId){  
								uni.showToast({title: '添加评论成功',icon: 'none',position:'bottom'});
							}else{
								uni.showToast({title: '添加回复成功',icon: 'none',position:'bottom'});
							}
						}else{
							uni.showToast({title: res.msg,icon: 'none'});
						}
						this.placeholder="发布一条友善的评论";
						this.pingContent='';
						this.refreshPage();
						
					},
					rej => {}
				);		
			},
			
			delComment(item,type){
				if(!this.$isLogin()){
					this.$showLoginPage();
					return;
				}
				let that = this;
				uni.showModal({
				      title:  '系统提示',
				      content:  '确定删除吗',
				      success:  function  (res)  {
				          if (res.confirm)  {
							    console.log("qxj confirm");
				                that.delCommentAct(item,type);
				          }  else if  (res.cancel)  {
				             
				          }
				      }
				});
			},
			delCommentAct(item,type){
				this.delCommentId=item.commentId;
				let params={"commentId":this.delCommentId,"videoId":this.videoId};
				if(type==1){
					params["parentId"]=item.parentId;
				}
				this.delCommentRequest(params);
			},
			delCommentRequest(params){
				let that=this;
				uni.showLoading({title:""});
				deleteComment(params).then(res => {
						uni.hideLoading();
						if(res.code==200){
							uni.showToast({title: '操作成功',icon: 'none'});
							this.sendNotify(this.totalNum-1);
							setTimeout(function(){
								that.refreshPage();
							},1000)
						}else{
							uni.showToast({title: res.msg,icon: 'none'});
						}
					},
					rej => {}
				);
			},	
			
			isMySend(item){
				if(this.myUserInfo!=null && this.myUserInfo.userId==item.userId){
					return true;
				}
				return false;
			},
		
			onblur(){
			    this.isInputFocus=false;
				this.placeholder="发布一条友善的评论";
				//this.replyParentId=null;
			},
			onReplyBlur(){
			    this.isRInputFocus=false;
				//this.rPlaceholder="发布一条友善的评论";
			},
			//点击空布局按钮的回调
			emptyClick(){
				this.mescroll.resetUpScroll();
			},
			boardHeightChange:function(res){
				console.log('changeHeight', res.height);
				//转化为rpx 
				this.KeyHight = res.height;
			},
			showBotBar(smsNum){
				this.showBoottom=true;
				this.totalNum=smsNum;
				console.log("qxj showBotBar smsNum:"+smsNum);
			    this.checkUser();
				setTimeout(()=>{
					this.refreshPage();
				},500);
				
			},
			hideBotBar(){
				this.showBoottom=false;
			},
			sendNotify(num){
				uni.$emit('refreshTitle',num);
			},

			checkUser(){
				if(this.$isLogin()){
					let useInfo=uni.getStorageSync('userInfo');
					if(!!useInfo && useInfo!=null){
						this.myUserInfo=JSON.parse(useInfo);
					}
				}
			},
		}
	}
</script>

<style>
	
	page {
		background-color: white;
	}
	
	.es-view-w-x1{
		padding-left: 20rpx;
		padding-right: 20rpx;
		position: relative;
	}
	.content1{
		position: relative;
	}
	
	.topbox{
		position: absolute;
		left: 10px;
		top: -30px;
		right: 20px;
		height: 40px;
		display: flex;
	}

	.banner {
		height: 430rpx;
	}

	.es-icon-course-bg {  
		background-image: url(../../../static/images/other/course/bg.png);
	}

	.es-icon-course-icon-1 {
		background-image: url(../../../static/images/other/course/icon-1.png);
	}

	.es-icon-course-icon-2 {
		background-image: url(../../../static/images/other/course/icon-2.png);
	}

	.es-icon-course-icon-3 {
		background-image: url(../../../static/images/other/course/icon-3.png);
	}

	.es-icon-course-close {
		background-image: url(../../../static/images/other/course/close.png);
	}

	.es-icon-course-info {
		background-image: url(../../../static/images/other/course/info.png);
	}

	.es-icon-course-bg2 {
		background-image: url(../../../static/images/other/course/bg2.png);
	}

	.es-icon-course-bg3 {
		background-image: url(../../../static/images/other/course/bg3.png);
	}

	.es-icon-course-comment {
		background-image: url(../../../static/image/hall/pingjia_icon.png);
	}

	.es-icon-course-nav-bg,
	.nav {
		background-image: url(../../../static/images/other/course/nav-bg.png);
	}

	.es-icon-course-nav-bg-ac,
	.nav.ac {
		background-image: url(../../../static/images/other/course/nav-bg-ac.png);
	}

	.es-icon-course-point {
		background-image: url(../../../static/image/hall/more_icon16.png);
	}

	.es-icon-course-share {
		background-image: url(../../../static/images/other/course/share.png);
	}

	.es-icon-course-like2 {
		background-image: url(../../../static/image/hall/dianzan_icon.png);
	}

	.es-icon-course-like2-ac {
		background-image: url(../../../static/image/hall/dianzan_on_icon.png);
	}



	.item {
		width: calc(33.33% - 14rpx);
	}

	.nav {
		width: 216rpx;
		height: 60rpx;
	}

	.comment-reply-item {
		border-bottom: 1px #fff solid;
	}

	.es-ipt input {
		padding-left: 43rpx;
	}

	.es-ipt,
	.es-ipt input {
		background-color: inherit;
	}
	
	textarea{
		width: 100%;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		height: 140upx;
		line-height: 1.6;
		text-indent: 0.5em;
	    color: #666666;
	}
	.place-hold{
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		padding:10rpx 0rpx;
	}
	
	

	
	
</style>