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

<!--公告轮播-->
<ng-container *ngIf="notices;else load_notice_err">
  <h1 *ngIf="notices.length==0;else notice_temp"
      class="text-center col-12 m-3">{{prefix('notice.zero')|translate}}</h1>
  <ng-template #notice_temp>
    <div id="carouselExampleControls" class="carousel slide bg-info m-3 bg-white" 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">
              <!--  公告标志-->
              <div class="">
                <h1 class="text-center mb-3">{{ 'forum.notice' | translate }}</h1>
                <button [title]="this.prefix('delete')|translate" (click)="deleteNotice(notice.id)"
                        class="position-absolute delete_notice btn btn-outline-danger">
                  <svg class="icon" viewBox="0 0 1024 1024"
                       xmlns="http://www.w3.org/2000/svg" width="20" height="20">
                    <path
                      d="M810.666667 273.493333L750.506667 213.333333 512 451.84 273.493333 213.333333 213.333333 273.493333 451.84 512 213.333333 750.506667 273.493333 810.666667 512 572.16 750.506667 810.666667 810.666667 750.506667 572.16 512z"
                    >
                    </path>
                  </svg>
                </button>
              </div>
              <!--  公告内容-->
              <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.author}}
                    <br>{{ 'forum.time' | translate }}：{{notice.time|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-template>
  <div class="col-7 mx-auto text-center mb-3">
    <button routerLink="/notice" class="btn btn-outline-info">{{'forum.add_more_notice'|translate}}</button>
  </div>
</ng-container>
<ng-template #load_notice_err>
  <div class="text-center">
    <div class="spinner-border load" role="status">
      <span class="sr-only">Loading...</span>
    </div>
    <h1>{{this.prefix('notice.' + loadNoticesStatus)|translate}}</h1>
  </div>
</ng-template>


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

  <ng-container *ngIf="posts;else load_posts_err">
    <h1 *ngIf="posts.forumList.empty;else post_temp"
        class="text-center col-12 m-3">{{prefix('posts.zero')|translate}}</h1>

    <ng-template #post_temp>
      <div class="col-3  d-flex flex-column justify-content-between align-content-center">

        <!--帖子列表-->
        <ul class="list-group flex-grow-1" style="background: #eee;">
          <!--      帖子列表-->
          <li class="list-group-item mb-2" (click)="currentIndex=i" [class.active]="currentIndex===i"
              *ngFor="let post of posts.forumList.list;index as i">{{post.title}}</li>
        </ul>

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

      </div>

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

        <!--    活动帖子-->

        <ng-container [ngSwitch]="getForum().forumType">

          <!--          活动贴-->
          <ng-container *ngSwitchCase="activeType">
            <div class="row">
               <!--    标题-->
              <h1 class="text-info col-12 text-center forum-title">{{getForum().title}}</h1>
            </div>
            <div class="row justify-content-around flex-nowrap mb-3">
              <div class="col-3">
                <!--      发件人信息-->
                <div class="card">
                  <!--    发帖人头像-->
                  <img [src]="getHeadImg(getForum().info.headImg)" class="img-responsive card-img-top" alt="headimg">
                  <ul class="list-group list-group-flush">
                    <!--    发帖人-->
                    <li class="list-group-item">昵称：{{getForum().username}}</li>
                    <!--信用分-->
                    <li class="list-group-item">信用分：{{getForum().info.creditScore}}</li>
                  </ul>
                </div>
              </div>
                <!--      帖子框架-->
                <div class="col-9 flex-column justify-content-between">
            
                  <!--    帖子正文-->
                  <div class="forum-content border-info overflow-auto  d-flxe flex-column justify-content-between">
                    <div class="flex-grow-1">
                      {{getContent().content}}
                    </div>
                    <!--    帖子底部-->
                    <div class="forum-footer border-info text-right p-3 mb-3">
                      <div>
                        {{'forum.deadline'|translate:{endDate: (getActive().registrationDeadline|date:dateFormat)} }}</div>
                      <div>{{ 'forum.active_date' | translate:{
                                    startDate: getActive().activeStartTime|date:dateFormat,
                                    endDate: getActive().activeEndTime|date:dateFormat
                                  } }}</div>
                      <div>{{ 'forum.active_score' | translate:{score: getActive().activeScore} }}</div>
                    </div>
                  </div>
              </div>
            </div>
          </ng-container>

          <!--    投诉帖子-->
          <ng-container *ngSwitchCase="complanType">
            <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]="getHeadImg(getForum().info.headImg)" alt="headimg" class="headimg">
                  </div>
                  <div class="text-center border-info mb-3 l-label">{{getForum().username}}</div>
                  <div class="text-center border-info l-label">{{getForum().info.creditScore}}</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]="getHeadImg(getComplaint().info.headImg)" alt="headimg" class="headimg">
                  </div>
                  <div class="text-center border-info mb-3 l-label">{{getComplaint().complain}}</div>
                  <div class="text-center border-info l-label">{{getComplaint().info.creditScore}}</div>
                </div>

              </div>


              <!--      投诉内容-->
              <div class="col-7 border-success l-label h-100">
                <!--          投诉项-->
                <h1 class="text-center">{{getForum().title}}</h1>
                <!--          投诉内容-->
                <div class="forum-content border-info overflow-auto mb-3">
                  {{getContent().content}}
                </div>
                <!--          投诉时间-->
                <h1
                  class="text-center">{{ 'forum.complaint_time' | translate:{time: getForum().time|date:dateFormat} }}</h1>
              </div>
            </div>
          </ng-container>
          <!--          动态帖子-->
          <ng-container *ngSwitchCase="topicType">
            <!--      发件人信息-->
            <div class="position-absolute sender">
              <!--    发帖人头像-->
              <img [src]="getHeadImg(getForum().info.headImg)" alt="headimg" class="headimg mb-3"/>
              <!--    发帖人-->
              <div class="forum-label border-info mb-3 text-center">
                {{getForum().username}}
              </div>
              <!--信用分-->
              <div class="forum-label border-info mb-3 text-center">
                {{getForum().info.creditScore}}
              </div>
            </div>

            <!--      帖子框架-->
            <div>
              <!--    标题-->
              <h1 class="text-info col-12 text-center mb-3 forum-title">{{getForum().title}}</h1>
              <!--    帖子正文-->
              <div class="forum-content border-info overflow-auto col-9 offset-2 mb-3">
                {{getContent().content}}
              </div>
            </div>
          </ng-container>

          <ng-container *ngSwitchCase="scoreType">
            <!--      发件人信息-->
            <div class="position-absolute sender">
              <!--    发帖人头像-->
              <img [src]="getHeadImg(getForum().info.headImg)" alt="headimg" class="headimg mb-3"/>
              <!--    发帖人-->
              <div class="forum-label border-info mb-3 text-center">
                {{getForum().username}}
              </div>
              <!--信用分-->
              <div class="forum-label border-info mb-3 text-center">
                {{getForum().info.creditScore}}
              </div>
            </div>


            <!--      帖子框架-->
            <div>
              <!--    标题-->
              <h1 class="text-info col-12 text-center mb-3 forum-title">{{getForum().title}}</h1>
              <!--    帖子正文-->
              <div class="forum-content border-info overflow-auto col-9 offset-2 mb-3">
                {{getContent().content}}
              </div>
              <!--    帖子底部-->
              <div class="forum-footer border-info p-3 mb-3">
                <h3
                  class="text-center">{{ 'forum.active_score' | translate:{score: getScore().activeScore} }}</h3>
              </div>
            </div>


          </ng-container>

        </ng-container>
        <!--帖子审核按钮-->
        <div class="row">
          <div class="col-12 text-center">
            <button class="btn btn-info col-2 mr-3 btn-border" (click)="checkPost(okType)">{{ 'forum.approve' | translate }}</button>
            <button class="btn btn-danger col-2 btn-border" (click)="checkPost(failType)">{{ 'forum.reject' | translate }}</button>
          </div>
        </div>

      </div>

    </ng-template>
  </ng-container>
  <ng-template #load_posts_err>
    <div class="text-center col-12">
      <div class="spinner-border load" role="status">
        <span class="sr-only">Loading...</span>
      </div>
      <h1>{{this.prefix('posts.' + loadPostsStatus)|translate}}</h1>
    </div>
  </ng-template>

</div>