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

<ion-header>
  <ion-toolbar>
    <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">
  <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>

  <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>