s202226701018/wisdom-app/src/app/page/page-user-inquery/page-user-inquery.component.html

<!-- 我的预约页面 -->
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>我的预约</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="handleRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  
  <ion-list>
    <ion-card *ngFor="let appointment of appointmentList" class="appointment-card">
      <ion-card-content>
        <!-- 姓名和电话号码始终显示 -->
        <ion-item lines="none">
          <ion-label>
            <h2 class="appointment-name">姓名：{{appointment.get("username")}}</h2>
          </ion-label>
        </ion-item>
        <ion-item lines="none">
          <ion-icon name="call" slot="start" color="primary"></ion-icon>
          <ion-label class="appointment-phone">{{appointment.get("userPhone")}}</ion-label>
        </ion-item>
        
        <!-- 折叠按钮 -->
        <ion-button fill="clear" size="small" class="toggle-button" (click)="toggleDetails(appointment?.id)">
          <ion-icon [name]="isExpanded(appointment.id) ? 'chevron-up' : 'chevron-down'"></ion-icon>
          {{ isExpanded(appointment.id) ? '收起' : '展开' }}
        </ion-button>
        
        <!-- 折叠的内容 -->
        <div class="additional-details" *ngIf="isExpanded(appointment?.id)">
          <ion-item lines="none">
            <ion-icon name="calendar" slot="start" color="primary"></ion-icon>
            <ion-label class="appointment-type">预约方式：{{appointment.get("type")}}</ion-label>
          </ion-item>
          <ion-item lines="none">
            <ion-icon name="time" slot="start" color="primary"></ion-icon>
            <ion-label class="appointment-time">时间：{{appointment.updatedAt | date:'short'}}</ion-label>
          </ion-item>
          <ion-button 
            expand="block" 
            color="primary" 
            class="action-button"
            (click)="presentAlert(appointment.get('username'), appointment.get('userPhone'))">
            立即前往
          </ion-button>
          <ion-button color="danger" expand="block" (click)="deleteAppoint(appointment)">
            删除预约
          </ion-button>
        </div>
      </ion-card-content>
    </ion-card>
  </ion-list>
  
  <!-- 空状态处理 -->
  <div *ngIf="appointmentList.length === 0" class="empty-state">
    <ion-icon name="calendar-outline" size="large" color="medium"></ion-icon>
    <p>您当前没有预约</p>
  </div>
</ion-content>