0710

src/app/contact/chat/chat.page.html

@@ -10,46 +10,22 @@
 <ion-content class="chat-content">
   <ion-list lines="none">
     <ion-item *ngFor="let message of messageList" class="message-item">
-      <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/clock.png'"> -->
-      </ion-avatar>
-      <ion-avatar slot="start" *ngIf="message?.get('receiveUser')?.id === targetId" class="message-avatar received-avatar">
-        <img style="margin-top: 18px;" [src]="'/assets/img/clock.png'">
+        <img [src]="message?.get('sendUser')?.get('avatarUrl')">
       </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>
+                 [class.sent-message-container]="message?.get('sendUser')?.id === user?.id"
+                 [class.received-message-container]="message?.get('receiveUser')?.id === user?.id">
+        <div class="message-details"
+             [ngClass]="{'sent-message-details': message?.get('sendUser')?.id === user?.id, 'received-message-details': message?.get('receiveUser')?.id === user?.id}">
+          <p class="message-text">{{ message?.get("contentJson")?.content }}</p>
           <div class="message-time">
-            <p>{{ message.time }}</p>
+            <p>{{ message.createdAt|date:'HH:mm:ss' }}</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 slot="start" *ngIf="message?.get('receiveUser')?.id === user?.id" class="message-avatar received-avatar">
+        <img [src]="message?.get('receiveUser')?.get('avatarUrl')">
       </ion-avatar>
     </ion-item>
   </ion-list>
@@ -62,5 +38,4 @@
       <ion-button (click)="sendMessage()" color="primary" [disabled]="!newMessage">Send</ion-button>
     </ion-buttons>
   </ion-toolbar>
-</ion-footer>
-
+</ion-footer>

src/app/contact/chat/chat.page.scss

@@ -1,64 +1,80 @@
-.chat-content {
+.sent-message {
+  background-color: #dcf8c6; /* 设置发送消息的背景颜色为绿色 */
+  align-self: flex-end; /* 将发送的消息右对齐 */
+  border-radius: 10px;
   padding: 10px;
+  margin-bottom: 4px;
+  max-width: 70%; /* 适当调整最大宽度 */
+  text-align: right; /* 文本右对齐 */
 }
-
-ion-item.message-item {
+.sent-message-container {
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-bottom: 10px;
-  max-width: 80%; /* 控制消息框的最大宽度 */
+  justify-content: flex-end;
 }
 
-.message-container {
-  padding: 8px 12px;
-  display: inline-block;
-  max-width: 80%; /* 控制消息内容的最大宽度 */
+.received-message-container {
+  display: flex;
+  justify-content: flex-start;
 }
 
-.sent {
-  justify-content: flex-end; /* 将发送的消息右对齐 */
+.sent-avatar {
+  display: none;
 }
 
-.received {
-  justify-content: flex-start; /* 将接收的消息左对齐 */
+.received-avatar {
+  display: none;
 }
 
-.sent-message-container {
-  background-color: #dcf8c6; /* 发送消息的背景颜色 */
-  align-self: flex-end;
+.sent-message-details {
+  background-color: #dcf8c6; /* 绿色，发送者消息背景颜色 */
+  color: white; /* 文字颜色为白色 */
   border-radius: 10px;
-  padding: 10px;
-  margin-bottom: 4px;
-  max-width: 70%; /* 适当调整最大宽度 */
-  text-align: right; /* 文本右对齐 */
+  padding: 8px;
 }
 
-.received-message-container {
-  background-color: #f0f0f0; /* 接收消息的背景颜色 */
-  align-self: flex-start;
+.received-message-details {
+  background-color: #E0E0E0; /* 灰色，接收者消息背景颜色 */
   border-radius: 10px;
-  padding: 10px;
-  margin-bottom: 4px;
-  max-width: 70%; /* 适当调整最大宽度 */
-  text-align: left; /* 文本左对齐 */
+  padding: 8px;
 }
-.sent-message-container[_ngcontent-ng-c914708361]{
-  max-width: 100%;
+.sent-message-details {
+  background-color: #dcf8c6; /* 绿色 */
+  color: white; /* 文字颜色为白色 */
+  border-radius: 10px;
+  padding: 8px;
 }
-ion-avatar[_ngcontent-ng-c914708361]{
-  margin-top:28px;
+
+.received-message-details {
+  background-color: #E0E0E0; /* 灰色 */
+  border-radius: 10px;
+  padding: 8px;
 }
-.list-md{
-  width: 123%;
+.sent-message-container {
+  text-align: right;
 }
 
+.received-message-container {
+  text-align: left;
+}
 
-.received-message-container[_ngcontent-ng-c914708361]{
-  max-width: 100%;
+.sent-avatar {
+  float: right;
 }
 
-.sent-message, .received-message {
+.received-avatar {
+  float: left;
+}
+.received-message {
+  background-color: #f0f0f0; /* 设置接收消息的背景颜色为灰白色 */
+  align-self: flex-start; /* 将接收的消息左对齐 */
+  border-radius: 10px;
+  padding: 10px;
+  margin-bottom: 4px;
+  max-width: 70%; /* 适当调整最大宽度 */
+  text-align: left; /* 文本左对齐 */
+}
+
+.message-text {
   color: #333; /* 消息文本颜色 */
 }
 
@@ -73,9 +89,9 @@ ion-avatar[_ngcontent-ng-c914708361]{
   flex-direction: column;
 }
 
-ion-avatar {
+.message-avatar {
   width: 32px;
   height: 32px;
   margin-left: 8px;
   margin-right: 8px;
-}
+}

src/app/contact/session/session.page.ts

@@ -11,13 +11,13 @@ export class SessionPage {
   skeletonList: { username: string, avatar: string, lastMessageTime: string, lastMessage: string }[] = [
     {
       username: 'Alice',
-      avatar: '/assets/img/female.png',
+      avatar: '/assets/touxiang2.png',
       lastMessageTime: '10:30 AM',
       lastMessage: 'Hey, how are you?',
     },
     {
       username: 'Bob',
-      avatar: '/assets/img/male.png',
+      avatar: '/assets/touxiang1.png',
       lastMessageTime: 'Yesterday',
       lastMessage: 'Let\'s meet tomorrow.',
     },