消息列表

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

@@ -11,7 +11,7 @@
   </div>
   <div class="courseTitle">
     <h4>{{fileUploadItem?.itemName}}</h4>
-    <span class="viewpdf" *ngIf="fileUploadItem?.filePath && fileUploadItem?.filePath.indexOf('.pdf') > -1" [routerLink]="['/pdfView',fileId]" (click)="saveVideoPlayback()">立即阅读</span>
+    <span class="viewpdf" *ngIf="fileUploadItem?.filePath && fileUploadItem?.filePath.indexOf('.pdf') > -1 && (fileUploadItem.learningStatus == 1 || fileUploadItem.learningStatus == 2)" (click)="viewPdfDetail(fileId)">立即阅读</span>
   </div>
   <div class="courseIntroContent">
     <div class="tab">

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

@@ -125,22 +125,34 @@ export class CourseDetailComponent implements OnInit,OnDestroy {
   menuPrevent() {
     return false;
   }
-  saveVideoPlayback() {
+  saveVideoPlayback(type=1) {
     // playbackStatus		视频播放状态(1:未播放完;2:已播放完)	【必填】
-    const param = {
+    let param = {
       id: '',
       customerId: this.lifeCustomerInfo.customerId,
       practitionerId: this.lifeCustomerInfo.practitionerId,
       fileId: this.fileId,
-      totalTime: this.video.nativeElement.duration,
-      viewTime: this.video.nativeElement.currentTime,
-      playbackStatus: this.video.nativeElement.currentTime >= this.video.nativeElement.duration ? 2 : 1,
     }
+    if(type===2){
+      param['playbackStatus'] = 2;
+      param['totalTime'] =  param['viewTime'] = 0;
+    }else{
+      param['totalTime']=this.video.nativeElement.duration;
+      param['viewTime']= this.video.nativeElement.currentTime;
+      param['playbackStatus']=this.video.nativeElement.currentTime >= this.video.nativeElement.duration ? 2 : 1;
+    }
+
     this.myService.saveVideoPlayback(param).subscribe(res => {
 
     })
   }
 
+  // 立即阅读
+  viewPdfDetail(fileId){
+    this.saveVideoPlayback(2);
+    this.router.navigate(['/pdfView',fileId]);
+  }
+
   queryVideoPlayback(type) {
     const param = {
       id: null,
@@ -186,6 +198,7 @@ export class CourseDetailComponent implements OnInit,OnDestroy {
       behavior: 'smooth'})
     }
   }
+  
 
 
 }

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

 <div class="wrapper">
-  <div class="item" [routerLink]="['/thanks']">
-    <span>银盾保险经纪董事长欢迎信</span>
-    <div class="content">
-      <span class="iconfont icon-ar-r"></span>
+  <div class="clearMessage">
+    <div></div>
+    <div (click)="oneKeyRead()">
+      <img src="assets/images/icons/delete.png" alt="" srcset="">
+      <span>清除未读</span>
     </div>
   </div>
-  <div class="item" [routerLink]="['/newsDetail/2']">
-    <span>银盾保险经纪置顶公众号操作指南</span>
+  <div class="item" *ngFor="let item of newsLists" (click)="goDetail(item)">
+    <div class="noticeIcon">
+      <img src="assets/images/icons/noticeTip.png" alt="">
+    </div>
+    <div class="newsSummary">
+      <h4>{{item.title}}</h4>
+      <p>{{item.context}}</p>
+    </div>
     <div class="content">
+      <div><span>{{item.createdAt | date:'yyyy-MM-dd'}}</span><span class="redDots" *ngIf="item.isRead=='0'"></span></div>
       <span class="iconfont icon-ar-r"></span>
     </div>
   </div>
-
 </div>
\ No newline at end of file

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

@@ -26,6 +26,52 @@
          height: 35px;
          margin-right: 10px;
         }
