pocketcommunityweb/src/app/forum/forum.component.html

<!--公告轮播-->
<ng-container *ngIf="notices;else fff">
  <div id="carouselExampleControls" class="carousel slide bg-info m-3" data-ride="carousel">
    <div class="carousel-inner">
      <ng-container *ngFor="let notice of notices;first as isFirst">
        <div class="carousel-item" [class.active]="isFirst"  >
          <!--公告栏-->
          <div class="notice bg-light col-5 mx-auto">
            <!--  公告标志-->
            <h1 class="text-center mb-3">{{ 'forum.notice' | translate }}</h1>
            <!--  公告内容-->
            <div class="notice-content border-success mt-3 mb-3 position-relative">
              <!--    公告标题-->
              <h2 class="text-center mb-3 mt-3">{{notice.title}}</h2>
              <!--    公告正文-->
              <div class="notice-body overflow-auto p-3">
                {{notice.content}}
              </div>
              <!--    公告底部-->
              <div class="notice-footer border border-info text-right align-text-bottom position-absolute">
                <div class="col-12">{{ 'forum.sender' | translate }} ：{{notice.managerName}}<br>{{ 'forum.time' | translate }}：{{notice.createTime|date:'yyyy-MM-dd HH:mm:ss'}}</div>
              </div>
            </div>
          </div>
        </div>
      </ng-container>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</ng-container>
<ng-template #fff>
  <div class="text-center">
    <div class="spinner-border load" role="status">
      <span class="sr-only">Loading...</span>
    </div>
    <h1>{{'forum.load_notices'|translate}}</h1>
  </div>
</ng-template>


<!--审核贴-->
<div class="row border-warning check m-3">
  <!--  审核帖标识-->
  <h1 class="text-info col-12 text-center">{{ 'forum.check' | translate }}</h1>

  <ng-container *ngIf="posts;else ggg">
  <div class="col-3">

    <!--帖子列表-->
    <ul class="list-group">
      <!--      帖子列表-->
      <li class="list-group-item" (click)="currentIndex=i" [class.active]="currentIndex===i"  *ngFor="let post of posts.list;index as i">{{post.title}}</li>
    </ul>

    <!--    分页按钮-->
    <ul class="pagination ml-5 mt-3">
      <li class="page-item" [class.disabled]="posts.page.currentPage-1===0"><a class="page-link btn"  (click)="getAllPosts(posts.page.currentPage-1)">{{'button.prev_page'|translate}}</a></li>
      <li class="page-item active"><a class="page-link btn"  (click)="getAllPosts(posts.page.currentPage)">{{posts.page.currentPage}}</a></li>
      <li class="page-item"><a class="page-link btn"  *ngIf="posts.page.currentPage+1<=posts.page.page" (click)="getAllPosts(posts.page.currentPage+1)">{{posts.page.currentPage+1}}</a></li>
      <li class="page-item"><a class="page-link btn"  *ngIf="posts.page.currentPage+2<=posts.page.page" (click)="getAllPosts(posts.page.currentPage+2)">{{posts.page.currentPage+2}}</a></li>
      <li class="page-item" [class.disabled]="posts.page.currentPage===posts.page.page"><a class="page-link btn"  (click)="getAllPosts(posts.page.currentPage+1)">{{'button.next_page'|translate}}</a></li>
    </ul>

  </div>

  <!--  帖子内容-->
  <div class="col-9 post border-secondary p-3 position-relative">

    <!--    活动帖子-->
    <ng-container *ngIf="this.posts.list[this.currentIndex].type==='active';else elseBlock;">

      <!--      发件人信息-->
      <div class="position-absolute sender">
        <!--    发帖人头像-->
        <img [src]="getActive().headImg" alt="headimg" class="headimg mb-3"/>
        <!--    发帖人-->
        <div class="forum-label border-info mb-3 text-center">
          {{getActive().issuer}}
        </div>
        <!--信用分-->
        <div class="forum-label border-info mb-3 text-center">
          {{getActive().userCreditScore}}
        </div>
      </div>

      <!--      帖子框架-->
      <div>
        <!--    标题-->
        <h1 class="text-info col-12 text-center mb-3 forum-title">{{getActive().title}}</h1>
        <!--    帖子正文-->
        <div class="forum-content border-info overflow-auto col-9 offset-2 mb-3">
          {{getActive().content}}
        </div>
        <!--    帖子底部-->
        <div class="forum-footer border-info p-3 mb-3">
          <h3 class="text-center">{{ 'forum.active_date' | translate:{
            startDate: getActive().startTime|date:'yyyy-MM-dd',
            endDate: getActive().endTime|date:'yyyy-MM-dd'
          } }}</h3>
          <h3 class="text-center">{{ 'forum.active_score' | translate:{score: getActive().activeCreditScore} }}</h3>
        </div>
      </div>

    </ng-container>
    <!--    投诉帖子-->
    <ng-template #elseBlock>
      <div class="complaint row p-3">

        <div class="col-5 border-info l-label h-100 d-flex justify-content-around">

          <!--      投诉人信息-->
          <div class="col-6 border-info l-label">
            <div class="text-center">{{'forum.plaintiff'|translate}}</div>
            <!--            头像-->
            <div class="d-flex justify-content-center mb-3 m-headimg">
              <img [src]="getComplaint().plaintiffHeadImg" alt="headimg" class="headimg">
            </div>
            <div class="text-center border-info mb-3 l-label">{{getComplaint().plaintiffName}}</div>
            <div class="text-center border-info l-label">{{getComplaint().plaintiffCreditScore}}</div>
          </div>

          <!--          被投诉人信息-->
          <div class="col-6 border-info l-label">
            <div class="text-center">{{'forum.defendant'|translate}}</div>
            <div class="d-flex justify-content-center mb-3 m-headimg">
              <!--              头像-->
              <img [src]="getComplaint().defendantHeadImg" alt="headimg" class="headimg">
            </div>
            <div class="text-center border-info mb-3 l-label">{{getComplaint().defendantName}}</div>
            <div class="text-center border-info l-label">{{getComplaint().defendantCreditScore}}</div>
          </div>

        </div>


        <!--      投诉内容-->
        <div class="col-7 border-success l-label h-100">
          <!--          投诉项-->
          <h1 class="text-center">{{getComplaint().title}}</h1>
          <!--          投诉内容-->
          <div class="forum-content border-info overflow-auto mb-3">
            {{getComplaint().content}}
          </div>
          <!--          投诉时间-->
          <h1 class="text-center">{{ 'forum.complaint_time' | translate:{time: getComplaint().time|date:'yyyy-MM-dd'} }}</h1>
        </div>
      </div>
    </ng-template>

    <!--帖子审核按钮-->
    <div class="col-12 text-center">
      <button class="btn btn-info col-2 mr-3" (click)="checkPost(0)">{{ 'forum.approve' | translate }}</button>
      <button class="btn btn-danger col-2" (click)="checkPost(1)">{{ 'forum.reject' | translate }}</button>
    </div>
  </div>
  </ng-container>
  <ng-template #ggg>
    <div class="text-center col-12">
      <div class="spinner-border load" role="status">
        <span class="sr-only">Loading...</span>
      </div>
      <h1>{{'forum.load_posts'|translate}}</h1>
    </div>
  </ng-template>

</div>