sadjv3_user/components/XJ-comment/index.vue

<template>
	
	<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="loadMore">
		<!-- <view class="c_total">评论 {{ tableTotal }}</view> -->
		<template v-if="dataList && dataList.length">
			<view class="c_comment" v-for="(item1, index1) in dataList" :key="item1.id">
				<!-- 一级评论 -->
				<CommonComp :data="item1" />
				<!-- 下边三个方法是 一级评论点击回复 -->
				<!-- @likeClick="() => likeClick({ item1, index1 })"
				  @replyClick="() => replyClick({ item1, index1 })"
				  @deleteClick="() => deleteClick({ item1, index1 })" -->
				<view class="children_item" v-if="item1.children && item1.children.length">
					<!-- 二级评论 -->
					<CommonComp v-for="(item2, index2) in item1.childrenShow" :key="item2.id" :data="item2"
						:pData="item1" />
						<!-- 下边三个方法是 二级评论点击回复 -->
						<!-- @likeClick="() => likeClick({ item1, index1, item2, index2 })"
						@replyClick="() => replyClick({ item1, index1, item2, index2 })"
						@deleteClick="() => deleteClick({ item1, index1, item2, index2 })" -->
					<!-- 展开折叠的二级评论 -->
					<view class="expand_reply" v-if="expandTxtShow({ item1, index1 })"
						@tap="() => expandReplyFun({ item1, index1 })">
						<span class="txt">
							展开{{ item1.children.length - item1.childrenShow.length }}条回复
						</span>
						<uni-icons type="down" size="24" color="#007aff"></uni-icons>
					</view>
				</view>
				<div class="btn" @click="openComment">发一条新评论</div>
			</view>
		</template>
		<!-- 空盒子 -->
		<view class="empty_box" v-else>
			<uni-icons type="chatboxes" size="36" color="#c0c0c0"></uni-icons>
			<view>
				<span class="txt"> 这里是一片荒草地, </span>
				<span class="txt click" @click="() => newCommentFun()">说点什么...</span>
			</view>
		</view>
		<!-- 评论弹窗 -->
		<uni-popup ref="cPopupRef" type="bottom" @change="popChange">
			<view class="c_popup_box">
				<view class="reply_text">
					<template v-if="Object.keys(replyTemp).length">
						<span class="text_aid">回复给</span>
						<span class="text_main">{{
							replyTemp.item1.item2
							  ? replyTemp.item1.item2.user_name
							  : replyTemp.item1.item1.user_name
						  }}</span>
					</template>
					<span v-else class="text_main">发表新评论</span>
				</view>
				<view class="content">
					<view class="text_area">
						<uni-easyinput class="text_area" type="textarea" v-model="commentValue"
							:placeholder="commentPlaceholder" :focus="focus" trim autoHeight
							maxlength="300"></uni-easyinput>
					</view>
					<view class="send_btn" @tap="() => sendClick()">发送</view>
				</view>
			</view>
		</uni-popup>
		<!-- 删除弹窗 -->
		<uni-popup ref="delPopupRef" type="dialog">
			<uni-popup-dialog mode="base" title="" content="确定删除这条评论吗?" :before-close="true" @close="delCloseFun"
				@confirm="delConfirmFun"></uni-popup-dialog>
		</uni-popup>
	</scroll-view>
</template>

