阅读人的信息页面

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

-<div id="js_article" class="rich_media">
+<div id="js_article" class="rich_media" [ngStyle]="{'margin-bottom':deviceType == '3' ? '68px' : '10px'}">
   <div class="rich_media_inner">
     <div id="page-content" class="rich_media_area_primary">
       <div class="rich_media_area_primary_inner">
@@ -13,6 +13,24 @@
             <em id="publish_time"
                 class="rich_media_meta rich_media_meta_text">{{(articleInfo?.updatedAt).substr(0,10)}}</em>
           </div>
+          <div class="agentInfoContainer" *ngIf="agentInfo" style="margin: 0 0 15px 0;">
+            <div style="display: flex">
+              <div class="portrait">
+                <img
+                  [src]="agentInfo.headImagePath ? agentInfo.headImagePath : 'assets/images/icons/meng.png'" alt="经纪人头像"
+                  class="img-circle">
+              </div>
+              <div class="agentInfo">
+                <p style="font-size: 18px;font-weight: 700; color: #333; letter-spacing: 1px;">{{this.agentInfo.agentName}}</p>
+                <p>{{this.agentInfo.insurerBranchName}}</p>
+                <p><a href="tel:{{this.agentInfo.mobileNo}}" style="color: #646464;">{{this.agentInfo.mobileNo}}</a></p>
+              </div>
+            </div>
+            <div class="qrcode">
+              <img [src]="agentInfo.qrCodePath ? agentInfo.qrCodePath : 'assets/images/online.jpg'" alt="经纪人二维码"
+                   class="img-thumbnail">
+            </div>
+          </div>
           <div class="rich_media_content " id="js_content" style="visibility: visible;">
             <div [innerHTML]="articleInfo?.fileContent | safeHtml">
             </div>

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

-.rich_media {
-  padding-bottom: 68px;
-}
+// .rich_media {
+//   padding-bottom: 68px;
+// }
 
 .rich_media_area_primary {
   background-color: #fff;
@@ -80,7 +80,7 @@
     margin-right: 15px;
   }
   .qrcode {
-    width: 120px;
+    width: 75px;
   }
 }
 

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

@@ -25,7 +25,7 @@ export class ArticleDetailComponent implements OnInit, OnDestroy {
   shareCode: string;
   articleShareCodeSaveInfo: any;
   sharePractitionerInfo: any;
-
+  deviceType:string;
   constructor(private myService: MyService, public lifeCommonService: LifeCommonService, public router: Router, public activatedRoute: ActivatedRoute) {
     // this.subscription = lifeCommonService.shareStatus$.subscribe(status => {
     //   this.shareAbled = !(status == '0');
@@ -54,6 +54,7 @@ export class ArticleDetailComponent implements OnInit, OnDestroy {
     } else {
       this.customerId = null;
     }
+    this.deviceType = this.lifeCommonService.checkDeviceType();
     // if (this.lifeCommonService.checkDeviceType() == '3' && !this.customerId) {
     //   this.getWxUserInfo();
     // }

src/app/my/article-read/article-read.component.html

+<div class="wrapper">
+  <ul style="background: #f6f6f6;">
+    <li>头像</li>
+    <li>昵称</li>
+    <li>性别</li>
+    <li>阅读时间</li>
+  </ul>
+  <ul>
+    <li>
+      <div class="headimg">
+        <img src="/assets/images/icons/meng.png" alt="头像">
+      </div>
+    </li>
+    <li>曲终人未散</li>
+    <li>女</li>
+    <li>2021-05-08 11:41</li>
+  </ul>
+</div>
\ No newline at end of file

src/app/my/article-read/article-read.component.scss

+.wrapper{
+    ul{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        li{
+            height: 45px;
+            line-height: 45px;
+            color: #333333;
+            width: 28%;
+            text-align: center;
+            .headimg{
+                width: 45px;
+                height: 45px;
+                text-align: center;
+                margin: 0 auto;
+                overflow: hidden;
+                border-radius: 50%;
+            }
+        }
+        li:nth-child(3){
+            width: 10%;
+        }
+        li:nth-child(4){
+            width: 30%;
+        }
+    }
+}
\ No newline at end of file

src/app/my/article-read/article-read.component.spec.ts

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

src/app/my/article-read/article-read.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ydlife-article-read',
+  templateUrl: './article-read.component.html',
+  styleUrls: ['./article-read.component.scss']
+})
+export class ArticleReadComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/my/article/article.component.html

