202226701041/TFPower-app/src/app/tab3/tab3.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>动态</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div class="post-input">
    <ion-card>
      <ion-card-header>
        <ion-card-title>发布动态</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-item>
          <ion-input [(ngModel)]="newPostContent" placeholder="写下你的动态..." clearInput></ion-input>
        </ion-item>
        <ion-item>
          <input type="file" (change)="handleFileInput($event)" accept="image/*" />
        </ion-item>
        <ion-button expand="full" (click)="publishPost()">发布动态</ion-button>
      </ion-card-content>
    </ion-card>
  </div>

  <ion-list class="post-list">
    <ion-item *ngFor="let post of posts">
      <ion-avatar slot="start">
        <img [src]="post?.get('user_id')?.avater" alt="Avatar">
      </ion-avatar>
      <ion-label>
        <h2>{{ post?.get('user_id')?.username }}</h2>
        <p>{{ post.get('content') }}</p>
        <img *ngIf="post.get('image_url')" [src]="post?.get('image_url')" style="max-width: 100%;"/>
        <div>
          <ion-button (click)="likePost(post.get('objectId'))">
            <ion-icon [name]="post.liked ? 'thumbs-up' : 'thumbs-up-outline'"></ion-icon> 
            {{ post.liked ? '取消点赞' : '点赞' }}
            <!-- <ion-icon slot="start" name="thumbs-up"></ion-icon>
            {{ post.likes.length }} 点赞 -->
          </ion-button>
        </div>
        <ion-item>
          <ion-input [(ngModel)]="commentInputs[post.get('objectId')]" placeholder="写评论..."></ion-input>
          <ion-button (click)="commentOnPost(post.get('objectId'), commentInputs[post.get('objectId')])">发送</ion-button>
        </ion-item>
        <ion-list>
          <ion-item *ngFor="let comment of post.comments">
            <ion-avatar slot="start">
              <img [src]="comment?.get('user_id')?.avater" alt="Avatar">
            </ion-avatar>
            <ion-label>
              <h2>{{ comment?.get('user_id')?.username }}</h2>
              <p>{{ comment.get('content') }}</p>
            </ion-label>
          </ion-item>
        </ion-list>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>