首页详情页1

myapp/src/app/tab1/page-travel/page-travel-routing.module.ts

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

myapp/src/app/tab1/page-travel/page-travel.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 { PageTravelPageRoutingModule } from './page-travel-routing.module';
+
+import { PageTravelPage } from './page-travel.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    PageTravelPageRoutingModule
+  ],
+  declarations: [PageTravelPage]
+})
+export class PageTravelPageModule {}

myapp/src/app/tab1/page-travel/page-travel.page.html

@@ -0,0 +1,82 @@
+<ion-header class="header">
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/travels"></ion-back-button>
+    </ion-buttons>
+    <ion-title>{{travel.name}}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="content">
+  <ion-grid class="travel-intro">
+    <ion-row>
+      <ion-col size="12">
+        <ion-card class="travel-card">
+          <ion-card-header>
+            <ion-card-title>{{travel.name}}简介</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            <p>这里是关于{{travel.name}}的简短介绍，{{travel.name}}是一项充满乐趣的活动，可以体验不同的文化，探索世界各地的美景，增进人们之间的关系。</p>
+            <p>在{{travel.name}}中，孩子们可以开阔视野，学习新知识，同时也能在旅行中培养独立思考和解决问题的能力。家长可以与孩子一起创造美好的回忆，同时也能分享自己的经验和见解。</p>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <ion-grid class="travel-features">
+    <ion-row>
+      <ion-col size="6">
+        <ion-card class="feature-card">
+          <ion-card-header>
+            <ion-card-title>特色活动</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            <p>探索亲子友好型景点，参与互动体验活动</p>
+            <ion-button expand="block" fill="outline">查看详情</ion-button>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+      <ion-col size="6">
+        <ion-card class="feature-card">
+          <ion-card-header>
+            <ion-card-title>亲子住宿</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            <p>精选适合家庭的住宿环境，提供舒适体验</p>
+            <ion-button expand="block" fill="outline">查看详情</ion-button>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <ion-grid class="recommended-routes">
+    <ion-row>
+      <ion-col size="12">
+        <ion-card class="routes-card">
+          <ion-card-header>
+            <ion-card-title>推荐行程</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            <ion-list>
+              <ion-item *ngFor="let route of recommendedRoutes">
+                <ion-label>
+                  <h3>{{route.name}}</h3>
+                  <p>{{route.description}}</p>
+                </ion-label>
+                <ion-button fill="clear" (click)="viewRouteDetail(route)">查看</ion-button>
+              </ion-item>
+            </ion-list>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-title size="small">探索更多</ion-title>
+  </ion-toolbar>
+</ion-footer>

myapp/src/app/tab1/page-travel/page-travel.page.scss

@@ -0,0 +1,43 @@
+.header {
+  --background: #3880ff;
+  --color: white;
+}
+
+.content {
+  --background: #f8f9fa;
+}
+
+.travel-intro {
+  margin-top: 15px;
+}
+
+.travel-card {
+  --background: white;
+  --margin-bottom: 15px;
+}
+
+.feature-card {
+  --background: #f1f3f5;
+  --border-radius: 10px;
+  --margin: 10px;
+}
+
+.recommended-routes {
+  margin-top: 20px;
+}
+
+.routes-card {
+  --background: white;
+  --margin: 0 15px 15px;
+}
+
+.ion-button {
+  --background: #3880ff;
+  --color: white;
+  --ripple-color: rgba(255, 255, 255, 0.3);
+}
+
+.ion-list {
+  --ion-item-background: transparent;
+  --ion-item-color: #333;
+}

myapp/src/app/tab1/page-travel/page-travel.page.spec.ts

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

myapp/src/app/tab1/page-travel/page-travel.page.ts

@@ -0,0 +1,48 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+interface Route {
+  name: string;
+  description: string;
+}
+
+@Component({
+  selector: 'app-page-travel',
+  templateUrl: './page-travel.page.html',
+  styleUrls: ['./page-travel.page.scss'],
+  standalone:false,
+})
+export class PageTravelPage implements OnInit {
+
+  travel:any={}
+
+  constructor(
+    private route:ActivatedRoute
+  ) { 
+
+    this.route.queryParams.subscribe(params=>{
+      console.log(params)
+      this.travel=params
+    })
+  }
+
+  ngOnInit() {
+  }
+  // 定义推荐行程数组
+  recommendedRoutes = [
+    {
+      name: '欢乐三天游',
+      description: '适合全家出游的欢乐行程，包含主题乐园和互动活动。'
+    },
+    {
+      name: '自然探索五天游',
+      description: '探索自然，体验户外生活，增长见识。'
+    }
+  ];
+
+  // 查看行程详情的方法
+  viewRouteDetail(route: Route) {
+    console.log(`查看行程详情: ${route.name}`);
+    // 这里可以添加跳转到行程详情页的逻辑
+  }
+}

