202226701011/FitMind-app/src/app/page-edit/page-edit.component.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button color="medium" (click)="cancel()">取消</ion-button>
    </ion-buttons>
    <ion-title>编辑个人信息</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="confirm()" [strong]="true">确认</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <!-- 头像上传区域 -->
  <ion-item>
    <ion-label>头像 </ion-label>
    <ion-avatar slot="start">
      <!-- 显示头像，如果没有头像，显示默认头像 -->
      <img [src]="avatar || 'assets/boqi.jpg'" />
    </ion-avatar>
    <ion-button fill="outline" slot="end" (click)="uploadAvatar()">上传头像</ion-button>
  </ion-item>

  <!-- 用户名输入框 -->
  <ion-item>
    <ion-label>昵称 <span style="color: red;">*</span></ion-label>
    <ion-input 
      labelPlacement="stacked" 
      [(ngModel)]="name" 
      placeholder="请输入姓名" 
      required>
    </ion-input>
  </ion-item>

  <!-- 邮箱输入框 -->
  <ion-item>
    <ion-label>邮箱 <span style="color: red;">*</span></ion-label>
    <ion-input 
      labelPlacement="stacked" 
      [(ngModel)]="email" 
      placeholder="请输入邮箱" 
      type="email" 
      required
      [pattern]="emailPattern">
    </ion-input>
  </ion-item>

  <!-- 电话输入框 -->
  <ion-item>
    <ion-label>电话 <span style="color: red;">*</span></ion-label>
    <ion-input 
      labelPlacement="stacked" 
      [(ngModel)]="phone" 
      placeholder="请输入电话号码" 
      type="tel" 
      required
      [pattern]="phonePattern">
    </ion-input>
  </ion-item>

  <!-- 地址输入框 -->
  <ion-item>
    <ion-label>地址</ion-label>
    <ion-input 
      labelPlacement="stacked" 
      [(ngModel)]="address" 
      placeholder="请输入地址">
    </ion-input>
  </ion-item>

  <!-- 年龄输入框 -->
  <ion-item>
    <ion-label>年龄 <span style="color: red;">*</span></ion-label>
    <ion-input 
      labelPlacement="stacked" 
      [(ngModel)]="age" 
      placeholder="请输入年龄" 
      type="number" 
      required 
      [min]="0" 
      [max]="150">
    </ion-input>
  </ion-item>

  <!-- 性别选择框 -->
  <ion-item>
    <ion-label>性别 <span style="color: red;">*</span></ion-label>
    <ion-select 
      [(ngModel)]="gender" 
      interface="popover" 
      required>
      <ion-select-option value="male">男</ion-select-option>
      <ion-select-option value="female">女</ion-select-option>
      <ion-select-option value="other">其他</ion-select-option>
    </ion-select>
  </ion-item>

  <!-- 身高输入框 -->
  <ion-item>
    <ion-label>身高（cm） <span style="color: red;">*</span></ion-label>
    <ion-input 
      labelPlacement="stacked" 
      [(ngModel)]="height" 
      placeholder="请输入身高" 
      type="number" 
      required
      [min]="0" 
      [pattern]="heightPattern">
    </ion-input>
  </ion-item>

  <!-- 体重输入框 -->
  <ion-item>
    <ion-label>体重（kg） <span style="color: red;">*</span></ion-label>
    <ion-input 
      labelPlacement="stacked" 
      [(ngModel)]="weight" 
      placeholder="请输入体重" 
      type="number" 
      required
      [min]="0" 
      [pattern]="weightPattern">
    </ion-input>
  </ion-item>

 <!-- 运动目标输入框 -->
<ion-content>
  <ion-item>
    <ion-label>运动目标 <span style="color: red;">*</span></ion-label>
    <ion-input 
      labelPlacement="stacked" 
      [(ngModel)]="goal" 
      placeholder="请输入运动目标">
    </ion-input>
  </ion-item>
</ion-content>



  <!-- 作息时间输入框 -->
  <ion-item>
    <ion-label>作息时间 <span style="color: red;">*</span></ion-label>
    <ion-input 
      labelPlacement="stacked" 
      [(ngModel)]="time" 
      placeholder="请输入作息时间">
    </ion-input>
  </ion-item>
</ion-content>