test-page完成

newwisefitnessapp/src/app/test-page/test-page.component.html

@@ -1,52 +1,87 @@
-<!-- test-page.component.html -->
 <ion-header translucent="true">
   <ion-toolbar>
-    <ion-title>制定健身计划</ion-title>
+    <ion-title>制定个人健身计划</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
   <div class="content">
     <!-- 健身目标选择 -->
-    <h2>选择健身目标</h2>
-    <app-tag-input (tagsChanged)="onTagsChanged($event)"></app-tag-input>
+    <div class="module">
+      <h2>请输入您的健身目标</h2>
+      <app-tag-input (tagsChanged)="onTagsChanged($event)"></app-tag-input>
+      <ion-item>
+        <ion-label position="floating">详细描述(可选)</ion-label>
+        <ion-textarea [value]="goalDescription" (ionInput)="onGoalDescriptionChange($event)"
+          placeholder="例如：我想减脂，增强耐力..." auto-grow="true">
+        </ion-textarea>
+      </ion-item>
+    </div>
 
     <!-- 偏好设置 -->
-    <h3>偏好设置</h3>
-    <ion-item>
-      <ion-label>锻炼方式</ion-label>
-      <ion-select [(ngModel)]="exercisePreference">
-        <ion-select-option value="cardio">有氧</ion-select-option>
-        <ion-select-option value="strength">力量</ion-select-option>
-        <ion-select-option value="flexibility">柔韧性</ion-select-option>
-      </ion-select>
-    </ion-item>
+    <div class="module">
+      <h3>偏好设置</h3>
+      <ion-grid>
+        <ion-row>
+          <ion-col size="6">
+            <ion-item>
+              <ion-label>锻炼方式(多选)</ion-label>
+              <ion-select multiple="true" (ionChange)="onExercisePreferenceChange($event)" cancelText="取消" okText="确认">
+                <ion-select-option value="cardio">有氧</ion-select-option>
+                <ion-select-option value="strength">力量</ion-select-option>
+                <ion-select-option value="flexibility">柔韧性</ion-select-option>
+              </ion-select>
+            </ion-item>
+          </ion-col>
+          <ion-col size="6">
+            <ion-item>
+              <ion-label>每周锻炼频率</ion-label>
+              <ion-select (ionChange)="onWorkoutFrequencyChange($event)" cancelText="取消" okText="确认">
+                <ion-select-option value="1">1次</ion-select-option>
+                <ion-select-option value="2">2次</ion-select-option>
+                <ion-select-option value="3">3次</ion-select-option>
+                <ion-select-option value="4">4次</ion-select-option>
+                <ion-select-option value="5">5次</ion-select-option>
+                <ion-select-option value="6">6次</ion-select-option>
+                <ion-select-option value="7">7次</ion-select-option>
+              </ion-select>
+            </ion-item>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </div>
 
-    <ion-item>
-      <ion-label>每周锻炼频率</ion-label>
-      <ion-select [(ngModel)]="workoutFrequency">
-        <ion-select-option value="1">1次</ion-select-option>
-        <ion-select-option value="2">2次</ion-select-option>
-        <ion-select-option value="3">3次</ion-select-option>
-        <ion-select-option value="4">4次</ion-select-option>
-        <ion-select-option value="5">5次</ion-select-option>
-      </ion-select>
-    </ion-item>
-
-    <!-- 身体数据输入 -->
-    <h3>身体数据</h3>
-    <ion-item>
-      <ion-label position="floating">身高</ion-label>
-      <ion-input type="number" [(ngModel)]="height" placeholder="请输入身高" required></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label position="floating">体重</ion-label>
-      <ion-input type="number" [(ngModel)]="weight" placeholder="请输入体重" required></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label position="floating">年龄</ion-label>
-      <ion-input type="number" [(ngModel)]="age" placeholder="请输入年龄" required></ion-input>
-    </ion-item>
+    <!-- 身体数据 -->
+    <div class="module">
+      <h3>身体数据</h3>
+      <ion-grid>
+        <ion-row>
+          <ion-col size="4">
+            <ion-item [class.empty]="!height" [class.filled]="height">
+              <ion-label position="floating">身高(cm)</ion-label>
+              <ion-input type="number" [value]="height" (ionInput)="onHeightChange($event)" placeholder="请输入身高"
+                required>
+              </ion-input>
+            </ion-item>
+          </ion-col>
+          <ion-col size="4">
+            <ion-item [class.empty]="!weight" [class.filled]="weight">
+              <ion-label position="floating">体重(kg)</ion-label>
+              <ion-input type="number" [value]="weight" (ionInput)="onWeightChange($event)" placeholder="请输入体重"
+                required>
+              </ion-input>
+            </ion-item>
+          </ion-col>
+          <ion-col size="4">
+            <ion-item [class.empty]="!age" [class.filled]="age">
+              <ion-label position="floating">年龄(age)</ion-label>
+              <ion-input type="number" [value]="age" (ionInput)="onAgeChange($event)" placeholder="请输入年龄" required>
+              </ion-input>
+            </ion-item>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </div>
 
     <!-- 生成计划按钮 -->
     <ion-button expand="full" (click)="generatePlan()">生成健身计划</ion-button>

