薪资单跳转详情

src/app/common/detail-modal/detail-modal.component.html

+<!--弹窗Starts-->
+<div class="detailContent defineFixed" *ngIf="isOpen">
+  <!-- 其他应税项目模板-->
+  <div class="detailBox" *ngIf="application===1">
+    <div class="header">
+      <div></div>
+      <h5>其他应税加扣款</h5>
+      <div class="closeModal cursor" (click)="closeModal()">&times;</div>
+    </div>
+  </div>
+  <!-- 其他应税项目模板-->
+  <!--个人所得税政策模板-->
+  <div class="detailBox" *ngIf="application===2">
+    <div class="header">
+      <div></div>
+      <h5>个人所得税政策</h5>
+      <div class="closeModal cursor" (click)="closeModal()">&times;</div>
+    </div>
+  </div>
+
+</div>
+<!--弹窗结束-->

src/app/common/detail-modal/detail-modal.component.scss

+.detailContent {
+    top: 0;
+    height: 100%;
+    background: rgba(0,0,0,.5);
+    z-index: 3004;
+    .detailBox {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 70%;
+      background-color: #fff;
+      overflow-y: scroll;
+      animation: slowUp .5s ease both;
+      .header {
+        position: relative;
+        width: 100%;
+        height: 48px;
+        line-height: 48px;
+        padding-right: 15px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        h5 {
+          font-size: 16px;
+          color: #000;
+        }
+        .closeModal {
+          color: #8a8a8a;
+          font-size: 32px;
+        }
+      }
+      .header:after {
+        position: absolute;
+        left: 0;
+        bottom: 1px;
+        width: 100%;
+        content: '';
+        height: 1px;
+        background-color: #dcdcdc;
+        transform: scaleY(0.5);
+      }
+      h4 {
+        color: #ec2d37;
+        font-weight: bold;
+      }
+      .body {
+        padding: 10px 15px 0 15px;
+        > ul {
+          > li {
+            height: 34px;
+            line-height: 34px;
+            letter-spacing: 1px;
+            display: flex;
+            justify-content: space-between;
+          }
+        }
+  
+      }
+    }
+  }
+.defineFixed{
+    position: fixed;
+    left: 0;
+    right: 0;
+    min-width: 320px;
+    max-width: 640px;
+    width: 100%;
+    margin: 0 auto;
+}
+  
+  
+  
\ No newline at end of file

src/app/common/detail-modal/detail-modal.component.spec.ts

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

src/app/common/detail-modal/detail-modal.component.ts

+import { Component, OnInit, Input, Output,EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'ydlife-detail-modal',
+  templateUrl: './detail-modal.component.html',
+  styleUrls: ['./detail-modal.component.scss']
+})
+export class DetailModalComponent implements OnInit {
+ // application:1其他应税项目，2为个人所得税政策
+ @Input() application: number;
+ @Output() closeDetailModal = new EventEmitter();
+ isOpen: boolean;
+  constructor() {
+    this.isOpen = true;
+   }
+
+  ngOnInit() {
+  }
+
+  //   关闭弹窗
+  closeModal() {
+    this.isOpen = false;
+    this.closeDetailModal.emit();
+  }
+
+}

src/app/my/my.module.ts

@@ -66,8 +66,10 @@ import { UEditorModule } from 'ngx-ueditor';
 import { ArticleReadComponent } from './article-read/article-read.component';
 import { SalaryDetailComponent } from './salary-detail/salary-detail.component';
 import { SalaryFirstYearComponent } from './salary-first-year/salary-first-year.component';
+import { DetailModalComponent } from '../common/detail-modal/detail-modal.component';
+
 @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, ArticleComponent, ArticleDetailComponent, ArticleReadComponent,SalaryDetailComponent,SalaryFirstYearComponent],
