页面跳转2.0

myapp/src/app/tab3/page-collections/page-collections-detail/page-collections-detail-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { PageCollectionsDetailPage } from './page-collections-detail.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PageCollectionsDetailPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PageCollectionsDetailPageRoutingModule {}

myapp/src/app/tab3/page-collections/page-collections-detail/page-collections-detail.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { PageCollectionsDetailPageRoutingModule } from './page-collections-detail-routing.module';
+
+import { PageCollectionsDetailPage } from './page-collections-detail.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    PageCollectionsDetailPageRoutingModule
+  ],
+  declarations: [PageCollectionsDetailPage]
+})
+export class PageCollectionsDetailPageModule {}

myapp/src/app/tab3/page-collections/page-collections-detail/page-collections-detail.page.html

@@ -0,0 +1,72 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/"></ion-back-button>
+    </ion-buttons>
+    <ion-title>菜谱详情</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <!-- 菜品图片 -->
+  <div class="recipe-image-container">
+    <img [src]="recipe?.get('imageUrl')" [alt]="recipe?.get('title')" class="recipe-image">
+    <div class="image-overlay">
+      <ion-chip color="primary">{{ recipe?.get('category')}}</ion-chip>
+      <ion-chip color="dark">{{ recipe?.get('cookTime') }}</ion-chip>
+    </div>
+  </div>
+
+  <!-- 菜品名称 -->
+  <div class="recipe-header">
+    <h1 class="recipe-title">{{ recipe?.get('title') }}</h1>
+    <div class="recipe-meta">
+      <span class="meta-item"><ion-icon name="time-outline"></ion-icon> {{ recipe?.get('prepTime') }} 准备</span>
+      <span class="meta-item"><ion-icon name="flame-outline"></ion-icon> {{ recipe?.get('difficulty') }}</span>
+      <span class="meta-item"><ion-icon name="people-outline"></ion-icon> {{ recipe?.get('servings') }} 人份</span>
+    </div>
+  </div>
+
+  <!-- 食材部分 -->
+  <ion-card class="section-card">
+    <ion-card-header>
+      <ion-card-title>
+        <ion-icon name="basket-outline" slot="start"></ion-icon>
+        所需食材
+      </ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list lines="none">
+        <ion-item *ngFor="let ingredient of recipe?.get('ingredients')">
+          <ion-label>{{ ingredient.name }}</ion-label>
+          <ion-note slot="end" color="primary">{{ ingredient.amount }}</ion-note>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 操作步骤 -->
+  <ion-card class="section-card" *ngIf="recipe">
+    <ion-card-header>
+      <ion-card-title>
+        <ion-icon name="restaurant-outline" slot="start"></ion-icon>
+        操作步骤
+      </ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list lines="none">
+        <ion-item 
+          *ngFor="let step of recipe?.get('steps'); let i = index" 
+          class="step-item"
+        >
+          <ion-avatar slot="start" class="step-number">
+            {{ i + 1 }}
+          </ion-avatar>
+          <ion-label class="ion-text-wrap">
+            <p>{{ step }}</p>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

myapp/src/app/tab3/page-collections/page-collections-detail/page-collections-detail.page.scss

