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

个人空间页动态部分对接完成

Browse Source
main
helloworld180 2 months ago
parent 6fed211c26
commit 32da9c72d4
2 changed files with 301 additions and 240 deletions
Show Stats Download Patch File Download Diff File

313
src/views/space/space.vue
Unescape View File

@ -63,22 +63,56 @@
<button @click="privateChat">私聊</button>
</div>
</div>
<div>
<spacePost></spacePost>
</div>
<div class="post-container">
<div class="post" v-for="post in posts" :key="post.id">
<div class="post-header">
<img :src="post.avatarurl" alt="" />
<div class="post-info">
<h2>{{ post.name }}</h2>
<h3>{{ post.date }}</h3>
<p>{{ post.text }}</p>
</div>
</div>
<div class="post-img" v-if="post.postImageUrl">
<img :src="post.postImageUrl" alt="" />
</div>
<div class="post-footer">
<div class="reactions">
<div class="Like">
<span @click="handleLike(post)" :class="{'liked': post.isLiked}">
<span v-if="post.isLiked">❤️</span>
<span v-else>🤍</span>
</span>
{{ post.likeCount }}
</div>
<div class="comment">
<span>💬</span>
{{ post.commentCount }}
</div>
</div>
<div class="comments">
<!-- 评论内容可以在这里渲染 -->
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from '@/utils/axiosConfig';
import spacePost from './spacePost.vue';
import axios from '@/utils/axiosConfig'
export default {
components:{ spacePost },
name:'spaceIndex',
data() {
return {
userId: 1,
userlikelist:[],
// myfollows: [],
userInfo: {
name: "", // 用户姓名
avatar:"",
@ -88,10 +122,111 @@
expectation: "", // 择偶期望
career: "", // 职业
},
posts:[
{
id: 0,
avatarurl:require("../../assets/pictures/space/post1.png"),
name:"掌声",
date:"2024-01-01",
text:"测试文本",
postImageUrl:"../../assets/pictures/space/post1.png",
likeCount: 0,
commentCount: 0,
isLiked:false,
},
{
id: 1,
avatarurl:require("../../assets/pictures/space/post1.png"),
name:"掌声",
date:"2024-12-01",
text:"我好开心",
postImageUrl:"",
likeCount: 0,
commentCount: 5,
isLiked:false,
},
{
id: 2,
avatarurl:require("../../assets/pictures/space/post1.png"),
name:"掌声",
date:"2024-01-01",
text:"测试文本",
postImageUrl:"../../assets/pictures/space/post1.png",
likeCount: 8,
commentCount: 0,
isLiked:false,
},
],
defaultAvatar: "https://via.placeholder.com/150", // 默认头像占位符
};
},
methods: {
async loaduserlikes() {//加载user点赞列表 并会传入每个帖子做是否已经点赞的判断
const userid = this.userId;//获取用户id
try {
const response = await axios.get(`/likes/userid=${userid}`);
this.userlikelist = response; // Store the liked post IDs
// Update isLiked status for all posts
this.posts = this.posts.map(post => ({
...post,
isLiked: this.userlikelist.some(like => like.postid === post.id)
}));
} catch (error) {
console.error('Error:', error);
}
axios.get(`/likes/userid=${userid}`)
.then(response => {
// this.userlikelist.splice(0, this.myfollows.length);
this.userlikelist.push(...response);
return response;
})
.catch(error => {
console.error('Error:', error);
});
if (this.userlikelist.some(follow => follow.postid === this.postid)) {
this.isLiked = true;
}
},
async handleLike(post) {//点赞按钮
if (!post.isLiked) {//假如没点赞
try {
const response = await axios.post(`/likes/userid=${this.userId}/postid=${post.id}`);
if (response === "点赞成功！") {
// this.$message.success(response);
// this.$emit('updateLikeCount', this.likeCount + 1);
post.isLiked = !post.isLiked;
post.likeCount = post.likeCount + 1 ;
}
else {
this.$message.error(response);
}
} catch (error) {
this.$message.error("点赞失败");
console.log(error);
}
}
else {//假如已经点赞
try {
const response = await axios.delete(`/likes/userid=${this.userId}/postid=${post.id}`);
if (response === "取消点赞成功！") {
// this.$message.success("取消点赞成功");
// this.$emit('updateLikeCount', this.likeCount - 1);
post.isLiked = !post.isLiked;
post.likeCount = post.likeCount - 1;
}
else {
this.$message.error(response);
}
} catch (error) {
this.$message.error("取消点赞失败");
console.log("取消点赞失败:",error);
}
}
},
async fetchUserInfo() {
await this.loaduserlikes();
try {
@ -126,12 +261,30 @@
// alert("无法加载用户信息，请稍后重试！");
}
},
selectTab(tab) {
this.selectedTab = tab;
},
showMoreInfo() {
},
async fetchPostInfo() {
try {
// const userId = this.userId; // 需要从用户状态或其他地方获取
const postResponse = await axios.get(`/posts/userid=${this.userId}`, {
// params: {
// userId: userId
// }
});
// 假设后端返回的数据中包含了用户是否对每个帖子点赞的信息
this.posts = postResponse.map(post => ({
id: post.postid,
avatarurl:post.avatarurl,
name: post.username,
date: post.timestamp,
text: post.content,
postImageUrl: post.imageurl,
likeCount: post.likecount,
commentCount: post.commentcount,
isLiked: this.userlikelist.some(like => like.postid === post.postid)
}));
} catch (error) {
console.error("获取帖子信息失败:", error);
}
},
showFamilyTree() {
this.$router.push('/main/familyTree');
@ -296,4 +449,140 @@
width: 100px;
cursor: pointer;
}
.post-container {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
/* align-items: center; */
background: rgba(255, 255, 255, 0.8);
height: 680px;
margin: 30px auto;
border-radius: 30px;
width: 750px;
padding: 20px;
overflow-y: auto;
}
.post {
margin-left: 0;
margin-top: 150px;
height: 150px;
width: 680px;
position: relative; /* 使得子元素可以相对移动 */
margin-bottom: 70px;
padding: 0 20px;
/* border-bottom: 2px solid #d1cccc; */
}
.post-header {
display: flex;
margin-top:-160px;
margin-left: 30px;
padding: 10px;
position: relative;
}
.post-header::before {
content: '';
position: absolute;
left: 30px; /* 根据需要调整左侧位置 */
top: -10px; /* 调整横线的位置 */
width: calc(100% - 60px); /* 横线宽度，减去左右边距 */
height: 1px; /* 横线的高度 */
/* background-color: #d1cccc; 横线颜色 */
}
.post-header img {
margin-top: 10px;
width: 56px;
height: 56px;
border-radius: 50%;
}
.post-info h2{
font-weight: normal;
font-size: 20px;
padding-left: 10px;
margin-top: 9px;
}
.post-info h3 {
margin-top: -12px;
padding-left: 12px;
font-size: 14px;
font-weight: normal;
font-family: Italic;
font-style: ABeeZee;
white-space: nowrap;
}
.post-info p {
margin: 0;
font-size: 18px;
white-space: nowrap;
margin-left: 80px;
}
.post-img {
display: flex;
left: 220px;
width: 329px;
height: 163px;
position: relative;
}
.post-footer {
padding: 10px;
left: 30px; /* 根据需要调整左侧位置 */
top: -10px; /* 调整横线的位置 */
width: calc(100% - 60px); /* 横线宽度，减去左右边距 */
border-bottom: 1.5px solid #d1cccc;
}
/* 图标的样式 */
.reactions span {
font-size: 24px;
cursor: pointer;
margin: 0 2px;
display: inline-block;
transition: transform 0.3s;
}
/* 点赞图标选中时的样式 */
.liked {
color: red; /* 红色表示已点赞 */
transform: scale(1.2); /* 点击时稍微放大 */
}
/* 图标悬停时的效果 */
.reactions span:hover {
/* transform: scale(1.1); 悬停时稍微放大 */
}
/* 增加点赞和评论数值的可读性 */
.reactions {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 20px;
padding: 6px 10px;
}
.comment{
display: flex;
align-items: center;
margin-right: 120px;
}
.Like{
margin-left: 220px;
}
/* .reactions span img {
padding-left: 230px;
padding-top: 10px;
} */
.reactions .count {
font-size: 21px;
color: #666;
padding-left: 8px;
}
</style>

228
src/views/space/spacePost.vue
Unescape View File

@ -1,228 +0,0 @@
<template>
<div class="post-container">
<div class="post" v-for="post in posts" :key="post.id">
<div class="post-header">
<img :src="post.avatarurl" alt="" />
<div class="post-info">
<h2>{{ post.username }}</h2>
<h3>{{ post.timestamp }}</h3>
<p>{{ post.content }}</p>
</div>
</div>
<div class="post-img">
<img :src="post.imageurl" alt="" />
</div>
<div class="post-footer">
<div class="reactions">
<div class="Like">
<span @click="increaseCount(post.id, 'like')" :class="{'liked': post.isLiked}">
<span v-if="post.isLiked">❤️</span>
<span v-else>🤍</span>
</span>
{{ post.likeCount }}
</div>
<div class="comment">
<span @click="increaseCount(post.id, 'comment')">
💬
</span>
{{ post.commentCount }}
</div>
</div>
<div class="comments">
<!-- 评论内容可以在这里渲染 -->
</div>
</div>
</div>
</div>
</template>
<script>
import axios from '@/utils/axiosConfig';
export default {
name: 'spaceIndex',
data() {
return {
posts: [
{
id: 1,
avatarurl:require("../../assets/pictures/space/post1.png"),
username: "默认用户名",
timestamp: "2024-01-01",
content: "默认内容",
imageurl: require("../../assets/pictures/space/post2.png"),
likeCount: 0,
commentCount: 0,
isLiked: false,
}
],
};
},
methods: {
async fetchPosts() {
try {
const response = await axios.get(`http://10.133.6.46:8082/loveforest/posts/userid=1`);
this.posts = response.map(post => ({
id: post.postid,
avatarurl:post.avatarurl,
username: post.username,
timestamp: post.timestamp,
content: post.content,
imageurl: post.imageurl,
likeCount: post.likecount,
commentCount: post.commentcount,
isLiked: false,
}));
} catch (error) {
console.error("获取帖子信息失败:", error);
// 如果需要，可在此处重置为默认帖子
}
},
increaseCount(postId, type) {
const post = this.posts.find(p => p.id === postId);
if (type === 'like') {
post.isLiked =!post.isLiked;
post.likeCount += post.isLiked? 1 : -1;
}
},
},
mounted() {
this.fetchPosts();
},
};
</script>
<style scoped>
.post-container {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
/* align-items: center; */
background: rgba(255, 255, 255, 0.8);
height: 680px;
margin: 30px auto;
border-radius: 30px;
width: 750px;
padding: 20px;
overflow-y: auto;
}
.post {
margin-left: 0;
margin-top: 150px;
height: 150px;
width: 680px;
position: relative; /* 使得子元素可以相对移动 */
margin-bottom: 70px;
}
.post-header {
display: flex;
margin-top:-160px;
margin-left: 30px;
padding: 10px;
position: relative;
}
.post-header::before {
content: '';
position: absolute;
left: 30px; /* 根据需要调整左侧位置 */
top: -10px; /* 调整横线的位置 */
width: calc(100% - 60px); /* 横线宽度，减去左右边距 */
height: 1px; /* 横线的高度 */
background-color: #d1cccc; /* 横线颜色 */
}
.post-header img {
margin-top: 10px;
width: 56px;
height: 56px;
border-radius: 50%;
}
.post-info h2{
font-weight: normal;
font-size: 20px;
padding-left: 10px;
margin-top: 9px;
}
.post-info h3 {
margin-top: -12px;
padding-left: 12px;
font-size: 14px;
font-weight: normal;
font-family: Italic;
font-style: ABeeZee;
white-space: nowrap;
}
.post-info p {
margin: 0;
font-size: 18px;
white-space: nowrap;
margin-left: 80px;
}
.post-img {
display: flex;
left: 220px;
width: 329px;
height: 163px;
position: relative;
}
.post-footer {
padding: 10px;
}
/* 图标的样式 */
.reactions span {
font-size: 24px;
cursor: pointer;
margin: 0 2px;
display: inline-block;
transition: transform 0.3s;
}
/* 点赞图标选中时的样式 */
.liked {
color: red; /* 红色表示已点赞 */
transform: scale(1.2); /* 点击时稍微放大 */
}
/* 图标悬停时的效果 */
.reactions span:hover {
transform: scale(1.1); /* 悬停时稍微放大 */
}
/* 增加点赞和评论数值的可读性 */
.reactions {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 20px;
padding: 6px 10px;
}
.comment{
display: flex;
align-items: center;
margin-right: 120px;
}
.Like{
margin-left: 220px;
}
/* .reactions span img {
padding-left: 230px;
padding-top: 10px;
} */
.reactions .count {
font-size: 21px;
color: #666;
padding-left: 8px;
}
</style>
Write Preview
Loading…
Cancel
Save