gree_leran/pages/discuss/CommentItem.vue

<template>
	<div class="comment-card">
		<div class="comment">
			<img :src="comment.avatar" class="avatar" />
			<div class="comment-content">
				<div class="username">{{ comment.username }}</div>
				<div class="text">{{ comment.text }}</div>
				<div class="actions">
					<span class="like" @click="likeComment">
						<img src="https://img.icons8.com/ios-glyphs/30/000000/facebook-like.png" class="like-icon" />
						{{ comment.likes }} 赞
					</span>
					<span class="reply" @click="toggleReplyForm">回复</span>
					<span class="share" @click="shareComment">
						<img src="https://img.icons8.com/ios-filled/30/000000/share.png" class="share-icon" />
						分享
					</span>
				</div>
				<div v-if="comment.showReplyForm" class="reply-form">

					<input v-model="newComment" placeholder="发表评论" class="comment-input" />
					<!-- <button  class="comment-button">发表</button> -->
					<view class="" style="display: flex;align-items: center;width: 200rpx;">
						<up-button size="large" @click="addComment" type="primary" shape="circle" text="发表"></up-button>
					</view>
				</div>
				<div class="replies">
					<CommentItem v-for="reply in comment.replies" :key="reply.id" :comment="reply" @reply="handleReply"
						@like="handleLike" @share="handleShare" />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		defineProps,
		defineEmits
	} from 'vue';

	const props = defineProps({
		comment: Object,
	});

	const emit = defineEmits(['reply', 'like', 'share']);

	const toggleReplyForm = () => {
		props.comment.showReplyForm = !props.comment.showReplyForm;
	};

	const replyToComment = () => {
		emit('reply', props.comment.id, props.comment.replyText);
		props.comment.replyText = '';
		props.comment.showReplyForm = false;
	};

	const likeComment = () => {
		emit('like', props.comment.id);
	};

	const shareComment = () => {
		emit('share', props.comment.id);
	};

	const handleReply = (commentId, replyText) => {
		emit('reply', commentId, replyText);
	};

	const handleLike = (commentId) => {
		emit('like', commentId);
	};

	const handleShare = (commentId) => {
		emit('share', commentId);
	};
</script>

<style scoped>
	.comment-card {
		background-color: #fff;
		padding: 15px;
		border-radius: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		margin-bottom: 15px;
		display: flex;
		flex-direction: column;
	}

	.comment {
		display: flex;
		flex-direction: row;
	}

	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.comment-content {
		flex: 1;
	}

	.username {
		font-weight: bold;
		color: #007aff;
		margin-bottom: 5px;
	}

	.text {
		color: #333;
	}

	.actions {
		margin-top: 10px;
	}

	.like,
	.reply,
	.share {
		color: #007aff;
		cursor: pointer;
		margin-right: 15px;
	}

	.like:hover,
	.reply:hover,
	.share:hover {
		text-decoration: underline;
	}

	.like-icon,
	.share-icon {
		width: 16px;
		height: 16px;
		margin-right: 5px;
		vertical-align: middle;
	}

	.reply-form {
		display: flex;
		margin-top: 10px;
	}

	.reply-input {
		flex-grow: 1;
		margin-right: 10px;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		font-size: 14px;
	}

	.reply-button {
		padding: 10px 20px;
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		font-size: 14px;
	}

	.reply-button:hover {
		background-color: #005bb5;
	}

	.replies {
		margin-top: 10px;
		padding-left: 20px;
		border-left: 2px solid #f0f0f0;
	}
</style>