nova-live/projects/live-app/src/modules/user/gift-log/gift-log.component.html

<nav title="礼物列表"></nav>
<ion-content class="content">
  <ion-segment
    [scrollable]="true"
    (ionChange)="segmentChanged($event)"
    layout="icon-bottom"
    value="from"
    mode="md"
  >
    <ion-segment-button value="from" class="tabs" content-id="from">
      <ion-label>我送出的</ion-label>
    </ion-segment-button>
    <ion-segment-button value="to" class="tabs" content-id="to">
      <ion-label>送给我的</ion-label>
    </ion-segment-button>
  </ion-segment>

  <!-- <div class="list"> -->
  <div class="comment-list">
    @for (item of list; track $index) { @if (active === 'from') {

    <div class="li">
      <div class="li-user">
        <img
          [src]="item?.get('fromUser')?.get('avatar')"
          alt=""
          class="avatar"
        />
      </div>
      <div class="li-right">
        <div class="li-row">
          <div class="nickname">
            {{ item?.get("fromUser")?.get("nickname") }}
            <div
              class="level"
              [style.background-color]="
                aiChatServ.userLevelColor[
                  item?.get('fromUser').get('achievementCount')
                ]?.color
              "
            >
              LV{{ item?.get("fromUser").get("achievementCount") }}
            </div>
          </div>
          <div class="gift">
            <img [src]="item?.get('image')" alt="" />x{{ item?.get("index") }}
          </div>
        </div>
        <div class="li-row">
          <div class="time">
            {{ item.createdAt | date : "yyyy-MM-dd HH:mm" }}
          </div>
          <div class="credit">
            钻石：<span style="color: red">{{ item?.get("gold") }}</span>
          </div>
        </div>
      </div>
    </div>

    }@else {
    <div class="li">
      <div class="li-user">
        <img
          [src]="item?.get('fromUser')?.get('avatar')"
          alt=""
          class="avatar"
        />
      </div>
      <div class="li-right">
        <div class="li-row">
          <div class="nickname">
            {{ item?.get("fromUser")?.get("nickname") }}
            <div
              class="level"
              [style.background-color]="
                aiChatServ.userLevelColor[
                  item?.get('fromUser').get('achievementCount')
                ]?.color
              "
            >
              LV{{ item?.get("fromUser").get("achievementCount") }}
            </div>
          </div>
          <div class="gift">
            <img [src]="item?.get('image')" alt="" />x{{ item?.get("index") }}
          </div>
        </div>
        <div class="li-row">
          <div class="time">
            {{ item.createdAt | date : "yyyy-MM-dd HH:mm" }}
          </div>
          <div class="credit">
            钻石：<span style="color: red">{{ item?.get("gold") }}</span>
          </div>
        </div>
      </div>
    </div>
    } }
  </div>
  @if (disbable) {
  <ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
  }
</ion-content>