pull/1/head
胡锐 2 years ago
commit 5589a5bf10
  1. 268
      src/app/admin/order-manage/mobile-recharge-order-list/mobile-recharge-order-list.component.html
  2. 3
      src/app/admin/order-manage/mobile-recharge-order-list/mobile-recharge-order-list.component.scss
  3. 165
      src/app/admin/order-manage/mobile-recharge-order-list/mobile-recharge-order-list.component.ts
  4. 54
      src/app/services/order/order-mobile-recharge.service.ts

@ -0,0 +1,268 @@
<!-- 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>
<div class="operating-button">
<button nz-button nzType="primary" class="right-btn" (click)="excelOrder(searchForm.value)" ><i nz-icon nzType="export" nzTheme="outline"></i>导出Excel</button>
</div>
<!--数组表格 -->
<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.mobileOrder.operatorName}}</nz-descriptions-item>
<nz-descriptions-item nzTitle="充值内容" >{{orderDetailObject.tradeOrder.title}}</nz-descriptions-item>
<nz-descriptions-item nzTitle="充值状态">{{orderDetailObject.mobileOrder.rechargeStatus | rechargeStatus}}</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-tab nzTitle="充值记录">
<nz-table nzBordered #childOrder [nzData]="orderDetailObject.mobileOrder.outRechargeChildOrders" [nzHideOnSinglePage]="true">
<thead>
<tr>
<th>请求订单号</th>
<th>充值平台</th>
<th>充值状态</th>
<th>创建时间</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of childOrder.data">
<td>{{data.orderNo}}</td>
<td>{{data.rechargePlatform | platform}}</td>
<td>{{data.status | chlidRechargeStatus}}</td>
<td>{{data['createTime'] | date: 'yyyy-MM-dd HH:mm'}}</td>
</tr>
</tbody>
</nz-table>
</nz-tab>
</nz-tabset>
</nz-spin>
</nz-modal>

@ -0,0 +1,165 @@
import { Component, OnInit } from '@angular/core';
import {environment} from '../../../../environments/environment';
import {FormBuilder, FormGroup } from '_@angular_forms@9.0.7@@angular/forms';
import {NzMessageService } from '_ng-zorro-antd@9.3.0@ng-zorro-antd';
import {CompanyService} from '../../../services/company.service';
import {LocalStorageService} from '../../../services/local-storage.service';
import {ADMIN_INFO_OBJECT} from '../../../services/local-storage.namespace';
import {CommonsService} from '../../../services/commons.service';
import {animate, state, style, transition, trigger} from '_@angular_animations@9.0.7@@angular/animations';
import {OrderMobileRechargeService} from '../../../services/order/order-mobile-recharge.service';
@Component({
selector: 'app-mobile-recharge-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: './mobile-recharge-order-list.component.html',
styleUrls: ['./mobile-recharge-order-list.component.scss']
})
export class MobileRechargeOrderListComponent 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: {},
mobileOrder: {},
};
// 数据加载中参数
loadingObject = {
title: '加载中...',
status: false,
};
// 请求地址参数
FILE_URL = environment.imageUrl;
constructor(
private form: FormBuilder,
private store: LocalStorageService,
private message: NzMessageService,
private orderMobileRechargeService: OrderMobileRechargeService,
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],
productType: [2],
});
// 角色类型初始化
this.roleType = Number(this.store.get(ADMIN_INFO_OBJECT)['secRole'].roleType);
// 查询公司列表
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_OIL_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['pageNum'] = this.pageNum;
whereObject['pageSize'] = this.pageSize;
this.orderMobileRechargeService.getOrderList(whereObject, data => {
this.loading = false;
if (data['return_code'] === '000000') {
console.log(data);
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.orderMobileRechargeService.getOrderDetail(orderNo, data => {
if (data['return_code'] === '000000') {
this.orderDetailModalLoading = true;
this.orderDetailObject = data['return_data'];
} else {
this.message.error(data['return_msg']);
}
this.orderDetailModalLoading = false;
});
}
// 导出数据
public excelOrder(whereObject) {
this.loadingObject.status = true;
this.loadingObject.title = '数据导出中...';
this.orderMobileRechargeService.exportMobilePartyOrderList(whereObject, data => {
if (data['return_code'] === '000000') {
window.location.href = this.FILE_URL + 'temporary/' + data['return_data'];
} else {
this.message.error(data['return_msg']);
}
this.loadingObject.status = false;
});
}
}

@ -0,0 +1,54 @@
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 OrderMobileRechargeService {
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 + 'mobileRecharge/getOrderList?' + this.common.getWhereCondition(param)).subscribe(data => {
callBack(data);
});
}
/**
* @Author Sum1Dream
* @methodName exportMobilePartyOrderList
* @Description // 导出话费订单表格
* @Date 10:07 2022/11/1
* @Param param: object, callBack
*/
public exportMobilePartyOrderList(param: object, callBack) {
this.http.get(environment.orderUrl + 'mobileRecharge/exportMobilePartyOrderList?' + this.common.getWhereCondition(param)).subscribe(data => {
callBack(data);
});
}
/**
* @Author Sum1Dream
* @methodName getMobileOrderDetail
* @Description // 查询话费订单详情
* @Date 10:05 2023/1/18
* @Param orderNo: string, callBack
*/
public getOrderDetail(orderNo: string, callBack) {
this.http.get(environment.orderUrl + 'mobileRecharge/getMobileOrderDetail?orderNo=' + orderNo).subscribe(data => {
callBack(data);
});
}
}
Loading…
Cancel
Save