new7

travel-app/package.json

@@ -27,6 +27,7 @@
     "@capacitor/keyboard": "6.0.3",
     "@capacitor/status-bar": "6.0.2",
     "@ionic/angular": "^8.0.0",
+    "fmode-ng": "^0.0.62",
     "ionicons": "^7.2.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

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

@@ -1,17 +1,55 @@
-<ion-header [translucent]="true">
+
+
+<ion-header>
   <ion-toolbar>
-    <ion-title>
-      Tab 1
-    </ion-title>
+    <ion-searchbar placeholder="搜索山脉或路线"></ion-searchbar>
+    <ion-icon name="notifications" slot="end"></ion-icon>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 1</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content>
+  <ion-grid>
+    <ion-row>
+      <ion-col>
+        <ion-card *ngFor="let route of recommendedRoutes">
+          <img [src]="route.image" />
+          <ion-card-header>
+            <ion-card-title>{{ route.name }}</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            <p>{{ route.difficulty }} - {{ route.time }}</p>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+    </ion-row>
 
-  <app-explore-container name="Tab 1 page"></app-explore-container>
+    <ion-row>
+      <ion-col>
+        <ion-card *ngFor="let plan of trainingPlans">
+          <img [src]="plan.image" />
+          <ion-card-header>
+            <ion-card-title>{{ plan.name }}</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            <p>{{ plan.description }}</p>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col>
+        <ion-card *ngFor="let content of educationalContent">
+          <img [src]="content.image" />
+          <ion-card-header>
+            <ion-card-title>{{ content.title }}</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            <p>{{ content.summary }}</p>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
 </ion-content>
+

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

@@ -0,0 +1,14 @@
+
+
+ion-slides {
+    height: 200px;
+  }
+  
+  ion-card {
+    margin-bottom: 10px;
+  }
+  
+  ion-card img {
+    max-height:500px;
+    width: 100%;
+  }

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

@@ -1,14 +1,35 @@
-import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { Component,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, IonicSlides, IonGrid, IonRow, IonCol, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonFooter, IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonInput } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [IonHeader, IonToolbar, IonTitle, IonSearchbar,IonGrid,
+    IonRow,IonCol,IonCard,IonCardHeader,IonCardTitle,IonCardContent,
+    IonFooter,IonTabs,IonTabBar,IonTabButton,IonIcon,IonLabel,
+    IonContent, ExploreContainerComponent,CommonModule,IonInput],
+    schemas:[CUSTOM_ELEMENTS_SCHEMA],
 })
 export class Tab1Page {
   constructor() {}
+
+  // 示例数据
+  recommendedRoutes = [
+    { id: 1, name: '庐山经典路线生成', difficulty: '中等', time: '5小时', image: 'assets/img/1.png' },
+    { id: 2, name: '三清山挑战路线', difficulty: '困难', time: '8小时', image: 'assets/img/1.png' }
+  ];
+
+  trainingPlans = [
+    { id: 1, name: '初级体能训练', description: '适合初级登山者', image: 'assets/img/1.png' },
+    { id: 2, name: '高级耐力提升', description: '为长期登山者设计', image: 'assets/img/1.png' }
+  ];
+
+  educationalContent = [
+    { id: 1, title: '江西山川文化', summary: '探索江西名山的历史与文化', image: 'assets/img/1.png' },
+    { id: 2, title: '山地生态保护', summary: '了解山地生态的重要性', image: 'assets/img/1.png' }
+  ];
 }

travel-app/src/main.ts

@@ -5,10 +5,30 @@ import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalo
 import { routes } from './app/app.routes';
 import { AppComponent } from './app/app.component';
 
+
+
+// 引用HttpClient方法
+import { provideHttpClient } from '@angular/common/http';
+// 引用移动端授权检测供应器
+import { Diagnostic } from '@awesome-cordova-plugins/diagnostic/ngx';
+// 设置Parse服务属性
+import Parse from "parse";
+Parse.initialize("ncloudmaster");
+Parse.serverURL = "https://server.fmode.cn/parse";
+localStorage.setItem("NOVA_APIG_SERVER", 'aHR0cHMlM0ElMkYlMkZzZXJ2ZXIuZm1vZGUuY24lMkZhcGklMkZhcGlnJTJG')
+
+// 注意：替换Token 根据Token设置Parse服务帐套权限
+Parse.User.become('r:E4KpGvTEto-137671720751732983628')
+
+// 'r:E4KpGvTEto-137671720751732983628'
 bootstrapApplication(AppComponent, {
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     provideIonicAngular(),
     provideRouter(routes, withPreloading(PreloadAllModules)),
+    // 添加HttpClient供应器
+    provideHttpClient(),
+    // 添加Diagnostic
+    Diagnostic,
   ],
 });

travel-app/tsconfig.json

@@ -2,6 +2,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "allowSyntheticDefaultImports":true,
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,