zyw1228

huinongbao-app/src/app/app.module.ts

@@ -20,6 +20,7 @@ import { PostsModule } from './tab1/posts/posts.module';
 import { ColloctModule } from './colloct/colloct.module';
 import { GzModule } from './gz/gz.module';
 
+
 Parse.initialize("ncloudmaster");
 Parse.serverURL = "https://server.fmode.cn/parse";
 localStorage.setItem("NOVA_APIG_SERVER", 'aHR0cHMlM0ElMkYlMkZzZXJ2ZXIuZm1vZGUuY24lMkZhcGklMkZhcGlnJTJG')
@@ -29,7 +30,7 @@ Parse.User.become('r:ccbe063d7c91d39dc29faf51e193ffcf')
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule,GzModule, PostsModule,IonicModule.forRoot(), AppRoutingModule,HttpClientModule,BrowserAnimationsModule,PostModalModule,PostDetailModule,SearchPageModule,RecommendedPostsModule,ColloctModule],
+  imports: [BrowserModule,GzModule,PostsModule,IonicModule.forRoot(), AppRoutingModule,HttpClientModule,BrowserAnimationsModule,PostModalModule,PostDetailModule,SearchPageModule,RecommendedPostsModule,ColloctModule],
   providers: [
      // 添加HttpClient供应器
     provideHttpClient(),

huinongbao-app/src/app/comment-modal/comment-modal.component.html

@@ -0,0 +1,18 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>添加评论</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="dismiss()">取消</ion-button>
+      <ion-button (click)="submitComment()">发布</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="comment-modal-content">
+  <ion-card-content>
+    <ion-item>
+      <ion-label position="stacked">评论内容</ion-label>
+      <ion-textarea [(ngModel)]="content"></ion-textarea>
+    </ion-item>
+  </ion-card-content>
+</ion-content>

huinongbao-app/src/app/comment-modal/comment-modal.component.scss

@@ -0,0 +1,20 @@
+.comment-modal-content {
+    --padding-bottom: 0; // 去掉底部内边距
+    --padding-top: 0; // 去掉顶部内边距
+    --border-radius: 16px 16px 0 0; // 圆角效果
+    height: 50vh; // 设置高度为视口高度的一半
+  }
+  
+  ion-header {
+    border-bottom: none; // 去掉顶部边框
+    border-top-left-radius: 16px; // 左上角圆角
+    border-top-right-radius: 16px; // 右上角圆角
+    background: #fff; // 设置背景颜色以便圆角效果可见
+  }
+  
+  ion-content {
+    display: flex; // 使用 flexbox 布局
+    flex-direction: column; // 垂直排列
+    justify-content: flex-end; // 内容从底部开始显示
+    padding: 0; // 去掉内容的默认内边距
+  }

huinongbao-app/src/app/comment-modal/comment-modal.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { CommentModalComponent } from './comment-modal.component';
+
+describe('CommentModalComponent', () => {
+  let component: CommentModalComponent;
+  let fixture: ComponentFixture<CommentModalComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommentModalComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CommentModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

huinongbao-app/src/app/comment-modal/comment-modal.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-comment-modal',
+  templateUrl: './comment-modal.component.html',
+  styleUrls: ['./comment-modal.component.scss']
+})
+export class CommentModalComponent {
+  content: string = '';
+
+  constructor(private modalController: ModalController) {}
+
+  async submitComment() {
+    if (this.content.trim()) {
+      await this.modalController.dismiss(this.content, 'confirm'); // 关闭模态框并返回评论内容
+    }
+  }
+
+  dismiss() {
+    this.modalController.dismiss(); // 关闭模态框
+  }
+}

huinongbao-app/src/app/comment-modal/comment-modal.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CommentModalComponent } from './comment-modal.component'; // 确保路径正确
+import { IonicModule } from '@ionic/angular'; // 导入 Ionic 模块
+
+@NgModule({
+  declarations: [CommentModalComponent],
+  imports: [
+    CommonModule,
+    IonicModule // 确保在这里导入 IonicModule
+  ],
+  exports: [CommentModalComponent]
+})
+export class CommentModalModule {}

