MoeNovaClient/components/CommentSection/CommentSection.vue

<template>
	<view class="comment-section">
		<view class="section-header">
			<text class="fa fa-comments"></text>
			<text class="section-title">评论区</text>
			<text class="comment-count">({{ tableTotal }})</text>
		</view>

		<CComment ref="ccRef" :myInfo="myInfo" :userInfo="userInfo" :tableData="tableData"
			:tableTotal.sync="tableTotal" :deleteMode="deleteMode" @likeFun="likeFun" @replyFun="replyFun"
			@deleteFun="deleteFun"></CComment>

		<view class="comment-button" @tap="openComment">
			<text class="fa fa-pencil"></text>
			<text>发表新评论</text>
		</view>
	</view>
</template>

<script>
import CComment from "@/components/cc-comment/cc-comment.vue";

export default {
	name: 'CommentSection',
	components: {
		CComment
	},
	props: {
		myInfo: {
			type: Object,
			required: true
		},
		userInfo: {
			type: Object,
			required: true
		},
		articleId: {
			type: [Number, String],
			required: true
		},
		type: {
			type: String,
			default: 'work'
		}
	},
	data() {
		return {
			deleteMode: "all",
			tableTotal: 0,
			tableData: []
		}
	},
	created() {
		this.loadCommentData();
	},
	methods: {
		loadCommentData() {
			uni.request({
				url: this.$apiHost + '/Article/getcomments',
				data: {
					uuid: getApp().globalData.uuid,
					type: this.type,
					id: this.articleId,
					page: 1,
					limit: 10
				},
				header: {
					"content-type": "application/json",
					'sign': getApp().globalData.headerSign
				},
				success: (res) => {
					console.log("评论列表:", res.data);
					if (res.data.success == "yes") {
						this.$set(this, 'tableData', res.data.list);
						this.tableTotal = res.data.total;
						console.log("tabddd", this.tableData)
					} else {
						uni.showToast({
							title: '获取评论列表失败',
							icon: 'none'
						});
					}
				},
				fail: (e) => {
					console.log("----e:", e);
				}
			});
		},
		openComment() {
			let ccRef = this.$refs["ccRef"];
			ccRef.newCommentFun();
		},
		likeFun({params}, callback) {
			console.log("likeFun", params);
			uni.request({
				url: this.$apiHost + '/Article/zanComment',
				data: {
					uuid: getApp().globalData.uuid,
					id: params.id
				},
				header: {
					"content-type": "application/json",
					'sign': getApp().globalData.headerSign
				},
				success: (res) => {
					console.log("点赞结果:", res.data);
					if (res.data.success !== "yes") {
						callback(res); // 请求失败时重置点赞效果
					}
				},
				fail: (e) => {
					console.log("点赞失败:", e);
					callback(e); // 请求失败时重置点赞效果
				}
			});
		},
		replyFun({params}, callback) {
			console.log("replyFun", {
				uuid: getApp().globalData.uuid,
				type: this.type,
				article_id: this.articleId,
				content: params.user_content,
				parent_id: params.parent_id || 0,
				reply_id: params.reply_id || 0,
				reply_name: params.reply_name || ''
			});
			uni.request({
				url: this.$apiHost + '/Article/newComment',
				data: {
					uuid: getApp().globalData.uuid,
					type: this.type,
					article_id: this.articleId,
					content: params.user_content,
					parent_id: params.parent_id || 0,
					reply_id: params.reply_id || 0,
					reply_name: params.reply_name || ''
				},
				header: {
					"content-type": "application/json",
					'sign': getApp().globalData.headerSign
				},
				success: (res) => {
					console.log("评论结果:", res.data);
					if (res.data.success === "yes") {
						callback(res.data);
						this.loadCommentData(); // 重新加载评论列表
					}
				},
				fail: (e) => {
					console.log("评论失败:", e);
					uni.showToast({
						title: '评论失败，请重试',
						icon: 'none'
					});
				}
			});
		},
		deleteFun({params, mode}, callback) {
			console.log("deleteFun", {params, mode});
			const idsString = Array.isArray(params) ? params.join(',') : params.toString();

			console.log("删除评论", idsString, mode)
			uni.request({
				url: this.$apiHost + '/Article/delComment',
				data: {
					uuid: getApp().globalData.uuid,
					ids: idsString,
					mode: mode
				},
				header: {
					"content-type": "application/json",
					'sign': getApp().globalData.headerSign
				},
				success: (res) => {
					console.log("删除结果:", res.data);
					if (res.data.success === "yes") {
						callback(res);
						this.loadCommentData(); // 重新加载评论列表
					}
				},
				fail: (e) => {
					console.log("删除失败:", e);
					uni.showToast({
						title: '删除失败，请重试',
						icon: 'none'
					});
				}
			});
		}
	}
}
</script>

<style lang="scss">
.comment-section {
	background-color: #fff;
	padding: 20rpx;
	margin-top: 20rpx;
	border-radius: 12rpx;

	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.fa {
			font-size: 36rpx;
			color: #666;
			margin-right: 10rpx;
		}

		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.comment-count {
			font-size: 28rpx;
			color: #999;
			margin-left: 10rpx;
		}
	}

	.comment-button {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		margin-top: 20rpx;
		background-color: #f8f8f8;
		border-radius: 40rpx;
		cursor: pointer;

		.fa {
			font-size: 32rpx;
			color: #666;
			margin-right: 10rpx;
		}

		text {
			font-size: 28rpx;
			color: #666;
		}

		&:active {
			background-color: #f0f0f0;
		}
	}
}
</style>