rtim/pages/course/video/commentN.nvue

<template>
	<view class="es content es-bc-white" style="position:relative;" @touchmove.stop @tap="hideKeyboard">
		 <view class="comtentBox es-bc-white es-pb-40 es-br-20 flex" @tap="hideKeyboard" >
			<view class="es es-h-60">
				<view class="es es-ac es-view-w-x es-h-60  es-pt-25"  >
					<image class="es-w-35 es-h-31" src="../../../static/image/hall/pingjia_icon.png"></image>
					<text class="es-ml-20 es-fs-30 es-fw-600 es-f1">评论</text>
					<text class="es-ml-1 es-fs-30 es-c-99">（{{totalNum}}）</text>
				</view>
				<image style="position: absolute;right:30rpx;top:20rpx"  @tap.stop="closePopup()" class="es-w-40 es-h-40" src="../../../static/images/close40.png"></image>
			</view>
			
			<view class="es-view-w-x es-mt-15" >
				<view class="es es-ac es-mt-10 es-c" style="border-bottom: 1px #FAFAFA solid;">
					<view class="es-on-act nav es-icon-auto es es-ac es-pc x-c es-br-10"  :class="sortType==1?'ac':'br'" @tap="tapCommentType(1)">
						<image src="../../../static/images/other/course/icon-2.png" class="es-icon-20"></image>
						<text class="es-ml-19 es-fs-28 es-c" :class="1?'es-fw-600':''">热度</text>
					</view>
					
					<view class="es-on-act nav es-icon-auto es es-ac es-pc es-br-10 es-ml-14" :class="sortType==2?'ac':'br'" @tap="tapCommentType(2)">
						<image src="../../../static/images/other/course/icon-2.png" class="es-icon-20"></image>
						<text class="es-ml-19 es-fs-28 es-c" :class="0?'es-fw-600':''">时间</text>
					</view>
				</view>
				
				<list loadmoreoffset="100" @loadmore="loadmore" :style="{'height':listHei+'px'}" @tap="hideKeyboard">
						<refresh @pullingdown='onpullingdown' @refresh="onrefresh" :display=" refreshing ? 'show' : 'hide' " class="refresh x-c ">
							<loading-indicator style="width: 22px;height: 22px;color:#999;"></loading-indicator>
							<text class="es-fs-32 es-ml-8">{{refreshText}}</text>
						</refresh>
						<cell v-for="(item, index) in dataList"  :key="index">
							 <view   class="es es-mt-30" >
								<image class="es-icon-80 es-br" :src="isEmpty(item.avatar)?defHeadImg:item.avatar"></image>
								<view  class="es-f1 es-ml-21" style="display:flex;flex:1;">
									<text class="es-fs-30 es-fw">{{ isEmpty(item.nickName)?"暂无昵称":item.nickName  }}</text>
									<text class="es-c-99 es-fs-26 es-mt-4">{{ formatDate(item.createTime) }}</text>
									<text class="es-fs-28 es-fw-500 es-pt-24 es-pb-25" :style="{width: comWidth+'px'}">{{item.content}}</text>
									<view class="es es-c-99 es-pb-10 ">
										<view class="es es-ac" @tap="doLike(item,index)">
											<image class="es-icon-28" :src="item.liked?'../../../static/image/hall/dianzan_on_icon.png':'../../../static/image/hall/dianzan_icon.png'"></image>
											<text class="es-ml-11 es-fs-26">{{item.likes}}</text>
										</view>
										<view class="es es-ac es-ml-23" @tap.stop="doReply(item)">
										<image class="es-icon-28" src="../../../static/image/hall/pingjia_icon.png"></image>
										<text class="es-ml-11 es-fs-26">{{item.replyCount}}</text>
									</view>
										<view class="es-f1"></view>
										<view class="es es-ac es-pc es-icon-33" style="position:absolute;right:20rpx;"  v-if="isMySend(item)"  @tap="delComment(item,0)">
											<image src="../../../static/images/del.png" class="es-w-32 es-h-32"></image>
										</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"   :class="idx<item.replyList.length-1?'comment-reply-item':''"  v-for="(cItem,idx) in item.replyList"  :key="idx">
											<image class="es-icon-60 es-br" :src="isEmpty(cItem.avatar)?defHeadImg:cItem.avatar"></image>
											<view class="es-f1 es-ml-11 flex" style="display:flex;flex:1;">
												<text class="es-fs-30 es-fw-600">{{cItem.nickName}}</text>
												<text class="es-fs-26 es-c-99 es-mt-10 es-mb-10">{{ formatDate(cItem.createTime) }}</text>
												<text class="es-fs-28 es-fw-500 es-pt-14 es-pb-14" :style="{width: replyWidth+'px'}">{{cItem.content}}</text>
												
												<view class="es es-c-99 es-pb-10 ">
													<view class="es es-ac" @tap="doReplyLike(cItem,idx,index)">
														<image class="es-icon-28" :src="cItem.liked?'../../../static/image/hall/dianzan_on_icon.png':'../../../static/image/hall/dianzan_icon.png'"></image>
														<text class="es-ml-11 es-fs-26">{{cItem.likes}}</text>
													</view>
												
													<view class="es-f1" style="background-color: red;"></view>
													<view class="es es-ac es-pc es-icon-33"  style="position:absolute;right:20rpx;"  v-if="isMySend(cItem)"  @tap="delComment(cItem,1)">
														<image src="../../../static/images/del.png" class="es-w-32 es-h-32"></image>
													</view>
												</view>
												
											</view>
										</view>
									</view>
							
								    <view @tap="replayClick(item,index)" v-if="item.showReplyBtn"  class="es es-ac es-mt-20 es-pb-20">
								    	<view class="es-f1"></view>
								    	<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>
						</cell>
				 
						<cell v-if="showLoadMore || dataList.length > 4">
							  <view class="loading-more">
								  <text class="loading-more-text">{{loadMoreText}}</text>
							  </view>
						</cell>
						
						<cell>
							<view v-if="totalNum==0 && reqDataCode!=0"  class="y-f" style="height: 300px;padding-top: 200rpx;" >
								<image @tap="refreshPage()" class="es-w-124 es-h-80" style="width:187rpx;height:120rpx;" src="../../../static/image/nodata.png"></image>
								<text @tap="refreshPage()" class="es-c-33 es-fs-36 es-mt-20">{{reqDataCode==1?'暂无数据':'请求超时'}}</text>
							</view>
						</cell>
				</list>
			
			</view>
		</view>
    
		<!-- <view  :style="'height:'+(KeyHight)+'px'" style="background-color: red;" v-if="KeyHight>0"></view>
		<view class="es-h-120 es-auto-bottom" v-else></view> -->
	
		<cover-view class="fix-bottom  es-b-t" :style="{bottom: KeyHight + 'px'}" @tap.stop="">
			<view class="es-h-120  es-view-w-x es es-ac flex" >
				<view class="es-f1 es-br flex ac es-h-70 es-pl-20 es-pr-20 es-pt-10" >
					<input style="width:100%;font-size: 28rpx;" ref="txtPing" v-model="pingContent" :focus="isInputFocus" 
					 @blur="onblur" :placeholder="placeholder" :adjust-position="false" placeholder-class="es-c" />
				</view>  
				<text class="es-w-120 es-h-60 es-fs-30 es-fw-600 es-ml-20 es-c " style="text-align: center;line-height: 60rpx;"  :always-system="true" @tap="doSend">发布</text>
			</view>
			<view class="es-auto-bottom" v-if="!KeyHight"></view>
		</cover-view>

	</view>
