331 lines
16 KiB
HTML
331 lines
16 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" [disabled]="service.http.loading" nz-button nzType="primary"
|
|
nzGhost (click)="userAction(1)" acl [acl-ability]="['USERCENTER-DRIVER-LIST-DETAIL-lock']">
|
|
启用
|
|
</button>
|
|
<button *ngIf="!userDetail?.stateLocked" [disabled]="service.http.loading" nz-button nzDanger nzGhost
|
|
(click)="userAction(0)" acl [acl-ability]="['USERCENTER-DRIVER-LIST-DETAIL-lock']">
|
|
冻结
|
|
</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>
|
|
<label *ngIf="faceStatus == 1" style="color: #bec8c8; position: relative;
|
|
bottom: 2px;" class="ml-md"><i nz-icon nzType="check-circle" nzTheme="fill" class="mr-xs">人脸识别结果：已发起</i>
|
|
</label>
|
|
<label *ngIf="faceStatus == 0" style="color: #bec8c8; position: relative;
|
|
bottom: 2px;" class="ml-md"><i nz-icon nzType="check-circle" nzTheme="fill" class="mr-xs">人脸识别结果：无</i>
|
|
</label>
|
|
<label *ngIf="faceStatus == 2" style="color: #bec8c8; position: relative;
|
|
bottom: 2px;" class="ml-md"><i nz-icon nzType="check-circle" nzTheme="fill" class="mr-xs">人脸识别结果：进行中</i>
|
|
</label>
|
|
<label *ngIf="faceStatus == 3" style="color: #52c41a; position: relative;
|
|
bottom: 2px;" class="ml-md"><i nz-icon nzType="check-circle" nzTheme="fill" class="mr-xs">人脸识别结果：已成功</i>
|
|
</label>
|
|
<label *ngIf="faceStatus == 4" style="color: #ff4d4f; position: relative;
|
|
bottom: 2px;" class="ml-md"><i nz-icon nzType="check-circle" nzTheme="fill"
|
|
class="mr-xs">人脸识别结果：已失败;失败原因：{{facetext}}</i>
|
|
</label>
|
|
<div style="float: right;">
|
|
<ng-container *ngIf="isEditUser; else elseTemplate">
|
|
<button [disabled]="service.http.loading" nz-button (click)="reset(0)">
|
|
取消
|
|
</button>
|
|
<button [disabled]="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" acl
|
|
[acl-ability]="['USERCENTER-DRIVER-LIST-DETAIL-auditUser']">审核通过</button>
|
|
<button nz-button nzType="default" nzDanger (click)="rejectedUser()"
|
|
*ngIf="userIdentityDetail?.certificationStatus===0" acl
|
|
[acl-ability]="['USERCENTER-DRIVER-LIST-DETAIL-auditUser']">驳回审核</button>
|
|
<button nz-button nzType="default" nzDanger (click)="ratify(0)" acl
|
|
[acl-ability]="['USERCENTER-DRIVER-LIST-DETAIL-editUser']">修改</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>
|
|
|
|
<nz-divider></nz-divider>
|
|
<div [class]="isEditDriver?'edit-box':'readOnly-box'">
|
|
<sv-container col="3" class="mt16">
|
|
<sv-title>驾驶证信息
|
|
<label *ngIf="driverDetail?.approvalStatus===20" style="color: #52c41a;" class="ml-md"><i nz-icon
|
|
nzType="check-circle" nzTheme="fill" class="mr-xs"></i>审核通过
|
|
</label>
|
|
<label *ngIf="driverDetail?.approvalStatus===30" 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="isEditDriver;else editDriverButton">
|
|
<button [disabled]="service.http.loading" nz-button (click)="reset(1)">
|
|
取消
|
|
</button>
|
|
<button [disabled]="service.http.loading" nz-button nzDanger (click)="saveDriver()">
|
|
保存
|
|
</button>
|
|
</ng-container>
|
|
<ng-template #editDriverButton>
|
|
<button *ngIf="driverDetail?.approvalStatus==10" nz-button nzType="default" nzDanger
|
|
(click)="approveDriver()" acl [acl-ability]="['USERCENTER-DRIVER-LIST-DETAIL-auditDriver']">审核通过</button>
|
|
<button *ngIf="driverDetail?.approvalStatus==10" nz-button nzType="default" nzDanger
|
|
(click)="rejectedDriver()" acl [acl-ability]="['USERCENTER-DRIVER-LIST-DETAIL-auditDriver']">驳回审核</button>
|
|
<button nz-button nzType="default" nzDanger (click)="ratify(1)" acl
|
|
[acl-ability]="['USERCENTER-DRIVER-LIST-DETAIL-editDriver']">修改</button>
|
|
</ng-template>
|
|
</div>
|
|
</sv-title>
|
|
<sv label="驾驶证号">
|
|
<input nz-input type="text" [(ngModel)]="driverDetail.licenseNo" [readonly]="!isEditDriver"
|
|
[nzBorderless]="!isEditDriver" [placeholder]="isEditDriver?'':'-'">
|
|
</sv>
|
|
<sv label="准驾车型">
|
|
<nz-select [nzMaxTagCount]="3" nzPlaceHolder="请选择" [(ngModel)]="driverDetail.driverModel"
|
|
nzMode="multiple" [nzPlaceHolder]="isEditDriver?'':'-'" [nzBorderless]="!isEditDriver"
|
|
[nzShowArrow]="isEditDriver" [nzDisabled]="!isEditDriver">
|
|
<nz-option *ngFor="let i of contencarModel" [nzLabel]="i.label" [nzValue]="i.label"></nz-option>
|
|
</nz-select>
|
|
</sv>
|
|
<sv label="有效期起">
|
|
<nz-date-picker [(ngModel)]="driverDetail.validStartTime" [nzDisabled]="!isEditDriver"
|
|
[nzPlaceHolder]="isEditDriver?'':'-'" [nzBorderless]="!isEditDriver"
|
|
[nzSuffixIcon]="isEditDriver?'calendar':''"></nz-date-picker>
|
|
</sv>
|
|
<sv label="有效期至" col="3">
|
|
<nz-date-picker [(ngModel)]="driverDetail.validEndTime" [nzDisabled]="!isEditDriver" dateFormat="yyyy-MM-dd"
|
|
[nzPlaceHolder]="isEditDriver?'':'-'" [nzBorderless]="!isEditDriver"
|
|
[nzSuffixIcon]="isEditDriver?'calendar':''"></nz-date-picker>
|
|
</sv>
|
|
<sv label="驾驶证签发机关" col="2">
|
|
<input nz-input type="text" [(ngModel)]="driverDetail.signingOrganization" [readonly]="!isEditDriver"
|
|
[nzBorderless]="!isEditDriver" [placeholder]="isEditDriver?'':'-'">
|
|
</sv>
|
|
<sv label="驾驶证照片" col="1">
|
|
<ng-container
|
|
*ngTemplateOutlet="uploadTemplate;context:{data:driverDetail,status:isEditDriver,key:'certificatePhotoWatermark',key2:'certificatePhoto',hover:'driverCertificate'}">
|
|
</ng-container>
|
|
</sv>
|
|
</sv-container>
|
|
|
|
<nz-divider></nz-divider>
|
|
<sv-container col="3" class="mt16">
|
|
<sv-title>从业资格证信息
|
|
<label *ngIf="licenseDetail?.approvalStatus===20" style="color: #52c41a;" class="ml-md">
|
|
<i nz-icon nzType="check-circle" nzTheme="fill" class="mr-xs"></i>审核通过
|
|
</label>
|
|
<label *ngIf="licenseDetail?.approvalStatus===30" style="color: #ff4d4f;" class="ml-md">
|
|
<i nz-icon nzType="close-circle" nzTheme="fill" class="mr-xs"></i>驳回
|
|
</label>
|
|
</sv-title>
|
|
<sv label="从业资格证号">
|
|
<input nz-input type="text" [(ngModel)]="licenseDetail.licenseNo" [readonly]="!isEditDriver"
|
|
[nzBorderless]="!isEditDriver" [placeholder]="isEditDriver?'':'-'">
|
|
</sv>
|
|
<sv label="发证日期">
|
|
<nz-date-picker [(ngModel)]="licenseDetail.validStartTime" [nzDisabled]="!isEditDriver"
|
|
[nzPlaceHolder]="isEditDriver?'':'-'" [nzBorderless]="!isEditDriver"
|
|
[nzSuffixIcon]="isEditDriver?'calendar':''"></nz-date-picker>
|
|
</sv>
|
|
<sv label="有效期至">
|
|
<nz-date-picker [(ngModel)]="licenseDetail.validEndTime" [nzDisabled]="!isEditDriver"
|
|
[nzPlaceHolder]="isEditDriver?'':'-'" [nzBorderless]="!isEditDriver"
|
|
[nzSuffixIcon]="isEditDriver?'calendar':''"></nz-date-picker>
|
|
</sv>
|
|
<sv label="公司所在地" col="3">
|
|
<ng-container *ngIf="isEditDriver; else cascaderelseTemplate">
|
|
<nz-select [(ngModel)]="licenseDetail.regionCode">
|
|
<ng-container *ngFor="let item of adressCodeList">
|
|
<nz-option [nzValue]="item.regionFullCodes" [nzLabel]="item.regionFullName"></nz-option>
|
|
</ng-container>
|
|
</nz-select>
|
|
</ng-container>
|
|
<ng-template #cascaderelseTemplate>
|
|
{{licenseDetail?.regionCodeName }}
|
|
</ng-template>
|
|
</sv>
|
|
<sv label="从业资格证照片" col="1">
|
|
<ng-container
|
|
*ngTemplateOutlet="uploadTemplate;context:{data:licenseDetail,status:isEditDriver,key:'certificatePhotoWatermark',key2:'certificatePhoto',hover:'licenseCertificate'}">
|
|
</ng-container>
|
|
</sv>
|
|
</sv-container>
|
|
</div>
|
|
|
|
<nz-divider></nz-divider>
|
|
<sv-container col="3" class="mt16">
|
|
<sv-title>载具信息</sv-title>
|
|
<ng-container *ngFor="let carDatail of carList">
|
|
<sv label="车牌号">
|
|
{{ carDatail?.carNo }}
|
|
</sv>
|
|
<sv label="车牌颜色">
|
|
{{ carDatail?.carNoColor }}
|
|
</sv>
|
|
<sv label="车型">
|
|
{{ carDatail?.carModel }}
|
|
</sv>
|
|
<sv label="车长">
|
|
{{ carDatail?.carLength }}
|
|
</sv>
|
|
<sv label="是否为当前车辆">
|
|
{{ carDatail?.isDefault?'是':'否' }}
|
|
</sv>
|
|
<sv label="自有载具">
|
|
{{ carDatail?.isSelf?'否':'是' }}
|
|
</sv>
|
|
<sv label="行驶证照片" col="3">
|
|
<app-imagelist [imgList]="[carDatail?.certificatePhotoFrontWatermark,carDatail?.certificatePhotoBackWatermark]">
|
|
</app-imagelist>
|
|
</sv>
|
|
<sv label="道路运输证照片" col="3">
|
|
<app-imagelist [imgList]="[carDatail?.roadTransportPhotoWatermark]"></app-imagelist>
|
|
</sv>
|
|
<sv label="车头照" col="3">
|
|
<app-imagelist [imgList]="[carDatail?.carFrontPhotoWatermark]"></app-imagelist>
|
|
</sv>
|
|
<nz-divider></nz-divider>
|
|
</ng-container>
|
|
|
|
</sv-container>
|
|
|
|
<sv-container col="3" class="mt-md">
|
|
<sv-title>银行结算信息</sv-title>
|
|
<sv label="开户银行">
|
|
{{ detailData?.name }}
|
|
</sv>
|
|
<sv label="银行卡号">
|
|
{{ detailData?.certificateNumber }}
|
|
</sv>
|
|
</sv-container>
|
|
|
|
<nz-divider></nz-divider>
|
|
<sv-container col="3" class="mt16">
|
|
<sv-title>服务评级
|
|
<ng-container *ngIf="billEvaluateList?.length===0">(暂无评级)</ng-container>
|
|
</sv-title>
|
|
<sv [label]="item.evaluateType" *ngFor="let item of billEvaluateList">
|
|
<nz-rate [ngModel]="item.evaluateFraction" nzDisabled></nz-rate>
|
|
</sv>
|
|
</sv-container>
|
|
|
|
<sv-container col="3" class="mt16">
|
|
<sv-title>关联企业</sv-title>
|
|
<st #st [columns]="columns" [data]="service.$api_get_driver_projects" size="small"
|
|
[req]="{ method: 'POST', allInBody: true, params: {appUserId:route.snapshot.params.id} }" [page]="{ show: false }"
|
|
[res]="{ reName: { list: 'data' } }" style="width: 100%;">
|
|
</st>
|
|
</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 #rejectedDriverModal>
|
|
<div nz-row nzGutter="8">
|
|
<div nz-col nzSpan="24" se-container [labelWidth]="120">
|
|
<se [col]="1" label="驾驶证号">
|
|
{{driverDetail?.licenseNo }}
|
|
</se>
|
|
<se [col]="1" label="从业资格证号">
|
|
{{ licenseDetail?.licenseNo }}
|
|
</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,hover)">
|
|
<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 nz-image [nzSrc]="data[key]" style="width: 200px;height: 160px;" />
|
|
<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> |