体脂率

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

@@ -0,0 +1,68 @@
+<ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button (click)="goBack()" fill="clear">
+          <ion-icon aria-hidden="true" name="chevron-back-outline" style="color: black; font-size: 24px;"></ion-icon>
+        </ion-button>
+      </ion-buttons>
+      <ion-title>体脂率测试</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  
+  <ion-content>
+    <!-- 身高体重输入框 -->
+    <div class="info-section">
+      <div class="input-row">
+        <div class="input-group">
+          <label>身高:</label>
+          <input type="number" [(ngModel)]="height" placeholder="请输入身高" class="input-box" />
+          <span class="unit">CM</span>
+        </div>
+      </div>
+      <div class="input-row">
+        <div class="input-group">
+          <label>体重:</label>
+          <input type="number" [(ngModel)]="weight" placeholder="请输入体重" class="input-box" />
+          <span class="unit">KG</span>
+        </div>
+      </div>
+      <div class="input-row">
+        <div class="input-group">
+          <label>年龄:</label>
+          <input type="number" [(ngModel)]="age" placeholder="请输入年龄" class="input-box" />
+        </div>
+      </div>
+      <div class="input-row">
+        <div class="input-group">
+          <label>性别:</label>
+          <ion-select [(ngModel)]="gender">
+            <ion-select-option value="male">男性</ion-select-option>
+            <ion-select-option value="female">女性</ion-select-option>
+          </ion-select>
+        </div>
+      </div>
+      <!-- 腰围输入框 -->
+      <div class="input-row">
+        <div class="input-group">
+          <label>腰围:</label>
+          <input type="number" [(ngModel)]="waist" placeholder="请输入腰围" class="input-box" />
+          <span class="unit">CM</span>
+        </div>
+      </div>
+    </div>
+  
+    <!-- 体脂率输出框 -->
+    <div class="info-section" *ngIf="bodyFatPercentage !== null">
+      <div class="output-box">
+        <h3>体脂率</h3>
+        <p>{{ bodyFatPercentage | number: '1.1-1' }}%</p>
+      </div>
+    </div>
+  
+    <!-- 按钮区 -->
+    <div class="center-button">
+      <ion-button fill="clear" class="analysis-button" (click)="calculateBodyFat()">计算体脂率</ion-button>
+      <ion-button fill="clear" class="analysis-button" (click)="resetForm()">清空</ion-button>
+    </div>
+  </ion-content>
+  

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

