Implementation: Implementation of the aiplan page

TFPower-app/src/app/aiplan-page/aiplan-page.component.html

@@ -1,3 +1,46 @@
-<p>
-  aiplan-page works!
-</p>
+<ion-header>
+  <ion-toolbar>
+    <ion-title>AIplan</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-card color="medium">
+    <ion-card-header>
+      <ion-card-title>AI小助手</ion-card-title>
+      <ion-card-subtitle>填写以下信息，我来给你生成训练计划。</ion-card-subtitle>
+    </ion-card-header>
+    <ion-list>
+      <ion-item>
+        <ion-input label="训练类型" [value]="trainingType" [clearInput]="true" type="text"
+          placeholder="修身、锻炼、出汗等">{{trainingType}}</ion-input>
+      </ion-item>
+      <ion-item>
+        <ion-input label="体重(kg)" [value]="weight" type="number" placeholder="75"></ion-input>
+      </ion-item>
+      <ion-item>
+        <ion-input label="训练时间(min)" [value]="trainingTime" type="number" placeholder="45"></ion-input>
+      </ion-item>
+      <ion-item>
+        <ion-input label="训练强度" [value]="trainingIntensity" [clearInput]="true" type="text"
+          placeholder="弱/中/强"></ion-input>
+      </ion-item>
+      <ion-item>
+        <ion-input label="训练部位" [value]="trainingSite" [clearInput]="true" type="text"
+          placeholder="背部、小腿、大腿等"></ion-input>
+      </ion-item>
+      <ion-item>
+        <!-- <ion-textarea label="其他要求" [autoGrow]="true" type="text" placeholder="任何要求都可以在这里提哦，亲"></ion-textarea> -->
+        <ion-textarea label="其他需求" [value]="needs" [autoGrow]="true" labelPlacement="floating" [counter]="true"
+          maxlength="120" placeholder="任何要求都可以在这里提哦，亲"></ion-textarea>
+      </ion-item>
+      <ion-grid [fixed]="true">
+        <ion-row style="text-align: center;">
+          <ion-col><ion-button fill="outline" (click)="reset()">重置</ion-button></ion-col>
+          <ion-col><ion-button fill="outline" (click)="submit()">确定</ion-button></ion-col>
+        </ion-row>
+      </ion-grid>
+    </ion-list>
+
+  </ion-card>
+</ion-content>

TFPower-app/src/app/aiplan-page/aiplan-page.component.scss

@@ -0,0 +1,3 @@
+ion-item {
+  font-weight: 500;
+}

TFPower-app/src/app/aiplan-page/aiplan-page.component.ts

@@ -1,15 +1,106 @@
 import { Component, OnInit } from '@angular/core';
+import {
+  IonButton,
+  IonCard,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonInput,
+  IonItem,
+  IonList,
+  IonRow,
+  IonTextarea,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-aiplan-page',
   templateUrl: './aiplan-page.component.html',
   styleUrls: ['./aiplan-page.component.scss'],
   standalone: true,
+  imports: [
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    IonCard,
+    IonContent,
+    IonList,
+    IonItem,
+    IonInput,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonTextarea,
+    IonButton,
+    IonGrid,
+    IonRow,
+    IonCol,
+  ],
 })
-export class AiplanPageComponent  implements OnInit {
-
-  constructor() { }
+export class AiplanPageComponent implements OnInit {
+  constructor() {}
 
   ngOnInit() {}
 
+  trainingType: string = '';
+  weight: number = NaN;
+  trainingTime: number = NaN;
+  trainingIntensity: string = '';
+  trainingSite: string = '';
+  needs: string = '';
+  reset() {
+    // 重置表单数据(有问题)
+    // this.trainingType = '';
+    // this.weight = NaN;
+    // this.trainingTime = NaN;
+    // this.trainingIntensity = '';
+    // this.trainingSite = '';
+    // this.needs = '';
+
+    // 重置表单数据(无错误)
+    let ipts = document.querySelectorAll('ion-input');
+    let textarea = document.querySelectorAll('ion-textarea');
+    ipts.forEach((ipt) => {
+      ipt.value = '';
+    });
+    textarea.forEach((text) => {
+      text.value = '';
+    });
+  }
+
+  submit() {
+    // 提交表单数据
+    // let data = {
+    //   trainingType: this.trainingType,
+    //   weight: this.weight,
+    //   trainingTime: this.trainingTime,
+    //   trainingIntensity: this.trainingIntensity,
+    //   trainingSite: this.trainingSite,
+    //   needs: this.needs,
+    // };
+    let ipts = document.querySelectorAll('ion-input');
+    let textarea = document.querySelectorAll('ion-textarea');
+    let userinputs = '';
+    ipts.forEach((ipt) => {
+      userinputs += ipt.value + ' ';
+    });
+    textarea.forEach((text) => {
+      userinputs += text.value + ' ';
+    });
+    let userinputlist = userinputs.split(' ');
+    let data = {
+      trainingType: userinputlist[0],
+      weight: userinputlist[1],
+      trainingTime: userinputlist[2],
+      trainingIntensity: userinputlist[3],
+      trainingSite: userinputlist[4],
+      needs: userinputlist[5],
+    };
+    console.log(data);
+  }
 }

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

@@ -11,10 +11,10 @@
       <ion-content class="ion-padding">
         <ion-list [inset]="true">
           <ion-item>
-            <ion-label><a (click)="gotoTodolistpage()">Todolist</a></ion-label>
+            <ion-label><a (click)="navigateTo('todolistpage')">Todolist</a></ion-label>
           </ion-item>
           <ion-item>
-            <ion-label>Pokémon Yellow</ion-label>
+            <ion-label><a (click)="navigateTo('aiplanpage')">AIplan</a></ion-label>
           </ion-item>
         </ion-list>
         <!-- <ion-button>Go to TodolistPage </ion-button> -->

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

@@ -30,6 +30,7 @@ import { ExploreContainerComponent } from '../explore-container/explore-containe
 import { TodoEditComponent } from '../todo-edit/todo-edit.component';
 import { TodolistPageComponent } from '../todolist-page/todolist-page.component';
 import { Route, Router } from '@angular/router';
+import { AiplanPageComponent } from '../aiplan-page/aiplan-page.component';
 
 @Component({
   selector: 'app-tab1',
@@ -64,6 +65,7 @@ import { Route, Router } from '@angular/router';
     IonCheckbox,
     IonInput,
     IonNavLink,
+    AiplanPageComponent,
   ],
 })
 export class Tab1Page {
@@ -75,8 +77,8 @@ export class Tab1Page {
   todolist: Array<string> = ['have a good day'];
   sexChecked: boolean = false;
 
-  gotoTodolistpage() {
-    this.router.navigate(['/tabs/todolistpage']);
+  navigateTo(path: string) {
+    this.router.navigate([`/tabs/${path}`]);
   }
   goodbody() {
     let allChange = document.querySelector('#allChange');

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

@@ -33,6 +33,13 @@ export const routes: Routes = [
             (m) => m.TodolistPageComponent
           ),
       },
+      {
+        path: 'aiplanpage',
+        loadComponent: () =>
+          import('../aiplan-page/aiplan-page.component').then(
+            (m) => m.AiplanPageComponent
+          ),
+      },
       {
         path: '',
         redirectTo: '/tabs/tab1',