132

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

@@ -1,17 +1,77 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>
-      智动up
-    </ion-title>
+    <ion-title>运动App</ion-title> <!-- 应用标题 -->
+    <ion-buttons slot="end">
+      <ion-button (click)="goToSettings()"> <!-- 设置按钮 -->
+        <ion-icon slot="icon-only" name="settings"></ion-icon>
+      </ion-button>
+    </ion-buttons>
   </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-card>
+    <ion-card-header>
+      <ion-card-title>欢迎使用运动App！</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-button expand="full" fill="outline" (click)="goToLogin()">
+        <ion-icon slot="start" name="log-in"></ion-icon> 登录
+      </ion-button>
+      <ion-button expand="full" fill="outline" (click)="goToRegister()">
+        <ion-icon slot="start" name="person-add"></ion-icon> 注册
+      </ion-button>
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>填写个人资料</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-input placeholder="姓名" [(ngModel)]="user.name"></ion-input>
+      <ion-input placeholder="年龄" type="number" [(ngModel)]="user.age"></ion-input>
+      <ion-input placeholder="身高（cm）" type="number" [(ngModel)]="user.height"></ion-input>
+      <ion-input placeholder="体重（kg）" type="number" [(ngModel)]="user.weight"></ion-input>
+      
+      <ion-select placeholder="运动目标" [(ngModel)]="user.goal">
+        <ion-select-option value="gainMuscle">增肌</ion-select-option>
+        <ion-select-option value="loseFat">减脂</ion-select-option>
+        <ion-select-option value="increaseEndurance">提高耐力</ion-select-option>
+        <ion-select-option value="flexibility">增加柔韧性</ion-select-option>
+      </ion-select>
 
-  <app-explore-container name="Tab 1 page"></app-explore-container>
+      <ion-button expand="full" (click)="submitForm()">提交</ion-button>
+    </ion-card-content>
+  </ion-card>
 </ion-content>
+
+<!-- 添加 ion-tabs 来包装底部导航栏 -->
+<ion-tabs>
+  <ion-footer>
+    <ion-toolbar>
+      <ion-tab-bar slot="bottom">
+        <ion-tab-button tab="home" (click)="goToHome()">
+          <ion-icon name="home"></ion-icon>
+          <ion-label>首页</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="recommend" (click)="goToRecommend()">
+          <ion-icon name="fitness"></ion-icon>
+          <ion-label>智能推荐</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="stats" (click)="goToStats()">
+          <ion-icon name="bar-chart"></ion-icon>
+          <ion-label>数据分析</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="profile" (click)="goToProfile()">
+          <ion-icon name="person"></ion-icon>
+          <ion-label>个人资料</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+    </ion-toolbar>
+  </ion-footer>
+</ion-tabs>

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

@@ -1,14 +1,58 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { FormsModule } from '@angular/forms';  // 导入 FormsModule
+import { IonicModule } from '@ionic/angular';  // 导入 IonicModule
 
 @Component({
   selector: 'app-tab1',
+  standalone: true,  // 设置为独立组件
+  imports: [IonicModule, FormsModule],  // 导入所需的模块
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
-  standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
 })
 export class Tab1Page {
+
+  // 声明 user 对象
+  user = {
+    name: '',
+    age: null,
+    height: null,
+    weight: null,
+    goal: ''
+  };
+
   constructor() {}
+
+  // 提交表单
+  submitForm() {
+    console.log('User info:', this.user);
+  }
+
+  // 示例的页面跳转方法
+  goToHome() {
+    console.log('Navigating to Home');
+  }
+
+  goToRecommend() {
+    console.log('Navigating to Recommend');
+  }
+
+  goToStats() {
+    console.log('Navigating to Stats');
+  }
+
+  goToProfile() {
+    console.log('Navigating to Profile');
+  }
+
+  goToSettings() {
+    console.log('Navigating to Settings');
+  }
+
+  goToLogin() {
+    console.log('Navigating to Login');
+  }
+
+  goToRegister() {
+    console.log('Navigating to Register');
+  }
 }