12345

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

@@ -1,21 +1,17 @@
 <ion-header style="background-color: #1e1e1e;">
   <ion-toolbar color="dark">
-    <ion-title>ViviFit</ion-title>
+    <ion-title>Fearless</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true" style="background-color: #f4f4f4;">
-  <!-- 轮播图 -->
-  <ion-slides pager="true" style="height: 200px;">
-    <ion-slide *ngFor="let slide of slides">
-      <img [src]="slide.image" alt="轮播图" style="width: 100%; height: 100%; object-fit: cover;" />
-    </ion-slide>
-  </ion-slides>
+  <!-- 单张图片 -->
+  <img src="assets/1.png" alt="推荐图片" style="width: 100%; height: auto; object-fit: cover;" />
 
   <!-- 标签切换 -->
   <ion-segment [(ngModel)]="selectedTab" color="secondary">
     <ion-segment-button value="recommend">
-      推荐活动
+      推荐
     </ion-segment-button>
     <ion-segment-button value="activities">
       活动
@@ -25,7 +21,6 @@
     </ion-segment-button>
   </ion-segment>
 
-  <!-- 推荐内容 -->
   <div *ngIf="selectedTab === 'recommend'">
     <ion-card *ngFor="let item of recommendations">
       <img [src]="item.image" alt="推荐图片" />
@@ -35,7 +30,7 @@
       </ion-card-header>
       <ion-card-content>
         <p>{{ item.description }}</p>
-        <ion-button expand="full" color="primary" (click)="buyNow()">立即购买</ion-button>
+        <ion-button expand="full" color="primary" (click)="promptAddress()">立即购买</ion-button>
       </ion-card-content>
     </ion-card>
   </div>
@@ -57,7 +52,7 @@
                 热门
               </ion-chip>
             </ion-card-content>
-            <ion-button expand="full" color="tertiary" (click)="register(activity)">立即报名</ion-button>
+            <ion-button expand="full" color="tertiary" (click)="promptRegistration(activity)">立即报名</ion-button>
           </ion-card>
         </ion-col>
       </ion-row>
@@ -81,7 +76,7 @@
                 热销
               </ion-chip>
             </ion-card-content>
-            <ion-button expand="full" color="secondary" (click)="enroll(course)">立即报名</ion-button>
+            <ion-button expand="full" color="secondary" (click)="promptCourseEnrollment(course)">立即报名</ion-button>
           </ion-card>
         </ion-col>
       </ion-row>

FitMind-app/src/app/tab1/tab1.page.spec.ts

@@ -1,27 +1,34 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Tab1Page } from './tab1.page';
+import { Router } from '@angular/router';
+import { of } from 'rxjs';
 
 describe('Tab1Page', () => {
   let component: Tab1Page;
   let fixture: ComponentFixture<Tab1Page>;
+  let router: Router;
 
   beforeEach(async () => {
+    const routerMock = {
+      navigate: jasmine.createSpy('navigate')
+    };
+
+    await TestBed.configureTestingModule({
+      declarations: [Tab1Page],
+      providers: [
+        { provide: Router, useValue: routerMock }
+      ]
+    }).compileComponents();
+
     fixture = TestBed.createComponent(Tab1Page);
     component = fixture.componentInstance;
+    router = TestBed.inject(Router);
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-});
-
-
-
-
-
-
-
-
-
 
+  
+});

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

@@ -1,7 +1,8 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { IonicModule } from '@ionic/angular';
+import { IonicModule, AlertController } from '@ionic/angular';
 import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-tab1',
