146 lines
3.3 KiB
Vue
146 lines
3.3 KiB
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>
|