hurui
/
high-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交代理商订单页面

Browse Source
pull/1/head
袁野 2 years ago
parent ecfadda898
commit 600b1ca0ff
4 changed files with 433 additions and 0 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 236
      src/app/admin/order-manage/hlt-charge-order/hlt-charge-order.component.html
  2. 3
      src/app/admin/order-manage/hlt-charge-order/hlt-charge-order.component.scss
  3. 151
      src/app/admin/order-manage/hlt-charge-order/hlt-charge-order.component.ts
  4. 43
      src/app/services/order/hlt-order.service.ts

236
src/app/admin/order-manage/hlt-charge-order/hlt-charge-order.component.html
Unescape View File

@ -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>

3
src/app/admin/order-manage/hlt-charge-order/hlt-charge-order.component.scss
Unescape View File

@ -0,0 +1,3 @@
img {
width: 60px;
}

151
src/app/admin/order-manage/hlt-charge-order/hlt-charge-order.component.ts
Unescape View File

@ -0,0 +1,151 @@
import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup} from '_@angular_forms@9.0.7@@angular/forms';
import {environment} from '../../../../environments/environment';
import {LocalStorageService} from '../../../services/local-storage.service';
import {NzMessageService} from '_ng-zorro-antd@9.3.0@ng-zorro-antd';
import {OrderThirdPartyService} from '../../../services/order/order-third-party.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@9.0.7@@angular/animations';
import {HltOrderService} from "../../../services/order/hlt-order.service";
@Component({
selector: 'app-hlt-charge-order',
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: './hlt-charge-order.component.html',
styleUrls: ['./hlt-charge-order.component.scss']
})
export class HltChargeOrderComponent 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;
constructor(
private form: FormBuilder,
private store: LocalStorageService,
private message: NzMessageService,
private hltOrderService: HltOrderService,
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: [8],
});
// 角色类型初始化
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.hltOrderService.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.orderDetailModalLoading = true;
this.hltOrderService.getOrderDetail(orderNo, data => {
if (data['return_code'] === '000000') {
this.orderDetailObject = data['return_data'];
} else {
this.message.error(data['return_msg']);
}
this.orderDetailModalLoading = false;
});
}
}

43
src/app/services/order/hlt-order.service.ts
Unescape View File

@ -0,0 +1,43 @@
import { Injectable } from '@angular/core';
import {HttpClient} from '_@angular_common@9.0.7@@angular/common/http';
import {CommonsService} from '../commons.service';
import {environment} from '../../../environments/environment';
@Injectable({
providedIn: 'root'
})
export class HltOrderService {
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 + 'hltRecharge/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 + 'hltRecharge/getOrderDetail?orderNo=' + orderNo).subscribe(data => {
callBack(data);
});
}
}
Write Preview
Loading…
Cancel
Save