123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108 |
- <ion-header>
- <ion-toolbar color="primary">
- <ion-buttons slot="start">
- <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
- </ion-buttons>
- <ion-title>{{ diaryId ? '编辑日记' : '新建日记' }}</ion-title>
- <ion-buttons slot="end">
- <ion-button (click)="saveDiary()" [disabled]="!diary.content">
- <ion-icon slot="icon-only" name="checkmark-outline"></ion-icon>
- </ion-button>
- </ion-buttons>
- </ion-toolbar>
- </ion-header>
- <ion-content class="ion-padding">
- <!-- 日期和时间选择 -->
- <ion-item>
- <ion-label position="stacked">日期</ion-label>
- <ion-datetime
- [(ngModel)]="diary.date"
- displayFormat="YYYY年MM月DD日"
- min="2000-01-01"
- max="2030-12-31"
- placeholder="选择日期">
- </ion-datetime>
- <ion-datetime
- [(ngModel)]="diary.time"
- displayFormat="HH:mm"
- placeholder="选择时间">
- </ion-datetime>
- </ion-item>
- <ion-item>
- <ion-label position="stacked">星期</ion-label>
- <ion-select [(ngModel)]="diary.weekday" interface="action-sheet">
- <ion-select-option value="周一">周一</ion-select-option>
- <ion-select-option value="周二">周二</ion-select-option>
- <ion-select-option value="周三">周三</ion-select-option>
- <ion-select-option value="周四">周四</ion-select-option>
- <ion-select-option value="周五">周五</ion-select-option>
- <ion-select-option value="周六">周六</ion-select-option>
- <ion-select-option value="周日">周日</ion-select-option>
- </ion-select>
- </ion-item>
- <ion-item>
- <ion-label position="stacked">时间</ion-label>
- <ion-datetime
- [(ngModel)]="diary.time"
- displayFormat="HH:mm"
- placeholder="选择时间">
- </ion-datetime>
- </ion-item>
- <!-- 天气选择 -->
- <ion-item>
- <ion-label position="stacked">天气</ion-label>
- <ion-select [(ngModel)]="diary.weather" interface="action-sheet">
- <ion-select-option value="晴">晴 ☀️</ion-select-option>
- <ion-select-option value="多云">多云 ⛅</ion-select-option>
- <ion-select-option value="阴">阴 ☁️</ion-select-option>
- <ion-select-option value="雨">雨 🌧️</ion-select-option>
- <ion-select-option value="雪">雪 ❄️</ion-select-option>
- <ion-select-option value="雾">雾 🌫️</ion-select-option>
- <ion-select-option value="雷阵雨">雷阵雨 ⛈️</ion-select-option>
- </ion-select>
- </ion-item>
- <!-- 心情选择 -->
- <ion-item>
- <ion-label position="stacked">心情</ion-label>
- <ion-segment [(ngModel)]="diary.mood" scrollable>
- <ion-segment-button value="😊">
- <ion-label>开心</ion-label>
- </ion-segment-button>
- <ion-segment-button value="😌">
- <ion-label>平静</ion-label>
- </ion-segment-button>
- <ion-segment-button value="🥰">
- <ion-label>幸福</ion-label>
- </ion-segment-button>
- <ion-segment-button value="😄">
- <ion-label>兴奋</ion-label>
- </ion-segment-button>
- <ion-segment-button value="😔">
- <ion-label>忧郁</ion-label>
- </ion-segment-button>
- <ion-segment-button value="😠">
- <ion-label>愤怒</ion-label>
- </ion-segment-button>
- <ion-segment-button value="😢">
- <ion-label>悲伤</ion-label>
- </ion-segment-button>
- </ion-segment>
- </ion-item>
- <!-- 日记内容 -->
- <ion-item>
- <ion-textarea
- [(ngModel)]="diary.content"
- label="日记内容"
- placeholder="写下今天的点滴..."
- autoGrow
- rows="10">
- </ion-textarea>
- </ion-item>
- </ion-content>
|