smarteat-app/src/app/meal-search/meal-search/meal-search.component.html

@@ -0,0 +1,30 @@
+<!-- meal-search.component.html -->
+<ion-header>
+  <ion-toolbar>
+    <ion-title>搜索结果</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="closeModal()">关闭</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <!-- 搜索结果展示区域 -->
+  <div *ngIf="meals.length > 0">
+    <ion-card *ngFor="let meal of meals">
+      <img [src]="meal.strMealThumb" alt="{{ meal.strMeal }}" />
+      <ion-card-header>
+        <ion-card-title>{{ meal.strMeal }}</ion-card-title>
+        <ion-card-subtitle>{{ meal.strCategory }} - {{ meal.strArea }}</ion-card-subtitle>
+      </ion-card-header>
+      <ion-card-content>
+        <p>{{ meal.strInstructions}}...</p>
+      </ion-card-content>
+    </ion-card>
+  </div>
+
+  <!-- 如果没有结果，则显示提示 -->
+  <div *ngIf="meals.length === 0">
+    <p>没有找到相关菜谱</p>
+  </div>
+</ion-content>

smarteat-app/src/app/meal-search/meal-search/meal-search.component.scss

@@ -0,0 +1,5 @@
+ion-card-content {
+    max-height: 200px;  /* 设置卡片内容的最大高度 */
+    overflow-y: auto;   /* 允许垂直滚动 */
+  }
+  

