s202226701018/wisdom-app/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">
  <ion-refresher slot="fixed" (ionRefresh)="handleRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  <!-- 用户登录状态 -->
  
    <!-- 未登录 -->
     @if(!currentUser?.id){
      <ion-card >
        <ion-content class="login">
          <ion-card class="login-card">
              <ion-card-header>
                  <ion-card-title>请登录</ion-card-title>
                  <ion-card-subtitle>暂无信息</ion-card-subtitle>
                  <ion-card-content>欢迎来到“智养人生”！在这里，我们为您提供科学、全面的健康管理方案，帮助您实现身心的和谐与平衡。无论是饮食、运动还是心理调适，我们的专业团队将为您量身定制个性化的健康计划。让我们一起探索智慧养生的奥秘，开启健康新生活！登录后，您将踏上智养之旅，发现更好的自己。欢迎您的加入，智养人生，从此刻开始！</ion-card-content>
              </ion-card-header>
              <div class="image-container">
                <img src="https://app.fmode.cn/dev/jxnu/202226701019/logo.png" alt="健康主题图片" class="responsive-image">
            </div>
          </ion-card>
      </ion-content>
      <ion-card-content>
        <ion-button expand="block" (click)="signup()" color="success">注册</ion-button>
        <ion-button expand="block" (click)="login()" color="success">登录</ion-button>
      </ion-card-content>
  </ion-card>
  }
        <!-- 已登录 -->
  @if(currentUser?.id){
    @if(pageNum==0){
        <div class="container">
          <div class="top-section">
            <ion-button expand="block" fill="outline" (click)="changeNum1()" color="dark">简约朴素-模块型</ion-button>
            <ion-label class="zi1">点击进入此主题页面</ion-label>
          </div>
          <div class="bottom-section">
            <ion-button expand="block" fill="outline" (click)="changeNum2()" color="light">优雅精致-层次型</ion-button>
            <ion-label class="zi2">点击进入此主题页面</ion-label>
          </div>
        </div>
      
    }
    @if(pageNum==1){
      
      <ion-card >
          <ion-card-header class="card-header">
            <img [src]="currentUser?.get('avatar')" onerror="this.src='https://app.fmode.cn/dev/jxnu/202226701019/头像示例.png';" alt="图片加载失败" class="avatar" />
            <div class="user-info">
                <ion-card-title>账号：{{currentUser?.get("username")}}</ion-card-title>
                <ion-card-subtitle>
                    姓名: {{currentUser?.get("realname") || "-"}} 
                    性别: {{currentUser?.get("gender") || "-"}} 
                    年龄: {{currentUser?.get("age") || "-"}}
                </ion-card-subtitle>
            </div>
        </ion-card-header>
        <ion-card-content>
          <ion-button expand="block" (click)="editUser()" color="success">编辑资料</ion-button>
          <ion-button expand="block" (click)="changeNum2()">切换主题</ion-button>
          <ion-button expand="block" (click)="logout()" color="medium">登出</ion-button>
        </ion-card-content>
      </ion-card>

      <ion-card >
        <ion-card-header>
          <ion-card-title>个性头像生成器</ion-card-title>
          <ion-card-subtitle>点击创建个性化头像</ion-card-subtitle>
        </ion-card-header>
        <ion-card-content>
          <ion-button expand="block" (click)="goToAvatar()" color="success">前往生成</ion-button>
        </ion-card-content>
      </ion-card>

      <ion-card >
        <ion-card-header>
          <ion-card-title>修改密码</ion-card-title>
          <ion-card-subtitle>点击前往修改密码</ion-card-subtitle>
        </ion-card-header>
        <ion-card-content>
          <ion-button expand="block" (click)="goToKey()" color="success">前往修改</ion-button>
        </ion-card-content>
      </ion-card>

      <ion-card >
        <ion-card-header>
          <ion-card-title>天气与时间</ion-card-title>
          <ion-card-subtitle>点击前往查看今日天气与日历</ion-card-subtitle>
        </ion-card-header>
        <ion-card-content>
          <ion-button expand="block" (click)="goToWeatherTime()" color="success">前往</ion-button>
        </ion-card-content>
      </ion-card>

      <ion-card >
        <ion-card-header>
          <ion-card-title>帮助</ion-card-title>
          <ion-card-subtitle>点击前往查看相关问题的解决</ion-card-subtitle>
        </ion-card-header>
        <ion-card-content>
          <ion-button expand="block" (click)="goToHelp()" color="success">前往</ion-button>
        </ion-card-content>
      </ion-card>

      <ion-card class="memo-card" >
        <h2 class="memo-title">健康备忘录</h2>
        <p class="memo-description">写下您问诊的医生名或者心动的科普知识，便于您下次查找</p>
        <app-edit-tag (onTagChange)="setTagsValue($event)"></app-edit-tag>
        <ul class="tag-list">
            @for(tag of editTags; track tag;){
                <li class="tag-item">{{tag}}</li>
            }
        </ul>
      </ion-card>
     
    }
    @if(pageNum==2){
      <ion-content class="ye2">
      <ion-card class="custom-card">
        <ion-avatar (click)="editUser()">
          <img [src]="currentUser?.get('avatar')" onerror="this.src='https://app.fmode.cn/dev/jxnu/202226701019/头像示例.png';" alt="图片加载失败" class="avatar" />
        </ion-avatar>
        <ion-label>{{currentUser?.get("realname") || "-"}}</ion-label>
      </ion-card>

        <ion-list>
          <ion-item>
            <ion-icon name="person-circle" slot="start" ></ion-icon>
            <ion-label (click)="editUser()">我的信息</ion-label>
          </ion-item>
          <ion-item>
            <ion-icon name="image" slot="start"></ion-icon>
            <ion-label>头像生成</ion-label>
            <ion-button slot="end" fill="outline" size="small" color="success" (click)="goToAvatar()">前往生成</ion-button>
          </ion-item>
          <ion-item>
            <ion-icon name="document" slot="start"></ion-icon>
            <ion-label (click)="goToHealth()">健康档案</ion-label>
          </ion-item>
          <ion-item>
            <ion-icon name="images" slot="start" ></ion-icon>
            <ion-label (click)="goToLocalAvatar()">本地头像</ion-label>
          </ion-item>
          <ion-item>
            <ion-icon name="key" slot="start"></ion-icon>
            <ion-label (click)="goToKey()">修改密码</ion-label>
          </ion-item>
          <ion-item>
            <ion-icon name="cloud-circle" slot="start"></ion-icon>
            <ion-label (click)="goToWeatherTime()">天气与时间</ion-label>
          </ion-item>
          <ion-item>
            <ion-icon name="compass" slot="start"></ion-icon>
            <ion-label (click)="goToGuide()">智养指南</ion-label>
          </ion-item>
          <ion-item>
            <ion-icon name="chatbox" slot="start"></ion-icon>
            <ion-label>联系客服</ion-label>
          </ion-item>
          <ion-item>
            <ion-icon name="help-circle" slot="start" ></ion-icon>
            <ion-label (click)="goToHelp()">帮助</ion-label>
          </ion-item>
          <ion-item>
            <ion-icon name="folder" slot="start"></ion-icon>
            <ion-label>我的收藏<app-edit-tag (onTagChange)="setTagsValue($event)"></app-edit-tag></ion-label>
          </ion-item>
        </ion-list>
      
        <ion-item>
          <ion-label>关注公众号</ion-label>
          <ion-label>每日医生直播义诊早知道~</ion-label>
          <ion-button slot="end" fill="solid" size="small" color="success">立即前往</ion-button>
        </ion-item>
          <ion-button expand="block" fill="outline" (click)="changeNum1()" color="default">切换主题</ion-button>
          <ion-button expand="block" fill="outline" (click)="logout()" color="medium">登出</ion-button>
      </ion-content>
    }
}
</ion-content>