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

1

Browse Source
master
袁野 6 months ago
parent 8dbe7122f5
commit 2e132a2bdc
10 changed files with 589 additions and 4 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. 1
      src/app/app.routes.ts
  2. 10
      src/app/data/goods/goods.namespace.ts
  3. 6
      src/app/model/discount.interface.ts
  4. 39
      src/app/model/order.interface.ts
  5. 214
      src/app/pages/trade/goods-list/goods-list.component.html
  6. 12
      src/app/pages/trade/goods-list/goods-list.component.less
  7. 242
      src/app/pages/trade/goods-list/goods-list.component.ts
  8. 2
      src/app/pages/trade/trade.routes.ts
  9. 32
      src/app/pipes/order/order-goods-status.pipe.ts
  10. 35
      src/app/services/trade/order-goods.service.ts

1
src/app/app.routes.ts
Unescape View File

@ -1,7 +1,6 @@
import { Routes } from '@angular/router'; import { Routes } from '@angular/router';
import {IndexComponent} from "./pages/body/index/index.component"; import {IndexComponent} from "./pages/body/index/index.component";
import {InitGuardService} from "./utils/initGuard.service"; import {InitGuardService} from "./utils/initGuard.service";
import {AUDIT_ROUTES} from "./pages/audit/audit.routes";
export const routes: Routes = [ export const routes: Routes = [
{path: '', pathMatch: 'full', redirectTo: 'admin/index'}, {path: '', pathMatch: 'full', redirectTo: 'admin/index'},
{ {

10
src/app/data/goods/goods.namespace.ts
Unescape View File

@ -1,3 +1,13 @@
export const fallbackImg = 'data:image/png;base64,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'; export const fallbackImg = 'data:image/png;base64,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';
export const orderGoodsStatus = [
{name: "待发货" , key: 1} ,
{name: "已发货" , key: 2},
{name: "配送中" , key: 3},
{name: "已送达" , key: 4},
{name: "已取消" , key: 5},
{name: "退货中" , key: 6},
{name: "已退货" , key: 7},
{name: "待支付" , key: 8}
];

6
src/app/model/discount.interface.ts
Unescape View File

@ -10,14 +10,14 @@ export interface DiscountData {
effectiveNum: number; effectiveNum: number;
createTime: string; createTime: string;
updateTime: string; updateTime: string;
salesEndTime: string, salesEndTime: string;
} }
export interface NodesDiscountGoods { export interface NodesDiscountGoods {
id: number; id: number;
discountId: number; discountId: number;
specsId: String; specsId: string;
specsName: String; specsName: string;
createTime: string; createTime: string;
goodsName: string; goodsName: string;
SpecsName: string; SpecsName: string;

39
src/app/model/order.interface.ts
Unescape View File

@ -0,0 +1,39 @@
export interface OrderGoodsData {
id: number;
logisticsNo: string;
freightPrice: string;
deliveryAddressId: number;
deliveryAddress: string;
orderNo: string;
childOrderNo: string;
merId: number;
userId: number;
userPhone: string;
goodsId: number;
img: string;
goodsName: string;
goodsTypeId: number;
goodsTypeName: string,
goodsBrandId: number;
goodsBrandName: string;
goodsSpecsId: number;
goodsSpecsName: string;
goodsSpecsOriginalPrice: string;
goodsCount: string;
totalPrice: string;
totalDeductionPrice: string;
couponDiscountPrice: string;
integralDiscountPrice: string;
payRealPrice: string;
payChannel: string;
paySerialNo: string;
payType: number;
status: number;
createTime: string;
payTime: string;
cancelTime: string;
refundTime: string;
finishTime: string;
updateTime: string;
}

214
src/app/pages/trade/goods-list/goods-list.component.html
Unescape View File

@ -0,0 +1,214 @@
<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>

12
src/app/pages/trade/goods-list/goods-list.component.less
Unescape View File

@ -0,0 +1,12 @@
[nz-form-label] {
overflow: visible;
}
button {
margin-left: 8px;
}
.submit-btn {
width: 150px;
}
.search-area {
margin-top: 30px;
}

242
src/app/pages/trade/goods-list/goods-list.component.ts
Unescape View File

@ -0,0 +1,242 @@
import { Component } from '@angular/core';
import {DatePipe, NgClass, NgForOf, NgIf} from "@angular/common";
import {FormGroup, FormsModule, NonNullableFormBuilder, ReactiveFormsModule} from "@angular/forms";
import {NzButtonComponent} from "ng-zorro-antd/button";
import {
NzTableComponent, NzTableModule,
NzThMeasureDirective
} from "ng-zorro-antd/table";
import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
import {NzFormDirective, NzFormModule} from "ng-zorro-antd/form";
import {NzImageDirective, NzImageModule,} from "ng-zorro-antd/image";
import {NzInputDirective} from "ng-zorro-antd/input";
import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
import {NzTreeSelectComponent} from "ng-zorro-antd/tree-select";
import {environment} from "../../../../environments/environment";
import {NzMessageService} from "ng-zorro-antd/message";
import {GoodsService} from "../../../services/goods/goods.service";
import {fallbackImg, orderGoodsStatus} from '../../../data/goods/goods.namespace';
import {GoodsStatusPipe} from "../../../pipes/goods/goods-status.pipe";
import {NzModalModule} from "ng-zorro-antd/modal";
import {OrderGoodsService} from "../../../services/trade/order-goods.service";
import {OrderGoodsStatusPipe} from "../../../pipes/order/order-goods-status.pipe";
import {NzDropDownADirective, NzDropDownDirective, NzDropdownMenuComponent} from "ng-zorro-antd/dropdown";
import {NzMenuDirective, NzMenuItemComponent} from "ng-zorro-antd/menu";
import {NzPopconfirmDirective} from "ng-zorro-antd/popconfirm";
import {OrderGoodsData} from "../../../model/order.interface";
import {NzDividerComponent} from "ng-zorro-antd/divider";
import {NzIconDirective} from "ng-zorro-antd/icon";
import {NzDescriptionsModule} from "ng-zorro-antd/descriptions";
import {NzBadgeComponent} from "ng-zorro-antd/badge";
import {AuditStatusPipe} from "../../../pipes/audit/audit-status.pipe";
import {NzTabComponent, NzTabSetComponent, NzTabsModule} from "ng-zorro-antd/tabs";
import {NzSpinComponent} from "ng-zorro-antd/spin";
import {NzTimelineComponent, NzTimelineItemComponent} from "ng-zorro-antd/timeline";
import {NzResultComponent} from "ng-zorro-antd/result";
@Component({
selector: 'app-goods-list',
standalone: true,
imports: [
NzColDirective,
NzRowDirective,
NzFormDirective,
ReactiveFormsModule,
NzTreeSelectComponent,
NzInputDirective,
NzSelectComponent,
NzOptionComponent,
NzButtonComponent,
NzTableComponent,
NzImageModule,
NzModalModule,
NzTableModule,
NzFormModule,
NzThMeasureDirective,
NgForOf,
NzImageDirective,
GoodsStatusPipe,
DatePipe,
OrderGoodsStatusPipe,
NzDropdownMenuComponent,
NgIf,
NzMenuDirective,
NzDescriptionsModule,
NzMenuItemComponent,
NzPopconfirmDirective,
NzDividerComponent,
NzDropDownADirective,
NzDropDownDirective,
NzTabsModule,
NzIconDirective,
NzBadgeComponent,
AuditStatusPipe,
NzTabSetComponent,
FormsModule,
NzSpinComponent,
NzTimelineItemComponent,
NgClass,
NzResultComponent,
NzTimelineComponent,
],
templateUrl: './goods-list.component.html',
styleUrl: './goods-list.component.less'
})
export class GoodsListComponent {
// 表单页数
tablePageNum = 1;
// 表单数据
tableData: any = {
total: 0,
loading: false,
list: [],
};
// 搜索表单
searchForm: FormGroup;
baseUrl = environment.baseUrl;
imageUrl = environment.imageUrl;
// 商品类型数据
nodes = [];
nodesBrand = [];
orderGoodsData: any;
orderDetailModal = false;
isVisible = false;
orderDetailModalChild = false;
orderDetailModalLoading = false;
logisticsNo: any;
logisticsTraceDetails: any;
goodsOrderId: any;
protected readonly fallbackImg = fallbackImg;
protected readonly orderGoodsStatus = orderGoodsStatus;
constructor(private fb: NonNullableFormBuilder,
private msg: NzMessageService,
private orderGoodsService: OrderGoodsService,
private goodsService: GoodsService) {
// 初始化搜索框
this.searchForm = this.fb.group({
logisticsNo: [''],
orderNo: [''],
goodsType: [''],
goodsBrand: [''],
userPhone: [''],
goodsSpecsName: [''],
goodsName: [''],
payType: [''],
status: [''],
});
this.getRequest();
this.getGoodsTypeNode();
this.getGoodsBrandNode();
}
// 查询列表
public getRequest(reset: boolean = false) {
this.tableData.loading = true;
if (reset) {
this.tablePageNum = 1;
}
this.searchForm.value.pageNum = this.tablePageNum;
this.searchForm.value.pageSize = 10;
this.searchForm.value.time = new Date().getTime();
this.orderGoodsService.getListGoods(this.searchForm.value , (data: any) => {
if (data['return_code'] == '000000') {
this.tableData = data['return_data'];
} else {
this.msg.error(data['return_msg']);
}
this.tableData.loading = false;
});
}
// 获取商品分类
getGoodsTypeNode() {
this.goodsService.getList({time: new Date().getTime()}, (data: any) => {
if (data['return_code'] === '000000') {
this.getNode(data['return_data']);
}
});
}
// 配置数据
getNode(array: any): any {
array.forEach((item: any) => {
if (item.children) {
this.getNode(item.children);
}else {
item["isLeaf"] = true;
}
item["key"] = item.id;
});
this.nodes = array;
}
// 获取商品品牌
getGoodsBrandNode() {
this.goodsService.getListBrandAll( (data: any) => {
if (data['return_code'] == '000000') {
this.nodesBrand = data['return_data'];
}
});
}
getLogisticsNo(id: number): void {
this.goodsOrderId = id;
this.isVisible = true;
}
showDetail(data: OrderGoodsData): void {
console.log(data);
this.orderGoodsData = data;
this.orderDetailModal = true;
}
handleOk(): void {
let params = {
id: this.goodsOrderId,
logisticsNo: this.logisticsNo,
time: new Date().getTime()
}
this.orderGoodsService.updateLogisticsNo(params , (data: any) => {
if (data['return_code'] == '000000') {
this.isVisible = false;
this.getRequest(false);
this.msg.success("成功")
} else {
this.msg.error(data['return_msg']);
}
});
}
showLogisticsNo(id: number): void {
let params = {
id:id,
time: new Date().getTime()
}
this.orderGoodsService.getLogisticsMsg(params , (data: any) => {
if (data['return_code'] == '000000') {
this.orderDetailModalChild = true;
this.logisticsTraceDetails = data['return_data']['logisticsTraceDetails'];
} else {
this.msg.error(data['return_msg']);
}
});
}
}

2
src/app/pages/trade/trade.routes.ts
Unescape View File

@ -1,8 +1,10 @@
import { Routes } from '@angular/router'; import { Routes } from '@angular/router';
import {CompOrderComponent} from "./comp-order/comp-order.component"; import {CompOrderComponent} from "./comp-order/comp-order.component";
import {OrderAfterSalesComponent} from "./order-after-sales/order-after-sales.component"; import {OrderAfterSalesComponent} from "./order-after-sales/order-after-sales.component";
import {GoodsListComponent} from "./goods-list/goods-list.component";
export const TRADE_ROUTES: Routes = [ export const TRADE_ROUTES: Routes = [
{ path: 'goods-list', component: GoodsListComponent },
{ path: 'comp-order', component: CompOrderComponent }, { path: 'comp-order', component: CompOrderComponent },
{ path: 'order-after-sales', component: OrderAfterSalesComponent }, { path: 'order-after-sales', component: OrderAfterSalesComponent },
]; ];

32
src/app/pipes/order/order-goods-status.pipe.ts
Unescape View File

@ -0,0 +1,32 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'orderGoodsStatus',
standalone: true
})
export class OrderGoodsStatusPipe implements PipeTransform {
transform(value: number): any {
switch (value) {
case 1:
return '待发货';
case 2:
return '已发货';
case 3:
return '配送中';
case 4:
return '已送达';
case 5:
return '已取消';
case 6:
return '退货中';
case 7:
return '已退货';
case 8:
return '待支付';
default:
return '未知状态'
}
}
}

35
src/app/services/trade/order-goods.service.ts
Unescape View File

@ -0,0 +1,35 @@
import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {environment} from "../../../environments/environment";
import {ObjectData} from "../../utils/objectData.service";
@Injectable({
providedIn: 'root'
})
export class OrderGoodsService {
constructor(private http: HttpClient) { }
/**
* 查询订单列表
* @param param
* @param callBack
*/
public getListGoods(param: object, callBack:any) {
this.http.get(environment.orderUrl + 'orderGoods/getListGoods?'+ObjectData.objectByString(param)).subscribe(data => {
callBack(data);
});
}
public updateLogisticsNo(params: object, callBack:any) {
this.http.post(environment.orderUrl + 'orderGoods/updateLogisticsNo', params).subscribe(data => {
callBack(data);
});
}
public getLogisticsMsg(param: object, callBack:any) {
this.http.get(environment.orderUrl + 'orderGoods/getLogisticsMsg?'+ObjectData.objectByString(param)).subscribe(data => {
callBack(data);
});
}
}
Write Preview
Loading…
Cancel
Save