npm package: @hbird-page/sales-management
Description: - [@hbird-page/sales-management 目录结构](#@hbird-page/sales-management-目录结构)  - [@hbird-page/sales-management/sales 引入销售页面至项目中](#@hbird-page/sales-management/sales-引入销售页面至项目中)  - [替换销售页面预设Controller](#替换销售页面预设Controller)  - [替换销售页面局部组件](#替换销售页面局部组件)
Author: tt-npm-jz
Latest version: 3.5.0-RC1-wfj.14

# 目录
 - [@hbird-page/sales-management 目录结构](#@hbird-page/sales-management-目录结构)
 - [@hbird-page/sales-management/sales 引入销售页面至项目中](#@hbird-page/sales-management/sales-引入销售页面至项目中)
 - [替换销售页面预设Controller](#替换销售页面预设Controller)
 - [替换销售页面局部组件](#替换销售页面局部组件)

# @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提供的相关页面，范例中的路由配置路径是不可随意改动的，可能导致导航服务进行路由跳转时找不到页面。如以下范例：

```typescript
// 项目 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。
```typescript
// 项目 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'`路径，如以下内容范例。
```typescript
// 项目的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`)
```typescript
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`)。
```typescript
// 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
```typescript
// 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`)进行局部替换
```html
<!-- 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`
```typescript
// 项目 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`)。
```typescript

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。在这个步骤中需要引用以下内容

 1. ProjectVipInfoModule
 2. HBirdSalesVipLoginVipInfoController
 3. VipInfoModule (Provide selector: `hb-vip-info`)
 4. HBirdSalesVipLoginPageModule(Provide selector: `hb-vip-login-page`)

```typescript
// 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
```typescript
// 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`)进行局部替换
```html
<!-- 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`
```typescript
// 项目 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) { }
}
```