</template>

<script>   

	// import { getCourseById,getCommentList,addComment,updateComment,commentDoLike,deleteComment } from '@/api/course'
	import { getComments,getReplies,addComment,doLikeComment,deleteComment } from '@/api/shortvideo'
	import { isLogin,isEmpty } from '@/utils/common'
	import { showLoginPage } from '@/utils/login'
	import dayjs from 'dayjs';
	export default {
		data() {
			return {
				pingContent: '',
				KeyHight:0,
				cateId:5,
				courseId:0,
				totalNum:0,
				courseData:{},
				pageHei:400,
				downOption: {
					auto: false ,// 不自动加载 (mixin已处理第一个tab触发downCallback)
					use:true
				},
				upOption: {
					use:true,
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					empty:{
						tip: '~ 暂无数据 ~', // 提示
						btnText: '去看看'
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				   
				},
				pingType:1,//1:评论   2:回复
				dataList: [], //列表数据
				replyParentId:null,
				txtPing:null,
				sortType:1,
				isInputFocus:false,
				showBoottom:true,
				placeholder:"发布一条友善的评论",
				defHeadImg:"../../static/image/course/defHead.png",
				myUserInfo:{userId:0},
				delCommentId:null,
				mescroll:null,
				adpid: '',
		        loadMoreText:"加载中...",
		        showLoadMore:false,
				isLastPage:false,
				refreshing: false,
				refreshText: '↓ 下拉刷新',
				pageNum:1,
				listHei:0,
				rpyPageNum:1,
				replyContent:"",
				rPlaceholder:"",
				reqDataCode:0, //1:正常加载 -1 请求超时
				subNVueName: 'videoComment',
				comWidth: 300,
				replyWidth: 200
			}
		},
		mounted() {
			try {
				
				let that=this;
				uni.$on('videoComment', (data) => {  
					that.subNVueName = data.subNVueName
					 that.totalNum=data.smsNum;
					 that.placeholder = "发布一条友善的评论";
					if(that.videoId && that.videoId==data.videoId && that.reqDataCode==1){
						return;
					}
					that.dataList = [];
				    that.videoId=data.videoId;
					that.reqDataCode=0;
					that.initData();
				}); 
				const res = uni.getSystemInfoSync();
				this.listHei=uni.upx2px(1150 - 240);
			// 	let tempHei=res.windowHeight*0.65;
			// 	console.log("qxj tempHei:"+tempHei);
			// 	this.pageHei=tempHei+"px";
			this.comWidth = res.screenWidth - uni.upx2px(182)
			this.replyWidth = res.screenWidth - uni.upx2px(312)
				this.txtPing = this.$refs["txtPing"];
				uni.onKeyboardHeightChange(this.boardHeightChange);
				
				if(isLogin()){
					let useInfo=uni.getStorageSync('userInfo');
					if(!!useInfo && useInfo!=null){
						this.myUserInfo=JSON.parse(useInfo);
					}
				}
			
			} catch (e) {
				
			}
		},
	
		methods: {
		    initData(){
				let that=this;
				setTimeout(function() {
					that.refreshPage();
				}, 300);
			},
			onpullingdown(e) {
				//console.log("qxj onpullingdown");
			    if (this.refreshing) return;
				if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
					this.refreshText = '下拉更新'
				} else {
					this.refreshText = '释放更新'
				}
			 },
			 onrefresh(e) {
			    //console.log('onRefreshing...');
			    this.refreshing = true;
				this.pageNum=1;
			    this.upCallback();
			    if (this.refreshing) return;
			},
			loadmore(){
				if(this.isLastPage){
					return;
				}
				console.log("loadmore");
				this.pageNum++;
				this.showLoadMore = true;
				setTimeout(() => {
					this.upCallback();
				}, 300);
			},
			/*下拉刷新的回调 */
			upCallback() {   	
				/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
				const params={"videoId":this.videoId,orderBy:this.sortType==2?'likes':'date'};
				uni.showLoading({title:""});
				getComments(params,this.pageNum).then(res => {
					    uni.hideLoading();
						if(res.code==200){
							setTimeout(()=>{
								if(this.pageNum == 1) this.dataList = []; //如果是第一页需手动制空列表
								let dataList=res.data.list;
								// 从接口同步评论总数，保证数量实时更新
								if (res.data.total !== undefined && res.data.total !== null) {
									this.totalNum = res.data.total;
									this.sendNotify(this.totalNum);
								}
								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); //追加新数据
								this.reqDataCode=1;
								this.refreshing = false;
								this.isLastPage=res.data.isLastPage;
								if(this.isLastPage){
									this.refreshText = '加载完成'
								}
								if(res.data.isLastPage){
									this.loadMoreText = "没有更多数据了!"
									this.showLoadMore=false;
								}else{
									this.loadMoreText = "加载中..."
								}
							},200);
						}else{
							this.refreshing = false;
							this.refreshText = '加载完成'
							this.reqDataCode=-1;
						}
					},
					rej => {}
				).catch(()=>{
					//联网失败, 结束加载
					this.refreshing = false;
					this.refreshText = '加载完成',
					this.reqDataCode=-1;
				});
			},
			closePopup() {
			  const subNVue = uni.getSubNVueById(this.subNVueName);
			  if (subNVue) {
			     subNVue.hide('slide-out-bottom');
			  } else {
			     console.log('subNVue is already hidden.');
			  }
			},
			refreshPage(){
				 this.pageNum=1;
			     this.upCallback();
			},
			tapCommentType(type){
				this.sortType=type;
				this.refreshPage();
			},
			isMySend(item){
				if(this.myUserInfo!=null && this.myUserInfo.userId==item.userId){
					return true;
				}
				return false;
			},
			doSend(){
				if(this.isEmpty(this.pingContent)){
					uni.showToast({title: '评论内容不能为空',icon: 'none'});
					return;
				}
				if(!isLogin()){
					showLoginPage();
					return;
				}
				let params={"videoId":this.videoId,"content":this.pingContent};
				if(this.pingType==2){
					params["parentId"]=this.replyParentId;
				}
				let that=this;
				uni.showLoading({title:""});
				addComment(params).then(res => {
						uni.hideLoading();
						if(res.code==200){
							if(this.pingType==1){
								uni.showToast({title: '添加评论成功',icon: 'none',position:'bottom'});
								this.totalNum++
								this.sendNotify(this.totalNum);
						        this.isInputFocus = false
							}else{
								uni.showToast({title: '添加回复成功',icon: 'none',position:'bottom'});
								this.isInputFocus = false
							}
						}else{
							uni.showToast({title: res.msg,icon: 'none'});
						}
						this.placeholder="发布一条友善的评论";
						this.pingType=1;
						this.pingContent='';
						setTimeout(function(){
							that.refreshPage();
						},1000)
						
					},
					rej => {}
				);
			},
			doReply(item){
				this.replyParentId=item.commentId;
				this.pingType=2;
				let placeHolder=this.isEmpty(item.nickName)?"回复":"回复"+item.nickName;
				this.placeholder=placeHolder;
				this.pingContent='';
				//this.isInputFocus=true;
			    this.$nextTick(()=>{
			    	this.$refs.txtPing.focus();
			    });
			
			},
			replayClick(item,index){
				const params={"videoId":this.videoId,"parentId":item.commentId};
				uni.showLoading({title:""});
				getReplies(params,item.rpyPageNum).then(res => {
					    uni.hideLoading();
						console.log("qxj res:"+JSON.stringify(res));
						if(res.code==200){
							setTimeout(()=>{
								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();

							},200);
						}else{
							this.refreshing = false;
							this.refreshText = '加载完成'
							this.reqDataCode=-1;
						}
					},
					rej => {}
				).catch(()=>{
					//联网失败, 结束加载
					this.refreshing = false;
					this.refreshText = '加载完成',
					this.reqDataCode=-1;
				});
				
			},
			onblur(){
				console.log("qxj onblur");
				//this.isInputFocus = false;
			},
			hideKeyboard(){
				uni.hideKeyboard();
			},
			doLike(item,index){
				if(!isLogin()){
					showLoginPage();
					return;
				}
				const params={"commentId":item.commentId};
				uni.showLoading({title:""});
				let that=this;
				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;
							}
							// 使用 $set 保证 nvue 下响应式更新
							this.$set(this.dataList, index, item);
							this.$forceUpdate();
							uni.showToast({title: '操作成功',icon: 'none'});
						}else{
							uni.showToast({title: res.msg,icon: 'none'});
						}
					},
					rej => {}
				);
			},
			doReplyLike(cItem, replyIdx, parentIndex){
				if(!isLogin()){
					showLoginPage();
					return;
				}
				const params={"commentId":cItem.commentId};
				uni.showLoading({title:""});
				let that=this;
				doLikeComment(params).then(res => {
						uni.hideLoading();
						if(res.code==200){
							if(cItem.liked==0){
								cItem.likes+=1;
								cItem.liked=1;
							}else{
								cItem.likes-=1;
								cItem.liked=0;
							}
							// 更新嵌套数据并强制刷新视图，保证回复点赞实时显示
							this.$set(this.dataList[parentIndex].replyList, replyIdx, cItem);
							this.$forceUpdate();
							uni.showToast({title: '操作成功',icon: 'none'});
						}else{
							uni.showToast({title: res.msg,icon: 'none'});
						}
					},
					rej => {}
				);
			},
			delComment(item,type){
				if(!isLogin()){
					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)  {
				               console.log("qxj 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.totalNum = this.totalNum-1
							this.sendNotify(this.totalNum);
							setTimeout(function(){
								that.refreshPage();
							},1000)
						}else{
							uni.showToast({title: res.msg,icon: 'none'});
						}
					},
					rej => {}
				);
			},	
			sendNotify(smsNum){
				uni.$emit('refreshVideoComment', {
				    videoId: this.videoId,
					smsNum:smsNum
				});
			},
			boardHeightChange:function(res){
				console.log('changeHeight', res.height);
				if(res.height==0){
					this.placeholder="发布一条友善的评论";
					//this.pingContent='';
					this.isInputFocus=false;
				}else{
					this.isInputFocus=true;
				}
				this.KeyHight = res.height;
			},
		    isEmpty(obj) {
		    	if (typeof obj == "undefined" || obj == null || obj == "") {
		    		return true;
		    	} else {
		    		return false;
		    	}
		    },
			formatDate(dateStr) {
				let formatStr = "";
				let formatDate;
				if(dateStr==null){
					return formatStr;
				}
				let date = dayjs(dateStr,'YYYY-MM-DD HH:mm:ss');
				let today = dayjs();
				if (date.year() != today.year()) {
					formatDate = date.format('YYYY-MM-DD HH:mm');
				} 
				else if (date.month() === today.month()) {
					switch (date.date() - today.date()) {
						case 0:
							formatDate = date.format('今天 HH:mm');
							break;
						case -1:
							formatDate = date.format('昨天 HH:mm');
							break;
						case 1:
							formatDate = date.format('明天 HH:mm');
							break;
						default:
							formatDate = date.format('MM-DD HH:mm');
							break;
					}
				} 
				else if (date.month() - today.month() === 0 && date.date() === 1) {
					formatDate = date.format('明天 HH:mm');
				} 
				else {
					formatDate = date.format('MM-DD HH:mm');
				}
				return formatDate;
			}
		},
		onShow() {
			console.log("qxj videoComment onShow");
		},
		onUnload: function() {
			uni.offKeyboardHeightChange(this.boardHeightChange);
			uni.$off("videoComment");
		},
		beforeDestroy() {
			uni.offKeyboardHeightChange(this.boardHeightChange);
			// 注销全局配置监听
			console.log("qxj videoComment destroyed");
			uni.$off("videoComment");
		},
		onHide() {
			 console.log("qxj videoComment onHide");
		},
		onClose() {
			 console.log("qxj videoComment onClose");
		}

	
	
	}
</script>

<style>
	
	page {
		background-color: white;
	}
	
	.fl-row{
		display: flex;
		flex-direction: row;
	}
	  
	.comtentBox{
		background-color:#171a1d;
		box-sizing: border-box;
	}

	.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/images/other/course/comment.png);
	}

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

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

	.es-icon-course-nav-bg-ac,.ac {
		background-color: #ffd8c4;
	}

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

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

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

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

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

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

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


	.br{
	  border: 1px solid #FF5C03;
	}
	
	.fix-bottom{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		/* width: 100%; */
		z-index: 999;
		background-color: white;
	
	}
	
	.refresh {
		display: flex;
		flex-direction: row; 
	    justify-content: center;
		height: 50px;
		width: 750rpx;
	}
	
	.loading-more {
		  align-items: center;
		  justify-content: center;
		  padding-top: 14px;
		  padding-bottom: 14px;
		  text-align: center;
	}
	
	.loading-more-text {
		  font-size: 28rpx;
		  color: #999;
	}
	
	
 
</style>