page-edit.component.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <ion-header>
  2. <ion-toolbar>
  3. <ion-buttons slot="start">
  4. <ion-button color="medium" (click)="cancel()">取消</ion-button>
  5. </ion-buttons>
  6. <ion-title>编辑个人信息</ion-title>
  7. <ion-buttons slot="end">
  8. <ion-button (click)="confirm()" [strong]="true">确认</ion-button>
  9. </ion-buttons>
  10. </ion-toolbar>
  11. </ion-header>
  12. <ion-content class="ion-padding">
  13. <!-- 头像上传区域 -->
  14. <ion-item>
  15. <ion-label>头像 <span style="color: red;">*</span></ion-label>
  16. <ion-avatar slot="start">
  17. <img [src]="avatar || 'assets/default-avatar.png'" />
  18. </ion-avatar>
  19. <ion-button fill="outline" slot="end" (click)="uploadAvatar()">上传头像</ion-button>
  20. </ion-item>
  21. <!-- 用户名输入框 -->
  22. <ion-item>
  23. <ion-label>姓名 <span style="color: red;">*</span></ion-label>
  24. <ion-input [value]="name" (ionInput)="nameInput($event)" placeholder="请输入姓名" autoGrow="true"></ion-input>
  25. </ion-item>
  26. <!-- 邮箱输入框 -->
  27. <ion-item>
  28. <ion-label>邮箱 <span style="color: red;">*</span></ion-label>
  29. <ion-input [value]="email" (ionInput)="emailInput($event)" placeholder="XXX@XX.com" autoGrow="true"></ion-input>
  30. </ion-item>
  31. <!-- 电话输入框 -->
  32. <ion-item>
  33. <ion-label>电话 <span style="color: red;">*</span></ion-label>
  34. <ion-input [value]="phone" (ionInput)="phoneInput($event)" placeholder="请输入电话号码" autoGrow="true"></ion-input>
  35. </ion-item>
  36. <!-- 年龄输入框 -->
  37. <ion-item>
  38. <ion-label>年龄 <span style="color: red;">*</span></ion-label>
  39. <ion-input [value]="age" (ionInput)="ageInput($event)" placeholder="请输入年龄" autoGrow="true"></ion-input>
  40. </ion-item>
  41. <!-- 性别选择框 -->
  42. <ion-item>
  43. <ion-label>性别 <span style="color: red;">*</span></ion-label>
  44. <ion-select
  45. [value]="gender"
  46. (ionChange)="genderInput($event)"
  47. placeholder="请选择性别"
  48. interface="popover"
  49. required>
  50. <ion-select-option value="男">男</ion-select-option>
  51. <ion-select-option value="女">女</ion-select-option>
  52. <ion-select-option value="other">其他</ion-select-option>
  53. </ion-select>
  54. </ion-item>
  55. <!-- 身高输入框 -->
  56. <ion-item>
  57. <ion-label>身高(cm) <span style="color: red;">*</span></ion-label>
  58. <ion-input [value]="height" (ionInput)="heightInput($event)" placeholder="请输入身高" autoGrow="true"></ion-input>
  59. </ion-item>
  60. <!-- 体重输入框 -->
  61. <ion-item>
  62. <ion-label>体重(kg) <span style="color: red;">*</span></ion-label>
  63. <ion-input [value]="weight" (ionInput)="weightInput($event)" placeholder="请输入体重" autoGrow="true"></ion-input>
  64. </ion-item>
  65. <!-- 活动水平选择框 -->
  66. <ion-item>
  67. <ion-label>活动水平</ion-label>
  68. <ion-select [value]="activityLevel"
  69. (ionChange)="activityLevelInput($event)"
  70. placeholder="请选择活动水平"
  71. interface="popover"
  72. required>
  73. <ion-select-option value="低">低</ion-select-option>
  74. <ion-select-option value="中">中</ion-select-option>
  75. <ion-select-option value="高">高</ion-select-option>
  76. </ion-select>
  77. </ion-item>
  78. <!-- 更新后的饮食偏好选择框 -->
  79. <ion-item>
  80. <ion-label>饮食偏好 <span style="color: red;">*</span></ion-label>
  81. <ion-select
  82. [value]="dietPreference"
  83. (ionChange)="dietPreferenceInput($event)"
  84. placeholder="请选择活动水平"
  85. interface="popover"
  86. required>
  87. <ion-select-option value="无麸质饮食">无麸质饮食</ion-select-option>
  88. <ion-select-option value="低碳水化合物饮食">低碳水化合物饮食</ion-select-option>
  89. <ion-select-option value="低脂饮食">低脂饮食</ion-select-option>
  90. <ion-select-option value="高蛋白饮食">高蛋白饮食</ion-select-option>
  91. <ion-select-option value="无要求">无要求</ion-select-option>
  92. </ion-select>
  93. </ion-item>
  94. <!-- 饮食群体输入框 -->
  95. <ion-item>
  96. <ion-label>饮食群体 <span style="color: red;">*</span></ion-label>
  97. <ion-input [value]="dietGroup" (ionInput)="dietGroupInput($event)" placeholder="请输入饮食群体" autoGrow="true"></ion-input>
  98. </ion-item>
  99. <!-- 新增过敏信息输入框 -->
  100. <ion-item>
  101. <ion-label>过敏信息 <span style="color: red;">*</span></ion-label>
  102. <ion-input [value]="allergies" (ionInput)="allergiesInput($event)" placeholder="请输入过敏信息" autoGrow="true"></ion-input>
  103. </ion-item>
  104. </ion-content>