huinongbao-app/src/app/tab1/post-detail/comments-list-modal/comments-list-modal.component.html

@@ -0,0 +1,16 @@
+<ion-list>
+  <div *ngFor="let comment of comments" class="comment">
+    <div class="comment-header">
+      <img [src]="comment.avatar" alt="{{ comment.username }}'s avatar" class="avatar" />
+      <span class="username">{{ comment.username }}</span>
+    </div>
+    <div class="comment-content">
+      <p>{{ comment.content }}</p>
+    </div>
+  </div>
+  <ion-item *ngIf="comments.length === 0">
+    <ion-label>
+      <p>还没有评论。</p>
+    </ion-label>
+  </ion-item>
+</ion-list>

huinongbao-app/src/app/tab1/post-detail/comments-list-modal/comments-list-modal.component.scss

@@ -0,0 +1,40 @@
+ion-list {
+  margin: 0;
+  padding: 0;
+}
+
+ion-item {
+  border-bottom: 1px solid #ccc; // 分隔线
+}
+
+.comment {
+  display: flex; // 使用 flexbox 布局
+  flex-direction: column; // 垂直排列
+  padding: 10px; // 为每个评论添加内边距
+  background-color: #f9f9f9; // 设置背景颜色
+  margin-bottom: 10px; // 每条评论底部的间距
+  border-radius: 5px; // 圆角边框
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // 添加阴影效果
+}
+
+.comment-header {
+  display: flex; // 使用 flexbox 布局
+  align-items: center; // 垂直居中对齐
+}
+
+.avatar {
+  width: 40px; // 设置头像宽度
+  height: 40px; // 设置头像高度
+  border-radius: 50%; // 使头像圆形
+  margin-right: 10px; // 头像与用户名之间的间距
+}
+
+.username {
+  font-weight: bold; // 加粗用户名
+}
+
+.comment-content {
+  margin-top: 5px; // 评论内容与用户名之间的间距
+  word-wrap: break-word; // 允许长单词换行
+  overflow-wrap: break-word; // 确保长单词能够换行
+}

huinongbao-app/src/app/tab1/post-detail/comments-list-modal/comments-list-modal.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { CommentsListModalComponent } from './comments-list-modal.component';
+
+describe('CommentsListModalComponent', () => {
+  let component: CommentsListModalComponent;
+  let fixture: ComponentFixture<CommentsListModalComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommentsListModalComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CommentsListModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

huinongbao-app/src/app/tab1/post-detail/comments-list-modal/comments-list-modal.component.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { CloudQuery } from '../../../../lib/ncloud';
+
+@Component({
+  selector: 'app-comments-list-modal',
+  templateUrl: './comments-list-modal.component.html',
+  styleUrls: ['./comments-list-modal.component.scss'],
+})
+export class CommentsListModalComponent implements OnInit {
+  @Input() postId!: string; // 使用 ! 操作符来告诉 TypeScript 这个属性会被赋值
+  comments: { username: string; avatar: string; content: string; }[] = [];
+
+  constructor() {}
+
+  ngOnInit() {
+    console.log('Post ID received:', this.postId); // 打印接收到的 postId
+    this.loadComments(); // 加载评论
+  }
+
+  async loadComments() {
+    try {
+      console.log('Loading comments for post ID:', this.postId); // 打印正在加载的 postId
+      const commentQuery = new CloudQuery('HnbComment');
+
+      // 使用 equalTo 方法查询与当前帖子相关的评论
+      commentQuery.equalTo('post', { __type: 'Pointer', className: 'HnbPost', objectId: this.postId });
+
+      const results = await commentQuery.find(); // 使用 find 方法来获取结果
+
+      console.log('Fetched comments:', results); // 打印获取到的评论记录
+
+      // 检查是否有评论
+      if (Array.isArray(results) && results.length > 0) {
+        // 直接提取评论的 username、avatar 和 content
+        this.comments = results.map((comment: any) => ({
+          username: comment.data.username, // 从 data 中获取用户名
+          avatar: comment.data.avatar, // 从 data 中获取头像
+          content: comment.data.content // 从 data 中获取内容
+        }));
+      } else {
+        console.log('No comments found for this post.'); // 打印没有找到评论的情况
+      }
+
+      console.log('Processed comments:', this.comments); // 打印处理后的评论数据
+    } catch (error) {
+      console.error('Error loading comments:', error); // 打印错误信息
+    }
+  }
+}

huinongbao-app/src/app/tab1/post-detail/comments-list-modal/comments-list-modal.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CommentsListModalComponent } from './comments-list-modal.component'; // 确保路径正确
+import { IonicModule } from '@ionic/angular'; // 导入 Ionic 模块
+import { FormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [CommentsListModalComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule // 确保在这里导入 IonicModule
+  ],
+  exports: [CommentsListModalComponent]
+})
+export class CommentsListModalModule {}

