APPmy/src/app/feedback/feedback.page.html

<ion-header [translucent]="true">
  <ion-toolbar style="height: 60px">
    <!-- <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab4"></ion-back-button>
    </ion-buttons> -->
    <ion-title style="font-size:25px" >反馈</ion-title>
  </ion-toolbar>
</ion-header>

<!-- <ion-content>
  <ion-list lines="none">
    <ion-item *ngFor="let message of chatMessages" [class.sender]="message.sender === 'customer'">
      <ion-avatar slot="start">
        <ion-img [src]="message.avatar"></ion-img>
      </ion-avatar>
      <ion-label>{{ message.text }}</ion-label>
    </ion-item>
  </ion-list>
  


  <ion-footer>
    <ion-input placeholder="输入消息..." [(ngModel)]="newMessage"></ion-input>
    <ion-button expand="block" (click)="sendMessage()">发送</ion-button>
  </ion-footer>
</ion-content> -->

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab4"></ion-back-button>
    </ion-buttons>
    <ion-title>{{ contact?.get('name') || contact?.get('to')?.get("nickname") ||contact?.get('to')?.get('username') }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="chat-content">
  <ion-list lines="none">
    <ion-item *ngFor="let message of messageList" class="message-item">
      1{{message?.get('sendUser')?.objectId}} - 2{{user?.id}}
      3{{message?.get('receiveUser')?.objectId}} - 4{{targetId}}
      <ion-label class="message-container"
                 [class.sent-message-container]="message?.get('sendUser')?.id === user?.id"
                 [class.received-message-container]="message?.get('receiveUser')?.id === targetId">
        <div class="message-details">
          <p [class.sent-message]="message?.get('sendUser')?.id === user?.id"
             [class.received-message]="message?.get('receiveUser')?.id === targetId"
             class="message-text">{{ message?.get("contentJson")?.content }}</p>
          <div class="message-time">
            <p>{{ message.createdAt|date:'HH:mm:ss' }}</p>
          </div>
        </div>
      </ion-label>
      <ion-avatar slot="end" *ngIf="message?.get('sendUser')?.id === user?.id" class="message-avatar sent-avatar">
        <img [src]="'/assets/img/a.png'">
      </ion-avatar>
      <ion-avatar slot="start" *ngIf="message?.get('receiveUser')?.id === targetId" class="message-avatar received-avatar">
        <img [src]="'/assets/img/b.png'">
      </ion-avatar>
    </ion-item>
  </ion-list>

  <ion-list lines="none">
    <ion-item *ngFor="let message of messages" class="message-item">
      <ion-label class="message-container"
                 [class.sent-message-container]="message.type === 'sent'"
                 [class.received-message-container]="message.type === 'received'">
        <div class="message-details">
          <p [class.sent-message]="message.type === 'sent'"
             [class.received-message]="message.type === 'received'"
             class="message-text">{{ message.text }}</p>
          <div class="message-time">
            <p>{{ message.time }}</p>
          </div>
        </div>
      </ion-label>
      <ion-avatar slot="end" *ngIf="message.type === 'sent'" class="message-avatar sent-avatar">
        <img [src]="message.avatar">
      </ion-avatar>
      <ion-avatar slot="start" *ngIf="message.type === 'received'" class="message-avatar received-avatar">
        <img [src]="message.avatar">
      </ion-avatar>
    </ion-item>
  </ion-list>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-input placeholder="Type your message..." [(ngModel)]="newMessage" clearInput></ion-input>
    <ion-buttons slot="end">
      <ion-button (click)="sendMessage()" color="primary" [disabled]="!newMessage">Send</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>