fix: new files

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

@@ -1,17 +1,83 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 1
-    </ion-title>
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-title>ViviFit</ion-title>
   </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-segment [(ngModel)]="selectedTab" color="secondary">
+    <ion-segment-button value="recommend">
+      推荐
+    </ion-segment-button>
+    <ion-segment-button value="activities">
+      活动
+    </ion-segment-button>
+    <ion-segment-button value="courses">
+      课程
+    </ion-segment-button>
+  </ion-segment>
 
-  <app-explore-container name="Tab 1 page"></app-explore-container>
+  <!-- 推荐内容 -->
+  <div *ngIf="selectedTab === 'recommend'">
+    <ion-card *ngFor="let item of recommendations">
+      <img [src]="item.image" alt="推荐图片" />
+      <ion-card-header>
+        <ion-card-title>{{ item.title }}</ion-card-title>
+        <ion-card-subtitle>{{ item.subtitle }}</ion-card-subtitle>
+      </ion-card-header>
+      <ion-card-content>
+        <p>{{ item.description }}</p>
+        <ion-button expand="full" color="primary" (click)="buyNow()">立即购买</ion-button>
+      </ion-card-content>
+    </ion-card>
+  </div>
+
+  <!-- 活动内容 -->
+  <div *ngIf="selectedTab === 'activities'">
+    <ion-grid>
+      <ion-row>
+        <ion-col size="12" size-md="4" *ngFor="let activity of activities">
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>{{ activity.title }}</ion-card-title>
+              <ion-card-subtitle>{{ activity.date }}</ion-card-subtitle>
+            </ion-card-header>
+            <ion-card-content>
+              <p>{{ activity.description }}</p>
+              <ion-chip color="primary">
+                <ion-icon name="star" slot="start"></ion-icon>
+                热门
+              </ion-chip>
+            </ion-card-content>
+            <ion-button expand="full" color="tertiary" (click)="register(activity)">立即报名</ion-button>
+          </ion-card>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </div>
+
+  <!-- 课程内容 -->
+  <div *ngIf="selectedTab === 'courses'">
+    <ion-grid>
+      <ion-row>
+        <ion-col size="12" size-md="4" *ngFor="let course of courses">
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>{{ course.title }}</ion-card-title>
+              <ion-card-subtitle>{{ course.instructor }}</ion-card-subtitle>
+            </ion-card-header>
+            <ion-card-content>
+              <p>{{ course.description }}</p>
+              <ion-chip color="danger">
+                <ion-icon name="checkmark-circle" slot="start"></ion-icon>
+                热销
+              </ion-chip>
+            </ion-card-content>
+            <ion-button expand="full" color="secondary" (click)="enroll(course)">立即报名</ion-button>
+          </ion-card>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </div>
 </ion-content>

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

@@ -1,14 +1,50 @@
-import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';  // 导入 FormsModule
+import { IonicModule } from '@ionic/angular';  // 必须导入 IonicModule，来使用 Ionic 组件
+import { CommonModule } from '@angular/common';  // 必须导入 CommonModule，来处理 ngIf、ngModel 等指令
 
 @Component({
   selector: 'app-tab1',
+  standalone: true,
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
-  standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [
+    IonicModule,      // 导入 IonicModule 来使用 IonHeader、IonToolbar 等组件
+    CommonModule,     // 导入 CommonModule 来使用结构指令（如 ngIf）
+    FormsModule       // 导入 FormsModule 用于 ngModel（双向绑定）
+  ]
 })
 export class Tab1Page {
-  constructor() {}
+  selectedTab: string = 'recommend';  // 默认选中 "推荐" 标签
+
+  recommendations = [
+    { title: '智能跑步机', subtitle: '最新款', description: '适合家庭使用的智能跑步机，享受便捷运动体验。', image: 'https://example.com/running-machine.jpg' },
+    { title: '瑜伽垫', subtitle: '舒适型', description: '采用高质量材料，给你最舒适的瑜伽体验。', image: 'https://example.com/yoga-mat.jpg' },
+  ];
+
+  activities = [
+    { title: '马拉松比赛', date: '2024-12-01', description: '参加全球顶级马拉松赛事，挑战极限。' },
+    { title: '健身挑战赛', date: '2024-11-30', description: '加入我们的健身挑战赛，获得丰厚奖品！' },
+  ];
+
+  courses = [
+    { title: '初学者瑜伽课程', instructor: '张老师', description: '从零开始，带你逐步掌握瑜伽基础。' },
+    { title: '高级跑步训练', instructor: '李老师', description: '专业跑步训练课程，助你提升成绩。' },
+  ];
+
+  // 点击 "立即购买" 按钮时调用
+  buyNow() {
+    console.log('立即购买');
+  }
+
+  // 点击 "立即报名" 活动时调用
+  register(activity: any) {
+    console.log('注册活动:', activity);
+  }
+
+  // 点击 "立即报名" 课程时调用
+  enroll(course: any) {
+    console.log('注册课程:', course);
+    
+  }
 }