huinongbao-app/src/app/tab1/post-detail/post-detail.component.html

@@ -6,63 +6,69 @@
         <ion-icon name="arrow-back"></ion-icon> 
       </ion-button>
     </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button (click)="openCommentDialog()">
+        <ion-icon name="chatbubbles"></ion-icon>
+        评论
+      </ion-button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
-<ion-card-content>
+<ion-content>
   <div *ngIf="post; else noPost">
-    <ion-item>
-      <ion-label position="stacked">作者</ion-label>
-      <p>{{ authorName || '未知作者' }}</p>
-      <ion-button (click)="toggleFollow()" class="follow-button">
-        <ion-icon [name]="followed ? 'checkmark' : 'add'"></ion-icon>
-        {{ followed ? '已关注' : '关注' }}
-      </ion-button>
-    </ion-item>
-    
-    <ion-item>
-      <ion-label position="stacked">内容</ion-label>
-      <p>{{ post.content }}</p>
-    </ion-item>
-
-    <ion-item>
-      <ion-label position="stacked">标签</ion-label>
-      <p>{{ post.tag }}</p>
-    </ion-item>
-
-    <ion-item>
-      <ion-label position="stacked">创建时间</ion-label>
-      <p>{{ post.createdAt | date: 'medium' }}</p>
-    </ion-item>
-
-    <ion-item>
-      <ion-label position="stacked">更新时间</ion-label>
-      <p>{{ post.updatedAt | date: 'medium' }}</p>
-    </ion-item>
-
-    <!-- 点赞模块 -->
-    <ion-item>
-      <ion-label position="stacked">点赞数</ion-label>
-      <button (click)="toggleLike()" class="like-button">
-        <span [ngClass]="{'liked': liked, 'not-liked': !liked}">
-          ♥
-        </span>
-      </button>
-      <span>{{ post.likeCount }}</span>
-    </ion-item>
+    <!-- 顶部区域 -->
+    <ion-card>
+      <ion-card-content>
+        <div class="post-header">
+          <div class="comment-header">
+            <img [src]="post.author.avatar" alt="{{ authorName || '未知作者' }}'s avatar" class="author-avatar" />
+            <span class="username">{{ authorName || '未知作者' }}</span>
+          </div>
+          <div class="author-info">
+            <ion-button (click)="toggleFollow()" class="follow-button" slot="end">
+              <ion-icon [name]="followed ? 'checkmark' : 'add'"></ion-icon>
+              {{ followed ? '已关注' : '关注' }}
+            </ion-button>
+          </div>
+        </div>
+        <div class="post-content">
+          <p>{{ post.content }}</p>
+        </div>
+        <div class="post-footer">
+          <div class="post-tag">
+            <p>{{ post.tag }}</p>
+          </div>
+          <div class="post-actions">
+            <button (click)="toggleLike()" class="like-button">
+              <span [ngClass]="{'liked': liked, 'not-liked': !liked}">
+                ♥
+              </span>
+            </button>
+            <span>{{ post.likeCount }}</span>
+            <button (click)="toggleCollect()" class="collect-button">
+              <span [ngClass]="{'collected': collected, 'not-collected': !collected}">
+                ★
+              </span>
+            </button>
+            <span>{{ post.collectCount }}</span>
+          </div>
+        </div>
+      </ion-card-content>
+    </ion-card>
 