+  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, ArticleComponent, ArticleDetailComponent, ArticleReadComponent,SalaryDetailComponent,SalaryFirstYearComponent,DetailModalComponent],
   imports: [
     CommonModule,
     LifeCommonModule,

src/app/my/my.service.ts

@@ -611,9 +611,8 @@ export class MyService {
    * 获取微信用户的详细信息
    */
     getWxUserInfo(trackId) {
-      const url = this.API + '/getWxUserInfo';
-      const cs = {trackId:trackId};
-      return this.http.post(url, cs).pipe((res)=>{
+      const url = this.API + '/getSnsApiUserInfo?trackId=' + trackId;
+      return this.http.get(url).pipe((res)=>{
         return res;
       });
     }

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

@@ -14,35 +14,37 @@
     <div class="part">
       <div class="item">
         <div class="title">个人销售(A)</div>
-        <div class="item_detail">
-          <a style="color:#2c67a0;" (click)="jumpToFirstYearSales()">首年度销售佣金</a>
-          <span class="red">18,505.00</span>
+        <div class="item_detail" (click)="jumpToFirstYearSales(1)">
+          <span>首年度销售佣金</span>
+          <span class="red">18,505.00 <i class="iconfont icon-ar-r"></i> </span>
         </div>
-        <div class="item_detail">
+        <div class="item_detail" (click)="jumpToFirstYearSales(2)">
           <span>续年度销售佣金</span>
-          <span class="red">225.00</span>
+          <span class="red">225.00 <i class="iconfont icon-ar-r"></i></span>
         </div>
       </div>
       <div class="item">
         <div class="title">销售管理(B)</div>
-        <div class="item_detail">
+        <div class="item_detail" (click)="jumpToFirstYearSales(3)">
           <span>首年度辅导奖金</span>
-          <span class="red">18,505.00</span>
+          <span class="red">18,505.00 <i class="iconfont icon-ar-r"></i></span>
         </div>
-        <div class="item_detail">
+        <div class="item_detail" (click)="jumpToFirstYearSales(4)">
           <span>续年度辅导奖金</span>
-          <span class="red">225.00</span>
+          <span class="red">225.00 <i class="iconfont icon-ar-r"></i></span>
         </div>
-        <div class="item_detail">
+        <div class="item_detail" (click)="jumpToFirstYearSales(5)">
           <span>特别管理奖金</span>
-          <span class="red">225.00</span>
+          <span class="red">225.00 <i class="iconfont icon-ar-r"></i></span>
         </div>
       </div>
       <div class="item">
-        <div class="title">其他应税项目(C)</div>
-        <div class="item_detail">
+        <div class="title" style="justify-content: inherit;" (click)="toastShow = true">
+          其他应税项目(C)
+          <span class="iconfont icon-wenhao" style="margin-top: 3px;color: #f8002e;margin-left: 3px;"></span></div>
+        <div class="item_detail" (click)="jumpToFirstYearSales(6)">
           <span>其他应税加扣款</span>
-          <span class="red">225.00</span>
+          <span class="red">225.00<i class="iconfont icon-ar-r"></i></span>
         </div>
       </div>
       <div class="item">
@@ -70,13 +72,18 @@
     </div>
     <a style="color:#2c67a0;" (click)="lookTak()">点击查看个人所得税明细</a>
   </div>
+  <!--保险公司介绍弹窗-->
+  <div *ngIf="toastShow">
+    <ydlife-detail-modal [application]="1"
+      (closeDetailModal)="toastShow = false"></ydlife-detail-modal>
+  </div>
 </div>
 <div class="mask" *ngIf="takFlag == true;"></div>
 <div class="tax_mask" *ngIf="takFlag == true;">
   <div class="close" (click)="takFlag = false;"> X </div>
   <div class="mask_title">
     <div>个人所得税预扣明细</div>
-    <div><span class="iconfont icon-zhuyishixiang"></span> 个人所得税政策</div>
+    <div (click)="toastShow = true"><span class="iconfont icon-zhuyishixiang"></span> 个人所得税政策</div>
   </div>
   <div class="tax_content">
     <div class="tax_item">

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

@@ -52,8 +52,15 @@
                     justify-content: space-between;
                     align-items: center;
                     height: 30px;
-                    padding-left: 15px;
-                }  
+                    margin-left: 15px;
+                    border-bottom: 1px #f4f4f4 solid;
+                    .iconfont{
+                        font-size: 14px;
+                    }
+                }
+                .item_detail:last-child{
+                    border-bottom:0;
+                } 
                 .red{
                     color:#f8002e;
                     font-weight: bold;

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

@@ -11,6 +11,7 @@ import { ActivatedRoute,Router } from "@angular/router";
 export class SalaryDetailComponent implements OnInit {
   monDtlPeriod:string;
   takFlag:boolean = false;
+  toastShow:boolean;
   constructor(public lifeCommonService: LifeCommonService,
     private activatedRoute: ActivatedRoute,
     private router:Router) { }
@@ -22,11 +23,20 @@ export class SalaryDetailComponent implements OnInit {
 
   lookTak(){
     this.takFlag = true;
-    console.log(this.takFlag)
   }
 
-  jumpToFirstYearSales(){
-    this.router.navigate([`/salary_detail/${this.monDtlPeriod}`]);
+  /**
+   * 
+   * @param type 
+   * 1.首年度销售佣金
+   * 2.续年度销售佣金
+   * 3.首年度辅导奖金
+   * 4.续年度辅导奖金
+   * 5.特别管理奖金
+   * 6.其他应税加扣款
+   */
+  jumpToFirstYearSales(type){
+    this.router.navigate([`/salary_detail/${this.monDtlPeriod}`],{queryParams:{type:type}});
 
   }
 }

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 class="iconfont icon-fanhui" (click)="goBack()"></div>
+    <div>{{getTitleName(type)}}</div>
   </div>
   <div class="content_wrapper">
     <div class="policy_item">
@@ -11,10 +11,16 @@
         <div>保险公司:复星</div>
         <div>生效时间:2021-03-07</div>
         <div>保单号:1234567</div>
+        <div *ngIf="status">保费：</div>
+        <div *ngIf="status">FYC：</div>
+        <div *ngIf="status">职阶率：</div>
+        <div *ngIf="status">体系：</div>
+        <div *ngIf="status">经纪人：</div>
       </div>
       <div class="money" (click)="status = !status">
         ￥3,750.00 
-          <div style="width: 15px;height: 15px;position: absolute;right: -15px;top: 8px;" [ngStyle]="{'transform': status ? 'rotate(0)' : 'rotate(180deg)'}">
+          <div style="width: 15px;height: 15px;position: absolute;right: -20px;top: 8px;" 
+          [ngStyle]="{'transform': status ? 'rotate(0)' : 'rotate(180deg)','top':status?'0':'8px'}">
             <span class="iconfont icon-xiangxia" ></span>
           </div>
       </div>

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

 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute,Router } from "@angular/router";
 
 @Component({
   selector: 'ydlife-salary-first-year',
@@ -7,9 +8,34 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SalaryFirstYearComponent implements OnInit {
   status:boolean;
-  constructor() { }
+  type:any;
+  constructor(private activatedRoute: ActivatedRoute) { }
 
   ngOnInit() {
+    this.type = this.activatedRoute.snapshot.queryParams.type?this.activatedRoute.snapshot.queryParams.type:null;
   }
 
+  goBack(){
+    history.go(-1);
+  }
+
+  getTitleName(type){
+    switch (type){
+      case '1':
+        return '首年度销售佣金';
+      case '2':
+        return '续年度销售佣金';
+      case '3':
+        return '首年度辅导奖金';
+      case '4':
+        return '续年度辅导奖金';
+      case '5':
+        return '特别管理奖金';
+      case '6':
+        return '其他应税加扣款';
+      default :
+        return '/'
+
+    }
+  }
 }

src/app/my/salary/salary.component.scss

@@ -37,7 +37,7 @@
               height: 35px;
               position: absolute;
               left: 13px;
-              top: 13px;
+              top: 15px;
               line-height: 30px;
               text-align: center;
               border-radius: 50%;