s202226701053/E-Cover-app/src/lib/component/post-detail/post-detail.component.html

<!--头部-->
<app-custom-header [param]="['帖子详情','    ']"></app-custom-header>
<!--正文内容-->
<ion-content (click)="notcomment()">
    <!--帖子-->
    <div class="post">
        <div class="post-header">
            <div class="avatar">
                <img src="{{post?.get('UserID')?.avatar}}" alt="User Avatar" class="avatar-image">
            </div>
            <div class="user-info">
                <span class="username">{{ post?.get('UserID')?.name }}</span>
                <!--关注按钮-->
                <div [ngClass]="isFollowed ? 'fan-button' : 'follow-button'" (click)="toggleFollow()">
                    <div *ngIf="!isFollowed" class="distance">+</div>
                    <span *ngIf="!isFollowed">关注</span>
                    <span *ngIf="isFollowed">已关注</span>
                </div>

            </div>
        </div>
        <h2 class="post-title">{{post?.get('title')}}</h2>
        <!--标签-->
        <div class="tag-container">
            <div class="tag" *ngFor="let tag of post?.data?.tag">
                <ion-icon name="bookmark-outline" class="tagpicture"></ion-icon>{{tag}}
            </div>
        </div>

        <p class="post-content-text">{{post?.get('content')}}</p> <!--内容-->
        <div class="image-gallery">
            <img src="{{image}}" alt="Post Image" class="post-image" *ngFor="let image of post?.data?.image">

        </div>

    </div>

    <!-- 评论区域 -->
 <div class="comment-section">
    <h3 class="comment-title">全部评论({{comments.length}})</h3>
    
    <div *ngFor="let comment of comments" class="comment">
      <div class="comment-box">
        <div class="comment-left">
          <div class="comment-avatar">
            <img src="{{ comment.get('UserID')?.avatar }}" alt="User Avatar" class="comment-avatar-image">
          </div>
          <span class="floor">{{comments.indexOf(comment) + 1}}L</span>
        </div>
        
        <div class="comment-middle">
  
          <div class="comment-content">
            <span class="comment-username">{{ comment.get('UserID')?.name }}</span>
            <p class="comment-text">{{ comment.get('content') }}</p>
            <span class="time-ago">{{ formatTimeAgo(comment.createdAt) }}</span>
          </div>
        </div>
        
        <div class="comment-right" (click)="toggleLike(comment)">
          <ion-icon name="heart-outline" class="like-icon" style=" margin-right:8px" 
          [name]="comment.commentisLiked ? 'heart' : 'heart-outline'" 
          [style.color]="comment.commentisLiked ? 'red' : 'black'" ></ion-icon>
          <span class="like-count">{{ comment.data['like'] }}</span>
        </div>
      </div>
    </div>
  
  </div>
  
  </ion-content>

<!-- 表情模拟框 -->
<ion-modal [isOpen]="isEmojiPickerOpen" (didDismiss)="closeEmojiPicker()" [initialBreakpoint]="0.71" [breakpoints]="[0, 0.25,0.50,0.71]" handleBehavior="cycle">
    <ng-template>
      <ion-content class="emoji-picker">
        <div class="emoji-container">
          <div *ngFor="let emoji of emojis" (click)="addEmoji(emoji)" class="emoji-buttons"> <!-- 表情按钮 -->
            {{ emoji }}
          </div>
        </div>
      </ion-content>
    </ng-template>
  </ion-modal>
  
  
   <!-- 评论输入框 -->
  <ion-footer *ngIf="isfooter">
    <div class="comment-input-container">
      <ion-icon name="share-social-outline" class="share-icon"></ion-icon>
      <ion-textarea [(ngModel)]="newComment" placeholder="写个评论互动下~" class="comment-input" (click)="tocomment()"></ion-textarea>
      <div class="comment-buttons">
        <ion-button (click)="tocomment()" class="comment-button" >
          <ion-icon name="chatbubble-ellipses-outline" style="font-size: 30px; margin-right:8px"></ion-icon> 
          <span>{{comments.length}}</span>
        </ion-button>
        <ion-icon class="like-button" [name]="post?.postisLiked ? 'heart' : 'heart-outline'"
        [style.color]="post?.postisLiked ? 'red' : 'black'" (click)="toLike()"></ion-icon>
        <span>{{post?.data['like']}}</span>
      </div>
    </div>
  </ion-footer>
  
  <ion-footer *ngIf="!isfooter">
    <div class="comment-input-container">
      <ion-textarea [(ngModel)]="newComment" placeholder="写个评论互动下~" class="comment-input1" >
        <div fill="clear" (click)="openEmojiPicker()"  class="emoji-button">
          <ion-icon name="happy-outline" style="color:#ccc; font-size: 40px;" class="emoji" slot="end"></ion-icon> <!--表情符号-->
        </div>
      </ion-textarea>
      <ion-button [ngClass]="newComment.trim()? 'send-button1':'send-button'" (click)="submitComment()">
       发送
      </ion-button>
    </div>
  
  
  </ion-footer>