202226701041/TFPower-app/src/app/tab2/tab2.page.html

<ion-header sticky>
  <ion-toolbar>
    <ion-segment [(ngModel)]="selectedTab" color="primary" class="custom-segment">
      <ion-segment-button value="checkin">
        <ion-icon aria-hidden="true" name="calendar"></ion-icon>
        打卡
      </ion-segment-button>
      <ion-segment-button value="plan">
        <ion-icon name="checkmark-circle" aria-hidden="true"></ion-icon>
        计划
      </ion-segment-button>
      <ion-segment-button value="consultation">
        <ion-icon name="help-circle" aria-hidden="true"></ion-icon>
        问诊
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div style="height: 56px;"></div>
  <!-- 打卡 -->
  <div *ngIf="selectedTab === 'checkin'" class="checkin">
    <ion-card-content *ngFor="let user of planUser">
      <ion-card>
        <ion-card-header>
          <ion-card-title>欢迎回来！{{ user.get('name') }}</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <div class="greeting-container">
            <!-- 头像和信息容器 -->
            <div class="avatar-info-container">
              <!-- 头像部分 -->
              <div class="avatar-container">
                <img [src]="user.get('avater')" alt="用户头像" class="avatar">
              </div>

              <!-- 用户信息部分 -->
              <div class="user-info">
                <ion-card>
                  <ion-card-content>
                    <p><strong>身高：</strong>{{ user.get('height') }} cm</p>
                    <p><strong>体重：</strong>{{ user.get('weight') }} kg</p>
                    <p><strong>BMI：</strong>{{ calculateBMI(user.get('height'), user.get('weight')) }}</p>
                    <p><strong>运动目标：</strong>{{ user.get('fitnessGoals') }}</p>
                  </ion-card-content>
                </ion-card>
                <ion-label>{{ getEncouragement(calculateBMI(user.get('height'), user.get('weight'))) }}</ion-label>
              </div>
            </div>
          </div>
        </ion-card-content>
      </ion-card>
      <ion-card>
        <ion-card-header>
          <ion-card-title>打卡区域</ion-card-title>
        </ion-card-header>
        <ion-card-content>

          <ion-datetime [value]="realDate.toISOString()" (ionChange)="onDateChange($event)">
          </ion-datetime>
          <div class="card-info">
            <p><strong>已打卡天数：</strong>{{ user.get('days') }}天</p>
            <p><strong>连续打卡天数：</strong>{{ user.get('sucdays') }}天</p>
            <p><strong>打卡日期：</strong>{{user.get('checkeddays')}}</p>
            <ion-button expand="full" (click)="markAttendance()">打卡</ion-button>
          </div>
        </ion-card-content>
      </ion-card>
      <ion-card>
        <!-- 未登录 -->
        @if(!currentUser?.id){
        <ion-card-header>
          <ion-card-title>请登录</ion-card-title>
          <ion-card-subtitle>暂无信息</ion-card-subtitle>
        </ion-card-header>
        }
        <!-- 未登录 -->
        @if(currentUser?.id){
        <ion-card-header>
          <ion-card-title>{{currentUser?.get("username")}} {{currentUser?.get("realname")}}</ion-card-title>
          <ion-card-subtitle>性别:{{currentUser?.get("gender")||"-"}} 年龄:{{currentUser?.get("age")||"-"}}
          </ion-card-subtitle>
        </ion-card-header>
        }
        <ion-card-content>
          @if(!currentUser?.id){
          <ion-button expand="block" (click)="signup()">注册</ion-button>
          <ion-button expand="block" (click)="login()">登录</ion-button>
          }
          @if(currentUser?.id){
          <ion-button expand="block" (click)="editUser()">编辑资料</ion-button>
          <ion-button expand="block" (click)="logout()" color="light">登出</ion-button>
          }
        </ion-card-content>
      </ion-card>
    </ion-card-content>
  </div>

  <!-- 计划 -->
  <div *ngIf="selectedTab === 'plan'" class="plan">


    <ion-card-content>
      <ion-card>
        <ion-card-header>
          <ion-card-title>我的本周计划</ion-card-title>
        </ion-card-header>

        <div class="plan-table">
          <ion-grid class="table">
            <ion-row>
              <ion-col size="1.5" class="grid-header">日期</ion-col>
              <ion-col size="1.5" class="grid-header">部位</ion-col>
              <ion-col size="1.5" class="grid-header">项目1</ion-col>
              <ion-col size="2.5" class="grid-header">项目2</ion-col>
              <ion-col size="2.5" class="grid-header">项目3</ion-col>
              <ion-col size="2.5" class="grid-header">项目4</ion-col>
            </ion-row>

            <!-- 绑定计划数据 -->
            <ion-row *ngFor="let day of planList">
              <ion-item-sliding>
                <ion-item>
                  <!-- 显示计划内容 -->
                  <ion-col size="1" class="plan-column">{{ day.get('date') }}</ion-col>
                  <ion-col size="1" class="plan-column">{{ day.get('trainingPart') }}</ion-col>
                  <!-- 显示每个训练项目，确保即使为空也占位 -->
                  <ion-col size="2.5" *ngFor="let task of day.get('trainingItems'); let i = index" class="plan-column">
                    <div class="task-container">
                      <span class="task-item">{{ task.item || '' }}</span>
                      <span class="sets-reps">{{ task.sets }} x {{ task.reps }}</span>
                    </div>
                  </ion-col>
                </ion-item>
                <!-- 滑动时显示的按钮，设置 side="end" 来将按钮显示在右边 -->
                <ion-item-options side="end">
                  <ion-item-option class="edit-btn" color="primary" shape="round" (click)="editPlan(day)">编辑
                  </ion-item-option>
                  <ion-item-option class="delete-btn" color="danger" (click)="deletePlan(day)">删除</ion-item-option>
                </ion-item-options>

              </ion-item-sliding>
            </ion-row>
          </ion-grid>
        </div>
      </ion-card>
      <ion-card-subtitle>
        <ion-icon name="alert-circle-outline" style="margin-right: 5px;"></ion-icon>左滑行内数据可对计划进行修改哦！
      </ion-card-subtitle>
      <ion-button expand="full" shape="round" class="reverse" (click)="regeneratePlan()">
        <ion-icon name="infinite-outline" style="margin-right:5px ;"></ion-icon>重新生成计划
      </ion-button>
    </ion-card-content>
  </div>
  <!-- 问诊 -->
  <div *ngIf="selectedTab === 'consultation'" class="consult">
    <ion-card-content>
      <div
        style="width: 95%; margin: auto; height: 110px; display: flex; justify-content: space-between; background-color: #ffffff; border: 1px solid #e7e7db; border-radius: 20px; overflow: hidden;"
        (click)="doPoemTask()">
        <!-- 左侧内容部分 -->
        <div
          style="display: flex; flex-direction: column; justify-content: flex-start; margin-top: 23px; margin-left: 40px; position: relative;">
          <!-- 品牌动态提示标签 -->
          <div
            style="position: absolute; padding: 5px; color: #fff; background-color: #009b7d; top: -25px; left: -20px; border-radius: 7px; font-size: 12px;">
            健身动作
          </div>
          <!-- 标题 -->
          <h3>
            一键<span style="color: #6dbdac; font-size: 30px; font-weight: bolder; font-family: SimSun;">生成</span>
          </h3>
          <!-- 按钮 -->
          <div style="color: #fff;">
            <ion-button size="small" class="lan">点击了解-></ion-button>
          </div>
        </div>
        <!-- 右侧图片部分 -->
        <div>
          <img src="../../assets/images/action5.png" style="height: 100px; display: flex; justify-content: flex-end;"
            alt="">
        </div>
      </div>

      <!-- 任务区域 -->
      <ion-card *ngIf="actionTaskVisible">
        <ion-card-header>
          <ion-card-title>动作生成</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <div *ngFor="let step of actionTaskList">
            <ion-item>
              <ion-icon *ngIf="step.progress === 0 && !step.error" name="radio-button-off-outline"></ion-icon>
              <ion-icon *ngIf="step.progress !== 0 && step.progress !== 1" name="reload-outline"></ion-icon>
              <ion-icon *ngIf="step.progress === 1" name="checkmark-circle-outline"></ion-icon>
              <ion-icon *ngIf="step.error" name="close-circle-outline"></ion-icon>
              {{ step.title }}
              <span *ngIf="step.progress">{{ step.progress * 100 | number:'2.0-0' }}%</span>
              <span *ngIf="step.error" style="color:red;">{{ step.error }}</span>
            </ion-item>
          </div>
        </ion-card-content>
      </ion-card>

      <!-- 图片展示 -->
      <ion-card *ngIf="shareData.images">
        <ion-card-header>
          <ion-card-title>动作展示</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <div *ngFor="let imageUrl of shareData.images">
            <img [src]="imageUrl" alt="诊断图片" style="width: 100%; height: 400px; object-fit: cover;" />
          </div>
        </ion-card-content>
      </ion-card>

      <!-- 诊断结果 -->


      <!-- AI教练互动 -->
      <ion-card id="coaches">
        <ion-card-header>
          <ion-card-title>教练简介</ion-card-title>
          <ion-card-subtitle>顶级教练</ion-card-subtitle>
        </ion-card-header>
        <ion-card-content style="padding: 5px;">
          <ion-list>
            <ion-item *ngFor="let coach of coachList" lines="none">
              <ion-thumbnail slot="start">
                <img [src]="coach.get('avater') || '../../assets/images/coach1.jpg'" [alt]="coach.get('name')" />
              </ion-thumbnail>
              <div class="coach-info" style="width: 120px;">
                <h3>{{ coach.get('name') }}({{ coach.get('age') }}岁)</h3>
                <p>擅长领域：{{ coach.get('specialize')}}</p>
                <p>WiseFitness俱乐部</p>
              </div>
              <div style="margin-left: 10px;">
                <ion-button shape="round" size="small" (click)="openInquiry(coach)">
                  <ion-icon name="logo-gitlab" style="margin-right: 5px;"></ion-icon>
                  立即咨询
                </ion-button>
              </div>
            </ion-item>
          </ion-list>
        </ion-card-content>
      </ion-card>
      <div
        style="width: 95%; margin: auto; height: 110px; display: flex; justify-content: space-between; background-color: #ffffff; border: 1px solid #e7e7db; border-radius: 20px; overflow: hidden;"
        (click)="doInqueryTask()">

        <!-- 左侧内容部分 -->
        <div
          style="display: flex; flex-direction: column; justify-content: flex-start; margin-top: 23px; margin-left: 40px; position: relative;">

          <!-- 品牌动态提示标签 -->
          <div
            style="position: absolute; padding: 5px; color: #fff; background-color: #009b7d; top: -25px; left: -20px; border-radius: 7px; font-size: 12px;">
            身体疼痛
          </div>

          <!-- 标题 -->
          <h3>
            一键<span style="color: #6dbdac; font-size: 30px; font-weight: bolder; font-family: SimSun;">诊断</span>
          </h3>

          <!-- 按钮 -->
          <div style="color: #fff;">
            <ion-button size="small" class="lan">点击诊断-></ion-button>
          </div>
        </div>

        <!-- 右侧图片部分 -->
        <div>
          <img src="../../assets/images/battle1.png" style="height: 100px; display: flex; justify-content: flex-end;"
            alt="">
        </div>
      </div>
      <ion-card *ngIf="healthTaskVisible">
        <ion-card-header>
          <ion-card-title>医疗诊断</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <div *ngFor="let step of healthTaskList">
            <ion-item>
              <ion-icon *ngIf="step.progress === 0 && !step.error" name="radio-button-off-outline"></ion-icon>
              <ion-icon *ngIf="step.progress !== 0 && step.progress !== 1" name="reload-outline"></ion-icon>
              <ion-icon *ngIf="step.progress === 1" name="checkmark-circle-outline"></ion-icon>
              <ion-icon *ngIf="step.error" name="close-circle-outline"></ion-icon>
              {{ step.title }}
              <span *ngIf="step.progress">{{ step.progress * 100 | number:'2.0-0' }}%</span>
              <span *ngIf="step.error" style="color:red;">{{ step.error }}</span>
            </ion-item>
          </div>
        </ion-card-content>
      </ion-card>
      <ion-card *ngIf="shareData.diagResult">
        <ion-card-header>
          <ion-card-title>{{ shareData.diagResult.title }}</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <h2>{{ shareData.diagResult.desc }}</h2>
          <fm-markdown-preview class="content-style" [content]=shareData.diagResult.content>
          </fm-markdown-preview>
        </ion-card-content>
      </ion-card>

    </ion-card-content>
  </div>
</ion-content>