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

4
src/components/CommentInput.vue
Unescape View File

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

38
src/components/PostCard.vue
Unescape View File

@ -16,12 +16,21 @@
</button> </button>
<span>{{ timestamp }}</span> <span>{{ timestamp }}</span>
</div>
<div v-if="isfamilystory" class="ribbon-8">
<span>
家族故事
</span>
</div> </div>
</div> </div>
<div class="post-content"> <div class="post-content">
<p>{{ content }}</p> <p>{{ content }}</p>
<div style="display: flex;justify-content: center;"> <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> </div>
<div class="post-footer"> <div class="post-footer">
@ -66,6 +75,7 @@
likeCount: Number, likeCount: Number,
commentCount: Number, commentCount: Number,
isCommentsVisible: Boolean, isCommentsVisible: Boolean,
isfamilystory:Boolean,
comments: Array, // 接收评论列表 comments: Array, // 接收评论列表
}, },
data() { data() {
@ -127,6 +137,31 @@
</script> </script>
<style scoped> <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 { button {
background: none; background: none;
border: none; border: none;
@ -211,6 +246,7 @@
} }
.post-header { .post-header {
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
} }

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

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

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

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

Write Preview
Loading…
Cancel
Save