|
|
@@ -2,7 +2,18 @@ import { Component, OnInit } from '@angular/core';
|
|
|
import { ActivatedRoute } from '@angular/router';
|
|
|
import { CloudQuery } from '../../../lib/ncloud';
|
|
|
import { Location } from '@angular/common';
|
|
|
+import { CommentModalComponent } from '../../comment-modal/comment-modal.component';
|
|
|
+import { ModalController } from '@ionic/angular'; // 导入 ModalController
|
|
|
+import { CommentsListModalComponent } from 'src/app/tab1/post-detail/comments-list-modal/comments-list-modal.component';
|
|
|
|
|
|
+interface Comment {
|
|
|
+ username: string;
|
|
|
+ avatar: string;
|
|
|
+ content: string;
|
|
|
+ user: {
|
|
|
+ objectId: string; // 假设用户的 objectId
|
|
|
+ };
|
|
|
+}
|
|
|
@Component({
|
|
|
selector: 'app-post-detail',
|
|
|
templateUrl: './post-detail.component.html',
|
|
|
@@ -14,13 +25,69 @@ export class PostDetailComponent implements OnInit {
|
|
|
liked: boolean = false; // 新增属性以跟踪点赞状态
|
|
|
collected: boolean = false; // 新增属性以跟踪收藏状态
|
|
|
followed: boolean = false; // 新增属性以跟踪关注状态
|
|
|
-
|
|
|
- constructor(private route: ActivatedRoute, private location: Location) {}
|
|
|
+ comments: { username: string; avatar: string; content: string; }[] = [];
|
|
|
+ showComments: boolean = false;
|
|
|
+ constructor(private route: ActivatedRoute, private location: Location,private modalController: ModalController) {}
|
|
|
|
|
|
ngOnInit() {
|
|
|
this.loadPostDetail();
|
|
|
+ this.loadComments();
|
|
|
+ }
|
|
|
+ async loadComments() {
|
|
|
+ if (this.post) {
|
|
|
+ this.comments = await this.fetchComments(this.post.objectId);
|
|
|
+ }
|
|
|
}
|
|
|
+ toggleComments() {
|
|
|
+ this.showComments = !this.showComments; // 切换评论模块的显示状态
|
|
|
+ }
|
|
|
+ async fetchComments(postId: string): Promise<{ username: string; avatar: string; content: string; }[]> {
|
|
|
+ const commentQuery = new CloudQuery('HnbComment'); // 实例化 CloudQuery
|
|
|
+ const results: Comment[] = await commentQuery.find1({ post: { __type: 'Pointer', className: 'HnbPost', objectId: postId } }); // 调用 find1 方法
|
|
|
+
|
|
|
+ // 获取评论的用户名和头像等信息
|
|
|
+ const commentsData = await Promise.all(results.map(async (comment: Comment) => {
|
|
|
+ const userQuery = new CloudQuery('HnbUser');
|
|
|
+ const user = await userQuery.get(comment.user.objectId); // 假设评论有指向用户的Pointer
|
|
|
+ console.log('Fetched user:', user);
|
|
|
+ return {
|
|
|
+ username: user.username,
|
|
|
+ avatar: user.avatarUrl, // 假设用户有头像URL
|
|
|
+ content: comment.content
|
|
|
+ };
|
|
|
+ }));
|
|
|
|
|
|
+ return commentsData; // 返回处理后的评论数据
|
|
|
+ }
|
|
|
+ async openCommentsListModal(): Promise<void> {
|
|
|
+ const modal = await this.modalController.create({
|
|
|
+ component: CommentsListModalComponent,
|
|
|
+ cssClass: 'comments-list-modal',
|
|
|
+ componentProps: {
|
|
|
+ postId: this.post.objectId, // 传递当前帖子的 objectId
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ await modal.present();
|
|
|
+ }
|
|
|
+
|
|
|
+ async openCommentDialog(): Promise<void> {
|
|
|
+ const modal = await this.modalController.create({
|
|
|
+ component: CommentModalComponent,
|
|
|
+ cssClass: 'comment-modal', // 添加自定义样式类
|
|
|
+ backdropDismiss: true, // 点击背景关闭模态框
|
|
|
+ breakpoints: [0.5, 0.7], // 设置模态框的高度为视口高度的一半或70%
|
|
|
+ initialBreakpoint: 0.5 // 初始高度为视口高度的一半
|
|
|
+ });
|
|
|
+
|
|
|
+ await modal.present(); // 显示模态框
|
|
|
+
|
|
|
+ const { data, role } = await modal.onWillDismiss(); // 等待模态框关闭
|
|
|
+
|
|
|
+ if (role === 'confirm') {
|
|
|
+ await this.submitComment(data); // 发布评论
|
|
|
+ }
|
|
|
+ }
|
|
|
async loadPostDetail() {
|
|
|
const objectId = this.route.snapshot.paramMap.get('id');
|
|
|
if (objectId) {
|
|
|
@@ -120,58 +187,63 @@ export class PostDetailComponent implements OnInit {
|
|
|
|
|
|
async toggleCollect() {
|
|
|
try {
|
|
|
- const username = await this.getLatestUserName(); // 获取最新用户的用户名
|
|
|
+ const username = await this.getLatestUserName(); // 获取最新用户的用户名
|
|
|
|
|
|
- if (!username) {
|
|
|
- console.error('Failed to get latest username.');
|
|
|
- return; // 如果未能获取用户名，退出
|
|
|
- }
|
|
|
+ if (!username) {
|
|
|
+ console.error('Failed to get latest username.');
|
|
|
+ return; // 如果未能获取用户名，退出
|
|
|
+ }
|
|
|
|
|
|
- const collectQuery = new CloudQuery('HnbColloct');
|
|
|
+ const collectQuery = new CloudQuery('HnbColloct');
|
|
|
|
|
|
- if (this.collected) {
|
|
|
- // 取消收藏逻辑
|
|
|
- const collectEntry = await collectQuery.findOne({
|
|
|
- username: username,
|
|
|
- post: { __type: 'Pointer', className: 'HnbPost', objectId: this.post.objectId } // 使用当前帖子的 objectId
|
|
|
- });
|
|
|
+ if (this.collected) {
|
|
|
+ // 取消收藏逻辑
|
|
|
+ const collectEntry = await collectQuery.findOne({
|
|
|
+ username: username,
|
|
|
+ title: { __type: 'Pointer', className: 'HnbPost', objectId: this.post.objectId } // 使用当前帖子的 objectId
|
|
|
+ });
|
|
|
|
|
|
- if (collectEntry) {
|
|
|
- await collectQuery.delete(collectEntry.objectId); // 删除收藏记录
|
|
|
- this.post.collectCount -= 1; // 减少收藏数
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 添加收藏逻辑
|
|
|
- const newCollectEntry = {
|
|
|
- username: username, // 使用最新用户的用户名
|
|
|
- title: { __type: 'Pointer', className: 'HnbPost', objectId: this.post.objectId } // 确保 title 也是指向当前帖子的 objectId
|
|
|
- };
|
|
|
- await collectQuery.add(newCollectEntry); // 添加新的收藏记录
|
|
|
- this.post.collectCount += 1; // 增加收藏数
|
|
|
- }
|
|
|
+ if (collectEntry) {
|
|
|
+ await collectQuery.delete(collectEntry.objectId); // 删除收藏记录
|
|
|
+ this.post.collectCount -= 1; // 减少收藏数
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 添加收藏逻辑
|
|
|
+ const newCollectEntry = {
|
|
|
+ username: username, // 使用最新用户的用户名
|
|
|
+ title: { __type: 'Pointer', className: 'HnbPost', objectId: this.post.objectId } // 确保 title 也是指向当前帖子的 objectId
|
|
|
+ };
|
|
|
+ await collectQuery.add(newCollectEntry); // 添加新的收藏记录
|
|
|
+ this.post.collectCount += 1; // 增加收藏数
|
|
|
+ }
|
|
|
|
|
|
- console.log('Updating post with collectCount:', this.post.collectCount);
|
|
|
- await new CloudQuery('HnbPost').update(this.post.objectId, { collectCount: this.post.collectCount }); // 更新帖子收藏数
|
|
|
- this.collected = !this.collected; // 切换收藏状态
|
|
|
+ console.log('Updating post with collectCount:', this.post.collectCount);
|
|
|
+ await new CloudQuery('HnbPost').update(this.post.objectId, { collectCount: this.post.collectCount }); // 更新帖子收藏数
|
|
|
+ this.collected = !this.collected; // 切换收藏状态
|
|
|
} catch (error) {
|
|
|
- console.error('Error updating collect status:', error);
|
|
|
+ console.error('Error updating collect status:', error);
|
|
|
}
|
|
|
- }
|
|
|
+}
|
|
|
|
|
|
- async loadAuthorDetails(author: any) {
|
|
|
- if (author && author.objectId) {
|
|
|
- try {
|
|
|
- const userQuery = new CloudQuery('HnbUser');
|
|
|
- const authorData = await userQuery.get(author.objectId);
|
|
|
- this.authorName = authorData.username;
|
|
|
- } catch (error) {
|
|
|
- console.error('Error loading author details:', error);
|
|
|
- this.authorName = '未知作者';
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.authorName = '未知作者';
|
|
|
+async loadAuthorDetails(author: any) {
|
|
|
+ if (author && author.objectId) {
|
|
|
+ try {
|
|
|
+ const userQuery = new CloudQuery('HnbUser');
|
|
|
+ const authorData = await userQuery.get(author.objectId); // 根据 objectId 查询用户数据
|
|
|
+ this.authorName = authorData.username; // 获取用户名
|
|
|
+
|
|
|
+ // 检查头像是否存在，如果不存在则使用默认头像
|
|
|
+ this.post.author.avatar = authorData.avatar || 'path/to/default/avatar.png'; // 替换为默认头像的路径
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Error loading author details:', error);
|
|
|
+ this.authorName = '未知作者'; // 如果发生错误，设置默认作者名
|
|
|
+ this.post.author.avatar = 'path/to/default/avatar.png'; // 使用默认头像
|
|
|
}
|
|
|
+ } else {
|
|
|
+ this.authorName = '未知作者'; // 如果没有作者信息，设置默认作者名
|
|
|
+ this.post.author.avatar = 'path/to/default/avatar.png'; // 使用默认头像
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
async getLatestUserName(): Promise<string | null> {
|
|
|
const url = `http://dev.fmode.cn:1337/parse/classes/HnbUser2?order=-createdAt&limit=1`; // 按创建时间降序排序，限制为1条记录
|
|
|
@@ -195,6 +267,31 @@ export class PostDetailComponent implements OnInit {
|
|
|
// 返回最新用户的 username
|
|
|
return result.results.length > 0 ? result.results[0].username : null;
|
|
|
}
|
|
|
+ async submitComment(content: string) {
|
|
|
+ if (!content || content.trim() === '') {
|
|
|
+ console.error('Comment content is empty.'); // 检查内容是否为空
|
|
|
+ return; // 如果内容为空，直接返回
|
|
|
+ }
|
|
|
+
|
|
|
+ const username = await this.getLatestUserName();
|
|
|
+
|
|
|
+ if (!username) {
|
|
|
+ console.error('Failed to get latest username.');
|
|
|
+ return; // 如果未能获取用户名，退出
|
|
|
+ }
|
|
|
+
|
|
|
+ const commentEntry = {
|
|
|
+ username: username,
|
|
|
+ content: content,
|
|
|
+ post: { __type: 'Pointer', className: 'HnbPost', objectId: this.post.objectId }
|
|
|
+ };
|
|
|
+
|
|
|
+ const commentQuery = new CloudQuery('HnbComment');
|
|
|
+ await commentQuery.add(commentEntry); // 添加评论记录
|
|
|
+ console.log('Comment submitted:', commentEntry);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
|
|
|
goBack() {
|
|
|
this.location.back();
|
