post-detail增加了功能

fashion-app/src/app/ai-chat-component/ai-chat-component.component.ts

@@ -170,8 +170,7 @@ sendVoiceInput() {
 您是一名时尚顾问，名叫小马，年龄28岁，热爱时尚，擅长根据用户的需求和个性推荐穿搭方案。您的风格亲切、幽默，旨在帮助用户找到最适合他们的服装搭配。
 
 #对话环节
-0破冰,跟用户打招呼，并进行角色介绍，比如：你好！我是XXX，专注于帮助你找到最适合你的穿搭风格。无论是日常穿搭、职业装还是特殊场合，我都能为你提供
-个性化的建议。（不要一成不变，可以更改，只要意思差不多就行了）
+0破冰,跟用户打招呼，并自我介绍，询问用户是否愿意分享穿搭想法
 #如果用户愿意则询问用户信息不愿意则慢慢引导用户聊聊穿搭(这些问题不要一起询问，分开询问）：
 请问你的身高和体重是多少呢？
 你大概多大年龄？

fashion-app/src/app/chat-history/chat-history.component.scss

@@ -65,3 +65,5 @@
     white-space: nowrap; /* 单行显示 */
   }
 
+
+

fashion-app/src/app/chat-history/chat-history.component.ts

@@ -103,4 +103,5 @@ filterChatHistories() {
     return chatTimestamp >= startOfDay && chatTimestamp <= endOfDay; // 只保留在范围内的聊天记录
   });
 }
+
 }

fashion-app/src/app/post-detail/post-detail.component.html

@@ -1,4 +1,4 @@
-<ion-content >
+<ion-content  (click)="notcomment()">
   <!--帖子-->
   <div class="post">
     <div class="post-header">
@@ -34,132 +34,82 @@
 
  <!-- 评论区域 -->
  <div class="comment-section">
-  <h3 class="comment-title">全部评论(5)</h3>
+  <h3 class="comment-title">全部评论({{comments.length}})</h3>
   
-  <div class="comment">
+  <div *ngFor="let comment of comments" class="comment">
     <div class="comment-box">
       <div class="comment-left">
         <div class="comment-avatar">
-          <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.X-VG5gTN2ak8rGRij3oCogAAAA?rs=1&pid=ImgDetMain" alt="User Avatar" class="comment-avatar-image">
+          <img src="{{ comment.get('user')?.image }}" alt="User Avatar" class="comment-avatar-image">
         </div>
-        <span class="floor">1L</span>
+        <span class="floor">{{comments.indexOf(comment) + 1}}L</span>
       </div>
       
       <div class="comment-middle">
 
         <div class="comment-content">
-          <span class="comment-username">用户昵称</span>
-          <p class="comment-text">这是用户的评论内容，描述了对帖子内容的看法。</p>
-          <span class="time-ago">5小时前</span>
+          <span class="comment-username">{{ comment.get('user')?.username }}</span>
+          <p class="comment-text">{{ comment.get('content') }}</p>
+          <span class="time-ago">{{ formatTimeAgo(comment.createdAt) }}</span>
         </div>
       </div>
       
       <div class="comment-right">
         <ion-icon name="heart-outline" class="like-icon" ></ion-icon>
-        <span class="like-count">10</span>
+        <span class="like-count">{{ comment.get('heart') }}</span>
       </div>
     </div>
   </div>
 
-  <div class="comment">
-    <div class="comment-box">
-      <div class="comment-left">
-        <div class="comment-avatar">
-          <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.X-VG5gTN2ak8rGRij3oCogAAAA?rs=1&pid=ImgDetMain" alt="User Avatar" class="comment-avatar-image">
-        </div>
-        <span class="floor">1L</span>
-      </div>
-      
-      <div class="comment-middle">
+</div>
 
-        <div class="comment-content">
-          <span class="comment-username">用户昵称</span>
-          <p class="comment-text">这是用户的评论内容，描述了对帖子内容的看法。</p>
-          <span class="time-ago">5小时前</span>
-        </div>
-      </div>
-      
-      <div class="comment-right">
-        <ion-icon name="heart-outline" class="like-icon" ></ion-icon>
-        <span class="like-count">10</span>
-      </div>
-    </div>
-  </div>
+</ion-content>
 
-  <div class="comment">
-    <div class="comment-box">
-      <div class="comment-left">
-        <div class="comment-avatar">
-          <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.X-VG5gTN2ak8rGRij3oCogAAAA?rs=1&pid=ImgDetMain" alt="User Avatar" class="comment-avatar-image">
+<!-- 表情模拟框 -->
+<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>
-        <span class="floor">1L</span>
       </div>
