@hbird-page/sales-management

v3.5.0-RC1-wfj.14

Published

a month ago

- [@hbird-page/sales-management 目录结构](#@hbird-page/sales-management-目录结构) - [@hbird-page/sales-management/sales 引入销售页面至项目中](#@hbird-page/sales-management/sales-引入销售页面至项目中) - [替换销售页面预设Controller](#替换销售页面预设Controller) - [替换销售页面局部组件](#替换销售页面局部组件)

Downloads

0High
0Medium
0Low

myls

tt-npm-jz

@hbird-page/sales-management 目录结构

assets 销售相关页面的预设图示
components 销售(VIP登入、商品选择、支付、订单详情)1920x1080 UI组件
mobile-components 销售(VIP登入、商品选择、支付、订单详情)720x1280 UI组件
mobile-order-detail 720x1280 订单详情页面
mobile-order-list 720x1280 订单列表页面
mobile-retail-sales 720x1280 零售销售
1. 包含以下页面
  - home-page VIP和商品选择页面
  - checkout-page 支付页面
  - revoke-detail-page 取消退货
  - complete-detail-page 订单详情页面
order-detail 1920x1080 订单详情页面
order-list 1920x1080 订单列表页面
pipes 共用Pipe组件
provider 共用的服务提供商
sales 1920x1080 销售(百货/零售)
1. 包含以下页面
  - cache-order-page 订单占存页面
  - checkout-page 支付页面
  - complete-detail-page 订单完结详情页面
  - mall-product-list-page 百货版商品选择页面
  - retail-product-list-page 零售版商品选择页面
  - vip-login-page VIP登入页面

@hbird-page/sales-management/sales 引入销售页面至项目中

Step 1：

在项目中定义好一个销售页面的模块(project-sales.module.ts)，并配置@hbird-page/sales-management/sales提供的相关页面，范例中的路由配置路径是不可随意改动的，可能导致导航服务进行路由跳转时找不到页面。如以下范例：

// 项目 project-sales.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HBirdSalesCacheOrderPageComponent, HBirdSalesCacheOrderPageModule, HBirdSalesCheckoutPageComponent, HBirdSalesCheckoutPageModule, HBirdSalesCompleteDetailPageComponent, HBirdSalesCompleteDetailPageModule, HBirdSalesMallProductListPageComponent, HBirdSalesMallProductListPageModule, HBirdSalesModule, HBirdSalesRetailProductListPageComponent, HBirdSalesRetailProductListPageModule, HBirdSalesService, HBirdSalesTranslationLoader, HBirdSalesVipLoginPageComponent, HBirdSalesVipLoginPageModule } from '@hbird-page/sales-management/sales';
import { POINT_HTTP_PROVIDER, VIP_INFO_PROVIDER } from '@hbird/core';

@NgModule({
    imports: [
        HBirdSalesModule,
        HBirdSalesVipLoginPageModule,
        HBirdSalesRetailProductListPageModule,
        HBirdSalesMallProductListPageModule,
        HBirdSalesCompleteDetailPageModule,
        HBirdSalesCheckoutPageModule,
        HBirdSalesCacheOrderPageModule,
        RouterModule.forChild([
            { path: '', redirectTo: 'vip-login', pathMatch: 'full' },
            { path: 'vip-login', component: HBirdSalesVipLoginPageComponent },
            { path: 'retail-product-list', component: HBirdSalesRetailProductListPageComponent },
            { path: 'mall-product-list', component: HBirdSalesMallProductListPageComponent },
            { path: 'cache-order', component: HBirdSalesCacheOrderPageComponent },
            { path: 'checkout', component: HBirdSalesCheckoutPageComponent },
            { path: 'complete-detail', component: HBirdSalesCompleteDetailPageComponent },
        ]),
    ],
    providers: [
        { provide: VIP_INFO_PROVIDER, useExisting: /** 需要项目实做VIP服务 */ },
        { provide: POINT_HTTP_PROVIDER, useExisting: /** 需要项目实作HTTP服务*/ },
        HBirdSalesService,
        HBirdSalesTranslationLoader,
    ],
})
export class ProjectSalesModule {
    constructor(traslationLoader: HBirdSalesTranslationLoader) { }
}

注意:需要实做VIP_INFO_PROVIDER、POINT_HTTP_PROVIDER这两个服务提供上并在此module中提供注入。

Step 2：

将project-sales.module.ts注册到router的'sales'这个路径之中(该路径不可配置为'sale'，因导行服务HBirdSalesNavigator在页面跳转时会发生错误)，且将HBirdSalesService作为Resolver会将进入销售页面做好服务与相关的数据初始化。并将该路由定义在以下project-sales-routing.module.ts。

// 项目 project-sales-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HBirdSalesService, HBIRD_SALES_NAVIGATION } from '@hbird-page/sales-management/sales';
import { VIP_INFO_PROVIDER } from '@hbird/core';

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: 'sales',
                loadChildren: () => import('./sales.modue').then((m) => m.ProjectSalesModule),
                resolve: {
                    init: HBirdSalesService,
                },
            },
        ]),
    ],
    providers: [
        { provide: VIP_INFO_PROVIDER, useExisting: /** 项目需要实做该服务 */ },
        HBirdSalesService,

        HBIRD_SALES_NAVIGATION, // 销售页面的导航按钮注册，该token也可放在app.module.ts中统一注册
        HBIRD_RETAIL_SALES_FILL_ORDER_NAVIGATION, // 补登导航按钮
    ],
})
export class ProjectSalesRoutingModule { }

