Files
bbq/src/app/routes/usercenter/components/driver/captain/captain-detail/captain-detail.component.html
Taric Xin 75c541d74b edit
2021-12-16 19:40:21 +08:00

142 lines
7.2 KiB
HTML

<!-- 页头 -->
<page-header-wrapper [logo]="logo" [title]="'车队长详情'" [content]="content">
<ng-template #logo>
<button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
<i nz-icon nzType="left" nzTheme="outline"></i>
</button>
</ng-template>
<ng-template #content>
<nz-skeleton [nzLoading]="service.http.loading">
<div class="user-info">
<img [src]="userDetail?.avatar" />
<div style="flex: 1">
<div style="display: flex;width: 100%;justify-content: space-between;">
<p style="padding-right: 80px; width: 400px;">{{ userDetail?.name }}
<nz-badge nzStatus="success" nzText="正常" *ngIf="!userDetail?.stateLocked" class="ml-xl">
</nz-badge>
<nz-badge nzStatus="warning" nzText="冻结" *ngIf="userDetail?.stateLocked" class="ml-xl">
</nz-badge>
</p>
<div style="margin-right: 24px;">
<button *ngIf="userDetail?.stateLocked" [nzLoading]="service.http.loading" nz-button
nzType="primary" nzGhost (click)="userAction(1)">
启用
</button>
<button *ngIf="!userDetail?.stateLocked" [nzLoading]="service.http.loading" nz-button
nzDanger nzGhost (click)="userAction(0)">
冻结
</button>
</div>
</div>
<div style="display: flex;">
<p style="padding-right: 80px; width: 400px;">手机号:{{ userDetail?.phone }}
</p>
<p>注册时间:{{ userDetail?.createTime }}</p>
</div>
</div>
</div>
</nz-skeleton>
</ng-template>
</page-header-wrapper>
<nz-card [nzLoading]="service.http.loading">
<div [class]="isEditUser?'edit-box':'readOnly-box'">
<sv-container col="2">
<sv-title>个人信息
<label *ngIf="userIdentityDetail?.certificationStatus===1" style="color: #52c41a;" class="ml-md"><i
nz-icon nzType="check-circle" nzTheme="fill" class="mr-xs"></i>审核通过
</label>
<label *ngIf="userIdentityDetail?.certificationStatus===2" style="color: #ff4d4f;" class="ml-md"><i
nz-icon nzType="close-circle" nzTheme="fill" class="mr-xs"></i>驳回
</label>
<div style="float: right;">
<ng-container *ngIf="isEditUser; else elseTemplate">
<button [nzLoading]="service.http.loading" nz-button (click)="reset()">
取消
</button>
<button [nzLoading]="service.http.loading" nz-button nzDanger (click)="saveUser()">
保存
</button>
</ng-container>
<ng-template #elseTemplate>
<button nz-button nzType="default" nzDanger (click)="approveUser()"
*ngIf="userIdentityDetail?.certificationStatus===0">审核通过</button>
<button nz-button nzType="default" nzDanger (click)="rejectedUser()"
*ngIf="userIdentityDetail?.certificationStatus===0">驳回审核</button>
<button nz-button nzType="default" nzDanger (click)="ratify()">修改</button>
</ng-template>
</div>
</sv-title>
<sv label="姓名">
<input nz-input type="text" [(ngModel)]="userIdentityDetail.name" [readonly]="!isEditUser"
[nzBorderless]="!isEditUser" [placeholder]="isEditUser?'':'-'">
</sv>
<sv label="身份证号">
<input nz-input type="text" [(ngModel)]="userIdentityDetail.certificateNumber" [readonly]="!isEditUser"
[nzBorderless]="!isEditUser" [placeholder]="isEditUser?'':'-'">
</sv>
<sv label="身份证照" col="1">
<div class="d-flex">
<ng-container
*ngTemplateOutlet="uploadTemplate;context:{data:userIdentityDetail,status:isEditUser,key:'certificatePhotoFrontWatermark',key2:'certificatePhotoFront',hover:'certificateBackFront'}">
</ng-container>
<ng-container
*ngTemplateOutlet="uploadTemplate;context:{data:userIdentityDetail,status:isEditUser,key:'certificatePhotoBackWatermark',key2:'certificatePhotoBack',hover:'certificateBack'}">
</ng-container>
</div>
</sv>
</sv-container>
</div>
<sv-container col="3" class="mt-md">
<sv-title>银行结算信息</sv-title>
<sv label="开户银行">
<!-- {{ detailData?.name }} -->
</sv>
<sv label="银行卡号">
<!-- {{ detailData?.certificateNumber }} -->
</sv>
</sv-container>
</nz-card>
<ng-template #redectModal>
<div nz-row nzGutter="8">
<div nz-col nzSpan="24" se-container [labelWidth]="120">
<se [col]="1" label="姓名">
{{ userIdentityDetail?.name }}
</se>
<se [col]="1" label="备注" required>
<textarea nz-input rows="3" style="width: 325px;margin-left: 14px;"
[(ngModel)]="approvalOpinion"></textarea>
</se>
</div>
</div>
</ng-template>
<ng-template #uploadTemplate let-data="data" let-status="status" let-key="key" let-key2="key2" let-hover="hover">
<nz-upload class="avatar-uploader" [nzAction]="uploadURl" nzName="multipartFile" nzListType="picture-card"
[nzShowUploadList]="false" nzFileType="image/png,image/jpeg,image/jpg,image/gif"
[nzDisabled]="!status || disabledUpload" (nzChange)="changeUpload($event,data,key,key2)">
<ng-container *ngIf="!data[key] && status">
<i class="upload-icon" nz-icon [nzType]="service.http.loading ? 'loading' : 'plus'"></i>
<div class="ant-upload-text">上传</div>
</ng-container>
<div *ngIf="data[key]" (mouseover)="data[hover]=true" (mouseleave)="data[hover]=false"
(click)="$event.cancelBubble=true" class="image-hover">
<img [src]="data[key]" style="width: 200px;height: 160px;" (click)="showImg(data[key])" />
<div class="mask" *ngIf="data[hover] && status"></div>
<div class="mask-over" *ngIf="data[hover] && status">
<i nz-icon nzType="close-circle" nzTheme="fill" class="delete-icon"
(click)="deleteImg(data,key,key2)"></i>
<div style="display: flex;align-items: center;">
<i nz-icon nzType="eye" nzTheme="fill" class="show-icon" (click)="showImg(data[key])"></i>
</div>
</div>
</div>
</nz-upload>
</ng-template>