tab2

package-lock.json

@@ -25,6 +25,7 @@
         "@capacitor/keyboard": "6.0.1",
         "@capacitor/status-bar": "6.0.0",
         "@ionic/angular": "^8.0.0",
+        "@ionic/storage-angular": "^4.0.0",
         "ionicons": "^7.0.0",
         "node-nlp": "^4.27.0",
         "parse": "^5.3.0",
@@ -3561,6 +3562,29 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@ionic/storage": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/@ionic/storage/-/storage-4.0.0.tgz",
+      "integrity": "sha512-3N21P19Xk6cICLnSXZ3ilRqbSXAGSFeIF3HNqz+1kARcm0UFT/vwmZreaXtFyq437vvEWOfJ2enlj3JHLKS0FA==",
+      "license": "MIT",
+      "dependencies": {
+        "localforage": "^1.9.0"
+      }
+    },
+    "node_modules/@ionic/storage-angular": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/@ionic/storage-angular/-/storage-angular-4.0.0.tgz",
+      "integrity": "sha512-FeSmCMCm1bMRfu5TFSqLtjdfEo/dLLUhLIrPmbhSYomVZdV/dNn4mBZv9SabyxSqn4bF31hw40y+4buhG+durQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@ionic/storage": "^4.0.0",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "*",
+        "rxjs": "*"
+      }
+    },
     "node_modules/@ionic/utils-array": {
       "version": "2.1.5",
       "resolved": "https://registry.npmmirror.com/@ionic/utils-array/-/utils-array-2.1.5.tgz",
@@ -10975,6 +10999,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/immutable": {
       "version": "4.3.6",
       "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.6.tgz",
@@ -12536,6 +12566,15 @@
         }
       }
     },
+    "node_modules/lie": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/lie/-/lie-3.1.1.tgz",
+      "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "2.0.4",
       "resolved": "https://registry.npmmirror.com/lines-and-columns/-/lines-and-columns-2.0.4.tgz",
@@ -12588,6 +12627,15 @@
         "node": ">= 12.13.0"
       }
     },
+    "node_modules/localforage": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmmirror.com/localforage/-/localforage-1.10.0.tgz",
+      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "lie": "3.1.1"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-6.0.0.tgz",

package.json

@@ -30,6 +30,7 @@
     "@capacitor/keyboard": "6.0.1",
     "@capacitor/status-bar": "6.0.0",
     "@ionic/angular": "^8.0.0",
+    "@ionic/storage-angular": "^4.0.0",
     "ionicons": "^7.0.0",
     "node-nlp": "^4.27.0",
     "parse": "^5.3.0",

src/app/app-routing.module.ts

