You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
215 lines
11 KiB
215 lines
11 KiB
10 months ago
|
<form nz-form [formGroup]="searchForm" class="search_form" [nzLayout]="'vertical'">
|
||
|
<div nz-row [nzGutter]="24">
|
||
|
<div nz-col [nzSpan]="6">
|
||
|
<nz-form-item>
|
||
|
<nz-form-label>商品名称</nz-form-label>
|
||
|
<nz-form-control>
|
||
|
<input nzSize="large" nz-input formControlName="goodsName" placeholder="请输入" />
|
||
|
</nz-form-control>
|
||
|
</nz-form-item>
|
||
|
</div>
|
||
|
<div nz-col [nzSpan]="6">
|
||
|
<nz-form-item>
|
||
|
<nz-form-label>物流订单号</nz-form-label>
|
||
|
<nz-form-control>
|
||
|
<input nzSize="large" nz-input formControlName="logisticsNo" placeholder="请输入" />
|
||
|
</nz-form-control>
|
||
|
</nz-form-item>
|
||
|
</div>
|
||
|
<div nz-col [nzSpan]="6">
|
||
|
<nz-form-item>
|
||
|
<nz-form-label>订单号</nz-form-label>
|
||
|
<nz-form-control>
|
||
|
<input nzSize="large" nz-input formControlName="orderNo" placeholder="请输入" />
|
||
|
</nz-form-control>
|
||
|
</nz-form-item>
|
||
|
</div>
|
||
|
<div nz-col [nzSpan]="6">
|
||
|
<nz-form-item>
|
||
|
<nz-form-label>用户手机号</nz-form-label>
|
||
|
<nz-form-control>
|
||
|
<input nzSize="large" nz-input formControlName="userPhone" placeholder="请输入" />
|
||
|
</nz-form-control>
|
||
|
</nz-form-item>
|
||
|
</div>
|
||
|
|
||
|
<div nz-col [nzSpan]="6">
|
||
|
<nz-form-item>
|
||
|
<nz-form-label>商品分类</nz-form-label>
|
||
|
<nz-form-control>
|
||
|
<nz-tree-select
|
||
|
nzPlaceHolder="请选择"
|
||
|
formControlName="goodsType"
|
||
|
[nzNodes]="nodes"
|
||
|
nzShowSearch
|
||
|
></nz-tree-select>
|
||
|
</nz-form-control>
|
||
|
</nz-form-item>
|
||
|
</div>
|
||
|
<div nz-col [nzSpan]="6">
|
||
|
<nz-form-item>
|
||
|
<nz-form-label>商品品牌</nz-form-label>
|
||
|
<nz-form-control>
|
||
|
<nz-select nzSize="large" nzShowSearch nzAllowClear nzPlaceHolder="请选择" formControlName="goodsBrand">
|
||
|
<nz-option *ngFor="let item of nodesBrand" nzLabel="{{item['title']}}" nzValue="{{item['id']}}"></nz-option>
|
||
|
</nz-select>
|
||
|
</nz-form-control>
|
||
|
</nz-form-item>
|
||
|
</div>
|
||
|
|
||
|
<div nz-col [nzSpan]="6">
|
||
|
<nz-form-item>
|
||
|
<nz-form-label>订单状态</nz-form-label>
|
||
|
<nz-form-control>
|
||
|
<nz-select nzSize="large" nzShowSearch nzAllowClear nzPlaceHolder="请选择" formControlName="status">
|
||
|
<nz-option *ngFor="let item of orderGoodsStatus" nzLabel="{{item['name']}}" nzValue="{{item['key']}}"></nz-option>
|
||
|
</nz-select>
|
||
|
</nz-form-control>
|
||
|
</nz-form-item>
|
||
|
</div>
|
||
|
|
||
|
<div nz-col [nzSpan]="6" class="search-area">
|
||
|
<button nz-button [nzType]="'primary'" (click)="getRequest(true)">查询</button>
|
||
|
<button nz-button (click)="searchForm.reset()">重置</button>
|
||
|
</div>
|
||
|
</div>
|
||
|
</form>
|
||
|
|
||
|
<nz-table #basicTable
|
||
|
[nzBordered]="true"
|
||
|
[nzFrontPagination]="false"
|
||
|
[nzShowQuickJumper]="true"
|
||
|
[nzShowTotal]="totalTemplate"
|
||
|
[(nzPageIndex)]="tablePageNum"
|
||
|
(nzPageIndexChange)="getRequest(false)"
|
||
|
[nzTotal]="tableData.total"
|
||
|
[nzData]="tableData.list" >
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th nzWidth="80px">商品名称</th>
|
||
|
<th nzWidth="100px">商品图片</th>
|
||
|
<th nzWidth="100px">商品分类</th>
|
||
|
<th nzWidth="100px">商品品牌</th>
|
||
|
<th nzWidth="100px">物流单号</th>
|
||
|
<th nzWidth="50px">创建时间</th>
|
||
|
<th nzWidth="50px">更新时间</th>
|
||
|
<th nzWidth="50px">状态</th>
|
||
|
<th nzWidth="70px">操作</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr *ngFor="let data of basicTable.data">
|
||
|
<td>{{data.goodsName}} - {{data.goodsSpecsName}}</td>
|
||
|
<td>
|
||
|
<img nz-image width="60px" height="60px" nzSrc="{{imageUrl + data.img }}" [nzFallback]="fallbackImg" alt="" />
|
||
|
</td>
|
||
|
<td>{{data.goodsTypeName}}</td>
|
||
|
<td>{{data.goodsBrandName}}</td>
|
||
|
<td>{{data.logisticsNo}}</td>
|
||
|
<td>{{ data.createTime | date: 'yyyy-MM-dd HH:mm'}}</td>
|
||
|
<td>{{ data.updateTime | date: 'yyyy-MM-dd HH:mm'}}</td>
|
||
|
<td>{{data.status | orderGoodsStatus}}</td>
|
||
|
<td>
|
||
|
<a (click)="showDetail(data)">详情</a>
|
||
|
<nz-divider nzType="vertical"></nz-divider>
|
||
|
<a nz-dropdown [nzDropdownMenu]="menu">
|
||
|
更多
|
||
|
<span nz-icon nzType="down"></span>
|
||
|
</a>
|
||
|
<nz-dropdown-menu #menu="nzDropdownMenu">
|
||
|
<ul nz-menu nzSelectable>
|
||
|
<li nz-menu-item (click)="getLogisticsNo(data.id)"><a>录入物流编码</a></li>
|
||
|
<li nz-menu-item (click)="showLogisticsNo(data.id)"><a>查看物流</a></li>
|
||
|
</ul>
|
||
|
</nz-dropdown-menu>
|
||
|
</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
<ng-template #totalTemplate let-total>总计 {{ total }} 条</ng-template>
|
||
|
|
||
|
<nz-modal [nzWidth]="1400" [(nzVisible)]="orderDetailModal" nzTitle="订单详情" (nzOnCancel)="orderDetailModal = false" (nzOnOk)="orderDetailModal = false">
|
||
|
<ng-container *nzModalContent>
|
||
|
|
||
|
<nz-tabset nzType="card">
|
||
|
<nz-tab nzTitle="订单信息">
|
||
|
<nz-descriptions nzTitle="订单信息" nzBordered>
|
||
|
<nz-descriptions-item nzTitle="商品名称">{{orderGoodsData?.goodsName}} - {{orderGoodsData?.goodsSpecsName}}</nz-descriptions-item>
|
||
|
<nz-descriptions-item nzTitle="用户手机号">{{ orderGoodsData?.userPhone }}</nz-descriptions-item>
|
||
|
<nz-descriptions-item nzTitle="商品分类">{{ orderGoodsData?.goodsTypeName }}</nz-descriptions-item>
|
||
|
<nz-descriptions-item nzTitle="商品品牌">{{ orderGoodsData?.goodsBrandName }}</nz-descriptions-item>
|
||
|
<nz-descriptions-item nzTitle="商品价格">{{ orderGoodsData?.goodsSpecsOriginalPrice }}</nz-descriptions-item>
|
||
|
<nz-descriptions-item nzTitle="商品数量">{{ orderGoodsData?.goodsCount }}</nz-descriptions-item>
|
||
|
<nz-descriptions-item nzTitle="图片" [nzSpan]="3">
|
||
|
<nz-image-group>
|
||
|
<img nz-image width="80px" [nzFallback]="fallbackImg" nzSrc="{{imageUrl + orderGoodsData.img }}" alt="" />
|
||
|
</nz-image-group>
|
||
|
</nz-descriptions-item>
|
||
|
<nz-descriptions-item nzTitle="状态" [nzSpan]="3">
|
||
|
<nz-badge *ngIf="orderGoodsData?.status == 1" nzStatus="warning" nzText="{{orderGoodsData.status | orderGoodsStatus}}"></nz-badge>
|
||
|
<nz-badge *ngIf="orderGoodsData?.status == 2" nzColor="lime" nzText="{{orderGoodsData.status | orderGoodsStatus}}"></nz-badge>
|
||
|
<nz-badge *ngIf="orderGoodsData?.status == 4" nzStatus="success" nzText="{{orderGoodsData.status | orderGoodsStatus}}"></nz-badge>
|
||
|
<nz-badge *ngIf="orderGoodsData?.status == 3" nzStatus="processing" nzText="{{orderGoodsData.status | orderGoodsStatus}}"></nz-badge>
|
||
|
<nz-badge *ngIf="orderGoodsData?.status == 5" nzStatus="error" nzText="{{orderGoodsData.status | orderGoodsStatus}}"></nz-badge>
|
||
|
<nz-badge *ngIf="orderGoodsData?.status == 6" nzColor="volcano" nzText="{{orderGoodsData.status | orderGoodsStatus}}"></nz-badge>
|
||
|
<nz-badge *ngIf="orderGoodsData?.status == 7" nzColor="orange" nzText="{{orderGoodsData.status | orderGoodsStatus}}"></nz-badge>
|
||
|
<nz-badge *ngIf="orderGoodsData?.status == 8" nzStatus="default" nzText="{{orderGoodsData.status | orderGoodsStatus}}"></nz-badge>
|
||
|
</nz-descriptions-item>
|
||
|
</nz-descriptions>
|
||
|
</nz-tab>
|
||
|
<nz-tab nzTitle="支付信息">
|
||
|
<nz-descriptions nzTitle="支付信息" nzBordered>
|
||
|
<nz-descriptions-item nzTitle="订单号">{{ orderGoodsData?.orderNo }}</nz-descriptions-item>
|
||
|
<nz-descriptions-item nzTitle="子订单号" [nzSpan]="2">{{ orderGoodsData?.childOrderNo }}</nz-descriptions-item>
|
||
|
<nz-descriptions-item nzTitle="支付流水号" [nzSpan]="3">{{ orderGoodsData?.paySerialNo }}</nz-descriptions-item>
|
||
|
<nz-descriptions-item nzTitle="商品总金额" [nzSpan]="3">{{ orderGoodsData?.totalPrice }}</nz-descriptions-item>
|
||
|
<nz-descriptions-item nzTitle="优惠券优惠金额" [nzSpan]="3">{{ orderGoodsData?.couponDiscountPrice }}</nz-descriptions-item>
|
||
|
<nz-descriptions-item nzTitle="积分抵扣优惠金额" [nzSpan]="3">{{ orderGoodsData?.integralDiscountPrice }}</nz-descriptions-item>
|
||
|
<nz-descriptions-item nzTitle="总优惠金额(优惠券优惠金额 + 积分抵扣)" [nzSpan]="3">{{ orderGoodsData?.totalDeductionPrice }}</nz-descriptions-item>
|
||
|
<nz-descriptions-item nzTitle="实付金额" [nzSpan]="3">{{ orderGoodsData?.payRealPrice }}</nz-descriptions-item>
|
||
|
</nz-descriptions>
|
||
|
</nz-tab>
|
||
|
<nz-tab nzTitle="订单时间">
|
||
|
<nz-descriptions nzTitle="订单时间" nzBordered>
|
||
|
<nz-descriptions-item *ngIf="orderGoodsData?.createTime != null" nzTitle="创建时间">{{ orderGoodsData?.createTime | date: 'yyyy-MM-dd HH:mm' }}</nz-descriptions-item>
|
||
|
<nz-descriptions-item *ngIf="orderGoodsData?.payTime != null" nzTitle="支付时间">{{ orderGoodsData?.payTime | date: 'yyyy-MM-dd HH:mm' }}</nz-descriptions-item>
|
||
|
<nz-descriptions-item *ngIf="orderGoodsData?.cancelTime != null" nzTitle="取消时间">{{ orderGoodsData?.cancelTime | date: 'yyyy-MM-dd HH:mm' }}</nz-descriptions-item>
|
||
|
<nz-descriptions-item *ngIf="orderGoodsData?.refundTime != null" nzTitle="退款时间">{{ orderGoodsData?.refundTime | date: 'yyyy-MM-dd HH:mm' }}</nz-descriptions-item>
|
||
|
<nz-descriptions-item *ngIf="orderGoodsData?.finishTime != null" nzTitle="完成时间">{{ orderGoodsData?.finishTime | date: 'yyyy-MM-dd HH:mm' }}</nz-descriptions-item>
|
||
|
<nz-descriptions-item *ngIf="orderGoodsData?.updateTime != null" nzTitle="更新时间">{{ orderGoodsData?.updateTime | date: 'yyyy-MM-dd HH:mm' }}</nz-descriptions-item>
|
||
|
</nz-descriptions>
|
||
|
</nz-tab>
|
||
|
</nz-tabset>
|
||
|
|
||
|
</ng-container>
|
||
|
</nz-modal>
|
||
|
|
||
|
<nz-modal [(nzVisible)]="isVisible" nzTitle="新增物流单号" (nzOnCancel)="isVisible = false" (nzOnOk)="handleOk()">
|
||
|
<ng-container *nzModalContent>
|
||
|
<div nz-row>
|
||
|
<div nz-col nzSpan="20">
|
||
|
<nz-form-item>
|
||
|
<nz-form-label [nzSpan]="6">物流单号</nz-form-label>
|
||
|
<nz-form-control [nzSpan]="16">
|
||
|
<input nz-input [(ngModel)]="logisticsNo"/>
|
||
|
</nz-form-control>
|
||
|
</nz-form-item>
|
||
|
</div>
|
||
|
</div>
|
||
|
</ng-container>
|
||
|
</nz-modal>
|
||
|
|
||
|
<nz-modal [(nzVisible)]="orderDetailModalChild" nzTitle="物流详情" (nzOnCancel)="orderDetailModalChild = false" [nzFooter]="null"
|
||
|
nzWidth="1000px" [nzBodyStyle]=" { padding: '20px 20px 30px 20px'}">
|
||
|
<ng-container *nzModalContent>
|
||
|
<nz-spin [nzSpinning]="orderDetailModalLoading">
|
||
|
<nz-timeline [nzReverse]="true" *ngIf="logisticsTraceDetails !== null">
|
||
|
<nz-timeline-item *ngFor="let item of logisticsTraceDetails;let i = index" [nzColor]="i===logisticsTraceDetails.length -1?'green':'gray'">
|
||
|
<p [ngClass]="{'fontColorBlue': i===logisticsTraceDetails.length -1 }">{{item['desc']}}</p>
|
||
|
<p [ngClass]="{'fontColorBlue': i===logisticsTraceDetails.length -1 }">{{item.time | date : 'yyyy-MM-dd HH:mm:ss'}}</p>
|
||
|
</nz-timeline-item>
|
||
|
</nz-timeline>
|
||
|
<nz-result *ngIf="logisticsTraceDetails === null" nzStatus="404" nzTitle="404" nzSubTitle="很抱歉暂无物流信息."></nz-result>
|
||
|
</nz-spin>
|
||
|
</ng-container>
|
||
|
</nz-modal>
|