提交内容的备注信息

angular.json

@@ -136,7 +136,8 @@
   "cli": {
     "schematicCollections": [
       "@ionic/angular-toolkit"
-    ]
+    ],
+    "analytics": "08e0e822-8405-475d-bfaf-e063c28f0239"
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {

package-lock.json

@@ -21,7 +21,7 @@
         "@capacitor/haptics": "6.0.2",
         "@capacitor/keyboard": "6.0.3",
         "@capacitor/status-bar": "6.0.2",
-        "@ionic/angular": "^8.0.0",
+        "@ionic/angular": "^8.4.1",
         "ionicons": "^7.0.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
@@ -3728,12 +3728,12 @@
       }
     },
     "node_modules/@ionic/angular": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmmirror.com/@ionic/angular/-/angular-8.4.0.tgz",
-      "integrity": "sha512-ivgHk76zpu6EZZlxXj5+FUqGwFKotWhDDA9YRltd2QCnQN+7kwacQk7KFInQ5Sd8RJT98mKFG3oOpyx5gFrBdA==",
+      "version": "8.4.1",
+      "resolved": "https://registry.npmmirror.com/@ionic/angular/-/angular-8.4.1.tgz",
+      "integrity": "sha512-22ghlHeIJjHDizns/huYp1sQ3Y9qYyUY9hEueIB0e8jsNhCOwhRijMIoOCZ/sfMKTbNaKX7EJ25NpVetF7mZXQ==",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "8.4.0",
+        "@ionic/core": "8.4.1",
         "ionicons": "^7.0.0",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -3906,9 +3906,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmmirror.com/@ionic/core/-/core-8.4.0.tgz",
-      "integrity": "sha512-mZ2Ni9QByFGWBNr5W/F/nyPV+cXLhK+6W5BRziy7QPX6YIS57KH8FpY+CjE7BEcpE78anyY49bZt3eOWcES02g==",
+      "version": "8.4.1",
+      "resolved": "https://registry.npmmirror.com/@ionic/core/-/core-8.4.1.tgz",
+      "integrity": "sha512-D5xpw5TF2wldpAWE0rHq3L+5T79EjR6d++QFpprjp+q+cFjjhOnfGD+2k7gLlWepAod9LUUigeL0JF02C2wgRQ==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.20.0",

package.json

@@ -26,7 +26,7 @@
     "@capacitor/haptics": "6.0.2",
     "@capacitor/keyboard": "6.0.3",
     "@capacitor/status-bar": "6.0.2",
-    "@ionic/angular": "^8.0.0",
+    "@ionic/angular": "^8.4.1",
     "ionicons": "^7.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

src/app/app-routing.module.ts

@@ -1,16 +1,30 @@
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 
+
 const routes: Routes = [
   {
     path: '',
     loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
+  },
+  {
+    path: 'appointment',
+    loadChildren: () => import('./appointment/appointment.module').then(m => m.AppointmentPageModule)
+  },
+  {
+    path: 'consultation',
+    loadChildren: () => import('./consultation/consultation.module').then( m => m.ConsultationPageModule)
+  },
+  {
+    path: 'details',
+    loadChildren: () => import('./details/details.module').then( m => m.DetailsPageModule)
   }
 ];
+
 @NgModule({
   imports: [
     RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
   ],
   exports: [RouterModule]
 })
-export class AppRoutingModule {}
+export class AppRoutingModule {}

src/app/app.module.ts

@@ -7,10 +7,20 @@ import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
+import { HttpClientModule } from '@angular/common/http';
+
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
-  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(),
+    AppRoutingModule,
+    HttpClientModule // 导入 HttpClientModule
+  ],
+  providers: [
+  
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
+  ],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

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

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

src/app/appointment/appointment.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { IonicModule } from '@ionic/angular';
+import { RouterModule } from '@angular/router';
+
+import { AppointmentPage } from './appointment.page';
+import { AppointmentPageRoutingModule } from './appointment-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule, // 在这里导入 FormsModule
+    IonicModule,
+    RouterModule,
+    AppointmentPageRoutingModule
+  ],
+  declarations: [AppointmentPage]
+})
+export class AppointmentPageModule {}

