parent
b250808596
commit
9f34eb6c31
@ -0,0 +1,236 @@ |
||||
<!-- start 面包屑 --> |
||||
<app-breadcrumb></app-breadcrumb> |
||||
<!-- end 面包屑 --> |
||||
|
||||
<nz-spin [nzSpinning]="loadingObject.status" [nzTip]="loadingObject.title"> |
||||
<!-- start 搜索条件 --> |
||||
<div [@openClose]="isCollapse ? 'open' : 'closed'"> |
||||
<div class="inner-content"> |
||||
<form nz-form [formGroup]="searchForm" (ngSubmit)="getRequest(true , searchForm.value)"> |
||||
<div nz-row> |
||||
|
||||
<div nz-col nzSpan="8"> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSpan]="8">交易单号</nz-form-label> |
||||
<nz-form-control [nzSpan]="14"> |
||||
<input nz-input formControlName="orderNo" /> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</div> |
||||
|
||||
<div nz-col nzSpan="8"> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSpan]="8">客户电话</nz-form-label> |
||||
<nz-form-control [nzSpan]="14"> |
||||
<input nz-input formControlName="memPhone" /> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</div> |
||||
<div nz-col nzSpan="8"> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSpan]="8">交易状态</nz-form-label> |
||||
<nz-form-control [nzSpan]="14"> |
||||
<nz-select formControlName="orderStatus" nzAllowClear> |
||||
<nz-option *ngFor="let item of orderStatusArray" nzValue="{{item.codeValue}}" nzLabel="{{item.codeName}}"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</div> |
||||
</div> |
||||
|
||||
<div nz-row *ngIf="isCollapse"> |
||||
<div nz-col nzSpan="8" *ngIf="roleType == 0 || roleType == 1"> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSpan]="8">分公司</nz-form-label> |
||||
<nz-form-control [nzSpan]="14"> |
||||
<nz-select nzShowSearch formControlName="companyId" nzAllowClear> |
||||
<nz-option *ngFor="let item of companyArray" nzValue="{{item['id']}}" nzLabel="{{item['name']}}"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</div> |
||||
|
||||
<div nz-col nzSpan="8"> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSpan]="8">支付方式</nz-form-label> |
||||
<nz-form-control [nzSpan]="14"> |
||||
<nz-select nzAllowClear formControlName="payType"> |
||||
<nz-option nzValue="1" nzLabel="支付宝"></nz-option> |
||||
<nz-option nzValue="2" nzLabel="微信"></nz-option> |
||||
<nz-option nzValue="3" nzLabel="积分抵扣"></nz-option> |
||||
<nz-option nzValue="4" nzLabel="汇联通工会卡"></nz-option> |
||||
<nz-option nzValue="5" nzLabel="银联"></nz-option> |
||||
<nz-option nzValue="6" nzLabel="银联分期"></nz-option> |
||||
<nz-option nzValue="7" nzLabel="嗨森逛油卡"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</div> |
||||
<div nz-col nzSpan="8"> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSpan]="8">支付卡号</nz-form-label> |
||||
<nz-form-control [nzSpan]="14"> |
||||
<input nz-input formControlName="memCardNo" /> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</div> |
||||
<div nz-col nzSpan="8"> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSpan]="8">支付时间</nz-form-label> |
||||
<nz-form-control [nzSpan]="14"> |
||||
<nz-range-picker |
||||
[nzShowTime]="{ nzHideDisabledOptions: true }" |
||||
formControlName="payTimeArray" |
||||
nzFormat="yyyy-MM-dd HH:mm:ss" |
||||
></nz-range-picker> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</div> |
||||
|
||||
<div nz-col nzSpan="8"> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSpan]="8">创建时间</nz-form-label> |
||||
<nz-form-control [nzSpan]="14"> |
||||
<nz-range-picker |
||||
[nzShowTime]="{ nzHideDisabledOptions: true }" |
||||
formControlName="createTimeArray" |
||||
nzFormat="yyyy-MM-dd HH:mm:ss" |
||||
></nz-range-picker> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</div> |
||||
|
||||
<div nz-col nzSpan="8"> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSpan]="8">退款时间</nz-form-label> |
||||
<nz-form-control [nzSpan]="14"> |
||||
<nz-range-picker |
||||
[nzShowTime]="{ nzHideDisabledOptions: true }" |
||||
formControlName="refundTimeArray" |
||||
nzFormat="yyyy-MM-dd HH:mm:ss" |
||||
></nz-range-picker> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</div> |
||||
</div> |
||||
<div nz-row> |
||||
<div nz-col nzSpan="24" class="search-button"> |
||||
<button nz-button nzType="primary"><i nz-icon nzType="search" nzTheme="outline"></i>搜索</button> |
||||
<button nz-button nzType="default" (click)="searchForm.reset();"><i nz-icon nzType="reload" nzTheme="outline"></i>重置</button> |
||||
<a class="collapse" (click)="isCollapse = !isCollapse;">{{!isCollapse ? '更多条件' : '隐藏条件'}}<i nz-icon [nzType]="!isCollapse ? 'down' : 'up'"></i></a> |
||||
</div> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
<!-- end 搜索条件 --> |
||||
|
||||
<!--列表数据--> |
||||
<div class="inner-content"> |
||||
<span>共计 {{total?total:0}} 条数据</span> |
||||
|
||||
|
||||
<!--数组表格 --> |
||||
<nz-table #basicTable |
||||
nzShowPagination |
||||
nzShowSizeChanger |
||||
nzBordered |
||||
[nzData]="requestData" |
||||
[nzTotal]="total" |
||||
[nzLoading]="loading" |
||||
[nzFrontPagination]="false" |
||||
[(nzPageIndex)]="pageNum" |
||||
[(nzPageSize)]="pageSize" |
||||
(nzPageIndexChange)="getRequest(false , searchForm.value)" |
||||
(nzPageSizeChange)="getRequest(false , searchForm.value)" |
||||
[nzPageSizeOptions]="[10,20,50,100]" |
||||
[nzScroll]="{ x: '1200px'}"> |
||||
<thead> |
||||
<tr> |
||||
<th nzWidth="200px">交易单号</th> |
||||
<th nzWidth="130px">客户电话</th> |
||||
<th nzWidth="200px">订单名称</th> |
||||
<th nzWidth="100px">订单金额</th> |
||||
<th nzWidth="100px">支付金额</th> |
||||
<th nzWidth="100px">支付方式</th> |
||||
<th nzWidth="100px">订单状态</th> |
||||
<th nzWidth="180px">创建时间</th> |
||||
<th nzWidth="110px" nzRight="0px">操作</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr *ngFor="let data of basicTable.data;let i = index"> |
||||
<td>{{data.orderNo}}</td> |
||||
<td>{{data.memPhone}}</td> |
||||
<td>{{data.title}}</td> |
||||
<td>￥{{data.totalPrice}}</td> |
||||
<td>￥{{data.payPrice}}</td> |
||||
<td>{{data.orderStatus == 1 || data.orderStatus == 5 ? '未支付' : data.payType | orderPayType}}</td> |
||||
<td>{{data.orderStatus | orderStatus}}</td> |
||||
<td>{{data.createTime | date : 'yyyy-MM-dd HH:mm:ss'}}</td> |
||||
<td nzRight="0px" class="table-td-operation"> |
||||
<a nz-dropdown [nzDropdownMenu]="menu"> 操作列表 <i nz-icon nzType="down"></i> </a> |
||||
<nz-dropdown-menu #menu="nzDropdownMenu"> |
||||
<ul nz-menu nzSelectable> |
||||
<li nz-menu-item (click)="showOrderDetail(data.orderNo)"><a>详情</a></li> |
||||
</ul> |
||||
</nz-dropdown-menu> |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</nz-table> |
||||
</div> |
||||
</nz-spin> |
||||
|
||||
<nz-modal [(nzVisible)]="orderDetailModal" nzTitle="交易详情" (nzOnCancel)="orderDetailModal = false" [nzFooter]="null" |
||||
nzWidth="1000px" [nzBodyStyle]=" { padding: '20px 20px 30px 20px'}"> |
||||
<nz-spin [nzSpinning]="orderDetailModalLoading"> |
||||
<nz-tabset [nzType]="'card'"> |
||||
<nz-tab nzTitle="订单信息"> |
||||
<nz-descriptions nzBordered [nzColumn]="2" [nzSize]="'middle'"> |
||||
<nz-descriptions-item nzTitle="交易订单号">{{orderDetailObject.tradeOrder.orderNo}}</nz-descriptions-item> |
||||
<nz-descriptions-item nzTitle="第三方交易号">{{orderDetailObject.tradeOrder.paySerialNo!=null?orderDetailObject.tradeOrder.paySerialNo:'无'}}</nz-descriptions-item> |
||||
<nz-descriptions-item nzTitle="客户手机号">{{orderDetailObject.tradeOrder.memPhone}}</nz-descriptions-item> |
||||
<nz-descriptions-item nzTitle="交易状态">{{orderDetailObject.tradeOrder.orderStatus | orderStatus}}</nz-descriptions-item> |
||||
<nz-descriptions-item nzTitle="支付方式">{{orderDetailObject.tradeOrder.payType | orderPayType}}</nz-descriptions-item> |
||||
<nz-descriptions-item nzTitle="支付卡号" *ngIf="orderDetailObject.tradeOrder.payType == 4 || orderDetailObject.tradeOrder.payType == 7"> |
||||
{{orderDetailObject.tradeOrder.memCardNo}} |
||||
</nz-descriptions-item> |
||||
<nz-descriptions-item nzTitle="优惠券">{{orderDetailObject.tradeOrder.memDiscountName?orderDetailObject.tradeOrder.memDiscountName:'无'}}</nz-descriptions-item> |
||||
<nz-descriptions-item nzTitle="返利">{{orderDetailObject.tradeOrder.whetherRebate?'是':'否'}}</nz-descriptions-item> |
||||
<nz-descriptions-item nzTitle="备注">{{orderDetailObject.tradeOrder.remarks}}</nz-descriptions-item> |
||||
</nz-descriptions> |
||||
</nz-tab> |
||||
<nz-tab nzTitle="支付信息"> |
||||
<nz-descriptions nzBordered [nzColumn]="3" [nzSize]="'middle'"> |
||||
<nz-descriptions-item nzTitle="交易总额" >{{orderDetailObject.tradeOrder.totalPrice}} 元</nz-descriptions-item> |
||||
<nz-descriptions-item nzTitle="总优惠" >{{orderDetailObject.tradeOrder.totalDeductionPrice}} 元</nz-descriptions-item> |
||||
<nz-descriptions-item nzTitle="产品优惠金额" >{{orderDetailObject.tradeOrder.deductionProductPrice}} 元</nz-descriptions-item> |
||||
<nz-descriptions-item nzTitle="优惠券优惠" >{{orderDetailObject.tradeOrder.deductionCouponPrice}} 元</nz-descriptions-item> |
||||
<nz-descriptions-item nzTitle="应付金额" >{{orderDetailObject.tradeOrder.payablePrice}} 元</nz-descriptions-item> |
||||
<nz-descriptions-item nzTitle="积分抵扣" >{{orderDetailObject.tradeOrder.payGold / 100}} 元 </nz-descriptions-item> |
||||
<nz-descriptions-item nzTitle="实付金额" > |
||||
{{orderDetailObject.tradeOrder.payRealPrice!=null?orderDetailObject.tradeOrder.payRealPrice+' 元':'未支付'}} |
||||
</nz-descriptions-item> |
||||
</nz-descriptions> |
||||
</nz-tab> |
||||
<nz-tab nzTitle="订单时间"> |
||||
<nz-card> |
||||
<nz-timeline> |
||||
<nz-timeline-item *ngIf="orderDetailObject.tradeOrder.createTime != null"> |
||||
<p>创建时间：{{orderDetailObject.tradeOrder.createTime | date : 'yyyy-MM-dd HH:mm:ss'}}</p> |
||||
<p>备注：{{orderDetailObject.tradeOrder.remarks?orderDetailObject.tradeOrder.remarks:'无'}}</p> |
||||
</nz-timeline-item> |
||||
<nz-timeline-item *ngIf="orderDetailObject.tradeOrder.cancelTime != null"> |
||||
<p>取消时间：{{orderDetailObject.tradeOrder.cancelTime | date : 'yyyy-MM-dd HH:mm:ss'}}</p> |
||||
<p>备注：{{orderDetailObject.tradeOrder.cancelRemarks?orderDetailObject.tradeOrder.cancelRemarks:'无'}}</p> |
||||
</nz-timeline-item> |
||||
<nz-timeline-item *ngIf="orderDetailObject.tradeOrder.payTime != null">支付时间：{{orderDetailObject.tradeOrder.payTime | date : 'yyyy-MM-dd HH:mm:ss'}}</nz-timeline-item> |
||||
<nz-timeline-item *ngIf="orderDetailObject.tradeOrder.finishTime != null">完成时间：{{orderDetailObject.tradeOrder.finishTime | date : 'yyyy-MM-dd HH:mm:ss'}}</nz-timeline-item> |
||||
<nz-timeline-item *ngIf="orderDetailObject.tradeOrder.refundTime != null">退款时间：{{orderDetailObject.tradeOrder.refundTime | date : 'yyyy-MM-dd HH:mm:ss'}}</nz-timeline-item> |
||||
</nz-timeline> |
||||
</nz-card> |
||||
</nz-tab> |
||||
</nz-tabset> |
||||
</nz-spin> |
||||
</nz-modal> |
||||
@ -0,0 +1,3 @@ |
||||
img { |
||||
width: 60px; |
||||
} |
||||
@ -0,0 +1,152 @@ |
||||
import { Component, OnInit } from '@angular/core'; |
||||
import {FormBuilder, FormGroup} from "@angular/forms"; |
||||
import {environment} from "../../../../environments/environment"; |
||||
import {LocalStorageService} from "../../../services/local-storage.service"; |
||||
import {NzMessageService} from "ng-zorro-antd"; |
||||
import {HltOrderService} from "../../../services/order/hlt-order.service"; |
||||
import {CompanyService} from "../../../services/company.service"; |
||||
import {CommonsService} from "../../../services/commons.service"; |
||||
import {ADMIN_INFO_OBJECT} from "../../../services/local-storage.namespace"; |
||||
import {animate, state, style, transition, trigger} from "@angular/animations"; |
||||
import {OrderApiMerService} from "../../../services/order/order-api-mer.service"; |
||||
|
||||
@Component({ |
||||
selector: 'app-api-mer-order-list', |
||||
animations: [ |
||||
trigger('openClose', [ |
||||
state('open', style({ |
||||
height: '260px', |
||||
opacity: 1, |
||||
backgroundColor: 'white' |
||||
})), |
||||
state('closed', style({ |
||||
opacity: 1, |
||||
backgroundColor: 'white' |
||||
})), |
||||
transition('open => closed', [ |
||||
animate('0.3s') |
||||
]), |
||||
transition('closed => open', [ |
||||
animate('0.3s') |
||||
]), |
||||
]), |
||||
], |
||||
templateUrl: './api-mer-order-list.component.html', |
||||
styleUrls: ['./api-mer-order-list.component.scss'] |
||||
}) |
||||
export class ApiMerOrderListComponent implements OnInit { |
||||
|
||||
|
||||
|
||||
// 搜索框
|
||||
searchForm: FormGroup; |
||||
// 搜索框折叠
|
||||
isCollapse = false; |
||||
// 订单状态数据
|
||||
orderStatusArray = []; |
||||
// 公司数据
|
||||
companyArray = []; |
||||
// 角色类型
|
||||
roleType: number; |
||||
// 列表相关参数
|
||||
// 总条数
|
||||
total: number; |
||||
// 页码
|
||||
pageNum = 1; |
||||
// 条码
|
||||
pageSize = 10; |
||||
// 列表数据
|
||||
requestData = []; |
||||
// 列表加载
|
||||
loading = true; |
||||
// 订单详情相关参数
|
||||
// 详情模态框
|
||||
orderDetailModal = false; |
||||
// 详情模态框数据等待
|
||||
orderDetailModalLoading = false; |
||||
// 订单详情数据
|
||||
orderDetailObject: any = { |
||||
tradeOrder: {}, |
||||
}; |
||||
// 数据加载中参数
|
||||
loadingObject = { |
||||
title: '加载中...', |
||||
status: false, |
||||
}; |
||||
// 请求地址参数
|
||||
FILE_URL = environment.imageUrl; |
||||
mchId: string ; |
||||
constructor( |
||||
private form: FormBuilder, |
||||
private store: LocalStorageService, |
||||
private message: NzMessageService, |
||||
private apiMerOrderService: OrderApiMerService, |
||||
private companyService: CompanyService, |
||||
private commonsService: CommonsService, |
||||
) { } |
||||
|
||||
ngOnInit(): void { |
||||
// 搜索表单初始化
|
||||
this.searchForm = this.form.group({ |
||||
orderNo: [null], |
||||
memPhone: [null], |
||||
payTimeArray: [null], |
||||
orderStatus: [null], |
||||
createTimeArray: [null], |
||||
refundTimeArray: [null], |
||||
companyId: [null], |
||||
payType: [null], |
||||
memCardNo: [null], |
||||
}); |
||||
// 角色类型初始化
|
||||
this.roleType = Number(this.store.get(ADMIN_INFO_OBJECT)['secRole'].roleType); |
||||
this.mchId = this.store.get(ADMIN_INFO_OBJECT)['apiMerchants'].mchId; |
||||
// 查询公司列表
|
||||
if (this.roleType === 0 || this.roleType === 1) { |
||||
this.companyService.selectCompanyList({ pageNum: 1, pageSize: 999 }, data => { |
||||
this.companyArray = data['return_data']['list']; |
||||
}); |
||||
} |
||||
// 查询订单状态数据
|
||||
this.commonsService.getDictionary('ORDER_STATUS', data => { |
||||
this.orderStatusArray = data['return_data']; |
||||
}); |
||||
this.getRequest(true, this.searchForm.value); |
||||
} |
||||
|
||||
// 查询列表
|
||||
public getRequest(reset: boolean = false, whereObject: object) { |
||||
this.loading = true; |
||||
if (reset) { |
||||
this.pageNum = 1; |
||||
} |
||||
whereObject['promoteCode'] = this.mchId; |
||||
whereObject['pageNum'] = this.pageNum; |
||||
whereObject['pageSize'] = this.pageSize; |
||||
this.apiMerOrderService.getOrderList(whereObject, data => { |
||||
this.loading = false; |
||||
if (data['return_code'] === '000000') { |
||||
this.requestData = data['return_data'].list; |
||||
this.total = data['return_data'].total; |
||||
} else { |
||||
this.message.error(data['return_msg']); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
// 展示订单详情
|
||||
public showOrderDetail(orderNo: string) { |
||||
this.orderDetailModal = true; |
||||
this.orderDetailModalLoading = true; |
||||
this.apiMerOrderService.getOrderDetail(orderNo, data => { |
||||
if (data['return_code'] === '000000') { |
||||
this.orderDetailObject = data['return_data']; |
||||
} else { |
||||
this.message.error(data['return_msg']); |
||||
} |
||||
this.orderDetailModalLoading = false; |
||||
}); |
||||
|
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,43 @@ |
||||
import { Injectable } from '@angular/core'; |
||||
import {CommonsService} from '../commons.service'; |
||||
import {environment} from '../../../environments/environment'; |
||||
import {HttpClient} from '@angular/common/http'; |
||||
|
||||
@Injectable({ |
||||
providedIn: 'root' |
||||
}) |
||||
export class OrderApiMerService { |
||||
|
||||
constructor( |
||||
private http: HttpClient, |
||||
private common: CommonsService |
||||
) { } |
||||
|
||||
/** |
||||
* @Author Sum1Dream |
||||
* @methodName getOrderKfcList |
||||
* @Description // 查询肯德基订单
|
||||
* @Date 17:20 2022/10/27 |
||||
* @Param param |
||||
*/ |
||||
public getOrderList(param: object, callBack) { |
||||
this.http.get(environment.orderUrl + 'apiMerOrder/getOrderList?' + this.common.getWhereCondition(param)).subscribe(data => { |
||||
callBack(data); |
||||
}); |
||||
} |
||||
|
||||
/** |
||||
* @Author Sum1Dream |
||||
* @methodName getOrderDetail |
||||
* @Description // 根据订单号查询订单详情
|
||||
* @Date 14:38 2022/10/28 |
||||
* @Param orderNo: string, callBack |
||||
*/ |
||||
public getOrderDetail(orderNo: string, callBack) { |
||||
this.http.get(environment.orderUrl + 'apiMerOrder/getOrderDetail?orderNo=' + orderNo).subscribe(data => { |
||||
callBack(data); |
||||
}); |
||||
} |
||||
|
||||
|
||||
} |
||||
|
Before Width: | Height: | Size: 7.6 KiB |
Loading…
Reference in new issue