@@ -0,0 +1,113 @@
+.recipe-image-container {
+    position: relative;
+    width: 100%;
+    height: 250px;
+    overflow: hidden;
+    
+    .recipe-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    
+    .image-overlay {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+    }
+  }
+  
+  .recipe-header {
+    padding: 16px;
+    
+    .recipe-title {
+      font-size: 1.8rem;
+      font-weight: bold;
+      margin-bottom: 8px;
+      color: var(--ion-color-dark);
+    }
+    
+    .recipe-meta {
+      display: flex;
+      gap: 16px;
+      margin-top: 8px;
+      
+      .meta-item {
+        display: flex;
+        align-items: center;
+        font-size: 0.9rem;
+        color: var(--ion-color-medium);
+        
+        ion-icon {
+          margin-right: 4px;
+          font-size: 1rem;
+        }
+      }
+    }
+  }
+  
+  .section-card {
+    margin: 16px;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    
+    ion-card-header {
+      padding-bottom: 0;
+      
+      ion-card-title {
+        display: flex;
+        align-items: center;
+        font-size: 1.2rem;
+        color: var(--ion-color-dark);
+        
+        ion-icon {
+          margin-right: 8px;
+          color: var(--ion-color-primary);
+        }
+      }
+    }
+  }
+  
+  .step-item {
+    --padding-start: 0;
+    --inner-padding-end: 0;
+    align-items: flex-start;
+    
+    .step-number {
+      width: 28px;
+      height: 28px;
+      background: var(--ion-color-primary);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.9rem;
+      font-weight: bold;
+      margin-right: 12px;
+    }
+    
+    ion-label {
+      margin-top: 4px;
+      margin-bottom: 4px;
+      
+      p {
+        margin: 0;
+        color: var(--ion-color-dark);
+        line-height: 1.5;
+      }
+    }
+  }
+  
+  @media (min-width: 768px) {
+    .recipe-image-container {
+      height: 350px;
+    }
+    
+    .section-card {
+      margin: 20px auto;
+      max-width: 800px;
+    }
+  }

