第三页

smarthotel-app/src/app/tab3/tab3.page.html

@@ -1,17 +1,80 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>
-      Tab 3
-    </ion-title>
+    <ion-buttons slot="start">
+      <ion-button (click)="goBack()">
+        <ion-icon name="arrow-back"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>智能客服</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="goToProfile()">
+        <ion-icon name="person-circle"></ion-icon>
+      </ion-button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 3</ion-title>
-    </ion-toolbar>
-  </ion-header>
+  <div class="chat-container">
+    <div class="chat-message" *ngFor="let message of chatMessages">
+      <div class="message" [ngClass]="{'customer': message.sender === 'customer', 'support': message.sender === 'support'}">
+        {{ message.text }}
+      </div>
+    </div>
+    <ion-item>
+      <ion-input placeholder="请输入您的问题或需求" [(ngModel)]="userMessage"></ion-input>
+      <ion-button (click)="sendMessage()">发送</ion-button>
+    </ion-item>
+  </div>
 
-  <app-explore-container name="Tab 3 page"></app-explore-container>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>常见问题</ion-card-title>
+    </ion-card-header>
+    <ion-list>
+      <ion-item *ngFor="let faq of faqs" (click)="toggleFAQ(faq)">
+        <ion-label>{{ faq.question }}</ion-label>
+        <ion-icon slot="end" [name]="faq.isOpen ? 'chevron-up' : 'chevron-down'"></ion-icon>
+      </ion-item>
+      <ng-container *ngFor="let faq of faqs">
+        <ion-item *ngIf="faq.isOpen">
+          <ion-label>{{ faq.answer }}</ion-label>
+        </ion-item>
+      </ng-container>
+    </ion-list>
+  </ion-card>
+
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>服务评分</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-rating [(ngModel)]="userRating" max="5" icon="star"></ion-rating>
+      <ion-item>
+        <ion-input placeholder="请分享您的反馈意见（可选）" [(ngModel)]="userFeedback"></ion-input>
+      </ion-item>
+      <ion-button expand="full" (click)="submitFeedback()">提交评分</ion-button>
+      <div *ngIf="feedbackMessage">{{ feedbackMessage }}</div>
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>快捷服务</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-button expand="full" (click)="checkout()">
+        退房间
+      </ion-button>
+      <ion-button expand="full" (click)="requestCleaning()">
+        请求清洁
+      </ion-button>
+      <ion-button expand="full" (click)="inquireFacilities()">
+        咨询设施
+      </ion-button>
+      <ion-button expand="full" (click)="contactSupport()">
+        联系客服
+      </ion-button>
+    </ion-card-content>
+  </ion-card>
 </ion-content>

smarthotel-app/src/app/tab3/tab3.page.ts

@@ -1,14 +1,86 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButtons, IonCardContent } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { IonButton, IonCard, IonCardHeader, IonCardTitle, IonIcon, IonInput, IonItem, IonLabel, IonList, IonRadio } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+
+interface FAQ {
+  question: string;
+  answer: string;
+  isOpen: boolean;
+}
 
 @Component({
   selector: 'app-tab3',
   templateUrl: 'tab3.page.html',
   styleUrls: ['tab3.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
+    IonButton,IonIcon,IonTitle,IonContent,IonItem,IonInput,IonCard,IonCardHeader,
+    IonCardTitle,IonCardHeader,IonList,IonLabel,IonCardTitle,IonButtons,IonCardContent,
+    CommonModule,FormsModule
+  ],
 })
 export class Tab3Page {
-  constructor() {}
+  userMessage: string = '';
+  userRating: number = 0;
+  userFeedback: string = '';
+  feedbackMessage: string = '';
+  
+  chatMessages: { sender: string, text: string }[] = [
+    { sender: 'support', text: '欢迎来到智能客服，请问有什么可以帮助您的？' },
+  ];
+
+  faqs: FAQ[] = [
+    { question: '如何预定房间？', answer: '您可以通过我们的应用直接预定，也可以拨打前台电话。', isOpen: false },
+    { question: '酒店提供哪些设施？', answer: '我们提供游泳池、健身房、会议室等设施。', isOpen: false },
+  ];
+
+  goBack() {
+    // Logic to navigate back
+  }
+
+  goToProfile() {
+    // Logic to navigate to user profile
+  }
+
+  sendMessage() {
+    if (this.userMessage.trim()) {
+      this.chatMessages.push({ sender: 'customer', text: this.userMessage });
+      this.userMessage = '';
+      // Simulate a response from support
+      this.chatMessages.push({ sender: 'support', text: '谢谢您的咨询，我们会尽快回复您。' });
+    }
+  }
+
+  toggleFAQ(faq: FAQ) {
+    faq.isOpen = !faq.isOpen;
+  }
+
+  submitFeedback() {
+    if (this.userRating > 0) {
+      this.feedbackMessage = '感谢您的反馈！评分提交成功。';
+      // Logic to handle feedback submission
+    } else {
+      this.feedbackMessage = '请给出评分。';
+    }
+  }
+
+  checkout() {
+    // Logic to check out a room
+  }
+
+  requestCleaning() {
+    // Logic to request cleaning
+  }
+
+  inquireFacilities() {
+    // Logic to inquire about facilities
+  }
+
+  contactSupport() {
+    // Logic to contact support
+  }
 }