fix

wisdom-app/src/app/tab2/tab2.page.html

@@ -1,7 +1,11 @@
 <ion-header [translucent]="true">
   <ion-toolbar class="custom-toolbar">
-    <div class="search-bar">
-      <input type="text" placeholder="输入关键词搜索科普文章">
+    <div class="search-bar" >
+      <ion-searchbar 
+      placeholder="搜索" 
+      class="custom-searchbar" 
+      (ionInput)="searchProducts($event)">
+    </ion-searchbar>
     </div>
     <div class="header">
       <ion-card-header>
@@ -19,10 +23,10 @@
             <ion-segment-button value="life" content-id="life">
               <ion-label>生活</ion-label>
             </ion-segment-button>
-            <ion-segment-button value="male" content-id="male">
+            <ion-segment-button value="男" content-id="male">
               <ion-label>男性</ion-label>
             </ion-segment-button>
-            <ion-segment-button value="female" content-id="female">
+            <ion-segment-button value="女" content-id="female">
               <ion-label>女性</ion-label>
             </ion-segment-button>
           </ion-segment>
@@ -33,38 +37,50 @@
 </ion-header>
 
 <ion-content class="knowledge" [fullscreen]="true">
+  @if(!searchTerm){
+    <div class="content">
+      <ion-card>
+        <ion-card-header></ion-card-header>
   
-  <div class="content">
-    <ion-card>
-      <ion-card-header></ion-card-header>
-
-      <ion-card-content>
-        <ion-segment-view>
-          <ion-segment-content id="hotdot">
-            <app-article-card (click)="openDetailModal(card)" *ngFor="let card of cards" [card]="card"></app-article-card>
-          </ion-segment-content>
-
-          <ion-segment-content id="export">
-            <app-article-card *ngFor="let card of cards" [card]="card"></app-article-card>
-          </ion-segment-content>
-
-          <ion-segment-content id="sleep">
-            <app-article-card *ngFor="let card of cards" [card]="card"></app-article-card>
-          </ion-segment-content>
+        <ion-card-content>
+          <ion-segment-view>
+            <ion-segment-content id="hotdot">
+              <app-article-card (click)="openDetailModal(card)" *ngFor="let card of cards" [card]="card"></app-article-card>
+            </ion-segment-content>
+  
+            <ion-segment-content id="export">
+              <app-article-card (click)="openDetailModal(card)" *ngFor="let card of cards" [card]="card"></app-article-card>
+            </ion-segment-content>
+  
+            <ion-segment-content id="sleep">
+              <app-article-card (click)="openDetailModal(card)" *ngFor="let card of cards" [card]="card"></app-article-card>
+            </ion-segment-content>
+  
+            <ion-segment-content id="life">
+              <app-article-card (click)="openDetailModal(card)" *ngFor="let card of cards" [card]="card"></app-article-card>
+            </ion-segment-content>
+            <ion-segment-content id="male">
+              <app-article-card (click)="openDetailModal(card)" *ngFor="let card of cards" [card]="card"></app-article-card>
+            </ion-segment-content>
+            <ion-segment-content id="female">
+              <app-article-card (click)="openDetailModal(card)" *ngFor="let card of cards" [card]="card"></app-article-card>
+            </ion-segment-content>
+          </ion-segment-view>
+        </ion-card-content>
+      </ion-card>
+    </div>
+  }
+  @if(searchTerm){
+    <div>
+      <app-article-card (click)="openDetailModal(product)" *ngFor="let product of products" [card]="product"></app-article-card>
+    </div>
+    @if (products.length == 0) {
+      <div class="no-results" style="margin: 50px auto;">
+        <h2>寻找中···   请耐性等待 ····</h2>
+      </div>
+    }
+  }
 
-          <ion-segment-content id="life">
-            <app-article-card *ngFor="let card of cards" [card]="card"></app-article-card>
-          </ion-segment-content>
-          <ion-segment-content id="male">
-            <app-article-card *ngFor="let card of cards" [card]="card"></app-article-card>
-          </ion-segment-content>
-          <ion-segment-content id="female">
-            <app-article-card *ngFor="let card of cards" [card]="card"></app-article-card>
-          </ion-segment-content>
-        </ion-segment-view>
-      </ion-card-content>
-    </ion-card>
-  </div>
 
   <!-- 底部弹出模态 -->
   <ion-modal [isOpen]="isModalOpen" cssClass="bottom-modal">

