nova-live/projects/live-app/src/modules/tabs/notice/notice.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="notice"
      mode="md"
    >
      <ion-segment-button value="notice" class="tabs" content-id="notice">
        <ion-label>消息</ion-label>
      </ion-segment-button>
      <ion-segment-button value="friends" class="tabs" content-id="friends">
        <ion-label>好友</ion-label>
      </ion-segment-button>
    </ion-segment>
    <div class="more">
      <ion-button id="click-trigger"
        ><ion-icon name="ellipsis-horizontal-outline"></ion-icon
      ></ion-button>
    </div>
  </div>
</ion-header>
<ion-content class="content">
  <ion-searchbar animated="true" placeholder="搜索"></ion-searchbar>
  <ion-popover
    trigger="click-trigger"
    [dismissOnSelect]="true"
    triggerAction="click"
  >
    <ng-template>
      <ion-list>
        <ion-item class="clear" [button]="true" [detail]="false"
          >已读所有消息</ion-item
        >
      </ion-list>
    </ng-template>
  </ion-popover>
  <ion-segment-view>
    <ion-segment-content id="notice">
      <div class="notice-list" (touchmove)="onMousemove($event)">
        <ion-list>
          <ion-item class="li" (click)="toUrl('/live/chat/global_room')">
            <ion-avatar slot="start">
              <img src="img/世界频道.png" alt="avatar" />
            </ion-avatar>
            <div class="li-right">
              <div class="name">
                世界频道
                <!-- <span class="time">{{
                  msgServe.messageMapList['global_room'].slice(-1)[0].timeStamp | showDate
                }}</span> -->
              </div>
              <div class="message-content">
                {{ '点击进入频道聊天' }}
              </div>
            </div>
          </ion-item>
          @for (item of noticeList; track $index) {
          <ion-item
            class="li"
            (click)="toUrl('/live/chat')"
            (touchstart)="startPress()"
            (mousemove)="stopPress()"
          >
            <ion-avatar slot="start">
              <img [src]="item.avatar" alt="avatar" />
            </ion-avatar>
            <div class="li-right">
              <div class="name">
                系统消息
                <span class="time">{{ item.createdAt | showDate }}</span>
              </div>
              <div class="message-content">{{ item.content || "暂无" }}</div>
            </div>
          </ion-item>
          }
        </ion-list>
      </div>
    </ion-segment-content>
    <ion-segment-content id="friends">
      <div class="notice-list" (touchmove)="onMousemove($event)">
        <ion-list>
          @for (item of friends; track $index) {
          <ion-item (click)="toUrl('/live/chat/' + item?.uid)">
            <ion-avatar slot="start">
              <img [src]="item?.avatar" alt="avatar" />
            </ion-avatar>
            <ion-label>{{ item?.name || item?.nickname }}</ion-label>
          </ion-item>
          }
        </ion-list>
      </div>
    </ion-segment-content>
  </ion-segment-view>
</ion-content>
<ion-alert
  [backdropDismiss]="false"
  [isOpen]="showModal"
  trigger="present-alert"
  header="删除与ta的聊天记录"
  [buttons]="alertButtons"
></ion-alert>