src/app/consult/consult.page.html

@@ -1,16 +1,35 @@
-<ion-buttons expand="full" fill="clear">
-  <ion-back-button defaultHref="/tabs/tab2"></ion-back-button>
-</ion-buttons>
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>consult</ion-title>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab2"></ion-back-button>
+    </ion-buttons>
+    <ion-title>咨询</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+  <ion-list lines="none">
+    <ion-item *ngFor="let message of messages" [class]="message.sender === 'customer' ? 'customer-message' : 'designer-message'">
+      <ion-avatar slot="start" *ngIf="message.sender === 'designer'">
+        <img src="https://img.zcool.cn/community/01b1ae5c598973a801213f26e9319f.jpg@1280w_1l_2o_100sh.jpg">
+      </ion-avatar>
+      <ion-label>
+        <ng-container *ngFor="let imageUrl of message.imageUrls">
+          <img [src]="imageUrl">
+        </ng-container>
+        <p>{{ message.text }}</p>
+        <p *ngIf="message.details">{{ message.details }}</p>
+      </ion-label>
+      <ion-avatar slot="end" *ngIf="message.sender === 'customer'">
+        <img src="https://img.zcool.cn/community/015ac85f110b9fa801206621387957.png@1280w_1l_2o_100sh.png">
+      </ion-avatar>
+    </ion-item>
+  </ion-list>
+
+  <ion-footer>
     <ion-toolbar>
-      <ion-title size="large">consult</ion-title>
+      <ion-input placeholder="请输入您想要询问的信息" [(ngModel)]="newMessage" (keyup.enter)="sendMessage()"></ion-input>
+      <ion-button slot="end" (click)="sendMessage()">Send</ion-button>
     </ion-toolbar>
-  </ion-header>
-</ion-content>
+  </ion-footer>
+</ion-content>

src/app/consult/consult.page.scss

@@ -0,0 +1,9 @@
+// 定义文字颜色
+$text-color: #333; // 设置为您想要的颜色值
+
+// 定义文字大小
+$text-font-size: 16px; // 设置为您想要的字体大小
+.customer-message p, .designer-message p {
+    color: $text-color; // 应用定义的文字颜色
+    font-size: $text-font-size; // 应用定义的文字大小
+  }

src/app/consult/consult.page.ts

@@ -1,15 +1,41 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-consult',
-  templateUrl: './consult.page.html',
-  styleUrls: ['./consult.page.scss'],
+  templateUrl: 'consult.page.html',
+  styleUrls: ['consult.page.scss'],
 })
-export class ConsultPage implements OnInit {
+export class ConsultPage {
+  messages: { text: string, sender: string, imageUrls?: string[], details?: string}[] = [];
+  newMessage: string = '';
 
-  constructor() { }
+  constructor() {}
 
-  ngOnInit() {
-  }
+  sendMessage() {
+    if (this.newMessage.trim() !== '') {
+      this.messages.push({ text: this.newMessage, sender: 'customer' });
+
+      // 检测关键词并触发自动回复
+      if (this.newMessage.toLowerCase().includes('你好')||this.newMessage.toLowerCase().includes('您好')||this.newMessage.toLowerCase().includes('晚上好')) {
+        this.messages.push({ text: '你好！我有什么可以帮您的吗?', sender: 'designer' });
+      } 
+      else if (this.newMessage.toLowerCase().includes('帮助')) {
+        this.messages.push({ text: '当然可以，请提供更多细节以便我能更好地为您服务', sender: 'designer' });
+      } 
+      else if (this.newMessage.toLowerCase().includes('案例')) {
+        this.messages.push({ text: '当然!这是我以前做过的一些案例:', sender: 'designer' });
+        
+        this.messages.push({ text: '案例1: 现代简约风格装修案例', sender: 'designer', imageUrls: ['https://img.zcool.cn/community/0188dc5df09c80a8012097b3b394ed.jpg@1280w_1l_2o_100sh.jpg', 'https://tgi1.jia.com/120/090/20090020.jpg', 'https://imgs.bzw315.com/uploadfiles/image/2018/6/28/201806281006255690.jpeg?x-oss-process=image/crop,nw/sharpen,100/watermark,image_V2F0ZXJtYXJrLnBuZw==,t_90,g_center,x_10,y_10'], details: '客厅：选择白色和灰色为主色调，搭配简约风格的家具，如舒适的布艺沙发、简约的茶几等，营造出清爽、舒适的氛围。墙面采用白色涂料，搭配少量的装饰画或植物，让整体空间更加通透明亮。 卧室：以白色和浅木色为主色调，选择简约风格的床和衣柜，搭配柔和的灯光和窗帘，营造出轻松宁静的睡眠环境。 厨房：采用简约的橱柜设计，搭配不锈钢厨具和现代感强的灯具，让厨房空间看起来整洁明亮。' });
 
-}
+        this.messages.push({ text: '案例2: 北欧风格装修案例', sender: 'designer', imageUrls: ['https://img.zcool.cn/community/017a835d64fd49a8012187f4406e52.jpg@3000w_1l_0o_100sh.jpg', 'https://tgi13.jia.com/123/828/23828347.jpg', 'https://tgi1.jia.com/125/508/25508350.m.jpg'], details: ' 客厅：选用白色和灰色为主色调，搭配北欧风格的家具和装饰品，如简约的木质家具、北欧风格的地毯等，营造出清新、自然的氛围。墙面采用白色或浅灰色涂料，搭配少量的北欧风格装饰画或壁挂物件，让空间更具温暖感。\n卧室：以白色和淡蓝色为主色调，选择北欧风格的床品和窗帘，搭配简约的木质床和衣柜，营造出舒适、清新的睡眠空间。\n餐厅：采用木质餐桌和椅子，搭配简约的餐具和灯具，营造出舒适宜人的用餐氛围。' });
+      }
+      else if (this.newMessage.toLowerCase().includes('联系')) {
+        this.messages.push({ text: '请加我的微信：“xxxxxxxx”或拨打电话“189xxxxxxxx”和我取得联系以探讨您所需要的装修设计。', sender: 'designer' });
+      } 
+      else {
+        this.messages.push({ text: '很抱歉我没理解您的意思，请再说一遍。', sender: 'designer' });
+      }
+      this.newMessage = ''; // 清空输入框
+    }
+  }
+}