edit.page.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <ion-header>
  2. <ion-toolbar color="primary">
  3. <ion-buttons slot="start">
  4. <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
  5. </ion-buttons>
  6. <ion-title>{{ diaryId ? '编辑日记' : '新建日记' }}</ion-title>
  7. <ion-buttons slot="end">
  8. <ion-button (click)="saveDiary()" [disabled]="!diary.content">
  9. <ion-icon slot="icon-only" name="checkmark-outline"></ion-icon>
  10. </ion-button>
  11. </ion-buttons>
  12. </ion-toolbar>
  13. </ion-header>
  14. <ion-content class="ion-padding">
  15. <!-- 日期和时间选择 -->
  16. <ion-item>
  17. <ion-label position="stacked">日期</ion-label>
  18. <ion-datetime
  19. [(ngModel)]="diary.date"
  20. displayFormat="YYYY年MM月DD日"
  21. min="2000-01-01"
  22. max="2030-12-31"
  23. placeholder="选择日期">
  24. </ion-datetime>
  25. <ion-datetime
  26. [(ngModel)]="diary.time"
  27. displayFormat="HH:mm"
  28. placeholder="选择时间">
  29. </ion-datetime>
  30. </ion-item>
  31. <ion-item>
  32. <ion-label position="stacked">星期</ion-label>
  33. <ion-select [(ngModel)]="diary.weekday" interface="action-sheet">
  34. <ion-select-option value="周一">周一</ion-select-option>
  35. <ion-select-option value="周二">周二</ion-select-option>
  36. <ion-select-option value="周三">周三</ion-select-option>
  37. <ion-select-option value="周四">周四</ion-select-option>
  38. <ion-select-option value="周五">周五</ion-select-option>
  39. <ion-select-option value="周六">周六</ion-select-option>
  40. <ion-select-option value="周日">周日</ion-select-option>
  41. </ion-select>
  42. </ion-item>
  43. <ion-item>
  44. <ion-label position="stacked">时间</ion-label>
  45. <ion-datetime
  46. [(ngModel)]="diary.time"
  47. displayFormat="HH:mm"
  48. placeholder="选择时间">
  49. </ion-datetime>
  50. </ion-item>
  51. <!-- 天气选择 -->
  52. <ion-item>
  53. <ion-label position="stacked">天气</ion-label>
  54. <ion-select [(ngModel)]="diary.weather" interface="action-sheet">
  55. <ion-select-option value="晴">晴 ☀️</ion-select-option>
  56. <ion-select-option value="多云">多云 ⛅</ion-select-option>
  57. <ion-select-option value="阴">阴 ☁️</ion-select-option>
  58. <ion-select-option value="雨">雨 🌧️</ion-select-option>
  59. <ion-select-option value="雪">雪 ❄️</ion-select-option>
  60. <ion-select-option value="雾">雾 🌫️</ion-select-option>
  61. <ion-select-option value="雷阵雨">雷阵雨 ⛈️</ion-select-option>
  62. </ion-select>
  63. </ion-item>
  64. <!-- 心情选择 -->
  65. <ion-item>
  66. <ion-label position="stacked">心情</ion-label>
  67. <ion-segment [(ngModel)]="diary.mood" scrollable>
  68. <ion-segment-button value="😊">
  69. <ion-label>开心</ion-label>
  70. </ion-segment-button>
  71. <ion-segment-button value="😌">
  72. <ion-label>平静</ion-label>
  73. </ion-segment-button>
  74. <ion-segment-button value="🥰">
  75. <ion-label>幸福</ion-label>
  76. </ion-segment-button>
  77. <ion-segment-button value="😄">
  78. <ion-label>兴奋</ion-label>
  79. </ion-segment-button>
  80. <ion-segment-button value="😔">
  81. <ion-label>忧郁</ion-label>
  82. </ion-segment-button>
  83. <ion-segment-button value="😠">
  84. <ion-label>愤怒</ion-label>
  85. </ion-segment-button>
  86. <ion-segment-button value="😢">
  87. <ion-label>悲伤</ion-label>
  88. </ion-segment-button>
  89. </ion-segment>
  90. </ion-item>
  91. <!-- 日记内容 -->
  92. <ion-item>
  93. <ion-textarea
  94. [(ngModel)]="diary.content"
  95. label="日记内容"
  96. placeholder="写下今天的点滴..."
  97. autoGrow
  98. rows="10">
  99. </ion-textarea>
  100. </ion-item>
  101. </ion-content>