s202226701049/AIart-app/src/app/user-login/user-login.component.html

<ion-header [translucent]="true">
  <ion-toolbar class="custom-toolbar">
    <ion-buttons slot="start">
      <ion-back-button default-href="/tabs/tab5" style="color:black;"></ion-back-button>
    </ion-buttons>
    @if(!currentUser?.id){
    <ion-title class="custom-title">
      用户登录注册
    </ion-title>
    }
    @if(currentUser?.id){
    <ion-title class="custom-title">
      个人信息
    </ion-title>
    }
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true" style="padding-top: 3px;">

  <!-- 用户登录状态 -->
  <ion-card style="height: 90%;width: 90%;">
    <!-- 未登录 -->
    @if(!currentUser?.id){
    <ion-card-header style="display: flex;align-items: center;">
      <ion-card-title>Register/Login</ion-card-title>
      <ion-card-subtitle>no user information</ion-card-subtitle>
    </ion-card-header>
    }
    <!-- 已登录 -->
    @if(currentUser?.id){
    <ion-card-header class="card-header">
      <img [src]="currentUser?.get('avatar')|| '../../assets/image/doctor7.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>
      @if(!currentUser?.id){
      <img src="../../assets/img/background.png" alt="登录注册">
      <ion-button expand="block" (click)="signup()">注册</ion-button>
      <ion-button expand="block" (click)="login()">登录</ion-button>
      <div style="display: flex;align-items: center;">
        <img style="height: 40px;width: 40px;border-radius: 20px;" src="../../assets/img/login_icon.png" alt="">
        <img style="height: 40px;width: 40px;border-radius: 10px;" src="../../assets/img/login_icon2.png" alt="">
        <!-- <img style="height: 40px;width: 40px;border-radius: 20px;" src="../../assets/img/login_icon3.png" alt="">
        <img style="height: 40px;width: 40px;border-radius: 20px;" src="../../assets/img/login_icon4.png" alt=""> -->
      </div>
      <span style="margin-left: 70px;">Forgot your password?</span>
      <!-- <img src="../../assets/img/login_icon.png" alt=""> -->
      }
      @if(currentUser?.id){
      <ion-button expand="block" (click)="editUser()">编辑资料</ion-button>
      <ion-button expand="block" (click)="logout()">登出</ion-button>
      }
    </ion-card-content>
  </ion-card>
  @if(currentUser?.id){
  <ion-card class="memo-card">
    <h2 class="memo-title">健康备忘录</h2>
    <p class="memo-description">写下您问诊的医生名或者心动的科普知识，便于您下次查找（点击标签可删除）</p>
    <edit-tag (onTagChange)="setTagsValue($event)"></edit-tag>

    <h2 class="memo-title">收藏夹</h2>
    <ul class="tag-list">
      @for(tag of editTags; track tag;){
      <li class="tag-item">{{tag}}</li>
      }
    </ul>
  </ion-card>
  }
</ion-content>