myapp/src/app/tab1/tab1-routing.module.ts

@@ -4,15 +4,14 @@ import { Tab1Page } from './tab1.page';
 
 const routes: Routes = [
   {
-    path: '',  // 实际路径是/tab1
+    path: '', 
     component: Tab1Page,
-    children: [
-      {
-        path: 'ionic-g-page-page-travel',  // 完整路径将是/tab1/ionic-g-page-page-travel
-        loadChildren: () => import('./ionic-g-page-page-travel/ionic-g-page-page-travel.module').then(m => m.IonicGPagePageTravelPageModule)
-      }
-    ]
+  },
+  {
+    path: 'travel',
+    loadChildren: () => import('./page-travel/page-travel.module').then( m => m.PageTravelPageModule)
   }
+
 ];
 
 @NgModule({

myapp/src/app/tab1/tab1.page.html

@@ -30,54 +30,14 @@
             <span class="more">全部</span>
         </div>
         <div class="category-grid">
-            <div class="category-item">
+            @for(travel of travelList;track travel){
+                <div (click)="goTravel(travel)" class="category-item">
                 <div class="category-icon">
-                    <ion-icon name="people-outline"></ion-icon>
+                    <ion-icon name="{{travel.icon}}"></ion-icon>
                 </div>
-                <ion-label class="category-name">亲子游</ion-label>
-            </div>
-            <div class="category-item">
-                <div class="category-icon">
-                    <ion-icon name="book-outline"></ion-icon>
-                </div>
-                <ion-label class="category-name">文化游</ion-label>
-            </div>
-            <div class="category-item">
-                <div class="category-icon">
-                    <ion-icon name="thermometer-outline"></ion-icon>
-                </div>
-                <ion-label class="category-name">温泉游</ion-label>
-            </div>
-            <div class="category-item">
-                <div class="category-icon">
-                    <ion-icon name="location-outline"></ion-icon>
-                </div>
-                <ion-label class="category-name">周边游</ion-label>
-            </div>
-            <div class="category-item">
-                <div class="category-icon">
-                    <ion-icon name="map-outline"></ion-icon>
-                </div>
-                <ion-label class="category-name">旅游地图</ion-label>
-            </div>
-            <div class="category-item">
-                <div class="category-icon">
-                    <ion-icon name="business-outline"></ion-icon>
-                </div>
-                <ion-label class="category-name">酒店民宿</ion-label>
-            </div>
-            <div class="category-item">
-                <div class="category-icon">
-                    <ion-icon name="bus-outline"></ion-icon>
-                </div>
-                <ion-label class="category-name">汽车票</ion-label>
-            </div>
-            <div class="category-item">
-                <div class="category-icon">
-                    <ion-icon name="airplane-outline"></ion-icon>
-                </div>
-                <ion-label class="category-name">飞机票</ion-label>
+                <ion-label class="category-name">{{travel.name}}</ion-label>
             </div>
+            }
         </div>
     </div>
     

myapp/src/app/tab1/tab1.page.ts

@@ -11,12 +11,46 @@ import { NavController } from '@ionic/angular';
 export class Tab1Page {
   // 将 navCtrl 作为构造函数参数进行注入
   constructor(private navCtrl: NavController) {}
+  travelList:any[]=[
+  {
+    "icon": "people-outline",
+    "name": "亲子游"
+  },
+  {
+    "icon": "book-outline",
+    "name": "文化游"
+  },
+  {
+    "icon": "thermometer-outline",
+    "name": "温泉游"
+  },
+  {
+    "icon": "location-outline",
+    "name": "周边游"
+  },
+  {
+    "icon": "map-outline",
+    "name": "旅游地图"
+  },
+  {
+    "icon": "business-outline",
+    "name": "酒店民宿"
+  },
+  {
+    "icon": "bus-outline",
+    "name": "汽车票"
+  },
+  {
+    "icon": "airplane-outline",
+    "name": "飞机票"
+  }
+]
 
-  goTravel() {
-    // 方法1：使用NavController（Ionic推荐）
-    this.navCtrl.navigateForward('/tab1/ionic-g-page-page-travel');
-    
-    // 方法2：使用Angular Router
-    // this.router.navigate(['/tab1/ionic-g-page-page-travel']);
+  goTravel(travel?:any){
+    console.log(travel)
+    this.navCtrl.navigateForward(["tabs","tab1","travel"],{
+      queryParams:travel
+    })
+    return
   }
 }