hair-cut.html

<ion-header>

    <ion-navbar>
        <ion-title>理发</ion-title>
        <!--        <ion-buttons end>-->
        <!--            <button ion-button icon-only (click)="goApply(null)">-->
        <!--                <ion-icon class="top-right-icon icon-fabu iconfont"></ion-icon>-->
        <!--            </button>-->
        <!--        </ion-buttons>-->
    </ion-navbar>
    <div class="duty">
        <div class="dutyItem" (click)="change(1)">
            <span class="{{changeType == 1?'duty-title':''}}">理发安排</span>
        </div>
        <div class="dutyItem" (click)="change(2)">
            <span class="{{changeType == 2?'duty-title':''}}">我的预约</span>
        </div>
    </div>
</ion-header>


<ion-content>
    <ion-content direction="y" scrollbar-y="true" class="bgc-e7e8ed">
        <ion-refresher (ionRefresh)="doRefresh($event)">
            <ion-refresher-content pullingText="下拉刷新"
                                   refreshingSpinner="bubbles">
            </ion-refresher-content>
        </ion-refresher>
        <ng-container *ngIf="changeType == 1">
            <ion-calendar [(ngModel)]="date"
                          (onChange)="getDate($event)"
                          [options]="options"
                          type="string"
                          format="YYYY-MM-DD">
            </ion-calendar>
            <div class="room">
                <div class="already">
                    <p>已预约时间</p>
                    <div class="morning">
                        <div class="morning-text">
                            上午
                        </div>
                        <div class="morning-room">
                            <ng-container *ngFor="let item1 of room?.morningUse">
                                 <span *ngIf="role.includes(9) ||  item1.userName == mineInfo?.username"
                                       (click)="goApplyEdit(item1)" [ngClass]="item1.isImportant == 1?'import':''">
                                        <span *ngIf="item1.startEnd == 1">9:00-09:45</span>
                                        <span *ngIf="item1.startEnd == 2">09:45-10:30</span>
                                        <span *ngIf="item1.startEnd == 3">10:30-11:15</span>
                                        <span> {{item1.userName}}</span>
                                         (已预定)
                                </span>
                            </ng-container>
                        </div>
                    </div>
                    <div class="afternoon">
                        <div class="afternoon-text">
                            下午
                        </div>
                        <div class="morning-room">
                            <ng-container *ngFor="let item2 of room?.afternoonUse">
                                <span [ngClass]="item2.isImportant == 1?'import':''"
                                      *ngIf="role.includes(9) ||  item2.userName == mineInfo?.username"
                                      (click)="goApplyEdit(item2)">
                                        <span *ngIf="item2.startEnd == 4">13:00-14:00</span>
                                        <span *ngIf="item2.startEnd == 5">14:00-15:00</span>
                                        <span *ngIf="item2.startEnd == 6">15:00-16:00</span>
                                        <span *ngIf="item2.startEnd == 7">16:00-17:00</span>
                                    <span>
                                        {{item2.userName}}
                                    </span>
                                    (已预定)
                                </span>
                            </ng-container>
                        </div>
                    </div>
                </div>
                <div class="notYet">
                    <p>可预约时间</p>
                    <div class="morning">
                        <div class="morning-text">
                            上午
                        </div>
                        <div class="morning-room">
                            <span *ngFor="let item3 of room?.morningNotUse" (click)="goApply(item3)">
                                    <span *ngIf="item3.startEnd == 1">9:00-09:45</span>
                                    <span *ngIf="item3.startEnd == 2">09:45-10:30</span>
                                    <span *ngIf="item3.startEnd == 3">10:30-11:15</span>(可预定)
                            </span>
                        </div>
                    </div>
                    <div class="afternoon">
                        <div class="afternoon-text">
                            下午
                        </div>
                        <div class="morning-room">
                            <span *ngFor="let item4 of room?.afternoonNotUse" (click)="goApply(item4)">
                                    <span *ngIf="item4.startEnd == 4">13:00-14:00</span>
                                    <span *ngIf="item4.startEnd == 5">14:00-15:00</span>
                                    <span *ngIf="item4.startEnd == 6">15:00-16:00</span>
                                    <span *ngIf="item4.startEnd == 7">16:00-17:00</span>(可预定)
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </ng-container>
        <ng-container *ngIf="changeType == 2">
            <div class="duty-content">
                <ion-list class="myItem">
                    <ion-item-sliding class="apply" *ngFor="let item of applyList">
                        <ion-item>
                            <p>
                                <span>申请时间：
                                    <span>{{item.submitTime | date:'yyyy-MM-dd HH:mm'}}</span>
                                </span>
                            </p>
                            <p>
                                <span class="apply-room">服务：
                                    <span *ngIf="item?.service.includes('1')">理发</span>
                                    <span *ngIf="item?.service.includes('2')">洗吹</span>
                                    <span *ngIf="item?.service.includes('3')">染发</span>
                                </span>
                            </p>
                            <p>
                                <span class="meet-type">
                                    预定时间：
                                    <span>{{item.appointmentDate}}</span>
                                    <span *ngIf="item.startEnd == 1">9:00-09:45</span>
                                    <span *ngIf="item.startEnd == 2">09:45-10:30</span>
                                    <span *ngIf="item.startEnd == 3">10:30-11:15</span>
                                    <span *ngIf="item.startEnd == 4">13:00-14:00</span>
                                    <span *ngIf="item.startEnd == 5">14:00-15:00</span>
                                    <span *ngIf="item.startEnd == 6">15:00-16:00</span>
                                    <span *ngIf="item.startEnd == 7">16:00-17:00</span>
                                </span>
                            </p>
                            <p *ngIf="nowDate < item.appointmentTime" (click)="removeItem(item)" class="cancelBtn-key">
                                <span>取消</span></p>
                        </ion-item>
                    </ion-item-sliding>
                </ion-list>
                <ion-list text-center style="margin-top: 10rem;color: #666666"
                          *ngIf="!page.isLoad  && applyList.length == 0">
                    <img style="width: 20%;" src="./assets/imgs/no-info.png" alt="">
                    <p text-center>
                        暂无预约
                    </p>
                </ion-list>
            </div>
        </ng-container>
        <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
            <ion-infinite-scroll-content
                    loadingSpinner="bubbles"
                    loadingText="加载中"></ion-infinite-scroll-content>
        </ion-infinite-scroll>
    </ion-content>

</ion-content>