@@ -72,6 +72,10 @@ const routes: Routes = [
   {
     path: 'babylon',
     loadChildren: () => import('./babylon/babylon.module').then( m => m.BabylonPageModule)
+  },
+  {
+    path: 'yuyue',
+    loadChildren: () => import('./yuyue/yuyue.module').then( m => m.YuyuePageModule)
   }
 
 

src/app/consult/consult.page.ts

@@ -19,9 +19,12 @@ export class ConsultPage {
       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('帮助')) {
+      else if (this.newMessage.toLowerCase().includes('帮助')||this.newMessage.toLowerCase().includes('咨询')) {
         this.messages.push({ text: '当然可以，请提供更多细节以便我能更好地为您服务', sender: 'designer' });
       } 
+      else if (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' });
         

src/app/tab2/tab2.page.html

@@ -37,6 +37,19 @@
             <ion-text>{{ company.starRating }}</ion-text>
             <ion-label>评价数量:</ion-label>
             <ion-text>{{ company.reviewCount }}</ion-text>
+            <!-- 公司照片墙 -->
+<ion-card class="company-card">
+  <ion-card-header>
+    公司照片墙:
+  </ion-card-header>
+  <ion-card-content>
+    <ion-row>
+      <ion-col size="6" *ngFor="let photo of company.photos">
+        <ion-img [src]="photo" alt="Company Photo"></ion-img>
+      </ion-col>
+    </ion-row>
+  </ion-card-content>
+</ion-card>
           <!-- 公司简介 -->
           <ion-card class="company-card">
             <ion-card-header>
@@ -75,7 +88,7 @@
           </ion-card>
           <!-- 底部按钮 -->
           <ion-button expand="full" fill="clear">电话</ion-button>
-          <ion-button expand="full" fill="clear">预约</ion-button>
+          <ion-button expand="full" fill="clear" (click)="openyuyuePage()">预约</ion-button>
           <ion-button expand="full" fill="clear">咨询</ion-button>
           <ion-button expand="full" fill="clear">查看案例</ion-button>
         </ion-card-content>
@@ -196,7 +209,7 @@
   
           <!-- 底部按钮 -->
           <ion-button expand="full" fill="clear">电话</ion-button>
-          <ion-button expand="full" fill="clear">预约</ion-button>
+          <ion-button expand="full" fill="clear" (click)="openyuyuePage()">预约</ion-button>
           <ion-button expand="full" fill="clear">咨询</ion-button>
           <ion-button expand="full" fill="clear">查看案例</ion-button>
   

src/app/tab2/tab2.page.ts

@@ -11,6 +11,7 @@ export class Tab2Page {
   companies = [
     {
       name: '和美空间设计',
+      photos: ['https://img.zcool.cn/community/01434f5c99ef93a801214168f0f56d.jpg@1280w_1l_2o_100sh.jpg', 'https://tse3-mm.cn.bing.net/th/id/OIP-C.kygX50rrc4YXPIgehQN55QHaFk?rs=1&pid=ImgDetMain', 'https://ts1.cn.mm.bing.net/th/id/R-C.4f157e2b6dc3267f9f29fe5f043c7d8b?rik=R%2bCPIaivjZj8Jw&riu=http%3a%2f%2fwww.hnyc998.com%2fpublic%2fuploads%2f20190515%2f1557906790288894.jpg&ehk=pAjD2QvDBBTv%2fioE1vhwe1G8QopeUOICHYDiy5SKtg8%3d&risl=&pid=ImgRaw&r=0'],
       starRating: 4.7,
       reviewCount: 150,
       description: '和美空间设计有限公司是一家专业的室内装修设计公司，致力于为客户提供高品质的装修和设计服务。公司拥有一支经验丰富、富有创意的设计团队，以客户需求为中心，打造独特、舒适的居家环境。',
@@ -372,6 +373,9 @@ toggleDetails(company: any) {
 openConsultPage(){
   this.navCtrl.navigateForward('/consult');
 }
+openyuyuePage(){
+  this.navCtrl.navigateForward('/yuyue');
+}
 // 在组件类中实现一个方法来切换关注状态
 toggleFollow() {
   this.isFollowing = !this.isFollowing;

src/app/yuyue/yuyue-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { YuyuePage } from './yuyue.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: YuyuePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class YuyuePageRoutingModule {}

src/app/yuyue/yuyue.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { YuyuePageRoutingModule } from './yuyue-routing.module';
+
+import { YuyuePage } from './yuyue.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    YuyuePageRoutingModule
+  ],
+  declarations: [YuyuePage]
+})
+export class YuyuePageModule {}

src/app/yuyue/yuyue.page.html

@@ -0,0 +1,50 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <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-toolbar>
+      <ion-title size="large">预约装修服务</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>填写预约信息</ion-card-title>
+    </ion-card-header>
+
+    <ion-card-content>
+      <ion-item>
+        <ion-label position="stacked">姓名</ion-label>
+        <ion-input type="text" placeholder="请输入您的姓名"></ion-input>
+      </ion-item>
+
+      <ion-item>
+        <ion-label position="stacked">联系电话</ion-label>
+        <ion-input type="tel" placeholder="请输入您的联系电话"></ion-input>
+      </ion-item>
+
+      <ion-item>
+    <ion-label position="stacked">预约日期和时间</ion-label>
+    <ion-datetime display-format="YYYY-MM-DD HH:mm" placeholder="请选择预约日期和时间"></ion-datetime>
+</ion-item>
+
+      <ion-item>
+        <ion-label position="stacked">服务类型</ion-label>
+        <ion-select placeholder="请选择服务类型">
+          <ion-select-option value="室内装修">室内装修</ion-select-option>
+          <ion-select-option value="外观设计">外观设计</ion-select-option>
+          <ion-select-option value="家具定制">家具定制</ion-select-option>
+        </ion-select>
+      </ion-item>
+
+      <ion-button expand="block" (click)="submitAppointment()">提交预约</ion-button>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

src/app/yuyue/yuyue.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { YuyuePage } from './yuyue.page';
+
+describe('YuyuePage', () => {
+  let component: YuyuePage;
+  let fixture: ComponentFixture<YuyuePage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(YuyuePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/yuyue/yuyue.page.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { AlertController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-yuyue',
+  templateUrl: './yuyue.page.html',
+  styleUrls: ['./yuyue.page.scss'],
+})
+export class YuyuePage implements OnInit {
+
+  constructor(private alertController: AlertController) { }
+
+  ngOnInit() {
+  }
+
+  async submitAppointment() {
+    // 在这里处理提交预约的逻辑，可以获取表单数据并进行验证、发送请求等操作
+    // 这里只是一个简单的示例，弹出一个提示框表示预约成功
+    const alert = await this.alertController.create({
+      header: '预约成功',
+      message: '您的预约已成功提交！',
+      buttons: ['确定']
+    });
+
+    await alert.present();
+  }
+
+}