+        .noticeIcon{
+            width: 0;
+            flex: 0 0 41px;
+        }
+        .newsSummary{
+            width: 0;
+            flex: 0 0 85%;
+            p{
+                width: 150px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap; 
+            }
+        }
+        .content{
+            display: flex;
+            flex-direction: column;
+            align-items: end;
+            white-space: nowrap;
+            width: 0;
+            .redDots{
+                display: inline-block;
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                background-color: #F24949;
+                margin-left: 15px;
+            }
+        }
+    }
+    .clearMessage{
+        display: flex;
+        justify-content: space-between;
+        padding-right: 15px;
+        div{
+            display: flex;
+            align-items: center;
+            img{
+                width: 20px;
+            }
+            span{
+                color: #666;
+                font-size: 12px;
+                margin-left: 2px;
+            }
+        }
     }
     .lifeList{
         display: flex;

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

 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { MyService } from '../my.service';
 
 @Component({
   selector: 'ydlife-my-news',
@@ -6,10 +8,56 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./my-news.component.scss']
 })
 export class MyNewsComponent implements OnInit {
+  private customerInfo:any;
+  public newsLists = [
+    {id:'01',title:'银盾保险经纪董事长欢迎信',context:'',link:'/thanks',createdAt:'',isCommonDetsil:false,isRead:'1'},
+    {id:'000',title:'银盾保险经纪置顶公众号操作指南',context:'',link:'/newsDetail',createdAt:'',isCommonDetsil:true,isRead:'1'},
+  ]
 
-  constructor() { }
+
+  goDetail(val){
+    if(val.isCommonDetsil){
+      this.router.navigate([val.link,val.id])
+    }else{
+      this.router.navigate([val.link])
+    }
+  }
+
+  // 查询消息列表
+  querySystemMessage(){
+    const param = {
+      practitionerId:this.customerInfo.practitionerId
+    }
+    this.myService.querySystemMessage(param).subscribe(res=>{
+      console.log(res);
+      if(res['success']){
+        res['data']['dataList'].forEach(item=>{
+          item.link = '/newsDetail';
+          item.isCommonDetsil = true;
+        })
+        // 赋值前先初始化
+        this.newsLists = [
+          {id:'000',title:'银盾保险经纪董事长欢迎信',context:'',link:'/thanks',createdAt:'',isCommonDetsil:false,isRead:'1'},
+          {id:'000',title:'银盾保险经纪置顶公众号操作指南',context:'',link:'/newsDetail',createdAt:'',isCommonDetsil:true,isRead:'1'}
+        ]
+        this.newsLists = this.newsLists.concat(res['data']['dataList']);
+      }
+    })
+  }
+
+  // 一键已读
+  oneKeyRead(){
+    this.myService.oneKeyRead({practitionerId:this.customerInfo.practitionerId}).subscribe(res=>{
+      if(res['success']){
+        this.querySystemMessage()
+      }
+    })
+  }
+  constructor(private router:Router,private myService:MyService) { }
 
   ngOnInit() {
+    this.customerInfo = JSON.parse(localStorage.getItem('lifeCustomerInfo')) ? JSON.parse(localStorage.getItem('lifeCustomerInfo')) : null;
+    this.querySystemMessage();
   }
 
 }

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

@@ -112,7 +112,7 @@ const myRoutes: Routes = [
   { path: 'thanks', component: ThanksComponent, canActivate: [AuthGuard] ,data:[{title:'感谢信'}]},
   { path: 'setting', component: MySettingComponent, canActivate: [AuthGuard],data:[{title:'设置'}] },
   { path: 'setting/:uploadType', component: MySettingDetailComponent, canActivate: [AuthGuard],data:[{title:'设置'}] },
-  { path: 'news', component: MyNewsComponent, canActivate: [AuthGuard] ,data:[{title:'我的消息'}]},
+  { path: 'news', component: MyNewsComponent, canActivate: [AuthGuard] ,data:[{title:'消息列表'}]},
   { path: 'target', component: MyTargetComponent, canActivate: [AuthGuard],data:[{title:'目标设置'}] },
   { path: 'teamPanel', component: TeamPanelComponent, canActivate: [AuthGuard],data:[{title:'我的团队'}] },
   { path: 'teamPanel/:type', component: TeamSalesScoreComponent, canActivate: [AuthGuard] ,data:[{title:'活动量得分'}]},

src/app/my/my.service.ts

@@ -906,4 +906,22 @@ export class MyService {
     const url = this.API + "/college/lecturerQuery";
     return this.http.post(url,JSON.stringify(params))
   }
+
+  // 消息列表
+  querySystemMessage(params){
+    const url = this.API + "/systemMessage/querySystemMessage";
+    return this.http.post(url,JSON.stringify(params))
+  }
+
+  // 消息详情
+  querySystemMessageDetail(params){
+    const url = this.API + "/systemMessage/querySystemMessageDetail";
+    return this.http.post(url,JSON.stringify(params))
+  }
+
+  // 一键已读
+  oneKeyRead(params){
+    const url = this.API + "/systemMessage/oneKeyRead";
+    return this.http.post(url,JSON.stringify(params))
+  }
 }

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

 <div class="newsDetailContainer">
-  <div class="newsDetailContent">
+  <div class="newsDetailContent" *ngIf="messageId==='000'">
     <div>
       <div><img src="assets/images/topOfficalAccountGuideBg.png" alt=""></div>
       <h3>为了便于更好的服务您，三步就可轻松置顶银盾保险经纪公众号哦~<img src="assets/images/downArrow.gif" alt="" style="width: 25px"></h3>
       <div><img src="assets/images/topOfficalAccountGuide1.png" alt=""></div>
     </div>
   </div>
+  <div class="messageDetailContent" *ngIf="messageId!=='000'">
+    <div style="background: #fff;padding: 10px;">
+      <div class="title">
+        <h4>{{systemMessageInfo?.title}}</h4>
+        <p>{{systemMessageInfo?.createdAt}}</p>
+      </div>
+      <div class="contentDetail">
+        <div [innerHTML]="systemMessageInfo?.content"></div>
+      </div>
+    </div>
+  </div>
   <div class="closeBtn">
     <i class="iconfont icon-jia" (click)="close()"></i>
   </div>

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

 .newsDetailContainer{
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: #f5f5f5;
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    padding: 30px;
+    padding: 20px;
+    min-height: calc(100vh - 70px);
     .newsDetailContent{
         background-color: #fff;
         padding-bottom: 10px;
@@ -27,7 +27,7 @@
         line-height: 42px;
         margin: 10px auto;
         border-radius: 50%;
-        color: #fff; 
+        color: #333; 
         transform: rotate(45deg);
     }
 }
@@ -40,4 +40,21 @@ h3{
     img{
         margin-left: 6px;
     }
+}
+
+.messageDetailContent{
+    .title{
+        border-bottom: 1px solid #F2F2F2;
+        padding-bottom: 6px;
+        font-size: 12px;
+        color: #999;
+        h4{
+            color: #333;
+            font-size: 16px;
+        }
+    }
+    .contentDetail{
+        color: #333;
+        font-size: 12px;
+    }
 }
\ No newline at end of file

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

 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { MyService } from '../my.service';
 
 @Component({
   selector: 'ydlife-news-detail',
@@ -8,12 +9,17 @@ import { ActivatedRoute, Router } from '@angular/router';
 })
 export class NewsDetailComponent implements OnInit {
   type:string;
-  constructor(private router:Router,private activatedRoute:ActivatedRoute) { 
-    this.type = activatedRoute.snapshot.queryParams['type']
+  messageId:string;
+  systemMessageInfo:any;
+  constructor(private router:Router,private activatedRoute:ActivatedRoute,private myService:MyService) { 
+    this.type = activatedRoute.snapshot.queryParams['type'];
+    this.messageId = activatedRoute.snapshot.params['id'];
   }
 
   ngOnInit() {
-    
+    if(this.messageId!=='000'){
+      this.querySystemMessageDetail();
+    }
   }
 
   close()
@@ -24,5 +30,13 @@ export class NewsDetailComponent implements OnInit {
       this.router.navigate(['/news'])
     }
   }
+  // 查询消息详情
+  querySystemMessageDetail(){
+    this.myService.querySystemMessageDetail({systemMessageId:this.messageId}).subscribe(res=>{
+      if(res['success']){
+        this.systemMessageInfo = res['data']['systemMessageInfo'];
+      }
+    })
+  }
 
 }