app-gift/app-angular/src/modules/lesson/me/me.component.html

<ion-menu side="end" content-id="main-content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu Content</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding"> 
        
            <ion-list>
                <ion-item [button]="true">
                    <ion-icon name="scan-outline" size="small"></ion-icon>
                    <ion-text>扫一扫</ion-text>
                </ion-item>
                <ion-item [button]="true">
                    <ion-icon name="share-social-outline" size="small"></ion-icon>
                    <ion-text>分享</ion-text>
                </ion-item>
                <ion-item [button]="true">
                    <ion-icon name="pulse-outline" size="small"></ion-icon>
                    <ion-text>客服</ion-text>
                </ion-item>

                <ion-item [button]="true">
                    <ion-icon name="settings-outline" size="small"></ion-icon>
                    <ion-text>设置</ion-text>
                </ion-item>
                <ion-list [inset]="true">
                    <ion-button *ngIf="!currentUser?.id" expand="block" routerLink="/user/login">登录</ion-button>
                    <ion-button *ngIf="currentUser?.id" fill="clear" expand="block" (click)="logout()">登出</ion-button>
                </ion-list>
            </ion-list>
    </ion-content>
</ion-menu>

<div class="ion-page" id="main-content">
        <ion-header>
          <ion-toolbar>
            <ion-title>首页</ion-title>
            <ion-buttons slot="end">
                <ion-button routerLink="/user/info">
                    <ion-icon slot="start" name="create-outline"></ion-icon>
                </ion-button>  
              <ion-menu-button></ion-menu-button>
              
            </ion-buttons>
          </ion-toolbar>
        </ion-header>
        <ion-content class="ion-padding">
    
    <div class="card-container">
        <div class="card">
            <div class="profile">
                <ion-avatar>
                    <img alt="Silhouette of a person's head" src="../../assets/1.jpg" />
                </ion-avatar>
                <ion-label>
                    {{currentUser?.get("name") || '昵称'}}
                </ion-label>
    
                <ion-item lines="none">
                    <ion-badge slot="start">{{currentUser?.get("tag") || '标签'}}</ion-badge>
                </ion-item>
                <ion-item lines="none">
                    <ion-label color="medium">
                        {{currentUser?.get("desc") || '介绍一下自己吧'}}
                    </ion-label>
                </ion-item>
            </div>
        </div>
    </div>
    

    <!-- <ion-list [inset]="true">
        <ion-button *ngIf="!currentUser?.id" expand="block" routerLink="/user/login">登录</ion-button>
        <ion-button *ngIf="currentUser?.id" fill="clear" expand="block" (click)="logout()">登出</ion-button>
    </ion-list> -->
   

    <ion-accordion-group [multiple]="true" [value]="['first', 'third']">
        <ion-accordion value="first">
          <ion-item slot="header" color="light">
         
            <ion-label class="larger-font">🔔提醒</ion-label>  
          </ion-item>
          <div class="ion-padding" slot="content">
            <ion-item>
            <ion-avatar slot="start">
                <img alt="头像" src="../../assets/2.jpg" />
            </ion-avatar>
            <ion-label><span class="bold-text">葱葱</span><br>  
                <span class="small-orange-text">生日</span>🎂<br>  
                <span class="small-red-text">2024-7-01</span>  </ion-label>
                <ion-badge slot="end" class="days-badge">距离纪念<br><br>今天</ion-badge> 
          </ion-item>
          <ion-item>
            <ion-avatar slot="start">
                <img alt="头像" src="../../assets/3.jpg" />
            </ion-avatar>
            <ion-label>  
                <span class="bold-text">影影</span><br>  
    <span class="small-orange-text">生日</span>🎂<br>  
    <span class="small-red-text">2024-7-03</span>  
            </ion-label>
            <ion-badge slot="end" class="days-badge">距离纪念<br><br>2天</ion-badge> 
          </ion-item>
          <ion-item>
            <ion-avatar slot="start">
                <img alt="头像" src="../../assets/11.jpg" />
            </ion-avatar>
            <ion-label>  
                <span class="bold-text">苏苏</span><br>  
    <span class="small-orange-text">生日</span>🎂<br>  
    <span class="small-red-text">2024-7-10</span>  
            </ion-label>
            <ion-badge slot="end" class="days-badge">距离纪念<br><br>9天</ion-badge> 
          </ion-item>
        </div>
        </ion-accordion>
        <ion-accordion value="second">
          <ion-item slot="header" color="light">
            <ion-label class="larger-font">📌建议</ion-label>
          </ion-item>
          <div class="ion-padding" slot="content"> 
            <ion-item>
            <ion-avatar slot="start">
                <img alt="头像" src="../../assets/8.jpeg" />
            </ion-avatar>
            <ion-label><span >boss刘</span> <br>  
                <span class="small-orange-text">还没记录任何该人物的往来信息</span><br>  
                 </ion-label>
          </ion-item>
          <ion-item>
            <ion-avatar slot="start">
                <img alt="头像" src="../../assets/6.jpg" />
            </ion-avatar>
            <ion-label>  
                <span >飞马智哥</span><br>  
    <span class="small-orange-text">还没添加该人物的关系</span><br>    
            </ion-label>
            
          </ion-item>
          <ion-item>
            <ion-avatar slot="start">
                <img alt="头像" src="../../assets/9.jpg" />
            </ion-avatar>
            <ion-label>  
                <span >Tina蒂娜</span><br>  
    <span class="small-orange-text">还没添加该人物的关系</span><br>    
            </ion-label>
            
          </ion-item>
        </div>
        </ion-accordion>
        <ion-accordion value="third">
          <ion-item slot="header" color="light">
            <ion-label class="larger-font">🎡功能</ion-label>
          </ion-item>
          <div class="ion-padding" slot="content">
            <ion-item button detail="true" routerLink="/lesson/me/userFollow">
                <ion-avatar slot="start">
                    <img alt="" src="../../assets/5.jpg" />
                </ion-avatar>
                <ion-label><span class="bold-text2">人情圈</span> <br>  
                    <span class="small-orange-text2">你的人缘不错哟</span><br>  
                     </ion-label>
              </ion-item>
             
              <ion-item button detail="true" routerLink="/lesson/me/userTag">
                <ion-avatar slot="start">
                    <img alt="头像" src="../../assets/13.jpg" />
                </ion-avatar>
                <ion-label>  
                    <span class="bold-text2">礼物</span><br>  
        <span class="small-orange-text2">送出和收到的礼物</span><br>    
                </ion-label>
              </ion-item>
              <ion-item button detail="true" routerLink="/lesson/me/userCollection">
                <ion-avatar slot="start">
                    <img alt="头像" src="../../assets/14.jpg" />
                </ion-avatar>
                <ion-label>  
                    <span class="bold-text2">想法</span><br>  
        <span class="small-orange-text2">看法，想法，畅所欲言</span><br>    
                </ion-label>
              </ion-item>
                <ion-item button detail="true" routerLink="/lesson/me/userRelationship">
                <ion-avatar slot="start">
                    <img alt="头像" src="../../assets/18.jpg" />
                </ion-avatar>
                <ion-label>  
                    <span class="bold-text2">关系网</span><br>  
        <span class="small-orange-text2">我的人物关系网</span><br>    
                </ion-label>
            </ion-item>

            <ion-item button detail="true" routerLink="/lesson/me/userSkill">
                <ion-avatar slot="start">
                    <img alt="头像" src="../../assets/19.png" />
                </ion-avatar>
                <ion-label>  
                    <span class="bold-text2">技能&能力探索</span><br>  
        <span class="small-orange-text2">检索人物的技能和能力</span><br>    
                </ion-label>
              </ion-item>
                <ion-item button detail="true" routerLink="/lesson/me/userFollow">
                <ion-avatar slot="start">
                    <img alt="头像" src="../../assets/20.png" />
                </ion-avatar>
                <ion-label>  
                    <span class="bold-text2">再见的人物</span><br>  
        <span class="small-orange-text2">不再往来，不在的人物</span><br>    
                </ion-label>
              </ion-item>
              
          </div>
        </ion-accordion>
      </ion-accordion-group>

    

    <!-- 详细内容 -->
    <!-- 导航 -->
    <ion-card>
        <ion-toolbar>
            <ion-segment value="关注">
                <ion-segment-button value="推荐" (click)="cate='推荐'">
                    <ion-icon name="footsteps-outline"></ion-icon>
                    <ion-label>我的足迹</ion-label>
                </ion-segment-button>
                <ion-segment-button value="关注" (click)="cate='关注'">
                    <ion-icon name="heart-circle-outline"></ion-icon>
                    <ion-label>赞过</ion-label>
                </ion-segment-button>
                <ion-segment-button value="科普" (click)="cate='科普'">
                    <ion-icon name="star-half-outline"></ion-icon>
                    <ion-label>收藏</ion-label>
                </ion-segment-button>
            </ion-segment>
            <ion-buttons slot="end"><ion-button>编辑</ion-button></ion-buttons>
        </ion-toolbar>
        <!-- 好 HH-->
    </ion-card>
    <!-- 推荐图 -->
    <ng-container *ngIf="cate=='推荐'">
        <ion-list [inset]="true" lines="inset">
            <ng-container *ngFor="let recommend of myRecommendList">
                <ion-item>
                    <ion-thumbnail slot="end">
                        <img alt="推荐图" [src]="recommend?.get('img')" />
                    </ion-thumbnail>
                    <ion-label>
                        <h2>{{recommend?.get('title')}}</h2>
                        <p>{{recommend?.get('content')}}</p>
                        <ion-note slot="start">{{recommend?.get('createdAt')| date: 'YYYY/MM/dd'||"发布时间"}}</ion-note>
                    </ion-label>
                </ion-item>
            </ng-container>
        </ion-list>
    </ng-container>
    <!-- 科普关注 -->
    <ng-container *ngIf="cate=='关注'">
        <ion-grid>
            <ion-row>
                <ng-container *ngFor="let attention of myAttentionList">
                    <ion-col size="6">
                        <ion-card class="roleCard">
                            <img alt="关注图" [src]="attention?.get('img')" />
                            <ion-card-header>
                                <ion-card-title>
                                    {{attention?.get('name')}}
                                </ion-card-title>
                                <ion-card-subtitle>{{attention?.get('createdAt')| date:
                                    'YYYY/MM/dd'||"发布时间"}}</ion-card-subtitle>
                            </ion-card-header>

                        </ion-card>
                    </ion-col>
                </ng-container>
            </ion-row>
        </ion-grid>
    </ng-container>
    <!-- 科普笔记 -->
    <ng-container *ngIf="cate=='科普'">
        <ng-container *ngFor="let science of myScienceList">
            <ion-card>
                <img alt="科普图" [src]="science?.get('img')" />
                <ion-card-header>
                    <ion-card-title>{{science?.get('name')}}</ion-card-title>
                    <ion-card-subtitle>{{science?.get('createdAt')| date:
                        'YYYY/MM/dd/HH:mm'||"发布时间"}}</ion-card-subtitle>
                    <div class="metadata-end-wrapper-science">
                        <ion-buttons slot="end">
                            <ion-button>
                                <ion-icon name="eye-outline" size="small"></ion-icon>
                                <ion-note>{{science?.get('see')}}</ion-note>
                            </ion-button>
                            <ion-button>
                                <ion-icon name="heart-outline" size="small"></ion-icon>
                                <ion-note>{{science?.get('like')}}</ion-note>
                            </ion-button>
                        </ion-buttons>
                    </div>
                </ion-card-header>
                <ion-card-content>
                    <p class="foodContent">{{science?.get('content')}}</p>
                </ion-card-content>
            </ion-card>
        </ng-container>
    </ng-container>

</ion-content>
<!-- </ion-content> -->
</div>