@@ -0,0 +1,158 @@
+/* 变量定义 */
+$primary-color: #3880ff; // 主色调
+$secondary-color: #f4f4f4; // 辅助色调
+$accent-color: #ff4081; // 强调色
+$font-family: 'Helvetica Neue', Arial, sans-serif;
+
+/* 主样式 */
+ion-header {
+  background-color: $primary-color;
+  color: white;
+
+  ion-toolbar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    ion-title {
+      font-size: 24px;
+      font-weight: bold;
+    }
+  }
+}
+
+ion-content {
+  padding: 16px;
+  background-color: $secondary-color;
+
+  /* 自定义段落样式 */
+  .custom-segment {
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 16px;
+
+    .nav-button {
+      flex: 1;
+      text-align: center;
+      padding: 10px;
+      font-size: 16px;
+      color: $primary-color;
+
+      &.activated {
+        background-color: $primary-color;
+        color: white;
+      }
+    }
+  }
+
+  /* 输入框和显示区域 */
+  .info-section {
+    background-color: white;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    margin-bottom: 16px;
+
+    .input-row {
+      display: flex;
+      justify-content: center; /* 水平居中 */
+      margin-bottom: 16px;
+
+      .input-group {
+        width: 60%; /* 控制输入框的宽度为60% */
+        max-width: 300px; /* 限制最大宽度 */
+        display: flex;
+        flex-direction: column; /* 垂直排列标签和输入框 */
+        align-items: center; /* 内容居中对齐 */
+
+        label {
+          font-weight: bold;
+          margin-bottom: 4px;
+          display: block;
+          text-align: center; /* 标签居中 */
+        }
+
+        .input-box {
+          width: 100%;
+          padding: 8px;
+          border: 1px solid #ccc;
+          border-radius: 4px;
+        }
+
+        .unit {
+          font-size: 14px;
+          margin-top: 4px;
+        }
+      }
+    }
+  }
+
+  /* BMI输出框 */
+  .textarea-section {
+    background-color: white;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    margin-bottom: 16px;
+
+    .textarea-input {
+      width: 100%;
+      height: 120px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      padding: 8px;
+      resize: none;
+    }
+  }
+
+  /* 按钮 */
+  .analysis-button {
+    width: 100%;
+    margin-top: 16px;
+    background-color: $primary-color;
+    color: white;
+    padding: 12px;
+    border-radius: 4px;
+    font-size: 16px;
+    transition: background-color 0.3s;
+
+    &.generating {
+      background-color: $accent-color;
+    }
+
+    &:hover {
+      background-color: darken($primary-color, 10%);
+    }
+  }
+
+  /* 内容框 */
+  .bigbox1 {
+    background-color: white;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    margin-top: 16px;
+
+    .content-style {
+      font-size: 16px;
+      line-height: 1.5;
+    }
+  }
+
+  /* 居中按钮容器 */
+  .center-button {
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: flex-start; /* 垂直居中，但靠上 */
+    width: 100%; /* 父容器宽度占满 */
+    height: 100%; /* 父容器高度占满，确保垂直居中 */
+    text-align: center; /* 按钮文本居中 */
+    padding-top: 40px; /* 增加顶部的间距，确保按钮距离顶部有一定空间 */
+  }
+
+  .center-button ion-button {
+    font-size: 18px; /* 增大字体 */
+    padding: 14px 24px; /* 增大按钮内边距，增大按钮大小 */
+    border-radius: 8px; /* 使按钮角度更加圆润 */
+  }
+}

