nova-live/projects/live-app/src/modules/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">{{
      uid
        ? targetUser?.get("nickname") ||
          targetUser?.get("name") ||
          "用户" + targetUser?.id
        : "世界频道"
    }}</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>
        @if (uid) {
        <ion-item (click)="onRjects()" class="clear" [button]="true" [detail]="false">
          <ion-icon name="person-remove-outline"></ion-icon
          >{{ this.isRet?.get('isAward') ? "移除黑名单" : "加入黑名单" }}</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"
          (click)="deleteChatLog()"
          ><ion-icon name="trash-outline"></ion-icon>删除聊天记录</ion-item
        >
      </ion-list>
    </ng-template>
  </ion-popover>

  <div #scrollMsg id="scrollMsg" class="scroll">
    @for (item of msgServe.messageMapList[channel]; track $index) {
    <div class="clearfix message-box">
      @if ($index == 0 || item.timestamp -
      msgServe.messageMapList[channel][$index-1].timestamp > 600) {
      <div class="time-box">
        @if (item.istoday) {
        <div class="time">{{ item.timestamp | showDate }}</div>
        }@else {
        <div class="time">
          {{ item.timestamp | showDate }}
        </div>
        }
      </div>
      }

      <!-- 他人信息 -->
      @if (!item.is_self) {
      <div class="msg-bloak no_self">
        <img
          class="avatar fl"
          (click)="toUrl('user/profile/' + item.publisher)"
          mode="widthFix"
          src="{{ item.avatar }}"
        />
        <!-- 文字消息 msg_type == 1 || text -->
        @if (item.msg_type == 1 || item.msg_type == 'text') {
        <div class="msg-card">
          @if(channel == 'global_room'){
          <span class="text-item_status">{{
            item.name || "用户" + item.publisher
          }}</span>
          }
          <div class="text-item fl text-item_left">
            <p>{{ item.content }}</p>
          </div>
        </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)"
        />
        <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]="!uid && !accServ.userVip?.rights?.['all-chat'] ? '请开通会员享受世界频道畅聊' : '文明发言'"
      [(ngModel)]="text"
      (keydown)="comfirmText($event)"
      [disabled]="!uid && !accServ.userVip?.rights?.['all-chat']"
    >
    </ion-input>
    <div
      [ngClass]="{
        'tools-maxwid': uid && profile?.get('identyType') === 'anchor',
        tools: true
      }"
      slot="end"
    >
      <ion-icon name="happy-outline" (click)="changeShowEmoji()"></ion-icon>
      @if (uid && profile?.get("identyType") === 'anchor') {
      <ion-icon
        name="videocam-outline"
        (click)="call.toLiveContact()"
      ></ion-icon>
      } @if (uid && profile?.get("identyType") === 'anchor') {
      <ion-icon name="gift-outline" (click)="gift.openModal()"></ion-icon>
      }
      <span class="splice">|</span>
      <!-- <div class="send">发送</div> -->
      <ion-button
        class="send"
        fill="outline"
        size="small"
        [disabled]="text.length == 0 || disabled"
        (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 aiServ.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>
<app-gift-modal
  #gift
  (sendEmit)="onSendGift()"
  [toUid]="this.uid"
></app-gift-modal>
@if(profile?.id){
<app-call-modal #call [profile]="profile"></app-call-modal>
}