产品资料页面

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

@@ -119,7 +119,7 @@ const myRoutes: Routes = [
   { path: 'salary_detail',component:SalaryDetailComponent,canActivate:[AuthGuard]},
   { path: 'salary_detail',component:SalaryDetailComponent,canActivate:[AuthGuard]},
   { path: 'salary_detail/:id',component:SalaryFirstYearComponent,canActivate:[AuthGuard]},
   { path: 'salary_detail/:id',component:SalaryFirstYearComponent,canActivate:[AuthGuard]},
   { path: 'product',component:ProductComponent,canActivate:[AuthGuard]},
   { path: 'product',component:ProductComponent,canActivate:[AuthGuard]},
-  { path: 'productData',component:ProductDataComponent,canActivate:[AuthGuard]},
+  { path: 'productData/:id',component:ProductDataComponent,canActivate:[AuthGuard]},
 ];
 ];
 
 
 @NgModule({
 @NgModule({

src/app/my/product-data/product-data.component.html

@@ -3,10 +3,17 @@
     <h3>产品海报</h3>
     <h3>产品海报</h3>
     <div>
     <div>
       <ul>
       <ul>
-        <li></li>
+        <li>
+          <img src="./assets/images/loading_bg.png" alt="" class="img-responsive">
+        </li>  <li>
+          <img src="./assets/images/loading_bg.png" alt="" class="img-responsive">
+        </li>  <li>
+          <img src="./assets/images/loading_bg.png" alt="" class="img-responsive">
+        </li>
       </ul>
       </ul>
     </div>
     </div>
   </div>
   </div>
+  <div style="width: calc(100% + 30px); height: 8px;background: #f6f6f6;margin-left: -15px;"></div>
   <div class="productDataContent">
   <div class="productDataContent">
     <h3>产品资料</h3>
     <h3>产品资料</h3>
     <div>
     <div>

src/app/my/product-data/product-data.component.scss

 .productDataContainer{
 .productDataContainer{
   padding:15px;
   padding:15px;
-  .productDataContent {
+  h3{
+    color: #444;
+    font-size: 18px;
+    font-weight: 400;
+    margin: 15px 0;
+  }
+  .productPoster{
+    padding-bottom: 18px;
     h3{
     h3{
-      color: #444;
-      font-size: 18px;
-      font-weight: 400;
+      margin-top:0;
     }
     }
+    ul{
+      display: flex;
+      flex-wrap: wrap;
+      li{
+        min-width: 30%;
+        max-width: 30%;
+        margin-right:17px;
+      }
+      li:last-child{
+        margin-right:0;
+      }
+    }
+  }
+  .productDataContent {
     ul {
     ul {
       display: flex;
       display: flex;
       flex-wrap: wrap;
       flex-wrap: wrap;

src/app/my/product/product.component.html

@@ -42,7 +42,7 @@
               </div>
               </div>
             </div>
             </div>
             <div class="dataContent">
             <div class="dataContent">
-              <div>资料</div>
+              <div (click)="goData(1)">资料</div>
               <div>可售</div>
               <div>可售</div>
             </div>
             </div>
           </li>
           </li>

src/app/my/product/product.component.ts

-import { Component, OnInit } from '@angular/core';
-import { LifeCommonService } from '../../common/life-common.service';
-import { MyService } from '../../my/my.service';
+import {Component, OnInit} from '@angular/core';
+import {LifeCommonService} from '../../common/life-common.service';
+import {MyService} from '../../my/my.service';
+import {Router} from "@angular/router";
 
 
 @Component({
 @Component({
   selector: 'ydlife-product',
   selector: 'ydlife-product',
@@ -8,12 +9,14 @@ import { MyService } from '../../my/my.service';
   styleUrls: ['./product.component.scss']
   styleUrls: ['./product.component.scss']
 })
 })
 export class ProductComponent implements OnInit {
 export class ProductComponent implements OnInit {
-  leftList:Array<any>;
-  topList:Array<any>;
-  rightList:Array<any>;
-  leftSelectedId:number = null;
-  filterSelectedFlag:boolean = false;
-  constructor(private myService:MyService,public lifeCommonService:LifeCommonService) { }
+  leftList: Array<any>;
+  topList: Array<any>;
+  rightList: Array<any>;
+  leftSelectedId: number = null;
+  filterSelectedFlag: boolean = false;
+
+  constructor(private myService: MyService, public lifeCommonService: LifeCommonService, private router: Router) {
+  }
 
 
   ngOnInit() {
   ngOnInit() {
     this.lifeCommonService.setTitle('产品库');
     this.lifeCommonService.setTitle('产品库');
@@ -41,26 +44,32 @@ export class ProductComponent implements OnInit {
   }
   }
 
 
   //type：305左侧，309上侧，306筛选
   //type：305左侧，309上侧，306筛选
-  tagViewQuery(type){
+  tagViewQuery(type) {
     const param = {
     const param = {
-      isActive:1,
-      tagViewType:type
+      isActive: 1,
+      tagViewType: type
     }
     }
-    this.myService.tagViewQuery(param).subscribe((res)=>{
-      if(res['success']){
-        if(type == 305){
+    this.myService.tagViewQuery(param).subscribe((res) => {
+      if (res['success']) {
+        if (type == 305) {
           this.leftList = res['data']['tagViewQueryInfos'];
           this.leftList = res['data']['tagViewQueryInfos'];
-        }else if(type == 309){
+        } else if (type == 309) {
           this.topList = res['data']['tagViewQueryInfos'];
           this.topList = res['data']['tagViewQueryInfos'];
-        }else{
+        } else {
           this.rightList = res['data']['tagViewQueryInfos'];
           this.rightList = res['data']['tagViewQueryInfos'];
         }
         }
       }
       }
     })
     })
   }
   }
+
 // 筛选
 // 筛选
-  allFilter(){
+  allFilter() {
     this.tagViewQuery(306);
     this.tagViewQuery(306);
     this.filterSelectedFlag = true;
     this.filterSelectedFlag = true;
   }
   }
+
+//  进入产品资料页面
+  goData(e) {
+    this.router.navigate(['/productData', e]);
+  }
 }
 }