|
|
@@ -3,6 +3,7 @@ import { IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, IonIcon, Ion
|
|
|
import { Router } from '@angular/router';
|
|
|
import { CommonModule } from '@angular/common';
|
|
|
import { CloudQuery, CloudObject, Pointer } from '../../lib/community_ncloud'; // 确保路径正确
|
|
|
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
|
|
|
|
|
|
interface Work {
|
|
|
WorkId: string; // 修改为 WorkId
|
|
|
@@ -26,15 +27,16 @@ interface Work {
|
|
|
CommonModule,
|
|
|
IonHeader, IonToolbar, IonTitle, IonContent,
|
|
|
IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel,
|
|
|
- IonMenu, IonList, IonItem, IonMenuButton
|
|
|
+ IonMenu, IonList, IonItem, IonMenuButton, FormsModule, // 添加 FormsModule
|
|
|
],
|
|
|
})
|
|
|
|
|
|
export class Tab3Page implements OnInit {
|
|
|
artworks: Work[] = []; // 存储所有的帖子信息
|
|
|
-
|
|
|
+ displayedArtworks: Work[] = []; // 存储当前显示的帖子
|
|
|
+ isSearchActive = false; // 控制搜索框是否显示
|
|
|
+ searchQuery = ''; // 搜索框的输入内容
|
|
|
constructor(private router: Router) { }
|
|
|
-
|
|
|
ngOnInit() {
|
|
|
this.loadWorks(); // 加载帖子数据
|
|
|
this.red_underline('发现');
|
|
|
@@ -46,25 +48,23 @@ export class Tab3Page implements OnInit {
|
|
|
const workQuery = new CloudQuery('Work');
|
|
|
const workObjs = await workQuery.find();
|
|
|
|
|
|
+ // 初始化 artworks 和 displayedArtworks
|
|
|
this.artworks = workObjs.map((workObj: CloudObject) => {
|
|
|
const workData = workObj.data as Work;
|
|
|
|
|
|
- console.log(workObj.data);
|
|
|
- console.log(workData.updatedAt);
|
|
|
- console.log(workData.fileUrl);
|
|
|
-
|
|
|
return {
|
|
|
...workData,
|
|
|
objectId: String(workObj.id),
|
|
|
- imageUrl: `${workData.fileUrl}`, // 这里确保你的路径正确
|
|
|
-
|
|
|
+ imageUrl: `${workData.fileUrl}`, // 图片路径
|
|
|
};
|
|
|
});
|
|
|
+
|
|
|
+ // 初始显示所有帖子
|
|
|
+ this.displayedArtworks = [...this.artworks];
|
|
|
} catch (error) {
|
|
|
console.error('加载帖子数据失败:', error);
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
red_underline(text: string) {
|
|
|
const prevUnderlined = document.querySelectorAll('span[underline="true"]') as NodeListOf<HTMLElement>;
|
|
|
prevUnderlined.forEach((el: HTMLElement) => {
|
|
|
@@ -77,98 +77,69 @@ export class Tab3Page implements OnInit {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 点击跳转到具体的帖子详情页面
|
|
|
- goToDetail(artId: string) {
|
|
|
- console.log('Work ID:', artId);
|
|
|
- const artwork = this.artworks.find(art => art.WorkId === artId);
|
|
|
+ // 点击搜索图像时触发
|
|
|
+ onSearchIconClick() {
|
|
|
+ this.isSearchActive = !this.isSearchActive; // 显示或隐藏搜索框
|
|
|
+ }
|
|
|
|
|
|
- if (artwork) {
|
|
|
- this.router.navigate(['/tabs/art-detail', artId], {
|
|
|
- state: { artwork }
|
|
|
- }).then(() => {
|
|
|
- console.log('Navigation successful');
|
|
|
- }).catch(err => {
|
|
|
- console.error('Navigation failed:', err);
|
|
|
- });
|
|
|
+ // 关闭搜索框
|
|
|
+ onCloseSearch() {
|
|
|
+ this.isSearchActive = false;
|
|
|
+ this.searchQuery = ''; // 清空搜索内容
|
|
|
+ this.displayedArtworks = [...this.artworks]; // 恢复显示所有帖子
|
|
|
+ }
|
|
|
+ onSearchInput() {
|
|
|
+ if (this.searchQuery.trim()) {
|
|
|
+ this.filterPosts(this.searchQuery); // 过滤帖子
|
|
|
} else {
|
|
|
- console.warn('Artwork not found for id:', artId);
|
|
|
+ this.displayedArtworks = [...this.artworks]; // 搜索框为空时恢复所有帖子
|
|
|
}
|
|
|
}
|
|
|
- // 使用 trackByFn 来提高性能
|
|
|
- trackByFn(index: number, item: any) {
|
|
|
- return item.WorkId; // 使用 WorkId 作为唯一标识符
|
|
|
+
|
|
|
+ // 根据搜索关键字过滤帖子
|
|
|
+ filterPosts(query: string) {
|
|
|
+ // 筛选符合条件的帖子
|
|
|
+ this.displayedArtworks = this.artworks.filter(artwork =>
|
|
|
+ artwork.title.toLowerCase().includes(query.toLowerCase()) || // 标题包含关键字
|
|
|
+ artwork.description.toLowerCase().includes(query.toLowerCase()) // 描述包含关键字
|
|
|
+ );
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-/*
|
|
|
-export class Tab3Page {
|
|
|
- artworks = [
|
|
|
- {
|
|
|
- id: '1',
|
|
|
- image: 'assets/img/xingkong.png',
|
|
|
- title: '梵高-星空高清画作',
|
|
|
- description: '致敬梵高 #艺术品 #星空',
|
|
|
- avatarUrl: 'assets/img/book1.png',
|
|
|
- userName: '星空艺术家',
|
|
|
- date: '12-01',
|
|
|
- likes: 1687,
|
|
|
- category: 'art'
|
|
|
- },
|
|
|
- {
|
|
|
- id: '2',
|
|
|
- image: 'assets/img/xiangrikui.png',
|
|
|
- title: '梵高《向日葵》',
|
|
|
- description: '经典中的经典，笔触很牛！',
|
|
|
- avatarUrl: 'assets/img/book2.png',
|
|
|
- userName: '艺术鉴赏家',
|
|
|
- date: '11-30',
|
|
|
- likes: 2341,
|
|
|
- category: 'art'
|
|
|
- },
|
|
|
- {
|
|
|
- id: '3',
|
|
|
- image: 'assets/img/fangao.png',
|
|
|
- title: '梵高自画像',
|
|
|
- description: '梵高生平自画像之其中🔟副👩🎨 #艺术欣赏 #美',
|
|
|
- avatarUrl: 'assets/img/book3.png',
|
|
|
- userName: '艺术探索者',
|
|
|
- date: '11-29',
|
|
|
- likes: 1892,
|
|
|
- category: 'art'
|
|
|
- },
|
|
|
- {
|
|
|
- id: '4',
|
|
|
- image: 'assets/img/cunzhuang.png',
|
|
|
- title: '阿尔小镇',
|
|
|
- description: '吧，梵高，去你最爱的阿尔看看，阿尔小镇',
|
|
|
- avatarUrl: 'assets/img/book4.png',
|
|
|
- userName: '风景画师',
|
|
|
- date: '11-28',
|
|
|
- likes: 2156,
|
|
|
- category: 'art'
|
|
|
- }
|
|
|
- ];
|
|
|
+ // 根据传入的 Work[] 数组加载帖子数据
|
|
|
+ async loadWorkByContent(workContents: Work[]) {
|
|
|
+ try {
|
|
|
+ // 初始化查询
|
|
|
+ const workQuery = new CloudQuery('Work');
|
|
|
|
|
|
- ngOnInit() {
|
|
|
- this.red_underline('发现');
|
|
|
-
|
|
|
- }
|
|
|
- constructor(private router: Router) { }
|
|
|
- red_underline(text: string) {
|
|
|
- const prevUnderlined = document.querySelectorAll('span[underline="true"]') as NodeListOf<HTMLElement>;
|
|
|
- prevUnderlined.forEach((el: HTMLElement) => {
|
|
|
- el.style.textDecoration = 'none';
|
|
|
- el.removeAttribute('underline');
|
|
|
- });
|
|
|
- const target = document.querySelector(`span[data-id="${text}"]`) as HTMLElement;
|
|
|
- if (target) {
|
|
|
- target.setAttribute('underline', 'true');
|
|
|
+
|
|
|
+ // 查询数据库中的帖子
|
|
|
+ const workObjs = await workQuery.find();
|
|
|
+
|
|
|
+ // 处理查询到的帖子数据
|
|
|
+ this.artworks = workObjs.map((workObj: CloudObject) => {
|
|
|
+ const workData = workObj.data as Work;
|
|
|
+
|
|
|
+ console.log(workObj.data);
|
|
|
+ console.log(workData.updatedAt);
|
|
|
+ console.log(workData.fileUrl);
|
|
|
+
|
|
|
+ // 返回构造好的帖子数据
|
|
|
+ return {
|
|
|
+ ...workData,
|
|
|
+ objectId: String(workObj.id),
|
|
|
+ imageUrl: `${workData.fileUrl}`, // 这里确保你的路径正确
|
|
|
+ };
|
|
|
+ });
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载帖子数据失败:', error);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+ // 点击跳转到具体的帖子详情页面
|
|
|
goToDetail(artId: string) {
|
|
|
- console.log('Art ID:', artId);
|
|
|
- const artwork = this.artworks.find(art => art.id === artId);
|
|
|
+ console.log('Work ID:', artId);
|
|
|
+ const artwork = this.artworks.find(art => art.WorkId === artId);
|
|
|
|
|
|
if (artwork) {
|
|
|
this.router.navigate(['/tabs/art-detail', artId], {
|
|
|
@@ -182,6 +153,8 @@ export class Tab3Page {
|
|
|
console.warn('Artwork not found for id:', artId);
|
|
|
}
|
|
|
}
|
|
|
- */
|
|
|
-
|
|
|
-
|
|
|
+ // 使用 trackByFn 来提高性能
|
|
|
+ trackByFn(index: number, item: any) {
|
|
|
+ return item.WorkId; // 使用 WorkId 作为唯一标识符
|
|
|
+ }
|
|
|
+}
|
未来全栈