tab3.page.html 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <ion-header [translucent]="true">
  2. <ion-toolbar>
  3. <ion-title>动态</ion-title>
  4. </ion-toolbar>
  5. </ion-header>
  6. <ion-content [fullscreen]="true">
  7. <div class="post-input">
  8. <ion-card>
  9. <ion-card-header>
  10. <ion-card-title>发布动态</ion-card-title>
  11. </ion-card-header>
  12. <ion-card-content>
  13. <ion-item>
  14. <ion-input [(ngModel)]="newPostContent" placeholder="写下你的动态..." clearInput></ion-input>
  15. </ion-item>
  16. <ion-item>
  17. <input type="file" (change)="handleFileInput($event)" accept="image/*" />
  18. </ion-item>
  19. <ion-button expand="full" (click)="publishPost()">发布动态</ion-button>
  20. </ion-card-content>
  21. </ion-card>
  22. </div>
  23. <ion-list class="post-list">
  24. <ion-item *ngFor="let post of posts">
  25. <ion-avatar slot="start">
  26. <img [src]="post?.get('user_id')?.avater" alt="Avatar">
  27. </ion-avatar>
  28. <ion-label>
  29. <h2>{{ post?.get('user_id')?.username }}</h2>
  30. <p>{{ post.get('content') }}</p>
  31. <img *ngIf="post.get('image_url')" [src]="post?.get('image_url')" style="max-width: 100%;"/>
  32. <div>
  33. <ion-button (click)="likePost(post.get('objectId'))">
  34. <ion-icon [name]="post.liked ? 'thumbs-up' : 'thumbs-up-outline'"></ion-icon>
  35. {{ post.liked ? '取消点赞' : '点赞' }}
  36. <!-- <ion-icon slot="start" name="thumbs-up"></ion-icon>
  37. {{ post.likes.length }} 点赞 -->
  38. </ion-button>
  39. </div>
  40. <ion-item>
  41. <ion-input [(ngModel)]="commentInputs[post.get('objectId')]" placeholder="写评论..."></ion-input>
  42. <ion-button (click)="commentOnPost(post.get('objectId'), commentInputs[post.get('objectId')])">发送</ion-button>
  43. </ion-item>
  44. <ion-list>
  45. <ion-item *ngFor="let comment of post.comments">
  46. <ion-avatar slot="start">
  47. <img [src]="comment?.get('user_id')?.avater" alt="Avatar">
  48. </ion-avatar>
  49. <ion-label>
  50. <h2>{{ comment?.get('user_id')?.username }}</h2>
  51. <p>{{ comment.get('content') }}</p>
  52. </ion-label>
  53. </ion-item>
  54. </ion-list>
  55. </ion-label>
  56. </ion-item>
  57. </ion-list>
  58. </ion-content>