src/app/tab3/tab3.page.html

@@ -3,164 +3,157 @@
     <ion-title>
       消息
     </ion-title>
-      <ion-button slot="end"  (click)="openSettingsPage()">
-        <ion-icon name="settings-outline"></ion-icon>
-      </ion-button>
-      
+    <ion-button slot="end" (click)="openSettingsPage()">
+      <ion-icon name="settings-outline"></ion-icon>
+    </ion-button>
+
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
-<div style="background-color: rgb(245, 246, 246);">
-  <ion-searchbar placeholder="输入关键字搜索"></ion-searchbar>
-  <ion-card class="card">
-    <ion-card-header >
-      <ion-card-title style="color: rgb(0, 4, 255);">最新推荐</ion-card-title>
-    </ion-card-header>
-    <ion-card-content >
-      <ion-avatar>
-        <ion-img src="assets/img/a.png"></ion-img>
-      </ion-avatar>
-      <ion-label>用户名</ion-label><br>
-      <ion-label>标签</ion-label><br>
-      <ion-label>聊天内容</ion-label>
-      <ion-button expand="block">免费提问</ion-button>
-    </ion-card-content>
-  </ion-card>
-  <div style="display: flex; flex-direction: column;">
-   <ion-segment [ngModelOptions]="{standalone:true}" [(ngModel)]="activeTab" (ionChange)="changeTab($event)">
-    <ion-segment-button value="explore">
-      <ion-icon name="chatbubble-ellipses"></ion-icon>
-      评论和回复
-    </ion-segment-button>
-    <ion-segment-button value="video">
-      <ion-icon  name="thumbs-up"></ion-icon>
-      赞与收藏
-    </ion-segment-button>
-    <ion-segment-button value="search">
-      <ion-icon name="person-add"></ion-icon>
-      新增关注
-    </ion-segment-button>
-    <ion-segment-button value="system">
-      <ion-icon name="notifications"></ion-icon>
-      系统消息
-    </ion-segment-button>
-   </ion-segment>
-   <div *ngIf="activeTab === 'explore'" >
-    <ion-item>
-      <ion-avatar slot="start">
-        <ion-img src="assets/img/b.png"></ion-img>
-      </ion-avatar>
-      <ion-label>
-        <h2>小刘爱装修</h2>
-        <p>你觉得这个设计怎么样</p>
-      </ion-label>
-    </ion-item>
-    <ion-item>
-      <ion-avatar slot="start">
-        <ion-img src="assets/img/g.png"></ion-img>
-      </ion-avatar>
-      <ion-label>
-        <h2>西瓜</h2>
-        <p>你好呀，想咨询点事</p>
-      </ion-label>
-    </ion-item>
-    <ion-item>
-      <ion-input placeholder="添加评论" ></ion-input>
-          <ion-button slot="end" (click)="sendComment()">
-        <ion-icon name="send"></ion-icon>
-      </ion-button>
-    </ion-item>
-   </div>
-   <div *ngIf="activeTab === 'video'">
-    <ion-item>
-      <ion-avatar slot="start">
-        <ion-img src="assets/img/e.png"></ion-img>
-      </ion-avatar>
-      <ion-label>
-        <h2>小雨</h2>
-        <p>1</p>
-      </ion-label>
-      <ion-buttons slot="end">
-        <ion-button (click)="likePost(1)">
-          <ion-icon name="heart" [color]="isPostLiked(1) ? 'danger' : 'medium'"></ion-icon>
-        </ion-button>
-        <ion-button (click)="toggleFavorite(1)">
-          <ion-icon name="star" [color]="isPostFavorite(1) ? 'warning' : 'medium'"></ion-icon>
-        </ion-button>
-      </ion-buttons>
-    </ion-item>
-    <ion-item>
-      <ion-avatar slot="start">
-        <ion-img src="assets/img/f.png"></ion-img>
-      </ion-avatar>
-      <ion-label>
-        <h2>疯狂动物</h2>
-        <p>2</p>
-      </ion-label>
-      <ion-buttons slot="end">
-        <ion-button (click)="likePost(2)">
-          <ion-icon name="heart" [color]="isPostLiked(2) ? 'danger' : 'medium'"></ion-icon>
-        </ion-button>
-        <ion-button (click)="toggleFavorite(2)">
-          <ion-icon name="star" [color]="isPostFavorite(2) ? 'warning' : 'medium'"></ion-icon>
-        </ion-button>
-      </ion-buttons>
-    </ion-item>  
-   </div>
-   <div *ngIf="activeTab === 'search'">
-    <ion-item>
-      <ion-avatar slot="start">
-        <ion-img src="assets/img/a.png"></ion-img>
-      </ion-avatar>
-      <ion-label>
-        <h2>海底</h2>
-        <p>这是一条内容1</p>
-      </ion-label>
-      <ion-button slot="end" (click)="toggleFollow(1)" color="primary" [fill]="isUserFollowed(1) ? 'solid' : 'outline'">
-        {{ isUserFollowed(1) ? '已关注' : '关注' }}
-      </ion-button>
-    </ion-item>
+  <div style="background-color: rgb(245, 246, 246);">
+    <ion-searchbar placeholder="输入关键字搜索"></ion-searchbar>
+    <ion-card class="card">
+      <ion-card-header>
+        <ion-card-title style="color: rgb(0, 4, 255);">最新推荐</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-avatar>
+          <ion-img src="assets/img/a.png"></ion-img>
+        </ion-avatar>
+        <ion-label>用户名</ion-label><br>
+        <ion-label>标签</ion-label><br>
+        <ion-label>聊天内容</ion-label>
+        <ion-button expand="block">免费提问</ion-button>
+      </ion-card-content>
+    </ion-card>
+    <div style="display: flex; flex-direction: column;">
+      <ion-segment [ngModelOptions]="{standalone:true}" [(ngModel)]="activeTab" (ionChange)="changeTab($event)">
+        <ion-segment-button value="explore">
+          <ion-icon name="chatbubble-ellipses"></ion-icon>
+          评论和回复
+        </ion-segment-button>
+        <ion-segment-button value="video">
+          <ion-icon name="thumbs-up"></ion-icon>
+          赞与收藏
+        </ion-segment-button>
+        <ion-segment-button value="search">
+          <ion-icon name="person-add"></ion-icon>
+          新增关注
+        </ion-segment-button>
+        <ion-segment-button value="system">
+          <ion-icon name="notifications"></ion-icon>
+          系统消息
+        </ion-segment-button>
+      </ion-segment>
+      <div *ngIf="activeTab === 'explore'">
+        <ion-item *ngFor="let item of replyList">
+          <ion-avatar slot="start">
+            <ion-img src="{{item?.get('user')?.get('avatar')}}"></ion-img>
+          </ion-avatar>
+          <ion-label>
+            <h2>{{item?.get('user')?.get('username')}}</h2>
+            <p>{{item?.get('reply')}}</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-input placeholder="添加评论" [ngModelOptions]="{standalone: true}" [(ngModel)]="comment"></ion-input>
+          <ion-button slot="end" (click)="saveComment()">
+            <ion-icon name="send"></ion-icon>
+          </ion-button>
+        </ion-item>
+      </div>
+      <div *ngIf="activeTab === 'video'">
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img src="assets/img/e.png"></ion-img>
+          </ion-avatar>
+          <ion-label>
+            <h2>小雨</h2>
+            <p>1</p>
+          </ion-label>
+          <ion-buttons slot="end">
+            <ion-button (click)="likePost(1)">
+              <ion-icon name="heart" [color]="isPostLiked(1) ? 'danger' : 'medium'"></ion-icon>
+            </ion-button>
+            <ion-button (click)="toggleFavorite(1)">
+              <ion-icon name="star" [color]="isPostFavorite(1) ? 'warning' : 'medium'"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+        </ion-item>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img src="assets/img/f.png"></ion-img>
+          </ion-avatar>
+          <ion-label>
+            <h2>疯狂动物</h2>
+            <p>2</p>
+          </ion-label>
+          <ion-buttons slot="end">
+            <ion-button (click)="likePost(2)">
+              <ion-icon name="heart" [color]="isPostLiked(2) ? 'danger' : 'medium'"></ion-icon>
+            </ion-button>
+            <ion-button (click)="toggleFavorite(2)">
+              <ion-icon name="star" [color]="isPostFavorite(2) ? 'warning' : 'medium'"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+        </ion-item>
+      </div>
+      <div *ngIf="activeTab === 'search'">
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img src="assets/img/a.png"></ion-img>
+          </ion-avatar>
+          <ion-label>
+            <h2>海底</h2>
+            <p>这是一条内容1</p>
+          </ion-label>
+          <ion-button slot="end" (click)="toggleFollow(1)" color="primary"
+            [fill]="isUserFollowed(1) ? 'solid' : 'outline'">
+            {{ isUserFollowed(1) ? '已关注' : '关注' }}
+          </ion-button>
+        </ion-item>
 