@@ -18,20 +19,14 @@ import { CommonModule } from '@angular/common';
 export class Tab1Page {
   selectedTab: string = 'recommend';
 
-  slides = [
-    { image: 'assets/1.png' },
-    { image: 'assets/2.png' },
-    { image: 'assets/3.png' },
-  ];
-
   recommendations = [
-    { title: '智能跑步机', subtitle: '最新款', description: '适合家庭使用的智能跑步机，享受便捷运动体验。', image: 'https://example.com/running-machine.jpg' },
-    { title: '瑜伽垫', subtitle: '舒适型', description: '采用高质量材料，给你最舒适的瑜伽体验。', image: 'https://example.com/yoga-mat.jpg' },
+    { title: '智能跑步机', subtitle: '最新款', description: '适合家庭使用的智能跑步机，享受便捷运动体验。', image: 'assets/4.png' },
+    { title: '瑜伽垫', subtitle: '舒适型', description: '采用高质量材料，给你最舒适的瑜伽体验。', image: 'assets/5.png' },
   ];
 
   activities = [
-    { title: '冬季滑雪大赛', date: '2024-12-10', description: '加入我们，挑战滑雪极限！' },
-    { title: '夏季自行车比赛', date: '2024-06-15', description: '感受骑行的乐趣，挑战极限！' },
+    { title: '冬季滑雪大赛', date: '2024-12-30', description: '加入我们，挑战滑雪极限！' },
+    { title: '夏季自行车比赛', date: '2025-06-15', description: '感受骑行的乐趣，挑战极限！' },
   ];
 
   courses = [
@@ -39,18 +34,117 @@ export class Tab1Page {
     { title: '马拉松训练营', instructor: '李教练', description: '为马拉松爱好者提供专业的训练课程，帮助提升跑步成绩。' },
   ];
 
-  // 立即购买操作
-  buyNow(): void {
-    console.log('立即购买');
+  constructor(private router: Router, private alertController: AlertController) {}
+
+  // 弹出输入地址和手机号的弹窗
+  async promptAddress(): Promise<void> {
+    const alert = await this.alertController.create({
+      header: '输入地址和手机号',
+      inputs: [
+        {
+          name: 'address',
+          type: 'text',
+          placeholder: '请输入地址'
+        },
+        {
+          name: 'phone',
+          type: 'tel',
+          placeholder: '请输入手机号'
+        }
+      ],
+      buttons: [
+        {
+          text: '取消',
+          role: 'cancel'
+        },
+        {
+          text: '确认',
+          handler: (data) => {
+            console.log('地址:', data.address);
+            console.log('手机号:', data.phone);
+            this.showAlert('购买成功', '您的订单已提交！');
+          }
+        }
+      ]
+    });
+    await alert.present();
+  }
+
+  // 弹出输入姓名和手机号的弹窗
+  async promptRegistration(activity: any): Promise<void> {
+    const alert = await this.alertController.create({
+      header: '输入姓名和手机号',
+      inputs: [
+        {
+          name: 'name',
+          type: 'text',
+          placeholder: '请输入姓名'
+        },
+        {
+          name: 'phone',
+          type: 'tel',
+          placeholder: '请输入手机号'
+        }
+      ],
+      buttons: [
+        {
+          text: '取消',
+          role: 'cancel'
+        },
+        {
+          text: '确认',
+          handler: (data) => {
+            console.log('姓名:', data.name);
+            console.log('手机号:', data.phone);
+            this.showAlert('报名成功', '您已成功报名活动！');
+          }
+        }
+      ]
+    });
+    await alert.present();
   }
 
-  // 注册活动
-  register(activity: { title: string; date: string; description: string }): void {
-    console.log('注册活动:', activity);
+  // 弹出输入上课时间和手机号的弹窗
+  async promptCourseEnrollment(course: any): Promise<void> {
+    const alert = await this.alertController.create({
+      header: '输入上课时间和手机号',
+      inputs: [
+        {
+          name: 'classTime',
+          type: 'text',
+          placeholder: '请输入上课时间'
+        },
+        {
+          name: 'phone',
+          type: 'tel',
+          placeholder: '请输入手机号'
+        }
+      ],
+      buttons: [
+        {
+          text: '取消',
+          role: 'cancel'
+        },
+        {
+          text: '确认',
+          handler: (data) => {
+            console.log('上课时间:', data.classTime);
+            console.log('手机号:', data.phone);
+            this.showAlert('报名成功', '您已成功报名课程！');
+          }
+        }
+      ]
+    });
+    await alert.present();
   }
 
-  // 注册课程
-  enroll(course: { title: string; instructor: string; description: string }): void {
-    console.log('注册课程:', course);
+  // 显示成功提示
+  async showAlert(header: string, message: string): Promise<void> {
+    const alert = await this.alertController.create({
+      header: header,
+      message: message,
+      buttons: ['确定']
+    });
+    await alert.present();
   }
 }