|
|
@@ -1,88 +1,119 @@
|
|
|
-import { Component } from '@angular/core';
|
|
|
-import { ModalController, IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonAvatar, IonButton, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonIcon, IonButtons, IonSearchbar, IonFab, IonFabButton, IonFabList, IonFooter, IonInput } from '@ionic/angular/standalone';
|
|
|
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
|
|
|
-import { addIcons } from 'ionicons';
|
|
|
-import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
|
|
|
+import { Component, OnInit, OnDestroy } from '@angular/core';
|
|
|
+import { Router } from '@angular/router';
|
|
|
+import { ModalController } from '@ionic/angular'; // 确保导入 ModalController
|
|
|
import { ArticleCardComponent } from '../component/article-card/article-card.component';
|
|
|
import { CommonModule } from '@angular/common';
|
|
|
import { CloudObject, CloudQuery, CloudUser } from 'src/lib/ncloud';
|
|
|
import { NavigationLanComponent } from '../component/navigation-lan/navigation-lan.component';
|
|
|
-import { Router } from '@angular/router';
|
|
|
+import { FormsModule } from '@angular/forms';
|
|
|
import {
|
|
|
+ airplane,
|
|
|
+ bluetooth,
|
|
|
+ call,
|
|
|
+ wifi,
|
|
|
chevronDownCircle,
|
|
|
chevronForwardCircle,
|
|
|
chevronUpCircle,
|
|
|
colorPalette,
|
|
|
document,
|
|
|
- globe,
|
|
|
+ globe
|
|
|
} from 'ionicons/icons';
|
|
|
-import { FormsModule } from '@angular/forms';
|
|
|
-addIcons({ airplane, bluetooth, call, wifi });
|
|
|
-addIcons({ chevronDownCircle, chevronForwardCircle, chevronUpCircle, colorPalette, document, globe });
|
|
|
+import { addIcons } from 'ionicons';
|
|
|
+import { IonicModule } from '@ionic/angular'; // 导入 IonicModule
|
|
|
+
|
|
|
+addIcons({
|
|
|
+ airplane,
|
|
|
+ bluetooth,
|
|
|
+ call,
|
|
|
+ wifi,
|
|
|
+ chevronDownCircle,
|
|
|
+ chevronForwardCircle,
|
|
|
+ chevronUpCircle,
|
|
|
+ colorPalette,
|
|
|
+ document,
|
|
|
+ globe
|
|
|
+});
|
|
|
+
|
|
|
@Component({
|
|
|
selector: 'app-tab2',
|
|
|
templateUrl: 'tab2.page.html',
|
|
|
styleUrls: ['tab2.page.scss'],
|
|
|
standalone: true,
|
|
|
imports: [
|
|
|
- IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
|
|
|
- IonLabel,IonItem,IonList,IonAvatar,ArticleCardComponent,CommonModule,IonButton,
|
|
|
- IonSegment, IonSegmentButton,NavigationLanComponent,
|
|
|
- IonSegmentContent,IonSegmentView,IonCardContent, IonCardTitle, IonCardHeader,IonCard,
|
|
|
- IonModal,IonIcon, IonButtons, IonSearchbar, IonFab, IonFabButton,IonFabList,IonFooter,
|
|
|
- IonInput,IonSegment,IonSegmentButton,FormsModule
|
|
|
+ IonicModule, // 添加 IonicModule
|
|
|
+ CommonModule,
|
|
|
+ FormsModule,
|
|
|
+ ArticleCardComponent,
|
|
|
+ NavigationLanComponent
|
|
|
+ // 其他自定义组件或模块
|
|
|
]
|
|
|
})
|
|
|
+export class Tab2Page implements OnInit, OnDestroy {
|
|
|
+ selectedSegment: string = '热点';
|
|
|
+ segments: string[] = ['热点', '专家科普', '睡眠', '生活', '男性', '女性', '两性', '辟谣', '母婴', '美容'];
|
|
|
+
|
|
|
+ images: string[] = [
|
|
|
+ 'https://picsum.photos/800/400?random=7',
|
|
|
+ 'https://picsum.photos/800/400?random=8',
|
|
|
+ 'https://picsum.photos/800/400?random=9',
|
|
|
+ 'https://picsum.photos/800/400?random=10',
|
|
|
+ 'https://picsum.photos/800/400?random=11',
|
|
|
+ 'https://picsum.photos/800/400?random=12',
|
|
|
+ ];
|
|
|
+
|
|
|
+ currentSlide: number = 0;
|
|
|
+ intervalId: any;
|
|
|
+
|
|
|
+ products: CloudObject[] = [];
|
|
|
+ allCards: CloudObject[] = [];
|
|
|
+ cards: CloudObject[] = [];
|
|
|
|
|
|
-export class Tab2Page {
|
|
|
- selectedSegment:string = '热点';
|
|
|
- segments = [ '热点', '专家科普', '睡眠', '生活', '男性', '女性', '两性', '辟谣', '母婴', '美容'];
|
|
|
- segmentChanged(event: any) {
|
|
|
- this.selectedSegment = event.detail.value;
|
|
|
- console.log(this.selectedSegment);
|
|
|
- this.loadCards(); // 重新加载卡片
|
|
|
- }
|
|
|
- /**
|
|
|
- * 轮播图
|
|
|
- */
|
|
|
- images = [
|
|
|
- 'https://picsum.photos/800/400?random=7',
|
|
|
- 'https://picsum.photos/800/400?random=8',
|
|
|
- 'https://picsum.photos/800/400?random=9',
|
|
|
- 'https://picsum.photos/800/400?random10',
|
|
|
- 'https://picsum.photos/800/400?random=11',
|
|
|
- 'https://picsum.photos/800/400?random=12',
|
|
|
-];
|
|
|
-
|
|
|
-currentSlide = 0;
|
|
|
-intervalId: any;
|
|
|
-setSlidePosition() {
|
|
|
- // 这里不需要额外的逻辑，因为在 HTML 中已经通过绑定实现
|
|
|
-}
|
|
|
-
|
|
|
-nextSlide() {
|
|
|
- this.currentSlide = (this.currentSlide + 1) % this.images.length;
|
|
|
-}
|
|
|
-
|
|
|
-prevSlide() {
|
|
|
- this.currentSlide = (this.currentSlide - 1 + this.images.length) % this.images.length;
|
|
|
-}
|
|
|
-
|
|
|
-goToSlide(index: number) {
|
|
|
- this.currentSlide = index;
|
|
|
-}
|
|
|
-
|
|
|
-startAutoSlide() {
|
|
|
- this.intervalId = setInterval(() => this.nextSlide(), 3000);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
- products: Array<CloudObject> = []; // 当前显示的科普信息
|
|
|
- allCards: Array<CloudObject> = []; // 所有科普信息
|
|
|
-
|
|
|
- //搜索功能
|
|
|
searchTerm: string = '';
|
|
|
+ comment: string = '';
|
|
|
+ shareLink: string = '';
|
|
|
+
|
|
|
+ isModalOpen: boolean = false;
|
|
|
+ currentProduct: CloudObject | null = null;
|
|
|
+
|
|
|
+ shareDetail: boolean = false;
|
|
|
+
|
|
|
+ isLoading: boolean = false;
|
|
|
+
|
|
|
+ constructor(
|
|
|
+ private modalCtrl: ModalController,
|
|
|
+ private router: Router
|
|
|
+ ) { }
|
|
|
+
|
|
|
+ ngOnInit() {
|
|
|
+ this.loadAllCards();
|
|
|
+ this.loadCards();
|
|
|
+ this.startAutoSlide();
|
|
|
+ }
|
|
|
+
|
|
|
+ ngOnDestroy() {
|
|
|
+ if (this.intervalId) {
|
|
|
+ clearInterval(this.intervalId);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 轮播图功能
|
|
|
+ nextSlide() {
|
|
|
+ this.currentSlide = (this.currentSlide + 1) % this.images.length;
|
|
|
+ }
|
|
|
+
|
|
|
+ prevSlide() {
|
|
|
+ this.currentSlide = (this.currentSlide - 1 + this.images.length) % this.images.length;
|
|
|
+ }
|
|
|
+
|
|
|
+ goToSlide(index: number) {
|
|
|
+ this.currentSlide = index;
|
|
|
+ }
|
|
|
+
|
|
|
+ startAutoSlide() {
|
|
|
+ this.intervalId = setInterval(() => this.nextSlide(), 3000);
|
|
|
+ }
|
|
|
|
|
|
+ // 搜索功能
|
|
|
async searchProducts(event: any) {
|
|
|
this.searchTerm = event.detail.value.toLowerCase();
|
|
|
if (this.searchTerm) {
|
|
|
@@ -93,89 +124,98 @@ startAutoSlide() {
|
|
|
product.get('content')[0].toLowerCase().includes(this.searchTerm)
|
|
|
);
|
|
|
} else {
|
|
|
- this.products = [...this.allCards]; // 如果搜索词为空，则显示所有科普信息
|
|
|
+ this.products = [...this.allCards];
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- isModalOpen = false;
|
|
|
- currentProduct: any; // 当前选择的科普信息
|
|
|
+ // 分段控制
|
|
|
+ segmentChanged(event: any) {
|
|
|
+ this.selectedSegment = event.detail.value;
|
|
|
+ this.loadCards();
|
|
|
+ }
|
|
|
|
|
|
- openDetailModal(product?: any) {
|
|
|
- let user = new CloudUser;
|
|
|
- if (!user.id){
|
|
|
- this.router.navigate(['/tabs/tab4'])
|
|
|
- return
|
|
|
+ // 加载所有卡片
|
|
|
+ async loadAllCards() {
|
|
|
+ this.isLoading = true;
|
|
|
+ const query = new CloudQuery('HotDot');
|
|
|
+ try {
|
|
|
+ this.allCards = await query.find();
|
|
|
+ this.products = [...this.allCards];
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载所有卡片失败:', error);
|
|
|
+ } finally {
|
|
|
+ this.isLoading = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ async loadCards() {
|
|
|
+ this.isLoading = true;
|
|
|
+ const query = new CloudQuery('HotDot');
|
|
|
+ query.equalTo('category', this.selectedSegment);
|
|
|
+ try {
|
|
|
+ this.cards = await query.find();
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载分类卡片失败:', error);
|
|
|
+ } finally {
|
|
|
+ this.isLoading = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 打开详细信息模态
|
|
|
+ openDetailModal(product: CloudObject) {
|
|
|
+ const user = new CloudUser();
|
|
|
+ if (!user.id) {
|
|
|
+ this.router.navigate(['/tabs/tab4']);
|
|
|
+ return;
|
|
|
}
|
|
|
this.isModalOpen = true;
|
|
|
this.currentProduct = product;
|
|
|
}
|
|
|
+
|
|
|
closeDetailModal() {
|
|
|
this.isModalOpen = false;
|
|
|
this.currentProduct = null;
|
|
|
}
|
|
|
- shareDetail = false;
|
|
|
+
|
|
|
+ // 分享功能
|
|
|
shareDetailModal() {
|
|
|
this.shareDetail = true;
|
|
|
- // 在这里确保模态框的aria-hidden属性被正确处理
|
|
|
- // setTimeout(() => {
|
|
|
- // const modalElement = document.querySelector('ion-modal');
|
|
|
- // if (modalElement) {
|
|
|
- // modalElement.setAttribute('aria-hidden', 'false');
|
|
|
- // }
|
|
|
- // }, 0);
|
|
|
- }
|
|
|
- closeShareModal(){
|
|
|
- this.shareDetail = false;
|
|
|
+ this.shareLink = window.location.href; // 示例分享链接，可以根据需求调整
|
|
|
+ }
|
|
|
|
|
|
+ closeShareModal() {
|
|
|
+ this.shareDetail = false;
|
|
|
}
|
|
|
+
|
|
|
copyLink() {
|
|
|
- console.log('复制链接');
|
|
|
+ navigator.clipboard.writeText(this.shareLink).then(() => {
|
|
|
+ console.log('链接已复制');
|
|
|
+ // 可以添加提示用户复制成功的反馈
|
|
|
+ }).catch(err => {
|
|
|
+ console.error('复制失败:', err);
|
|
|
+ });
|
|
|
}
|
|
|
- // type:"HotDot"|"export"|"sleep"|"life"|"男"|"女" = "HotDot"
|
|
|
|
|
|
- constructor(
|
|
|
- private modalCtrl:ModalController,
|
|
|
- private router:Router,
|
|
|
- ) {
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- cards: Array<CloudObject> = []; // 当前显示的分类卡片
|
|
|
- // async typeChange(ev: any) {
|
|
|
- // this.type = ev?.detail?.value || ev?.value || 'HotDot';
|
|
|
- // console.log(this.type);
|
|
|
- // await this.loadCards(); // 重新加载卡片
|
|
|
- // }
|
|
|
- async loadAllCards() {
|
|
|
- const query = new CloudQuery('HotDot');
|
|
|
- this.allCards = await query.find();
|
|
|
+ // 评论功能
|
|
|
+ onCommentInput(event: any) {
|
|
|
+ this.comment = event.detail.value;
|
|
|
}
|
|
|
|
|
|
- async loadCards() {
|
|
|
- const query = new CloudQuery('HotDot');
|
|
|
- query.equalTo('category', this.selectedSegment);
|
|
|
- this.cards = await query.find();
|
|
|
+ postComment() {
|
|
|
+ if (this.comment.trim()) {
|
|
|
+ // 实现发布评论的逻辑，例如调用 API
|
|
|
+ console.log('发布评论:', this.comment);
|
|
|
+ this.comment = '';
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-
|
|
|
- publishHealthInfo() {
|
|
|
- // 这里可以添加发布求医信息的逻辑
|
|
|
- console.log('发布求医信息');
|
|
|
+ // 跟踪函数以优化 ngFor
|
|
|
+ trackByIndex(index: number, item: any): number {
|
|
|
+ return index;
|
|
|
}
|
|
|
|
|
|
- openAiKnowledge(){
|
|
|
- this.router.navigate(['tabs/ai-knowledge']);
|
|
|
- }
|
|
|
- ngOnInit() {
|
|
|
- this.loadAllCards();
|
|
|
- this.loadCards(); // 初始化时加载所有科普信息
|
|
|
- }
|
|
|
- comment:string = ''
|
|
|
- onCommentInput(e:any){
|
|
|
- this.comment = e.detail.value
|
|
|
- console.log(this.comment);
|
|
|
+ trackById(index: number, item: CloudObject): string {
|
|
|
+ return item.id ?? `no-id-${index}`; // 确保返回 string 类型，避免 null
|
|
|
}
|
|
|
- postComment(){
|
|
|
- console.log('发布评论');
|
|
|
- }
|
|
|
-}
|
|
|
+
|
|
|
+}
|
