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

<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-button id="myMenu">
                <ion-icon name="menu-outline"></ion-icon>
            </ion-button>
            <ion-popover trigger="myMenu" triggerAction="click">
                <ng-template>
                    <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>
                </ng-template>
            </ion-popover>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content color="light">
    <!-- 基本信息栏 -->
    <ion-card>
        <ion-list [inset]="true">
            <ion-item lines="full">
                <ion-avatar slot="start">
                    <img alt="头像" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
                </ion-avatar>
                <ion-label>
                    {{currentUser?.get("name") || '昵称'}}
                </ion-label>
                <ion-buttons slot="end">
                    <ion-button>
                        <ion-icon name="heart-outline"></ion-icon>
                        <ion-note>{{currentUser?.get("like") || '99'}}</ion-note>
                    </ion-button>
                </ion-buttons>
            </ion-item>
            <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>
        </ion-list>
    </ion-card>

    <!-- 列表 -->
    <ion-card class="myList">
        <ion-list [inset]="true">
            <ion-item button detail="true" routerLink="/lesson/me/userFollow">
                <ion-label>
                    <ion-note>关注</ion-note>
                </ion-label>
            </ion-item>
            <ion-item button detail="true" routerLink="/lesson/me/userTag">
                <ion-label>
                    <ion-note>成就</ion-note>
                </ion-label>
            </ion-item>
            <ion-item button detail="true" routerLink="/lesson/me/userCollection">
                <ion-label>
                    <ion-note>收藏</ion-note>
                </ion-label>
            </ion-item>
        </ion-list>
    </ion-card>


    <!-- 详细内容 -->
    <!-- 导航 -->
    <ion-card>
        <ion-toolbar>
            <ion-segment value="关注">
                <ion-segment-button value="推荐" (click)="cate='推荐'">
                    <ion-icon name="bicycle-outline"></ion-icon>
                    <ion-label>推荐</ion-label>
                </ion-segment-button>
                <ion-segment-button value="关注" (click)="cate='关注'">
                    <ion-icon name="person-outline"></ion-icon>
                    <ion-label>关注</ion-label>
                </ion-segment-button>
                <ion-segment-button value="科普" (click)="cate='科普'">
                    <ion-icon name="fast-food-outline"></ion-icon>
                    <ion-label>笔记</ion-label>
                </ion-segment-button>
            </ion-segment>
            <ion-buttons slot="end"><ion-button>编辑</ion-button></ion-buttons>
        </ion-toolbar>
    </ion-card>

    <!-- 美景推荐 -->

    <ng-container *ngIf="cate=='推荐'">
        <ion-list [inset]="true" lines="inset">
            <ng-container *ngFor="let recommand of myViewList">
                <ion-item>
                    <ion-thumbnail slot="end">
                        <img alt="推荐图" [src]="recommand?.get('img')" />
                    </ion-thumbnail>
                    <ion-label>
                        <h2>{{recommand?.get('title')}}</h2>
                        <p>{{recommand?.get('content')}}</p>
                        <ion-note slot="start">{{recommand?.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 myRoleList">
                    <ion-col size="6">
                        <ion-card class="attentionCard">
                            <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 sciene of myFoodList">
            <ion-card>
                <img alt="科普图" [src]="sciene?.get('img')" />
                <ion-card-header>
                    <ion-card-title>{{sciene?.get('name')}}</ion-card-title>
                    <ion-card-subtitle>{{sciene?.get('createdAt')| date:
                        'YYYY/MM/dd/HH:mm'||"发布时间"}}</ion-card-subtitle>
                    <div class="metadata-end-wrapper-sciene">
                        <ion-buttons slot="end">
                            <ion-button>
                                <ion-icon name="eye-outline" size="small"></ion-icon>
                                <ion-note>{{sciene?.get('see')}}</ion-note>
                            </ion-button>
                            <ion-button>
                                <ion-icon name="heart-outline" size="small"></ion-icon>
                                <ion-note>{{sciene?.get('like')}}</ion-note>
                            </ion-button>
                        </ion-buttons>
                    </div>
                </ion-card-header>
                <ion-card-content>
                    <p class="scieneContent">{{sciene?.get('content')}}</p>
                </ion-card-content>
            </ion-card>
        </ng-container>
    </ng-container>

    <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-content>