src/app/appointment/appointment.page.html

@@ -0,0 +1,23 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button> <!-- 添加返回按钮 -->
+    </ion-buttons>
+    <ion-title>预约服务</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list>
+    <ion-item>
+      <ion-label>选择服务类型</ion-label>
+      <ion-select [(ngModel)]="selectedService" (ionChange)="onServiceChange($event)">
+        <ion-select-option value="service1">病情诊断</ion-select-option>
+        <ion-select-option value="service2">AI问诊</ion-select-option>
+        <!-- 添加更多选项 -->
+      </ion-select>
+    </ion-item>
+  </ion-list>
+
+  <ion-button expand="block" (click)="makeAppointment()">预约</ion-button>
+</ion-content>

src/app/appointment/appointment.page.spec.ts

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

src/app/appointment/appointment.page.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { NavController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-appointment',
+  templateUrl: './appointment.page.html',
+  styleUrls: ['./appointment.page.scss'],
+})
+export class AppointmentPage {
+  // 初始化 selectedService 属性
+  selectedService: string = '';
+
+  constructor(private navCtrl: NavController) {}
+
+  onServiceChange(event: any) {
+    console.log('Selected service:', event.detail.value);
+  }
+
+  makeAppointment() {
+    // 这里可以添加实际的预约逻辑
+    console.log('Making appointment for service:', this.selectedService);
+    // 你可以在这里进行导航或显示成功消息等
+  }
+}

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

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

src/app/consultation/consultation.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 { ConsultationPageRoutingModule } from './consultation-routing.module';
+
+import { ConsultationPage } from './consultation.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ConsultationPageRoutingModule
+  ],
+  declarations: [ConsultationPage]
+})
+export class ConsultationPageModule {}

src/app/consultation/consultation.page.html

@@ -0,0 +1,24 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-button (click)="goBack()">
+        <ion-icon name="arrow-back"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>立即咨询</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <h2>欢迎来到咨询页面</h2>
+  <p>在这里，您可以与我们的专家进行在线咨询。</p>
+  <div class="expert-list">
+    <div class="expert-item" *ngFor="let expert of experts; let i = index">
+      <img [src]="expert.avatar" alt="{{ expert.name }}" />
+      <div class="expert-info">
+        <h3>{{ expert.name }}</h3>
+        <p>{{ expert.specialty }}</p>
+      </div>
+    </div>
+  </div>
+</ion-content>

src/app/consultation/consultation.page.scss

@@ -0,0 +1,38 @@
+ion-content {
+    --background: #f9f9f9;
+  
+    .expert-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+  
+      .expert-item {
+        display: flex;
+        align-items: center;
+        width: calc(50% - 8px);
+        background: white;
+        padding: 16px;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  
+        img {
+          width: 64px;
+          height: 64px;
+          border-radius: 50%;
+          margin-right: 16px;
+        }
+  
+        .expert-info {
+          h3 {
+            font-size: 18px;
+            margin: 0 0 8px;
+          }
+  
+          p {
+            margin: 0;
+            color: #666;
+          }
+        }
+      }
+    }
+  }

src/app/consultation/consultation.page.spec.ts

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

src/app/consultation/consultation.page.ts

@@ -0,0 +1,57 @@
+import { Component } from '@angular/core';
+import { NavController } from '@ionic/angular';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-consultation',
+  templateUrl: 'consultation.page.html',
+  styleUrls: ['consultation.page.scss']
+})
+export class ConsultationPage {
+  constructor(private navCtrl: NavController, private route: ActivatedRoute) {}
+  selectedDoctor: any;
+
+  // 示例专家列表
+  experts = [
+    {
+      avatar: '../../assets/images/doctor.png',
+      name: '张医生',
+      specialty: '心血管科'
+    },
+    {
+      avatar: '../../assets/images/doctor.png',
+      name: '李医生',
+      specialty: '神经科'
+    },
+    {
+      avatar: '../../assets/images/doctor.png',
+      name: '王医生',
+      specialty: '儿科'
+    },
+    {
+      avatar: '../../assets/images/doctor.png',
+      name: '赵医生',
+      specialty: '外科'
+    },
+    {
+      avatar: '../../assets/images/doctor.png',
+      name: '陈医生',
+      specialty: '内科'
+    }
+  ];
+
+  // 示例方法：返回上一页
+  goBack() {
+    this.navCtrl.back();
+  }
+  ngOnInit() {
+    // 获取传递过来的医生信息
+    this.route.data.subscribe((data: any) => {
+      this.selectedDoctor = data.state?.doctor;
+      if (this.selectedDoctor) {
+        console.log('Selected Doctor:', this.selectedDoctor);
+      }
+    });
+  }
+
+}

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

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

