diff --git a/src/views/space/space.vue b/src/views/space/space.vue index 8cde03bc..98724ce8 100644 --- a/src/views/space/space.vue +++ b/src/views/space/space.vue @@ -67,36 +67,37 @@
- +
-

{{ post.name || "哈哈哈"}}

-

{{ post.date || "2024-01-01" }}

-

{{ post.text || "测试测试"}}

+

{{ post.name }}

+

{{ post.date }}

+

{{ post.text }}

-
- + +
+
+
- - 💬 - - {{ commentCount }} + 💬 + {{ post.commentCount }}
+
@@ -109,10 +110,9 @@ name:'spaceIndex', data() { return { - likeCount: 0, - isLiked:false, - commentCount:0, - defaultImage:require("../../assets/pictures/space/post2.png"), + userId: 1, + userlikelist:[], + // myfollows: [], userInfo: { name: "", // 用户姓名 avatar:"", @@ -122,34 +122,118 @@ expectation: "", // 择偶期望 career: "", // 职业 }, - posts:{ - name:"掌声", - date:"2024-01-01", - text:"测试文本", - postImageUrl:"", - }, + 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: { - increaseCount(type){ - if(type === 'like'){ - if(this.isLiked){ - this.likeCount--; - }else{ - this.likeCount++; + 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); } - this.isLiked=!this.isLiked; - }else if(type === 'comment'){ - this.commentCount++; } }, + async fetchUserInfo() { + await this.loaduserlikes(); try { // 调用后端接口获取用户信息 const response = await axios.get("/api/getUserInfo", { params: { - userId: "12345", // 假设传递用户 ID，需根据实际情况调整 + userId: this.userId, // 假设传递用户 ID，需根据实际情况调整 }, }); @@ -178,27 +262,29 @@ } }, async fetchPostInfo() { - try { - // 调用后端接口获取帖子日期信息 - const postResponse = await axios.get("/api/getPostDate", { - params: { - postId: "POST_ID_HERE", // 传递帖子 ID - }, - }); - this.postDate = postResponse.data.date; - this.postText = postResponse.data.text; - this.postImgUrl = postResponse.data.imageUrl; - } catch (error) { - console.error("获取帖子信息失败:", error); - // 可以在这里添加一些提示用户的逻辑，比如弹出提示框告知获取信息失败等 - } + 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); + } }, - selectTab(tab) { - this.selectedTab = tab; - }, - showMoreInfo() { - - }, showFamilyTree() { this.$router.push('/main/familyTree'); @@ -213,6 +299,7 @@ mounted() { // 加载用户信息 this.fetchUserInfo(); + this.fetchPostInfo(); }, }; @@ -382,6 +469,8 @@ width: 680px; position: relative; /* 使得子元素可以相对移动 */ margin-bottom: 70px; + padding: 0 20px; + /* border-bottom: 2px solid #d1cccc; */ } .post-header { @@ -399,7 +488,7 @@ top: -10px; /* 调整横线的位置 */ width: calc(100% - 60px); /* 横线宽度，减去左右边距 */ height: 1px; /* 横线的高度 */ - background-color: #d1cccc; /* 横线颜色 */ + /* background-color: #d1cccc; 横线颜色 */ } .post-header img { @@ -442,6 +531,10 @@ .post-footer { padding: 10px; + left: 30px; /* 根据需要调整左侧位置 */ + top: -10px; /* 调整横线的位置 */ + width: calc(100% - 60px); /* 横线宽度，减去左右边距 */ + border-bottom: 1.5px solid #d1cccc; } /* 图标的样式 */ @@ -461,7 +554,7 @@ /* 图标悬停时的效果 */ .reactions span:hover { - transform: scale(1.1); /* 悬停时稍微放大 */ + /* transform: scale(1.1); 悬停时稍微放大 */ } /* 增加点赞和评论数值的可读性 */