feat

app-angular/src/modules/lesson/contact-detail/contact-detail.component.html

@@ -0,0 +1,13 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>contact-detail</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">contact-detail</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

app-angular/src/modules/lesson/contact-detail/contact-detail.component.scss

@@ -0,0 +1,31 @@
+ion-content {
+    height: calc(100vh - 121px) !important;
+}
+
+ion-item-divider {
+    ion-icon {
+        margin-right: 9px;
+    }
+}
+
+ion-label p {
+    display: block;
+    max-width: calc(100% - 60px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+ion-label {
+    ion-text {
+        font-size: 0.9rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+ion-button {
+    ion-icon {
+        margin-right: 3px;
+    }
+}

app-angular/src/modules/lesson/contact-detail/contact-detail.component.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ContactDetailPage } from './contact-detail.component';
+
+describe('ContactDetailPage', () => {
+  let component: ContactDetailPage;
+  let fixture: ComponentFixture<ContactDetailPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContactDetailPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

app-angular/src/modules/lesson/contact-detail/contact-detail.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-contact-detail',
+  templateUrl: './contact-detail.component.html',
+  styleUrls: ['./contact-detail.component.scss'],
+})
+export class ContactDetailPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

app-angular/src/modules/lesson/contact-list/contact-list.component.html

@@ -0,0 +1,34 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>通讯录</ion-title>
+  </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-searchbar [(ngModel)]="searchName" (ionInput)="search()"></ion-searchbar>
+
+  <ion-list>
+    <ng-container *ngFor="let contact of contactList;let index = index;">
+      <!-- 分组：根据下标首个出现的元素显示分组分隔符 -->
+      <ion-item-divider *ngIf="charGroupIndex[contact.get('firstChar')] == index">
+        <ion-label>{{contact.get('firstChar')}}</ion-label>
+      </ion-item-divider>
+      <ion-item lines="none">
+        <ion-avatar slot="start">
+          <img [src]="contact.get('avatarUrl') || 'https://ionicframework.com/docs/img/demos/avatar.svg'">
+        </ion-avatar>
+        <ion-label>
+          <h2>{{ contact.get('name') }}</h2>
+          <p>性别: {{ contact.get('gender') }}</p>
+          <p>手机: {{ contact.get('mobile') }}</p>
+        </ion-label>
+      </ion-item>
+    </ng-container>
+  </ion-list>
+</ion-content>

app-angular/src/modules/lesson/contact-list/contact-list.component.scss

@@ -0,0 +1,31 @@
+ion-content {
+    height: calc(100vh - 121px) !important;
+}
+
+ion-item-divider {
+    ion-icon {
+        margin-right: 9px;
+    }
+}
+
+ion-label p {
+    display: block;
+    max-width: calc(100% - 60px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+ion-label {
+    ion-text {
+        font-size: 0.9rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+ion-button {
+    ion-icon {
+        margin-right: 3px;
+    }
+}

app-angular/src/modules/lesson/contact-list/contact-list.component.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ContactListPage } from './contact-list.component';
+
+describe('ContactListPage', () => {
+  let component: ContactListPage;
+  let fixture: ComponentFixture<ContactListPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContactListPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

app-angular/src/modules/lesson/contact-list/contact-list.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+import * as Parse from "parse";
+@Component({
+  selector: 'app-contact-list',
+  templateUrl: './contact-list.component.html',
+  styleUrls: ['./contact-list.component.scss'],
+})
+export class ContactListPage implements OnInit {
+  searchName: string = '';
+  contactList: Array<Parse.Object> = [];
+
+  ngOnInit() {
+    this.loadContact();
+  }
+
+  charGroupIndex:any = {}
+  loadContact() {
+    const Contact = Parse.Object.extend('Contact');
+    const query = new Parse.Query(Contact);
+    query.ascending('firstChar');
+
+    if (this.searchName) {
+      query.contains('name', this.searchName);
+    }
+
+    query.find().then((results) => {
+      this.contactList = results;
+      this.contactList.forEach((contact,index)=>{
+        if(this.charGroupIndex[contact.get("firstChar")] == undefined){
+          this.charGroupIndex[contact.get("firstChar")] = index
+        }
+      })
+    }, (error) => {
+      console.error('Error while fetching contacts', error);
+    });
+  }
+
+  search() {
+    this.loadContact();
+  }
+
+}

app-angular/src/modules/lesson/explore-container/explore-container.component.html

@@ -0,0 +1,4 @@
+<div id="container">
+  <strong>{{ name }}</strong>
+  <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
+</div>

app-angular/src/modules/lesson/explore-container/explore-container.component.scss

@@ -0,0 +1,27 @@
+#container {
+    text-align: center;
+  
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  
+  #container strong {
+    font-size: 20px;
+    line-height: 26px;
+  }
+  
+  #container p {
+    font-size: 16px;
+    line-height: 22px;
+  
+    color: #8c8c8c;
+  
+    margin: 0;
+  }
+  
+  #container a {
+    text-decoration: none;
+  }

app-angular/src/modules/lesson/explore-container/explore-container.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ExploreContainerComponent } from './explore-container.component';
+
+describe('ExploreContainerComponent', () => {
+  let component: ExploreContainerComponent;
+  let fixture: ComponentFixture<ExploreContainerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ExploreContainerComponent],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ExploreContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

app-angular/src/modules/lesson/explore-container/explore-container.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-explore-container',
+  templateUrl: './explore-container.component.html',
+  styleUrls: ['./explore-container.component.scss'],
+})
+export class ExploreContainerComponent {
+
+  @Input() name?: string;
+
+}

app-angular/src/modules/lesson/lesson-routing.module.ts

@@ -14,6 +14,8 @@ import { authGuard } from '../user/guard-auth/auth.guard';
 import { PageLessonComponent } from './page-lesson/page-lesson.component';
 import { PageLessonDetailComponent } from './page-lesson-detail/page-lesson-detail.component';
 import { PageTestComponent } from './page-test/page-test.component';
+import { ContactListPage } from './contact-list/contact-list.component';
+import { ContactDetailPage } from './contact-detail/contact-detail.component';
 
 
 const routes: Routes = [
@@ -27,9 +29,11 @@ const routes: Routes = [
   { path: 'community/attentionDetail', component: AttentionDetailComponent },
   { path: 'community/recommendDetail', component: RecommendDetailComponent },
   { path: 'community/share', component: ShareComponent },
-  { path: "me/userFollow", component: UserFollowComponent },
+  { path: "me/userFollow", component: ContactListPage },
   { path: "me/userTag", component: UserTagComponent },
   { path: "me/userCollection", component: UserCollectionComponent },
+  { path: 'me/userFollow/list', component: ContactDetailPage},
+  { path: 'me/userFollow/detail/:id', component: ContactDetailPage },
 
 
 ];

app-angular/src/modules/lesson/lesson.module.ts

@@ -17,30 +17,36 @@ import { PageChatComponent } from './page-chat/page-chat.component';
 import { PageLessonDetailComponent } from './page-lesson-detail/page-lesson-detail.component';
 import { PageLessonComponent } from './page-lesson/page-lesson.component';
 import { PageTestComponent } from './page-test/page-test.component';
+import { ContactListPage } from './contact-list/contact-list.component';
+import { ContactDetailPage } from './contact-detail/contact-detail.component';
+// import { ExploreContainerComponent } from './explore-container/explore-container.component';
 
 @NgModule({
-  declarations: [
-    MeComponent,
-    CommunityComponent,
-    ScienceDetailComponent,
-    ShareComponent,
-    RecommendDetailComponent,
-    AttentionDetailComponent,
-    UserFollowComponent,
-    UserTagComponent,
-    UserCollectionComponent,
-    PageChatComponent,
+  declarations: [
+    MeComponent,
+    CommunityComponent,
+    ScienceDetailComponent,
+    ShareComponent,
+    RecommendDetailComponent,
+    AttentionDetailComponent,
+    UserFollowComponent,
+    UserTagComponent,
+    UserCollectionComponent,
+    PageChatComponent,
     PageLessonDetailComponent,
     PageLessonComponent,
     PageTestComponent,
-
-
-  ],
-  imports: [
-    CommonModule,
-    LessonRoutingModule,
-    FormsModule,
-    IonicModule
-  ]
+    ContactListPage,
+    ContactDetailPage,
+    // ExploreContainerComponent,
+    
+  ],
+  imports: [
+    CommonModule,
+    LessonRoutingModule,
+    FormsModule,
+    IonicModule,
+    IonicModule.forRoot() // 导入 IonicModule.forRoot()
+  ]
 })
 export class LessonModule { }

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

@@ -67,8 +67,9 @@
     <ion-card class="myList">
         <ion-list [inset]="true">
             <ion-item button detail="true" routerLink="/lesson/me/userFollow">
+                <ion-icon name="people-sharp"></ion-icon>
                 <ion-label>
-                    <ion-note>关注</ion-note>
+                    <ion-note>人物</ion-note>
                 </ion-label>
             </ion-item>
             <ion-item button detail="true" routerLink="/lesson/me/userTag">

app-angular/src/modules/lesson/user-follow/user-follow.component.html

@@ -1,56 +1,18 @@
-<ion-header>
+<ion-header [translucent]="true">
     <ion-toolbar>
-        <ion-buttons slot="start">
-            <ion-button routerLink="/lesson/me" fill="clear" color="dark">
-                <ion-icon name="chevron-back-outline" size="small"></ion-icon>返回</ion-button>
-        </ion-buttons>
-        <ion-buttons slot="end">
-            <ion-button fill="clear" color="dark">
-                <ion-icon name="person-add-outline"></ion-icon>
-            </ion-button>
-
-        </ion-buttons>
+      <ion-title>
+通讯录
+    </ion-title>
     </ion-toolbar>
-</ion-header>
-<ion-content color="light">
-    <ion-list [inset]="true">
-        <ion-item-group>
-            <ion-item-divider>
-                <ion-icon name="people"></ion-icon>
-                <ion-label>关注列表：</ion-label>
-            </ion-item-divider>
-            <ng-container>
-                <ion-item button detail="false" lines="full">
-                    <ion-avatar slot="start">
-                        <img alt="头像" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
-                    </ion-avatar>
-                    <ion-label>
-                        <p>昵称</p>
-                        <ion-badge slot="start">标签</ion-badge>
-                    </ion-label>
-                    <ion-buttons slot="end">
-                        <ion-button fill="clear" color="dark">
-                            <ion-icon name="chatbox-ellipses-outline"></ion-icon>
-                            发消息
-                        </ion-button>
-                    </ion-buttons>
-                </ion-item>
-            </ng-container>
-            <ion-item button detail="false" lines="full">
-                <ion-avatar slot="start">
-                    <img alt="头像" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
-                </ion-avatar>
-                <ion-label>
-                    <p>昵称</p>
-                    <ion-badge slot="start">标签</ion-badge>
-                </ion-label>
-                <ion-buttons slot="end">
-                    <ion-button fill="clear" color="dark">
-                        <ion-icon name="chatbox-ellipses-outline"></ion-icon>
-                        发消息
-                    </ion-button>
-                </ion-buttons>
-            </ion-item>
-        </ion-item-group>
-    </ion-list>
-</ion-content>
+  </ion-header>
+  
+  <ion-content [fullscreen]="true">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title size="large">User-follow</ion-title>
+      </ion-toolbar>
+    </ion-header>
+  
+    <app-explore-container name="User-follow page"></app-explore-container>
+  </ion-content>
+  

app-angular/src/modules/lesson/user-follow/user-follow.component.spec.ts

@@ -1,21 +1,29 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { UserFollowComponent } from './user-follow.component';
+import { IonicModule } from '@ionic/angular';
 
 describe('UserFollowComponent', () => {
   let component: UserFollowComponent;
   let fixture: ComponentFixture<UserFollowComponent>;
 
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [UserFollowComponent]
-    });
+  beforeEach(async() => {
+    // 配置测试模块，声明要测试的组件
+    await TestBed.configureTestingModule({
+      declarations: [UserFollowComponent],
+      imports: [IonicModule.forRoot() ] 
+    }).compileComponents();
+
+    // 创建组件实例
     fixture = TestBed.createComponent(UserFollowComponent);
     component = fixture.componentInstance;
+
+    // 执行变更检测
     fixture.detectChanges();
   });
 
   it('should create', () => {
+    // 断言组件实例存在
     expect(component).toBeTruthy();
   });
 });

app-angular/src/modules/lesson/user-follow/user-follow.component.ts

@@ -6,5 +6,7 @@ import { Component } from '@angular/core';
   styleUrls: ['./user-follow.component.scss']
 })
 export class UserFollowComponent {
-
+  constructor() {
+    // 构造函数，用于初始化组件
+  }
 }