nova-live/projects/live-app/src/modules/tabs/space/space.component.html

<ion-header [translucent]="true" class="header">
  <div class="top">
    <!-- <div class="more"></div> -->
    <ion-segment
      [scrollable]="true"
      (ionChange)="segmentChanged($event)"
      layout="icon-bottom"
      value="all"
      mode="md"
    >
      <ion-segment-button value="all" class="tabs" content-id="all">
        <ion-label>全部</ion-label>
      </ion-segment-button>
      <ion-segment-button value="self" class="tabs" content-id="self">
        <ion-label>我发布的</ion-label>
      </ion-segment-button>
    </ion-segment>
    <div class="more">
      <ion-button id="post-trigger"
        ><ion-icon name="add-outline"></ion-icon
      ></ion-button>
    </div>
  </div>
</ion-header>
<ion-content class="content">
  <ion-popover
    trigger="post-trigger"
    [dismissOnSelect]="true"
    triggerAction="click"
  >
    <ng-template>
      <ion-list>
        <ion-item
          class="post"
          (click)="toUrl('user/release')"
          [button]="true"
          [detail]="false"
          ><ion-icon name="share-outline"></ion-icon>发布帖子</ion-item
        >
      </ion-list>
    </ng-template>
  </ion-popover>
  <div class="tab-content">
    @for (item of list; track $index) {
    <div class="card">
      <div class="user-data">
        <div
          (click)="toUrl('user/profile/' + item.uid)"
          class="pendant"
          [style.background-image]="
            'url(https://file-cloud.fmode.cn/Qje9D4bqol/20241109/vv1tvb032259054.png)'
          "
        >
          <img [src]="item.avatar" class="avatar" alt="" />
        </div>
        <div class="user-dateil">
          <div class="dateil">
            <div class="user-name">{{ item.nickname }}</div>
            @if (item.isVip) {
            <img src="img/VIP.png" alt="" />
            } @if (item.identyType == 'anchor') {
            <div class="tag">主播</div>
            }
          </div>
          <div class="time">{{ item.formatted_date }}</div>
        </div>
      </div>
      <div class="post-dateil">
        <div class="text-content">{{ item.content }}</div>
        <div class="imgs">
          @for (img of item.images; track $index) {
          <img [src]="img" alt="" (click)="onShowImg(img)" />
          }
        </div>
      </div>
      <div class="tool">
        <div
          [ngClass]="{
            'action-icon': item.isPostLog,
            'tool-item': true
          }"
          (click)="onPostLog(item, $index)"
        >
          <ion-icon name="heart-circle"></ion-icon>
          {{ item.postCount }}
        </div>
        @if (item.uid == user.id) {
          <div class="tool-item" style="color: #1a65eb;" (click)="delPost(item.objectId,$index)">
            <ion-icon name="remove-circle"></ion-icon>
          </div>
        }@else {
          <div class="tool-item" (click)="onReport()">
            <ion-icon name="warning"></ion-icon>
          </div>
        }
      </div>
    </div>
    }
    <ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </div>
</ion-content>
<app-image-preview [image]="currenImg" #preview></app-image-preview>