<script>
	import CommonComp from "./componets/common";

	export default {
		components: {
			CommonComp
		},
		props: {
			userInfo: {
				type: Object,
				default: () => ({})
			},
			tableData: {
				type: Array,
				default: () => []
			},
			tableTotal: {
				type: Number,
				default: 0
			},
			deleteMode: {
				type: String,
				default: "all"
			},
			showPopup: {
				type: Boolean,
			},
		},
		data() {
			return {
				isLoading: false, // 是否正在加载
				dataList: [],
				replyTemp: {},
				isNewComment: false,
				focus: false,
				commentValue: "",
				commentPlaceholder: "说点什么...",
				delTemp: {},
				index: 0,
			};
		},
		watch: {
			tableData: {
				handler(newVal) {
					if (newVal.length !== this.dataList.length) {
						this.dataList = this.treeTransForm(newVal);
						console.log("this.dataList:", this.dataList);
					}
				},
				deep: true,
				immediate: true
			}
		},
		onPageScroll : function(e) { //nvue暂不支持滚动监听，可用bindingx代替
			console.log("滚动距离为：" + e.scrollTop);
		},
		mounted() {
			console.log("this.tableData",this.tableData)
		},
		methods: {
			loadMore() {
			  if (this.isLoading) return;
			  this.isLoading = true;
			  if(this.openLoadMore){
			  	this.$emit("loadMore")
			  }
			  console.log(111)
			  // 模拟异步加载数据的过程
			  // setTimeout(() => {
			  //   const moreData = [...Array(20).keys()].map(i => `Item ${this.list.length + i + 1}`);
			  //   this.list.push(...moreData);
			  //   this.isLoading = false;
			  // }, 1000);
			},
			openComment() {//点击发布新评论按钮
				this.$refs.cPopupRef.open();
			},
			treeTransForm(data) {
				let newData = JSON.parse(JSON.stringify(data));
				let result = [];
				let map = {};
				newData.forEach((item, i) => {
					item.owner = item.id === this.userInfo.id;
					map[item.id] = item;
				});
				newData.forEach((item) => {
					let parent = map[item.parent_id];
					if (parent) {
						(parent.children || (parent.children = [])).push(item);
						if (parent.children.length === 1) {
							(parent.childrenShow = []).push(item);
						}
					} else {
						result.push(item);
					}
				});
				return result;
			},
			setLike(item) {
				item.is_like = !item.is_like;
				item.like_count = item.is_like ? item.like_count + 1 : item.like_count - 1;
			},
			likeClick({
				item1,
				index1,
				item2,
				index2
			}) {
				let item = item2 || item1;
				this.setLike(item);
				this.$emit("likeFun", {
					params: item
				}, (res) => {
					this.setLike(item);
				});
			},
			replyClick(item1, index1, item2, index2) {
				this.replyTemp = JSON.parse(JSON.stringify({
					item1,
					index1,
					item2,
					index2
				}));
				console.log(this.replyTemp, "===========");
				this.$refs.cPopupRef.open();
			},
			newCommentFun() {
				this.isNewComment = true;
				this.$refs.cPopupRef.open();
			},
			popChange(e) {
				if (!e.show) {
					this.commentValue = "";
					this.replyTemp = {};
					this.isNewComment = false;
				}
				this.focus = e.show;
			},
			sendClick() {
				let {
					item1,
					index1,
					item2,
					index2
				} = this.replyTemp;
				let item = item2 || item1;
				console.log('item=====', item);
				let params = {};
				if (this.isNewComment) {
					params.id = this.tableData.id;
					params.parent_id = this.tableData.parent_id;
					params.reply_id = this.tableData.reply_id;
					params.reply_name = this.tableData.reply_name;
					params.user_name=this.tableData.user_name;
				} else {
					params.id = this.tableData.id;
						params.parent_id = this.tableData.parent_id;
						params.reply_id = this.tableData.reply_id;
						params.user_name=this.tableData.user_name;
						params.reply_name = this.tableData.user_name

				}
				params = {
					...params,
					user_avatar: this.tableData.filePath?this.tableData.filePath:'../../static/logo.png',
					user_content: this.commentValue,
					is_like: false,
					like_count: 0,
					create_time: this.tableData.createTime,
					owner: true
				};

				uni.showLoading({
					title: "正在发送",
					mask: true
				});
				console.log("params======。",this.tableData)
				if(this.showPopup==true){
					this.$refs.cPopupRef.close();
				}
				this.$emit("replyFun", {
					params
				}, (res) => {
					console.log(11)
					uni.hideLoading();
					params = {
						...params,
						id: res.id
					};
					if (this.isNewComment) {
						console.log(22)
						this.dataList.push(params);
					} else {
						console.log("44",this.dataList);
						let c_data = this.dataList[item.index1];
						(c_data.children || (c_data.children = [])).push(params);
						if (
							c_data.children.length === (c_data.childrenShow || (c_data.childrenShow = [])).length +
							1
						) {
							c_data.childrenShow.push(params);
						}
					}
					this.$emit("update:tableTotal", this.tableTotal + 1);
				});
				this.$refs.cPopupRef.close();
			},
			deleteClick(item1, index1, item2, index2) {
				this.delTemp = JSON.parse(JSON.stringify({
					item1,
					index1,
					item2,
					index2
				}));
				this.$refs.delPopupRef.open();
			},
			delCloseFun() {
				this.delTemp = {};
				this.$refs.delPopupRef.close();
			},
			delConfirmFun({
				item1,
				index1,
				item2,
				index2
			} = this.delTemp) {
				let c_data = this.dataList[index1];
				uni.showLoading({
					title: "正在删除",
					mask: true
				});
				if (index2 >= 0) {
					this.$emit("deleteFun", {
						params: [c_data.children[index2].id]
					}, (res) => {
						uni.hideLoading();
						this.$emit("update:tableTotal", this.tableTotal - 1);
						c_data.children.splice(index2, 1);
						c_data.childrenShow.splice(index2, 1);
					});
				} else {
					if (c_data.children && c_data.children.length) {
						switch (this.deleteMode) {
							case "bind":
								c_data.user_content = "当前评论内容已被移除";
								break;
							case "only":
								this.$emit("deleteFun", {
									mode: this.deleteMode,
									params: [c_data.id]
								}, (res) => {
									uni.hideLoading();
									this.$emit("update:tableTotal", this.tableTotal - c_data.children.length + 1);
									this.dataList.splice(index1, 1);
								});
								break;
							default:
								let delIdArr = [c_data.id];
								c_data.children.forEach((_, i) => {
									delIdArr.push(_.id);
								});
								this.$emit("deleteFun", {
									params: delIdArr,
									mode: this.deleteMode
								}, (res) => {
									uni.hideLoading();
									this.$emit("update:tableTotal", this.tableTotal - c_data.children.length + 1);
									this.dataList.splice(index1, 1);
								});
								break;
						}
					} else {
						this.$emit("deleteFun", {
							params: [c_data.id]
						}, (res) => {
							uni.hideLoading();
							this.$emit("update:tableTotal", this.tableTotal - 1);
							this.dataList.splice(index1, 1);
						});
					}
				}
				this.delCloseFun();
			},
			expandTxtShow(item1, index1) {
				return (
					item1.childrenShow &&
					item1.childrenShow.length &&
					item1.children.length - item1.childrenShow.length
				);
			},
			expandReplyFun(item1, index1) {
				let csLen = this.dataList[index1].childrenShow.length;
				this.dataList[index1].childrenShow.push(
					...this.dataList[index1].children.slice(csLen, csLen + 6)
				);
			}
		}
	};
