APPmy/src/app/tab4/tab4.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <!-- <ion-title>我的</ion-title> -->
    <ion-buttons slot="end">
      <ion-button (click)="openFeedbackPage()">
        <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
        <ion-label>反馈</ion-label>
      </ion-button>
      
      <ion-button (click)="openSettingsPage()">
        <ion-icon name="settings-outline"></ion-icon>
        <ion-label>设置</ion-label>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<!-- <ion-card>
  <img alt="" src="https://ionicframework.com/docs/img/demos/card-media.png" />
  <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-button *ngIf="!user?.id" fill="clear" routerLink="../../modules/user/login">登录</ion-button>
  <ion-button *ngIf="user?.id" fill="clear" routerLink="../../modules/user/edit/info">编辑资料</ion-button>
  <ion-button *ngIf="user?.id" fill="clear" (click)="logout()">登出</ion-button>
</ion-card> -->

<ion-content>
    <ion-card-content>
      <ion-avatar style="margin-left:15px;margin-top:15px; transform:scale(1.8)">
        <img src="https://ionicframework.com/docs/img/demos/avatar.svg" alt="User Avatar">
      </ion-avatar>
      <ion-card-content>
        <p (click)="openLoginPage()" style="margin-left:10px;margin-top:15px;font-size:20px">登录/注册</p>
      </ion-card-content>
    </ion-card-content>

  <ion-card>
    <ion-grid>
  <ion-row>
    <ion-col size="4">
      <p class="count">{{user.following}}</p>
      <p class="label">关注</p>
    </ion-col>
    <ion-col size="4">
      <p class="count">{{user.followers}}</p>
      <p class="label">粉丝</p>
    </ion-col>
    <ion-col size="4">
      <p class="count">{{user.likes}}</p>
      <p class="label">获赞</p>
    </ion-col>
  </ion-row>
</ion-grid>
    <ion-card-content>
    <ion-segment scrollable>
    <ion-segment-button value="creators">
      <ion-icon name="brush-outline"></ion-icon>
      创作者中心
    </ion-segment-button>
    <ion-segment-button value="ai">
      <ion-icon name="color-wand-outline"></ion-icon>
      AI焕新家
    </ion-segment-button>
    <ion-segment-button value="diagnosis">
      <ion-icon name="map-outline"></ion-icon>
      户型诊断
    </ion-segment-button>
    <ion-segment-button value="circles">
      <ion-icon name="chatbubbles-outline"></ion-icon>
      我的圈子
    </ion-segment-button>
    <ion-segment-button value="my-orders">
      <ion-icon name="receipt-outline"></ion-icon>
      我的订单
    </ion-segment-button>
    <ion-segment-button value="decor-assistant">
      <ion-icon name="hammer-outline"></ion-icon>
      装修助手
    </ion-segment-button>
    <ion-segment-button value="apply-verification">
      <ion-icon name="shield-checkmark-outline"></ion-icon>
      申请认证
    </ion-segment-button>
  </ion-segment>
    </ion-card-content>
  </ion-card>
  
  
    <ion-card-content style="justify-content: space-around">
    <p (click)="showContent('发布')" [ngClass]="{'selected': selectedContent === '发布'}">发布</p>
    <p (click)="showContent('收藏')" [ngClass]="{'selected': selectedContent === '收藏'}">收藏</p>
    <p (click)="showContent('点赞')" [ngClass]="{'selected': selectedContent === '点赞'}">点赞</p>
    <p (click)="showContent('浏览')" [ngClass]="{'selected': selectedContent === '浏览'}">浏览</p>
    </ion-card-content>
  

  <ion-row>
    <ion-col size="6" *ngFor="let work of selectedWorks">
      <ion-card>
        <img src="https://ts1.cn.mm.bing.net/th/id/R-C.7362eff54c56e870c18a2126b26d9c23?rik=9if10ySst3TtbQ&riu=http%3a%2f%2fimg.zx123.cn%2fResources%2fzx123cn%2fuploadfile%2f2015%2f0910%2f20150910100439_21337.jpg&ehk=43EDk7VLby%2bA3dLs%2fPIIxej3Cs60UwiZ7rHB7eJ3zYk%3d&risl=&pid=ImgRaw&r=0" alt="作品图片">
        <ion-card-content>
          {{ work.description }}
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-content>