创建moreplace更多地点页面并添加内容

src/app/app-routing.module.ts

@@ -1,35 +1,39 @@
-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
-
-const routes: Routes = [
-  {
-    path: '',
-    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
-  },
-  {
-    path: 'setting',
-    loadChildren: () => import('./setting/setting.module').then(m => m.SettingPageModule)
-  },{
-    path: 'smovies',
-    loadChildren: () => import('./tab2/smovies/smovies.module').then( m => m.SMoviesPageModule)
-  },
-  {
-    path: 'search',
-    loadChildren: () => import('./search/search.module').then( m => m.SearchPageModule)
-  },{
-    path: 'user',
-    loadChildren: () => import('../modules/user/user.module').then(m => m.UserModule)
-  },
-  {
-    path: 'mail',
-    loadChildren: () => import('./mail/mail.module').then( m => m.MailPageModule)
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
+  },
+  {
+    path: 'setting',
+    loadChildren: () => import('./setting/setting.module').then(m => m.SettingPageModule)
+  },{
+    path: 'smovies',
+    loadChildren: () => import('./tab2/smovies/smovies.module').then( m => m.SMoviesPageModule)
+  },
+  {
+    path: 'search',
+    loadChildren: () => import('./search/search.module').then( m => m.SearchPageModule)
+  },{
+    path: 'user',
+    loadChildren: () => import('../modules/user/user.module').then(m => m.UserModule)
+  },
+  {
+    path: 'mail',
+    loadChildren: () => import('./mail/mail.module').then( m => m.MailPageModule)
+  },
  {
+    path: 'moreplace',
+    loadChildren: () => import('./moreplace/moreplace.module').then( m => m.MoreplacePageModule)
   },
 
-];
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
-  ],
-  exports: [RouterModule]
-})
-export class AppRoutingModule {}
+
+];
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

src/app/moreplace/moreplace-routing.module.ts

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

src/app/moreplace/moreplace.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 { MoreplacePageRoutingModule } from './moreplace-routing.module';
+
+import { MoreplacePage } from './moreplace.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    MoreplacePageRoutingModule
+  ],
+  declarations: [MoreplacePage]
+})
+export class MoreplacePageModule {}

src/app/moreplace/moreplace.page.html

@@ -0,0 +1,61 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/previous-page"></ion-back-button>
+    </ion-buttons>
+    <ion-title>moreplace</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="search()">
+        <ion-icon name="search"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content >
+  <ion-card>
+    <ion-card-content>
+      <ion-row>
+        <ion-col size="3" (click)="fetchMoreplace()">全部</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '中国大陆')">中国大陆</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '英国')">英国</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '美国')">美国</ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col size="3" (click)="filterByCategory($event, '中国香港')">中国香港</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '中国台湾')">中国台湾</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '法国')">法国</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '意大利')">意大利</ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col size="3" (click)="filterByCategory($event, '德国')">德国</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '日本')">日本</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '韩国')">韩国</ion-col>
+      </ion-row>
+    </ion-card-content>
+  </ion-card>  
+
+  <ion-card>
+    <ion-card-content>
+      <ion-row>
+        <ion-col size="3" (click)="fetchMoreplace()">全部</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '旅游景点')">旅游景点</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '历史建筑')">历史建筑</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '自然风光')">自然风光</ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col size="3" (click)="filterByCategory($event, '地标')">地标</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '宗教场所')">宗教场所</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '街道')">街道</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '公园')">公园</ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col size="3" (click)="filterByCategory($event, '展馆')">展馆</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '影视基地')">影视基地</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '商用建筑')">商用建筑</ion-col>
+        <ion-col size="3" (click)="filterByCategory($event, '酒店')">酒店</ion-col>
+      </ion-row>
+    </ion-card-content>
+  </ion-card> 
+
+</ion-content>

src/app/moreplace/moreplace.page.scss

@@ -0,0 +1,7 @@
+.blue {
+    color: blue;
+  }
+  
+  ion-card ion-row :first-child {
+    color: blue;
+  }

src/app/moreplace/moreplace.page.spec.ts

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

src/app/moreplace/moreplace.page.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import { NavController } from '@ionic/angular';
+// import Swiper from 'swiper';
+import { Router } from '@angular/router';
+import Parse from 'parse';
+import { ParseService } from 'src/app/services/parse.service';
+
+@Component({
+  selector: 'app-moreplace',
+  templateUrl: './moreplace.page.html',
+  styleUrls: ['./moreplace.page.scss'],
+})
+export class MoreplacePage implements OnInit {
+
+  constructor(private navCtrl: NavController,private router: Router,private parseService: ParseService) { }
+
+  ngOnInit() {
+  }
+
+  search() {
+    this.router.navigate(['/search']); // 替换成你的 setting 页面路由路径
+  }
+
+  fetchMoreplace(){
+
+  }
+
+  firstCol: HTMLElement |null = null;
+
+  //点击变蓝
+  filterByCategory(event: any,category: string) {
+    const selectedCol = event.target;
+    const allCols = document.querySelectorAll('ion-col');
+    
+    if (!this.firstCol) {
+      this.firstCol = document.querySelector('ion-col:first-child');
+      if (this.firstCol) {
+        this.firstCol.classList.add('blue');
+      }
+    } else if (this.firstCol) {
+      this.firstCol.classList.remove('blue');
+    }
+
+    allCols.forEach(col => col.classList.remove('blue'));
+    selectedCol.classList.add('blue');
+    this.firstCol = selectedCol;
+  }
+  
+}

src/app/place/place.page.ts

@@ -16,7 +16,7 @@ export class PlacePage implements OnInit {
 
   goToBlankPage() {
     // 处理显示更多城市的逻辑
-    console.log('显示更多城市');
+    this.router.navigate(['/moreplace']);
   }
   ngOnInit() {}
 }