nova-live/projects/live-app/src/moduls/live/chat/chat.component.html

<ion-header [translucent]="true" class="header">
  <ion-toolbar class="toolbar">
    <ion-buttons slot="start" (click)="onBack()">
      <ion-icon
        name="chevron-back-outline"
        style="width: 6.4vw; height: 6.4vw; color: #000000"
      ></ion-icon>
    </ion-buttons>
    <ion-title class="title">{{ targetUser?.get('nickname') }}</ion-title>
    <ion-buttons slot="end" id="option-trigger">
      <ion-icon name="ellipsis-horizontal-outline"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content
  [scrollEvents]="true"
  [fullscreen]="true"
  (ionScrollStart)="handleScrollStart()"
  (ionScroll)="handleScroll($any($event))"
  (ionScrollEnd)="handleScrollEnd()"
  class="content"
  (click)="changeShowEmoji(true)"
>
  <ion-popover
    trigger="option-trigger"
    [dismissOnSelect]="true"
    triggerAction="click"
  >
    <ng-template>
      <ion-list>
        <ion-item class="clear" [button]="true" [detail]="false">
          <ion-icon name="person-remove-outline"></ion-icon>加入黑名单</ion-item
        >
        <ion-item class="clear" [button]="true" [detail]="false"
          ><ion-icon name="star-outline"></ion-icon>添加关注</ion-item
        >
        <ion-item class="clear" [button]="true" [detail]="false"
          ><ion-icon name="trash-outline"></ion-icon>删除聊天记录</ion-item
        >
      </ion-list>
    </ng-template>
  </ion-popover>

  <div id="container" style="overflow: hidden">
    @for (item of list.data; track $index) {
    <div class="clearfix message-box">
      @if ($index == 0 || item.create_time - list.data[$index-1].create_time >
      60) {
      <div class="time-box">
        @if (item.istoday) {
        <div class="time">{{ item.timeStamp | date : "HH:mm" }}</div>
        }@else {
        <div class="time">
          {{ item.timeStamp | date : "yyyy年MM月dd日 HH:mm" }}
        </div>
        }
      </div>
      }

      <!-- 他人信息 -->
      @if (!item.is_self) {
      <div class="msg-bloak no_self">
        <img class="avatar fl" mode="widthFix" src="{{ item.avatar }}" />
        <!-- 文字消息 msg_type == 1 || text -->
        @if (item.msg_type == 1 || item.msg_type == 'text') {
        <div class="text-item fl text-item_left">
          <p>{{ item.content }}</p>
        </div>
        }
        <!-- 图片消息 msg_type == 2 || img -->
        @else if(item.msg_type == 2 || item.msg_type == 'img' || item.msg_type
        == 'image') {
        <img
          class="img-item fl"
          [src]="item.content"
          (click)="predivimg(item.content)"
        />
        } @else if (item.msg_type == 3) {
        <div class="text-item fl text-item_left">
          <p>{{ item.content }}</p>
        </div>
        }
      </div>
      } @else {
      <div class="msg-bloak self">
        <!-- 自己信息 -->
        @if (item.msg_type == 1 || item.msg_type == 'text') {
        <div class="text-item fr text-item_right">
          <p>{{ item.content }}</p>
        </div>
        } @if (item.msg_type == 2 || item.msg_type == 'img' || item.msg_type ==
        'image') {
        <img
          class="img-item fr"
          src="{{ item.content }}"
          (click)="predivimg(item.content)"
          bindtap="predivimg"
          data-src="{{ item.content }}"
        />
        } @if (item.msg_type == 3) {
        <div class="text-item fr text-item_right">
          <p>{{ item.content }}</p>
        </div>
        }
        <img class="avatar fr" [src]="item.avatar" />
      </div>
      }
    </div>
    }
  </div>
</ion-content>
<ion-footer>
  <ion-toolbar class="footer-tool">
    <ion-input
      slot="start"
      labelPlacement="stacked"
      [clearInput]="true"
      placeholder="和ta说点什么"
      [(ngModel)]="text"
      (keydown)="comfirmText($event)"
    >
    </ion-input>
    <div class="tools" slot="end">
      <ion-icon name="happy-outline" (click)="changeShowEmoji()"></ion-icon>
      <ion-icon name="videocam-outline"></ion-icon>
      <ion-icon name="gift-outline" (click)="isOpen = true"></ion-icon>
      <span class="splice">|</span>
      <!-- <div class="send">发送</div> -->
      <ion-button
        class="send"
        fill="outline"
        size="small"
        [disabled]="text.length == 0"
        (click)="comfirmText()"
        >发送</ion-button
      >
    </div>
  </ion-toolbar>
  <div [style.height]="height + 'px'"></div>
  @if (showEmoji) {
  <div class="b-1px-b"></div>
  } @if (showEmoji) {
  <div class="emoji-content">
    <div class="emoji-box">
      @for (item of emojis; track $index) {
      <div class="emoji-item">
        <div class="emoji-img" (click)="emojiChoose(item.char)">
          {{ item.char }}
        </div>
      </div>
      }
      <div class="emoji-item__del" (click)="delEmoji()">
        <img
          class="emoji-img"
          src="https://common.file.futurestack.cn/images/wxapp/card_multi/images//chat/del.svg"
        />
      </div>
    </div>
  </div>
  }
</ion-footer>
<ion-modal
  (click)="isOpen = false"
  (didDismiss)="dismiss($event)"
  [isOpen]="isOpen"
  [initialBreakpoint]="0.5"
  [breakpoints]="[0, 0.5, 1]"
>
  <ng-template>
    <div class="block">敬请期待</div>
  </ng-template>
</ion-modal>