个人空间页小修改

src/views/space/space.vue

@@ -63,56 +63,22 @@
           <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="../../assets/pictures/space/post1.png" alt="" />
-              <div class="post-info">
-                <h2>{{ post.name || "哈哈哈"}}</h2>
-                <h3>{{ post.date || "2024-01-01" }}</h3>
-                <p>{{ post.text  || "测试测试"}}</p>
-              </div>
-            </div>
-            <div class="post-img">
-              <img :src="post.postImageUrl || defaultImage " alt="" />
-            </div>
-            <div class="post-footer">
-              <div class="reactions">
-                <div class="Like">
-                  <span @click="increaseCount('like')" :class="{'liked': isLiked}">
-                    <span v-if="isLiked">❤️</span>
-                    <span v-else>🤍</span>
-                  </span>
-                  {{ likeCount }}
-                </div>
-                <div class="comment">
-                  <span @click="increaseCount('comment')">
-                    💬
-                  </span>
-                  {{ commentCount }}
-                </div>
-              </div>
-              <div class="comments">
-                <!-- 评论内容可以在这里渲染 -->
-              </div>
-            </div>
-          </div>
-        </div>
   </div>
   </div>
   </template>
   
   <script>
-  import axios from '@/utils/axiosConfig'
+  import axios from '@/utils/axiosConfig';
+  import spacePost from './spacePost.vue';
   export default {
+    components:{ spacePost },
     name:'spaceIndex',
     data() {
       return {
-        likeCount: 0,
-        isLiked:false,
-        commentCount:0,
-        defaultImage:require("../../assets/pictures/space/post2.png"),
         userInfo: {
           name: "", // 用户姓名
           avatar:"",
@@ -122,28 +88,10 @@
           expectation: "", // 择偶期望
           career: "", // 职业
         },
-        posts:{
-          name:"掌声",
-          date:"2024-01-01",
-          text:"测试文本",
-          postImageUrl:"",
-        },
         defaultAvatar: "https://via.placeholder.com/150", // 默认头像占位符
       };
   },
     methods: {
-      increaseCount(type){
-        if(type === 'like'){
-          if(this.isLiked){
-            this.likeCount--;
-          }else{
-            this.likeCount++;
-          }
-          this.isLiked=!this.isLiked;
-        }else if(type === 'comment'){
-          this.commentCount++;
-        }
-      },
       async fetchUserInfo() {
         try {
           // 调用后端接口获取用户信息
@@ -177,22 +125,6 @@
           // alert("无法加载用户信息，请稍后重试！");
         }
       },
-      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);
-        // 可以在这里添加一些提示用户的逻辑，比如弹出提示框告知获取信息失败等
-      }
-    },
     selectTab(tab) {
         this.selectedTab = tab;
       },
@@ -362,134 +294,4 @@
     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;
-}
-
-.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>