</script>
</script>

<style lang="scss" scoped>
	.btn {
	  text-align: center;
	  color: #fff;
	  padding: 20rpx;
	 margin: 9px;
	  border-radius: 20rpx;
	  background-color: #2979ff;
	  position: fixed;
	  bottom: 0px;
	  z-index: 0;
	  width: 90%;
	  left:0;
	}
	////////////////////////
	.center {
		display: flex;
		align-items: center;
	}

	////////////////////////
	.scroll-Y {
			height: 940rpx;
		}
		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
		}
		.scroll-view-item {
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
			font-size: 36rpx;
		}
		.scroll-view-item_H {
			display: inline-block;
			width: 100%;
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
			font-size: 36rpx;
		}
	// .template-view {
	// 	height: 430px;
	// 	overflow: auto;
	// }

	.c_total {
		padding: 20rpx 30rpx 0 30rpx;
		font-size: 28rpx;
		color: #fff;
	}

	.empty_box {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 150rpx 10rpx;
		font-size: 28rpx;

		.txt {
			color: $uni-text-color-disable;
		}

		.click {
			color: $uni-color-primary;
		}
	}

	.c_comment {
		padding: 20rpx 30rpx;
		font-size: 28rpx;

		.children_item {
			padding: 20rpx 30rpx;
			margin-top: 10rpx;
			margin-left: 80rpx;

			// background-color: $uni-bg-color-grey;
			.expand_reply {
				margin-top: 10rpx;
				margin-left: 80rpx;

				.txt {
					font-weight: 600;
					color: $uni-color-primary;
				}
			}
		}
	}

	.c_popup_box {
		background-color: #fff;

		.reply_text {
			@extend .center;
			padding: 20rpx 20rpx 0 20rpx;
			font-size: 26rpx;

			.text_aid {
				color: $uni-text-color-grey;
				margin-right: 5rpx;
			}

			.text_main {}
		}

		.content {
			@extend .center;

			.text_area {
				flex: 1;
				padding: 20rpx;
			}

			.send_btn {
				@extend .center;
				justify-content: center;
				width: 120rpx;
				height: 60rpx;
				border-radius: 20rpx;
				font-size: 28rpx;
				color: #fff;
				background-color: $uni-color-primary;
				margin-right: 20rpx;
			}
		}
	}
</style>