-      
-      <div class="comment-middle">
+    </ion-content>
+  </ng-template>
+</ion-modal>
 
-        <div class="comment-content">
-          <span class="comment-username">用户昵称</span>
-          <p class="comment-text">这是用户的评论内容，描述了对帖子内容的看法。</p>
-          <span class="time-ago">5小时前</span>
-        </div>
-      </div>
-      
-      <div class="comment-right">
-        <ion-icon name="heart-outline" class="like-icon" ></ion-icon>
-        <span class="like-count">10</span>
-      </div>
+
+ <!-- 评论输入框 -->
+<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 name="heart-outline" class="like-button" style=" margin-right:8px"></ion-icon>
+      <span>0</span>
     </div>
   </div>
+</ion-footer>
 
-  <div class="comment">
-    <div class="comment-box">
-      <div class="comment-left">
-        <div class="comment-avatar">
-          <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.X-VG5gTN2ak8rGRij3oCogAAAA?rs=1&pid=ImgDetMain" alt="User Avatar" class="comment-avatar-image">
-        </div>
-        <span class="floor">1L</span>
-      </div>
-      
-      <div class="comment-middle">
-
-        <div class="comment-content">
-          <span class="comment-username">用户昵称</span>
-          <p class="comment-text">这是用户的评论内容，描述了对帖子内容的看法。</p>
-          <span class="time-ago">5小时前</span>
-        </div>
-      </div>
-      
-      <div class="comment-right">
-        <ion-icon name="heart-outline" class="like-icon" ></ion-icon>
-        <span class="like-count">10</span>
-      </div>
-    </div>
+<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>
 
-  <div class="comment">
-    <div class="comment-box">
-      <div class="comment-left">
-        <div class="comment-avatar">
-          <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.X-VG5gTN2ak8rGRij3oCogAAAA?rs=1&pid=ImgDetMain" alt="User Avatar" class="comment-avatar-image">
-        </div>
-        <span class="floor">1L</span>
-      </div>
-      
-      <div class="comment-middle">
 
-        <div class="comment-content">
-          <span class="comment-username">用户昵称</span>
-          <p class="comment-text">这是用户的评论内容，描述了对帖子内容的看法。</p>
-          <span class="time-ago">5小时前</span>
-        </div>
-      </div>
-      
-      <div class="comment-right">
-        <ion-icon name="heart-outline" class="like-icon" ></ion-icon>
-        <span class="like-count">10</span>
-      </div>
-    </div>
-  </div>
+</ion-footer>
+
+
 
-</div>
-</ion-content>

fashion-app/src/app/post-detail/post-detail.component.scss

@@ -230,3 +230,124 @@
     margin-top: 3px; /* 点赞数与评论之间的间距 */
   }
 
