From 7b8fadc10955b78d06d5249d2c811800c221bf0e Mon Sep 17 00:00:00 2001
From: "Mr.jiang" <714156421@qq.com>
Date: Tue, 27 Aug 2024 16:14:20 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8B=B9=E6=9E=9C=E6=89=8B=E6=9C=BA=20?=
 =?UTF-8?q?=E4=B8=A4=E4=B8=AA=E6=8C=89=E9=92=AE=E5=90=8C=E6=97=B6=E5=87=BA?=
 =?UTF-8?q?=E7=8E=B0=20=E8=B0=83=E6=95=B4=E4=B8=80=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/XJ-comment/index.vue  |  23 +-
 components/XJ-comment/index1.vue | 503 +++++++++++++++++++++++++++++++
 pages/videoCircle/index.vue      |   2 +-
 3 files changed, 524 insertions(+), 4 deletions(-)
 create mode 100644 components/XJ-comment/index1.vue

diff --git a/components/XJ-comment/index.vue b/components/XJ-comment/index.vue
index 17362bf..c0b1424 100644
--- a/components/XJ-comment/index.vue
+++ b/components/XJ-comment/index.vue
@@ -27,6 +27,7 @@
 						<uni-icons type="down" size="24" color="#007aff"></uni-icons>
 					</view>
 				</view>
+				<div class="btn" @click="openComment">发一条新评论</div>
 			</view>
 		</template>
 		<!-- 空盒子 -->
@@ -143,6 +144,9 @@
 			  //   this.isLoading = false;
 			  // }, 1000);
 			},
+			openComment() {//点击发布新评论按钮
+				this.$refs.cPopupRef.open();
+			},
 			treeTransForm(data) {
 				let newData = JSON.parse(JSON.stringify(data));
 				let result = [];
@@ -222,10 +226,10 @@
 					params.user_name=this.tableData.user_name;
 				} else {
 					params.id = this.tableData.id;
-						params.parent_id = item.item1?.parent_id ?? item.item1.id;
-						params.reply_id = item.item1.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 = item.item2 ? item.item2.user_name : item.item1.user_name;
+						params.reply_name = this.tableData.user_name
 
 				}
 				params = {
@@ -368,6 +372,19 @@
 </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;
diff --git a/components/XJ-comment/index1.vue b/components/XJ-comment/index1.vue
new file mode 100644
index 0000000..3c8a51b
--- /dev/null
+++ b/components/XJ-comment/index1.vue
@@ -0,0 +1,503 @@
+<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 = item.item1?.parent_id ?? item.item1.id;
+						params.reply_id = item.item1.id;
+						params.user_name=this.tableData.user_name;
+						params.reply_name = item.item2 ? item.item2.user_name : item.item1.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>
\ No newline at end of file
diff --git a/pages/videoCircle/index.vue b/pages/videoCircle/index.vue
index d66cecd..2bfc4ea 100644
--- a/pages/videoCircle/index.vue
+++ b/pages/videoCircle/index.vue
@@ -99,7 +99,7 @@
 		<uni-popup class="uni-popup" type="bottom" ref="pinglun" @touchmove.stop.prevent="moveHandle">
 			<view class="popup-content" :style="'width: '+ windowWidth +'px; height: '+ (boxStyle.height/heightNum) +'px;'">
 				    <CComment ref="ccRef" :showPopup="showPopup" :userInfo="userInfo" :tableData="tableData" :tableTotal="tableTotal" likeFun="likeFun" @replyFun="replyFun" @deleteFun="deleteFun" :deleteMode="deleteMode"></CComment>
-						<div class="btn" @click="openComment">发一条新评论</div>
+						<!-- <div class="btn" @click="openComment">发一条新评论</div> -->
 				<!-- <douyin-scrollview
 				:Width="windowWidth"
 				:Height="(boxStyle.height/1.23)"