|
|
@@ -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);
|
|
|
+
|
|
|
+ }
|
|
|
}
|
TUSL