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('/account/noticelog')">
            <img
              src="img/notice.png"
              class="avatar"
              slot="start"
              alt="avatar"
            />
            <div class="li-right">
              <div class="name">
                系统消息
                <!-- <span class="time">{{ item.createdAt | showDate }}</span> -->
              </div>
              <!-- <div class="message-content">{{ "暂无" }}</div> -->
            </div>
            <ion-icon
              style="color: #afafaf"
              name="chevron-forward-outline"
            ></ion-icon>
          </ion-item>

          <ion-item class="li" (click)="toUrl('/live/call-log')">
            <img
              src="img/通话记录.png"
              class="avatar"
              slot="start"
              alt="avatar"
            />
            <div class="li-right">
              <div class="name">通话记录</div>
              <div class="message-content"></div>
            </div>
            <ion-icon
              style="color: #afafaf"
              name="chevron-forward-outline"
            ></ion-icon>
          </ion-item>
          <ion-item class="li" (click)="toUrl('/live/chat')">
            <img
              src="img/亲密度.png"
              class="avatar"
              slot="start"
              alt="avatar"
            />

            <div class="li-right">
              <div class="name">亲密度</div>
              <div class="message-content"></div>
            </div>
            <ion-icon
              style="color: #afafaf"
              name="chevron-forward-outline"
            ></ion-icon>
          </ion-item>
          <ion-item class="li" (click)="isOpen = true">
            <img
              src="img/小助手.png"
              class="avatar"
              slot="start"
              alt="avatar"
            />
            <div class="li-right">
              <div class="name">小客服</div>
              <div class="message-content"></div>
            </div>
            <ion-icon
              style="color: #afafaf"
              name="chevron-forward-outline"
            ></ion-icon>
          </ion-item>
          <ion-item class="li" (click)="toUrl('/live/chat/global_room')">
            <img
              src="img/世界频道.png"
              class="avatar"
              slot="start"
              alt="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 friends; track $index) {
          <ion-item
            class="li"
            (click)="toUrl('/live/chat/' + item.channel)"
            (touchstart)="startPress()"
            (mousemove)="stopPress()"
          >
            <img [src]="item.avatar" class="avatar" slot="start" alt="avatar" />
            <div class="li-right">
              <div class="name">
                {{ item.nickname || item.name || "用户" + item.uid }}
                <span class="time">{{ item?.createdAt | showDate }}</span>
              </div>
              <div class="message-content">
                {{
                  msgServe.messageMapList[item.channel]?.slice(-1)[0]
                    ?.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?.channel)">
            <ion-avatar slot="start">
              <img [src]="item?.avatar" alt="avatar" />
            </ion-avatar>
            <ion-label>{{
              item.nickname || item.name || "用户" + item.uid
            }}</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>
<ion-modal
  #modal
  trigger="open-modal"
  [isOpen]="isOpen"
  (didDismiss)="isOpen = false"
  [initialBreakpoint]="1"
  [breakpoints]="[0, 1]"
>
  <ng-template>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-button (click)="isOpen = false">关闭</ion-button>
      </ion-buttons>
      <ion-buttons slot="end">
        <ion-button (click)="download()">下载</ion-button>
      </ion-buttons>
    </ion-toolbar>
    <div class="code">
      <img [src]="codeUrl" alt="" />
    </div>
  </ng-template>
</ion-modal>