src/app/details/details.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 { DetailsPageRoutingModule } from './details-routing.module';
+
+import { DetailsPage } from './details.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    DetailsPageRoutingModule
+  ],
+  declarations: [DetailsPage]
+})
+export class DetailsPageModule {}

src/app/details/details.page.html

@@ -0,0 +1,25 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-button (click)="goBack()">
+        <ion-icon name="arrow-back"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>了解更多</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <h2>健康服务详情</h2>
+  <p>这里提供了更多关于我们的健康服务的信息。</p>
+  <div class="service-list">
+    <div class="service-item" *ngFor="let service of services; let i = index">
+      <h3>{{ service.title }}</h3>
+      <p>{{ service.description }}</p>
+      <div class="doctor-info">
+        <p>医生: {{ service.doctor.name }}</p>
+        <p>状态: {{ service.doctor.status }}</p>
+      </div>
+    </div>
+  </div>
+</ion-content>

src/app/details/details.page.scss

@@ -0,0 +1,30 @@
+ion-content {
+    --background: #f9f9f9;
+  
+    .service-list {
+      .service-item {
+        margin-bottom: 16px;
+        border: 1px solid #ddd;
+        padding: 16px;
+        border-radius: 8px;
+        background: white;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  
+        h3 {
+          font-size: 18px;
+          margin: 0 0 8px;
+        }
+  
+        p {
+          margin: 0 0 8px;
+          color: #666;
+        }
+  
+        .doctor-info {
+          p {
+            margin: 0;
+          }
+        }
+      }
+    }
+  }

src/app/details/details.page.spec.ts

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

src/app/details/details.page.ts

@@ -0,0 +1,78 @@
+import { Component, OnInit } from '@angular/core';
+import { NavController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-details',
+  templateUrl: 'details.page.html',
+  styleUrls: ['details.page.scss']
+})
+export class DetailsPage implements OnInit {
+  constructor(private navCtrl: NavController) {}
+
+  // 示例服务列表
+  services = [
+    {
+      title: '健康检查',
+      description: '全面的健康检查，包括血液检测、心电图等。',
+      doctor: {
+        name: '张医生',
+        status: this.getDoctorStatus('张医生')
+      }
+    },
+    {
+      title: '营养咨询',
+      description: '专业的营养师提供个性化的饮食建议。',
+      doctor: {
+        name: '李医生',
+        status: this.getDoctorStatus('李医生')
+      }
+    },
+    {
+      title: '心理辅导',
+      description: '专业的心理咨询师提供心理支持和辅导。',
+      doctor: {
+        name: '王医生',
+        status: this.getDoctorStatus('王医生')
+      }
+    }
+  ];
+
+  ngOnInit() {
+    // 模拟数据更新
+    this.updateDoctorStatus();
+  }
+
+  // 获取医生状态的方法
+  getDoctorStatus(doctorName: string): string {
+    const now = new Date();
+    const yesterday = new Date(now);
+    yesterday.setDate(yesterday.getDate() - 1);
+
+    if (doctorName === '张医生') {
+      // 张医生昨天下午3点正在提供咨询服务
+      const consultationTime = new Date(yesterday);
+      consultationTime.setHours(15, 0, 0, 0); // 下午3点
+      if (now >= consultationTime && now < new Date(yesterday.setHours(16, 0, 0, 0))) {
+        return '正在提供咨询服务';
+      } else {
+        return '可预约';
+      }
+    } else {
+      return '可预约';
+    }
+  }
+
+  // 定时更新医生状态
+  updateDoctorStatus() {
+    setInterval(() => {
+      this.services.forEach(service => {
+        service.doctor.status = this.getDoctorStatus(service.doctor.name);
+      });
+    }, 60000); // 每分钟更新一次
+  }
+
+  // 示例方法：返回上一页
+  goBack() {
+    this.navCtrl.back();
+  }
+}

