海报分类&分类页样式修改

src/app/auth/login/login.component.html

@@ -2,7 +2,9 @@
   <div class="weui-form">
     <div class="weui-form__text-area" style="position: relative;">
       <img style="width: 100%;" src="assets/images/ydinsurance_logo.png" >
-      <div style="font-family: '微软雅黑';position: absolute; top: 100px;left: 35%;font-size: 14px;">海纳百川&nbsp;赢家后盾</div>
+      <div style="font-family: '微软雅黑';position: absolute; top: 65%;left: 35%;font-size: 14px;">
+       海纳百<span style="letter-spacing: 3px;">川</span>赢家后盾
+      </div>
     </div>
     <div class="weui-form__control-area">
       <div class="weui-cells__group weui-cells__group_form">

src/app/my/file-upload/file-upload.component.scss

 .fileUploadLists {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
   height: 100%;
   ul {
     list-style: none;
-    
   }
   .left{
-    width: 100px;
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    -webkit-overflow-scrolling: touch;
-    background: #f3f4f5;
+    display: flex;
+    padding: 10px 2px;
+    border-bottom: 3px #3784ca solid;
+    background: #f0f0f0;
+    margin-bottom: 10px;
     li{
-      position: relative;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      height: 43px;
-      line-height: 43px;
+      width: 19%;
+      border: 1px #a9aabb solid;
       text-align: center;
+      font-size: 14px;
+      height: 30px;
+      line-height: 30px;
+      border-radius: 20px;
+      margin: 0px 2px;
     }
     li.actived{
-      background-color: #fff;
-    }
-    li:before {
-      content: "";
-      display: block;
-      position: absolute;
-      left: 22px;
-      top: 42px;
-      width: 60%;
-      height: 1px;
-      background: hsla(0,0%,86%,.4);
-    }
-    li.actived:after {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 6px;
-      height: 100%;
-      font-size: 0;
-      background-color: #ec2d37;
+      background-color: #ff5a32;
+      color: #fff;
+      border: 1px #f0f0f0 solid;
     }
+    // li:before {
+    //   content: "";
+    //   display: block;
+    //   position: absolute;
+    //   left: 22px;
+    //   top: 42px;
+    //   width: 60%;
+    //   height: 1px;
+    //   background: hsla(0,0%,86%,.4);
+    // }
+    // li.actived:after {
+    //   content: "";
+    //   position: absolute;
+    //   left: 0;
+    //   top: 0;
+    //   width: 6px;
+    //   height: 100%;
+    //   font-size: 0;
+    //   background-color: #ec2d37;
+    // }
   }
   .contentList{
     background-color: #fff;
     -webkit-box-flex: 1;
     -ms-flex: 1;
     flex: 1;
-    height: 100%;
+    height: auto;
     overflow-x: hidden;
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;

src/app/my/mk-material/mk-material.component.html

+<ul class="left">
+  <li *ngFor="let categoryItem of categoryList" 
+  (click)="switchCategory(categoryItem.dropOptionOrder)"
+  [ngClass]="{'actived':selectedCategoryId===categoryItem.dropOptionOrder}">
+  {{categoryItem.dropOptionName}}
+  </li>
+</ul>
 <div class="materialContainer">
   <div class="materialItem" *ngFor="let posterInfo of posterInfos;index as i"
        [routerLink]="['/material',posterInfo.itemId]" [queryParams]="{itemType:posterInfo.itemType}">

src/app/my/mk-material/mk-material.component.scss

+.left{
+  display: flex;
+  padding: 10px 2px;
+  border-bottom: 3px #3784ca solid;
+  background: #f0f0f0;
+  margin-bottom: 10px;
+  list-style: none;
+  li{
+    width: 19%;
+    border: 1px #a9aabb solid;
+    text-align: center;
+    font-size: 14px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 20px;
+    margin: 0px 2px;
+  }
+  li.actived{
+    background-color: #ff5a32;
+    color: #fff;
+    border: 1px #f0f0f0 solid;
+  }
+}
 .materialContainer {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
   grid-row-gap: 10px;
   grid-column-gap: 10px;
+  
   .materialItem {
     position: relative;
     overflow: hidden;

src/app/my/mk-material/mk-material.component.ts

@@ -9,24 +9,47 @@ import {MyService} from "../my.service";
 })
 export class MkMaterialComponent implements OnInit {
   posterInfos: Array<any>;
+  categoryList:Array<any>;
+  selectedCategoryId:number;
 
   constructor(private router: Router, private myService: MyService) {
   }
 
   ngOnInit() {
+    this.dropOptionsQuery();
     this.posterQuery();
+    
   }
 
   posterQuery() {
-    this.myService.posterQuery({
-      paginationInfo: {
-        noLimitFlag: 'CONFIRM'
-      }
-    }).subscribe(res => {
+    const param = {
+      mdDropOptionId:this.selectedCategoryId,
+      paginationInfo: {noLimitFlag: 'CONFIRM'}
+    }
+    this.myService.posterQuery(param).subscribe(res => {
       if (res['success']) {
         this.posterInfos = res['data']['posterInfos'];
       }
     });
   }
 
+  //海报分类
+  dropOptionsQuery() {
+    this.myService.dropOptionsQuery({ code: 'yd_productbill_file_type'}).subscribe(res => {
+      if (res['success']) {
+       this.categoryList =  res['data']['dropMasterInfoList'][0]['dropOptionsInfoList'];
+       if (this.categoryList.length > 0) {
+        this.selectedCategoryId = this.categoryList[0].dropOptionOrder;
+        this.switchCategory(this.selectedCategoryId)
+      }
+      }else{
+        this.categoryList = [];
+      }
+    })
+  }
+
+  switchCategory(e){
+    this.selectedCategoryId = e;
+    this.posterQuery();
+  }
 }

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

@@ -30,7 +30,7 @@
   <div class="weui-panel__bd">
     
       <div class="performance_wrapper">
-        <img class="bg" src="assets/images/measurebanner.jpg" >
+        <img class="bg" src="assets/images/sales_bg.png" >
 
         <div class="content">
           <span class="detail" (click)="jumpToDetail()">明细<i class="iconfont icon-ar-r"
@@ -46,9 +46,7 @@
                 [ngStyle]="{'left':leftWidth}"
                 ></i>
               </h3>
-              
             </div>
-            
           </li>
           </ul>
           <ul class="performance_list title">

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

@@ -96,9 +96,9 @@
       height: 100%;
       position: absolute;
       z-index: 1;
-      -webkit-filter: blur(1px);
-      filter: blur(3px);
-      opacity: 0.8;
+      // -webkit-filter: blur(1px);
+      // filter: blur(3px);
+      // opacity: 0.8;
     }
     .content{
       z-index: 100;

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

 <div class="salesWrapper">
+  <ul class="tab">
+    <li *ngFor="let item of performanceList" 
+    (click)="selectRang(item.type)"
+    [ngClass]="{selected:salesDetailType==item.type}"
+    >
+    <div style="position: relative;">
+      <h3>{{item.name}}
+        <!-- <i class="line" *ngIf="performanceSelectedFlag==item.type" 
+        [ngStyle]="{'left':leftWidth}"
+        ></i> -->
+      </h3>
+    </div>
+  </li>
+  </ul>
   <div class="salesContent">
-
     <div class="salesItem" *ngFor="let salesDetailItem of salesDetailList">
       <div class="icon_bolck"><span class="iconfont icon-money-more"></span></div>
       <div class="line">

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

@@ -2,6 +2,42 @@
     width: 100%;
     height: 100%;
     overflow: auto;
+    .tab{
+        display: flex;
+        list-style: none;
+        /* margin-bottom: 5px; */
+        margin: 10px 0px;
+        padding-left: 1%;
+         li {
+          margin-right: 15px;
+          line-height: 30px;
+          height: 30px;
+          width: 20%;
+          text-align: center;
+          border: 1px #a9aabb solid;
+          border-radius: 20px;
+          h3{
+            font-weight: normal;
+            font-size: 16px;
+          }
+        }
+        li.selected{
+            background-color: #ff5a32;
+            color: #fff;
+            border: 1px #f0f0f0 solid;
+        //   h3{
+        //     font-weight: bold;
+        //   }
+        //   .line{
+        //     width: 20px;
+        //     height: 3px;
+        //     display: inline-block;
+        //     position: absolute;
+        //     bottom: 2px;
+        //     background: #ff002a;
+        //   }
+        }
+      }
     .salesContent{
         .salesItem{
             border-bottom: 1px #dcdcdc solid;

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

@@ -11,7 +11,13 @@ export class SalesDetailComponent implements OnInit {
   allPerformanceInfo:Array<any>;
   salesDetailList:Array<any>;
   salesDetailType:any;
-  constructor(private myService: MyService,private activatedRoute: ActivatedRoute,public lifeCommonService:LifeCommonService) { }
+  performanceList:Array<any>;
+  constructor(private myService: MyService,private activatedRoute: ActivatedRoute,public lifeCommonService:LifeCommonService) { 
+    this.performanceList = [
+      {type: 'month',name:'本月'},
+      {type: 'year',name:'本年度'}
+    ]
+  }
 
   ngOnInit() {
     this.salesDetailType = this.activatedRoute.snapshot.queryParams.type;
@@ -27,11 +33,19 @@ export class SalesDetailComponent implements OnInit {
         this.allPerformanceInfo = res['data']['commissionInfo'];
         if(this.salesDetailType === 'month'){
           this.salesDetailList = this.allPerformanceInfo['thisMonthInfo']['fortuneItemList'];
+          console.log('month')
         }
         if(this.salesDetailType==='year'){
           this.salesDetailList = this.allPerformanceInfo['thisYearInfo']['fortuneItemList'];
+          console.log('year')
+
         }
       }
     })
   }
+
+  selectRang(e){
+    this.salesDetailType = e;
+    this.brokerInfoQuery()
+  }
 }