gree_leran/pages/discuss/discuss.vue

146 lines
3.3 KiB
Vue
Raw Normal View History

2024-06-16 15:32:15 +00:00
<template>
<view class="container">
<view class="header">{{ post.title }}</view>
<view class="content">{{ post.content }}</view>
<view class="comments">
2024-06-16 23:47:03 +00:00
<CommentItem v-for="comment in comments" :key="comment.id" :comment="comment" @reply="handleReply"/>
2024-06-16 15:32:15 +00:00
</view>
<view class="add-comment">
2024-06-16 23:47:03 +00:00
<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>
2024-06-16 15:32:15 +00:00
</view>
</view>
</template>
<script setup>
2024-06-16 23:47:03 +00:00
import { ref } from 'vue';
import CommentItem from './CommentItem.vue';
2024-06-16 15:32:15 +00:00
2024-06-16 23:47:03 +00:00
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;
2024-06-16 15:32:15 +00:00
};
</script>
<style scoped>
2024-06-16 23:47:03 +00:00
/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); */
2024-06-16 15:32:15 +00:00
.container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
2024-06-16 23:47:03 +00:00
padding: 20px;
font-family: 'Roboto', sans-serif;
background-color: #f9f9f9;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
2024-06-16 15:32:15 +00:00
}
.header {
2024-06-16 23:47:03 +00:00
font-size: 28px;
2024-06-16 15:32:15 +00:00
font-weight: bold;
2024-06-16 23:47:03 +00:00
color: #333;
text-align: center;
margin-bottom: 20px;
border-bottom: 2px solid #007aff;
padding-bottom: 10px;
2024-06-16 15:32:15 +00:00
}
.content {
margin-top: 20px;
2024-06-16 23:47:03 +00:00
line-height: 1.6;
color: #666;
2024-06-16 15:32:15 +00:00
}
.comments {
margin-top: 20px;
width: 100%;
}
.add-comment {
margin-top: 20px;
display: flex;
2024-06-16 23:47:03 +00:00
width: 100%;
align-items: center;
2024-06-16 15:32:15 +00:00
}
2024-06-16 23:47:03 +00:00
.comment-input {
2024-06-16 15:32:15 +00:00
flex-grow: 1;
margin-right: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
2024-06-16 23:47:03 +00:00
font-size: 14px;
2024-06-16 15:32:15 +00:00
}
2024-06-16 23:47:03 +00:00
.comment-button {
padding: 10px 20px;
2024-06-16 15:32:15 +00:00
background-color: #007aff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
2024-06-16 23:47:03 +00:00
font-size: 14px;
}
.comment-button:hover {
background-color: #005bb5;
2024-06-16 15:32:15 +00:00
}
</style>