src/app/tab1/tab1.page.html

@@ -4,10 +4,10 @@
 <ion-header>
   <ion-toolbar color="primary">
     <ion-buttons slot="start">
-      <ion-avatar>
+      <ion-avatar (click)="openLoginModal()">
         <img src="../../assets/images/user-avatar.png" alt="User Avatar" />
       </ion-avatar>
-      <ion-button fill="clear">
+      <ion-button fill="clear" (click)="openLoginModal()">
         <ion-label>登录/注册</ion-label>
       </ion-button>
     </ion-buttons>
@@ -24,6 +24,34 @@
   </ion-toolbar>
 </ion-header>
 
+<!-- 登录/注册模态框 -->
+<ion-modal [isOpen]="isLoginModalOpen" (ionDidDismiss)="onLoginModalDismissed($event)">
+  <ng-template>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>登录/注册</ion-title>
+        <ion-buttons slot="end">
+          <ion-button (click)="closeLoginModal()">关闭</ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <form (ngSubmit)="onLoginFormSubmit(loginForm.value)" #loginForm="ngForm">
+        <ion-item>
+          <ion-label position="floating">用户名</ion-label>
+          <ion-input type="text" name="username" [(ngModel)]="user.username" required></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-label position="floating">密码</ion-label>
+          <ion-input type="password" name="password" [(ngModel)]="user.password" required></ion-input>
+        </ion-item>
+        <ion-button expand="block" type="submit">登录</ion-button>
+        <ion-button expand="block" fill="outline" (click)="registerUser()">注册</ion-button>
+      </form>
+    </ion-content>
+  </ng-template>
+</ion-modal>
+
 <ion-content>
   <div class="health-banner">
     <div class="banner-content">
@@ -41,7 +69,7 @@
         </div>
       </div>
       <div class="banner-footer">
-        <ion-button expand="block" color="danger">立即咨询</ion-button>
+        <ion-button expand="block" color="danger" (click)="onConsultNow()">立即咨询</ion-button>
       </div>
       <div class="banner-bottom">
         <div class="bottom-content">
@@ -49,7 +77,7 @@
             昨天 下午3点 张医生 正在提供咨询服务
           </div>
           <div class="right-content">
-            <ion-button fill="clear" color="light">点击了解更多</ion-button>
+            <ion-button fill="clear" color="light" (click)="onLearnMore()">点击了解更多</ion-button>
           </div>
         </div>
       </div>
@@ -69,7 +97,7 @@
         <img src="{{ doctor.avatar }}" alt="Doctor Avatar" class="avatar" />
         <div class="name">{{ doctor.name }}</div>
         <div class="specialty">{{ doctor.specialty }}</div>
-        <ion-button expand="full" color="primary">在线咨询</ion-button>
+        <ion-button expand="block"  (click)="onlineConsultNow(doctor)">在线咨询</ion-button>
       </div>
     </ng-container>
   </div>

src/app/tab1/tab1.page.ts