-    <ion-item>
-      <ion-avatar slot="start">
-        <ion-img src="assets/img/b.png"></ion-img>
-      </ion-avatar>
-      <ion-label>
-        <h2>用户名2</h2>
-        <p>这是一条内容2</p>
-      </ion-label>
-      <ion-button slot="end" (click)="toggleFollow(2)" color="primary" [fill]="isUserFollowed(2) ? 'solid' : 'outline'">
-        {{ isUserFollowed(2) ? '已关注' : '关注' }}
-      </ion-button>
-    </ion-item>
-   </div>
-   <div *ngIf="activeTab === 'system'">
-    <ion-item>
-      <ion-avatar slot="start">
-        <ion-img src="assets/img/xt.jpg"></ion-img>
-      </ion-avatar>
-      <ion-label>
-        <h2>系统消息标题1</h2>
-        <p>这是一条系统消息内容1</p>
-      </ion-label>
-    </ion-item>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img src="assets/img/b.png"></ion-img>
+          </ion-avatar>
+          <ion-label>
+            <h2>用户名2</h2>
+            <p>这是一条内容2</p>
+          </ion-label>
+          <ion-button slot="end" (click)="toggleFollow(2)" color="primary"
+            [fill]="isUserFollowed(2) ? 'solid' : 'outline'">
+            {{ isUserFollowed(2) ? '已关注' : '关注' }}
+          </ion-button>
+        </ion-item>
+      </div>
+      <div *ngIf="activeTab === 'system'">
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img src="assets/img/xt.jpg"></ion-img>
+          </ion-avatar>
+          <ion-label>
+            <h2>系统消息标题1</h2>
+            <p>这是一条系统消息内容1</p>
+          </ion-label>
+        </ion-item>
 