wisdom-app/src/app/tab2/tab2.page.scss

@@ -12,11 +12,10 @@
     text-align: center;
   }
   
-.search-bar input {
-  width: 80%;
-  padding: 8px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+.custom-searchbar {
+  --background: #ffffff;
+  --border-radius: 20px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
 }
 
 .header {

wisdom-app/src/app/tab2/tab2.page.ts

@@ -1,5 +1,5 @@
 import { Component, NgModule } 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 } from '@ionic/angular/standalone';
+import { ModalController, IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonAvatar, IonButton, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonIcon, IonButtons, IonSearchbar } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { addIcons } from 'ionicons';
 import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
@@ -8,8 +8,6 @@ import { CommonModule } from '@angular/common';
 import { CloudObject, CloudQuery } from 'src/lib/ncloud';
 import { NavigationLanComponent } from '../component/navigation-lan/navigation-lan.component';
 import { Router } from '@angular/router';
-import { cardDisplay } from '../page/data-modal/data-modal.component';
-import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
 addIcons({ airplane, bluetooth, call, wifi });
 
 @Component({
@@ -22,14 +20,34 @@ addIcons({ airplane, bluetooth, call, wifi });
     IonLabel,IonItem,IonList,IonAvatar,ArticleCardComponent,CommonModule,IonButton,
     IonSegment, IonSegmentButton,NavigationLanComponent,
     IonSegmentContent,IonSegmentView,IonCardContent, IonCardTitle, IonCardHeader,IonCard,
-    IonModal,IonIcon, IonButtons,
+    IonModal,IonIcon, IonButtons, IonSearchbar
   ]
 })
 
 export class Tab2Page {
+  products: Array<CloudObject> = []; // 当前显示的科普信息
+  allCards: Array<CloudObject> = []; // 所有科普信息
+
+  //搜索功能
+  searchTerm: string = '';
+
+  async searchProducts(event: any) {
+    this.searchTerm = event.detail.value.toLowerCase();
+    if (this.searchTerm) {
+      this.products = this.allCards.filter(product =>
+        product.get('topic').toLowerCase().includes(this.searchTerm) ||
+        product.get('title').toLowerCase().includes(this.searchTerm) ||
+        product.get('category').toLowerCase().includes(this.searchTerm) ||
+        product.get('content')[0].toLowerCase().includes(this.searchTerm)
+      );
+    } else {
+      this.products = [...this.allCards]; // 如果搜索词为空，则显示所有科普信息
+    }
+  }
 
   isModalOpen = false;
   currentProduct: any;      // 当前选择的科普信息
+
   openDetailModal(product?: any) {
     this.isModalOpen = true;
     this.currentProduct = product;
@@ -60,26 +78,24 @@ export class Tab2Page {
   copyLink() {
     console.log('复制链接');
   }
-  type:"hotdot"|"export"|"sleep"|"lift"|"male"|"female" = "hotdot"
+  type:"hotdot"|"export"|"sleep"|"life"|"男"|"女" = "hotdot"
 
   constructor(
     private modalCtrl:ModalController,
     private router:Router,
   ) { }
 
-  cards: Array<CloudObject> = [];
-  typeChange(ev: any) {
+  cards: Array<CloudObject> = []; // 当前显示的分类卡片
+  async typeChange(ev: any) {
     this.type = ev?.detail?.value || ev?.value || 'hotdot';
     console.log(this.type);
-    this.loadCards(); // 重新加载卡片
+    await this.loadCards(); // 重新加载卡片
   }
 
   async loadCards() {
     const query = new CloudQuery('HotDot');
-    // if (this.type) {
-    //   query.equalTo('category', this.type); // 根据选择的类型设置查询条件
-    // }
-    this.cards = await query.find(); // 执行查询并获取结果
+    this.allCards = await query.find(); // 执行查询并获取结果
+    this.cards = this.allCards.filter((card) => card.get('category').toLowerCase().includes(this.type));
   }
 
   ngOnInit() {