web3-202226701052/src/app/manage-family/manage-family.page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab3"></ion-back-button>
    </ion-buttons>
    <ion-title>家人管理</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 错误信息 -->
  <div *ngIf="error" class="error-message">
    <p>{{ error }}</p>
  </div>

  <!-- 加载指示器 -->
  <ion-spinner name="bubbles" *ngIf="isLoading"></ion-spinner>

  <!-- 家庭成员列表 -->
  <ion-list *ngIf="!isLoading && familyMembers.length > 0">
    <ion-item *ngFor="let member of familyMembers" button (click)="editMember(member)">
      <ion-avatar slot="start">
        <img [src]="member.avatar || '../assets/images/用户4.jpg'" alt="Avatar" />
      </ion-avatar>
      <ion-label>
        <h2>{{ member.name }}</h2>
        <p>{{ member.relationship }}</p>
      </ion-label>
      <ion-icon name="ellipsis-vertical" slot="end" (click)="removeFamilyMember(member.id)"></ion-icon>
    </ion-item>
  </ion-list>

  <!-- 提示信息 -->
  <div *ngIf="!isLoading && familyMembers.length === 0" class="page-intro">
    <p>您还没有添加任何家庭成员。点击右下角的加号按钮来添加新成员。</p>
  </div>

  <!-- 添加家庭成员的浮动按钮 -->
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button (click)="addFamilyMember()">
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>