Step 3：

需要确认应用的路由配置是否将'sale'路径重导到'sales'路径，如以下内容范例。

// 项目的app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: 'sale', redirectTo: 'sales', pathMatch: 'full' }, // 需要确认是否有加上该行进行重导
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule {}

替换销售页面预设Controller

Step 1：新建自定义页面

这边透过替换vip-login-page进行举例，先透过angular generate component、module指令生成以下组件内容。并定义项目自定的controller(project-vip-login-board.controller.ts)

src/app/pages/sales/vip-login-page/
    ├── project-vip-login-board.controller.ts
    ├── vip-login-page.components.html
    ├── vip-login-page.components.spec.ts
    ├── vip-login-page.components.scss
    ├── vip-login-page.components.ts
    └── vip-login-page.module.ts

Step 2：引用HBirdSalesVipLoginPageModule及需要替换的组件依赖

替换预设的controller，这里举项目自定了ProjectVipLoginBoardController为例。在范例一中此步骤需要引用ProjectVipLoginBoardController，并引入需要替换的UI预设组件VipLoginBoardModule(provide selector: hb-vip-login-board)。

// vip-login-page.module.ts
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import {
    VipLoginBoardModule,
} from '@hbird-page/sales-management/components';
import { HBirdSalesVipLoginPageModule } from '@hbird-page/sales-management/sales';
import { ProjectVipLoginBoardController } from './vip-login-board.controller';
import { ProjectSalesVipLoginPageComponent } from './vip-login-page.component';
@NgModule({
    declarations: [ProjectSalesVipLoginPageComponent],
    imports: [
        CommonModule,
        VipLoginBoardModule,
        HBirdSalesVipLoginPageModule
    ],
    providers: [
        ProjectVipLoginBoardController
    ],
    exports: [ProjectSalesVipLoginPageComponent],
})
export class ProjectSalesVipLoginPageModule { }

Step 3：引入Controller

// vip-login-page.components.ts
import { Component, OnInit } from '@angular/core';
import { ProjectVipLoginBoardController } from './project-vip-login-board.controller';

@Component({
    selector: 'app-vip-login-page',
    templateUrl: './vip-login-page.component.html',
})
export class ProjectSalesVipLoginPageComponent {
    constructor(
        public vipLoginBoardController: ProjectVipLoginBoardController
    ) { }
}

Step 4：替换Controller

该步骤透过HBirdSalesVipLoginPageComponent组件提供的ng-content的选择器(vipLoginBoard)进行局部替换

<!-- vip-login-page.components.html -->
<hb-vip-login-page>
    <hb-vip-login-board [controller]="vipLoginBoardController" vipLoginBoard></hb-vip-login-board>
</hb-vip-login-page>

Step 5：将项目定义的`ProjectSalesVipLoginPageComponent`取代`HBirdSalesVipLoginPageComponent`

// 项目 project-sales.module.ts
...
import { ProjectSalesVipLoginPageModule } from 'src/app/pages/sales/vip-login-page/vip-login-page.module';
import { ProjectSalesVipLoginPageComponent } from 'src/app/pages/sales/vip-login-page/vip-login-page.component';
@NgModule({
    imports: [
        HBirdSalesModule,
        ProjectSalesVipLoginPageModule,
        // HBirdSalesVipLoginPageModule,
        HBirdSalesRetailProductListPageModule,
        HBirdSalesMallProductListPageModule,
        HBirdSalesCompleteDetailPageModule,
        HBirdSalesCheckoutPageModule,
        HBirdSalesCacheOrderPageModule,
        RouterModule.forChild([
            { path: '', redirectTo: 'vip-login', pathMatch: 'full' },
            { path: 'vip-login', component: ProjectSalesVipLoginPageComponent },
            // { path: 'vip-login', component: HBirdSalesVipLoginPageComponent },
            { path: 'retail-product-list', component: HBirdSalesRetailProductListPageComponent },
            { path: 'mall-product-list', component: HBirdSalesMallProductListPageComponent },
            { path: 'cache-order', component: HBirdSalesCacheOrderPageComponent },
            { path: 'checkout', component: HBirdSalesCheckoutPageComponent },
            { path: 'complete-detail', component: HBirdSalesCompleteDetailPageComponent },
        ]),
    ],
    providers: [
        ...
    ],
})
export class ProjectSalesModule {
    constructor(traslationLoader: HBirdSalesTranslationLoader) { }
}

替换销售页面局部组件

Step 1：新建自定义页面

这边透过替换vip-login-page进行举例，先透过angular generate component、module指令生成以下组件内容。并定义好项目自定的ProjectVipInfoModule、ProjectVipInfoComponent(selector: app-vip-info)。


