@rolatech/angular-order 18.0.4 → 18.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/index.mjs +2 -3
- package/esm2022/lib/components/order-detail-item/order-detail-item.component.mjs +25 -0
- package/esm2022/lib/components/order-item/order-item.component.mjs +3 -3
- package/esm2022/lib/interfaces/order.mjs +12 -12
- package/esm2022/lib/pages/order-detail/order-detail.component.mjs +5 -35
- package/esm2022/lib/pages/orders-index/order-index.component.mjs +72 -10
- package/esm2022/lib/pipe/order-item-options.pipe.mjs +7 -3
- package/fesm2022/rolatech-angular-order.mjs +97 -77
- package/fesm2022/rolatech-angular-order.mjs.map +1 -1
- package/lib/components/index.d.ts +1 -2
- package/lib/components/order-detail-item/order-detail-item.component.d.ts +12 -0
- package/lib/interfaces/order.d.ts +11 -11
- package/lib/pages/order-detail/order-detail.component.d.ts +1 -6
- package/lib/pages/orders-index/order-index.component.d.ts +9 -3
- package/lib/pipe/order-item-options.pipe.d.ts +4 -1
- package/package.json +1 -1
- package/themes/_default.scss +1 -1
- package/esm2022/lib/components/order-course-item/order-course-item.component.mjs +0 -19
- package/esm2022/lib/components/order-product-item/order-product-item.component.mjs +0 -23
- package/lib/components/order-course-item/order-course-item.component.d.ts +0 -8
- package/lib/components/order-product-item/order-product-item.component.d.ts +0 -11
|
@@ -3,39 +3,46 @@ import { Pipe, input, computed, Component, inject, output, model, Renderer2, vie
|
|
|
3
3
|
import { Title } from '@angular/platform-browser';
|
|
4
4
|
import * as i1 from '@angular/router';
|
|
5
5
|
import { ActivatedRoute, RouterModule, RouterLink } from '@angular/router';
|
|
6
|
-
import { ImagePlaceholderComponent, ThumbnailComponent, ContainerComponent, TabsComponent, TabComponent, ToolbarComponent, ListComponent, EmptyComponent, BaseComponent, SpinnerComponent, TitleComponent } from '@rolatech/angular-components';
|
|
6
|
+
import { ImagePlaceholderComponent, ThumbnailComponent, ContainerComponent, TabsComponent, TabComponent, ToolbarComponent, ListComponent, EmptyComponent, FilterComponent, BaseComponent, SpinnerComponent, TitleComponent } from '@rolatech/angular-components';
|
|
7
7
|
import { OrderService, ProductService, NavigationService } from '@rolatech/angular-services';
|
|
8
8
|
import * as i3 from '@angular/material/icon';
|
|
9
9
|
import { MatIconModule, MatIcon } from '@angular/material/icon';
|
|
10
|
-
import { NgClass, JsonPipe, CommonModule, AsyncPipe } from '@angular/common';
|
|
10
|
+
import { NgClass, JsonPipe, KeyValuePipe, CommonModule, AsyncPipe } from '@angular/common';
|
|
11
11
|
import { sumBy } from 'lodash';
|
|
12
|
+
import { CourseType, CourseService } from '@rolatech/angular-course';
|
|
12
13
|
import * as i1$1 from '@angular/material/button';
|
|
13
14
|
import { MatButtonModule } from '@angular/material/button';
|
|
14
|
-
import moment from 'moment';
|
|
15
|
-
import { map } from 'rxjs';
|
|
16
|
-
import { CourseType, CourseService } from '@rolatech/angular-course';
|
|
17
15
|
import * as i1$2 from '@angular/material/form-field';
|
|
18
16
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
17
|
+
import * as i7 from '@angular/material/select';
|
|
18
|
+
import { MatSelectModule } from '@angular/material/select';
|
|
19
|
+
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
20
|
+
import * as i6 from '@angular/material/core';
|
|
21
|
+
import { MatOptionModule } from '@angular/material/core';
|
|
19
22
|
import * as i2 from '@angular/material/input';
|
|
20
23
|
import { MatInputModule } from '@angular/material/input';
|
|
24
|
+
import * as i4 from '@angular/forms';
|
|
25
|
+
import { FormsModule } from '@angular/forms';
|
|
26
|
+
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
27
|
+
import moment from 'moment';
|
|
21
28
|
import * as QRCode from 'qrcode';
|
|
22
29
|
|
|
23
30
|
var OrderStatus;
|
|
24
31
|
(function (OrderStatus) {
|
|
25
|
-
OrderStatus[
|
|
26
|
-
OrderStatus[
|
|
27
|
-
OrderStatus[
|
|
28
|
-
OrderStatus[
|
|
29
|
-
OrderStatus[
|
|
30
|
-
OrderStatus[
|
|
32
|
+
OrderStatus["CREATED"] = "\u5F85\u4ED8\u6B3E";
|
|
33
|
+
OrderStatus["PAID"] = "\u5DF2\u652F\u4ED8";
|
|
34
|
+
OrderStatus["COMPLETED"] = "\u5DF2\u5B8C\u6210";
|
|
35
|
+
OrderStatus["CLOSED"] = "\u4EA4\u6613\u5173\u95ED";
|
|
36
|
+
OrderStatus["CANCELED"] = "\u4EA4\u6613\u53D6\u6D88";
|
|
37
|
+
OrderStatus["REFUNDED"] = "\u5DF2\u9000\u6B3E";
|
|
31
38
|
})(OrderStatus || (OrderStatus = {}));
|
|
32
39
|
var OrderType;
|
|
33
40
|
(function (OrderType) {
|
|
34
|
-
OrderType[
|
|
35
|
-
OrderType[
|
|
36
|
-
OrderType[
|
|
37
|
-
OrderType[
|
|
38
|
-
OrderType[
|
|
41
|
+
OrderType["COURSE"] = "\u8BFE\u7A0B";
|
|
42
|
+
OrderType["PRODUCT"] = "\u5546\u54C1";
|
|
43
|
+
OrderType["SERVICE"] = "\u670D\u52A1";
|
|
44
|
+
OrderType["BOOKING"] = "\u9884\u5B9A";
|
|
45
|
+
OrderType["OTTHER"] = "\u5176\u4ED6";
|
|
39
46
|
})(OrderType || (OrderType = {}));
|
|
40
47
|
var OrderReturnStatus;
|
|
41
48
|
(function (OrderReturnStatus) {
|
|
@@ -87,7 +94,10 @@ var OrderPayoutType;
|
|
|
87
94
|
})(OrderPayoutType || (OrderPayoutType = {}));
|
|
88
95
|
|
|
89
96
|
class OrderItemOptionsFormatPipe {
|
|
90
|
-
|
|
97
|
+
constructor() {
|
|
98
|
+
this.courseType = CourseType;
|
|
99
|
+
}
|
|
100
|
+
transform(items, type) {
|
|
91
101
|
if (!items) {
|
|
92
102
|
return;
|
|
93
103
|
}
|
|
@@ -96,7 +106,7 @@ class OrderItemOptionsFormatPipe {
|
|
|
96
106
|
const tmp = index === items.length - 1 ? '' : ', ';
|
|
97
107
|
result += item.name ? item.value + tmp : item.name + tmp;
|
|
98
108
|
});
|
|
99
|
-
return result;
|
|
109
|
+
return type?.toString() === 'PRODUCT' ? result : this.courseType[result];
|
|
100
110
|
}
|
|
101
111
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OrderItemOptionsFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
102
112
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: OrderItemOptionsFormatPipe, isStandalone: true, name: "orderItemoptions" }); }
|
|
@@ -121,11 +131,11 @@ class OrderItemComponent {
|
|
|
121
131
|
this.quantity = computed(() => sumBy(this.order().items, (item) => item.quantity));
|
|
122
132
|
}
|
|
123
133
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OrderItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
124
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: OrderItemComponent, isStandalone: true, selector: "rolatech-order-item", inputs: { order: { classPropertyName: "order", publicName: "order", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n <div class=\"flex justify-between w-full mb-2\">\n <span>\u8BA2\u5355\u53F7: {{ order().orderNo }}</span>\n <span class=\"font-medium text-sm\">{{ status[order().status] }}</span>\n </div>\n <div>\n @if (order().items; as items) {\n @if (items.length > 1) {\n } @else {}\n <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n @for (item of items; track $index) {\n <div class=\"flex flex-row py-2\">\n @if (item.media) {\n <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"item.media[0].url + '!w400'\" size=\"medium\"> </rolatech-thumbnail>\n } @placeholder {\n <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n }\n </div>\n } @else {\n <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n <rolatech-image-placeholder></rolatech-image-placeholder>\n </div>\n }\n <div class=\"flex w-full justify-between\">\n <div class=\"flex justify-between w-full\">\n <div>\n <div>{{ item.name }}</div>\n @if (item.options) {\n <div class=\"text-sm text-[--rt-text-secondary] mt-2\"
|
|
134
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: OrderItemComponent, isStandalone: true, selector: "rolatech-order-item", inputs: { order: { classPropertyName: "order", publicName: "order", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n <div class=\"flex justify-between w-full mb-2\">\n <span>\u8BA2\u5355\u53F7: {{ order().orderNo }}</span>\n <span class=\"font-medium text-sm\">{{ status[order().status] }}</span>\n </div>\n <div>\n @if (order().items; as items) {\n @if (items.length > 1) {\n } @else {}\n <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n @for (item of items; track $index) {\n <div class=\"flex flex-row py-2\">\n @if (item.media) {\n <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"item.media[0].url + '!w400'\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n } @placeholder {\n <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n }\n </div>\n } @else {\n <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n <rolatech-image-placeholder></rolatech-image-placeholder>\n </div>\n }\n <div class=\"flex w-full justify-between\">\n <div class=\"flex justify-between w-full\">\n <div>\n <div>{{ item.name }}</div>\n @if (item.options) {\n <div class=\"text-sm text-[--rt-text-secondary] mt-2\">\n {{ item.options | orderItemoptions: order().type }}\n </div>\n }\n </div>\n <div class=\"text-right\">\n <div class=\"text-sm\">\u00A5{{ (item.total / 100).toFixed(2) }}</div>\n <div class=\"text-sm mt-2\">x{{ item.quantity }}</div>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n</div>\n<hr />\n", styles: [".scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder" }, { kind: "pipe", type: OrderItemOptionsFormatPipe, name: "orderItemoptions" }], deferBlockDependencies: [() => [ThumbnailComponent]] }); }
|
|
125
135
|
}
|
|
126
136
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OrderItemComponent, decorators: [{
|
|
127
137
|
type: Component,
|
|
128
|
-
args: [{ selector: 'rolatech-order-item', standalone: true, imports: [MatIconModule, ThumbnailComponent, ImagePlaceholderComponent, NgClass, JsonPipe, OrderItemOptionsFormatPipe], template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n <div class=\"flex justify-between w-full mb-2\">\n <span>\u8BA2\u5355\u53F7: {{ order().orderNo }}</span>\n <span class=\"font-medium text-sm\">{{ status[order().status] }}</span>\n </div>\n <div>\n @if (order().items; as items) {\n @if (items.length > 1) {\n } @else {}\n <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n @for (item of items; track $index) {\n <div class=\"flex flex-row py-2\">\n @if (item.media) {\n <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"item.media[0].url + '!w400'\" size=\"medium\"> </rolatech-thumbnail>\n } @placeholder {\n <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n }\n </div>\n } @else {\n <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n <rolatech-image-placeholder></rolatech-image-placeholder>\n </div>\n }\n <div class=\"flex w-full justify-between\">\n <div class=\"flex justify-between w-full\">\n <div>\n <div>{{ item.name }}</div>\n @if (item.options) {\n <div class=\"text-sm text-[--rt-text-secondary] mt-2\"
|
|
138
|
+
args: [{ selector: 'rolatech-order-item', standalone: true, imports: [MatIconModule, ThumbnailComponent, ImagePlaceholderComponent, NgClass, JsonPipe, OrderItemOptionsFormatPipe], template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n <div class=\"flex justify-between w-full mb-2\">\n <span>\u8BA2\u5355\u53F7: {{ order().orderNo }}</span>\n <span class=\"font-medium text-sm\">{{ status[order().status] }}</span>\n </div>\n <div>\n @if (order().items; as items) {\n @if (items.length > 1) {\n } @else {}\n <div class=\"flex flex-col overflow-x-scroll scrollbar-hide\">\n @for (item of items; track $index) {\n <div class=\"flex flex-row py-2\">\n @if (item.media) {\n <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"item.media[0].url + '!w400'\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n } @placeholder {\n <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video rounded-lg\"></div>\n }\n </div>\n } @else {\n <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n <rolatech-image-placeholder></rolatech-image-placeholder>\n </div>\n }\n <div class=\"flex w-full justify-between\">\n <div class=\"flex justify-between w-full\">\n <div>\n <div>{{ item.name }}</div>\n @if (item.options) {\n <div class=\"text-sm text-[--rt-text-secondary] mt-2\">\n {{ item.options | orderItemoptions: order().type }}\n </div>\n }\n </div>\n <div class=\"text-right\">\n <div class=\"text-sm\">\u00A5{{ (item.total / 100).toFixed(2) }}</div>\n <div class=\"text-sm mt-2\">x{{ item.quantity }}</div>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n</div>\n<hr />\n", styles: [".scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
|
|
129
139
|
}] });
|
|
130
140
|
|
|
131
141
|
class OrderIndexComponent {
|
|
@@ -133,6 +143,12 @@ class OrderIndexComponent {
|
|
|
133
143
|
this.orderService = inject(OrderService);
|
|
134
144
|
this.title = inject(Title);
|
|
135
145
|
this.route = inject(ActivatedRoute);
|
|
146
|
+
this.orderType = OrderType;
|
|
147
|
+
this.orderStatus = OrderStatus;
|
|
148
|
+
this.filterOptions = {
|
|
149
|
+
type: '',
|
|
150
|
+
status: '',
|
|
151
|
+
};
|
|
136
152
|
this.links = [
|
|
137
153
|
{
|
|
138
154
|
name: '全部',
|
|
@@ -160,22 +176,26 @@ class OrderIndexComponent {
|
|
|
160
176
|
},
|
|
161
177
|
];
|
|
162
178
|
this.orders = [];
|
|
163
|
-
this.status = OrderStatus;
|
|
164
179
|
this.select = 0;
|
|
180
|
+
this.filter = false;
|
|
165
181
|
}
|
|
166
182
|
ngOnInit() {
|
|
167
183
|
this.title.setTitle('我的订单 - 拼小课');
|
|
168
184
|
this.route.queryParams.subscribe(({ status }) => {
|
|
169
185
|
this.select = this.links.findIndex((item) => item.status === status);
|
|
170
|
-
|
|
186
|
+
if (status) {
|
|
187
|
+
this.filterOptions.status = status.toUpperCase();
|
|
188
|
+
}
|
|
189
|
+
this.findOrders();
|
|
171
190
|
});
|
|
172
191
|
}
|
|
173
|
-
findOrders(
|
|
192
|
+
findOrders() {
|
|
174
193
|
const options = {
|
|
175
194
|
sort: 'updatedAt desc',
|
|
176
195
|
};
|
|
177
|
-
|
|
178
|
-
|
|
196
|
+
const filterString = this.convertFilterOptions(this.filterOptions);
|
|
197
|
+
if (filterString) {
|
|
198
|
+
options['filter'] = filterString;
|
|
179
199
|
}
|
|
180
200
|
this.orderService.me(options).subscribe({
|
|
181
201
|
next: (res) => {
|
|
@@ -183,8 +203,32 @@ class OrderIndexComponent {
|
|
|
183
203
|
},
|
|
184
204
|
});
|
|
185
205
|
}
|
|
206
|
+
resetFilter() {
|
|
207
|
+
this.filterOptions = {
|
|
208
|
+
type: '',
|
|
209
|
+
};
|
|
210
|
+
this.filter = false;
|
|
211
|
+
this.findOrders();
|
|
212
|
+
}
|
|
213
|
+
convertFilterOptions(jsonObj) {
|
|
214
|
+
return Object.entries(jsonObj)
|
|
215
|
+
.filter(([key, value]) => value !== '' && value !== undefined)
|
|
216
|
+
.map(([key, value]) => {
|
|
217
|
+
return `${key}:${value}`;
|
|
218
|
+
})
|
|
219
|
+
.join(',');
|
|
220
|
+
}
|
|
221
|
+
statusCompareFn(t1, t2) {
|
|
222
|
+
return t1 === t2;
|
|
223
|
+
}
|
|
186
224
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OrderIndexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
187
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: OrderIndexComponent, isStandalone: true, selector: "rolatech-order-index", ngImport: i0, template: "<rolatech-container>\n <rolatech-toolbar title=\"\u6211\u7684\u8BA2\u5355\" large>\n <button mat-button>\n <span>\u8FC7\u6EE4</span>\n <mat-icon>tune</mat-icon>\n </button>\n </rolatech-toolbar>\n <rolatech-tabs [select]=\"select\">\n @for (item of links; track item) {\n @if (item.status) {\n <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n } @else {\n <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n }\n }\n </rolatech-tabs>\n <rolatech-list>\n @if (orders) {\n @for (item of orders; track item) {\n <rolatech-order-item [routerLink]=\"['./', item.id]\" [order]=\"item\"></rolatech-order-item>\n }\n } @else {\n <rolatech-empty></rolatech-empty>\n }\n </rolatech-list>\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: ListComponent, selector: "rolatech-list" }, { kind: "component", type: OrderItemComponent, selector: "rolatech-order-item", inputs: ["order"] }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] })
|
|
225
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: OrderIndexComponent, isStandalone: true, selector: "rolatech-order-index", ngImport: i0, template: "<rolatech-container>\n <rolatech-toolbar title=\"\u6211\u7684\u8BA2\u5355\" large>\n <button mat-button (click)=\"filter = !filter\">\n <span>\u8FC7\u6EE4</span>\n <mat-icon>tune</mat-icon>\n </button>\n </rolatech-toolbar>\n <rolatech-filter>\n <div [@filter]=\"filter === true ? 'expanded' : 'collapsed'\">\n <div\n class=\"min-w-[256px] md:min-w-[320px] px-3 h-full flex flex-row md:flex-col md:h-full items-center md:items-start shadow-inner shadow-light-400 md:shadow-none overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n >\n <div class=\"flex items-center gap-3 mt-2\">\n <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n <mat-select name=\"type\" placeholder=\"\u7C7B\u578B\" [(ngModel)]=\"filterOptions.type\">\n @for (type of orderType | keyvalue; track type) {\n <mat-option [value]=\"type.key\">\n {{ type.value }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n <mat-form-field subscriptSizing=\"dynamic\">\n <mat-select [compareWith]=\"statusCompareFn\" placeholder=\"\u72B6\u6001\" [(ngModel)]=\"filterOptions.status\">\n @for (status of orderStatus | keyvalue; track status) {\n <mat-option [value]=\"status.key\">\n {{ status.value }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n <div>\n <button mat-flat-button (click)=\"findOrders()\">\u641C\u7D22</button>\n <button mat-stroked-button (click)=\"resetFilter()\" class=\"ml-3\">\u91CD\u7F6E</button>\n </div>\n </div>\n </div>\n </div>\n </rolatech-filter>\n <rolatech-tabs [select]=\"select\">\n @for (item of links; track item) {\n @if (item.status) {\n <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n } @else {\n <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n }\n }\n </rolatech-tabs>\n <rolatech-list>\n @if (orders) {\n @for (item of orders; track item) {\n <rolatech-order-item [routerLink]=\"['./', item.id]\" [order]=\"item\"></rolatech-order-item>\n }\n } @else {\n <rolatech-empty></rolatech-empty>\n }\n </rolatech-list>\n</rolatech-container>\n", styles: [".active{color:#ff4500;font-weight:700}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: ListComponent, selector: "rolatech-list" }, { kind: "component", type: OrderItemComponent, selector: "rolatech-order-item", inputs: ["order"] }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: FilterComponent, selector: "rolatech-filter" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], animations: [
|
|
226
|
+
trigger('filter', [
|
|
227
|
+
state('collapsed', style({ height: '0px', minHeight: '0' })),
|
|
228
|
+
state('expanded', style({ height: '*' })),
|
|
229
|
+
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
230
|
+
]),
|
|
231
|
+
] }); }
|
|
188
232
|
}
|
|
189
233
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OrderIndexComponent, decorators: [{
|
|
190
234
|
type: Component,
|
|
@@ -199,7 +243,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
199
243
|
EmptyComponent,
|
|
200
244
|
MatButtonModule,
|
|
201
245
|
MatIconModule,
|
|
202
|
-
|
|
246
|
+
NgClass,
|
|
247
|
+
FormsModule,
|
|
248
|
+
MatFormFieldModule,
|
|
249
|
+
MatDatepickerModule,
|
|
250
|
+
MatOptionModule,
|
|
251
|
+
MatInputModule,
|
|
252
|
+
MatSelectModule,
|
|
253
|
+
MatButtonModule,
|
|
254
|
+
FilterComponent,
|
|
255
|
+
KeyValuePipe,
|
|
256
|
+
], animations: [
|
|
257
|
+
trigger('filter', [
|
|
258
|
+
state('collapsed', style({ height: '0px', minHeight: '0' })),
|
|
259
|
+
state('expanded', style({ height: '*' })),
|
|
260
|
+
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
261
|
+
]),
|
|
262
|
+
], template: "<rolatech-container>\n <rolatech-toolbar title=\"\u6211\u7684\u8BA2\u5355\" large>\n <button mat-button (click)=\"filter = !filter\">\n <span>\u8FC7\u6EE4</span>\n <mat-icon>tune</mat-icon>\n </button>\n </rolatech-toolbar>\n <rolatech-filter>\n <div [@filter]=\"filter === true ? 'expanded' : 'collapsed'\">\n <div\n class=\"min-w-[256px] md:min-w-[320px] px-3 h-full flex flex-row md:flex-col md:h-full items-center md:items-start shadow-inner shadow-light-400 md:shadow-none overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n >\n <div class=\"flex items-center gap-3 mt-2\">\n <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n <mat-select name=\"type\" placeholder=\"\u7C7B\u578B\" [(ngModel)]=\"filterOptions.type\">\n @for (type of orderType | keyvalue; track type) {\n <mat-option [value]=\"type.key\">\n {{ type.value }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n <mat-form-field subscriptSizing=\"dynamic\">\n <mat-select [compareWith]=\"statusCompareFn\" placeholder=\"\u72B6\u6001\" [(ngModel)]=\"filterOptions.status\">\n @for (status of orderStatus | keyvalue; track status) {\n <mat-option [value]=\"status.key\">\n {{ status.value }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n <div>\n <button mat-flat-button (click)=\"findOrders()\">\u641C\u7D22</button>\n <button mat-stroked-button (click)=\"resetFilter()\" class=\"ml-3\">\u91CD\u7F6E</button>\n </div>\n </div>\n </div>\n </div>\n </rolatech-filter>\n <rolatech-tabs [select]=\"select\">\n @for (item of links; track item) {\n @if (item.status) {\n <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n } @else {\n <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n }\n }\n </rolatech-tabs>\n <rolatech-list>\n @if (orders) {\n @for (item of orders; track item) {\n <rolatech-order-item [routerLink]=\"['./', item.id]\" [order]=\"item\"></rolatech-order-item>\n }\n } @else {\n <rolatech-empty></rolatech-empty>\n }\n </rolatech-list>\n</rolatech-container>\n", styles: [".active{color:#ff4500;font-weight:700}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}mat-form-field{width:100%}\n"] }]
|
|
203
263
|
}] });
|
|
204
264
|
|
|
205
265
|
class OrderReturnRequestComponent {
|
|
@@ -215,19 +275,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
215
275
|
args: [{ selector: 'rolatech-order-return-request', standalone: true, imports: [MatFormFieldModule, MatInputModule], template: "<div class=\"py-2\">\n <h2 class=\"mb-2\">\u5728\u4E0B\u9762\u8F93\u5165\u9000\u6B3E\u7406\u7531</h2>\n <mat-form-field appearance=\"fill\">\n <mat-label> \u9000\u6B3E\u7406\u7531 </mat-label>\n <textarea matInput required [value]=\"reason()\"></textarea>\n </mat-form-field>\n</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
|
|
216
276
|
}] });
|
|
217
277
|
|
|
218
|
-
class OrderCourseItemComponent {
|
|
219
|
-
constructor() {
|
|
220
|
-
this.course = input.required();
|
|
221
|
-
this.type = CourseType;
|
|
222
|
-
}
|
|
223
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OrderCourseItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
224
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: OrderCourseItemComponent, isStandalone: true, selector: "rolatech-order-course-item", inputs: { course: { classPropertyName: "course", publicName: "course", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col\">\n <div class=\"hover:!bg-[--rt-base-background] cursor-pointer py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"flex flex-row w-full\">\n <div class=\"w-2/5 sm:w-1/4 aspect-video bg-[--rt-raised-background] h-fit\">\n @if (course().media) {\n <div class=\"object-cover aspect-video\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"course().media[0].url + '!w400'\" size=\"medium\"> </rolatech-thumbnail>\n } @placeholder {\n <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video\"></div>\n }\n </div>\n }\n </div>\n <div class=\"w-3/5 sm:w-3/4 ml-3 flex flex-col justify-between\">\n <span class=\"font-bold break-words line-clamp-2\">{{ course().name }}</span>\n <span class=\"text-sm text-[--rt-text-secondary]\">\u7C7B\u578B: {{ type[course().type] }}</span>\n </div>\n </div>\n <div class=\"pl-2\">\n <mat-icon>navigate_next</mat-icon>\n </div>\n </div>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], deferBlockDependencies: [() => [import('@rolatech/angular-components').then(m => m.ThumbnailComponent)]] }); }
|
|
225
|
-
}
|
|
226
|
-
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.2.0", ngImport: i0, type: OrderCourseItemComponent, resolveDeferredDeps: () => [import('@rolatech/angular-components').then(m => m.ThumbnailComponent)], resolveMetadata: ThumbnailComponent => ({ decorators: [{
|
|
227
|
-
type: Component,
|
|
228
|
-
args: [{ selector: 'rolatech-order-course-item', standalone: true, imports: [CommonModule, ThumbnailComponent, MatIconModule], template: "<div class=\"flex flex-col\">\n <div class=\"hover:!bg-[--rt-base-background] cursor-pointer py-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"flex flex-row w-full\">\n <div class=\"w-2/5 sm:w-1/4 aspect-video bg-[--rt-raised-background] h-fit\">\n @if (course().media) {\n <div class=\"object-cover aspect-video\">\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"course().media[0].url + '!w400'\" size=\"medium\"> </rolatech-thumbnail>\n } @placeholder {\n <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video\"></div>\n }\n </div>\n }\n </div>\n <div class=\"w-3/5 sm:w-3/4 ml-3 flex flex-col justify-between\">\n <span class=\"font-bold break-words line-clamp-2\">{{ course().name }}</span>\n <span class=\"text-sm text-[--rt-text-secondary]\">\u7C7B\u578B: {{ type[course().type] }}</span>\n </div>\n </div>\n <div class=\"pl-2\">\n <mat-icon>navigate_next</mat-icon>\n </div>\n </div>\n </div>\n</div>\n" }]
|
|
229
|
-
}], ctorParameters: null, propDecorators: null }) });
|
|
230
|
-
|
|
231
278
|
class OrderVariantItemComponent {
|
|
232
279
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OrderVariantItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
233
280
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: OrderVariantItemComponent, isStandalone: true, selector: "rolatech-order-variant-item", ngImport: i0, template: "<p>order-variant-item works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
@@ -237,23 +284,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
237
284
|
args: [{ selector: 'rolatech-order-variant-item', standalone: true, imports: [CommonModule], template: "<p>order-variant-item works!</p>\n" }]
|
|
238
285
|
}] });
|
|
239
286
|
|
|
240
|
-
class
|
|
287
|
+
class OrderDetailItemComponent {
|
|
241
288
|
constructor() {
|
|
242
289
|
this.thumbnail = input();
|
|
243
290
|
this.title = input.required();
|
|
244
291
|
this.description = input();
|
|
245
292
|
this.quantity = input(0);
|
|
246
293
|
this.total = input.required();
|
|
294
|
+
this.link = input.required();
|
|
247
295
|
this.priceDisplay = computed(() => {
|
|
248
296
|
return (this.total() / 100)?.toFixed(2);
|
|
249
297
|
});
|
|
250
298
|
}
|
|
251
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type:
|
|
252
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type:
|
|
299
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OrderDetailItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
300
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: OrderDetailItemComponent, isStandalone: true, selector: "rolatech-order-detail-item", inputs: { thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, quantity: { classPropertyName: "quantity", publicName: "quantity", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex justify-between py-3\">\n <div class=\"flex w-full\">\n <div\n class=\"min-w-24 w-36 aspect-video bg-[--rt-raised-background] hover:rounded-none rounded-lg h-fit cursor-pointer\"\n [routerLink]=\"link()\"\n >\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"thumbnail()\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n } @placeholder {\n <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video\"></div>\n }\n </div>\n\n <div class=\"w-full ml-3 flex flex-col justify-between\">\n <!-- info -->\n <div class=\"flex justify-between\">\n <div class=\"flex flex-col\">\n <span class=\"text-lg font-bold hover:text-[--rt-brand-color] cursor-pointer\" [routerLink]=\"link()\">{{\n title()\n }}</span>\n <span class=\"text-sm text-[--rt-text-secondary]\">{{ description() }}</span>\n <ng-content></ng-content>\n </div>\n <div class=\"text-right p-1\">\n <div class=\"text-sm\">\u00A5{{ priceDisplay() }}</div>\n <div class=\"text-sm mt-2\">x{{ quantity() }}</div>\n </div>\n </div>\n <!-- action -->\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex items-center text-sm\"></div>\n </div>\n </div>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], deferBlockDependencies: [() => [import('@rolatech/angular-components').then(m => m.ThumbnailComponent)]] }); }
|
|
253
301
|
}
|
|
254
|
-
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.2.0", ngImport: i0, type:
|
|
302
|
+
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.2.0", ngImport: i0, type: OrderDetailItemComponent, resolveDeferredDeps: () => [import('@rolatech/angular-components').then(m => m.ThumbnailComponent)], resolveMetadata: ThumbnailComponent => ({ decorators: [{
|
|
255
303
|
type: Component,
|
|
256
|
-
args: [{ selector: 'rolatech-order-
|
|
304
|
+
args: [{ selector: 'rolatech-order-detail-item', standalone: true, imports: [CommonModule, ThumbnailComponent, MatIcon, RouterLink], template: "<div class=\"flex justify-between py-3\">\n <div class=\"flex w-full\">\n <div\n class=\"min-w-24 w-36 aspect-video bg-[--rt-raised-background] hover:rounded-none rounded-lg h-fit cursor-pointer\"\n [routerLink]=\"link()\"\n >\n @defer (on viewport()) {\n <rolatech-thumbnail [src]=\"thumbnail()\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n } @placeholder {\n <div class=\"bg-[--rt-raised-background] h-full w-full object-cover aspect-video\"></div>\n }\n </div>\n\n <div class=\"w-full ml-3 flex flex-col justify-between\">\n <!-- info -->\n <div class=\"flex justify-between\">\n <div class=\"flex flex-col\">\n <span class=\"text-lg font-bold hover:text-[--rt-brand-color] cursor-pointer\" [routerLink]=\"link()\">{{\n title()\n }}</span>\n <span class=\"text-sm text-[--rt-text-secondary]\">{{ description() }}</span>\n <ng-content></ng-content>\n </div>\n <div class=\"text-right p-1\">\n <div class=\"text-sm\">\u00A5{{ priceDisplay() }}</div>\n <div class=\"text-sm mt-2\">x{{ quantity() }}</div>\n </div>\n </div>\n <!-- action -->\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex items-center text-sm\"></div>\n </div>\n </div>\n </div>\n</div>\n" }]
|
|
257
305
|
}], ctorParameters: null, propDecorators: null }) });
|
|
258
306
|
|
|
259
307
|
class OrderDetailComponent extends BaseComponent {
|
|
@@ -278,15 +326,6 @@ class OrderDetailComponent extends BaseComponent {
|
|
|
278
326
|
this.orderService.get(this.id).subscribe({
|
|
279
327
|
next: (res) => {
|
|
280
328
|
this.order = res.data;
|
|
281
|
-
if (this.order.type?.toString() === 'PRODUCT') {
|
|
282
|
-
this.getVariant();
|
|
283
|
-
}
|
|
284
|
-
else if (this.order.type?.toString() === 'COURSE') {
|
|
285
|
-
this.getCourse();
|
|
286
|
-
}
|
|
287
|
-
else {
|
|
288
|
-
this.getCourse();
|
|
289
|
-
}
|
|
290
329
|
if (this.order.status === 'CREATED') {
|
|
291
330
|
setInterval(() => {
|
|
292
331
|
const start = moment();
|
|
@@ -299,24 +338,6 @@ class OrderDetailComponent extends BaseComponent {
|
|
|
299
338
|
},
|
|
300
339
|
});
|
|
301
340
|
}
|
|
302
|
-
back() {
|
|
303
|
-
this.navigationService.back();
|
|
304
|
-
}
|
|
305
|
-
getCourse() {
|
|
306
|
-
const { productId } = this.order.items[0];
|
|
307
|
-
this.course$ = this.courseService.get(productId).pipe(map((res) => res.data));
|
|
308
|
-
}
|
|
309
|
-
getVariant() {
|
|
310
|
-
const { variantId } = this.order.items[0];
|
|
311
|
-
if (variantId) {
|
|
312
|
-
this.productService
|
|
313
|
-
.getVariant(variantId)
|
|
314
|
-
.pipe(map((res) => res.data))
|
|
315
|
-
.subscribe({
|
|
316
|
-
next: (res) => { },
|
|
317
|
-
});
|
|
318
|
-
}
|
|
319
|
-
}
|
|
320
341
|
refund() {
|
|
321
342
|
const options = {
|
|
322
343
|
width: '500px',
|
|
@@ -371,7 +392,7 @@ class OrderDetailComponent extends BaseComponent {
|
|
|
371
392
|
});
|
|
372
393
|
}
|
|
373
394
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OrderDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
374
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: OrderDetailComponent, isStandalone: true, selector: "rolatech-order-detail", usesInheritance: true, ngImport: i0, template: "@if (order) {\n <rolatech-container>\n <rolatech-toolbar [title]=\"status[order.status]\" large link=\"../\">\n <button mat-button (click)=\"timeline()\">\n <mat-icon>history</mat-icon>\n <span>\u8BA2\u5355\u72B6\u6001</span>\n </button>\n </rolatech-toolbar>\n <div>\n
|
|
395
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: OrderDetailComponent, isStandalone: true, selector: "rolatech-order-detail", usesInheritance: true, ngImport: i0, template: "@if (order) {\n <rolatech-container>\n <rolatech-toolbar [title]=\"status[order.status]\" large link=\"../\">\n <button mat-button (click)=\"timeline()\">\n <mat-icon>history</mat-icon>\n <span>\u8BA2\u5355\u72B6\u6001</span>\n </button>\n </rolatech-toolbar>\n <div>\n @if (order.status === 'CREATED') {\n <div class=\"text-[--rt-brand-color] font-bold\">\u652F\u4ED8\u5012\u8BA1\u65F6: {{ countDown }}</div>\n }\n <div>\n <div>\n @for (item of order.items; track $index) {\n <rolatech-order-detail-item\n [thumbnail]=\"item.media[0].url + '!w200 '\"\n [link]=\"order.type.toString() === 'PRODUCT' ? '/products/' + item.productId : '/courses/' + item.productId\"\n [title]=\"item.name\"\n [total]=\"item.total\"\n [description]=\"item.options | orderItemoptions: order.type\"\n [quantity]=\"item.quantity\"\n ></rolatech-order-detail-item>\n }\n </div>\n <div class=\"mt-3\">\n <div class=\"text-lg py-3 font-medium\">\u8BA2\u5355\u4FE1\u606F</div>\n <div class=\"flex items-center justify-between py-1\">\n <label class=\"font-medium\">\u8BA2\u5355\u53F7</label>\n <span class=\"text-sm\"> {{ order.orderNo }}</span>\n </div>\n <div class=\"flex items-center justify-between py-1\">\n <label class=\"font-medium\">\u4E0B\u5355\u65F6\u95F4</label>\n <span class=\"text-sm\"> {{ order.createdAt }}</span>\n </div>\n <div class=\"flex items-center justify-between py-1\">\n <label class=\"font-medium\">\u5E94\u4ED8\u91D1\u989D</label>\n <span class=\"text-sm\">\u00A5{{ (order.total / 100).toFixed(2) }}</span>\n </div>\n </div>\n @if (order.status.toString() === 'CREATED' || order.status.toString() === 'PAID') {\n <div class=\"mt-6\">\n <div class=\"text-lg pb-3 font-medium\">\u652F\u4ED8\u65B9\u5F0F</div>\n <div class=\"flex\">\n <img class=\"w-6 h-6\" src=\"/images/pay_wechat.png\" />\n <span class=\"ml-1\">\u5FAE\u4FE1\u652F\u4ED8</span>\n </div>\n </div>\n }\n </div>\n <!-- safe area -->\n <div class=\"pb-16 sm:pb-3\"></div>\n <div class=\"\">\n @if (order.status.toString() === 'PAID') {\n <button mat-flat-button class=\"w-32 min-h-11\" (click)=\"refund()\">\u7533\u8BF7\u9000\u6B3E</button>\n }\n <div class=\"flex items-center justify-end\">\n @if (order.status.toString() === 'CREATED') {\n <span\n class=\"underline text-sm underline-offset-4 mr-6 cursor-pointer hover:text-[--rt-brand-color]\"\n (click)=\"cancel()\"\n >\u53D6\u6D88\u8BA2\u5355</span\n >\n }\n @if (order.status.toString() === 'CREATED') {\n <button mat-flat-button class=\"w-32 min-h-11\" (click)=\"pay()\">\u652F\u4ED8\u8BA2\u5355</button>\n }\n </div>\n </div>\n </div>\n </rolatech-container>\n}\n<div\n [ngClass]=\"info ? 'translate-none' : 'translate-x-full'\"\n class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n>\n <div class=\"flex justify-between items-center sm:p-4\">\n <div class=\"text-xl font-bold\">\u8BA2\u5355\u72B6\u6001</div>\n <button mat-icon-button (click)=\"info = !info\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n @if (!loadingTimeline) {\n <div class=\"mt-3 p-1 sm:p-4\">\n <ol class=\"relative border-l border-[--rt-border-color]\">\n @for (item of timelineData; track item) {\n <li class=\"mb-8 ml-4\">\n <div\n class=\"absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 border border-[--rt-raised-background] bg-[--rt-text-primary]\"\n ></div>\n <div class=\"text-md font-bold mb-1\">{{ timelineStatus[item.status] }}</div>\n @if (item.status === 'BOOKING_RETURN_REJECTED') {\n <div class=\"text-sm mb-1\">{{ item.return.note }}</div>\n }\n @if (item.status === 'BOOKING_RETURN_REQUESTED') {\n <div class=\"text-sm mb-1\">{{ item.return.reason }}</div>\n }\n <div class=\"text-sm text-[--rt-text-secondary]\">{{ item.date }}</div>\n </li>\n }\n </ol>\n </div>\n }\n @if (loadingTimeline) {\n <div>\n <rolatech-spinner></rolatech-spinner>\n </div>\n }\n</div>\n<div\n (click)=\"info = !info\"\n [ngClass]=\"info ? 'visible' : 'invisible'\"\n class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: OrderDetailItemComponent, selector: "rolatech-order-detail-item", inputs: ["thumbnail", "title", "description", "quantity", "total", "link"] }, { kind: "pipe", type: OrderItemOptionsFormatPipe, name: "orderItemoptions" }] }); }
|
|
375
396
|
}
|
|
376
397
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OrderDetailComponent, decorators: [{
|
|
377
398
|
type: Component,
|
|
@@ -386,11 +407,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
386
407
|
ThumbnailComponent,
|
|
387
408
|
ToolbarComponent,
|
|
388
409
|
TitleComponent,
|
|
389
|
-
|
|
390
|
-
OrderProductItemComponent,
|
|
410
|
+
OrderDetailItemComponent,
|
|
391
411
|
OrderVariantItemComponent,
|
|
392
412
|
OrderItemOptionsFormatPipe,
|
|
393
|
-
], template: "@if (order) {\n <rolatech-container>\n <rolatech-toolbar [title]=\"status[order.status]\" large link=\"../\">\n <button mat-button (click)=\"timeline()\">\n <mat-icon>history</mat-icon>\n <span>\u8BA2\u5355\u72B6\u6001</span>\n </button>\n </rolatech-toolbar>\n <div>\n
|
|
413
|
+
], template: "@if (order) {\n <rolatech-container>\n <rolatech-toolbar [title]=\"status[order.status]\" large link=\"../\">\n <button mat-button (click)=\"timeline()\">\n <mat-icon>history</mat-icon>\n <span>\u8BA2\u5355\u72B6\u6001</span>\n </button>\n </rolatech-toolbar>\n <div>\n @if (order.status === 'CREATED') {\n <div class=\"text-[--rt-brand-color] font-bold\">\u652F\u4ED8\u5012\u8BA1\u65F6: {{ countDown }}</div>\n }\n <div>\n <div>\n @for (item of order.items; track $index) {\n <rolatech-order-detail-item\n [thumbnail]=\"item.media[0].url + '!w200 '\"\n [link]=\"order.type.toString() === 'PRODUCT' ? '/products/' + item.productId : '/courses/' + item.productId\"\n [title]=\"item.name\"\n [total]=\"item.total\"\n [description]=\"item.options | orderItemoptions: order.type\"\n [quantity]=\"item.quantity\"\n ></rolatech-order-detail-item>\n }\n </div>\n <div class=\"mt-3\">\n <div class=\"text-lg py-3 font-medium\">\u8BA2\u5355\u4FE1\u606F</div>\n <div class=\"flex items-center justify-between py-1\">\n <label class=\"font-medium\">\u8BA2\u5355\u53F7</label>\n <span class=\"text-sm\"> {{ order.orderNo }}</span>\n </div>\n <div class=\"flex items-center justify-between py-1\">\n <label class=\"font-medium\">\u4E0B\u5355\u65F6\u95F4</label>\n <span class=\"text-sm\"> {{ order.createdAt }}</span>\n </div>\n <div class=\"flex items-center justify-between py-1\">\n <label class=\"font-medium\">\u5E94\u4ED8\u91D1\u989D</label>\n <span class=\"text-sm\">\u00A5{{ (order.total / 100).toFixed(2) }}</span>\n </div>\n </div>\n @if (order.status.toString() === 'CREATED' || order.status.toString() === 'PAID') {\n <div class=\"mt-6\">\n <div class=\"text-lg pb-3 font-medium\">\u652F\u4ED8\u65B9\u5F0F</div>\n <div class=\"flex\">\n <img class=\"w-6 h-6\" src=\"/images/pay_wechat.png\" />\n <span class=\"ml-1\">\u5FAE\u4FE1\u652F\u4ED8</span>\n </div>\n </div>\n }\n </div>\n <!-- safe area -->\n <div class=\"pb-16 sm:pb-3\"></div>\n <div class=\"\">\n @if (order.status.toString() === 'PAID') {\n <button mat-flat-button class=\"w-32 min-h-11\" (click)=\"refund()\">\u7533\u8BF7\u9000\u6B3E</button>\n }\n <div class=\"flex items-center justify-end\">\n @if (order.status.toString() === 'CREATED') {\n <span\n class=\"underline text-sm underline-offset-4 mr-6 cursor-pointer hover:text-[--rt-brand-color]\"\n (click)=\"cancel()\"\n >\u53D6\u6D88\u8BA2\u5355</span\n >\n }\n @if (order.status.toString() === 'CREATED') {\n <button mat-flat-button class=\"w-32 min-h-11\" (click)=\"pay()\">\u652F\u4ED8\u8BA2\u5355</button>\n }\n </div>\n </div>\n </div>\n </rolatech-container>\n}\n<div\n [ngClass]=\"info ? 'translate-none' : 'translate-x-full'\"\n class=\"fixed top-0 right-0 z-[1001] h-screen p-4 overflow-y-auto transition-transform bg-[--rt-raised-background] w-80 sm:w-[300px] shadow-xl\"\n>\n <div class=\"flex justify-between items-center sm:p-4\">\n <div class=\"text-xl font-bold\">\u8BA2\u5355\u72B6\u6001</div>\n <button mat-icon-button (click)=\"info = !info\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n @if (!loadingTimeline) {\n <div class=\"mt-3 p-1 sm:p-4\">\n <ol class=\"relative border-l border-[--rt-border-color]\">\n @for (item of timelineData; track item) {\n <li class=\"mb-8 ml-4\">\n <div\n class=\"absolute w-3 h-3 rounded-full mt-1.5 -left-1.5 border border-[--rt-raised-background] bg-[--rt-text-primary]\"\n ></div>\n <div class=\"text-md font-bold mb-1\">{{ timelineStatus[item.status] }}</div>\n @if (item.status === 'BOOKING_RETURN_REJECTED') {\n <div class=\"text-sm mb-1\">{{ item.return.note }}</div>\n }\n @if (item.status === 'BOOKING_RETURN_REQUESTED') {\n <div class=\"text-sm mb-1\">{{ item.return.reason }}</div>\n }\n <div class=\"text-sm text-[--rt-text-secondary]\">{{ item.date }}</div>\n </li>\n }\n </ol>\n </div>\n }\n @if (loadingTimeline) {\n <div>\n <rolatech-spinner></rolatech-spinner>\n </div>\n }\n</div>\n<div\n (click)=\"info = !info\"\n [ngClass]=\"info ? 'visible' : 'invisible'\"\n class=\"bg-[--rt-10-percent-layer] fixed inset-0 z-[1000]\"\n></div>\n" }]
|
|
394
414
|
}] });
|
|
395
415
|
|
|
396
416
|
class OrderQrcodepayComponent extends BaseComponent {
|
|
@@ -475,5 +495,5 @@ const orderRoutes = [
|
|
|
475
495
|
* Generated bundle index. Do not edit.
|
|
476
496
|
*/
|
|
477
497
|
|
|
478
|
-
export {
|
|
498
|
+
export { OrderDetailItemComponent, OrderItemComponent, OrderItemOptionsFormatPipe, OrderItemStatus, OrderPayoutStatus, OrderPayoutType, OrderReturnRequestComponent, OrderReturnStatus, OrderStatus, OrderTimelineStatus, OrderType, OrderVariantItemComponent, orderRoutes };
|
|
479
499
|
//# sourceMappingURL=rolatech-angular-order.mjs.map
|