@@ -10,15 +10,18 @@
   </ul>
   <div class="article_wrapper">
     <ul>
-      <li *ngFor="let articleItem of articleList" (click)="articleDetail(articleItem)">
-        <div class="left">
+      <li *ngFor="let articleItem of articleList" >
+        <div class="left" (click)="articleDetail(articleItem)">
           <div class="title">{{articleItem.title}}</div>
           <div class="digest">{{lifeCommonService.getTwenty(articleItem.digest,46)}}</div>
           <div class="updateAt" style="font-size: 12px;color:#8a8a8a;margin-top: 3px;">{{articleItem.updatedAt}}</div>
         </div>
-        <div class="right">
+        <div class="right" (click)="articleDetail(articleItem)">
           <img [src]="articleItem.coverUrl">
         </div>
+        <div class="read" (click)="whoRead(articleItem)">
+          <span>72人已阅读</span> 
+          <span class="iconfont icon-ar-r"></span></div>
       </li>
       <div class="more" *ngIf="paginationInfo?.pageNum<totalPage" (click)="lookMore()">
         查看更多

src/app/my/article/article.component.scss

@@ -34,6 +34,7 @@
                 justify-content: space-between;
                 border-bottom: 1px #dbdbdb solid;
                 padding: 15px 0;
+                flex-wrap: wrap;
                 .right{
                     width: 40%;
                     img{
@@ -52,6 +53,12 @@
                         width:100%;
                     }
                 }
+                .read{
+                  font-size: 15px;
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: baseline;
+                }
             }
             li:last-child{
                 border-bottom: 0;

src/app/my/article/article.component.ts

@@ -77,4 +77,7 @@ export class ArticleComponent implements OnInit {
     this.router.navigate(['/articleDetail',articleItem.id]);
   }
 
+  whoRead(articleItem){
+    this.router.navigate(['/article_read',articleItem.id])
+  }
 }

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

@@ -51,6 +51,7 @@ import { HistoricalRankComponent } from './historical-rank/historical-rank.compo
 import { TeamAreaPanelComponent } from './team-area-panel/team-area-panel.component';
 import { ArticleComponent } from './article/article.component';
 import { ArticleDetailComponent } from './article-detail/article-detail.component';
+import { ArticleReadComponent } from './article-read/article-read.component';
 
 const myRoutes: Routes = [
   { path: '', component: MyCenterHomeComponent, canActivate: [AuthGuard], data: [{ title: '银盾保险经纪 - 工作台' }] },
@@ -108,7 +109,8 @@ const myRoutes: Routes = [
   { path: 'historical_rank', component: HistoricalRankComponent, canActivate: [AuthGuard] },
   { path: 'team_area',component:TeamAreaPanelComponent, canActivate: [AuthGuard]},
   { path: 'article', component:ArticleComponent},
-  { path: 'articleDetail/:id',component:ArticleDetailComponent}
+  { path: 'articleDetail/:id',component:ArticleDetailComponent},
+  { path: 'article_read/:id',component:ArticleReadComponent,canActivate:[AuthGuard]}
 ];
 
 @NgModule({

src/app/my/my.module.ts

@@ -63,9 +63,10 @@ import { ArticleComponent } from './article/article.component';
 import { ArticleDetailComponent } from './article-detail/article-detail.component';
 //富文本编辑器
 import { UEditorModule } from 'ngx-ueditor';
+import { ArticleReadComponent } from './article-read/article-read.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],
+  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],
   imports: [
     CommonModule,
     LifeCommonModule,