siyu_app/pages/course/components/commentList.vue

<template>
	<view class="comment">
		<view class="comment-avatar-info" v-for="(item, index) in commentList" :key="index">
			<image class="comment-avatar" :src="$isEmpty(item.avatar)?defHeadImg:item.avatar" mode="aspectFill"></image>
			<view class="comment-box">
				<view class="comment-people">
					<view class="comment-people-name">{{item.nickName}}</view>
					<view class="comment-time">{{ $isEmpty(item.createTime)?"":$formatDate(item.createTime) }}</view>
				</view>
				<view class="comment-text">{{item.content}}</view>
				<view class="comment-footer" >
					<view class="comment-footer-l">
						<view class="comment-footer-dianzan" @tap="doLike(item)">
							<image  :src="(item.isLike!=undefined && item.isLike==true)?'/static/image/hall/dianzan_on_icon.png':'/static/image/hall/dianzan_icon.png'"></image>
							<text>{{item.likes || '点赞'}}</text>
						</view>
						<view class="comment-footer-pingjia">
							<image src="/static/image/hall/pingjia_icon.png"></image>
							<text>{{item.replyCount || '回复'}}</text>
						</view>
					</view>
					<image class="more-icon" v-if="isMySend(item)"  @tap="delComment(item)" src="@/static/image/hall/more_icon16.png"></image>
				</view>
				
				<!-- 子评论 -->
				<view class="comment-avatar-info" style="padding-top: 24rpx;" v-for="(reply,idx) in item.commentReplys" :key="idx">
					<image class="comment-avatar" src="@/static/image/hall/my_heads_icon.png" mode="aspectFill"></image>
					<view class="comment-box">
						<view class="comment-people">
							<view class="comment-people-name">
								<text>{{reply.replyInfo.userName}}</text>
								<text class="reply" v-if="reply.parentReply.itemId != 0">回复</text>
								<text v-if="reply.parentReply.itemId != 0">{{reply.parentReply.userName}}</text>
							</view>
							<view class="comment-time">{{reply.replyInfo.ctime}}</view>
						</view>
						<view class="comment-text">{{reply.replyInfo.content}}</view>
					</view>
				</view>
				<view class="comment-morereply" v-if="item.replyCount > 2">
					<text>查看全部{{item.replyCount}}条回复</text>
					<image src="@/static/image/hall/reply_more_icon.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { addComment,commentDoLike,deleteComment } from '@/api/course'
	export default {
		name: "commentList",
		props: {
			commentList: {
				type: Array,
				default:function(){
					return [  ];
				}
			}
		},
		data() {
			return {
				defHeadImg:"@/static/image/hall/my_heads_icon.png",
				delCommentId:null,
				isLastPage:false,
				myUserInfo:{userId:0},
			};
		},
		mounted() {
			if(!this.$isLogin()){
				let useInfo=uni.getStorageSync('userInfo');
				if(!!useInfo && useInfo!=null){
					this.myUserInfo=JSON.parse(useInfo);
				}
			}
		},
		methods: {
			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){
							if(!!item.isLike){
								item.likes-=1;
							}
							else{
								item.likes+=1;
							}
							item.isLike=!item.isLike;
							uni.showToast({title: '操作成功',icon: 'none'});
						}else{
							uni.showToast({title: res.msg,icon: 'none'});
						}
						//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,type);
				          }  else if  (res.cancel)  {
				             
				          }
				      }
				});
			},
			delCommentAct(item,type){
				this.delCommentId=item.commentId;
				let params={"commentId":this.delCommentId};
				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;
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.comment {
		font-family: PingFang SC, PingFang SC;
		font-size: 28rpx;
		font-weight: 400;
		color: #222222;
		&-avatar-info {
			// @include u-flex(row, flex-start, flex-start);
			display: flex;
			flex:1;
			flex-direction: row;
		}
		&-avatar {
			flex-shrink: 0;
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 20rpx;
		}
		&-box {
			display: flex;
			flex:1;
			flex-direction: column;
		}
		&-people-name {
			@include u-flex(row, center, flex-start);
			font-weight: 600;
			margin-bottom: 4rpx;
		}
		.reply {
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
			margin: 0 12rpx;
		}
		&-time {
			font-size: 22rpx;
			color: #999999;
		}
		&-text {
			padding: 20rpx 0 38rpx;
			line-height: 38rpx;
			word-break:break-all;
		}
		&-footer {
			margin-bottom: 24rpx;
			@include u-flex(row, center, space-between);
			font-size: 24rpx;
			color: #757575;
			image {
				width: 32rpx;
				height: 32rpx;
			}
			&-l {
				@include u-flex(row, center, flex-start);
				view {
					@include u-flex(row, center, flex-start);
					margin-right: 28rpx;
					image {
						margin-right: 8rpx;
					}
				}
			}
		}
		&-morereply {
			padding-bottom: 24rpx;
			font-size: 24rpx;
			color: #999999;
			@include u-flex(row, center, flex-start);
			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}
</style>