newwisefitnessapp/src/app/test-page/test-page.component.scss

@@ -0,0 +1,38 @@
+.content {
+  padding: 8px;
+}
+h2 {
+  margin-bottom: 8px;
+  font-size: 1.5em;
+}
+h3
+{
+   margin-bottom: 8px;
+  font-size: 1.2em; 
+}
+.module {
+  margin-bottom: 8px;
+  padding: 8px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+ion-grid {
+  margin-bottom: 8px;
+}
+ion-label{
+    transition: transform 0.2s ease;
+}
+ion-input {
+  --padding-top: 20px;
+  --padding-bottom: 2px; 
+  font-size: 14px;
+}
+
+ion-col {
+  padding: 0 8px;
+}
+ion-button {
+  margin-top: 20px;
+  --background: #3880ff;
+}

newwisefitnessapp/src/app/test-page/test-page.component.ts

@@ -1,8 +1,9 @@
-// test-page.component.ts
 import { Component, OnInit } from '@angular/core';
 import { IonicModule } from '@ionic/angular';
 import { FormsModule } from '@angular/forms';
 import { TagInputComponent } from '../tag-input/tag-input.component';
+import { addIcons } from 'ionicons';
+import { barbellOutline, personOutline, square, alarmOutline } from 'ionicons/icons';
 
 @Component({
   selector: 'app-test-page',
@@ -12,34 +13,58 @@ import { TagInputComponent } from '../tag-input/tag-input.component';
   imports: [IonicModule, FormsModule, TagInputComponent]  // 导入必要的模块
 })
 export class TestPageComponent implements OnInit {
-
   selectedTags: string[] = [];  // 用来存储选择的标签
   exercisePreference: string = '';  // 锻炼方式偏好
   workoutFrequency: string = '';  // 每周锻炼频率
   height: number | null = null;  // 身高
   weight: number | null = null;  // 体重
   age: number | null = null;  // 年龄
+  goalDescription: string = '';  // 目标描述，用来绑定文本域内容
 
-  constructor() { }
+  constructor() {
+    addIcons({ personOutline, barbellOutline, alarmOutline, square });
+  }
 
   ngOnInit() { }
 
-  // 处理标签变化事件
   onTagsChanged(tags: string[]) {
     this.selectedTags = tags;
     console.log('当前标签:', this.selectedTags);
   }
 
-  // 生成健身计划的按钮点击处理
+  onGoalDescriptionChange(event: any) {
+    this.goalDescription = event.detail.value;
+  }
+
+  onExercisePreferenceChange(event: any) {
+    this.exercisePreference = event.detail.value;
+  }
+
+  onWorkoutFrequencyChange(event: any) {
+    this.workoutFrequency = event.detail.value;
+  }
+
+  onHeightChange(event: any) {
+    this.height = event.detail.value;
+  }
+
+  onWeightChange(event: any) {
+    this.weight = event.detail.value;
+  }
+
+  onAgeChange(event: any) {
+    this.age = event.detail.value;
+  }
+
   generatePlan() {
-    // 这里可以处理生成计划的逻辑
     console.log('生成健身计划', {
       tags: this.selectedTags,
       exercisePreference: this.exercisePreference,
       workoutFrequency: this.workoutFrequency,
       height: this.height,
       weight: this.weight,
-      age: this.age
+      age: this.age,
+      goalDescription: this.goalDescription
     });
   }
 }