-    <ion-item>
-      <ion-label position="stacked">收藏数</ion-label>
-      <button (click)="toggleCollect()" class="collect-button">
-        <span [ngClass]="{'collected': collected, 'not-collected': !collected}">
-          ★
-        </span>
-      </button>
-      <span>{{ post.collectCount }}</span>
-    </ion-item>
+    <!-- 评论区 -->
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>评论区</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <app-comments-list-modal [postId]="post.objectId"></app-comments-list-modal>
+      </ion-card-content>
+    </ion-card>
   </div>
   
   <ng-template #noPost>
     <p>没有找到帖子。</p>
   </ng-template>
-</ion-card-content>
+</ion-content>

huinongbao-app/src/app/tab1/post-detail/post-detail.component.scss

@@ -1,71 +1,83 @@
-ion-card-content {
-    padding: 16px; // 添加内容的内边距
-  
-    ion-item {
-      margin-bottom: 16px; // 每个项之间的间距
-      border: 1px solid #e0e0e0; // 为每个项添加边框
-      border-radius: 8px; // 圆角边框
-      padding: 12px; // 内边距
-  
-      // 提升项的可读性
-      background-color: #ffffff; // 背景色
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // 阴影效果
-    }
-  
-    ion-label {
-      font-weight: bold; // 标签加粗
-      color: #333; // 标签颜色
-    }
-  
-    p {
-      margin: 0; // 取消段落的默认外边距
-      color: #555; // 内容颜色
-    }
-  
-    // 点赞模块样式
-    .like-button {
-      border: none;
-      background: none;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-  
-      span {
-        font-size: 24px; // 设置爱心图标的大小
-        color: transparent; // 默认颜色为透明
-        border: 2px solid red; // 空心爱心的边框
-        border-radius: 50%; // 圆形边框
-        padding: 0.2em; // 边框内边距
-      }
-  
-      &.liked span {
-        color: red; // 点赞时爱心变为红色
-        border: none; // 去掉边框
-      }
-    }
-    // 收藏模块样式
-.collect-button {
+.post-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px; // 顶部区域的底部间距
+}
+
+.author-avatar {
+  width: 40px; // 头像宽度
+  height: 40px; // 头像高度
+  border-radius: 50%; // 圆形头像
+  margin-right: 10px; // 头像与用户名之间的间距
+}
+
+.author-info {
+  flex: 1; // 让作者信息区域占用剩余空间
+  display: flex;
+  align-items: center; // 垂直居中
+}
+
+.author-username {
+  font-weight: bold; // 加粗用户名
+  color: #333; // 用户名颜色
+}
+
+.post-content {
+  margin-bottom: 16px; // 内容与底部区域的间距
+  color: #555; // 内容颜色
+}
+
+.post-footer {
+  display: flex;
+  justify-content: space-between; // 左右分布
+  align-items: center; // 垂直居中
+}
+
+.post-tag {
+  font-weight: bold; // 加粗标签
+  color: #007bff; // 标签颜色
+}
+
+.post-actions {
+  display: flex;
+  align-items: center; // 垂直居中
+}
+
+.like-button, .collect-button {
   border: none;
   background: none;
   cursor: pointer;
   display: flex;
   align-items: center;
+  margin-left: 10px; // 按钮之间的间距
+}
+/* 评论模块样式 */
+.comments-section {
+  margin-top: 20px; // 评论模块与帖子内容之间的间距
+}
 
-  span {
-    font-size: 24px; // 设置星星图标的大小
-    color: transparent; // 默认颜色为透明
-    border: 2px solid gold; // 空心星星的边框
-    border-radius: 50%; // 圆形边框
-    padding: 0.2em; // 边框内边距
-  }
+.comment-item {
+  display: flex;
+  align-items: flex-start; // 垂直对齐
+  margin-bottom: 15px; // 每条评论之间的间距
+}
 
-  &.collected span {
-    color: gold; // 收藏时星星变为金色
-    border: none; // 去掉边框
-  }
+.comment-avatar {
+  width: 30px; // 评论用户头像宽度
+  height: 30px; // 评论用户头像高度
+  border-radius: 50%; // 圆形头像
+  margin-right: 10px; // 头像与评论内容之间的间距
 }
-.follow-button {
-  margin-left: 10px; // 为按钮添加左边距
-  color: var(--ion-color-primary); // 使用主题颜色
+
+.comment-info {
+  flex: 1; // 让评论信息区域占用剩余空间
 }
-  }
+
+.comment-username {
+  font-weight: bold; // 加粗用户名
+  color: #333; // 用户名颜色
+}
+
+.comment-content {
+  color: #555; // 评论内容颜色
+}

huinongbao-app/src/app/tab1/post-detail/post-detail.component.ts

@@ -2,7 +2,18 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { CloudQuery } from '../../../lib/ncloud';
 import { Location } from '@angular/common';
+import { CommentModalComponent } from '../../comment-modal/comment-modal.component';
+import { ModalController } from '@ionic/angular'; // 导入 ModalController
+import { CommentsListModalComponent } from 'src/app/tab1/post-detail/comments-list-modal/comments-list-modal.component';
 
+interface Comment {
+  username: string;
+  avatar: string;
+  content: string;
+  user: {
+    objectId: string; // 假设用户的 objectId
+  };
+}
 @Component({
   selector: 'app-post-detail',
   templateUrl: './post-detail.component.html',
@@ -14,13 +25,69 @@ export class PostDetailComponent implements OnInit {
   liked: boolean = false; // 新增属性以跟踪点赞状态
   collected: boolean = false; // 新增属性以跟踪收藏状态
   followed: boolean = false; // 新增属性以跟踪关注状态
-
-  constructor(private route: ActivatedRoute, private location: Location) {}
+  comments: { username: string; avatar: string; content: string; }[] = [];
+  showComments: boolean = false;
+  constructor(private route: ActivatedRoute, private location: Location,private modalController: ModalController) {}
 
   ngOnInit() {
     this.loadPostDetail();
+    this.loadComments();
+  }
+  async loadComments() {
+    if (this.post) {
+      this.comments = await this.fetchComments(this.post.objectId);
+    }
   }
+  toggleComments() {
+    this.showComments = !this.showComments; // 切换评论模块的显示状态
+  }
+  async fetchComments(postId: string): Promise<{ username: string; avatar: string; content: string; }[]> {
+    const commentQuery = new CloudQuery('HnbComment'); // 实例化 CloudQuery
+    const results: Comment[] = await commentQuery.find1({ post: { __type: 'Pointer', className: 'HnbPost', objectId: postId } }); // 调用 find1 方法
+
+    // 获取评论的用户名和头像等信息
+    const commentsData = await Promise.all(results.map(async (comment: Comment) => {
+      const userQuery = new CloudQuery('HnbUser');
+      const user = await userQuery.get(comment.user.objectId); // 假设评论有指向用户的Pointer
+      console.log('Fetched user:', user);
+      return {
+        username: user.username,
+        avatar: user.avatarUrl, // 假设用户有头像URL
+        content: comment.content
+      };
+    }));
 
+    return commentsData; // 返回处理后的评论数据
+  }
+  async openCommentsListModal(): Promise<void> {
+    const modal = await this.modalController.create({
+      component: CommentsListModalComponent,
+      cssClass: 'comments-list-modal',
+      componentProps: {
+        postId: this.post.objectId, // 传递当前帖子的 objectId
+      },
+    });
+  
+    await modal.present();
+  }
+
+  async openCommentDialog(): Promise<void> {
+    const modal = await this.modalController.create({
+      component: CommentModalComponent,
+      cssClass: 'comment-modal', // 添加自定义样式类
+      backdropDismiss: true, // 点击背景关闭模态框
+      breakpoints: [0.5, 0.7], // 设置模态框的高度为视口高度的一半或70%
+      initialBreakpoint: 0.5 // 初始高度为视口高度的一半
+    });
+  
+    await modal.present(); // 显示模态框
+  
+    const { data, role } = await modal.onWillDismiss(); // 等待模态框关闭
+  
+    if (role === 'confirm') {
+      await this.submitComment(data); // 发布评论
+    }
+  }
   async loadPostDetail() {
     const objectId = this.route.snapshot.paramMap.get('id');
     if (objectId) {
@@ -120,58 +187,63 @@ export class PostDetailComponent implements OnInit {
 
   async toggleCollect() {
     try {
-      const username = await this.getLatestUserName(); // 获取最新用户的用户名
+        const username = await this.getLatestUserName(); // 获取最新用户的用户名
 
-      if (!username) {
-          console.error('Failed to get latest username.');
-          return; // 如果未能获取用户名，退出
-      }
+        if (!username) {
+            console.error('Failed to get latest username.');
+            return; // 如果未能获取用户名，退出
+        }
 
-      const collectQuery = new CloudQuery('HnbColloct');
+        const collectQuery = new CloudQuery('HnbColloct');
 
-      if (this.collected) {
-          // 取消收藏逻辑
-          const collectEntry = await collectQuery.findOne({
-              username: username,
-              post: { __type: 'Pointer', className: 'HnbPost', objectId: this.post.objectId } // 使用当前帖子的 objectId
-          });
+        if (this.collected) {
+            // 取消收藏逻辑
+            const collectEntry = await collectQuery.findOne({
+                username: username,
+                title: { __type: 'Pointer', className: 'HnbPost', objectId: this.post.objectId } // 使用当前帖子的 objectId
+            });
 
-          if (collectEntry) {
-              await collectQuery.delete(collectEntry.objectId); // 删除收藏记录
-              this.post.collectCount -= 1; // 减少收藏数
-          }
-      } else {
-          // 添加收藏逻辑
-          const newCollectEntry = {
-              username: username, // 使用最新用户的用户名
-              title: { __type: 'Pointer', className: 'HnbPost', objectId: this.post.objectId } // 确保 title 也是指向当前帖子的 objectId
-          };
-          await collectQuery.add(newCollectEntry); // 添加新的收藏记录
-          this.post.collectCount += 1; // 增加收藏数
-      }
+            if (collectEntry) {
+                await collectQuery.delete(collectEntry.objectId); // 删除收藏记录
+                this.post.collectCount -= 1; // 减少收藏数
+            }
+        } else {
+            // 添加收藏逻辑
+            const newCollectEntry = {
+                username: username, // 使用最新用户的用户名
+                title: { __type: 'Pointer', className: 'HnbPost', objectId: this.post.objectId } // 确保 title 也是指向当前帖子的 objectId
+            };
+            await collectQuery.add(newCollectEntry); // 添加新的收藏记录
+            this.post.collectCount += 1; // 增加收藏数
+        }
 
-      console.log('Updating post with collectCount:', this.post.collectCount);
-      await new CloudQuery('HnbPost').update(this.post.objectId, { collectCount: this.post.collectCount }); // 更新帖子收藏数
-      this.collected = !this.collected; // 切换收藏状态
+        console.log('Updating post with collectCount:', this.post.collectCount);
+        await new CloudQuery('HnbPost').update(this.post.objectId, { collectCount: this.post.collectCount }); // 更新帖子收藏数
+        this.collected = !this.collected; // 切换收藏状态
     } catch (error) {
-      console.error('Error updating collect status:', error);
+        console.error('Error updating collect status:', error);
     }
-  }
+}
 
-  async loadAuthorDetails(author: any) {
-    if (author && author.objectId) {
-      try {
-        const userQuery = new CloudQuery('HnbUser');
-        const authorData = await userQuery.get(author.objectId);
-        this.authorName = authorData.username;
-      } catch (error) {
-        console.error('Error loading author details:', error);
-        this.authorName = '未知作者';
-      }
-    } else {
-      this.authorName = '未知作者';
+async loadAuthorDetails(author: any) {
+  if (author && author.objectId) {
+    try {
+      const userQuery = new CloudQuery('HnbUser');
+      const authorData = await userQuery.get(author.objectId); // 根据 objectId 查询用户数据
+      this.authorName = authorData.username; // 获取用户名
+      
+      // 检查头像是否存在，如果不存在则使用默认头像
+      this.post.author.avatar = authorData.avatar || 'path/to/default/avatar.png'; // 替换为默认头像的路径
+    } catch (error) {
+      console.error('Error loading author details:', error);
+      this.authorName = '未知作者'; // 如果发生错误，设置默认作者名
+      this.post.author.avatar = 'path/to/default/avatar.png'; // 使用默认头像
     }
+  } else {
+    this.authorName = '未知作者'; // 如果没有作者信息，设置默认作者名
+    this.post.author.avatar = 'path/to/default/avatar.png'; // 使用默认头像
   }
+}
 
   async getLatestUserName(): Promise<string | null> {
     const url = `http://dev.fmode.cn:1337/parse/classes/HnbUser2?order=-createdAt&limit=1`; // 按创建时间降序排序，限制为1条记录
@@ -195,6 +267,31 @@ export class PostDetailComponent implements OnInit {
     // 返回最新用户的 username
     return result.results.length > 0 ? result.results[0].username : null;
   }
+  async submitComment(content: string) {
+    if (!content || content.trim() === '') {
+      console.error('Comment content is empty.'); // 检查内容是否为空
+      return; // 如果内容为空，直接返回
+    }
+  
+    const username = await this.getLatestUserName();
+  
+    if (!username) {
+      console.error('Failed to get latest username.');
+      return; // 如果未能获取用户名，退出
+    }
+  
+    const commentEntry = {
+      username: username,
+      content: content,
+      post: { __type: 'Pointer', className: 'HnbPost', objectId: this.post.objectId }
+    };
+  
+    const commentQuery = new CloudQuery('HnbComment');
+    await commentQuery.add(commentEntry); // 添加评论记录
+    console.log('Comment submitted:', commentEntry);
+  }
+
+
 
   goBack() {
     this.location.back();

huinongbao-app/src/app/tab1/post-detail/post-detail.module.ts

@@ -2,12 +2,17 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PostDetailComponent } from './post-detail.component'; // 确保路径正确
 import { IonicModule } from '@ionic/angular'; // 导入 Ionic 模块
+import { FormsModule } from '@angular/forms';
+import { CommentModalComponent } from '../../comment-modal/comment-modal.component';
 
+import { CommentsListModalModule } from './comments-list-modal/comments-list-modal.module';
 @NgModule({
-  declarations: [PostDetailComponent], // 声明 PostDetailComponent
+  declarations: [PostDetailComponent,CommentModalComponent], // 声明 PostDetailComponent
   imports: [
-    CommonModule, // 导入 CommonModule
-    IonicModule // 导入 IonicModule
+    CommonModule, 
+    FormsModule,// 导入 CommonModule
+    IonicModule,
+    CommentsListModalModule // 导入 IonicModule
   ],
   exports: [PostDetailComponent] // 导出 PostDetailComponent（如果需要在其他地方使用）
 })