|
|
@@ -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();
|
|
|
+ }
|
|
|
}
|
