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

完善社区动态功能2.0

Browse Source
pull/1/head
QMZ 2 months ago
parent e6ff388a9e
commit 7680f261cc
4 changed files with 686 additions and 182 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,4 +1,38 @@
/* 设置进入和离开的过渡效果 */
.post-list .fade-leave-active {
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.post-list .fade-enter-active {
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
/* 元素进入时，缩放并渐变 */
.post-list .fade-leave-to /* .fade-leave-active in Vue 2.x */ {
opacity: 0;
transform: scale(0.5); /* 初始状态为缩小 */
}
.post-list .fade-enter{
opacity: 0;
transform: scale(0.5); /* 初始状态为缩小 */
}
/* 元素进入时恢复到原尺寸 */
.post-list .fade-enter-to {
opacity: 1;
transform: scale(1); /* 变大恢复正常尺寸 */
}
/* 元素离开时，继续保持缩小状态 */
.post-list .fade-leave-to {
opacity: 0;
transform: scale(0.5); /* 离开时缩小 */
}
.communitybase
{
height: 100vh;
@ -22,10 +56,10 @@
.leftinfo
{
background-color: rgba(255,255,255,0.8);
width: 15%;
width: 14%;
position: fixed;
left:0%;
border: 3px solid orchid;
/* border: 3px solid orchid; */
height:100%;
}
@ -36,7 +70,7 @@
position: fixed;
right:0%;
width: 15%;
border: 3px solid orchid;
/* border: 3px solid orchid; */
height:100%;
}
@ -71,10 +105,26 @@
left:50%;
transform: translateX(-50%);
width: 65%;
border: 3px solid orchid;
height:100%;
z-index:1;
}
.follows {
cursor: pointer;
transition: background-color 0.3s ease;
}
.follows:hover {
background-color: #d0d0d0;
}
.follows.selected {
background-color: rgba(255,255,255,0.8);
font-weight: bold;
color: orchid;
}
.alldongtai:hover{
background-color: #d0d0d0;
cursor: pointer;
}
.post-list {
}

227
src/components/PostCard.vue
Unescape View File

@ -1,49 +1,60 @@
<template>
<div class="post-card">
<div class="post-header">
<img :src="avatarUrl" alt="avatar" class="avatar" />
<div class="user-info">
<strong>{{ username }}</strong>
<span>{{ timestamp }}</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" />
<div class="post-card">
<div class="post-header">
<img :src="avatarUrl" alt="avatar" class="avatar" />
<div class="user-info">
<strong>{{ username }}</strong>
<button class="followsbutto followsbuttonani" @click="followsbutton" :class="{ active: followsbuttonActive }">
<div v-if="followsbuttonActive">
你关注了他
</div>
<div v-else>
关注
</div>
</div>
<div class="post-footer">
<button @click="increaseLikeCount" :class="{'liked': isLiked}">
<span v-if="isLiked">❤️</span>
<span v-else>🤍</span>
{{ likeCount }}
</button>
<button @click="toggleCommentsVisibility">
{{ isCommentsVisible ? '隐藏评论' : '查看评论' }}
💬
{{ commentCount }}
</button>
<span>{{ timestamp }}</span>
</div>
<!-- 评论区的过渡动画 -->
<transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
<div v-if="isCommentsVisible" class="comments-section">
<div v-for="(comment, index) in comments" :key="index" class="comment">
<p><strong>{{ comment.username }}:</strong> {{ comment.text }}</p>
</div>
<!-- 发布评论 -->
<CommentInput @submitComment="addComment" />
</div>
</transition>
</div>
</template>
<script>
<div class="post-content">
<p>{{ content }}</p>
<div style="display: flex;justify-content: center;">
<img v-if="imageUrl" :src="imageUrl" alt="post image" />
</div>
</div>
<div class="post-footer">
<button @click="increaseLikeCount" :class="{'liked': isLiked}">
<span v-if="isLiked">❤️</span>
<span v-else>🤍</span>
{{ likeCount }}
</button>
<button @click="toggleCommentsVisibility">
{{ isCommentsVisible ? '隐藏评论' : '查看评论' }}
💬
{{ commentCount }}
</button>
</div>
<!-- 评论区的过渡动画 -->
<transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
<div v-if="isCommentsVisible" class="comments-section">
<div v-for="(comment, index) in comments" :key="index" class="comment">
<p><strong>{{ comment.username }}:</strong> {{ comment.text }}</p>
</div>
<!-- 发布评论 -->
<CommentInput @submitComment="addComment" />
</div>
</transition>
</div>
</template>
<script>
import CommentInput from './CommentInput.vue';
export default {
components: { CommentInput },
props: {
@ -57,7 +68,33 @@
isCommentsVisible: Boolean,
comments: Array, // 接收评论列表
},
data() {
return {
isActive: false,
isLiked: false,
isClicked: false,
followsbuttonActive: false
};
},
methods: {
followsbutton() {
// 设置为 active，触发动画
this.followsbuttonActive = !this.followsbuttonActive;
},
triggerAnimation() {
this.isActive = true; // 添加动画类
// 动画完成后移除 active 类，恢复到原始状态
setTimeout(() => {
this.isActive = false; // 移除动画类
}, 300); // 300ms 后移除，确保与动画时长一致
},
handleClick() {
this.$message("aaa");
this.isClicked = true;
},
increaseLikeCount() {
this.$emit('updateLikeCount', this.likeCount + 1);
this.isLiked = !this.isLiked;
@ -87,10 +124,10 @@
}
}
};
</script>
<style scoped>
button {
</script>
<style scoped>
button {
background: none;
border: none;
font-size: 1rem;
@ -99,24 +136,70 @@ button {
padding: 0;
}
/* 点赞后的红色样式 */
@keyframes scaleAnimation {
0% {
transform: scale(1);
.followsbutto {
margin-left: 10px;
margin-right: 10px;
position: relative;
width: 70px;
height: 30px;
line-height: 30px;
/* 修改 line-height 为与高度一致 */
border: none;
border-radius: 30px;
background: #FE4E96;
color: #fff;
text-align: center;
cursor: pointer;
overflow: hidden;
/* 确保动画效果不超出按钮 */
font-size: 14px;
/* 可根据需要调整字体大小 */
}
.followsbuttonani {
z-index: 1;
}
50% {
transform: scale(1.2);
.followsbuttonani::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: scaleX(0);
transform-origin: 50%;
background: #FEB2D7;
border-radius: 5px;
transition: transform .3s ease-out;
}
100% {
transform: scale(1);
.followsbuttonani.active::before {
transform: scaleX(1);
}
}
/* .liked 类，应用动画 */
.liked {
color: red;
animation: scaleAnimation 0.5s ease-in-out;
}
/* 点赞后的红色样式 */
@keyframes scaleAnimation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
/* .liked 类，应用动画 */
.liked {
color: red;
animation: scaleAnimation 0.5s ease-in-out;
}
.post-card {
opacity: 0.95;
@ -126,48 +209,50 @@ button {
border-radius: 8px;
background-color: #fff;
}
.post-header {
display: flex;
align-items: center;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
.user-info {
font-size: 14px;
}
.post-footer {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.comments-section {
margin-top: 15px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 8px;
overflow: hidden; /* 确保在 max-height 动画过程中隐藏溢出的内容 */
overflow: hidden;
/* 确保在 max-height 动画过程中隐藏溢出的内容 */
}
.comment {
margin-bottom: 10px;
}
/* 过渡效果 */
.fade-enter-active, .fade-leave-active {
.fade-enter-active,
.fade-leave-active {
transition: max-height 0.3s ease-in-out;
}
.fade-enter, .fade-leave-to {
.fade-enter,
.fade-leave-to {
max-height: 0;
}
</style>
</style>

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

@ -0,0 +1,238 @@
<template>
<div class="animate-card animate-card-50" :class="{ 'active': showForm }" :style="{ height: componentHeight }"
style="width: 100%;">
<!-- 下拉按钮 -->
<el-button class="animate-card__layer" type="primary" @click="toggleForm">
<el-icon v-if="showForm">
<ArrowUp />
</el-icon>
<div v-else>
<el-icon>
<ArrowDown />
</el-icon>
发帖
</div>
</el-button>
<!-- 表单部分，使用 v-show 控制显示 -->
<div class="animate-card__sublayer" style="align-items: center; width: 100%;">
<el-form v-show="showForm" :model="form" ref="formRef" class="form-container">
<el-form-item label="内容" prop="content" :rules="[{ required: true, message: '请输入内容', trigger: 'blur' }]"
style="width: 80%;">
<el-input v-model="form.content" type="textarea" placeholder="有什么新鲜事..." rows=4 />
</el-form-item>
<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-icon size="30px">
<Picture />
</el-icon>图片
<br>
</el-upload>
</div>
<el-radio-group v-model="radio" fill="#FE4E96" size="small" >
<el-radio-button label="日常动态" ></el-radio-button>
<el-radio-button label="家族故事" ></el-radio-button>
</el-radio-group>
<div class="button-container">
<el-button type="primary" @click="submitPost" :disabled="!form.content.trim()"
style="position:fixed; right:11% ;background-color:#FE4E96">发布</el-button>
</div>
</el-form>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'PostForm',
components: {
},
data() {
return {
showForm: false, // 控制表单是否显示
radio: '1',
radio4:'1',
form: {
content: ''
},
fileList: [],
imageUrl: '',
componentHeight: '3%'
};
},
methods: {
handleExceed()
{
this.$message.error("目前仅支持添加一张图片");
},
// 切换表单显示/隐藏
toggleForm() {
this.showForm = !this.showForm;
if (this.componentHeight == '3%')
this.componentHeight = '25%';
else
this.componentHeight = '3%';
},
beforeUpload(file) {
const isImage = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isImage) {
this.$message.error('只能上传JPG/PNG格式的图片');
}
return isImage;
},
handleUploadSuccess(response, file, fileList) {
this.imageUrl = URL.createObjectURL(file.raw); // 创建临时 URL 以预览图片
this.fileList = fileList;
},
handleRemove(file, fileList) {
this.imageUrl = ''; // 删除时清空图片预览
this.fileList = fileList;
},
submitPost() {
if (!this.form.content.trim()) {
this.$message.error('内容不能为空');
return;
}
const newPost = {
postId: Date.now(),
username: '用户',
avatarUrl: 'https://via.placeholder.com/50',
timestamp: new Date().toLocaleString(),
content: this.form.content,
imageUrl: this.imageUrl,
likeCount: 0,
commentCount: 0,
comments: [],
liked: false
};
this.$emit('post-submitted', newPost);
this.form.content = '';
this.imageUrl = '';
this.fileList = [];
},
}
});
</script>
<style scoped>
/* 覆盖选中时的颜色 */
.el-radio.is-checked .el-radio__inner {
border-color: #FE4E96 !important;
}
.el-radio.is-checked .el-radio__label {
color: #FE4E96 !important;
}
.el-radio .el-radio__inner {
border-color: #FE4E96 !important;
}
.el-radio .el-radio__label {
color: #FE4E96 !important;
}
.form-container {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.el-upload-list__item-thumbnail {
width: 60px;
/* 修改为你想要的缩略图宽度 */
height: 60px;
/* 修改为你想要的缩略图高度 */
object-fit: cover;
/* 保证缩略图不会变形 */
}
.el-form-item {
margin-bottom: 15px;
}
.upload-demo {
margin-top: 10px;
}
.animate-card {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.animate-card-50 {
display: flex;
height: 10%;
justify-content: center;
/* 横向居中 */
transition: height 0.7s ease-in-out;
}
.animate-card__layer {
height: 5%;
width: 5%;
background-color: #FE4E96;
border: none;
}
.animate-card__layer:hover {
transform: translateY(50%);
background-color: #FEB2D7;
}
.animate-card-50 .animate-card__sublayer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: translateY(-100%);
text-align: center;
background-color: #fff;
color: #000;
opacity: 0;
}
/* 点击后触发动画 */
.animate-card-50.active .animate-card__layer {
position: relative;
transform: scale(0.9) translateY(800%);
border: 6px solid rgba(255, 255, 255, 0.9);
z-index: 9;
}
.animate-card-50.active .animate-card__sublayer {
transform: translateY(0px);
opacity: 1;
}
</style>

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

@ -1,122 +1,150 @@
<template>
<div class=communitybase>
<div class=leftinfo>
<div class=focus style="position: absolute; font-weight: bold; font-size: 18px; left:8%;top:1%">
<div class=focus style="position: absolute; font-weight: bold; font-size: 18px; left:8%;top:1%">
你的关注
</div>
<div class=num style="position:absolute; font-size: 14px; right:20%; top:1.5%; color: #45D4CF;">
{{myfollows.weidu}}条新动态
</div>
<div style="top:6%;position: absolute;width: 100%;">
<div class="alldongtai"
style="display: flex; flex-direction: row;justify-content:center; align-items: center;position: relative;"
@click="alldongtai">
<el-icon color="#45D4CF" size="30px">
<Grid />
</el-icon>
<div style="margin-left: 40px; font-weight: bold; font-size: 16px;">全部动态</div>
</div>
<div class=num style="position:absolute; font-size: 14px; right:20%; top:1.5%; color: #45D4CF;">
{{myfollows.weidu}}条新动态
</div>
<div class=followslist style="position:absolute;display: flex;flex-direction: column;top:7%;width:100%;gap:7%">
<div>
<div class= "alldongtai" style="display: flex; flex-direction: row;justify-content:center; position: relative; align-items: center;">
<el-icon color="#45D4CF" size="30px"> <Grid /></el-icon>
<div style="margin-left: 40px; font-weight: bold; font-size: 16px;">全部动态</div>
</div>
<hr style="width: 100%; height: 0.001px; background-color: #D8D8D8;margin-top: 3%;">
</div>
<div v-for="(follow, index) in myfollows.list" :key="index" style="margin-top: 8%;">
<div class="follows" style="display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative;width: 100%;">
<img class="touxiang" src="../../assets/pictures/touxiang.png" style="width: 18%; height: auto;" />
<div style="margin-left: 40px; font-weight: bold; font-size: 16px;">{{ follow.name }}</div>
</div>
<hr style="width: 100%; height: 0.001px; background-color: #D8D8D8; margin-top: 5%;">
</div>
</div>
</div>
<div class=middle>
<div class="post-list">
<div
v-for="(post, index) in posts"
:key="index"
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>
<hr style="width: 100%; height: 0.001px; background-color: #D8D8D8;margin-top: 1%;">
</div>
<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 class="follows"
style="display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative;height: 120%;"
@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>
</div>
</div>
<div class=rightheat style="display: flex;flex-direction:column;">
<hr style="width: 100%; height: 0.001px; background-color: #D8D8D8; margin-top: 1%;">
</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 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:11px">
<div class=Hotsearchnum style="background-color:red;">1</div>
<div class=Hotsearchnum style="background-color:#FF7E38;">2</div>
<div class=Hotsearchnum style="background-color:#FFC74F;">3</div>
<div class=Hotsearchnum style="background-color:gray;">4</div>
<div class=Hotsearchnum style="background-color:gray;">5</div>
<div class=Hotsearchnum style="background-color:gray;">6</div>
<div class=Hotsearchnum style="background-color:gray;">7</div>
</div>
<div style=" font-size: 14px;font-weight:500;margin-left: 30px;display: flex;flex-direction:column;gap:17px">
<li style="list-style-type: none;" v-for="(item, index) in HotsearchList" :key="index">{{ item }}</li>
</div>
</div>
<div class="middle">
<PostForm @post-submitted="addPost" />
<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>
</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=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>
<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.title }}</div>
<div class="familycontent">{{ story.content }}</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>
<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>
</div>
</template>
<script>
import PostCard from '../../components/PostCard.vue';
export default {
name: 'CommunityIndex', // 添加组件名称
components: { PostCard },
// 其他组件选项
data() {
return {
isLiked: false,
HotsearchList: ["麦琳爱吃烧鸡","马思唯收官战","国足绝杀","再见爱人","杨子黄圣依","黄磊的豆角","邪恶栀子花计划"],
familystories: [
{ title: '我是怎么起家的', content: '我的父母来自于印度，后面通过自己的打拼...' },
{ title: '我的祖父', content: '我的祖父曾经参加过二战，有一次在诺曼底...' },
{ title: '我竟然是皇室成员！', content: '在我的18岁生日上，妈妈告诉我祖母其实是...' },
import PostCard from '../../components/PostCard.vue';
import PostForm from './Postform.vue';
export default {
name: 'CommunityIndex', // 添加组件名称
components: { PostCard, PostForm },
// 其他组件选项
data() {
return {
HotsearchList: [{postid: 1,username:"麦琳",content:"啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊", },
{username:"马思唯",content:"黑马季节收官战无敌", postid: 7,},
{username:"马思唯",content:"黑马季节收官战无敌", postid: 7,}, {username:"马思唯",content:"黑马季节", postid:7},
{username:"马思唯",content:"黑马季hdsajkdhkashjd", postid:3}],
familystories: [
{ username: '查理一世', content: '我的父母来自于印度，后面通过自己的打拼...' },
{ username: '亨利二世', content: '我的祖父曾经参加过二战，有一次在诺曼底...' },
{ username: '查理九世', content: '在我的18岁生日上，妈妈告诉我祖母其实是...' },
{ username: '伊丽莎白', content: '在我的18岁生日上，妈妈告诉我祖母其实是...' },
{ username: '莎士比亚', content: '在我的18岁生日上，妈妈告诉我祖母其实是...' },
],
myfollows:{weidu:7,list:[{name:'乔一鱼'},{name:'邓紫棋'},{name:'马思唯'},{name:'陶喆'}]},
posts: [
],
myfollows: { weidu: 7, list: [{ name: '乔一鱼', userid: 1 }, { name: '邓紫棋', userid: 2 }, { name: '马思唯', userid: 3 }, { name: '陶喆', userid: 5 }] },
hoverIndex: -1,
selectedIndex: -1,
selecteduserid: 0,
selectedbyuserid:false,
selectedbypostid:false,
posts: [
{
userid: 1,
postid: 1,
avatarUrl: 'https://via.placeholder.com/40',
username: '小明',
username: '乔一鱼',
timestamp: '1小时前',
content: '今天的天气真好，适合出去玩！',
imageUrl: 'https://via.placeholder.com/400x200',
@ -126,6 +154,8 @@ export default {
comments: [] // 存储评论
},
{
userid: 2,
postid: 2,
avatarUrl: 'https://via.placeholder.com/40',
username: '小红',
timestamp: '2小时前',
@ -136,18 +166,119 @@ export default {
isCommentsVisible: false,
comments: [] // 存储评论
},
{
userid: 3,
postid: 3,
avatarUrl: 'https://via.placeholder.com/40',
username: '马思唯',
timestamp: '1小时前',
content: '敬请期待我的新专辑《乐透人生》',
imageUrl: 'https://via.placeholder.com/400x200',
likeCount: 24,
commentCount: 6,
isCommentsVisible: false,
comments: [] // 存储评论
},
{
userid: 3,
postid: 4,
avatarUrl: 'https://via.placeholder.com/40',
username: '马思唯',
timestamp: '1小时前',
content: '我在阿姆斯特丹当个画家虽然口袋里钱不多，就在梵高博物馆外等她从我身边路过',
imageUrl: 'https://via.placeholder.com/400x200',
likeCount: 24,
commentCount: 6,
isCommentsVisible: false,
comments: [] // 存储评论
},
{
userid: 4,
postid: 5,
avatarUrl: 'https://via.placeholder.com/40',
username: '邓紫棋',
timestamp: '1小时前',
content: '诶呀！！！！！！！！',
imageUrl: 'https://via.placeholder.com/400x200',
likeCount: 24,
commentCount: 6,
isCommentsVisible: false,
comments: [] // 存储评论
},
{
userid: 5,
postid: 6,
avatarUrl: 'https://via.placeholder.com/40',
username: '陶喆',
timestamp: '1小时前',
content: '啊啊哦哦诶诶啊啊',
imageUrl: 'https://via.placeholder.com/400x200',
likeCount: 24,
commentCount: 6,
isCommentsVisible: false,
comments: [] // 存储评论
},
{
userid: 3,
postid: 7,
avatarUrl: 'https://via.placeholder.com/40',
username: '马思唯',
timestamp: '1小时前',
content: '黑马季节收官战无敌',
imageUrl: 'https://via.placeholder.com/400x200',
likeCount: 24,
commentCount: 6,
isCommentsVisible: false,
comments: [] // 存储评论
},
]
};
},
methods: {
};
},
computed: {
// 计算属性：过滤帖子数据，依据 showUser3Posts 的值
filteredPosts() {
if (this.selectedbyuserid) {
return this.posts.filter(post => post.userid === this.selecteduserid);
}
else if(this.selectedbypostid){
return this.posts.filter(post => post.postid === this.selectedpostid);
}
return this.posts;
}
},
methods: {
checkbypostid(postid){
// 打印出来检查
this.selectedbyuserid =false;
this.selectedbypostid = true;
console.log('点击事件触发，postid:', this.selectedpostid);
this.selectedpostid=postid;
},
alldongtai() {
this.selectedbyuserid = true;
this.selecteduserid = 0;
this.selectedIndex = -1;
this.$message("查看全部动态");
},
fllowsClick(userid, index) {
this.$message("查看userid:" + userid);
this.selectedbyuserid = true;
this.selectedIndex = index; // 点击后设置选中的项
this.selecteduserid = userid;
},
updateLikeCount(index, newLikeCount) {
this.posts[index].likeCount = newLikeCount;
this.filteredPosts[index].likeCount = newLikeCount;
},
updateCommentCount(index, newCommentCount) {
this.posts[index].commentCount = newCommentCount;
this.filteredPosts[index].commentCount = newCommentCount;
},
toggleCommentsVisibility(index) {
this.posts[index].isCommentsVisible = !this.posts[index].isCommentsVisible;
this.$message("haha" + index);
this.filteredPosts[index].isCommentsVisible = !this.filteredPosts[index].isCommentsVisible;
},
addComment(index, commentText) {
this.posts[index].comments.push({
@ -157,7 +288,7 @@ export default {
this.posts[index].commentCount += 1;
}
}
}
}
</script>
<style scoped>

Write Preview
Loading…
Cancel
Save