feat: follower

src/app/follower/follower.page.html

@@ -1,13 +1,24 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>follower</ion-title>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab4"></ion-back-button>
+    </ion-buttons>
+    <ion-title>粉丝</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">follower</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content>
+<ion-content style="top:20px">
+  <ion-list lines="none">
+    <ion-item *ngFor="let person of followerList;let i = index" class="person-item" lines="none">
+      <ion-avatar slot="start">
+        <ion-img [src]="person.avatar"></ion-img>
+      </ion-avatar>
+      <ion-label style="font-size: 20px">{{ person.name }}</ion-label>
+      
+<ion-button (click)="toggleFollow(i)" [color]="person.following ? 'light' : 'primary'">
+    {{ person.following ? '已关注' : '回关' }}
+  </ion-button>
+<!-- 添加更多按钮 -->
+    </ion-item>
+  </ion-list>
+</ion-content>

src/app/follower/follower.page.scss

@@ -0,0 +1,20 @@
+ion-list {
+  display: block; /* 显示为块级元素 */
+  margin-top: 0; /* 顶部间距为0，从顶部开始排列 */
+}
+
+ion-item {
+  margin-bottom: 10px; /* 增加底部外边距，调整每一栏之间的间距 */
+}
+
+ion-avatar {
+  --border-radius: 50%; /* 将头像设置为圆形 */
+  width: 60px; /* 调整头像宽度 */
+  height: 60px; /* 调整头像高度 */
+}
+
+ion-avatar ion-img {
+  width: 100%; /* 图片宽度占满 ion-avatar 元素 */
+  height: 100%; /* 图片高度占满 ion-avatar 元素 */
+  object-fit: cover; /* 图片保持比例填充，不变形 */
+}

src/app/follower/follower.page.ts

@@ -6,7 +6,16 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./follower.page.scss'],
 })
 export class FollowerPage implements OnInit {
+  followerList = [
+    { name: 'Aabby',following: false , avatar: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.YOrn8Q0aoOfp7bQc_efOHwAAAA?rs=1&pid=ImgDetMain' },
+    { name: 'Black', following: false , avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.1jz69VebvpbUkThZsSWVfQAAAA?pid=ImgDet&w=400&h=400&rs=1' },
+    { name: 'Claire', following: false , avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.1jz69VebvpbUkThZsSWVfQAAAA?pid=ImgDet&w=400&h=400&rs=1' },
+    // 添加更多粉丝的信息
+  ];
 
+  toggleFollow(index: number) {
+    this.followerList[index].following = !this.followerList[index].following;
+  }
   constructor() { }
 
   ngOnInit() {

src/app/following/following.page.html

@@ -7,25 +7,6 @@
   </ion-toolbar>
 </ion-header>
 
-<!-- <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">关注</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content>
- -->
-<!-- <ion-content>
-  <ion-list>
-    <ion-item *ngFor="let person of followingList">
-      <ion-avatar slot="start">
-        <ion-img [src]="person.avatar"></ion-img>
-      </ion-avatar>
-      <ion-label>{{ person.name }}</ion-label>
-    </ion-item>
-  </ion-list>
-</ion-content> -->
-
 <ion-content style="top:20px">
   <ion-list lines="none">
     <ion-item *ngFor="let person of followingList" lines="none">

src/app/tab4/tab4.page.html

@@ -34,15 +34,18 @@
     <ion-grid>
   <ion-row>
     <ion-col size="4">
-      <p class="count" style="color:black" (click)="openFollowingPage()">{{userCount.following}}</p>
+      <p *ngIf="!user?.id" class="count" style="color:black">--</p>
+      <p *ngIf="user?.id" class="count" style="color:black" (click)="openFollowingPage()">{{userCount.following}}</p>
       <p class="label" (click)="openFollowerPage()">关注</p>
     </ion-col>
     <ion-col size="4">
-      <p class="count" style="color:black">{{userCount.followers}}</p>
+      <p *ngIf="!user?.id" class="count" style="color:black">--</p>
+      <p *ngIf="user?.id" class="count" style="color:black" (click)="openFollowerPage()">{{userCount.followers}}</p>
       <p class="label">粉丝</p>
     </ion-col>
     <ion-col size="4">
-      <p class="count" style="color:black">{{userCount.likes}}</p>
+      <p *ngIf="!user?.id" class="count" style="color:black">--</p>
+      <p *ngIf="user?.id" class="count" style="color:black">{{userCount.likes}}</p>
       <p class="label">获赞</p>
     </ion-col>
   </ion-row>
@@ -53,14 +56,6 @@
       <ion-icon name="color-palette-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>
       我的圈子
@@ -90,7 +85,7 @@
     </ion-card-content>
   
 
-  <ion-row>
+  <ion-row *ngIf="user?.id">
     <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="作品图片">
@@ -101,3 +96,5 @@
     </ion-col>
   </ion-row>
 </ion-content>
+
+

src/app/tab4/tab4.page.ts

@@ -87,19 +87,6 @@ export class Tab4Page implements OnInit {
     this.router.navigate(['/follower']);
   }
 
-  // 由于Parse.User.current()是随着localStorage变化的属性
-  // 为了避免首次复制后用户状态变化，页面不同步，通过get方法实现实时获取
-  // user:Parse.User|undefined
-  // async ngOnInit() {
-  //     this.user = await Parse.User.current()
-  //     setInterval(async ()=>{
-  //     this.user = await Parse.User.current()
-  //   },1000)
-  // }
-  // logout(){
-  //   Parse.User.logOut();
-  // }
-
   userCount={
     followers: 3,
     following: 2,
@@ -119,5 +106,6 @@ export class Tab4Page implements OnInit {
   logout(){
     Parse.User.logOut();
   }
+  
 }