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

提交商品添加

Browse Source
2.0-dev
袁野 1 year ago
parent f3b6e26a04
commit d8f88d77f5
3 changed files with 412 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. 227
      src/app/admin/order-manage/goods-child-order/goods-child-order.component.html
  2. 9
      src/app/admin/order-manage/goods-child-order/goods-child-order.component.scss
  3. 176
      src/app/admin/order-manage/goods-child-order/goods-child-order.component.ts

227
src/app/admin/order-manage/goods-child-order/goods-child-order.component.html
Unescape View File

@ -0,0 +1,227 @@
<!-- start 面包屑 -->
<app-breadcrumb></app-breadcrumb>
<!-- end 面包屑 -->
<nz-spin [nzSpinning]="loadingObject.status" [nzTip]="loadingObject.title">
<!-- start 搜索条件 -->
<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="status" 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-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-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>
</div>
</div>
</form>
</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="180px" nzRight="0px">物流状态</th>
<th nzWidth="110px" nzRight="0px">操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of basicTable.data;let i = index" [ngClass]="{'fontColor': data.logisticsStatus === '1' }">
<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" >{{data.logisticsStatus | logisticsStatus}}</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>
<li nz-menu-item (click)="updateLogisticsNo(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-tab nzTitle="商品信息">
<nz-table nzBordered #childOrder [nzData]="orderDetailObject.tradeOrder.highChildOrderList" [nzHideOnSinglePage]="true">
<thead>
<tr>
<th nzWidth="80px">产品类型</th>
<th nzWidth="100px">产品图片</th>
<th nzWidth="120px">产品名称</th>
<th nzWidth="30px">商品原价</th>
<th nzWidth="30px">支付价格</th>
<th nzWidth="20px">数量</th>
<th nzWidth="20px">支付总价</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of childOrder.data">
<td>{{ data.goodsType | orderChildGoodsType}}</td>
<td>
<app-preview-image [previewImage] = data.goodsImg ></app-preview-image>
</td>
<td>
{{ data.goodsName }}
<nz-tag *ngIf="data.giveawayType == 1" [nzColor]="'magenta'">赠品</nz-tag>
</td>
<td>{{ data.goodsPrice }} 元</td>
<td>{{ data.goodsActualPrice }} 元</td>
<td>{{ data.saleCount }}</td>
<td>{{ data.totalActualPrice }} 元</td>
</tr>
</tbody>
</nz-table>
</nz-tab>
<nz-tab nzTitle="物流信息" *ngIf="orderDetailObject.goodsOrder.logisticsNo != null">
<nz-timeline [nzReverse]="true">
<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-tab>
</nz-tabset>
</nz-spin>
</nz-modal>
<nz-modal [(nzVisible)]="isVisible" nzTitle="新增物流单号" (nzOnCancel)="isVisible = false" (nzOnOk)="handleOk()">
<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>
</nz-modal>

9
src/app/admin/order-manage/goods-child-order/goods-child-order.component.scss
Unescape View File

@ -0,0 +1,9 @@
img {
width: 60px;
}
.fontColor {
color: red;
}
.fontColorBlue {
color: #00a2d4;
}

176
src/app/admin/order-manage/goods-child-order/goods-child-order.component.ts
Unescape View File

@ -0,0 +1,176 @@
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, NzNotificationService} from '_ng-zorro-antd@9.3.0@ng-zorro-antd';
import {OrderThirdPartyService} from '../../../services/order/order-third-party.service';
import {GoodsService} from '../../../services/goods/goods.service';
import {CompanyService} from '../../../services/company.service';
import {CommonsService} from '../../../services/commons.service';
import {ADMIN_INFO_OBJECT} from '../../../services/local-storage.namespace';
@Component({
selector: 'app-goods-child-order',
templateUrl: './goods-child-order.component.html',
styleUrls: ['./goods-child-order.component.scss']
})
export class GoodsChildOrderComponent implements OnInit {
// 搜索框
searchForm: FormGroup;
// 搜索框折叠
isCollapse = false;
// 订单状态数据
orderStatusArray = [];
// 公司数据
companyArray = [];
// 角色类型
roleType: number;
// 列表相关参数
// 总条数
total: number;
// 页码
pageNum = 1;
// 条码
pageSize = 10;
// 列表数据
requestData = [];
// 列表加载
loading = true;
isVisible = false;
// 订单详情相关参数
// 详情模态框
orderDetailModal = false;
// 详情模态框数据等待
orderDetailModalLoading = false;
// 订单详情数据
orderDetailObject: any = {
tradeOrder: {},
goodsOrder: {
logisticsNo: null
},
};
// 数据加载中参数
loadingObject = {
title: '加载中...',
status: false,
};
// 请求地址参数
FILE_URL = environment.imageUrl;
orderNo;
logisticsNo;
logisticsTraceDetails;
constructor(
private form: FormBuilder,
private store: LocalStorageService,
private message: NzMessageService,
private thirdPartyOrder: OrderThirdPartyService,
private goods: GoodsService,
private companyService: CompanyService,
private commonsService: CommonsService,
private notification: NzNotificationService,
) { }
ngOnInit(): void {
// 搜索表单初始化
this.searchForm = this.form.group({
orderNo: [null],
memPhone: [null],
status: [null],
createTimeArray: [null],
});
// 角色类型初始化
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_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;
if (whereObject['createTimeArray'] != null && whereObject['createTimeArray'].length !== 0) {
whereObject['createTimeS'] = whereObject['createTimeArray'][0].getTime();
whereObject['createTimeE'] = whereObject['createTimeArray'][1].getTime();
}
this.goods.getOrderChildList(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.goods.getGoodsOrderDetail(orderNo, data => {
if (data['return_code'] === '000000') {
console.log(data);
this.orderDetailObject = data['return_data'];
this.logisticsTraceDetails = data['return_data']['logisticsTraceDetails'];
console.log(this.logisticsTraceDetails);
} else {
this.message.error(data['return_msg']);
}
this.orderDetailModalLoading = false;
});
}
// 导出数据
public excelOrder(whereObject) {
this.loadingObject.status = true;
this.loadingObject.title = '数据导出中...';
this.thirdPartyOrder.exportThirdPartyOrderList(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;
});
}
// 更新运费单号
public updateLogisticsNo(order: string): void {
this.orderNo = order;
this.isVisible = true;
}
public handleOk(): void {
this.goods.updateLogisticsNo({
orderNo: this.orderNo ,
logisticsNo: this.logisticsNo
} , data => {
if (data['return_code'] === '000000') {
this.isVisible = false;
this.notification.success('成功' , '更新成功');
} else {
this.notification.error( '失败' , '更新成功');
}
});
}
}
Write Preview
Loading…
Cancel
Save