我的客户需求开发

src/app/domain/businessQuery.ts

 export class BusinessQuery {
-  constructor(public opportunityId?: any,
-    public age?: string,
+  constructor(
+    public opportunityId?: any,
+    public age?: any,
     public name?: string,
     public gender?: any,
     public mobileNo?: string,

src/app/my/customer-relation/customer-relation.component.html

+<div class="customer_wrapper">
+  <ul class="customer_content" *ngFor="let customerItem of customerList;index as i;">
+    <img src="assets/images/man.png" alt="男" *ngIf="customerItem.gender=='男'">
+    <img src="assets/images/women.png" alt="女" *ngIf="customerItem.gender=='女'">
+    <li>
+      <span>姓名：{{customerItem.name}}</span>
+    </li>
+    <li >
+      <span>被保人关系：{{customerItem.relationType}}</span>
+    </li>
+    <li>
+      <span>生日：{{customerItem.birthDate}}</span>
+    </li>
+    <li>
+      <span>手机号：{{customerItem.mobileNo}}</span>
+    </li>
+  </ul>
+</div>

src/app/my/customer-relation/customer-relation.component.scss

+.customer_wrapper{
+    color: #333;
+    position: relative;
+    .customer_content{
+        border-bottom: 1px #e2e2e2 solid;
+        padding: 10px 15px;
+        li{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 35px;
+            margin-left: 55px;
+        }
+        img{
+            position: absolute;
+            width: 40px;
+        }
+    }
+}
\ No newline at end of file

src/app/my/customer-relation/customer-relation.component.spec.ts

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

src/app/my/customer-relation/customer-relation.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute,Router } from "@angular/router";
+import { MyService } from '../my.service';
+@Component({
+  selector: 'ydlife-customer-relation',
+  templateUrl: './customer-relation.component.html',
+  styleUrls: ['./customer-relation.component.scss']
+})
+export class CustomerRelationComponent implements OnInit {
+  customerList:Array<any>;
+  customerId:any;
+  constructor(private activatedRoute: ActivatedRoute,private myService:MyService) { }
+
+  ngOnInit() {
+    this.customerId = this.activatedRoute.snapshot.queryParams.customerId?this.activatedRoute.snapshot.queryParams.customerId:null;
+    this.queryCustomerInsuredList();
+  }
+
+  queryCustomerInsuredList(){
+    this.myService.queryCustomerInsuredList(this.customerId).subscribe((res)=>{
+      console.log(res)
+      if(res['success']){
+          this.customerList = res['data']['list'];
+      }
+    })
+  }
+}

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

@@ -97,8 +97,20 @@ export class MyBusinessDetailComponent implements OnInit {
       this.maleFlag = true;
       this.femaleFlag = true;
       this.clickFlag = false;
-      //初始化新增
-      this.editBusiness = new BusinessQuery("", "", "", 1, "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", null);
+      let myCustomerInfo = JSON.parse(localStorage.getItem('myCustomerInfo'))
+      if(myCustomerInfo){
+        let birthDate,age;
+        if(myCustomerInfo.birthDate){
+          birthDate = myCustomerInfo.birthDate.split('-');
+          age=this.lifeCommonService.ages(birthDate[0],birthDate[1],birthDate[2]).age;
+        }else{
+          age = null;
+        }
+        this.editBusiness = new BusinessQuery("",age, myCustomerInfo.name,  myCustomerInfo.gender=='女'?2:1, myCustomerInfo.mobileNo, "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", null);
+      }else{
+        //初始化新增
+        this.editBusiness = new BusinessQuery("", "", "", 1, "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", null);
+      }
       this.selectTab(1);
     } else {
       this.clickFlag = true;
@@ -436,7 +448,7 @@ export class MyBusinessDetailComponent implements OnInit {
         this.toastDialog = true;
         this.toastInfo = {
           status: 1,
-          msg: res['success'],
+          msg: res['message'],
           timeout: 3000,
           align: 'center'
         };

src/app/my/my-business/my-business.component.ts

@@ -42,6 +42,8 @@ export class MyBusinessComponent implements OnInit {
   }
 
   addBussiness() {
+    //清空从我的客户带过来的客户信息
+    localStorage.removeItem('myCustomerInfo')
     this.router.navigate(['/business/0']);
   }
 

src/app/my/my-center-home/my-center-home.component.ts

@@ -115,7 +115,7 @@ export class MyCenterHomeComponent implements OnInit, AfterViewInit {
         title: '我的展业',
         content: [
           { no: 12, subtitle: '销售保单', icon: 'policy', path: '', routerLink: '',showSubMenu:true },
-          { no: 20, subtitle: '我的客户', icon: 'customer', path: '', routerLink: '',showSubMenu:true },
+          { no: 20, subtitle: '我的客户', icon: 'customer', path: '', routerLink: 'customer',showSubMenu:true },
           // { no: 14, subtitle: '我的佣金', icon: 'commission', path: '', routerLink: '',showSubMenu:true },
           { no: 19, subtitle: '薪资单', icon: 'salary', path: '', routerLink: 'salary',showSubMenu:this.isShowSalay },
           { no: 21, subtitle: '公司制度', icon: 'management', path: '', routerLink: '',showSubMenu:true },

src/app/my/my-customer-policy/my-customer-policy.component.html

+<div class="customer_wrapper" *ngIf="policyList?.length>0">
+  <ul class="customer_content" *ngFor="let policyItem of policyList;index as i;"
+  [ngClass]="{isActive:policyItem.isValid == '有效'}" (click)="jumpToOrderdetail(policyItem.orderNo)">
+    <li>{{policyItem.productName?policyItem.productName:policyItem.planName}}</li>
+    <li>保单号：{{policyItem.policyNo}}</li>
+    <li>日期：{{policyItem.startDate | date:'yyyy.MM.dd'}} - {{policyItem.endDate | date:'yyyy.MM.dd'}}</li>
+    <img src="assets/images/orderStatus/valid_2.png" alt="有效中" *ngIf="policyItem.isValid == '有效'"/>
+    <img src="assets/images/orderStatus/invalid_2.png" alt="已失效" *ngIf="policyItem.isValid == '无效'"/>
+  </ul>
+</div>
+<div style="padding-top: 50%;font-size: 36px;text-align: center;" *ngIf="policyList?.length==0">
+  暂无保单
+</div>

src/app/my/my-customer-policy/my-customer-policy.component.scss

+.customer_wrapper{
+    color: #333;
+    background: #fff;
+    .customer_content{ 
+        padding: 10px 15px;
+        background: #f1f1f1;
+        margin-bottom: 8px;
+        position: relative;
+        li{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 30px;
+        }
+        img{
+            position: absolute;
+            right: 5%;
+            top: 14%;
+            width: 80px;
+            height: 80px;
+        }
+    }
+    .customer_content.isActive{
+        background: #f8eded;
+    }
+}
\ No newline at end of file

src/app/my/my-customer-policy/my-customer-policy.component.spec.ts

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

src/app/my/my-customer-policy/my-customer-policy.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute,Router } from "@angular/router";
+import { MyService } from '../my.service';
+
+@Component({
+  selector: 'ydlife-my-customer-policy',
+  templateUrl: './my-customer-policy.component.html',
+  styleUrls: ['./my-customer-policy.component.scss']
+})
+export class MyCustomerPolicyComponent implements OnInit {
+  policyList:Array<any>;
+  customerId:any;
+  constructor(private activatedRoute: ActivatedRoute,private myService:MyService,private router:Router) { }
+
+  ngOnInit() {
+    this.customerId = this.activatedRoute.snapshot.queryParams.customerId?this.activatedRoute.snapshot.queryParams.customerId:null;
+    this.queryPolicyListByHolderCustomerId();
+  }
+
+  queryPolicyListByHolderCustomerId(){
+    this.myService.queryPolicyListByHolderCustomerId({holderCustomerId:this.customerId,practitionerCustomerId: JSON.parse(localStorage.getItem('lifeCustomerInfo'))['customerId']}).subscribe((res)=>{
+      if(res['success']){
+          this.policyList = res['data']['list'];
+      }
+    })
+  }
+
+  jumpToOrderdetail(orderNo) {
+      this.router.navigate(['/orderDetail'], { queryParams: { orderNo:orderNo } });
+  }
+}

src/app/my/my-customer/my-customer.component.html

+<div class="customer_wrapper">
+  <ul class="customer_content" *ngFor="let customerItem of customerList;index as i;">
+    <img src="assets/images/man.png" alt="男" *ngIf="customerItem.gender=='男'">
+    <img src="assets/images/women.png" alt="女" *ngIf="customerItem.gender=='女'">
+    <li>
+      <div>
+        <span *ngIf="customerItem.selected">姓名：</span>{{customerItem.name}}
+        <span *ngIf="!customerItem.selected">{{customerItem.mobileNo}}</span>
+      </div>
+      <div class="iconfont icon-ar-r" *ngIf="!customerItem.selected" (click)="customerItem.selected = true"></div>
+      <div class="iconfont icon-xiangxia" *ngIf="customerItem.selected" (click)="customerItem.selected = false"></div>
+    </li>
+    <li *ngIf="customerItem.selected">
+      <span>性别：{{customerItem.gender}}</span>
+    </li>
+    <li *ngIf="customerItem.selected">
+      <span>生日：{{customerItem.birthDate}}</span>
+    </li>
+    <li *ngIf="customerItem.selected">
+      <span>手机号：{{customerItem.mobileNo}}</span>
+    </li>
+    <li class="customer_btn" *ngIf="customerItem.selected">
+      <div (click)="jumpToRelation(customerItem.customerId)">
+        <img src="assets/images/pepple.png" alt="客户关系">
+        <span>客户关系</span>
+      </div>
+      <div (click)="jumpToPolicy(customerItem.customerId)">
+        <img src="assets/images/policy_01.png" alt="保单">
+        <span>查看保单</span>
+      </div>
+      <div (click)="addBussiness(customerItem)">
+        <img src="assets/images/add.png" alt="商机">
+        <span>添加商机</span>
+      </div>
+    </li>
+  </ul>
+  <div *ngIf="customerList?.length ==0" 
+  style="text-align: center;padding-top: 50%;font-size: 36px;">暂无客户</div>
+</div>
\ No newline at end of file

src/app/my/my-customer/my-customer.component.scss

+.customer_wrapper{
+    color: #333;
+    position: relative;
+    .customer_content{
+        border-bottom: 1px #e2e2e2 solid;
+        padding: 10px 15px;
+        li{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 35px;
+            margin-left: 55px;
+        }
+        li.customer_btn{
+            div{
+                width: 30%;
+                height: 35px;
+                line-height: 35px;
+                border: 1px #1b5b99 solid;
+                border-radius: 8px;
+                color: #1b5b99;
+                margin-right: 5%;
+                text-align: center;
+                position: relative;
+                img{
+                    width: 22px;
+                    height: 22px;
+                    left: 8px;
+                    top: 5px;
+                }
+                span{
+                    margin-left: 26px;
+                }
+            }
+            div:last-child{
+                margin-right: 0;
+            }
+        }
+        img{
+            position: absolute;
+            width: 40px;
+        }
+    }
+}
\ No newline at end of file

src/app/my/my-customer/my-customer.component.spec.ts

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

src/app/my/my-customer/my-customer.component.ts

+import { Component, OnInit } from '@angular/core';
+import { MyService } from '../my.service';
+import { ActivatedRoute,Router } from "@angular/router";
+import { LifeCommonService } from "../../common/life-common.service";
+import { ModalService, ToastService } from 'ng-zorro-antd-mobile';
+
+@Component({
+  selector: 'ydlife-my-customer',
+  templateUrl: './my-customer.component.html',
+  styleUrls: ['./my-customer.component.scss']
+})
+export class MyCustomerComponent implements OnInit {
+  customerList:Array<any>;
+  practitionerId:any;
+  constructor(private _toast: ToastService,private activatedRoute: ActivatedRoute,
+    private router: Router,public lifeCommonService:LifeCommonService,
+    public myService:MyService) { }
+
+  ngOnInit() {
+    this.lifeCommonService.setTitle('我的客户');
+    this.practitionerId = JSON.parse(localStorage.getItem('lifeCustomerInfo'))['practitionerId'];
+    // this.customerList = [
+    //   {name:'王倩',mobileNo:'13112210000',gender:'女',birthDate:'1990-12-13'},
+    //   {name:'张三',mobileNo:'13451511111',gender:'男',birthDate:'1987-01-08'},
+    //   {name:'李四',mobileNo:'13451511122',gender:'男',birthDate:'1989-03-21'},
+    // ]
+    this.queryCustomerHolderList()
+  }
+
+  addBussiness(customerItem) {
+    localStorage.setItem('myCustomerInfo',JSON.stringify(customerItem))
+    this.router.navigate(['/business/0']);
+  }
+
+  jumpToRelation(customerId){
+    this.router.navigate(['/customer_relation'],{ queryParams: { customerId:customerId} });
+  }
+  
+  jumpToPolicy(customerId){
+    this.router.navigate(['/customer_policy'],{ queryParams: { customerId:customerId} })
+  }
+
+  //我的客户
+  queryCustomerHolderList(){
+    this.myService.queryCustomerHolderList(this.practitionerId).subscribe((res)=>{
+        if(res['success']){
+          this.customerList = res['data']['list'];
+        }else{
+          this.customerList = [];
+          const toast = ToastService.show(res['message'], 0);
+          setTimeout(() => {
+            ToastService.hide();
+          }, 3000);
+        }
+    })
+  }
+}

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

@@ -58,6 +58,9 @@ import { ProductComponent } from './product/product.component';
 import { ProductDataComponent } from "./product-data/product-data.component";
 import { CommissionComponent } from './commission/commission.component';
 import { FileListComponent } from './file-list/file-list.component';
+import { MyCustomerComponent } from './my-customer/my-customer.component';
+import { CustomerRelationComponent } from './customer-relation/customer-relation.component';
+import { MyCustomerPolicyComponent } from './my-customer-policy/my-customer-policy.component';
 
 const myRoutes: Routes = [
   { path: '', component: MyCenterHomeComponent, canActivate: [AuthGuard], data: [{ title: '银盾保险经纪 - 工作台' }] },
@@ -122,7 +125,10 @@ const myRoutes: Routes = [
   { path: 'product',component:ProductComponent,canActivate:[AuthGuard]},
   { path: 'productData/:id',component:ProductDataComponent,canActivate:[AuthGuard]},
   { path: 'commission',component:CommissionComponent,canActivate:[AuthGuard]},
-  { path: 'filelist',component:FileListComponent,canActivate:[AuthGuard]}
+  { path: 'filelist',component:FileListComponent,canActivate:[AuthGuard]},
+  { path: 'customer',component:MyCustomerComponent,canActivate:[AuthGuard]},
+  { path: 'customer_relation',component:CustomerRelationComponent,canActivate:[AuthGuard]},
+  { path: 'customer_policy',component:MyCustomerPolicyComponent,canActivate:[AuthGuard]}
 ];
 
 @NgModule({

src/app/my/my.module.ts

@@ -71,9 +71,12 @@ import { ProductComponent } from './product/product.component';
 import { ProductDataComponent } from './product-data/product-data.component';
 import { CommissionComponent } from './commission/commission.component';
 import { FileListComponent } from './file-list/file-list.component';
+import { MyCustomerComponent } from './my-customer/my-customer.component';
+import { CustomerRelationComponent } from './customer-relation/customer-relation.component';
+import { MyCustomerPolicyComponent } from './my-customer-policy/my-customer-policy.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,DetailModalComponent, ProductComponent, ProductDataComponent, CommissionComponent, FileListComponent],
+  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, ProductComponent, ProductDataComponent, CommissionComponent, FileListComponent,MyCustomerComponent, CustomerRelationComponent, MyCustomerPolicyComponent],
   imports: [
     CommonModule,
     LifeCommonModule,

src/app/my/my.service.ts

@@ -682,4 +682,34 @@ export class MyService {
     return this.http
     .post(url, JSON.stringify(param));
   }
+
+  //我的客户投保人列表列表
+  queryCustomerHolderList(practitionerId){
+    const url = this.ydapi + `/practitioner/queryCustomerHolderList/${practitionerId}`
+    return this.http.get(url).pipe((res)=>{
+      return res;
+    });
+  }
+
+  //客户关系接口
+  queryCustomerInsuredList(customerId){
+    const url = this.ydapi + `/practitioner/queryCustomerInsuredList/${customerId}`
+    return this.http.get(url).pipe((res)=>{
+      return res;
+    });
+  }
+
+  //客户保单查询接口
+  queryPolicyListByHolderCustomerId(param){
+    const url = this.ydapi + '/practitioner/queryPolicyListByHolderCustomerId';
+    return this.http
+    .post(url, JSON.stringify(param));
+  }
+
+  //保单详情接口
+  orderDetailQuery(param) {
+    const url = this.API + '/erp/orderDetailQuery';
+    return this.http.post(url, JSON.stringify(param));
+  }
+
 }

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

 <div class="scrollContainer">
   <div class="detailContainer scrollContent">
-    <div class="orderdetailBox">
+    <div class="orderdetailBox" *ngIf="relation_id">
       <div class="btnBox">
         <span class="alignItemCenter" style="font-size: 20px;"><i class="line"></i>保单明细</span>
       </div>
@@ -90,6 +90,9 @@
           <!-- <span>{{holderInfo?.idInfo.idNo.substr(0,2) + '******' + holderInfo?.idInfo.idNo.substr(holderInfo?.idInfo.idNo.length-2,2)}}</span> -->
         </li>
       </ul>
+
+
+      
       <div class="insuredsBox" *ngFor="let insured of insuredInfos;index as i">
         <h4 class="text-left alignItemCenter" style="margin-top: 10px;"><i class="line"></i>被保人信息{{i+1}}</h4>
         <ul>
@@ -164,5 +167,356 @@
 
       </ul>
     </div>
+    <div class="orderdetailBox" *ngIf="!relation_id">
+      <div class="btnBox">
+        <span class="alignItemCenter" style="font-size: 20px;"><i class="line"></i>保单明细</span>
+      </div>
+      <ul class="list-group" *ngIf="orderDetail?.policyNo">
+        <li class="list-group-item">
+          <span>保单号</span>
+          <span>{{orderDetail?.policyNo}}</span>
+        </li>
+        <li class="list-group-item" *ngIf="orderDetail?.startDate">
+          <span>生效日期</span>
+          <span>{{orderDetail?.startDate.substr(0,10)}}</span>
+        </li>
+        <li class="list-group-item" *ngIf="orderDetail?.endDate">
+          <span>结束日期</span>
+          <span>{{orderDetail?.endDate.substr(0,10)}}</span>
+        </li>
+        <li class="list-group-item" *ngIf="orderDetail?.statusDesc">
+          <span>状态</span>
+          <span>{{orderDetail?.statusDesc}}</span>
+        </li>
+        <li class="list-group-item">
+          <span>产品名</span>
+          <span>{{orderDetail?.productName?orderDetail?.productName:orderDetail?.planName}}</span>
+        </li>
+        <div class="btnBox" style="margin-top: 10px;">
+          <span class="alignItemCenter"><i class="line"></i>投保人信息</span>
+        </div>
+        <li class="list-group-item">
+          <span>姓名</span>
+          <span>{{holderInfo?.holderName}}</span>
+        </li>
+        <li class="list-group-item" *ngIf="holderInfo?.holderMobileNo">
+          <span>手机号</span>
+          <span>{{holderInfo?.holderMobileNo}}</span>
+        </li>
+        <li class="list-group-item" *ngIf="holderInfo?.holderGender">
+          <span>性别</span>
+          <span>{{holderInfo?.holderGender}}</span>
+        </li>
+        <li class="list-group-item" *ngIf="holderInfo?.holderBirthDay">
+          <span>出生日期</span>
+          <span>{{holderInfo?.holderBirthDay}}</span>
+        </li>
+        <li class="list-group-item" *ngIf="holderInfo?.holderIdTypeName">
+          <span>证件类型</span>
+          <span>{{holderInfo?.holderIdTypeName}}</span>
+        </li>
+        <li class="list-group-item" *ngIf="holderInfo?.holderIdNo">
+          <span>证件号码</span>
+          <span>{{holderInfo?.holderIdNo}}</span>
+          <!-- <span>{{holderInfo?.idInfo.idNo.substr(0,2) + '******' + holderInfo?.idInfo.idNo.substr(holderInfo?.idInfo.idNo.length-2,2)}}</span> -->
+        </li>
+        <li class="list-group-item" *ngIf="orderDetail?.argueSolution">
+          <span>争议仲裁</span>
+          <span>{{orderDetail?.argueSolution}}</span>
+        </li>
+        <li class="list-group-item" *ngIf="returnOrderDetail?.holderInfo.contactName">
+          <span>联系人</span>
+          <span>{{returnOrderDetail?.holderInfo.contactName}}</span>
+        </li>
+        <li class="list-group-item" *ngIf="returnOrderDetail?.insureFactorInfo?.socialInsured || returnOrderDetail?.insureFactorInfo?.socialInsured=='0'">
+          <span>社保 (含新农合)</span>
+          <span>{{orderDetail?.socialInsured == "1" ? "有" : "无"}}</span>
+        </li>
+        <li class="list-group-item" *ngIf="orderDetail?.coverTerm">
+          <span>保障计划</span>
+          <span>{{orderDetail?.coverTerm}}</span>
+        </li>
+        <li class="list-group-item" *ngIf="orderDetail?.paymentTerm">
+          <span>缴费期限</span>
+          <span>
+            {{ orderDetail.paymentTerm == "0"? "/" : orderDetail.paymentTerm}}
+             {{ getChineseDate(orderDetail.paymentTermUnit) }}</span>
+        </li>
+        <li class="list-group-item" *ngIf="orderDetail?.isInsure">
+          <span>轻症+豁免</span>
+          <span>{{orderDetail?.isInsure ? orderDetail.isInsure : "/"}}</span>
+        </li>
+      </ul>
+      <div class="insuredsBox" *ngIf="orderDetail?.bizLicenseInfo">
+        <h4 class="text-left" style="margin-top: 10px;"><i class="line"></i>经营场所信息</h4>
+        <ul>
+          <li class="list-group-item">
+            <span>经营场所面积</span>
+            <span>{{orderDetail?.bizLicenseInfo?.businessArea}}平方米</span>
+          </li>
+          <li class="list-group-item">
+            <span>生产经营内容</span>
+            <span>{{orderDetail?.bizLicenseInfo?.businessScope}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>行业</span>
+            <span>{{orderDetail?.bizLicenseInfo?.businessPlace}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>经营许可证类型</span>
+            <span>{{orderDetail?.bizLicenseInfo?.businessCertificateType}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>经营许可证号码</span>
+            <span>{{orderDetail?.bizLicenseInfo?.businessCertificateNo}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>客如云商家编号</span>
+            <span>{{orderDetail?.bizLicenseInfo?.businessNumber ? orderDetail?.bizLicenseInfo?.businessNumber:'/'}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>经营场所地址</span>
+            <span>{{ orderDetail?.bizLicenseInfo?.erpSubjectItem?.subjectAddress}}</span>
+          </li>
+        </ul>
+      </div>
+      <div class="insuredsBox" *ngIf="orderDetail?.subjectItem">
+        <h4 class="text-left" style="margin-top: 10px;"><i class="line"></i>标的物信息</h4>
+        <ul>
+          <li class="list-group-item" *ngIf="orderDetail?.subjectItem?.roomQty">
+            <span>房间数量</span>
+            <span>{{orderDetail.subjectItem.roomQty}} ( 间 )</span>
+          </li>
+          <li class="list-group-item" *ngIf="orderDetail?.subjectItem?.subjectAddress">
+            <span>详细地址</span>
+            <span>{{orderDetail.subjectItem.subjectAddress}}</span>
+          </li>
+        </ul>
+      </div>
+      <div class="insuredsBox" *ngIf="orderDetail?.erpVehicleCoverList != null">
+        <h4 class="text-left" style="margin-top: 10px;"><i class="line"></i>车险保障范围</h4>
+        <ul>
+          <li class="list-group-item" *ngFor="let erpVehicleCoverList of orderDetail.erpVehicleCoverList">
+            <span>{{ erpVehicleCoverList.clauseDescription }}(RMB)</span>
+            <span>
+              ￥{{ erpVehicleCoverList.premium | number: "1.2-2" }}
+              <span *ngIf="erpVehicleCoverList.exemptDeductible == 'true'">
+                (不计免赔)
+              </span>
+            </span>
+          </li>
+          <li class="list-group-item" *ngIf="orderDetail.erpVehicleTax">
+              <span>车船税(RMB)</span>
+              <span>
+                ￥{{ orderDetail.erpVehicleTax.taxAmount | number: "1.2-2" }}
+              </span>
+          </li>
+        </ul>
+      </div>
+      <div class="insuredsBox" *ngIf="orderDetail?.erpVehicle">
+        <h4 class="text-left" style="margin-top: 10px;"><i class="line"></i>车辆信息</h4>
+        <ul>
+          <li class="list-group-item">
+            <span>车牌号</span>
+            <span>{{orderDetail?.erpVehicle?.plateNo}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>车架号</span>
+            <span>{{orderDetail?.erpVehicle?.frameNumber}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>是否新车</span>
+            <span>{{orderDetail?.erpVehicle?.isNewCar ? "是" : "否"}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>是否新保</span>
+            <span>{{orderDetail?.erpVehicle?.applyType == 1 ? "新保" : "续保"}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>注册日期</span>
+            <span>{{orderDetail?.erpVehicle?.firstRegistrationDate}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>发动机号</span>
+            <span>{{orderDetail?.erpVehicle?.engineNo}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>车辆类型</span>
+            <span>{{ getVehicleCategory( orderDetail?.erpVehicle?.vehicleCategory)}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>品牌型号</span>
+            <span>{{orderDetail?.erpVehicle?.vehicleBrand}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>座位数</span>
+            <span>{{ orderDetail?.erpVehicle?.seatCapacity}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>购置价</span>
+            <span>{{orderDetail?.erpVehicle?.priceNewcar}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>车辆用途</span>
+            <span>{{orderDetail?.erpVehicle?.vehicleUseType }}</span>
+          </li>
+          <li class="list-group-item">
+            <span>排量</span>
+            <span>{{orderDetail?.erpVehicle?.dispacementPower }}</span>
+          </li>
+        </ul>
+      </div>
+      <div class="insuredsBox" *ngIf="orderDetail?.erpVehicleOwmer">
+        <h4 class="text-left" style="margin-top: 10px;"><i class="line"></i>车主信息</h4>
+        <ul>
+          <li class="list-group-item">
+            <span>车主姓名</span>
+            <span>{{orderDetail?.erpVehicleOwmer?.name}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>手机号</span>
+            <span>{{orderDetail?.erpVehicleOwmer?.mobileNo}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>证件类型</span>
+            <span>{{orderDetail?.erpVehicleOwmer?.idTypeName}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>证件号</span>
+            <span>{{ orderDetail?.erpVehicleOwmer?.idNo}}</span>
+          </li>
+        </ul>
+      </div>      
+      <div class="insuredsBox" *ngFor="let insured of insuredInfos;index as i">
+        <h4 class="text-left alignItemCenter" style="margin-top: 10px;"><i class="line"></i>被保人信息{{i+1}}</h4>
+        <ul>
+          <li class="list-group-item" *ngIf="insured?.insuredName">
+            <span>姓名</span>
+            <span>{{insured?.insuredName}}</span>
+          </li>
+          <li class="list-group-item" *ngIf="insured?.insuredMobileNo">
+            <span>手机号</span>
+            <span>{{insured?.insuredMobileNo}}</span>
+          </li>
+          <li class="list-group-item" *ngIf="insured?.insuredGenderDesc">
+            <span>性别</span>
+            <span>{{insured?.insuredGenderDesc}}</span>
+          </li>
+          <li class="list-group-item" *ngIf="this.insured?.insuredBirthDate">
+            <span>出生日期</span>
+            <span>{{this.insured?.insuredBirthDate}}</span>
+          </li>
+          <li class="list-group-item" *ngIf="insured?.insuredIdTypeDesc">
+            <span>证件类型</span>
+            <span>{{insured?.insuredIdTypeDesc}}</span>
+          </li>
+          <li class="list-group-item" *ngIf="insured?.insuredIdNo">
+            <span>证件号码</span>
+            <span>{{ insured?.insuredIdNo.substr(0,2) + '******' + this.insured?.insuredIdNo.substr(this.insured?.insuredIdNo.length-2,2)}}</span>
+          </li>
+          <li class="list-group-item" *ngIf="insured?.occupationalClass">
+            <span>职业类别</span>
+            <span>{{insured?.occupationalClass}}</span>
+          </li>
+          <li class="list-group-item" *ngIf="insured?.insuredAddress">
+            <span style="white-space: nowrap;margin-right: 8px;">详细地址</span>
+            <span>{{insured?.insuredAddress}}</span>
+          </li>
+          <li class="list-group-item" *ngIf="insured?.salary">
+            <span>去年年收入（万元）</span>
+            <span>{{insured?.salary}}</span>
+          </li>
+          <li class="list-group-item" *ngIf="insured?.salaryType">
+            <span>收入类型</span>
+            <span>{{insured?.salaryType}}</span>
+          </li>
+          <ng-container *ngIf="insured?.orderLifeProElementsList">
+            <li class="list-group-item" *ngFor="let orderLifeProInfos of insured?.orderLifeProElementsList">
+              <span>{{orderLifeProInfos.factorName}}</span>
+              <span>{{orderLifeProInfos.elementName}}</span>
+            </li>
+          </ng-container>
+        </ul>
+      </div>
+      <div class="insuredsBox" *ngIf="orderDetail?.erpVehicleConfirm != null">
+        <h4 class="text-left" style="margin-top: 10px;"><i class="line"></i>配送&发票信息</h4>
+        <ul>
+          <li class="list-group-item">
+            <span>收件人</span>
+            <span>{{ orderDetail?.erpVehicleConfirm?.receiverName}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>手机号</span>
+            <span>{{orderDetail?.erpVehicleConfirm?.receiverTel}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>收件时间</span>
+            <span>{{ orderDetail?.erpVehicleConfirm?.receiverDate}}</span>
+          </li>
+
+          <li class="list-group-item">
+            <span>抬头类型</span>
+            <span>{{ orderDetail?.erpVehicleConfirm?.invoiceKind ==1?'个人':'公司'}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>发票抬头</span>
+            <span>{{orderDetail?.erpVehicleConfirm?.invoiceTitle}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>收件地址</span>
+            <span>{{orderDetail?.erpVehicleConfirm?.receiverAddress}}</span>
+          </li>
+          <li class="list-group-item">
+            <span>收件时间</span>
+            <span>{{ orderDetail?.erpVehicleConfirm?.receiverDate}}</span>
+          </li>
+        </ul>
+        <ul *ngIf="orderDetail?.erpVehicleConfirm?.invoiceKind == '公司' ||
+        orderDetail?.erpVehicleConfirm?.invoiceKind == '2'
+      ">
+          <li class="list-group-item">
+            <span>公司名</span>
+            <span>orderDetail?.erpVehicleConfirm?.invoiceTitle</span>
+          </li>
+          <li class="list-group-item">
+            <span>公司税号</span>
+            <span>orderDetail?.erpVehicleConfirm?.taxCode</span>
+          </li>
+          <li class="list-group-item">
+            <span>电话号码</span>
+            <span>orderDetail?.erpVehicleConfirm?.invoiceTel</span>
+          </li>
+          <li class="list-group-item">
+            <span>单位地址</span>
+            <span>orderDetail?.erpVehicleConfirm?.invoiceAddress</span>
+          </li>
+          <li class="list-group-item">
+            <span>开户银行</span>
+            <span>orderDetail?.erpVehicleConfirm?.invoiceBank</span>
+          </li>
+          <li class="list-group-item">
+            <span>银行账号</span>
+            <span>orderDetail?.erpVehicleConfirm?.invoiceBankcardId</span>
+          </li>
+        </ul>
+      </div>
+      <h4 class="text-left alignItemCenter" *ngIf="orderDetail?.price || orderDetail?.referralInfo?.referralAmount || orderDetail?.totalPrice"
+      style="margin-top: 10px;"><i class="line"></i>保费</h4>
+      <ul class="priceContainer">
+        <li class="list-group-item" *ngIf="orderDetail?.price">
+          <span>年化保费</span>
+          <span>￥{{orderDetail?.price | number:'1.2-2'}}</span>
+        </li>
+        <li class="list-group-item" *ngIf="orderDetail?.totalPrice">
+          <span>总保费</span>
+          <span>￥ {{orderDetail?.totalPrice | number:'1.2-2'}}</span>
+        </li>
+        <li class="list-group-item" *ngIf="orderDetail?.referralInfo?.referralAmount">
+          <span style="color: #c9af71;">佣金</span>
+          <span class="light-color">￥{{orderDetail?.referralInfo?.referralAmount | number:'1.2-2'}}</span>
+        </li>
+
+      </ul>
+    </div>
   </div>
 </div>

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

@@ -15,13 +15,18 @@ export class OrderDetailComponent implements OnInit {
   insuredInfos: Array<any>;
   policyFactorInfos: Array<any>;
   relation_id:string;
+  orderDetail:any;
   constructor(private myService: MyService, private activatedRoute: ActivatedRoute) { }
 
   ngOnInit() {
     this.orderNo = this.activatedRoute.snapshot.queryParams.orderNo;
     this.policyNo = this.activatedRoute.snapshot.queryParams.policyNo;
     this.relation_id = this.activatedRoute.snapshot.queryParams.relation_id;
-    this.policyInfoQuery();
+    if(this.relation_id){
+      this.policyInfoQuery();
+    }else{
+      this.orderQuery();
+    }
   }
   policyInfoQuery() {
     this.myService.policyInfoQuery({ orderNo: this.orderNo, platform: 2,policyNo:this.policyNo,relation_id:this.relation_id }).subscribe((res) => {
@@ -33,4 +38,40 @@ export class OrderDetailComponent implements OnInit {
       }
     })
   }
+
+  orderQuery(){
+    this.myService.orderDetailQuery({orderNo:this.orderNo}).subscribe((res)=>{
+      if(res['success']){
+        this.orderDetail = res['data']['orderDetail'];
+        this.holderInfo = this.orderDetail['holderItem'];
+        this.insuredInfos = this.orderDetail['insureds'];
+      }
+    })
+  }
+
+  getChineseDate(str) {
+    if (str == "Y") {
+      return "年";
+    }
+    if (str == "M") {
+      return "月";
+    }
+    if (str == "D") {
+      return "日";
+    }
+    if (str == "A") {
+      return "岁";
+    }
+    return '';
+  }
+
+  getVehicleCategory(str) {
+    if (str == "01") {
+      return "客车";
+    }
+    if (str == "02") {
+      return "货车";
+    }
+    return str;
+  }
 }