第二页

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

@@ -1,17 +1,110 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
+    <ion-buttons slot="start">
+      <ion-button (click)="goBack()">
+        <ion-icon name="arrow-back"></ion-icon>
+        <span>返回</span>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>房间管理</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="openProfile()">
+        <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 2</ion-title>
-    </ion-toolbar>
-  </ion-header>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>房间状态概览</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <div>
+        <p>总房间数: {{ totalRooms }}</p>
+        <p>已入住: {{ occupiedRooms }}</p>
+        <p>空房: {{ availableRooms }}</p>
+        <p>待清洁: {{ cleaningRooms }}</p>
+      </div>
+      <ion-img src="path_to_your_chart_image.png"></ion-img> <!-- 替换为实际图表 -->
+    </ion-card-content>
+  </ion-card>
 
-  <app-explore-container name="Tab 2 page"></app-explore-container>
+  <ion-list>
+    <ion-item *ngFor="let room of rooms">
+      <ion-label>
+        <h2>房间号: {{ room.number }}</h2>
+        <p>房型: {{ room.type }}</p>
+        <p>当前状态: {{ room.status }}</p>
+      </ion-label>
+      <ion-button (click)="updateRoomStatus(room.number,selectedStatus)">更新状态</ion-button>
+      <ion-button (click)="viewRoomDetails(room.number)">查看详情</ion-button>
+    </ion-item>
+  </ion-list>
+
+  <ion-item>
+    <ion-label>选择房间状态</ion-label>
+    <ion-select [(ngModel)]="selectedStatus">
+      <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-item>
+    <ion-label>选择房间</ion-label>
+    <ion-select [(ngModel)]="selectedRoom">
+      <ion-select-option *ngFor="let room of rooms" [value]="room.number">{{ room.number }}</ion-select-option>
+    </ion-select>
+  </ion-item>
+  
+  <ion-button expand="full" (click)="updateRoomStatus(selectedRoom, selectedStatus)">更新状态</ion-button>
+  <ion-toast [isOpen]="toastOpen" message="{{ toastMessage }}" duration="2000"></ion-toast>
+
+  <ion-modal [isOpen]="isModalOpen" (ionModalDidClose)="closeModal()">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>房间详情</ion-title>
+        <ion-buttons slot="end">
+          <ion-button (click)="closeModal()">
+            <ion-icon name="close"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-card>
+        <ion-card-header>
+          <ion-card-title>房间基本信息</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          <p>房间号: {{ roomDetails.number }}</p>
+          <p>房型: {{ roomDetails.type }}</p>
+          <p>面积: {{ roomDetails.size }}</p>
+          <p>设施: {{ roomDetails.amenities }}</p>
+        </ion-card-content>
+      </ion-card>
+      <ion-card>
+        <ion-card-header>
+          <ion-card-title>入住客人信息</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          <p>姓名: {{ guestInfo.name }}</p>
+          <p>入住时间: {{ guestInfo.checkIn }}</p>
+          <p>退房时间: {{ guestInfo.checkOut }}</p>
+        </ion-card-content>
+      </ion-card>
+      <ion-card>
+        <ion-card-header>
+          <ion-card-title>历史入住记录</ion-card-title>
+        </ion-card-header>
+        <ion-list>
+          <ion-item *ngFor="let record of historyRecords">
+            <p>{{ record.date }} - {{ record.guestName }}</p>
+          </ion-item>
+        </ion-list>
+      </ion-card>
+    </ion-content>
+  </ion-modal>
 </ion-content>

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

@@ -1,16 +1,111 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonicRouteStrategy } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonIcon, IonImg, IonItem, IonLabel, IonList, IonSelect, IonSelectOption, IonToast } from '@ionic/angular/standalone';
+import { IonModal } from '@ionic/angular/standalone';
+import { IonButtons, ToastController } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+
+
 
 @Component({
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent]
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
+    IonButtons,IonIcon,IonCard,IonCardHeader,IonCardTitle,IonCardContent,
+    IonImg,IonList,IonItem,IonLabel,IonSelect,IonSelectOption,IonModal,IonToast,
+    IonButton,CommonModule,FormsModule, 
+  ]
 })
 export class Tab2Page {
+  totalRooms: number = 50;
+  occupiedRooms: number = 30;
+  availableRooms: number = 15;
+  cleaningRooms: number = 5;
+
+  rooms = [
+    { number: '101', type: '豪华双人间', status: '已入住' },
+    { number: '102', type: '标准单人间', status: '空闲' },
+    { number: '103', type: '豪华双人间', status: '待清洁' },
+    // 更多房间数据...
+  ];
+
+  selectedStatus: string | null = null; // 初始化为 null
+  selectedRoom: string | null = null; // 初始化为 null
+  toastOpen: boolean = false;
+  toastMessage: string = '';
+  isModalOpen: boolean = false; // 控制模态框的打开与关闭
+  roomDetails: any = {}; // 存储房间详情信息
+  guestInfo: any = {}; // 存储入住客人信息
+  historyRecords: any[] = []; // 存储历史入住记录
+
+  constructor(private toastController: ToastController) {}
+
+  goBack() {
+    // 返回上一页的逻辑
+    console.log('返回上一页');
+  }
+
+  openProfile() {
+    // 打开个人资料页的逻辑
+    console.log('打开个人资料页');
+  }
+
+  updateRoomStatus(roomNumber: string | null, status: string | null) {
+    if (roomNumber && status) {
+      const room = this.rooms.find(r => r.number === roomNumber);
+      if (room) {
+        room.status = status;
+        this.showToast('状态更新成功！');
+      } else {
+        this.showToast('状态更新失败，请重试。');
+      }
+    } else {
+      this.showToast('房间号或状态无效。');
+    }
+  }
+
+  viewRoomDetails(roomNumber: string) {
+    // 查找房间详情并打开模态框
+    const room = this.rooms.find(r => r.number === roomNumber);
+    if (room) {
+      this.roomDetails = room;
+      this.guestInfo = { name: '张三', checkIn: '2024年11月25日', checkOut: '2024年11月30日' }; // 示例数据
+      this.historyRecords = [
+        { date: '2024年11月20日 - 2024年11月25日', guestName: '李四' },
+        // 更多历史记录...
+      ];
+      this.isModalOpen = true; // 打开模态框
+    }
+  }
+  
+
+  closeModal() {
+    this.isModalOpen = false; // 关闭模态框
+  }
+
+  async updateStatus() {
+    // 更新状态的逻辑
+    if (this.selectedRoom && this.selectedStatus) {
+      this.updateRoomStatus(this.selectedRoom, this.selectedStatus);
+    } else {
+      this.showToast('请先选择房间和状态。');
+    }
+  }
 
-  constructor() {}
+  async showToast(message: string) {
+    this.toastMessage = message;
+    this.toastOpen = true;
 
+    const toast = await this.toastController.create({
+      message: this.toastMessage,
+      duration: 2000,
+      position: 'bottom',
+    });
+    await toast.present();
+  }
 }

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

@@ -2,12 +2,12 @@
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1" href="/tabs/tab1">
       <ion-icon aria-hidden="true" name="tv"></ion-icon>
-      <ion-label>首页</ion-label>
+      <ion-label>预订</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab2" href="/tabs/tab2">
       <ion-icon aria-hidden="true" name="chatbox"></ion-icon>
-      <ion-label>预订</ion-label>
+      <ion-label>信息</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab3" href="/tabs/tab3">