MoeNovaClient/components/CommentSection/CommentSection.vue

<template>
	<view class="comment-section">
		<!-- <template v-if="articleInfo.can_view_comment"> -->
		<template>
			<view class="section-header">
				<!-- <text class="fa fa-comments"></text> -->
				<!-- <text class="section-title">评论区</text> -->
				<text class="comment-count">共 {{ tableTotal }} 条评论</text>
			</view>

			<CComment v-if="userInfo.user_id" ref="ccRef" :myInfo="userInfo" :userInfo="author" :tableData="tableData"
				:tableTotal.sync="tableTotal" :deleteMode="deleteMode" @likeFun="likeFun" @replyFun="replyFun"
				@deleteFun="deleteFun" :isComment="articleInfo.can_comment"></CComment>

			<!-- 	<view class="comment-button" @tap="openComment">
				<text class="fa fa-pencil"></text>
				<text>发表新评论</text>
			</view> -->
			<view style="height: 110rpx;width: 100%;"></view>
			<view class="bottomFixed">
				<view class="inbutBox" @tap="openComment">
					<view class="left-box">
						<image src="@/static/icon/sy_icon_fabiao.png"></image>
						<text>发表你的想法...</text>
					</view>
					<view class="emoji-trigger">
						<!-- <text class="fa fa-smile-o"></text> -->
						<image style="width: 48rpx ;height: 48rpx;" src="@/static/icon/sy_icon_biaoqing.png"></image>
					</view>
				</view>
				<view class="giveTheThumbsUpBox" @click="giveTheThumbsUp()">
					<image v-if="!isLikeFalg" src="@/static/icon/icon-19.png"></image>
					<image v-else src="@/static/icon/icon-18.png"></image>
					<span :style="{ color: isLikeFalg ? '#8de10b' : '#999' }">{{ articleInfo.num_like }}</span>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
import CComment from "@/components/cc-comment/cc-comment.vue";
import { getStorage, setStorage, removeStorage } from "@/common/util.js";
import { mapState, mapMutations, mapGetters } from 'vuex';
export default {
	name: 'CommentSection',
	components: {
		CComment
	},
	computed: {
		...mapState('rightsManagement', ['teenageMode'])
	},
	props: {
		myInfo: {
			type: Object,
			required: true
		},

		articleInfo: {
			// type 
			default: () => ({ is_like: 0 })
		},
		articleId: {
			type: [Number, String],
			required: true
		},
		type: {
			type: String,
			default: 'work'
		},
		find: {
			type: String,
			default: ''
		},
		author: {   // 文章作者信息
			type: Object,
			default: () => { },
		},

	},
	data() {
		return {
			deleteMode: "all",
			tableTotal: 0,
			tableData: [],
			isLikeFalg: this.articleInfo.is_like,
			userInfo: {}

		}
	},
	created() {
		this.loadCommentData();
		this.getInfoData()
		console.log('myInfo',this.myInfo);
		console.log('articleInfo',this.articleInfo);
		console.log('articleId',this.articleId);
		console.log('type',this.type);
		console.log('find',this.find);
		console.log('author',this.author);
		
	},
	onMounted() {

	},
	methods: {
		giveTheThumbsUp() {
			let url = '/Article/like'
			if (this.find == 'work') {
				url = '/Work/like'
			}
			uni.request({
				url: this.$apiHost + url,
				data: {
					uuid: getApp().globalData.uuid,
					id: this.articleId
				},
				header: {
					"content-type": "application/json",
					'sign': getApp().globalData.headerSign
				},
				success: (res) => {
					console.log("点赞结果:", res.data);
					if (res.data.str == "取消点赞") {
						this.isLikeFalg = false
						this.articleInfo.num_like--
					}
					if (res.data.str == "点赞成功") {
						this.isLikeFalg = true
						this.articleInfo.num_like++
					}
					uni.showToast({
						title: res.data.str,
						icon: 'none'
					});
				},
				fail: (e) => {
					console.log("点赞失败:", e);
				}
			});
		},
		loadCommentData() {
			uni.request({
				url: this.$apiHost + '/Article/getcomments',
				data: {
					uuid: getApp().globalData.uuid,
					type: this.type,
					id: this.articleId,
					page: 1,
					limit: 10,
					sms_id: this.articleInfo.sms_id ? this.articleInfo.sms_id : 0

				},
				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;
						let newData = res.data.total
						this.$emit('totalNumberOfComments', newData);
						console.log("tabddd", this.tableData)
					} else {
						uni.showToast({
							title: '获取评论列表失败',
							icon: 'none'
						});
					}
				},
				fail: (e) => {
					console.log("----e:", e);
				}
			});
		},
		openComment() {
			let isContentRecommendation
			if (this.teenageMode != 1) {
				isContentRecommendation = true;
			} else {
				isContentRecommendation = false;
			}

			if (!isContentRecommendation) {
				uni.showToast({
					title: '当前无法评论',
					icon: 'none'
				});
				return;
			}

			uni.$emit('check_login', () => {
				let ccRef = this.$refs["ccRef"];
				ccRef.newCommentFun();
			})
		},
		likeFun({ params }, callback) {
			uni.$emit('check_login', () => {

				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) {
			uni.$emit('check_login', () => {
				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.comment);
							this.loadCommentData(); // 重新加载评论列表
						} else {
							uni.showToast({
								title: res.data.str,
								icon: 'none'
							});
							this.loadCommentData();
						}
					},
					fail: (e) => {
						console.log("评论失败:", e);
						uni.showToast({
							title: '评论失败，请重试',
							icon: 'none'
						});
					}
				});
			})
		},
		deleteFun({ params, mode }, callback) {
			uni.$emit('check_login', () => {
				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") {
							this.loadCommentData(); // 重新加载评论列表
						}
						callback(res);
						if (res.data.success === "no" && res.data.str) {
							console.log(1);

							uni.showToast({
								title: res.data.str,
								icon: 'none'
							});
						}
					},
					fail: (e) => {
						console.log("删除失败:", e);
						uni.showToast({
							title: '删除失败，请重试',
							icon: 'none'
						});
					}
				});
			})
		},
		// 获取当前用户信息
		getInfoData() {
			uni.request({
				url: this.$apiHost + '/User/getinfo',
				data: {
					uuid: getApp().globalData.uuid
				},
				header: {
					'content-type': 'application/json'
				},
				success: (res) => {

					this.userInfo = res.data;
					console.log("获取用户信息成功:", res.data);

				}
			});
		},
	}
}
</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;
		padding-left: 28rpx;

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

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

		.comment-count {
			font-size: 28rpx;
			// margin-left: 10rpx;
			font-family: 'PingFang SC-Medium';
			font-weight: 400;
			color: #1F1F1F;
		}
	}

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

	.bottomFixed {
		width: 100vw;
		height: 104rpx;
		padding: 20rpx 32rpx 16rpx 32rpx;
		background-color: #fff;
		position: fixed;
		z-index: 99;
		left: 0;
		bottom: var(--window-bottom);
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: #F6F6F6 solid 2rpx;
		.inbutBox {
			background: #F6F6F6;
			border-radius: 34rpx;
			width: 576rpx;
			height: 68rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 18rpx;

			.left-box {
				display: flex;
				align-items: center;
				color: #999;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 12rpx;
			}

			.emoji-trigger {
				display: flex;
				align-items: center;

				image {
					margin: 0 !important;
				}
			}
		}

		.giveTheThumbsUpBox {
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}
	}

}
</style>