pwfnlmjh2
/
frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

社区无敌终极版 bug后端对接再修

Browse Source
main
QMZ 2 months ago
parent d3ec7853cd
commit 4723722530
5 changed files with 244 additions and 114 deletions
Show Stats Download Patch File Download Diff File

35
src/assets/css/community/community.css
Unescape View File

@ -33,25 +33,25 @@
.communitybase
{
height: 100vh;
.communitybase {
position: relative;
height: 93.5vh;
background-image: url("../../pictures/communityback.png");
background-size: 90%;
background-size: cover; /* 适应整个屏幕 */
background-attachment: fixed; /* 背景固定 */
background-position: -600px; /* 向左移动背景图像 50px */
background-position: center; /* 可以选择让背景居中 */
z-index: -1;
background-position: center; /* 背景居中 */
z-index: 3;
overflow: hidden; /* 防止滚动时内容溢出 */
}
.touxiang
{
position: absolute;
top:50%;
top:12%;
left:5%;
border-radius: 10px;
width: 50px;
height:50px;
transform: translateY(-50%)
}
.leftinfo
{
@ -85,11 +85,13 @@
}
.familycontent
{
width: 50%;
height: 50%;
position: absolute;
bottom:12%;
left:35%;
font-size: 13px;
overflow: hidden; /* 隐藏超出部分 */
}
.Hotsearchnum{
border-radius: 50%;
@ -107,6 +109,13 @@
width: 65%;
height:100%;
z-index:1;
height: 100%; /* 占据父容器高度 */
overflow-y: auto; /* 允许垂直滚动 */
}
/* 隐藏滚动条 */
.middle::-webkit-scrollbar {
width: 0px; /* 隐藏水平滚动条 */
height: 0px; /* 隐藏垂直滚动条 */
}
.follows {
cursor: pointer;
@ -114,12 +123,12 @@
}
.follows:hover {
background-color: #d0d0d0;
background-color: #FEB2D7;
}
.follows.selected {
background-color: rgba(255,255,255,0.8);
background-color:rgba(255, 225, 240, 0.7);
font-weight: bold;
color: orchid;
}
.alldongtai:hover{
background-color: #d0d0d0;

4
src/components/CommentInput.vue
Unescape View File

@ -43,7 +43,7 @@
button {
align-self: flex-end;
padding: 8px 15px;
background-color: #007bff;
background-color: #FE4E96;
color: white;
border: none;
border-radius: 5px;
@ -51,7 +51,7 @@
}
button:hover {
background-color: #0056b3;
background-color: #FEB2D7;
}
</style>

38
src/components/PostCard.vue
Unescape View File

@ -16,12 +16,21 @@
</button>
<span>{{ timestamp }}</span>
</div>
<div v-if="isfamilystory" class="ribbon-8">
<span>
家族故事
</span>
</div>
</div>
<div class="post-content">
<p>{{ content }}</p>
<div style="display: flex;justify-content: center;">
<img v-if="imageUrl" :src="imageUrl" alt="post image" />
<img class="postimage" v-if="imageUrl" :src="imageUrl" alt="post image" />
</div>
</div>
<div class="post-footer">
@ -66,6 +75,7 @@
likeCount: Number,
commentCount: Number,
isCommentsVisible: Boolean,
isfamilystory:Boolean,
comments: Array, // 接收评论列表
},
data() {
@ -127,6 +137,31 @@
</script>
<style scoped>
.postimage{
max-width: 600px;
max-height: 600px;
width: auto; /* 保持宽高比 */
height: auto; /* 保持宽高比 */
}
.ribbon-8 {
position:absolute;
right:-2%;
padding: 2px 10px;
width: 10%;
background-color: #FE4E96;
font-size: 15px;
color: #fff;
}
.ribbon-8::before {
content: "";
position: absolute;
right: 0;
bottom: -4px;
border-top: 4px solid #FE4E96;
border-right: 4px solid transparent;
}
button {
background: none;
border: none;
@ -211,6 +246,7 @@
}
.post-header {
position: relative;
display: flex;
align-items: center;
}

25
src/views/community/Postform.vue
Unescape View File

@ -24,8 +24,9 @@
<div>
<el-upload action="#" list-type="picture" :auto-upload="false" :limit="1" :on-exceed="handleExceed"
style="position: fixed; left: 12%;display: flex; align-items: center;" >
<el-upload action="#" list-type="picture" :auto-upload="false" :limit="1" :on-exceed="handleExceed" ref="postimage"
style="position: fixed; left: 12%;display: flex; align-items: center;" @change="handleFileChange" >
<!-- @success="handleUploadSuccess" -->
<el-icon size="30px">
@ -44,8 +45,7 @@
</el-radio-group>
<div class="button-container">
<el-button type="primary" @click="submitPost" :disabled="!form.content.trim()"
@ -73,8 +73,7 @@
data() {
return {
showForm: false, // 控制表单是否显示
radio: '1',
radio4:'1',
radio: '日常动态',
form: {
content: ''
},
@ -84,6 +83,13 @@
};
},
methods: {
handleFileChange(file) {
// 当文件被选中时触发
if (file.raw) {
// 创建预览图片的URL
this.imageUrl = URL.createObjectURL(file.raw);
}
},
handleExceed()
{
this.$message.error("目前仅支持添加一张图片");
@ -104,7 +110,9 @@
return isImage;
},
handleUploadSuccess(response, file, fileList) {
this.imageUrl = URL.createObjectURL(file.raw); // 创建临时 URL 以预览图片
this.$message("创建图片"+this.imageUrl);
this.fileList = fileList;
},
handleRemove(file, fileList) {
@ -112,12 +120,14 @@
this.fileList = fileList;
},
submitPost() {
this.$refs.postimage.submit();
if (!this.form.content.trim()) {
this.$message.error('内容不能为空');
return;
}
const newPost = {
postId: Date.now(),
userid:1,
username: '用户',
avatarUrl: 'https://via.placeholder.com/50',
timestamp: new Date().toLocaleString(),
@ -126,8 +136,11 @@
likeCount: 0,
commentCount: 0,
comments: [],
isCommentsVisible: false,
isfamilystory: this.radio === '家族故事' ? true : false,
liked: false
};
this.$emit('post-submitted', newPost);
this.form.content = '';
this.imageUrl = '';

256
src/views/community/trends.vue
Unescape View File

@ -6,7 +6,7 @@
你的关注
</div>
<div class=num style="position:absolute; font-size: 14px; right:20%; top:1.5%; color: #45D4CF;">
{{myfollows.weidu}}条新动态
{{ totalWeidu}}条新动态
</div>
<div style="top:6%;position: absolute;width: 100%;">
<div class="alldongtai"
@ -23,90 +23,103 @@
<div class=followslist
style="position:absolute;display: flex;flex-direction: column;top:10%;width:100%;height: 100%;gap:2%; ">
<div v-for="(follow, index) in myfollows.list" :key="index" style="width: 100%;">
<div v-for="(follow, index) in myfollows" :key="index" style="width: 100%;">
<div class="follows"
style="display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative;height: 120%;"
style="display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative;height: 120%;gap:3%;width: 100%;"
@mouseover="hoverIndex = index" @mouseleave="hoverIndex = -1" @click="fllowsClick(follow.userid,index)"
:class="{'selected': selectedIndex === index}">
<img class="touxiang" src="../../assets/pictures/touxiang.png" style="left:20%;width: 15%; height: auto;" />
<div style="margin-left: 40px; font-weight: bold; font-size: 16px;">{{ follow.name }}</div>
<el-tag v-if="follow.weidu" effect="plain" round style="position: absolute; right:0%">
{{follow.weidu}}条新动态
</el-tag>
</div>
<hr style="width: 100%; height: 0.001px; background-color: #D8D8D8; margin-top: 1%;">
</div>
</div>
</div>
<div class="middle">
<PostForm @post-submitted="addPost" />
<PostForm @post-submitted="submitPost" />
<div class="post-list">
<!-- 使用 transition-group 来包裹 v-for 渲染的元素 -->
<transition-group name="fade" tag="div">
<div v-for="(post, index) in filteredPosts" :key="post.id" class="post-card">
<PostCard :avatarUrl="post.avatarUrl" :username="post.username" :timestamp="post.timestamp"
:content="post.content" :imageUrl="post.imageUrl" :likeCount="post.likeCount"
:commentCount="post.commentCount" :isCommentsVisible="post.isCommentsVisible" :comments="post.comments"
@updateLikeCount="updateLikeCount(index, $event)" @updateCommentCount="updateCommentCount(index, $event)"
@toggleCommentsVisibility="toggleCommentsVisibility(index)" @addComment="addComment(index, $event)" />
</div>
</transition-group>
<ul v-infinite-scroll="load" class="infinite-list" style="height:100px">
<transition-group name="fade" tag="div">
<div v-for="(post, index) in checkPosts" :key="post.id" class="post-card">
<PostCard :avatarUrl="post.avatarUrl" :username="post.username" :timestamp="post.timestamp"
:content="post.content" :imageUrl="post.imageUrl" :likeCount="post.likeCount"
:commentCount="post.commentCount" :isCommentsVisible="post.isCommentsVisible" :comments="post.comments"
:isfamilystory="post.isfamilystory" @updateLikeCount="updateLikeCount(index, $event)"
@updateCommentCount="updateCommentCount(index, $event)"
@toggleCommentsVisibility="toggleCommentsVisibility(index)" @addComment="addComment(index, $event)" />
</div>
</transition-group>
</ul>
</div>
</div>
</div>
<div class=rightheat style="display: flex;flex-direction:column;">
<div class=rightheat style="display: flex;flex-direction:column;">
<div style="position:relative; top:1%; display: flex;flex-direction:row;justify-content:center;gap:15px">
<el-icon color="red" size="30px">
<Odometer />
</el-icon>
<div style="font-weight:550; font-size: 18px;">热门动态</div>
</div>
<div class=heatlist style="margin-top:20px;display: flex;flex-direction:row;">
<div
style="position:relative; display: flex;flex-direction:column; color: white; font-weight: bold;margin-left: 20px ;gap:51px">
<div class=Hotsearchnum style="background-color:red;">1</div>
<div class=Hotsearchnum style="background-color:#ff8e51;">2</div>
<div class=Hotsearchnum style="background-color:#ffc74fd2;">3</div>
<div class=Hotsearchnum style="background-color:gray;">4</div>
<div class=Hotsearchnum style="background-color:gray;">5</div>
<div style="position:relative; top:1%; display: flex;flex-direction:row;justify-content:center;gap:15px">
<el-icon color="red" size="30px">
<Odometer />
</el-icon>
<div style="font-weight:550; font-size: 18px;">热门动态</div>
</div>
<div
style="font-size: 14px; font-weight: 500; margin-left: 30px; display: flex; flex-direction: column; gap: 17px;">
<div
style="list-style-type: none; width: 95%; height: 20%; background-color: rgba(255, 225, 240, 0.7); border-radius: 10%; position: relative;"
v-for="(Hotsearch, index) in HotsearchList"
:key="index"
@click="checkbypostid(Hotsearch.postid)">
{{ Hotsearch.content }}
{{ Hotsearch.postid }}
</div>
</div>
<div class=heatlist style="margin-top:20px;display: flex;flex-direction:row;">
<div
style="position:relative; display: flex;flex-direction:column; color: white; font-weight: bold;margin-left: 20px ;gap:51px">
<div class=Hotsearchnum style="background-color:red;">1</div>
<div class=Hotsearchnum style="background-color:#ff8e51;">2</div>
<div class=Hotsearchnum style="background-color:#ffc74fd2;">3</div>
<div class=Hotsearchnum style="background-color:gray;">4</div>
<div class=Hotsearchnum style="background-color:gray;">5</div>
</div>
<div
style="font-size: 14px; font-weight: 500; margin-left: 30px; display: flex; flex-direction: column; gap: 17px;width: 100%;">
<div
style="overflow: hidden; list-style-type: none; width: 90%; height: 20%; background-color: rgba(255, 225, 240, 0.7); border-radius: 10%; position: relative; cursor: pointer;"
v-for="(Hotsearch, index) in HotsearchList" :key="index" @click="checkbypostid(Hotsearch.postid)">
<div style=" font-weight: bold; margin-left: 10%; margin-top: 1%; ">{{ Hotsearch.username }}:</div>
<div style="left:10%;width: 70%; font-size: 12px;position: relative;">{{ Hotsearch.content}}</div>
<svg width="20" height="20" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" id="fire-station" style="position: absolute;right:7% ;top:20%;fill:red ">
<path d="M7.5 14C11.0899 14 14 11 14 7.50003C14 4.5 11.5 2 11.5 2L10.5 5.5L7.5 1L4.5 5.5L3.5 2C3.5 2 1 4.5 1 7.50003C1 11 3.91015 14 7.5 14ZM7.5 12.5C6.11929 12.5 5 11.3807 5 10C5 8.61929 7.5 5.5 7.5 5.5C7.5 5.5 10 8.61929 10 10C10 11.3807 8.88071 12.5 7.5 12.5Z"/>
</svg>
<div style="position: absolute;right:7% ;top:60%;font-size: 12px;color: red;">{{Hotsearch.hot}}</div>
</div>
</div>
</div>
<div
style="width: 100%; height: 1px; background: linear-gradient(to right, transparent, gray, transparent);margin-top: 20px">
</div>
<div style="position:relative; top:1%; display: flex;flex-direction:row;justify-content:center;gap:15px">
<el-icon color="#FEB7D9" size="25px">
<Notebook />
</el-icon>
<div style="font-weight:550; font-size: 18px;">热门家族故事</div>
</div>
<div class="familystorelist"
style="margin-top: 20px; display: flex; justify-content: center; flex-direction: column; gap: 10px;">
<div v-for="(story, index) in familystories" :key="index" class="familystore"
style="width: 95%; height: 70px; background-color: rgba(255, 225, 240, 0.7); border-radius: 10%; position: relative;">
<img class="touxiang" src="../../assets/pictures/touxiang.png" />
<div class="familytitle">{{ story.username }}</div>
<div class="familycontent">{{ story.content }}</div>
</div>
</div>
<div
style="width: 100%; height: 1px; background: linear-gradient(to right, transparent, gray, transparent);margin-top: 20px">
</div>
<div style="position:relative; top:1%; display: flex;flex-direction:row;justify-content:center;gap:15px">
<el-icon color="#FEB7D9" size="25px">
<Notebook />
</el-icon>
<div style="font-weight:550; font-size: 18px;">热门家族故事</div>
</div>
<div class="familystorelist"
style="margin-top: 20px; display: flex; justify-content: center; flex-direction: column; gap: 10px;">
<div v-for="(story, index) in familystories" :key="index" class="familystore"
style="width: 95%; height: 70px; background-color: rgba(255, 225, 240, 0.7); border-radius: 10%; position: relative;cursor: pointer;"
@click="checkbypostid(story.postid)">
<img class="touxiang" src="../../assets/pictures/touxiang.png" />
<div class="familytitle">{{ story.username }}</div>
<div class="familycontent">{{ story.content }}</div>
</div>
</div>
</div>
</div>
</div>
@ -120,26 +133,55 @@
// 其他组件选项
data() {
return {
HotsearchList: [{postid: 1,username:"麦琳",content:"啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊", },
{username:"马思唯",content:"黑马季节收官战无敌", postid: 7,},
{username:"马思唯",content:"黑马季节收官战无敌", postid: 7,}, {username:"马思唯",content:"黑马季节", postid:7},
{username:"马思唯",content:"黑马季hdsajkdhkashjd", postid:3}],
HotsearchList: [{ username: "陶喆", postid: 6, content: "啊啊哦哦诶诶啊啊",hot:520 },
{ avatarUrl: 'https://via.placeholder.com/40', username: "马思唯", content: "黑马季节收官战无敌", postid: 7, hot:220 },
{ username: "马思唯", content: "我在阿姆斯特丹当个画家虽然口袋里钱不多，就在梵高博物馆外等她从我身边路过", postid: 4, hot:200}, { username: "马思唯", content: "黑马季节", postid: 1,hot:120 },
{ username: "马思唯", content: "黑马季hdsajkdhkashjd", postid: 3 ,hot:20 }],
familystories: [
{ username: '查理一世', content: '我的父母来自于印度，后面通过自己的打拼...' },
{ username: '亨利二世', content: '我的祖父曾经参加过二战，有一次在诺曼底...' },
{ postid: 11, username: '查理一世', content: '我的父母来自于印度，后面通过自己的打拼，他们在异国他乡开创了属于自己的事业，凭借着坚韧不拔的努力和对未来的坚定信念，逐渐改善了我们的生活条件。他们不仅为我们提供了更好的教育和成长环境，还教会了我如何面对挑战、如何珍惜每一个机会。正是他们的奋斗精神和不懈努力，让我明白了无论身处何地，只有不断追求卓越、脚踏实地，才能创造属于自己的未来。' },
{ postid: 12, username: '亨利二世', content: '我的祖父曾经参加过二战，有一次在诺曼底登陆作战时，他和战友们一同经历了生死考验。那时，战火硝烟弥漫，炮声震天，敌人猛烈的抵抗让每一个前进的步伐都充满了危险。祖父总是告诉我，虽然那是一个充满恐惧与混乱的时刻，但也让他深刻体会到生命的脆弱与坚韧。有一天，他和一队士兵被派遣执行侦察任务，结果遭遇了敌军的伏击。在激烈的交火中，祖父不幸受伤，幸好有战友将他背离险境。在几个月的疗养期里，他经历了痛苦和孤独，但也在那段时间里，祖父重新审视了自己的人生。他常说，那次经历改变了他的一生，让他学会了珍惜每一天，也更懂得什么是真正的勇气与坚守。尽管战争带来了无尽的创伤与损失，但也让他意识到，战争后的重建和和平更加宝贵。回到家乡后，祖父再也没有谈过战争的痛苦，而是投入到了对家庭和社会的贡献中，用余生去弥补那些无法言喻的伤痕。他曾说，虽然战争让人失去了太多，但它也教会了他如何去爱，如何去珍惜每一段相伴的时光。' },
{ username: '查理九世', content: '在我的18岁生日上，妈妈告诉我祖母其实是...' },
{ username: '伊丽莎白', content: '在我的18岁生日上，妈妈告诉我祖母其实是...' },
{ username: '莎士比亚', content: '在我的18岁生日上，妈妈告诉我祖母其实是...' },
],
myfollows: { weidu: 7, list: [{ name: '乔一鱼', userid: 1 }, { name: '邓紫棋', userid: 2 }, { name: '马思唯', userid: 3 }, { name: '陶喆', userid: 5 }] },
myfollows: [{ name: '乔一鱼', userid: 1, weidu: 1 }, { name: '邓紫棋', userid: 2, weidu: 2 }, { name: '马思唯', userid: 3, weidu: 0 }, { name: '陶喆', userid: 5, weidu: 0 }],
hoverIndex: -1,
selectedIndex: -1,
selecteduserid: 0,
selectedbyuserid:false,
selectedbypostid:false,
selectedpostid: 0,
selectedbyuserid: false,
selectedbypostid: false,
checkPostsindex:0,
checkPosts:[ ],
posts: [
{
userid: 11,
postid: 11,
avatarUrl: 'https://via.placeholder.com/40',
username: '查理一世',
timestamp: '1小时前',
isfamilystory: true,
content: '我的父母来自于印度，后面通过自己的打拼，他们在异国他乡开创了属于自己的事业，凭借着坚韧不拔的努力和对未来的坚定信念，逐渐改善了我们的生活条件。他们不仅为我们提供了更好的教育和成长环境，还教会了我如何面对挑战、如何珍惜每一个机会。正是他们的奋斗精神和不懈努力，让我明白了无论身处何地，只有不断追求卓越、脚踏实地，才能创造属于自己的未来。',
imageUrl: 'https://via.placeholder.com/400x200',
likeCount: 24,
commentCount: 6,
isCommentsVisible: false,
comments: [] // 存储评论
},
{
userid: 12,
postid: 12,
avatarUrl: 'https://via.placeholder.com/40',
username: '亨利二世',
isfamilystory: true,
timestamp: '1小时前',
content: '我的祖父曾经参加过二战，有一次在诺曼底登陆作战时，他和战友们一同经历了生死考验。那时，战火硝烟弥漫，炮声震天，敌人猛烈的抵抗让每一个前进的步伐都充满了危险。祖父总是告诉我，虽然那是一个充满恐惧与混乱的时刻，但也让他深刻体会到生命的脆弱与坚韧。有一天，他和一队士兵被派遣执行侦察任务，结果遭遇了敌军的伏击。在激烈的交火中，祖父不幸受伤，幸好有战友将他背离险境。在几个月的疗养期里，他经历了痛苦和孤独，但也在那段时间里，祖父重新审视了自己的人生。他常说，那次经历改变了他的一生，让他学会了珍惜每一天，也更懂得什么是真正的勇气与坚守。尽管战争带来了无尽的创伤与损失，但也让他意识到，战争后的重建和和平更加宝贵。回到家乡后，祖父再也没有谈过战争的痛苦，而是投入到了对家庭和社会的贡献中，用余生去弥补那些无法言喻的伤痕。他曾说，虽然战争让人失去了太多，但它也教会了他如何去爱，如何去珍惜每一段相伴的时光。',
imageUrl: 'https://via.placeholder.com/400x200',
likeCount: 24,
commentCount: 6,
isCommentsVisible: false,
comments: [] // 存储评论
},
{
userid: 1,
postid: 1,
@ -151,6 +193,7 @@
likeCount: 24,
commentCount: 6,
isCommentsVisible: false,
isfamilystory: false,
comments: [] // 存储评论
},
{
@ -164,6 +207,7 @@
likeCount: 36,
commentCount: 12,
isCommentsVisible: false,
isfamilystory: false,
comments: [] // 存储评论
},
@ -178,6 +222,7 @@
likeCount: 24,
commentCount: 6,
isCommentsVisible: false,
isfamilystory: false,
comments: [] // 存储评论
},
{
@ -191,6 +236,7 @@
likeCount: 24,
commentCount: 6,
isCommentsVisible: false,
isfamilystory: false,
comments: [] // 存储评论
},
{
@ -204,6 +250,7 @@
likeCount: 24,
commentCount: 6,
isCommentsVisible: false,
isfamilystory: false,
comments: [] // 存储评论
},
{
@ -217,6 +264,7 @@
likeCount: 24,
commentCount: 6,
isCommentsVisible: false,
isfamilystory: false,
comments: [] // 存储评论
},
@ -231,65 +279,89 @@
likeCount: 24,
commentCount: 6,
isCommentsVisible: false,
isfamilystory: false,
comments: [] // 存储评论
},
]
};
},
computed: {
totalWeidu() {
// 使用reduce方法来遍历数组并计算总和
return this.myfollows.reduce((sum, item) => sum + item.weidu, 0);
},
// 计算属性：过滤帖子数据，依据 showUser3Posts 的值
filteredPosts() {
if (this.selectedbyuserid) {
return this.posts.filter(post => post.userid === this.selecteduserid);
}
else if(this.selectedbypostid){
if (this.selectedbypostid) {
return this.posts.filter(post => post.postid === this.selectedpostid);
}
else {
return this.posts;
}
else
return this.posts;
}
},
methods: {
checkbypostid(postid){
// 打印出来检查
this.selectedbyuserid =false;
submitPost(newpost){
this.checkPosts = [newpost, ...this.checkPosts];
},
load(){
const filteredPostsList = this.posts;
this.$message("帖子加载");
const postsToAdd = filteredPostsList.slice(this.checkPostsindex, this.checkPostsindex + 1);
this.checkPostsindex+=1;
// 将这 2 个帖子加入到 checkPosts 数组的末尾
this.checkPosts.push(...postsToAdd);
},
checkbypostid(postid) {
this.selectedbyuserid = false;
this.selectedbypostid = true;
console.log('点击事件触发，postid:', this.selectedpostid);
this.selectedpostid=postid;
this.selectedpostid = postid;
},
alldongtai() {
this.selectedbyuserid = false;
this.selectedbyuserid =false;
this.selectedbypostid = false;
this.selectedIndex = -1;
this.$message("查看全部动态");
},
fllowsClick(userid, index) {
this.$message("查看userid:" + userid);
this.myfollows[index].weidu = 0;
this.selectedbyuserid = true;
this.selectedbypostid = false;
this.selectedIndex = index; // 点击后设置选中的项
this.selecteduserid = userid;
},
updateLikeCount(index, newLikeCount) {
this.filteredPosts[index].likeCount = newLikeCount;
this.checkPosts[index].likeCount = newLikeCount;
},
updateCommentCount(index, newCommentCount) {
this.filteredPosts[index].commentCount = newCommentCount;
this.checkPosts[index].commentCount = newCommentCount;
},
toggleCommentsVisibility(index) {
this.$message("haha" + index);
this.filteredPosts[index].isCommentsVisible = !this.filteredPosts[index].isCommentsVisible;
this.$message("评论区展开" + index);
this.checkPosts[index].isCommentsVisible = !this.checkPosts[index].isCommentsVisible;
},
addComment(index, commentText) {
this.posts[index].comments.push({
this.checkPosts[index].comments.push({
username: '匿名用户',
text: commentText
});
this.posts[index].commentCount += 1;
this.checkPosts[index].commentCount += 1;
}
}
}

Write Preview
Loading…
Cancel
Save