|
@@ -3,164 +3,157 @@
|
|
|
<ion-title>
|
|
|
消息
|
|
|
</ion-title>
|
|
|
- <ion-button slot="end" (click)="openSettingsPage()">
|
|
|
- <ion-icon name="settings-outline"></ion-icon>
|
|
|
- </ion-button>
|
|
|
-
|
|
|
+ <ion-button slot="end" (click)="openSettingsPage()">
|
|
|
+ <ion-icon name="settings-outline"></ion-icon>
|
|
|
+ </ion-button>
|
|
|
+
|
|
|
</ion-toolbar>
|
|
|
</ion-header>
|
|
|
|
|
|
<ion-content>
|
|
|
-<div style="background-color: rgb(245, 246, 246);">
|
|
|
- <ion-searchbar placeholder="输入关键字搜索"></ion-searchbar>
|
|
|
- <ion-card class="card">
|
|
|
- <ion-card-header >
|
|
|
- <ion-card-title style="color: rgb(0, 4, 255);">最新推荐</ion-card-title>
|
|
|
- </ion-card-header>
|
|
|
- <ion-card-content >
|
|
|
- <ion-avatar>
|
|
|
- <ion-img src="assets/img/a.png"></ion-img>
|
|
|
- </ion-avatar>
|
|
|
- <ion-label>用户名</ion-label><br>
|
|
|
- <ion-label>标签</ion-label><br>
|
|
|
- <ion-label>聊天内容</ion-label>
|
|
|
- <ion-button expand="block">免费提问</ion-button>
|
|
|
- </ion-card-content>
|
|
|
- </ion-card>
|
|
|
- <div style="display: flex; flex-direction: column;">
|
|
|
- <ion-segment [ngModelOptions]="{standalone:true}" [(ngModel)]="activeTab" (ionChange)="changeTab($event)">
|
|
|
- <ion-segment-button value="explore">
|
|
|
- <ion-icon name="chatbubble-ellipses"></ion-icon>
|
|
|
- 评论和回复
|
|
|
- </ion-segment-button>
|
|
|
- <ion-segment-button value="video">
|
|
|
- <ion-icon name="thumbs-up"></ion-icon>
|
|
|
- 赞与收藏
|
|
|
- </ion-segment-button>
|
|
|
- <ion-segment-button value="search">
|
|
|
- <ion-icon name="person-add"></ion-icon>
|
|
|
- 新增关注
|
|
|
- </ion-segment-button>
|
|
|
- <ion-segment-button value="system">
|
|
|
- <ion-icon name="notifications"></ion-icon>
|
|
|
- 系统消息
|
|
|
- </ion-segment-button>
|
|
|
- </ion-segment>
|
|
|
- <div *ngIf="activeTab === 'explore'" >
|
|
|
- <ion-item>
|
|
|
- <ion-avatar slot="start">
|
|
|
- <ion-img src="assets/img/b.png"></ion-img>
|
|
|
- </ion-avatar>
|
|
|
- <ion-label>
|
|
|
- <h2>小刘爱装修</h2>
|
|
|
- <p>你觉得这个设计怎么样</p>
|
|
|
- </ion-label>
|
|
|
- </ion-item>
|
|
|
- <ion-item>
|
|
|
- <ion-avatar slot="start">
|
|
|
- <ion-img src="assets/img/g.png"></ion-img>
|
|
|
- </ion-avatar>
|
|
|
- <ion-label>
|
|
|
- <h2>西瓜</h2>
|
|
|
- <p>你好呀,想咨询点事</p>
|
|
|
- </ion-label>
|
|
|
- </ion-item>
|
|
|
- <ion-item>
|
|
|
- <ion-input placeholder="添加评论" ></ion-input>
|
|
|
- <ion-button slot="end" (click)="sendComment()">
|
|
|
- <ion-icon name="send"></ion-icon>
|
|
|
- </ion-button>
|
|
|
- </ion-item>
|
|
|
- </div>
|
|
|
- <div *ngIf="activeTab === 'video'">
|
|
|
- <ion-item>
|
|
|
- <ion-avatar slot="start">
|
|
|
- <ion-img src="assets/img/e.png"></ion-img>
|
|
|
- </ion-avatar>
|
|
|
- <ion-label>
|
|
|
- <h2>小雨</h2>
|
|
|
- <p>1</p>
|
|
|
- </ion-label>
|
|
|
- <ion-buttons slot="end">
|
|
|
- <ion-button (click)="likePost(1)">
|
|
|
- <ion-icon name="heart" [color]="isPostLiked(1) ? 'danger' : 'medium'"></ion-icon>
|
|
|
- </ion-button>
|
|
|
- <ion-button (click)="toggleFavorite(1)">
|
|
|
- <ion-icon name="star" [color]="isPostFavorite(1) ? 'warning' : 'medium'"></ion-icon>
|
|
|
- </ion-button>
|
|
|
- </ion-buttons>
|
|
|
- </ion-item>
|
|
|
- <ion-item>
|
|
|
- <ion-avatar slot="start">
|
|
|
- <ion-img src="assets/img/f.png"></ion-img>
|
|
|
- </ion-avatar>
|
|
|
- <ion-label>
|
|
|
- <h2>疯狂动物</h2>
|
|
|
- <p>2</p>
|
|
|
- </ion-label>
|
|
|
- <ion-buttons slot="end">
|
|
|
- <ion-button (click)="likePost(2)">
|
|
|
- <ion-icon name="heart" [color]="isPostLiked(2) ? 'danger' : 'medium'"></ion-icon>
|
|
|
- </ion-button>
|
|
|
- <ion-button (click)="toggleFavorite(2)">
|
|
|
- <ion-icon name="star" [color]="isPostFavorite(2) ? 'warning' : 'medium'"></ion-icon>
|
|
|
- </ion-button>
|
|
|
- </ion-buttons>
|
|
|
- </ion-item>
|
|
|
- </div>
|
|
|
- <div *ngIf="activeTab === 'search'">
|
|
|
- <ion-item>
|
|
|
- <ion-avatar slot="start">
|
|
|
- <ion-img src="assets/img/a.png"></ion-img>
|
|
|
- </ion-avatar>
|
|
|
- <ion-label>
|
|
|
- <h2>海底</h2>
|
|
|
- <p>这是一条内容1</p>
|
|
|
- </ion-label>
|
|
|
- <ion-button slot="end" (click)="toggleFollow(1)" color="primary" [fill]="isUserFollowed(1) ? 'solid' : 'outline'">
|
|
|
- {{ isUserFollowed(1) ? '已关注' : '关注' }}
|
|
|
- </ion-button>
|
|
|
- </ion-item>
|
|
|
+ <div style="background-color: rgb(245, 246, 246);">
|
|
|
+ <ion-searchbar placeholder="输入关键字搜索"></ion-searchbar>
|
|
|
+ <ion-card class="card">
|
|
|
+ <ion-card-header>
|
|
|
+ <ion-card-title style="color: rgb(0, 4, 255);">最新推荐</ion-card-title>
|
|
|
+ </ion-card-header>
|
|
|
+ <ion-card-content>
|
|
|
+ <ion-avatar>
|
|
|
+ <ion-img src="assets/img/a.png"></ion-img>
|
|
|
+ </ion-avatar>
|
|
|
+ <ion-label>用户名</ion-label><br>
|
|
|
+ <ion-label>标签</ion-label><br>
|
|
|
+ <ion-label>聊天内容</ion-label>
|
|
|
+ <ion-button expand="block">免费提问</ion-button>
|
|
|
+ </ion-card-content>
|
|
|
+ </ion-card>
|
|
|
+ <div style="display: flex; flex-direction: column;">
|
|
|
+ <ion-segment [ngModelOptions]="{standalone:true}" [(ngModel)]="activeTab" (ionChange)="changeTab($event)">
|
|
|
+ <ion-segment-button value="explore">
|
|
|
+ <ion-icon name="chatbubble-ellipses"></ion-icon>
|
|
|
+ 评论和回复
|
|
|
+ </ion-segment-button>
|
|
|
+ <ion-segment-button value="video">
|
|
|
+ <ion-icon name="thumbs-up"></ion-icon>
|
|
|
+ 赞与收藏
|
|
|
+ </ion-segment-button>
|
|
|
+ <ion-segment-button value="search">
|
|
|
+ <ion-icon name="person-add"></ion-icon>
|
|
|
+ 新增关注
|
|
|
+ </ion-segment-button>
|
|
|
+ <ion-segment-button value="system">
|
|
|
+ <ion-icon name="notifications"></ion-icon>
|
|
|
+ 系统消息
|
|
|
+ </ion-segment-button>
|
|
|
+ </ion-segment>
|
|
|
+ <div *ngIf="activeTab === 'explore'">
|
|
|
+ <ion-item *ngFor="let item of replyList">
|
|
|
+ <ion-avatar slot="start">
|
|
|
+ <ion-img src="{{item?.get('user')?.get('avatar')}}"></ion-img>
|
|
|
+ </ion-avatar>
|
|
|
+ <ion-label>
|
|
|
+ <h2>{{item?.get('user')?.get('username')}}</h2>
|
|
|
+ <p>{{item?.get('reply')}}</p>
|
|
|
+ </ion-label>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item>
|
|
|
+ <ion-input placeholder="添加评论" [ngModelOptions]="{standalone: true}" [(ngModel)]="comment"></ion-input>
|
|
|
+ <ion-button slot="end" (click)="saveComment()">
|
|
|
+ <ion-icon name="send"></ion-icon>
|
|
|
+ </ion-button>
|
|
|
+ </ion-item>
|
|
|
+ </div>
|
|
|
+ <div *ngIf="activeTab === 'video'">
|
|
|
+ <ion-item>
|
|
|
+ <ion-avatar slot="start">
|
|
|
+ <ion-img src="assets/img/e.png"></ion-img>
|
|
|
+ </ion-avatar>
|
|
|
+ <ion-label>
|
|
|
+ <h2>小雨</h2>
|
|
|
+ <p>1</p>
|
|
|
+ </ion-label>
|
|
|
+ <ion-buttons slot="end">
|
|
|
+ <ion-button (click)="likePost(1)">
|
|
|
+ <ion-icon name="heart" [color]="isPostLiked(1) ? 'danger' : 'medium'"></ion-icon>
|
|
|
+ </ion-button>
|
|
|
+ <ion-button (click)="toggleFavorite(1)">
|
|
|
+ <ion-icon name="star" [color]="isPostFavorite(1) ? 'warning' : 'medium'"></ion-icon>
|
|
|
+ </ion-button>
|
|
|
+ </ion-buttons>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item>
|
|
|
+ <ion-avatar slot="start">
|
|
|
+ <ion-img src="assets/img/f.png"></ion-img>
|
|
|
+ </ion-avatar>
|
|
|
+ <ion-label>
|
|
|
+ <h2>疯狂动物</h2>
|
|
|
+ <p>2</p>
|
|
|
+ </ion-label>
|
|
|
+ <ion-buttons slot="end">
|
|
|
+ <ion-button (click)="likePost(2)">
|
|
|
+ <ion-icon name="heart" [color]="isPostLiked(2) ? 'danger' : 'medium'"></ion-icon>
|
|
|
+ </ion-button>
|
|
|
+ <ion-button (click)="toggleFavorite(2)">
|
|
|
+ <ion-icon name="star" [color]="isPostFavorite(2) ? 'warning' : 'medium'"></ion-icon>
|
|
|
+ </ion-button>
|
|
|
+ </ion-buttons>
|
|
|
+ </ion-item>
|
|
|
+ </div>
|
|
|
+ <div *ngIf="activeTab === 'search'">
|
|
|
+ <ion-item>
|
|
|
+ <ion-avatar slot="start">
|
|
|
+ <ion-img src="assets/img/a.png"></ion-img>
|
|
|
+ </ion-avatar>
|
|
|
+ <ion-label>
|
|
|
+ <h2>海底</h2>
|
|
|
+ <p>这是一条内容1</p>
|
|
|
+ </ion-label>
|
|
|
+ <ion-button slot="end" (click)="toggleFollow(1)" color="primary"
|
|
|
+ [fill]="isUserFollowed(1) ? 'solid' : 'outline'">
|
|
|
+ {{ isUserFollowed(1) ? '已关注' : '关注' }}
|
|
|
+ </ion-button>
|
|
|
+ </ion-item>
|
|
|
|
|
|
- <ion-item>
|
|
|
- <ion-avatar slot="start">
|
|
|
- <ion-img src="assets/img/b.png"></ion-img>
|
|
|
- </ion-avatar>
|
|
|
- <ion-label>
|
|
|
- <h2>用户名2</h2>
|
|
|
- <p>这是一条内容2</p>
|
|
|
- </ion-label>
|
|
|
- <ion-button slot="end" (click)="toggleFollow(2)" color="primary" [fill]="isUserFollowed(2) ? 'solid' : 'outline'">
|
|
|
- {{ isUserFollowed(2) ? '已关注' : '关注' }}
|
|
|
- </ion-button>
|
|
|
- </ion-item>
|
|
|
- </div>
|
|
|
- <div *ngIf="activeTab === 'system'">
|
|
|
- <ion-item>
|
|
|
- <ion-avatar slot="start">
|
|
|
- <ion-img src="assets/img/xt.jpg"></ion-img>
|
|
|
- </ion-avatar>
|
|
|
- <ion-label>
|
|
|
- <h2>系统消息标题1</h2>
|
|
|
- <p>这是一条系统消息内容1</p>
|
|
|
- </ion-label>
|
|
|
- </ion-item>
|
|
|
+ <ion-item>
|
|
|
+ <ion-avatar slot="start">
|
|
|
+ <ion-img src="assets/img/b.png"></ion-img>
|
|
|
+ </ion-avatar>
|
|
|
+ <ion-label>
|
|
|
+ <h2>用户名2</h2>
|
|
|
+ <p>这是一条内容2</p>
|
|
|
+ </ion-label>
|
|
|
+ <ion-button slot="end" (click)="toggleFollow(2)" color="primary"
|
|
|
+ [fill]="isUserFollowed(2) ? 'solid' : 'outline'">
|
|
|
+ {{ isUserFollowed(2) ? '已关注' : '关注' }}
|
|
|
+ </ion-button>
|
|
|
+ </ion-item>
|
|
|
+ </div>
|
|
|
+ <div *ngIf="activeTab === 'system'">
|
|
|
+ <ion-item>
|
|
|
+ <ion-avatar slot="start">
|
|
|
+ <ion-img src="assets/img/xt.jpg"></ion-img>
|
|
|
+ </ion-avatar>
|
|
|
+ <ion-label>
|
|
|
+ <h2>系统消息标题1</h2>
|
|
|
+ <p>这是一条系统消息内容1</p>
|
|
|
+ </ion-label>
|
|
|
+ </ion-item>
|
|
|
|
|
|
- <ion-item>
|
|
|
- <ion-avatar slot="start">
|
|
|
- <ion-img src="assets/img/xt.jpg"></ion-img>
|
|
|
- </ion-avatar>
|
|
|
- <ion-label>
|
|
|
- <h2>系统消息标题2</h2>
|
|
|
- <p>这是一条系统消息内容2</p>
|
|
|
- </ion-label>
|
|
|
- </ion-item>
|
|
|
- </div>
|
|
|
+ <ion-item>
|
|
|
+ <ion-avatar slot="start">
|
|
|
+ <ion-img src="assets/img/xt.jpg"></ion-img>
|
|
|
+ </ion-avatar>
|
|
|
+ <ion-label>
|
|
|
+ <h2>系统消息标题2</h2>
|
|
|
+ <p>这是一条系统消息内容2</p>
|
|
|
+ </ion-label>
|
|
|
+ </ion-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-</div>
|
|
|
-<ion-item>一键AI
|
|
|
- <ion-button slot="end" (click)="goToAIChatPage()">
|
|
|
- <ion-icon name="logo-android"></ion-icon>
|
|
|
- </ion-button>
|
|
|
-</ion-item>
|
|
|
+ <ion-item>一键AI
|
|
|
+ <ion-button slot="end" (click)="goToAIChatPage()">
|
|
|
+ <ion-icon name="logo-android"></ion-icon>
|
|
|
+ </ion-button>
|
|
|
+ </ion-item>
|
|
|
</ion-content>
|