@@ -1,5 +1,9 @@
 import { Component, AfterViewInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { ModalController, NavController } from '@ionic/angular';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
 
 @Component({
   selector: 'app-tab1',
@@ -61,8 +65,6 @@ export class Tab1Page implements AfterViewInit {
   cardWidth = 216; // 每个卡片的宽度加上间距 (200 + 16)
   isCyclic: boolean = true; // 是否启用循环滑动
 
-  constructor(private router: Router) {}
-
   ngAfterViewInit() {
     this.updateCarousel(); // 确保初始状态正确
     this.calculateCardWidth(); // 动态计算卡片宽度
@@ -93,7 +95,6 @@ export class Tab1Page implements AfterViewInit {
 
   // 触摸开始
   onTouchStart(event: TouchEvent) {
-    // event.preventDefault(); // 防止默认行为
     this.startX = event.touches[0].clientX;
     this.isDragging = true;
   }
@@ -101,7 +102,6 @@ export class Tab1Page implements AfterViewInit {
   // 触摸移动
   onTouchMove(event: TouchEvent) {
     if (this.isDragging) {
-      // event.preventDefault(); // 防止默认行为
       const touchX = event.touches[0].clientX;
       const deltaX = touchX - this.startX;
       this.currentTranslate = -this.currentIndex * this.cardWidth + deltaX; // 动态更新平移值
@@ -172,6 +172,18 @@ export class Tab1Page implements AfterViewInit {
     this.currentIndex = Math.max(0, Math.min(cardIndex, this.doctors.length - 1));
     this.updateCarousel();
   }
+  // 在线咨询按钮点击事件
+  onConsultNow() {
+    console.log(`立即咨询`);
+    this.router.navigate(['/consultation']);
+  }
+
+  // 在线咨询按钮点击事件
+  onlineConsultNow(doctor: any) {
+    console.log(`在线咨询: ${doctor.name}`);
+    // 跳转到 ConsultationPage 并传递医生信息
+    this.router.navigate(['/consultation'], { state: { doctor: doctor } });
+  }
 
   // 导航到指定路由
   navigateTo(route: string) {
@@ -183,4 +195,100 @@ export class Tab1Page implements AfterViewInit {
     // 这里可以添加发布求医信息的逻辑
     console.log('发布求医信息');
   }
+
+  isLoginModalOpen = false; // 声明 isLoginModalOpen 属性
+  user = {
+    username: '',
+    password: ''
+  };
+
+  constructor(
+    private router: Router,
+    private modalController: ModalController,
+    private navCtrl: NavController,
+    private http: HttpClient // 注入 HttpClient
+  ) {}
+
+  openLoginModal() {
+    this.isLoginModalOpen = true;
+    console.log('打开登录/注册模态框');
+  }
+
+  closeLoginModal() {
+    this.isLoginModalOpen = false;
+    console.log('关闭登录/注册模态框');
+  }
+
+  onLoginModalDismissed(event: any) {
+    this.isLoginModalOpen = false;
+    console.log('登录/注册模态框已关闭');
+  }
+
+  onLoginFormSubmit(formValue: any) {
+    // 处理登录逻辑
+    console.log('登录表单提交:', formValue);
+
+    // 发送登录请求
+    this.loginUser(formValue.username, formValue.password)
+      .subscribe(
+        (response) => {
+          console.log('登录成功:', response);
+          // 这里可以处理登录成功的逻辑，例如跳转到主页
+          this.closeLoginModal();
+        },
+        (error) => {
+          console.error('登录失败:', error);
+          // 这里可以处理登录失败的逻辑，例如显示错误消息
+          this.closeLoginModal();
+        }
+      );
+  }
+
+  registerUser() {
+    // 处理注册逻辑
+    console.log('注册用户:', this.user);
+
+    // 发送注册请求
+    this.registerNewUser(this.user.username, this.user.password)
+      .subscribe(
+        (response) => {
+          console.log('注册成功:', response);
+          // 这里可以处理注册成功的逻辑，例如跳转到登录页面
+          this.closeLoginModal();
+        },
+        (error) => {
+          console.error('注册失败:', error);
+          // 这里可以处理注册失败的逻辑，例如显示错误消息
+          this.closeLoginModal();
+        }
+      );
+  }
+
+  private loginUser(username: string, password: string): Observable<any> {
+    const loginUrl = 'YOUR_API_ENDPOINT/login'; // 替换为你的登录 API 端点
+    return this.http.post(loginUrl, { username, password })
+      .pipe(
+        map(response => response),
+        catchError(error => {
+          throw error;
+        })
+      );
+  }
+
+  private registerNewUser(username: string, password: string): Observable<any> {
+    const registerUrl = 'YOUR_API_ENDPOINT/register'; // 替换为你的注册 API 端点
+    return this.http.post(registerUrl, { username, password })
+      .pipe(
+        map(response => response),
+        catchError(error => {
+          throw error;
+        })
+      );
+  }
+
+  // 新增方法：处理“点击了解更多”按钮点击事件
+  onLearnMore() {
+    // 跳转到详情页面
+    this.navCtrl.navigateForward('/details');
+  }
 }