|
@@ -3,109 +3,99 @@
|
|
|
<ion-buttons slot="start">
|
|
|
<ion-back-button defaultHref="/home"></ion-back-button>
|
|
|
</ion-buttons>
|
|
|
- <ion-title>帖子详情</ion-title>
|
|
|
+ <ion-title>{{ post?.title }}</ion-title>
|
|
|
</ion-toolbar>
|
|
|
</ion-header>
|
|
|
|
|
|
<ion-content>
|
|
|
- <!-- 内容区 -->
|
|
|
- <ion-card>
|
|
|
+ <ion-card *ngIf="post">
|
|
|
<ion-card-header>
|
|
|
- <ion-item lines="none">
|
|
|
- <ion-avatar slot="start" (click)="generateTestComments()">
|
|
|
+ <ion-card-title>{{ post.title }}</ion-card-title>
|
|
|
+ <ion-card-subtitle>
|
|
|
+ <ion-avatar slot="start">
|
|
|
<img [src]="post.authorAvatar" />
|
|
|
</ion-avatar>
|
|
|
- <ion-label>
|
|
|
- <h2>{{ post.author }}</h2>
|
|
|
- <p>{{ post.time | date: 'short' }}</p>
|
|
|
- </ion-label>
|
|
|
- </ion-item>
|
|
|
+ {{ post.author }} · {{ post.time | date:'short' }}
|
|
|
+ </ion-card-subtitle>
|
|
|
</ion-card-header>
|
|
|
<ion-card-content>
|
|
|
- <h2>{{ post.title }}</h2>
|
|
|
- <img [src]="post.image" *ngIf="post.image" />
|
|
|
+ <img [src]="post.image" *ngIf="post.image"/>
|
|
|
<p>{{ post.content }}</p>
|
|
|
+ <ion-chip>
|
|
|
+ <ion-icon name="thumbs-up" (click)="togglePostLike()"></ion-icon>
|
|
|
+ <ion-label>{{ post.likes }}</ion-label>
|
|
|
+ </ion-chip>
|
|
|
+ <ion-button expand="block" (click)="replyToPost()">回复帖子</ion-button>
|
|
|
</ion-card-content>
|
|
|
- <ion-item lines="none">
|
|
|
- <ion-button fill="clear" slot="start" (click)="togglePostLike()">
|
|
|
- <ion-icon name="thumbs-up"></ion-icon>
|
|
|
- <ion-label>{{ post.likes }} 点赞</ion-label>
|
|
|
- </ion-button>
|
|
|
- <ion-button fill="clear" slot="end" (click)="sharePost()">
|
|
|
- <ion-icon name="share-social"></ion-icon>
|
|
|
- <ion-label>分享</ion-label>
|
|
|
- </ion-button>
|
|
|
- <ion-button fill="clear" slot="end" (click)="replyToPost()">
|
|
|
- <ion-icon name="chatbubble-ellipses"></ion-icon>
|
|
|
- <ion-label>回复</ion-label>
|
|
|
- </ion-button>
|
|
|
- </ion-item>
|
|
|
</ion-card>
|
|
|
|
|
|
- <!-- 评论区 -->
|
|
|
- <ion-segment value="all">
|
|
|
- <ion-segment-button value="all">
|
|
|
- <ion-label>全部回复</ion-label>
|
|
|
- </ion-segment-button>
|
|
|
- <ion-segment-button value="author">
|
|
|
- <ion-label>只看楼主</ion-label>
|
|
|
- </ion-segment-button>
|
|
|
- </ion-segment>
|
|
|
-
|
|
|
- <ion-segment value="popular" (ionChange)="sortComments($event)">
|
|
|
- <ion-segment-button value="popular">
|
|
|
- <ion-label>热门</ion-label>
|
|
|
- </ion-segment-button>
|
|
|
- <ion-segment-button value="asc">
|
|
|
- <ion-label>时间正序</ion-label>
|
|
|
- </ion-segment-button>
|
|
|
- <ion-segment-button value="desc">
|
|
|
- <ion-label>时间倒序</ion-label></ion-segment-button>
|
|
|
- </ion-segment>
|
|
|
-
|
|
|
- <ion-list>
|
|
|
- <ion-item *ngFor="let comment of comments" (click)="replyToComment(comment)">
|
|
|
+ <ion-list *ngIf="comments.length > 0">
|
|
|
+ <ion-list-header>
|
|
|
+ <ion-label>评论 ({{ post?.commentsCount }})</ion-label>
|
|
|
+ <ion-select placeholder="排序" (ionChange)="sortComments($event)">
|
|
|
+ <ion-select-option value="popular">按赞同数</ion-select-option>
|
|
|
+ <ion-select-option value="asc">时间正序</ion-select-option>
|
|
|
+ <ion-select-option value="desc">时间倒序</ion-select-option>
|
|
|
+ </ion-select>
|
|
|
+ </ion-list-header>
|
|
|
+ <ion-item *ngFor="let comment of comments">
|
|
|
<ion-avatar slot="start">
|
|
|
<img [src]="comment.authorAvatar" />
|
|
|
</ion-avatar>
|
|
|
<ion-label>
|
|
|
<h2>{{ comment.author }}</h2>
|
|
|
<p>{{ comment.content }}</p>
|
|
|
- <p>{{ comment.time | date: 'short' }}</p>
|
|
|
- <p>楼层: {{ comment.floor }} | 点赞: {{ comment.likes }}</p>
|
|
|
- <ion-item *ngFor="let reply of comment.replies" lines="none">
|
|
|
- <ion-label>
|
|
|
- <small>{{ reply.author }}: {{ reply.content }} - {{ reply.time | date: 'short' }}</small>
|
|
|
- </ion-label>
|
|
|
- <ion-button fill="clear" slot="end" (click)="toggleLike(reply)">
|
|
|
- <ion-icon name="thumbs-up"></ion-icon>
|
|
|
- <ion-label>{{ reply.likes }}</ion-label>
|
|
|
- </ion-button>
|
|
|
- <ion-button fill="clear" slot="end" (click)="replyToComment(reply)">
|
|
|
- <ion-icon name="chatbubble-ellipses"></ion-icon>
|
|
|
- <ion-label>回复</ion-label>
|
|
|
- </ion-button>
|
|
|
- </ion-item>
|
|
|
+ <p>{{ comment.time | date:'short' }}</p>
|
|
|
+ <ion-chip>
|
|
|
+ <ion-icon name="thumbs-up" (click)="toggleLike(comment)"></ion-icon>
|
|
|
+ <ion-label>{{ comment.likes }}</ion-label>
|
|
|
+ </ion-chip>
|
|
|
+ <ion-button size="small" (click)="replyToComment(comment)">回复</ion-button>
|
|
|
+ <ion-list *ngIf="comment.replies.length > 0">
|
|
|
+ <ion-item *ngFor="let reply of comment.replies">
|
|
|
+ <ion-avatar slot="start">
|
|
|
+ <img [src]="reply.authorAvatar" />
|
|
|
+ </ion-avatar>
|
|
|
+ <ion-label>
|
|
|
+ <h2>{{ reply.author }}</h2>
|
|
|
+ <p>{{ reply.content }}</p>
|
|
|
+ <p>{{ reply.time | date:'short' }}</p>
|
|
|
+ <ion-chip>
|
|
|
+ <ion-icon name="thumbs-up" (click)="toggleLike(reply)"></ion-icon>
|
|
|
+ <ion-label>{{ reply.likes }}</ion-label>
|
|
|
+ </ion-chip>
|
|
|
+ </ion-label>
|
|
|
+ </ion-item>
|
|
|
+ </ion-list>
|
|
|
</ion-label>
|
|
|
- <ion-button fill="clear" slot="end" (click)="toggleLike(comment)">
|
|
|
- <ion-icon name="thumbs-up"></ion-icon>
|
|
|
- <ion-label>{{ comment.likes }}</ion-label>
|
|
|
- </ion-button>
|
|
|
</ion-item>
|
|
|
</ion-list>
|
|
|
</ion-content>
|
|
|
|
|
|
-<!-- 分享二维码模态框 -->
|
|
|
+
|
|
|
<ion-modal #shareModal>
|
|
|
<ion-header>
|
|
|
<ion-toolbar>
|
|
|
- <ion-title>分享帖子</ion-title>
|
|
|
+ <ion-title>分享</ion-title>
|
|
|
<ion-buttons slot="end">
|
|
|
<ion-button (click)="shareModal.dismiss()">关闭</ion-button>
|
|
|
</ion-buttons>
|
|
|
</ion-toolbar>
|
|
|
</ion-header>
|
|
|
<ion-content>
|
|
|
- <ion-img src="assets/images/123456.png"></ion-img>
|
|
|
+ <ion-list>
|
|
|
+ <ion-item>
|
|
|
+ <ion-label>分享链接</ion-label>
|
|
|
+ <ion-button (click)="shareModal.dismiss()">复制链接</ion-button>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item>
|
|
|
+ <ion-label>分享到微信</ion-label>
|
|
|
+ <ion-button (click)="shareModal.dismiss()">分享</ion-button>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item>
|
|
|
+ <ion-label>分享到微博</ion-label>
|
|
|
+ <ion-button (click)="shareModal.dismiss()">分享</ion-button>
|
|
|
+ </ion-item>
|
|
|
+ </ion-list>
|
|
|
</ion-content>
|
|
|
</ion-modal>
|