web3-202226701052/src/app/medical-services/medical-services.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab3" text="" icon="arrow-back"></ion-back-button>
    </ion-buttons>
    <ion-title>医疗服务</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="medical-services-page">
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="chevron-down-circle" pullingText="下拉刷新" refreshingSpinner="circles" refreshingText="正在刷新..."></ion-refresher-content>
  </ion-refresher>

  <!-- 医疗服务列表 -->
  <section class="services-section">
    <!-- <h3>我们的服务</h3> -->
    <ion-list>
      <ion-item button *ngFor="let service of medicalServices" (click)="viewServiceDetails(service)" class="service-item">
        <ion-icon [name]="service.icon" slot="start" class="service-icon"></ion-icon>
        <ion-label>
          <h2>{{ service.title }}</h2>
          <p>{{ service.description }}</p>
        </ion-label>
      </ion-item>
    </ion-list>
  </section>

  <!-- 未处理预约提醒 -->
  <section class="appointment-section" *ngIf="hasPendingAppointments">
    <ion-card>
      <ion-card-header>
        <ion-card-subtitle class="status-bar" [ngClass]="{'pending': hasPendingAppointments}">提醒</ion-card-subtitle>
        <ion-card-title>您有 {{ pendingAppointmentsCount }} 条未处理的预约</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        请尽快处理您的预约。
        <ion-button expand="block" (click)="manageAppointments()">管理预约</ion-button>
      </ion-card-content>
    </ion-card>
  </section>

  <!-- 在线咨询医生 -->
  <section class="consultation-section">
    <ion-button expand="full" (click)="consultDoctor()" color="primary">在线咨询医生</ion-button>
  </section>
</ion-content>