+
+  .comment-input-container {
+    display: flex; /* 使用 Flexbox 布局 */
+    align-items: center; /* 垂直居中 */
+    padding: 5px; /* 内边距 */
+    background-color: #f9f9f9; /* 背景色 */
+    border-top: 1px solid #ccc; /* 顶部边框 */
+  }
+  
+  .share-icon {
+    font-size: 30px; /* 分享按钮大小 */
+    color: black; /* 分享按钮颜色 */
+    margin-right: 20px; /* 与输入框的间距 */
+  }
+  
+  .comment-input {
+    display: flex;
+    align-items: center; /* 垂直居中 */
+    min-height: 50px; /* 最小高度 */
+    margin-right: 5px; /* 与按钮的间距 */
+    border-radius: 20px; /* 椭圆形效果 */
+    padding: 5px; /* 内边距 */
+    border: 1px solid #ccc; /* 边框 */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+    height:50px;
+    width: 50%;
+    
+  }
+
+  .comment-input1 {
+    display: flex;
+    align-items: center; /* 垂直居中 */
+    margin-right: 5px; /* 与按钮的间距 */
+    border-radius: 20px; /* 椭圆形效果 */
+    padding: 5px; /* 内边距 */
+    border: 1px solid #ccc; /* 边框 */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+    height:50px;
+    width: 80%;
+    position: relative;
+    
+  }
+  
+  .comment-buttons {
+    display: flex; /* 使用 Flexbox 布局 */
+    align-items: center; /* 垂直居中 */
+   
+  }
+  
+  .comment-button {
+    margin-right: 10px; /* 评论按钮与点赞按钮的间距 */
+    color: black; /* 按钮字体颜色 */
+    --background: #f9f9f9;
+    --background-activated: #f9f9f9;
+  }
+  
+  .like-button {
+    font-size: 30px; /* 点赞图标大小 */
+    color:black; /* 点赞图标颜色 */
+  }
+
+  .send-button {
+    height: 25px;
+    width: 60px;
+    --background: #ccc;
+    --background-activated: #ccc;
+    color:grey;
+    border-radius: 25px;
+    font-size: 15px;
+  }
+
+  .send-button1 {
+    height: 25px;
+    width: 60px;
+    --background:black;
+    --background-activated: #ccc;
+    color:white;
+    border-radius: 25px;
+    font-size: 15px;
+  }
+
+  .emoji-button {
+    display: flex; /* 使用 Flexbox 布局 */
+    align-items: center; /* 垂直居中 */
+    margin-right: 10px;
+  }
+
+  
+  /* 表情选择器样式 */
+.emoji-picker {
+  --background: transparent; /* 去除默认样式 */
+  background-color:white; /* 背景颜色 */
+  padding: 10px;
+  display: flex;
+  justify-content: center; /* 水平居中 */
+  overflow: hidden; /* 隐藏多余内容 */
+}
+
+/* 表情容器用于支持滚动 */
+.emoji-container {
+  display: flex;
+  flex-wrap: wrap; /* 允许换行 */
+  overflow-y: auto; /* 允许纵向滚动 */
+  max-height: 70vh; /* 最大高度，防止超出屏幕 */
+  width: 100%; /* 容器宽度 */
+}
+
+/* 表情按钮 */
+.emoji-buttons {
+  margin: 5px; /* 每个表情与顶部的间距 */
+  font-size: 28px; /* 字体大小 */
+  height: 40px; /* 按钮高度 */
+  width: 40px; /* 按钮宽度 */
+  display: flex; /* 使用 flexbox 对齐 */
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中 */
+  --background: transparent; /* 背景透明 */
+  --box-shadow: none; /* 去掉阴影 */
+  --outline: none; /* 去掉轮廓 */
+  border: none; /* 去掉边框 */
+}

fashion-app/src/app/post-detail/post-detail.component.ts

@@ -1,21 +1,29 @@
 import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
-import { IonButton, IonContent, IonIcon } from '@ionic/angular/standalone';
+import { IonModal } from '@ionic/angular/standalone';
+import { IonButton, IonContent, IonFooter, IonIcon, IonTextarea } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { bookmarkOutline, ellipsisHorizontal, heartOutline } from 'ionicons/icons';
+import { bookmarkOutline, ellipsisHorizontal, happyOutline, heartOutline, shareSocialOutline } from 'ionicons/icons';
+import { CloudObject, CloudQuery, CloudUser } from 'src/lib/ncloud';
 
-addIcons({ellipsisHorizontal,bookmarkOutline,heartOutline,})
+addIcons({ellipsisHorizontal,bookmarkOutline,heartOutline,shareSocialOutline,happyOutline,})
 
 @Component({
   selector: 'app-post-detail',
   templateUrl: './post-detail.component.html',
   styleUrls: ['./post-detail.component.scss'],
   standalone: true,
-   imports: [IonContent, IonIcon, IonButton, CommonModule]
+   imports: [IonContent, IonIcon, IonButton, CommonModule,IonTextarea,IonFooter,FormsModule,IonModal]
 })
 export class PostDetailComponent  implements OnInit {
 post: any;//点击的帖子的内容
+newComment: string = ''; // 新评论的内容
+isfooter: boolean = true; // 控制底部栏的样式
+comments: CloudObject[] = []; // 存储评论的数组
+isFollowed: boolean = false; // 初始状态为未关注
+
   constructor(private router: Router,) { 
     const navigation = this.router.getCurrentNavigation();
     if (navigation && navigation.extras.state) {
@@ -25,12 +33,106 @@ post: any;//点击的帖子的内容
     }
   }
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.loadComments(); // 组件初始化时加载评论
+  }
+
+  // 加载与当前帖子相关的评论
+  async loadComments() {
+    const query = new CloudQuery("comment"); 
+    query.equalTo("post", { "__type": "Pointer", "className": "post", "objectId": this.post.id }); // 根据帖子ID查询评论
+    query.include('user'); // 包含 user 属性
+    this.comments = await query.find(); // 获取评论
+    console.log('加载的评论:', this.comments);
 
-  isFollowed: boolean = false; // 初始状态为未关注
+}
+
+ 
 
   toggleFollow() {
     this.isFollowed = !this.isFollowed; // 切换关注状态
   }
 
