siyu_app/pages/course/comment.vue

<template>
	
	<view class="es es-ac es-mt-25 es-pb-30 es-fs-22 es-c" style="border-bottom: 1px #FAFAFA solid;">
		<view class="es-on-act nav es-icon-auto es es-ac es-pc" :class="sortType==1?'ac':''" @tap="tapCommentType(1)">
			<view class="es-icon-20 es-icon-course-icon-2"></view>
			<view class="es-ml-19" :class="1?'es-fw-600':''">热度</view>
		</view>
		<view class="es-on-act nav es-icon-auto es es-ac es-pc es-ml-14" :class="sortType==2?'ac':''" @tap="tapCommentType(2)">
			<view class="es-icon-20 es-icon-course-icon-2"></view>
			<view class="es-ml-19" :class="0?'es-fw-600':''">时间</view>
		</view>
	</view>

	<mescroll-body   @init="mescrollInit" top="0"  :down="downOption" :up="upOption"  @down="downCallback" @up="upCallback" @emptyclick="emptyClick">
		 <view class="es-bc-white es-br-20">
			<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">
						<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.isLike?'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)">
								<image src="../../static/image/hall/more_icon16.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"  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)">
											<image src="../../static/image/hall/more_icon16.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">
							<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 class="" :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-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-50 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>

</template>

<script>
	
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { getCourseById,getCommentList,addComment,updateComment,commentDoLike,deleteComment } from '@/api/course'
	export default {
		mixins: [MescrollMixin],
		props: {
			courseId: {
				type: [String, Number],
				default: 0
			}
		},
		data() {
			return {
				pingContent: '',
				KeyHight:0,
				cateId:5,
				courseId1:0,
				totalNum:0,
				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,
				txtPing:null,
				sortType:1,
				isInputFocus:false,
				showBoottom:false,
				placeholder:"发布一条友善的评论",
				defHeadImg:"@/static/image/hall/my_heads_icon.png",
				myUserInfo:{userId:0},
				rpyPageNum:0,
				replyContent:"",
				rPlaceholder:"",
				delCommentId:null,
				isLastPage:false,
			}
		},
		mounted() {
			try {
				console.log("qxj comment mounted");
				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();
					}
				}); 
			
			} catch (e) {
				
			}
		},
		onLoad(options) {
			console.log("qxj comment onLoad");
			this.txtPing = this.$refs["txtPing"];
			uni.onKeyboardHeightChange(this.boardHeightChange);
			
		},
		onUnload: function() {
			uni.offKeyboardHeightChange(this.boardHeightChange);
		},
		methods: {
			getCourseInfo(){
			   getCourseById(this.courseId).then(res => {
					if(res.code==200){
						this.courseData=res.data;
					}
				},
				rej => {}
			   );
			},
			upCallback(page) {   	
				/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
				const params={"courseId":this.courseId,"sortType":this.sortType};
				//uni.showLoading({title:""});
				getCommentList(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();
			},
			isMySend(item){
				if(this.myUserInfo!=null && this.myUserInfo.userId==item.userId){
					return true;
				}
				return false;
			},
			doReply(item){
				this.replyParentId=item.commentId;
				this.pingType=2;
				this.placeholder="回复"+item.nickName;
				this.$nextTick(()=>{
					this.pingContent='';
					this.isInputFocus=true;
				});
				// this.txtPing.placeholder="回复";
			},
			replayClick(item,index){
				item.expand=true;  
				this.dataList[index]=item;
				this.$forceUpdate(); // 如果你需要强制刷新，可以调用 $forceUpdate()
			},
			onblur(){
			    this.isInputFocus=false;
				this.placeholder="发布一条友善的评论";
			},
			doLike(item){
				if(!this.$isLogin()){
					this.$showLoginPage();
					return;
				}
				const params={"commentId":item.commentId};
				uni.showLoading({title:""});
				commentDoLike(params).then(res => {
						uni.hideLoading();
						if(res.code==200){
							uni.showToast({title: '操作成功',icon: 'none'});
						}else{
							uni.showToast({title: res.msg,icon: 'none'});
						}
						this.refreshPage();
					},
					rej => {}
				);
			},
			
			doReplyLike(item){
				if(!this.$isLogin()){
					this.$showLoginPage();
					return;
				}
				const params={"commentId":item.commentId};
				uni.showLoading({title:""});
				commentDoLike(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 => {}
				);
			},
			/*打开回复弹框*/
			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={"courseId":this.courseId,"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={"courseId":this.courseId,"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){
							uni.$emit('refreshTitle',that.totalNum++);
							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.pingType=1;
						this.pingContent='';
						this.refreshPage();
						
					},
					rej => {}
				);		
			},
			delComment(item){
				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);
				          }  else if  (res.cancel)  {
				             
				          }
				      }
				});
			},
			delCommentAct(item){
				this.delCommentId=item.commentId;
				this.delCommentRequest(this.delCommentId);
			},
			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 => {}
				);
			},	
			
			//点击空布局按钮的回调
			emptyClick(){
				this.mescroll.resetUpScroll(true);
			},
			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;
	}

	.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;
	}

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

	.es-ipt,.es-ipt input {
		
	}
	
    
    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>