s202226701024/src/app/tab4/tab4.page.html

<ion-header [translucent]="true">
  <ion-toolbar class="custom-toolbar">
    <ion-title class="custom-title">我的</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <!-- 用户登录状态 -->
  @if(!currentUser?.id){
    <div class="welcome-container">
      <ion-card class="login-card">
        <div class="logo-container">
          <img src="assets/tab1.img/商标.jpg" alt="商标" class="logo-image" />
        </div>
        
        <ion-card-header>
          <ion-card-title class="welcome-title">欢迎来到篮球火！</ion-card-title>
          <ion-card-subtitle class="welcome-subtitle">
            在这里，我们为您提供专业的篮球训练和健康管理方案，帮助您提升技能和身体素质。
          </ion-card-subtitle>
        </ion-card-header>

        <ion-card-content class="login-content">
          <div class="login-description">
            登录后，您将能够：
            <ul class="feature-list">
              <li><ion-icon name="basketball-outline"></ion-icon> 记录训练数据</li>
              <li><ion-icon name="trophy-outline"></ion-icon> 获取专业建议</li>
              <li><ion-icon name="people-outline"></ion-icon> 参与社区互动</li>
              <li><ion-icon name="trending-up-outline"></ion-icon> 追踪个人进步</li>
            </ul>
          </div>
          
          <div class="button-container">
            <ion-button expand="block" class="signup-btn" (click)="signup()">
              <ion-icon name="person-add-outline" slot="start"></ion-icon>
              注册账号
            </ion-button>
            <ion-button expand="block" class="login-btn" (click)="login()">
              <ion-icon name="log-in-outline" slot="start"></ion-icon>
              立即登录
            </ion-button>
          </div>
        </ion-card-content>
      </ion-card>
    </div>
  }

  <!-- 已登录 -->
  @if(currentUser?.id){
    <div class="profile-container">
      <ion-card class="profile-card">
        <div class="profile-header">
          <div class="avatar-container">
            <img [src]="currentUser?.get('avatar')" 
                 onerror="this.src='https://app.fmode.cn/dev/jxnu/202226701019/头像示例.png';" 
                 alt="头像" 
                 class="avatar" />
            <div class="avatar-edit-badge">
              <ion-icon name="camera"></ion-icon>
            </div>
          </div>
          <div class="user-info">
            <h2 class="username">{{currentUser?.get("username")}}</h2>
            <div class="user-stats">
              <div class="stat-item">
                <ion-icon name="basketball-outline"></ion-icon>
                <span>训练天数</span>
                <strong>30</strong>
              </div>
              <div class="stat-item">
                <ion-icon name="trending-up-outline"></ion-icon>
                <span>进步指数</span>
                <strong>85%</strong>
              </div>
            </div>
          </div>
        </div>

        <div class="profile-details">
          <div class="detail-item">
            <ion-icon name="person-outline"></ion-icon>
            <span class="label">姓名</span>
            <span class="value">{{currentUser?.get("realname") || "-"}}</span>
          </div>
          <div class="detail-item">
            <ion-icon name="transgender-outline"></ion-icon>
            <span class="label">性别</span>
            <span class="value">{{currentUser?.get("gender") || "-"}}</span>
          </div>
          <div class="detail-item">
            <ion-icon name="calendar-outline"></ion-icon>
            <span class="label">年龄</span>
            <span class="value">{{currentUser?.get("age") || "-"}}岁</span>
          </div>
        </div>

        <div class="profile-actions">
          <ion-button class="edit-btn" (click)="editUser()">
            <ion-icon name="create-outline" slot="start"></ion-icon>
            编辑资料
          </ion-button>
          <ion-button class="logout-btn" (click)="logout()">
            <ion-icon name="log-out-outline" slot="start"></ion-icon>
            退出登录
          </ion-button>
        </div>
      </ion-card>

      <div class="features-grid">
        <ion-card class="feature-card" (click)="gototab5()">
          <div class="feature-content">
            <div class="feature-icon">
              <ion-icon name="book-outline"></ion-icon>
            </div>
            <div class="feature-text">
              <h3>训练备忘录</h3>
              <p>记录训练心得，持续改进</p>
            </div>
          </div>
          <div class="feature-arrow">
            <ion-icon name="chevron-forward-outline"></ion-icon>
          </div>
        </ion-card>

        <ion-card class="feature-card" (click)="gototab6()">
          <div class="feature-content">
            <div class="feature-icon fitness">
              <ion-icon name="fitness-outline"></ion-icon>
            </div>
            <div class="feature-text">
              <h3>身体数据</h3>
              <p>追踪身体状况</p>
            </div>
          </div>
          <div class="feature-arrow">
            <ion-icon name="chevron-forward-outline"></ion-icon>
          </div>
        </ion-card>

        <ion-card class="feature-card" (click)="gototab7()">
          <div class="feature-content">
            <div class="feature-icon trophy">
              <ion-icon name="trophy-outline"></ion-icon>
            </div>
            <div class="feature-text">
              <h3>训练记录</h3>
              <p>见证成长与进步</p>
            </div>
          </div>
          <div class="feature-arrow">
            <ion-icon name="chevron-forward-outline"></ion-icon>
          </div>
        </ion-card>

        <ion-card class="feature-card" (click)="gototab8()">
          <div class="feature-content">
            <div class="feature-icon feedback">
              <ion-icon name="chatbubbles-outline"></ion-icon>
            </div>
            <div class="feature-text">
              <h3>评价反馈</h3>
              <p>分享您的建议</p>
            </div>
          </div>
          <div class="feature-arrow">
            <ion-icon name="chevron-forward-outline"></ion-icon>
          </div>
        </ion-card>
      </div>
    </div>
  }
</ion-content>