smarteat-app/src/app/meal-search/meal-search/meal-search.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { MealSearchComponent } from './meal-search.component';
+
+describe('MealSearchComponent', () => {
+  let component: MealSearchComponent;
+  let fixture: ComponentFixture<MealSearchComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MealSearchComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MealSearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

smarteat-app/src/app/meal-search/meal-search/meal-search.component.ts

@@ -0,0 +1,48 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { ModalController } from '@ionic/angular/standalone';
+import { MealService } from 'src/app/meal/meal.service';
+@Component({
+  selector: 'app-meal-search',
+  templateUrl: './meal-search.component.html',
+  styleUrls: ['./meal-search.component.scss'],
+  standalone:true,
+  imports: [IonHeader,IonToolbar,IonContent,IonTitle,IonButton,IonButtons,IonCard,IonCardTitle,IonCardHeader,IonCardContent,CommonModule,IonCardSubtitle]
+})
+export class MealSearchComponent implements OnInit {
+  @Input() searchQuery: string = '';  // 从父组件接收搜索词
+  meals: any[] = [];  // 存储查询到的菜谱
+
+  constructor(
+    private mealService: MealService,
+    private modalController: ModalController
+  ) {}
+
+  ngOnInit() {
+    // 初始化时调用 searchMeals() 进行查询
+    if (this.searchQuery.trim()) {
+      this.searchMeals();
+    }
+  }
+
+  // 根据搜索查询获取菜品
+  searchMeals() {
+    this.mealService.searchMealsByName(this.searchQuery).subscribe(
+      (response) => {
+        this.meals = response.meals || [];  // 将查询结果赋值给 meals
+      },
+      (error) => {
+        console.error('查询失败', error);
+        this.meals = [];  // 如果查询失败，则将 meals 置为空
+      }
+    );
+  }
+
+  // 关闭弹窗
+  closeModal() {
+    this.modalController.dismiss();
+  }
+
+  // 点击菜品查看详细信息
+}

smarteat-app/src/app/meal/meal.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MealService } from './meal.service';
+
+describe('MealService', () => {
+  let service: MealService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MealService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

smarteat-app/src/app/meal/meal.service.ts

@@ -0,0 +1,20 @@
+// meal.service.ts
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+const API_URL = 'https://www.themealdb.com/api/json/v1/1';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MealService {
+
+  constructor(private http: HttpClient) {}
+
+  // 根据食物名称查询菜谱和食物详细信息
+  searchMealsByName(mealName: string): Observable<any> {
+    const url = `${API_URL}/search.php?s=${mealName}`;
+    return this.http.get<any>(url);
+  }
+}

smarteat-app/src/app/tab1/tab1.page.html

@@ -1,5 +1,18 @@
 <ion-toolbar>
-  <ion-searchbar class="custom-searchbar" placeholder="搜索食物、食谱、餐厅" show-clear-button="focus"></ion-searchbar>
+      <ion-searchbar 
+        class="custom-searchbar" 
+        placeholder="搜索食物、食谱、餐厅" 
+        show-clear-button="focus" 
+        (ionInput)="setSearchQuery($event.target.value || '')" 
+        (ionClear)="searchQuery = ''" 
+        (ionCancel)="searchQuery = ''" 
+        (ionSearch)="search()">
+      </ion-searchbar>
+      <ion-buttons slot="end">
+        <ion-button (click)="search()">搜索
+          <ion-icon slot="icon-only" name="search"></ion-icon>
+        </ion-button>
+      </ion-buttons>
 </ion-toolbar>
 
 <ion-content [fullscreen]="true">

smarteat-app/src/app/tab1/tab1.page.ts

@@ -4,7 +4,7 @@ import { CloudSeUser } from 'src/lib/cloudSeuser'; // 引入 CloudSeUser 类
 import { FmodeChatCompletion } from 'fmode-ng'; // 引入 FmodeChatCompletion
 import { addIcons } from 'ionicons';
 import { albumsOutline, documentOutline, leafOutline, scanOutline, storefrontOutline } from 'ionicons/icons';
-import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCol, IonContent, IonHeader, IonIcon, IonInput, IonRow, IonTextarea, IonTitle, IonToolbar, IonGrid, IonCardTitle, IonSearchbar } from '@ionic/angular/standalone'; // 导入 Ionic 组件
+import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCol, IonContent, IonHeader, IonIcon, IonInput, IonRow, IonTextarea, IonTitle, IonToolbar, IonGrid, IonCardTitle, IonSearchbar, IonButtons } from '@ionic/angular/standalone'; // 导入 Ionic 组件
 import { CommonModule } from '@angular/common'; // 导入 CommonModule
 import { ImagePopupComponent } from '../image-popup/image-popup.component'; // 导入弹窗组件
 import { ModalController, NavController } from '@ionic/angular/standalone';
@@ -14,6 +14,9 @@ import { Image3PopupComponent } from '../image-popup/image3-popup/image3-popup.c
 import { Image4PopupComponent } from '../image-popup/image4-popup/image4-popup.component';
 import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
 import { CloudUser } from 'src/lib/ncloud';
+import { MealService } from '../meal/meal.service';
+import { MealSearchComponent } from '../meal-search/meal-search/meal-search.component';
+
 
 @Component({
   selector: 'app-tab1',
@@ -23,17 +26,21 @@ import { CloudUser } from 'src/lib/ncloud';
   imports: [
     CommonModule, IonContent, IonHeader, IonTitle, IonToolbar, 
     IonButton, IonTextarea, IonInput, IonCard, IonCardContent, IonGrid, IonRow, IonCol, IonIcon,
-    IonCardHeader, IonCardTitle, IonSearchbar,
+    IonCardHeader, IonCardTitle, IonSearchbar,IonButtons
   ],
 })
 export class Tab1Page implements OnInit {
   private cloudSeUser: CloudSeUser; // 引入 CloudSeUser 实例
-
+  searchQuery: string = '';
   userInfo: any = null; // 用户信息
   responseMsg: string = ""; // 用于存储 AI 生成的饮食建议
   recipeMsg: string = ""; // 用于存储 AI 生成的推荐食谱
+<<<<<<< HEAD
+  isLoading: boolean = false; 
+=======
   dishName:string="";//用于存储菜品名
   dishPhoto:string="";
+>>>>>>> 30e3263ceeaa56c2a539c16f61e5f80180fab44a
 
   // 存储图片的数组
   images = [
@@ -54,12 +61,38 @@ export class Tab1Page implements OnInit {
   currentSlide: number = 0;
   currentUser:CloudUser|undefined
 
-  constructor(private router: Router, private modalCtrl: ModalController,) {
+  constructor(private router: Router, private modalCtrl: ModalController, private mealService: MealService,) {
     addIcons({ scanOutline, documentOutline, storefrontOutline, albumsOutline, leafOutline });
     this.cloudSeUser = new CloudSeUser();
     this.currentUser=new CloudUser()
   }
 
+  //搜索框功能实现
+  // 当输入发生变化时触发
+  setSearchQuery(query: string) {
+    this.searchQuery = query;
+  }
+
+  // 点击搜索按钮时触发的搜索方法
+  async search() {
+    if (this.searchQuery.trim()) {
+      await this.openMealSearchModal();
+    }
+  }
+
+  // 打开弹窗并展示搜索结果
+  async openMealSearchModal() {
+    const modal = await this.modalCtrl.create({
+      component: MealSearchComponent,
+      componentProps: {
+        searchQuery: this.searchQuery,
+      },
+    });
+
+    await modal.present();
+  }
+//搜索框功能实现
+
   async ngOnInit(): Promise<void> {
     await this.loadUserData(); // 页面初始化时加载用户数据
     if (this.currentUser?.id) {