tab1.page.ts 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. import { Component, OnInit, Renderer2 } from '@angular/core';
  2. import { NavigationExtras, Router } from '@angular/router';
  3. import { NavController } from '@ionic/angular';
  4. import { CloudObject, CloudQuery } from 'src/lib/ncloud';
  5. import { IonicModule } from '@ionic/angular';
  6. @Component({
  7. selector: 'app-tab1',
  8. templateUrl: 'tab1.page.html',
  9. styleUrls: ['tab1.page.scss'],
  10. standalone: false,
  11. })
  12. export class Tab1Page implements OnInit {
  13. categories: any[] = [
  14. { name: '中式菜系', icon: 'utensils' },
  15. { name: '西式料理', icon: 'fork-knife' },
  16. { name: '减脂轻食', icon: 'carrot' },
  17. { name: '甜点烘焙', icon: 'cake' },
  18. { name: '汤羹粥品', icon: 'bowl' },
  19. { name: '素食主义', icon: 'leaf' },
  20. ];
  21. recommendedRecipes: any[] = [
  22. { id: 1, title: '香煎鸡胸肉配时蔬', image: '/assets/food/jxr.jpg', time: 30, rating: 4.8 },
  23. { id: 2, title: '奶油蘑菇意面', image: '/assets/food/nymg.jpg', time: 45, rating: 4.9 },
  24. { id: 3, title: '蔬菜鸡胸肉沙拉', image: '/assets/food/jxsl.jpg', time: 25, rating: 4.7 },
  25. ];
  26. constructor(private router: Router, private renderer: Renderer2, private navCtrl: NavController) { }
  27. ngOnInit() {
  28. setTimeout(() => {
  29. const recipeCards = document.querySelectorAll('.recipe-card');
  30. recipeCards.forEach(card => {
  31. this.renderer.setStyle(card, 'opacity', '1');
  32. this.renderer.setStyle(card, 'transform', 'translateY(0)');
  33. });
  34. }, 1000);
  35. this.loadDailyRecommendationList();
  36. }
  37. DailyRecommendationList: Array<CloudObject> = []; // 存储原始每日推荐记录
  38. filteredRecipes: Array<Array<CloudObject>> = []; // 二维数组:外层=DailyRecommendation,内层=对应的Recipe列表
  39. recipeGroup: Array<CloudObject> = [];
  40. async loadDailyRecommendationList() {
  41. // 1. 查询 DailyRecommendation 表并关联 Recipe 数据
  42. let query = new CloudQuery("DailyRecommendation");
  43. query.include("recommendedRecipes"); // 关键:联查 Recipe 表
  44. this.DailyRecommendationList = await query.find();
  45. // 2. 构建二维数组
  46. for (let dailyRec of this.DailyRecommendationList) {
  47. // 获取当前 DailyRecommendation 的 recommendedRecipes 数组
  48. const recipes = dailyRec.data['recommendedRecipes'] || []; // 防止undefined
  49. // 将当前 DailyRecommendation 的所有关联 Recipe 存入内层数组
  50. this.filteredRecipes.push(recipes);
  51. }
  52. console.log("完整的二维数组结构:", this.filteredRecipes);
  53. const randomGroupIndex = Math.floor(Math.random() * this.filteredRecipes.length);
  54. console.log("随机选择的组索引:", randomGroupIndex);
  55. this.recipeGroup = this.filteredRecipes[randomGroupIndex];
  56. console.log("随机选择的组内容:", this.recipeGroup);
  57. }
  58. searchQuery: string = '';
  59. results : Array<CloudObject> = []; // 存储原始每日推荐记录
  60. async selectRecipe() {
  61. const query = this.searchQuery.trim();
  62. if (!query) return;
  63. try {
  64. const cloudQuery = new CloudQuery("Recipe");
  65. cloudQuery.contains("title", query);
  66. const results = await cloudQuery.find();
  67. this.navCtrl.navigateForward(
  68. ["tabs", "tab1", "page-selectlist"],
  69. {
  70. state: {
  71. searchResults: results
  72. }
  73. }
  74. );
  75. console.log("搜索结果:", results);
  76. } catch (error) {
  77. console.error("搜索失败:", error);
  78. }
  79. }
  80. login() {
  81. this.router.navigate(['/login']);
  82. }
  83. register() {
  84. this.router.navigate(['/register']);
  85. }
  86. navigateToCategory() {
  87. this.navCtrl.navigateForward(["tabs", "tab1", "page-type"]);
  88. console.log('Navigating to page-detail');
  89. }
  90. goToRecipeDetail(recipeId: number) {
  91. this.router.navigate(['/recipe', recipeId]);
  92. }
  93. performSearch() {
  94. const query = this.searchQuery.trim();
  95. if (query) {
  96. this.router.navigate(['/search-results'], { queryParams: { q: query } });
  97. }
  98. }
  99. goToTypeList() {
  100. this.navCtrl.navigateForward(["tabs", "tab1", "page-type"]);
  101. console.log('Navigating to page-type');
  102. }
  103. goToDetail(recipe: CloudObject) {
  104. this.navCtrl.navigateForward(["tabs", "tab1", "page-detail", recipe.objectId]);
  105. console.log('Navigating to page-detail');
  106. }
  107. }