-    <ion-item>
-      <ion-avatar slot="start">
-        <ion-img src="assets/img/xt.jpg"></ion-img>
-      </ion-avatar>
-      <ion-label>
-        <h2>系统消息标题2</h2>
-        <p>这是一条系统消息内容2</p>
-      </ion-label>
-    </ion-item>
-   </div>
+        <ion-item>
+          <ion-avatar slot="start">
+            <ion-img src="assets/img/xt.jpg"></ion-img>
+          </ion-avatar>
+          <ion-label>
+            <h2>系统消息标题2</h2>
+            <p>这是一条系统消息内容2</p>
+          </ion-label>
+        </ion-item>
+      </div>
+    </div>
   </div>
-</div>
-<ion-item>一键AI
-  <ion-button slot="end" (click)="goToAIChatPage()">
-    <ion-icon name="logo-android"></ion-icon>
-  </ion-button>
-</ion-item>
+  <ion-item>一键AI
+    <ion-button slot="end" (click)="goToAIChatPage()">
+      <ion-icon name="logo-android"></ion-icon>
+    </ion-button>
+  </ion-item>
 </ion-content>

src/app/tab3/tab3.page.ts

@@ -1,7 +1,7 @@
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { ToastController } from '@ionic/angular';
-
+import * as Parse from "parse"
 import Swiper from 'swiper';
 
 
@@ -13,6 +13,7 @@ import Swiper from 'swiper';
 export class Tab3Page implements OnInit {
   @ViewChild("slide1Comp") slide1Comp:ElementRef |undefined
   ngOnInit() {
+    this.getReply()
     // 延迟500毫秒加载
     setTimeout(() => {
       this.initSwiper();
@@ -45,6 +46,38 @@ this.slide1 = new Swiper(this.slide1Comp?.nativeElement, {
     this.activeTab = event.detail.value
     
   }
+  /**
+   * 查询评论列表
+   */
+  replyList:any [] = []
+  async getReply(){
+    let query = new Parse.Query("Discuss")
+    query.include("user")
+    this.replyList = await query.find()
+    console.log(this.replyList);
+  }
+  /**
+   * 保存评论
+   */
+  currentUser:any
+  comment = ''
+  async saveComment(){
+    this.currentUser = Parse.User.current();
+    let com = Parse.Object.extend("Discuss")
+    com = new com()
+    com.set('user',{__type:'Pointer',className:'_User',objectId:this.currentUser?.id})
+    com.set('reply',this.comment)
+       try {
+      await com.save();
+      console.log('保存成功');
+      this.getReply()
+      this.comment = ''
+    } catch (error) {
+     console.error('保存失败',error);
+    }
+  }
+
+
   openSettingsPage() {
     // 打开设置页面 
     this.router.navigate(['/settings']);

src/app/tab4/tab4.page.html

@@ -21,7 +21,7 @@
     <ion-card-content class="user-info" style="background-image: url('https://img-baofun.zhhainiao.com/fs/418d45e9ae341aa1760e2368d166dc3c.jpg');">
       
       <ion-avatar style="margin-left:15px;margin-top:15px; transform:scale(1.8)">
-        <img src="https://ionicframework.com/docs/img/demos/avatar.svg" alt="User Avatar">
+        <img src="{{user?.get('avatar')}}" alt="User Avatar">
       </ion-avatar>
       <ion-card-content>
         <p *ngIf="!user?.id" (click)="openLoginPage()" style="margin-left:10px;margin-top:15px;font-size:20px">登录/注册</p>

src/app/tab4/tab4.page.ts

@@ -111,6 +111,8 @@ export class Tab4Page implements OnInit {
       setInterval(async ()=>{
       this.user = await Parse.User.current()
     },1000)
+    console.log(this.user);
+    
   }
   logout(){
     Parse.User.logOut();