src/app/
    ├── components/vip-info/
    │   ├── project-vip-info.components.html
    │   ├── project-vip-info.components.spec.ts
    │   ├── project-vip-info.components.scss
    │   ├── project-vip-info.components.ts
    │   └── project-vip-info.module.ts
    └── pages/sales/vip-login-page/
        ├── vip-login-page.components.html
        ├── vip-login-page.components.spec.ts
        ├── vip-login-page.components.scss
        ├── vip-login-page.components.ts
        └── vip-login-page.module.ts

Step 2：引用相关依赖

替换预设的局部component并配置为项目定义组件，但不替换预设的controller。在这个步骤中需要引用以下内容

ProjectVipInfoModule
HBirdSalesVipLoginVipInfoController
VipInfoModule (Provide selector: hb-vip-info)
HBirdSalesVipLoginPageModule(Provide selector: hb-vip-login-page)

// vip-login-page.module.ts
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ProjectVipInfoModule } from 'src/app/components/vip-info/project-vip-info.module.ts';
import { HBirdSalesVipLoginPageModule, HBirdSalesVipLoginVipInfoController } from '@hbird-page/sales-management/sales';
import { ProjectSalesVipLoginPageComponent } from './vip-login-page.component';
@NgModule({
    declarations: [ProjectSalesVipLoginPageComponent],
    imports: [
        CommonModule,
        ProjectVipInfoModule,
        HBirdSalesVipLoginPageModule
    ],
    providers: [
        HBirdSalesVipLoginVipInfoController
    ],
    exports: [ProjectSalesVipLoginPageComponent],
})
export class ProjectSalesVipLoginPageModule { }

Step 3：引入Controller

// vip-login-page.components.ts
import { Component, OnInit } from '@angular/core';
import { HBirdSalesVipLoginVipInfoController } from '@hbird-page/sales-management/sales';

@Component({
    selector: 'app-vip-login-page',
    templateUrl: './vip-login-page.component.html',
})
export class ProjectSalesVipLoginPageComponent {
    constructor(
        public vipInfoController: HBirdSalesVipLoginVipInfoController
    ) { }
}

Step 4：替换Component

该步骤透过HBirdSalesVipLoginPageComponent组件提供的ng-content的选择器(vipInfo)进行局部替换

<!-- vip-login-page.components.html -->
<hb-vip-login-page>
    <app-vip-info [controller]="vipInfoController" vipInfo></app-vip-info>
</hb-vip-login-page>

Step 5：将项目定义的`ProjectSalesVipLoginPageComponent`取代`HBirdSalesVipLoginPageComponent`

// 项目 project-sales.module.ts
...
import { ProjectSalesVipLoginPageModule } from 'src/app/pages/sales/vip-login-page/vip-login-page.module';
import { ProjectSalesVipLoginPageComponent } from 'src/app/pages/sales/vip-login-page/vip-login-page.component';
@NgModule({
    imports: [
        HBirdSalesModule,
        ProjectSalesVipLoginPageModule,
        // HBirdSalesVipLoginPageModule,
        HBirdSalesRetailProductListPageModule,
        HBirdSalesMallProductListPageModule,
        HBirdSalesCompleteDetailPageModule,
        HBirdSalesCheckoutPageModule,
        HBirdSalesCacheOrderPageModule,
        RouterModule.forChild([
            { path: '', redirectTo: 'vip-login', pathMatch: 'full' },
            { path: 'vip-login', component: ProjectSalesVipLoginPageComponent },
            // { path: 'vip-login', component: HBirdSalesVipLoginPageComponent },
            { path: 'retail-product-list', component: HBirdSalesRetailProductListPageComponent },
            { path: 'mall-product-list', component: HBirdSalesMallProductListPageComponent },
            { path: 'cache-order', component: HBirdSalesCacheOrderPageComponent },
            { path: 'checkout', component: HBirdSalesCheckoutPageComponent },
            { path: 'complete-detail', component: HBirdSalesCompleteDetailPageComponent },
        ]),
    ],
    providers: [
        ...
    ],
})
export class ProjectSalesModule {
    constructor(traslationLoader: HBirdSalesTranslationLoader) { }
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

目录

@hbird-page/sales-management 目录结构

@hbird-page/sales-management/sales 引入销售页面至项目中

Step 1：

Step 2：

Step 3：

替换销售页面预设Controller

Step 1：新建自定义页面

Step 2：引用HBirdSalesVipLoginPageModule及需要替换的组件依赖

Step 3：引入Controller

Step 4：替换Controller

Step 5：将项目定义的ProjectSalesVipLoginPageComponent取代HBirdSalesVipLoginPageComponent

替换销售页面局部组件

Step 1：新建自定义页面

Step 2：引用相关依赖

Step 3：引入Controller

Step 4：替换Component

Step 5：将项目定义的ProjectSalesVipLoginPageComponent取代HBirdSalesVipLoginPageComponent

Step 5：将项目定义的`ProjectSalesVipLoginPageComponent`取代`HBirdSalesVipLoginPageComponent`

Step 5：将项目定义的`ProjectSalesVipLoginPageComponent`取代`HBirdSalesVipLoginPageComponent`