202226701011/FitMind-app/src/app/tab1/tab1.page.html

<ion-header style="background-color: #1e1e1e;">
  <ion-toolbar color="dark">
    <ion-title>ViviFit</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" style="background-color: #f4f4f4;">
  <!-- 标签切换 -->
  <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>

  <!-- 推荐内容 -->
  <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>