地点筛选和地点详细界面以及交互

src/app/app-routing.module.ts

@@ -25,7 +25,7 @@ const routes: Routes = [
     loadChildren: () => import('./mail/mail.module').then( m => m.MailPageModule)
   },
   {
-    path: 'moreplace',
+    path: 'place',
     loadChildren: () => import('./moreplace/moreplace.module').then( m => m.MoreplacePageModule)
   },
   {
@@ -36,6 +36,11 @@ const routes: Routes = [
     path: 'movie/:id',
     loadChildren: () => import('./movie-detail/movie-detail.module').then( m => m.MovieDetailPageModule)
   },
+  {
+    path: 'place/:id',
+    loadChildren: () => import('./place-detail/place-detail.module').then( m => m.PlaceDetailPageModule)
+  },
+
 
 
 ];

src/app/moreplace/moreplace.page.html

@@ -3,7 +3,7 @@
     <ion-buttons slot="start">
       <ion-back-button defaultHref="/previous-page"></ion-back-button>
     </ion-buttons>
-    <ion-title>moreplace</ion-title>
+    <ion-title>地点</ion-title>
     <ion-buttons slot="end">
       <ion-button (click)="search()">
         <ion-icon name="search"></ion-icon>
@@ -12,7 +12,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content >
+<ion-content>
   <ion-card>
     <ion-card-content>
       <ion-row>
@@ -54,4 +54,17 @@
     </ion-card-content>
   </ion-card> 
 
+  <ion-list>
+    <ion-card *ngFor="let place of filteredPlaces">
+      <ion-card-header>
+        <ion-card-title>{{ place.get('city') }}</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <p>地点：{{ place.get('name') }}</p>
+        <p>电影：{{ place.get('filmed')}}</p>
+      </ion-card-content>
+      <ion-button fill="clear" routerLink="/place/{{place.id}}">detail</ion-button>
+    </ion-card>
+    </ion-list>
+
 </ion-content>

src/app/moreplace/moreplace.page.ts

@@ -14,7 +14,21 @@ export class MoreplacePage implements OnInit {
 
   constructor(private navCtrl: NavController,private router: Router,private parseService: ParseService) { }
 
+  filteredPlaces: any[] = [];
+  allPlaces: any[] = [];
+  user:Parse.User|undefined
+  
   ngOnInit() {
+    this.user = Parse.User.current();
+    this.fetchPlaces();
+  }
+
+  async fetchPlaces() {
+    const YJMovies = Parse.Object.extend('YJPlaces');
+    const query = new Parse.Query(YJMovies);
+    this.allPlaces = await query.find();
+    this.filteredPlaces = this.allPlaces;
+    this.filteredPlaces = await this.parseService.queryPlaces();
   }
 
   search() {

src/app/place-detail/place-detail-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { PlaceDetailPage } from './place-detail.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PlaceDetailPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PlaceDetailPageRoutingModule {}

src/app/place-detail/place-detail.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { PlaceDetailPageRoutingModule } from './place-detail-routing.module';
+
+import { PlaceDetailPage } from './place-detail.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    PlaceDetailPageRoutingModule
+  ],
+  declarations: [PlaceDetailPage]
+})
+export class PlaceDetailPageModule {}

src/app/place-detail/place-detail.page.html

@@ -0,0 +1,18 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/previous-page"></ion-back-button>
+    </ion-buttons>
+    <ion-title>{{place?.get("city")}}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-card-header>
+    <ion-card-title>{{place?.get('city') }}</ion-card-title>
+  </ion-card-header>
+  <ion-card-content>
+    <p>地点：{{ place?.get('name') }}</p>
+    <p>电影：{{ place?.get('filmed')}}</p>
+  </ion-card-content> 
+</ion-content>

src/app/place-detail/place-detail.page.spec.ts

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

src/app/place-detail/place-detail.page.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import Parse from "parse";
+
+@Component({
+  selector: 'app-place-detail',
+  templateUrl: './place-detail.page.html',
+  styleUrls: ['./place-detail.page.scss'],
+})
+export class PlaceDetailPage implements OnInit {
+
+  constructor(private route:ActivatedRoute) { }
+
+  ngOnInit() {
+    this.loadPlaceById()
+  }
+
+  place:Parse.Object|undefined
+  async loadPlaceById(){
+    let id = this.route.snapshot.params["id"]
+
+    if(id){
+      let query = new Parse.Query("YJPlaces");
+      this.place = await query.get(id);
+    }
+  }
+
+
+}

src/app/place/place.page.html

@@ -128,7 +128,7 @@
       </ion-card>
       <ion-row>
         <ion-col size="12">
-          <ion-button expand="full" color="light" shape="round" (click)="goToBlankPage()">more ></ion-button>
+          <ion-button expand="full" color="light" shape="round" (click)="goToMorePlace()">more ></ion-button>
         </ion-col>
       </ion-row>
     </ion-card-content>
@@ -171,7 +171,7 @@
       </ion-list>
       <ion-row>
         <ion-col size="12">
-          <ion-button expand="full" color="light" shape="round" (click)="goToBlankPage()">more ></ion-button>
+          <ion-button expand="full" color="light" shape="round" (click)="goToMorePlace">more ></ion-button>
         </ion-col>
       </ion-row>
     </ion-card-content>
@@ -294,7 +294,7 @@
     </ion-card-content>
     <ion-row>
       <ion-col size="12">
-        <ion-button expand="full" color="light" shape="round" (click)="goToBlankPage()">more ></ion-button>
+        <ion-button expand="full" color="light" shape="round" (click)="goToMorePlace()">more ></ion-button>
       </ion-col>
     </ion-row>
   </ion-card>

src/app/place/place.page.ts

@@ -14,9 +14,9 @@ export class PlacePage implements OnInit {
     this.router.navigate(['/search']); // 替换成你的 setting 页面路由路径
   }
 
-  goToBlankPage() {
+  goToMorePlace() {
     // 处理显示更多城市的逻辑
-    this.router.navigate(['/moreplace']);
+    this.router.navigate(['/place']);
   }
   ngOnInit() {}
 }

src/app/services/parse.service.ts

@@ -21,4 +21,10 @@ export class ParseService {
     return query.find();
   }
 
+
+  public async queryPlaces(): Promise<any[]> {
+    const YJPlaces = Parse.Object.extend('YJPlaces');
+    const query = new Parse.Query(YJPlaces);
+    return query.find();
+  }
 }

src/app/tab2/smovies/smovies.page.html

@@ -60,7 +60,6 @@
   </ion-card>
 
     <ion-list>
-      
       <ion-card *ngFor="let movie of filteredMovies">
         <ion-card-header>
           <ion-card-title>{{ movie.get('name') }}</ion-card-title>