From 32da9c72d40a69e2eef1f96f8e45da7313d21859 Mon Sep 17 00:00:00 2001
From: helloworld180 <1678854362@qq.com>
Date: Mon, 16 Dec 2024 22:37:22 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E7=A9=BA=E9=97=B4=E9=A1=B5?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E9=83=A8=E5=88=86=E5=AF=B9=E6=8E=A5=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/space/space.vue     | 313 ++++++++++++++++++++++++++++++++--
 src/views/space/spacePost.vue | 228 -------------------------
 2 files changed, 301 insertions(+), 240 deletions(-)
 delete mode 100644 src/views/space/spacePost.vue

diff --git a/src/views/space/space.vue b/src/views/space/space.vue
index 5d03d8e6..98724ce8 100644
--- a/src/views/space/space.vue
+++ b/src/views/space/space.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/space/spacePost.vue b/src/views/space/spacePost.vue
deleted file mode 100644
index 88e6001c..00000000
--- a/src/views/space/spacePost.vue
+++ /dev/null
@@ -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>
\ No newline at end of file