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

  <ion-content [fullscreen]="true">

    <ion-card>
      <ion-card-header>
        <ion-card-title>{{user?.get("username") || '未登录'}}</ion-card-title>
        <ion-card-subtitle *ngIf="!user?.id">请您登陆后继续使用</ion-card-subtitle>
        <ion-card-subtitle *ngIf="user?.id">{{user?.get("name")}}-{{user?.get("gender")}}</ion-card-subtitle>
      </ion-card-header>
    <ion-card class="zhang">
      <!-- 新增：根据用户状态，显示登录/登出按钮，执行跳转或登出函数 -->
      <ion-button *ngIf="!user?.id" fill="clear" routerLink="/loadup" style="font-size: large;">登录</ion-button>
      <ion-button *ngIf="user?.id" fill="clear" routerLink="/edito" style="font-size: large;">编辑资料</ion-button>
      <ion-button *ngIf="user?.id" fill="clear" (click)="logout()" style="font-size: large;">登出</ion-button>
    </ion-card>

      
    </ion-card>
  
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon name="barcode"></ion-icon>
      </ion-button>
      <ion-button>
        <ion-icon name="settings"></ion-icon>
      </ion-button>
    </ion-buttons>
  
  
  <ion-card class="top">
    <ion-row class="xiaojun "> 
      <ion-col size="3" class="kai">
  
        <ion-icon name="call"></ion-icon>
        <ion-label style="font-size: large;">手机号</ion-label>
      </ion-col>
      <ion-col size="3" class="kai">
  
        <ion-icon name="call"></ion-icon>
        <ion-label style="font-size: large;">好友</ion-label>
      </ion-col>
      <ion-col size="3" class="kai">
        <ion-icon name="call"></ion-icon>
        <ion-label style="font-size: large;">地址</ion-label>
      </ion-col>
      <ion-col size="3" class="kai">
  
        <ion-icon name="call"></ion-icon>
        <ion-label style="font-size: medium;">导入包裹</ion-label>
      </ion-col>
    </ion-row>
  </ion-card>


  <ion-card class="phone">
    <ion-row class="xiaojun">
      <ion-col size="4" class="kai">

        <ion-icon name="people"></ion-icon>
        <ion-label style="font-size: large;" >寄件会员</ion-label>
      </ion-col>
      <ion-col size="4" class="kai">
        <ion-icon name="people"></ion-icon>
        <ion-label style="font-size: large;" >运输积分</ion-label>
      </ion-col>
      <ion-col size="4" class="kai">

        <ion-icon name="people"></ion-icon>
        <ion-label style="font-size: large;" >服务中心</ion-label>
      </ion-col>
      <!-- 其他按钮列 -->
    </ion-row>
  </ion-card>

  <!-- 我的订单区域 -->
  <ion-card class="phone">
    <ion-row class="xiaojun">
      <ion-col size="3" class="kai" routerLink="/dingdan">
        <ion-icon name="document"></ion-icon>
        <ion-label style="font-size: large;">历史订单</ion-label>
      </ion-col>
      <ion-col size="3" class="kai">

        <ion-icon name="document"></ion-icon>
        <ion-label  style="font-size: large;">路上订单</ion-label>
      </ion-col>
      <ion-col size="3" class="kai">

        <ion-icon name="document"></ion-icon>
        <ion-label style="font-size: large;">已达订单</ion-label>
      </ion-col>
      <ion-col size="3" class="kai">

        <ion-icon name="document"></ion-icon>
        <ion-label style="font-size: large;">回收订单</ion-label>
      </ion-col>
      <!-- 其他按钮列 -->
    </ion-row>
  </ion-card>

  <!-- 休闲娱乐区域 -->


  <link href="tab-mine.page.scss">


</ion-content>