myapp/src/app/tab3/page-collections/page-collections-detail/page-collections-detail.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { PageCollectionsDetailPage } from './page-collections-detail.page';
+
+describe('PageCollectionsDetailPage', () => {
+  let component: PageCollectionsDetailPage;
+  let fixture: ComponentFixture<PageCollectionsDetailPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageCollectionsDetailPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

myapp/src/app/tab3/page-collections/page-collections-detail/page-collections-detail.page.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { addIcons } from 'ionicons';
+import { basketOutline, bookmark, bookmarkOutline, flameOutline, peopleOutline, restaurantOutline, shareSocialOutline, star, starOutline, timeOutline } from 'ionicons/icons';
+import { CloudObject, CloudQuery } from 'src/lib/ncloud';
+
+@Component({
+  selector: 'app-page-collections-detail',
+  templateUrl: './page-collections-detail.page.html',
+  styleUrls: ['./page-collections-detail.page.scss'],
+  standalone: false
+})
+export class PageCollectionsDetailPage implements OnInit {
+
+  constructor(
+    private route: ActivatedRoute
+  ) {
+    addIcons({ timeOutline, 
+      flameOutline, 
+      peopleOutline, 
+      basketOutline, 
+      restaurantOutline,
+      star,
+      starOutline,
+      bookmark,
+      bookmarkOutline,
+      shareSocialOutline });
+    this.route.params.subscribe(params => {
+     console.log(params) ;
+     this.loadRecipe(params['recipeId']);
+    })
+  }
+
+  recipe : CloudObject | undefined |null;
+
+  async loadRecipe(recipeId: string) {
+    let query = new CloudQuery("Recipe");
+    this.recipe = await query.get(recipeId);
+    console.log(this.recipe);
+  }
+
+  ngOnInit() {
+  }
+
+}

myapp/src/app/tab3/page-collections/page-collections-routing.module.ts

@@ -7,7 +7,12 @@ const routes: Routes = [
   {
     path: '',
     component: PageCollectionsPage
+  },
+  {
+    path: 'page-collections-detail/:recipeId',
+    loadChildren: () => import('./page-collections-detail/page-collections-detail.module').then( m => m.PageCollectionsDetailPageModule)
   }
+
 ];
 
 @NgModule({

myapp/src/app/tab3/page-collections/page-collections.page.ts

@@ -78,9 +78,14 @@ export class PageCollectionsPage implements OnInit {
     // 模拟删除操作 - 实际应该更新本地存储或API
     this.collections = this.collections.filter(item => item.id !== id);
   }
-  goToDetail(recipeId: any) {
-    // this.navCtrl.navigateForward(["tabs", "tab1", "page-detail", recipe.objectId]);
-    this.navCtrl.navigateForward(`/tabs/tab1/page-detail/${recipeId}`);
-    console.log('Navigating to page-detail');
+  // goToDetail(recipeId: any) {
+  //   // this.navCtrl.navigateForward(["tabs", "tab1", "page-detail", recipe.objectId]);
+  //   this.navCtrl.navigateForward(`/tabs/tab1/page-detail/${recipeId}`);
+  //   console.log('Navigating to page-detail');
+  // }
+
+  goToDetail(recipeId : any) {
+    this.navCtrl.navigateForward(`/tabs/tab3/page-collections/page-collections-detail/${recipeId}`);
+    console.log('Navigating to page-collections-detail');
   }
 }

myapp/src/app/tab3/page-records/page-records-detail/page-records-detail-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { PageRecordsDetailPage } from './page-records-detail.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PageRecordsDetailPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PageRecordsDetailPageRoutingModule {}

myapp/src/app/tab3/page-records/page-records-detail/page-records-detail.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { PageRecordsDetailPageRoutingModule } from './page-records-detail-routing.module';
+
+import { PageRecordsDetailPage } from './page-records-detail.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    PageRecordsDetailPageRoutingModule
+  ],
+  declarations: [PageRecordsDetailPage]
+})
+export class PageRecordsDetailPageModule {}

myapp/src/app/tab3/page-records/page-records-detail/page-records-detail.page.html

@@ -0,0 +1,72 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/"></ion-back-button>
+    </ion-buttons>
+    <ion-title>菜谱详情</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <!-- 菜品图片 -->
+  <div class="recipe-image-container">
+    <img [src]="recipe?.get('imageUrl')" [alt]="recipe?.get('title')" class="recipe-image">
+    <div class="image-overlay">
+      <ion-chip color="primary">{{ recipe?.get('category')}}</ion-chip>
+      <ion-chip color="dark">{{ recipe?.get('cookTime') }}</ion-chip>
+    </div>
+  </div>
+
+  <!-- 菜品名称 -->
+  <div class="recipe-header">
+    <h1 class="recipe-title">{{ recipe?.get('title') }}</h1>
+    <div class="recipe-meta">
+      <span class="meta-item"><ion-icon name="time-outline"></ion-icon> {{ recipe?.get('prepTime') }} 准备</span>
+      <span class="meta-item"><ion-icon name="flame-outline"></ion-icon> {{ recipe?.get('difficulty') }}</span>
+      <span class="meta-item"><ion-icon name="people-outline"></ion-icon> {{ recipe?.get('servings') }} 人份</span>
+    </div>
+  </div>
+
+  <!-- 食材部分 -->
+  <ion-card class="section-card">
+    <ion-card-header>
+      <ion-card-title>
+        <ion-icon name="basket-outline" slot="start"></ion-icon>
+        所需食材
+      </ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list lines="none">
+        <ion-item *ngFor="let ingredient of recipe?.get('ingredients')">
+          <ion-label>{{ ingredient.name }}</ion-label>
+          <ion-note slot="end" color="primary">{{ ingredient.amount }}</ion-note>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 操作步骤 -->
+  <ion-card class="section-card" *ngIf="recipe">
+    <ion-card-header>
+      <ion-card-title>
+        <ion-icon name="restaurant-outline" slot="start"></ion-icon>
+        操作步骤
+      </ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list lines="none">
+        <ion-item 
+          *ngFor="let step of recipe?.get('steps'); let i = index" 
+          class="step-item"
+        >
+          <ion-avatar slot="start" class="step-number">
+            {{ i + 1 }}
+          </ion-avatar>
+          <ion-label class="ion-text-wrap">
+            <p>{{ step }}</p>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

myapp/src/app/tab3/page-records/page-records-detail/page-records-detail.page.scss

@@ -0,0 +1,113 @@
+.recipe-image-container {
+    position: relative;
+    width: 100%;
+    height: 250px;
+    overflow: hidden;
+    
+    .recipe-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    
+    .image-overlay {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+    }
+  }
+  
+  .recipe-header {
+    padding: 16px;
+    
+    .recipe-title {
+      font-size: 1.8rem;
+      font-weight: bold;
+      margin-bottom: 8px;
+      color: var(--ion-color-dark);
+    }
+    
+    .recipe-meta {
+      display: flex;
+      gap: 16px;
+      margin-top: 8px;
+      
+      .meta-item {
+        display: flex;
+        align-items: center;
+        font-size: 0.9rem;
+        color: var(--ion-color-medium);
+        
+        ion-icon {
+          margin-right: 4px;
+          font-size: 1rem;
+        }
+      }
+    }
+  }
+  
+  .section-card {
+    margin: 16px;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    
+    ion-card-header {
+      padding-bottom: 0;
+      
+      ion-card-title {
+        display: flex;
+        align-items: center;
+        font-size: 1.2rem;
+        color: var(--ion-color-dark);
+        
+        ion-icon {
+          margin-right: 8px;
+          color: var(--ion-color-primary);
+        }
+      }
+    }
+  }
+  
+  .step-item {
+    --padding-start: 0;
+    --inner-padding-end: 0;
+    align-items: flex-start;
+    
+    .step-number {
+      width: 28px;
+      height: 28px;
+      background: var(--ion-color-primary);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.9rem;
+      font-weight: bold;
+      margin-right: 12px;
+    }
+    
+    ion-label {
+      margin-top: 4px;
+      margin-bottom: 4px;
+      
+      p {
+        margin: 0;
+        color: var(--ion-color-dark);
+        line-height: 1.5;
+      }
+    }
+  }
+  
+  @media (min-width: 768px) {
+    .recipe-image-container {
+      height: 350px;
+    }
+    
+    .section-card {
+      margin: 20px auto;
+      max-width: 800px;
+    }
+  }

myapp/src/app/tab3/page-records/page-records-detail/page-records-detail.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { PageRecordsDetailPage } from './page-records-detail.page';
+
+describe('PageRecordsDetailPage', () => {
+  let component: PageRecordsDetailPage;
+  let fixture: ComponentFixture<PageRecordsDetailPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageRecordsDetailPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

myapp/src/app/tab3/page-records/page-records-detail/page-records-detail.page.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { addIcons } from 'ionicons';
+import { basketOutline, bookmark, bookmarkOutline, flameOutline, peopleOutline, restaurantOutline, shareSocialOutline, star, starOutline, timeOutline } from 'ionicons/icons';
+import { CloudObject, CloudQuery } from 'src/lib/ncloud';
+
+@Component({
+  selector: 'app-page-records-detail',
+  templateUrl: './page-records-detail.page.html',
+  styleUrls: ['./page-records-detail.page.scss'],
+  standalone: false
+})
+export class PageRecordsDetailPage implements OnInit {
+
+  constructor(
+    private route: ActivatedRoute
+  ) {
+    addIcons({ timeOutline, 
+      flameOutline, 
+      peopleOutline, 
+      basketOutline, 
+      restaurantOutline,
+      star,
+      starOutline,
+      bookmark,
+      bookmarkOutline,
+      shareSocialOutline });
+    this.route.params.subscribe(params => {
+     console.log(params) ;
+     this.loadRecipe(params['recipeId']);
+    })
+  }
+
+  recipe : CloudObject | undefined |null;
+
+  async loadRecipe(recipeId: string) {
+    let query = new CloudQuery("Recipe");
+    this.recipe = await query.get(recipeId);
+    console.log(this.recipe);
+  }
+
+  ngOnInit() {
+  }
+
+}

myapp/src/app/tab3/page-records/page-records-routing.module.ts

@@ -7,7 +7,12 @@ const routes: Routes = [
   {
     path: '',
     component: PageRecordsPage
+  },
+  {
+    path: 'page-records-detail/:recipeId',
+    loadChildren: () => import('./page-records-detail/page-records-detail.module').then( m => m.PageRecordsDetailPageModule)
   }
+
 ];
 
 @NgModule({

myapp/src/app/tab3/page-records/page-records.page.ts

@@ -66,7 +66,7 @@ export class PageRecordsPage implements OnInit {
 
   goToDetail(recipeId: any) {
     // this.navCtrl.navigateForward(["tabs", "tab1", "page-detail", recipe.objectId]);
-    this.navCtrl.navigateForward(`/tabs/tab1/page-detail/${recipeId}`);
+    this.navCtrl.navigateForward(`/tabs/tab3/page-records/page-records-detail/${recipeId}`);
     console.log('Navigating to page-detail');
   }
 }