Sfoglia il codice sorgente

增加了评论数

15207938132 2 mesi fa
parent
commit
58c1312245

+ 4 - 2
fashion-app/src/app/post-detail/post-detail.component.scss

@@ -234,12 +234,13 @@
   .comment-input-container {
     display: flex; /* 使用 Flexbox 布局 */
     align-items: center; /* 垂直居中 */
-    padding: 5px; /* 内边距 */
+    
     background-color: #f9f9f9; /* 背景色 */
     border-top: 1px solid #ccc; /* 顶部边框 */
   }
   
   .share-icon {
+    margin-left: 5px;
     font-size: 30px; /* 分享按钮大小 */
     color: black; /* 分享按钮颜色 */
     margin-right: 20px; /* 与输入框的间距 */
@@ -270,7 +271,8 @@
     height:50px;
     width: 80%;
     position: relative;
-    
+    margin-top: 7px;
+    margin-bottom: 7px;
   }
   
   .comment-buttons {

+ 1 - 1
fashion-app/src/app/post-detail/post-detail.component.ts

@@ -82,7 +82,7 @@ isFollowed: boolean = false; // 初始状态为未关注
      console.log('评论已保存:', this.newComment);
      this.newComment = ''; // 清空输入框
  })
- this.loadComments(); // 加载新评论
+ await this.loadComments(); // 加载新评论
 }
     }
   }

+ 1 - 1
fashion-app/src/app/post/post.component.html

@@ -33,7 +33,7 @@
       </ion-button>
       <ion-button fill="clear" class="action-button" (click)="goToPostDetail(post)">
         <ion-icon name="chatbubble-outline"></ion-icon>
-        <span>评论</span>
+        <span> {{ post.commentCount || 0 }}</span>
       </ion-button>
       <ion-button fill="clear" class="action-button" (click)="toggleLike()">
         <ion-icon name="heart-outline" [name]="isLiked ? 'heart' : 'heart-outline'" [style.color]="isLiked ? 'red' : 'black'"></ion-icon>

+ 12 - 2
fashion-app/src/app/post/post.component.ts

@@ -22,13 +22,23 @@ export class PostComponent implements OnInit {
   constructor(private router: Router) { }
 
   async ngOnInit() {
+    this.loadPosts(); // 加载帖子
+  }
+
+  async loadPosts() {
     const query = new CloudQuery('post'); // 创建查询对象
     console.log(query);
     query.include('user'); // 包含 user 属性
     this.posts = await query.find(); // 使用 find 方法获取所有帖子
     console.log(this.posts);
-    
-    
+     // 获取每个帖子的评论数
+     for (let post of this.posts) {
+      const commentQuery = new CloudQuery('comment');
+      commentQuery.equalTo('post', post.toPointer()); // 根据帖子指针查询评论
+      const comments = await commentQuery.find(); // 获取评论
+      post.commentCount = comments.length; // 将评论数存储在帖子对象中
+      console.log('帖子评论数',post.commentCount);
+    }
   }
 
   // 用于跟踪点赞状态

+ 2 - 0
fashion-app/src/app/tab2/tab2.page.html

@@ -60,6 +60,8 @@
   </ion-card>
 
   <ion-button expand="block" (click)="gosendpost()">发帖</ion-button>
+  <ion-button expand="block" (click)="gopost()">帖子</ion-button>
+
 
 </ion-content>
 

+ 4 - 0
fashion-app/src/app/tab2/tab2.page.ts

@@ -102,4 +102,8 @@ async loadPerferList(){
     this.router.navigate(['sendpost']);
   }
 
+  gopost(){
+    this.router.navigate(['post']);
+  }
+
 }

+ 1 - 1
fashion-app/src/lib/ncloud.ts

@@ -5,7 +5,7 @@ export class CloudObject {
     createdAt:any;
     updatedAt:any;
     data: Record<string, any> = {};
-
+    commentCount: number = 0;
     constructor(className: string) {
         this.className = className;
     }