首年销售佣金页面

src/app/my/my-routing.module.ts

@@ -50,6 +50,7 @@ import { EmployeeSalaryComponent } from './application-process/employee-salary/e
 import { HistoricalRankComponent } from './historical-rank/historical-rank.component';
 import { HistoricalRankComponent } from './historical-rank/historical-rank.component';
 import { TeamAreaPanelComponent } from './team-area-panel/team-area-panel.component';
 import { TeamAreaPanelComponent } from './team-area-panel/team-area-panel.component';
 import { SalaryDetailComponent } from './salary-detail/salary-detail.component';
 import { SalaryDetailComponent } from './salary-detail/salary-detail.component';
+import { SalaryFirstYearComponent } from './salary-first-year/salary-first-year.component';
 
 
 const myRoutes: Routes = [
 const myRoutes: Routes = [
   { path: '', component: MyCenterHomeComponent, canActivate: [AuthGuard], data: [{ title: '银盾保险经纪 - 工作台' }] },
   { path: '', component: MyCenterHomeComponent, canActivate: [AuthGuard], data: [{ title: '银盾保险经纪 - 工作台' }] },
@@ -106,7 +107,9 @@ const myRoutes: Routes = [
   { path: 'suggestion',component:SuggestionComponent,data: [{ title: '问题反馈' }],canActivate:[AuthGuard]},
   { path: 'suggestion',component:SuggestionComponent,data: [{ title: '问题反馈' }],canActivate:[AuthGuard]},
   { path: 'historical_rank', component: HistoricalRankComponent, canActivate: [AuthGuard] },
   { path: 'historical_rank', component: HistoricalRankComponent, canActivate: [AuthGuard] },
   { path: 'team_area',component:TeamAreaPanelComponent, canActivate: [AuthGuard]},
   { path: 'team_area',component:TeamAreaPanelComponent, canActivate: [AuthGuard]},
-  { path: 'salary_detail',component:SalaryDetailComponent,canActivate:[AuthGuard]}
+  { path: 'salary_detail',component:SalaryDetailComponent,canActivate:[AuthGuard]},
+  { path: 'salary_detail/:id',component:SalaryFirstYearComponent,canActivate:[AuthGuard]}
+
 ];
 ];
 
 
 @NgModule({
 @NgModule({

src/app/my/my.module.ts

@@ -60,9 +60,10 @@ import { EmployeeSalaryComponent } from './application-process/employee-salary/e
 import { HistoricalRankComponent } from './historical-rank/historical-rank.component';
 import { HistoricalRankComponent } from './historical-rank/historical-rank.component';
 import { TeamAreaPanelComponent } from './team-area-panel/team-area-panel.component';
 import { TeamAreaPanelComponent } from './team-area-panel/team-area-panel.component';
 import { SalaryDetailComponent } from './salary-detail/salary-detail.component';
 import { SalaryDetailComponent } from './salary-detail/salary-detail.component';
+import { SalaryFirstYearComponent } from './salary-first-year/salary-first-year.component';
 
 
 @NgModule({
 @NgModule({
-  declarations: [MyCenterHomeComponent, MkMaterialComponent, MkMaterialDetailComponent, FileUploadComponent, ImportantAnnouncementComponent, SalesDetailComponent, AnnouncementDetailComponent, MyBusinessComponent, MyBusinessDetailComponent, PickerComponent, MyToastComponent, SalesRankComponent, TeamRankComponent, RecruitingComponent, RecruitingDetailComponent, ThanksComponent, MySettingComponent, MySettingDetailComponent, MyNewsComponent, MyTargetComponent, TeamPanelComponent, SwitchNumberPipe, TeamSalesScoreComponent, ScoreDetailsComponent, BusinessCardComponent, OrderDetailComponent, SalaryComponent, TodoListComponent, AddTaskComponent, MedicalServiceComponent, InvitationComponent, RegisterComponent, EmployeeInfoComponent, EmployeeBasicInfoComponent, WorkExperienceComponent, PersonalPhotosComponent, EmployeeIdCardComponent, EmployeeEducationComponent, PersonalStatementComponent, SignatureComponent, EmployeeSubmitComponent, BankCardComponent, MemberDetailComponent, ApprovalListComponent, ApprovalCommentsComponent, ApprovalResultListComponent, MyApplicationComponent, SuggestionComponent, EmployeeSalaryComponent, HistoricalRankComponent, TeamAreaPanelComponent, SalaryDetailComponent],
+  declarations: [MyCenterHomeComponent, MkMaterialComponent, MkMaterialDetailComponent, FileUploadComponent, ImportantAnnouncementComponent, SalesDetailComponent, AnnouncementDetailComponent, MyBusinessComponent, MyBusinessDetailComponent, PickerComponent, MyToastComponent, SalesRankComponent, TeamRankComponent, RecruitingComponent, RecruitingDetailComponent, ThanksComponent, MySettingComponent, MySettingDetailComponent, MyNewsComponent, MyTargetComponent, TeamPanelComponent, SwitchNumberPipe, TeamSalesScoreComponent, ScoreDetailsComponent, BusinessCardComponent, OrderDetailComponent, SalaryComponent, TodoListComponent, AddTaskComponent, MedicalServiceComponent, InvitationComponent, RegisterComponent, EmployeeInfoComponent, EmployeeBasicInfoComponent, WorkExperienceComponent, PersonalPhotosComponent, EmployeeIdCardComponent, EmployeeEducationComponent, PersonalStatementComponent, SignatureComponent, EmployeeSubmitComponent, BankCardComponent, MemberDetailComponent, ApprovalListComponent, ApprovalCommentsComponent, ApprovalResultListComponent, MyApplicationComponent, SuggestionComponent, EmployeeSalaryComponent, HistoricalRankComponent, TeamAreaPanelComponent, SalaryDetailComponent, SalaryFirstYearComponent],
   imports: [
   imports: [
     CommonModule,
     CommonModule,
     LifeCommonModule,
     LifeCommonModule,

src/app/my/salary-detail/salary-detail.component.html

@@ -13,7 +13,7 @@
       <div class="item">
       <div class="item">
         <div class="title">个人销售(A)</div>
         <div class="title">个人销售(A)</div>
         <div class="item_detail">
         <div class="item_detail">
-          <a style="color:#2c67a0;">首年度销售佣金</a>
+          <a style="color:#2c67a0;" (click)="jumpToFirstYearSales()">首年度销售佣金</a>
           <span class="red">18,505.00</span>
           <span class="red">18,505.00</span>
         </div>
         </div>
         <div class="item_detail">
         <div class="item_detail">

src/app/my/salary-detail/salary-detail.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { LifeCommonService } from '../../common/life-common.service';
 import { LifeCommonService } from '../../common/life-common.service';
 import { ActivatedRoute,Router } from "@angular/router";
 import { ActivatedRoute,Router } from "@angular/router";
 
 
+
 @Component({
 @Component({
   selector: 'ydlife-salary-detail',
   selector: 'ydlife-salary-detail',
   templateUrl: './salary-detail.component.html',
   templateUrl: './salary-detail.component.html',
@@ -10,7 +11,9 @@ import { ActivatedRoute,Router } from "@angular/router";
 export class SalaryDetailComponent implements OnInit {
 export class SalaryDetailComponent implements OnInit {
   monDtlPeriod:string;
   monDtlPeriod:string;
   takFlag:boolean = false;
   takFlag:boolean = false;
-  constructor(public lifeCommonService: LifeCommonService,private activatedRoute: ActivatedRoute) { }
+  constructor(public lifeCommonService: LifeCommonService,
+    private activatedRoute: ActivatedRoute,
+    private router:Router) { }
 
 
   ngOnInit() {
   ngOnInit() {
     this.monDtlPeriod = this.activatedRoute.snapshot.queryParams.monDtlPeriod?this.activatedRoute.snapshot.queryParams.monDtlPeriod:null;
     this.monDtlPeriod = this.activatedRoute.snapshot.queryParams.monDtlPeriod?this.activatedRoute.snapshot.queryParams.monDtlPeriod:null;
@@ -21,4 +24,9 @@ export class SalaryDetailComponent implements OnInit {
     this.takFlag = true;
     this.takFlag = true;
     console.log(this.takFlag)
     console.log(this.takFlag)
   }
   }
+
+  jumpToFirstYearSales(){
+    this.router.navigate([`/salary_detail/${this.monDtlPeriod}`]);
+
+  }
 }
 }

src/app/my/salary-first-year/salary-first-year.component.html

+<div class="wrapper">
+  <div class="header">
+    <div class="iconfont icon-fanhui"></div>
+    <div>首年销售奖金</div>
+  </div>
+</div>

src/app/my/salary-first-year/salary-first-year.component.scss

+.wrapper{
+    background: #f6f6f6;
+    min-height: 100%;
+    .header{
+        padding:15px;
+        color: #fff;
+        background: #1b5b99;
+        display: flex;
+        align-items: baseline;
+        div:nth-child(1){
+            width: 36%;
+        }
+        div:nth-child(2){
+            width: 74%;
+            font-size: 20px;
+        }
+    }
+}
\ No newline at end of file

src/app/my/salary-first-year/salary-first-year.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SalaryFirstYearComponent } from './salary-first-year.component';
+
+describe('SalaryFirstYearComponent', () => {
+  let component: SalaryFirstYearComponent;
+  let fixture: ComponentFixture<SalaryFirstYearComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SalaryFirstYearComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SalaryFirstYearComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/my/salary-first-year/salary-first-year.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ydlife-salary-first-year',
+  templateUrl: './salary-first-year.component.html',
+  styleUrls: ['./salary-first-year.component.scss']
+})
+export class SalaryFirstYearComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}