+  tocomment(){
+    this.isfooter = false; // 切换底部栏的显示样式
+    console.log(this.isfooter);
+  }
+
+  notcomment(){
+    this.isfooter = true; // 切换底部栏的显示样式
+  }
+
+  async submitComment() {
+    if (this.newComment.trim()) {
+ // 创建新的评论对象
+ const comment = new CloudObject("comment"); // 假设comment表的类名为"comment"
+ const user = new CloudUser();
+  const currentUser = await user.current(); // 获取当前用户信息
+  if (currentUser) {
+ // 设置评论的字段
+ comment.set({
+     user: new CloudUser().toPointer(), // 指向当前用户
+     post: { "__type": "Pointer", "className": "post", "objectId": this.post.id }, // 帖子指针
+     content: this.newComment.trim(), // 评论内容
+     heart: 0 // 初始点赞数为0
+ });
+
+ // 保存评论
+ comment.save().then(() => {
+     console.log('评论已保存:', this.newComment);
+     this.newComment = ''; // 清空输入框
+ })
+ this.loadComments(); // 加载新评论
+}
+    }
+  }
+
+ //用户评论时间
+ formatTimeAgo(date: any): string {
+  const date1 = new Date(date);
+  const now = new Date();
+  const seconds = Math.floor((now.getTime() - date1.getTime()) / 1000);
+  //console.log("date1.getTime()",date1.getTime());
+  //console.log("now.getTime()",now.getTime());
+  //console.log("seconds",seconds);
+  
+  let interval = Math.floor(seconds / 31536000);
+  if (interval >= 1) return interval + " 年前";
+  interval = Math.floor(seconds / 2592000);
+  if (interval >= 1) return interval + " 个月前";
+  interval = Math.floor(seconds / 86400);
+  if (interval >= 1) return interval + " 天前";
+  interval = Math.floor(seconds / 3600);
+  if (interval >= 1) return interval + " 小时前";
+  interval = Math.floor(seconds / 60);
+  if (interval >= 1) return interval + " 分钟前";
+  return "刚刚";
+}
+
+isEmojiPickerOpen: boolean = false; // 控制表情选择器的打开状态
+emojis: string[] = ['😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃', '🫠', '😉', '😊', '😇', '🥰', '😍', '🤩', '😘',
+   '😗', '☺️', '😚', '😙', '🥲', '😋', '😛', '😜', '🤪', '😝', '🤑', '🤗', '🤭', '🫢', '🫣', '🤫', '🤔', '🫡', '🤐', '🤨', '😐',
+    '😑', '😶', '🫥', '😶‍🌫️', '😏', '😒', '🙄', '😬', '😮‍💨', '🤥', '🫨', '🙂‍↔️', '🙂‍↕️', '😌', '😔', '😪', '🤤', '😴', '🫩', '😷', 
+    '🤒', '🤕', '🤢', '🤮', '🤧', '🥵', '🥶', '🥴', '😵', '😵‍💫', '🤯', '🤠', '🥳', '🥸', '😎', '🤓', '🧐', '😕', '🫤', '😟', 
+    '🙁', '☹️', '😮', '😯', '😲', '😳', '🥺', '🥹', '😦', '😧', '😨', '😰', '😥', '😢', '😭', '😱', '😖', '😣', '😞', '😓', 
+    '😩', '😫', '🥱', '😤', '😡', '😠', '🤬', '😈', '👿', '💀', '☠️', '💩', '🤡', '👹', '👺', '👻', '👽', '👾', '🤖', '😺', 
+    '😸', '😹', '😻', '😼', '😽', '🙀', '😿', '😾', '🙈', '🙉', '🙊', '💌', '💘', '❤️', '🖤', '💋', '💯', '💢', '💥', '💫', 
+    '💦', '💤']; // 表情数组
+// 打开表情选择器
+openEmojiPicker() {
+this.isEmojiPickerOpen = true;
+}
+
+// 关闭表情选择器
+closeEmojiPicker() {
+this.isEmojiPickerOpen = false; // 关闭模态框
+}
+
+// 添加表情到输入框
+addEmoji(emoji: string) {
+this.newComment += emoji; // 将选中的表情添加到输入框
+this.closeEmojiPicker(); // 关闭模态框
+}
+
+
 }

fashion-app/src/app/post/post.component.html

@@ -26,12 +26,12 @@
   </div>
 
      <!-- 按钮区域 -->
-     <div class="button-container">
+     <div class="button-container" >
       <ion-button fill="clear" class="action-button" >
         <ion-icon name="share-social-outline" class=""></ion-icon>
         <span>分享</span>
       </ion-button>
-      <ion-button fill="clear" class="action-button">
+      <ion-button fill="clear" class="action-button" (click)="goToPostDetail(post)">
         <ion-icon name="chatbubble-outline"></ion-icon>
         <span>评论</span>
       </ion-button>