gree_leran/pages/discuss/discuss.vue

<template>
  <view class="container">
    <view class="header">{{ post.title }}</view>
    <view class="content">{{ post.content }}</view>
    <view class="comments">
      <CommentItem v-for="comment in comments" :key="comment.id" :comment="comment" @reply="handleReply"/>
    </view>
    <view class="add-comment">
	
      <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>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import CommentItem from './CommentItem.vue';

const post = ref({
  title: "这是一个讨论帖子",
  content: "这是帖子的内容，大家可以在评论区讨论。",
});

const comments = ref([
  { id: 1, username: "Alice", avatar: "https://via.placeholder.com/50", text: "非常好的帖子！", replies: [], showReplyForm: false, replyText: '' },
  { id: 2, username: "Bob", avatar: "https://via.placeholder.com/50", text: "同意楼上的观点！", replies: [], showReplyForm: false, replyText: '' },
]);

const newComment = ref("");

const addComment = () => {
  const newId = comments.value.length + 1;
  comments.value.push({
    id: newId,
    username: "匿名用户",
    avatar: "https://via.placeholder.com/50",
    text: newComment.value,
    replies: [],
    showReplyForm: false,
    replyText: '',
  });
  newComment.value = "";
};

const handleReply = (commentId, replyText) => {
  const comment = findCommentById(comments.value, commentId);
  if (comment) {
    const newReplyId = comment.replies.length + 1;
    comment.replies.push({
      id: newReplyId,
      username: "匿名用户",
      avatar: "https://via.placeholder.com/50",
      text: replyText,
      replies: [],
      showReplyForm: false,
      replyText: '',
    });
  }
};

const findCommentById = (comments, id) => {
  for (const comment of comments) {
    if (comment.id === id) {
      return comment;
    }
    const reply = findCommentById(comment.replies, id);
    if (reply) {
      return reply;
    }
  }
  return null;
};
</script>

<style scoped>
/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); */

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  padding: 20px;
  font-family: 'Roboto', sans-serif;
  background-color: #f9f9f9;
  border-radius: 10px;
  
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
  border-bottom: 2px solid #007aff;
  padding-bottom: 10px;
}

.content {
  margin-top: 20px;
  line-height: 1.6;
  color: #666;
}

.comments {
  margin-top: 20px;
  width: 100%;
}

.add-comment {
  margin-top: 20px;
  display: flex;
  width: 100%;
  align-items: center;
}

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

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

.comment-button:hover {
  background-color: #005bb5;
}
</style>