FitMind-app/src/app/page-test/page-test.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { PageBodyFatComponent } from './page-test.component';
+
+describe('PageBodyFatComponent', () => {
+  let component: PageBodyFatComponent;
+  let fixture: ComponentFixture<PageBodyFatComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [PageBodyFatComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PageBodyFatComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,81 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { AlertController } from '@ionic/angular';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { CommonModule } from '@angular/common'; // 导入 CommonModule
+import { IonicModule } from '@ionic/angular';  // 导入 IonicModule
+
+@Component({
+  selector: 'app-page-test',
+  templateUrl: './page-test.component.html',
+  styleUrls: ['./page-test.component.scss'],
+  standalone: true,
+  imports: [FormsModule, CommonModule, IonicModule], // 在这里加入 IonicModule
+})
+export class PageBodyFatComponent implements OnInit {
+  // 页面属性
+  height: number | null = null; // 身高
+  weight: number | null = null; // 体重
+  age: number | null = null; // 年龄
+  gender: string = 'male'; // 性别
+  waist: number | null = null; // 腰围
+  bodyFatPercentage: number | null = null; // 体脂率
+
+  constructor(private router: Router, private alertController: AlertController) { }
+
+  ngOnInit() {
+    this.resetForm(); // 页面加载时清空数据
+  }
+
+  // 计算体脂率
+  async calculateBodyFat() {
+    if (this.height && this.weight && this.age && this.waist) {
+      if (this.height > 0 && this.weight > 0 && this.age > 0 && this.waist > 0) {
+        // 计算 BMI
+        const heightInMeters = this.height / 100; // 将身高转换为米
+        const bmi = this.weight / (heightInMeters * heightInMeters);
+
+        // 根据性别和腰围、BMI、年龄计算体脂率
+        let bodyFatPercentage: number;
+        
+        if (this.gender === 'female') {
+          // 女性的体脂率估算公式
+          bodyFatPercentage = 0.1 * this.waist + 0.23 * bmi + 0.15 * this.age ;
+        } else {
+          // 男性的体脂率估算公式
+          bodyFatPercentage = 0.1 * this.waist + 0.23 * bmi + 0.15 * this.age ;
+        }
+
+        this.bodyFatPercentage = bodyFatPercentage;
+
+      } else {
+        const alert = await this.alertController.create({
+          header: '身高、体重、年龄和腰围不能为零！',
+          buttons: ['确定']
+        });
+        await alert.present(); // 显示弹出框
+      }
+    } else {
+      const alert = await this.alertController.create({
+        header: '请确保输入完整的身高、体重、年龄和腰围！',
+        buttons: ['确定']
+      });
+      await alert.present(); // 显示弹出框
+    }
+  }
+
+  // 清空数据
+  resetForm() {
+    this.height = null;
+    this.weight = null;
+    this.age = null;
+    this.gender = 'male';
+    this.waist = null; // 清空腰围
+    this.bodyFatPercentage = null;
+  }
+
+  // 返回上一个页面
+  goBack() {
+    this.router.navigate(['/tabs/tab2'], { replaceUrl: true }); // 使用 replaceUrl 强制重载页面
+  }
+}

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

@@ -107,7 +107,9 @@
     <ion-button (click)="goBmipage()">测测你的BMI</ion-button>
   </div>
   
-
+  <div *ngIf="selectedSegment === 'test'" class="center-button">
+    <ion-button (click)="goTestpage()">测测你的体脂率</ion-button>
+  </div>
 
 
 

FitMind-app/src/app/tab2/tab2.page.scss

@@ -150,18 +150,21 @@ ion-content {
       line-height: 1.5;
     }
   }
-}.center-button {
-  display: flex; /* 使用 Flexbox 布局 */
-  justify-content: center; /* 水平居中 */
-  align-items: flex-start; /* 垂直居中，但靠上 */
-  width: 100%; /* 父容器宽度占满 */
-  height: 100%; /* 父容器高度占满，确保垂直居中 */
-  text-align: center; /* 按钮文本居中 */
-  padding-top: 40px; /* 增加顶部的间距，确保按钮距离顶部有一定空间 */
-}
-
-.center-button ion-button {
-  font-size: 18px; /* 增大字体 */
-  padding: 14px 24px; /* 增大按钮内边距，增大按钮大小 */
-  border-radius: 8px; /* 使按钮角度更加圆润 */
-}
+  .center-button {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    padding-top: 20px; /* 减小顶部间距，缩短按钮与顶部的距离 */
+    margin-bottom: 10px; /* 调整按钮之间的间距，减少底部间距 */
+  }
+  
+  /* 对按钮进行样式调整 */
+  .center-button ion-button {
+    font-size: 18px;
+    padding: 14px 24px;
+    border-radius: 8px;
+  }
+}  

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

@@ -12,7 +12,7 @@ import { PageAiChatComponent } from '../page-ai-chat/page-ai-chat.component';
 
 import { CloudUser } from 'src/lib/ncloud';
 import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
-
+import { CloudfearlessPlan } from 'src/app/lib/cloudPlans'; // 引入封装好的 CloudfearlessPlan 类
 
 
 @Component({
@@ -219,7 +219,9 @@ goBmipage() {
   this.router.navigate(['/tabs/bmi']); // 跳转到测试BMI页面
 }
 
-
+goTestpage() {
+  this.router.navigate(['/tabs/test']); // 跳转到测试BMI页面
+}
 
 
 

FitMind-app/src/app/tabs/tabs.routes.ts

@@ -39,6 +39,11 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../page-bmi/page-bmi.component').then((m) => m.PageBmiComponent),
       },
+      {
+        path: 'test',
+        loadComponent: () =>
+          import('../page-test/page-test.component').then((m) => m.PageBodyFatComponent),
+      },
       {
         path: 'chat',
         loadComponent: () =>