duty-sign-up.html

<ion-header>

  <ion-navbar>
    <ion-title>值班签到</ion-title>
  </ion-navbar>

</ion-header>

<ion-content class="bgc-e7e8ed">
    <!--没有值班-->
    <ng-container *ngIf="!signInfo">
        <div text-center class="bgc-fff" style="padding: 5rem;">
            <img style="width: 20%;" src="./assets/imgs/no-info.png">
            <p text-center class="color-666">
               没有需要签到的值班
            </p>
        </div>
        <div class="check-info">
            <p class="margin-10-0">值班签到说明：</p>
            <div>
                <div class="info-content">
                    <div class="info-left">白班：</div>
                    <div class="info-right">
                        <p>值班当天 <span class="color-24bafc margin-0-5">8:00~9:00</span>开启签到</p>
                        <p>值班当天 <span class="color-24bafc margin-0-5">18:00~19:00</span>开启签退</p>
                    </div>
                </div>
                <div class="info-content">
                    <div class="info-left">夜班：</div>
                    <div class="info-right">
                        <p>值班当天 <span class="color-24bafc margin-0-5">18:00~19:00</span>开启签到</p>
                        <p>值班第二天 <span class="color-24bafc margin-0-5">8:00~9:00</span>开启签退</p>
                    </div>
                </div>
            </div>
        </div>
    </ng-container>
    <ng-container *ngIf="signInfo">
        <div class="padding-10-20 bgc-fff detail-title">
            <div class="title-left">
                <span>{{nowDay | date:'yyyy-MM-dd'}}</span>
                <span class="dayType" *ngIf="signInfo.type == 0">白班</span>
                <span class="dayType" *ngIf="signInfo.type == 1">夜班</span>
            </div>
            <div class="title-right">
                <ng-container *ngIf="signStatus == 'success'">
                    <img style="width: 15%;vertical-align: bottom" src="./assets/imgs/sign-success.png" alt="">
                    <span style="vertical-align: super;color: #43af28;">签到成功</span>
                </ng-container>
                <ng-container *ngIf="signStatus == 'fail'">
                    <img style="width: 15%;vertical-align: bottom" src="./assets/imgs/sign-fail.png" alt="">
                    <span style="vertical-align: super;color: #dc7173">签到失败，距离过远</span>
                </ng-container>
            </div>
        </div>
        <div class="detail-item">
            <p class="detail-title1"><span class="color-666">签到：</span>规定签到时间10：00之前</p>
            <ng-container *ngIf="!signInfo?.signInTime">
                <p class="not-sign">尚未签到</p>
            </ng-container>
            <ng-container *ngIf="signInfo?.signInTime">
                <p class="sign-in">签到时间：{{signInfo?.signInTime | date:'yyyy-MM-dd HH:mm:ss'}}</p>
                <p class="sign-in">签到地点：上海市委组织部</p>
            </ng-container>
        </div>
        <button class="submit-btn submit" (click)="calcuDistance()">定位签到</button>

        <div class="detail-item">
            <p class="detail-title2"> <span class="color-666">签退：</span>规定签到时间10：00之前</p>
            <ng-container *ngIf="!signInfo?.signOutTime">
                <p class="not-sign">尚未签退</p>
            </ng-container>
            <ng-container *ngIf="signInfo?.signOutTime">
                <p class="sign-in">签退时间：{{signInfo?.signOutTime | date:'yyyy-MM-dd HH:mm:ss'}}</p>
                <p class="sign-in">签退地点：上海市委组织部</p>
            </ng-container>
        </div>
        <button class="submit-btn submit" (click)="signBack()">定位签退</button>
    </ng-container>
</ion-content>