@rolatech/angular-order 18.0.0

package/fesm2022/rolatech-angular-order.mjs

@@ -0,0 +1,453 @@
+import * as i0 from '@angular/core';
+import { input, computed, Component, inject, output, model, Renderer2, viewChild } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import * as i1 from '@angular/router';
+import { ActivatedRoute, RouterModule, RouterLink } from '@angular/router';
+import { ImagePlaceholderComponent, ThumbnailComponent, ContainerComponent, TabsComponent, TabComponent, ToolbarComponent, ListComponent, EmptyComponent, BaseComponent, SpinnerComponent, TitleComponent } from '@rolatech/angular-components';
+import { OrderService, ProductService, NavigationService } from '@rolatech/angular-services';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule, MatIcon } from '@angular/material/icon';
+import { NgClass, CommonModule, AsyncPipe } from '@angular/common';
+import { sumBy } from 'lodash';
+import * as i1$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import moment from 'moment';
+import { map } from 'rxjs';
+import { CourseType, CourseService } from '@rolatech/angular-course';
+import * as i1$2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as QRCode from 'qrcode';
+
+var OrderStatus;
+(function (OrderStatus) {
+    OrderStatus[OrderStatus["CREATED"] = '待付款'] = "CREATED";
+    OrderStatus[OrderStatus["PAID"] = '已支付'] = "PAID";
+    OrderStatus[OrderStatus["COMPLETED"] = '已完成'] = "COMPLETED";
+    OrderStatus[OrderStatus["CLOSED"] = '交易关闭'] = "CLOSED";
+    OrderStatus[OrderStatus["CANCELED"] = '交易取消'] = "CANCELED";
+    OrderStatus[OrderStatus["REFUNDED"] = '已退款'] = "REFUNDED";
+})(OrderStatus || (OrderStatus = {}));
+var OrderType;
+(function (OrderType) {
+    OrderType[OrderType["COURSE"] = '课程'] = "COURSE";
+    OrderType[OrderType["PRODUCT"] = '商品'] = "PRODUCT";
+    OrderType[OrderType["BOOKING"] = '预定'] = "BOOKING";
+})(OrderType || (OrderType = {}));
+var OrderReturnStatus;
+(function (OrderReturnStatus) {
+    OrderReturnStatus[OrderReturnStatus["CREATED"] = '等待审核'] = "CREATED";
+    OrderReturnStatus[OrderReturnStatus["CANCELED"] = '用户取消'] = "CANCELED";
+    OrderReturnStatus[OrderReturnStatus["APPROVED"] = '已通过'] = "APPROVED";
+    OrderReturnStatus[OrderReturnStatus["REJECTED"] = '已拒绝'] = "REJECTED";
+    OrderReturnStatus[OrderReturnStatus["PROCESSING"] = '平台处理中'] = "PROCESSING";
+    OrderReturnStatus[OrderReturnStatus["RETURNED"] = '已退款'] = "RETURNED";
+})(OrderReturnStatus || (OrderReturnStatus = {}));
+var OrderItemStatus;
+(function (OrderItemStatus) {
+    OrderItemStatus[OrderItemStatus["CREATED"] = '创建'] = "CREATED";
+    OrderItemStatus[OrderItemStatus["CANCELED"] = '已取消'] = "CANCELED";
+    OrderItemStatus[OrderItemStatus["CLOSED"] = '已关闭'] = "CLOSED";
+    OrderItemStatus[OrderItemStatus["RETURN_REQUESTED"] = '等待审核'] = "RETURN_REQUESTED";
+    OrderItemStatus[OrderItemStatus["RETURN_APPROVED"] = '商家同意退款'] = "RETURN_APPROVED";
+    OrderItemStatus[OrderItemStatus["RETURN_REJECTED"] = '商家拒绝退款'] = "RETURN_REJECTED";
+    OrderItemStatus[OrderItemStatus["RETURN_PROCESSING"] = '退款处理中'] = "RETURN_PROCESSING";
+    OrderItemStatus[OrderItemStatus["REFUNDED"] = '已退款'] = "REFUNDED";
+})(OrderItemStatus || (OrderItemStatus = {}));
+var OrderTimelineStatus;
+(function (OrderTimelineStatus) {
+    OrderTimelineStatus[OrderTimelineStatus["ORDER_CREATE"] = '交易创建'] = "ORDER_CREATE";
+    OrderTimelineStatus[OrderTimelineStatus["ORDER_CLOSED"] = '交易关闭'] = "ORDER_CLOSED";
+    OrderTimelineStatus[OrderTimelineStatus["ORDER_CANCELED"] = '交易取消'] = "ORDER_CANCELED";
+    OrderTimelineStatus[OrderTimelineStatus["ORDER_PAID"] = '订单已支付'] = "ORDER_PAID";
+    OrderTimelineStatus[OrderTimelineStatus["ORDER_REFUNDED"] = '订单已退款'] = "ORDER_REFUNDED";
+    OrderTimelineStatus[OrderTimelineStatus["ORDER_COMPLETED"] = '订单已完成'] = "ORDER_COMPLETED";
+    OrderTimelineStatus[OrderTimelineStatus["ORDER_RETURN_REQUESTED"] = '退款申请'] = "ORDER_RETURN_REQUESTED";
+    OrderTimelineStatus[OrderTimelineStatus["ORDER_RETURN_APPROVED"] = '商家同意退款'] = "ORDER_RETURN_APPROVED";
+    OrderTimelineStatus[OrderTimelineStatus["ORDER_RETURN_REJECTED"] = '商家拒绝退款'] = "ORDER_RETURN_REJECTED";
+    OrderTimelineStatus[OrderTimelineStatus["ORDER_RETURN_PROCESSING"] = '退款处理中'] = "ORDER_RETURN_PROCESSING";
+    OrderTimelineStatus[OrderTimelineStatus["ORDER_RETURN_REFUNDED"] = '退款处理完成，已入账'] = "ORDER_RETURN_REFUNDED";
+})(OrderTimelineStatus || (OrderTimelineStatus = {}));
+var OrderPayoutStatus;
+(function (OrderPayoutStatus) {
+    OrderPayoutStatus[OrderPayoutStatus["CREATED"] = '创建'] = "CREATED";
+    OrderPayoutStatus[OrderPayoutStatus["PENDING"] = '处理中'] = "PENDING";
+    OrderPayoutStatus[OrderPayoutStatus["PAID"] = '已支付'] = "PAID";
+    OrderPayoutStatus[OrderPayoutStatus["CANCELED"] = '已取消'] = "CANCELED";
+    OrderPayoutStatus[OrderPayoutStatus["FAILED"] = '失败'] = "FAILED";
+})(OrderPayoutStatus || (OrderPayoutStatus = {}));
+var OrderPayoutType;
+(function (OrderPayoutType) {
+    OrderPayoutType[OrderPayoutType["BANK"] = '银行转账'] = "BANK";
+    OrderPayoutType[OrderPayoutType["CARD"] = '银行卡'] = "CARD";
+    OrderPayoutType[OrderPayoutType["WECHAT"] = '微信零钱'] = "WECHAT";
+})(OrderPayoutType || (OrderPayoutType = {}));
+
+class OrderItemComponent {
+    constructor() {
+        this.order = input.required();
+        this.status = OrderStatus;
+        this.total = computed(() => {
+            return (this.order().total / 100).toFixed(2);
+            // const price = sumBy(this.order().items, (item: any) => item.total);
+            // return (price / 100).toFixed(2);
+        });
+        this.quantity = computed(() => sumBy(this.order().items, (item) => item.quantity));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", 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-gray-200 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                </div>\n                <div>\n                  <div class=\"text-sm\">\u00A5{{ (item.total / 100).toFixed(2) }}</div>\n                  <div class=\"text-sm mt-2\">\u6570\u91CF{{ item.quantity }}</div>\n                </div>\n                <!-- <div>\n                  <div class=\"text-sm\">\u00A5{{ total() }}</div>\n                  <div class=\"text-sm mt-2\">\u6570\u91CF{{ 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" }], deferBlockDependencies: [() => [ThumbnailComponent]] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-order-item', standalone: true, imports: [MatIconModule, ThumbnailComponent, ImagePlaceholderComponent, NgClass], 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-gray-200 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                </div>\n                <div>\n                  <div class=\"text-sm\">\u00A5{{ (item.total / 100).toFixed(2) }}</div>\n                  <div class=\"text-sm mt-2\">\u6570\u91CF{{ item.quantity }}</div>\n                </div>\n                <!-- <div>\n                  <div class=\"text-sm\">\u00A5{{ total() }}</div>\n                  <div class=\"text-sm mt-2\">\u6570\u91CF{{ 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"] }]
+        }] });
+
+class OrderIndexComponent {
+    constructor() {
+        this.orderService = inject(OrderService);
+        this.title = inject(Title);
+        this.route = inject(ActivatedRoute);
+        this.links = [
+            {
+                name: '全部',
+                icon: 'dashboard',
+            },
+            {
+                name: '待付款',
+                icon: 'category',
+                status: 'created',
+            },
+            {
+                name: '已支付',
+                icon: 'category',
+                status: 'paid',
+            },
+            {
+                name: '已退款',
+                icon: 'category',
+                status: 'refunded',
+            },
+            {
+                name: '已取消',
+                icon: 'category',
+                status: 'canceled',
+            },
+        ];
+        this.orders = [];
+        this.status = OrderStatus;
+        this.select = 0;
+    }
+    ngOnInit() {
+        this.title.setTitle('我的订单 - 拼小课');
+        this.route.queryParams.subscribe(({ status }) => {
+            this.select = this.links.findIndex((item) => item.status === status);
+            this.findOrders(status);
+        });
+    }
+    findOrders(status) {
+        const options = {
+            sort: 'updatedAt desc',
+        };
+        if (status) {
+            options['filter'] = `status:${status}`;
+        }
+        this.orderService.me(options).subscribe({
+            next: (res) => {
+                this.orders = res.data;
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderIndexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderIndexComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-order-index', standalone: true, imports: [
+                        ContainerComponent,
+                        RouterModule,
+                        TabsComponent,
+                        TabComponent,
+                        ToolbarComponent,
+                        ListComponent,
+                        OrderItemComponent,
+                        EmptyComponent,
+                        MatButtonModule,
+                        MatIconModule,
+                    ], 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" }]
+        }] });
+
+class OrderReturnRequestComponent {
+    constructor() {
+        this.output = output();
+        this.reason = model();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderReturnRequestComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.4", type: OrderReturnRequestComponent, isStandalone: true, selector: "rolatech-order-return-request", inputs: { reason: { classPropertyName: "reason", publicName: "reason", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { output: "output", reason: "reasonChange" }, ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderReturnRequestComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }] });
+
+class OrderCourseItemComponent {
+    constructor() {
+        this.course = input.required();
+        this.type = CourseType;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderCourseItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", 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-gray-600\">\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)]] }); }
+}
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.4", ngImport: i0, type: OrderCourseItemComponent, resolveDeferredDeps: () => [import('@rolatech/angular-components').then(m => m.ThumbnailComponent)], resolveMetadata: ThumbnailComponent => ({ decorators: [{
+                type: Component,
+                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-gray-600\">\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" }]
+            }], ctorParameters: null, propDecorators: null }) });
+
+class OrderVariantItemComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderVariantItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", 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 }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderVariantItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-order-variant-item', standalone: true, imports: [CommonModule], template: "<p>order-variant-item works!</p>\n" }]
+        }] });
+
+class OrderProductItemComponent {
+    constructor() {
+        this.thumbnail = input();
+        this.title = input.required();
+        this.description = input();
+        this.quantity = input(0);
+        this.total = input.required();
+        this.priceDisplay = computed(() => {
+            return (this.total() / 100)?.toFixed(2);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderProductItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: OrderProductItemComponent, isStandalone: true, selector: "rolatech-order-product-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 } }, ngImport: i0, template: "<div class=\"flex justify-between py-3\">\n  <div class=\"flex w-full\">\n    <div class=\"w-1/4 aspect-video bg-gray-200 rounded-lg h-fit\">\n      <div class=\"object-cover aspect-video\">\n        @defer (on viewport()) {\n          <rolatech-thumbnail [src]=\"thumbnail()\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n        } @placeholder {\n          <div class=\"bg-gray-200 h-full w-full object-cover aspect-video\"></div>\n        }\n      </div>\n    </div>\n    <div class=\"w-3/4 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\">{{ title() }}</span>\n          <span class=\"text-sm text-gray-600 mt-2\">{{ description() }}</span>\n        </div>\n        <div>\u00A5{{ priceDisplay() }}</div>\n      </div>\n      <!-- action -->\n      <div class=\"flex justify-between items-center w-full\">\n        <div class=\"flex items-center text-sm\">\n          <span class=\"mr-3\">\u6570\u91CF</span>\n          <span class=\"w-11 text-center\">{{ quantity() }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], deferBlockDependencies: [() => [import('@rolatech/angular-components').then(m => m.ThumbnailComponent)]] }); }
+}
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.4", ngImport: i0, type: OrderProductItemComponent, resolveDeferredDeps: () => [import('@rolatech/angular-components').then(m => m.ThumbnailComponent)], resolveMetadata: ThumbnailComponent => ({ decorators: [{
+                type: Component,
+                args: [{ selector: 'rolatech-order-product-item', standalone: true, imports: [CommonModule, ThumbnailComponent, MatIcon], template: "<div class=\"flex justify-between py-3\">\n  <div class=\"flex w-full\">\n    <div class=\"w-1/4 aspect-video bg-gray-200 rounded-lg h-fit\">\n      <div class=\"object-cover aspect-video\">\n        @defer (on viewport()) {\n          <rolatech-thumbnail [src]=\"thumbnail()\" size=\"medium\" mode=\"full\"> </rolatech-thumbnail>\n        } @placeholder {\n          <div class=\"bg-gray-200 h-full w-full object-cover aspect-video\"></div>\n        }\n      </div>\n    </div>\n    <div class=\"w-3/4 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\">{{ title() }}</span>\n          <span class=\"text-sm text-gray-600 mt-2\">{{ description() }}</span>\n        </div>\n        <div>\u00A5{{ priceDisplay() }}</div>\n      </div>\n      <!-- action -->\n      <div class=\"flex justify-between items-center w-full\">\n        <div class=\"flex items-center text-sm\">\n          <span class=\"mr-3\">\u6570\u91CF</span>\n          <span class=\"w-11 text-center\">{{ quantity() }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            }], ctorParameters: null, propDecorators: null }) });
+
+class OrderDetailComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.status = OrderStatus;
+        this.type = CourseType;
+        this.orderType = OrderType;
+        this.orderService = inject(OrderService);
+        this.courseService = inject(CourseService);
+        this.productService = inject(ProductService);
+        this.navigationService = inject(NavigationService);
+        this.info = false;
+        this.loadingTimeline = false;
+        this.timelineStatus = OrderTimelineStatus;
+        this.countDown = '';
+    }
+    ngOnInit() {
+        this.get();
+    }
+    get() {
+        this.orderService.get(this.id).subscribe({
+            next: (res) => {
+                this.order = res.data;
+                if (this.order.type?.toString() === 'PRODUCT') {
+                    this.getVariant();
+                }
+                else if (this.order.type?.toString() === 'COURSE') {
+                    this.getCourse();
+                }
+                else {
+                    this.getCourse();
+                }
+                if (this.order.status === 'CREATED') {
+                    setInterval(() => {
+                        const start = moment();
+                        const end = moment(this.order.createdAt).add(15, 'minute');
+                        const diff = end.diff(start);
+                        const duration = moment.duration(diff);
+                        this.countDown = moment.utc(duration.as('milliseconds')).format('mm:ss');
+                    }, 1000);
+                }
+            },
+        });
+    }
+    back() {
+        this.navigationService.back();
+    }
+    getCourse() {
+        const { productId } = this.order.items[0];
+        this.course$ = this.courseService.get(productId).pipe(map((res) => res.data));
+    }
+    getVariant() {
+        const { variantId } = this.order.items[0];
+        if (variantId) {
+            this.productService
+                .getVariant(variantId)
+                .pipe(map((res) => res.data))
+                .subscribe({
+                next: (res) => { },
+            });
+        }
+    }
+    refund() {
+        const options = {
+            width: '500px',
+            title: '申请退款',
+            height: '90%',
+            cancelText: '取消',
+            confirmText: '确认',
+            component: OrderReturnRequestComponent,
+            data: {
+                reason: '',
+            },
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe((res) => {
+            if (res) {
+                this.orderService.refund(this.id, res).subscribe({
+                    next: (res) => {
+                        this.snackBarService.open('退款申请成功, 等待审核');
+                    },
+                    error: (error) => {
+                        this.snackBarService.open(error.message);
+                    },
+                });
+            }
+        });
+    }
+    cancel() {
+        this.orderService.cancel(this.id).subscribe({
+            next: (res) => {
+                this.order.status = OrderStatus[OrderStatus.CANCELED];
+                this.snackBarService.open('取消成功');
+            },
+            error: (error) => {
+                this.snackBarService.open(error.message);
+            },
+        });
+    }
+    pay() {
+        this.router.navigateByUrl(`/orders/${this.id}/qrcodepay`);
+    }
+    timeline() {
+        this.info = true;
+        this.loadingTimeline = true;
+        this.orderService.timeline(this.id).subscribe({
+            next: (res) => {
+                this.timelineData = res.data;
+                this.loadingTimeline = false;
+            },
+            error: (error) => {
+                this.loadingTimeline = false;
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", 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      <div>\n        @if (order.status === 'CREATED') {\n          <div class=\"text-orange-600 font-bold\">\u652F\u4ED8\u5012\u8BA1\u65F6: {{ countDown }}</div>\n        }\n      </div>\n      <div>\n        <div>\n          @if (course$ | async; as course) {\n            <div class=\"text-lg py-3\">\u8BFE\u7A0B\u4FE1\u606F</div>\n            <rolatech-order-course-item [routerLink]=\"['/courses/', course.id]\" [course]=\"course\"></rolatech-order-course-item>\n          } @else {\n            <div class=\"text-lg py-3\">\u5546\u54C1\u4FE1\u606F</div>\n            @for (item of order.items; track $index) {\n              <!-- [description]=\"variant.options | options\"\n                [thumbnail]=\"variant.media ? variant.media[0].url + '!w200' : product.media[0].url + '!w200'\" -->\n              <rolatech-order-product-item\n                [thumbnail]=\"item.media[0].url + '!w200 '\"\n                [routerLink]=\"['/products/', item.productId]\"\n                [title]=\"item.name\"\n                [total]=\"item.total\"\n                [quantity]=\"item.quantity\"\n              ></rolatech-order-product-item>\n            }\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 }}</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=\"assets/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 class=\"underline text-sm underline-offset-4 mr-6 cursor-pointer hover:text-orange-400\" (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-gray-400\">{{ 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: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { 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: OrderCourseItemComponent, selector: "rolatech-order-course-item", inputs: ["course"] }, { kind: "component", type: OrderProductItemComponent, selector: "rolatech-order-product-item", inputs: ["thumbnail", "title", "description", "quantity", "total"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-order-detail', standalone: true, imports: [
+                        MatButtonModule,
+                        MatIconModule,
+                        RouterLink,
+                        NgClass,
+                        AsyncPipe,
+                        SpinnerComponent,
+                        ContainerComponent,
+                        ThumbnailComponent,
+                        ToolbarComponent,
+                        TitleComponent,
+                        OrderCourseItemComponent,
+                        OrderProductItemComponent,
+                        OrderVariantItemComponent,
+                    ], 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      <div>\n        @if (order.status === 'CREATED') {\n          <div class=\"text-orange-600 font-bold\">\u652F\u4ED8\u5012\u8BA1\u65F6: {{ countDown }}</div>\n        }\n      </div>\n      <div>\n        <div>\n          @if (course$ | async; as course) {\n            <div class=\"text-lg py-3\">\u8BFE\u7A0B\u4FE1\u606F</div>\n            <rolatech-order-course-item [routerLink]=\"['/courses/', course.id]\" [course]=\"course\"></rolatech-order-course-item>\n          } @else {\n            <div class=\"text-lg py-3\">\u5546\u54C1\u4FE1\u606F</div>\n            @for (item of order.items; track $index) {\n              <!-- [description]=\"variant.options | options\"\n                [thumbnail]=\"variant.media ? variant.media[0].url + '!w200' : product.media[0].url + '!w200'\" -->\n              <rolatech-order-product-item\n                [thumbnail]=\"item.media[0].url + '!w200 '\"\n                [routerLink]=\"['/products/', item.productId]\"\n                [title]=\"item.name\"\n                [total]=\"item.total\"\n                [quantity]=\"item.quantity\"\n              ></rolatech-order-product-item>\n            }\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 }}</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=\"assets/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 class=\"underline text-sm underline-offset-4 mr-6 cursor-pointer hover:text-orange-400\" (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-gray-400\">{{ 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" }]
+        }] });
+
+class OrderQrcodepayComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.status = OrderStatus;
+        this.orderService = inject(OrderService);
+        this.renderer = inject(Renderer2);
+        this.needPay = true;
+        this.qrcElement = viewChild.required('qrcode');
+    }
+    ngOnInit() {
+        this.getOrder();
+    }
+    getOrder() {
+        this.orderService.get(this.id).subscribe({
+            next: (res) => {
+                this.order = res.data;
+                this.needPay = this.order.status.toString() === 'CREATED';
+                if (this.needPay) {
+                    this.getQRCodeUrl();
+                }
+            },
+        });
+    }
+    getQRCodeUrl() {
+        this.orderService.pay(this.id).subscribe({
+            next: (res) => {
+                this.genQRCode(res.data.qrCodeUrl);
+            },
+        });
+    }
+    genQRCode(url) {
+        const element = this.renderer.createElement('canvas');
+        this.toCanvas(element, url)
+            .then(() => {
+            this.renderElement(element);
+        })
+            .catch((e) => {
+            this.removeElementChildren();
+        });
+    }
+    toCanvas(canvas, url) {
+        return QRCode.toCanvas(canvas, url, {
+            errorCorrectionLevel: 'M',
+            width: 200,
+        });
+    }
+    renderElement(element) {
+        this.removeElementChildren();
+        this.renderer.appendChild(this.qrcElement().nativeElement, element);
+    }
+    removeElementChildren() {
+        for (const node of this.qrcElement().nativeElement.childNodes) {
+            this.renderer.removeChild(this.qrcElement().nativeElement, node);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderQrcodepayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: OrderQrcodepayComponent, isStandalone: true, selector: "rolatech-order-qrcodepay", viewQueries: [{ propertyName: "qrcElement", first: true, predicate: ["qrcode"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (order) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[order.status]\" link=\"../\" large></rolatech-toolbar>\n    <div>\n      <div>\n        <a class=\"text-orange-600\" routerLink=\"..\"\n          ><span>\u8BA2\u5355: </span><span class=\"underline\">#{{ this.id }}</span></a\n        >\n      </div>\n      <div class=\"mt-6\">\n        @if (needPay) {\n          <div>\n            <div>\u8BF7\u4F7F\u7528\u5FAE\u4FE1\u626B\u7801\u652F\u4ED8, \u6211\u4EEC\u4F1A\u5728\u6536\u5230\u4ED8\u6B3E\u540E\u5904\u7406\u60A8\u7684\u8BA2\u5355</div>\n            <div class=\"w-52 h-56 flex flex-col justify-end items-center\">\n              <div #qrcode></div>\n              <span class=\"text-md\">\u5FAE\u4FE1\u652F\u4ED8\u4E8C\u7EF4\u7801</span>\n            </div>\n          </div>\n        } @else {\n          <div>\u8BF7\u786E\u8BA4\u5F53\u524D\u8BA2\u5355\u72B6\u6001, \u5982\u5DF2\u7ECF\u4ED8\u6B3E, \u8BF7\u8FD4\u56DE\u67E5\u770B</div>\n        }\n      </div>\n    </div>\n  </rolatech-container>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderQrcodepayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-order-qrcodepay', standalone: true, imports: [RouterLink, ContainerComponent, ToolbarComponent], template: "@if (order) {\n  <rolatech-container>\n    <rolatech-toolbar [title]=\"status[order.status]\" link=\"../\" large></rolatech-toolbar>\n    <div>\n      <div>\n        <a class=\"text-orange-600\" routerLink=\"..\"\n          ><span>\u8BA2\u5355: </span><span class=\"underline\">#{{ this.id }}</span></a\n        >\n      </div>\n      <div class=\"mt-6\">\n        @if (needPay) {\n          <div>\n            <div>\u8BF7\u4F7F\u7528\u5FAE\u4FE1\u626B\u7801\u652F\u4ED8, \u6211\u4EEC\u4F1A\u5728\u6536\u5230\u4ED8\u6B3E\u540E\u5904\u7406\u60A8\u7684\u8BA2\u5355</div>\n            <div class=\"w-52 h-56 flex flex-col justify-end items-center\">\n              <div #qrcode></div>\n              <span class=\"text-md\">\u5FAE\u4FE1\u652F\u4ED8\u4E8C\u7EF4\u7801</span>\n            </div>\n          </div>\n        } @else {\n          <div>\u8BF7\u786E\u8BA4\u5F53\u524D\u8BA2\u5355\u72B6\u6001, \u5982\u5DF2\u7ECF\u4ED8\u6B3E, \u8BF7\u8FD4\u56DE\u67E5\u770B</div>\n        }\n      </div>\n    </div>\n  </rolatech-container>\n}\n" }]
+        }] });
+
+const orderRoutes = [
+    {
+        path: '',
+        component: OrderIndexComponent,
+    },
+    {
+        path: ':id',
+        component: OrderDetailComponent,
+    },
+    {
+        path: ':id/qrcodepay',
+        component: OrderQrcodepayComponent,
+    },
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { OrderItemStatus, OrderPayoutStatus, OrderPayoutType, OrderReturnStatus, OrderStatus, OrderTimelineStatus, OrderType, orderRoutes };
+//# sourceMappingURL=rolatech-angular-order.mjs.map