tabs显示与隐藏

package.json

@@ -100,4 +100,4 @@
       "android"
     ]
   }
-}
+}
\ No newline at end of file

src/app/app-routing.module.ts

-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+import {NgModule} from '@angular/core';
+import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
 import {TabsPage} from "./tabs/tabs.page";
 import {LoginPage} from "./tabs/login/login.page";
+import {ActivityListPage} from "./pages/home-pages/activity/activityList/activityList";
+import {ActivityDetailPage} from "./pages/home-pages/activity/activityDetail/activityDetail";
+import {ActivityApplyPage} from "./pages/home-pages/activity/activityApply/activityApply";
+import {ActivityConfirmPage} from "./pages/home-pages/activity/activityConfirm/activityConfirm";
+import {BatchDetailPage} from "./pages/home-pages/activity/batch-detail/batch-detail";
+import {OrderDetailPage} from "./pages/home-pages/activity/order-detail/order-detail";
+import {OrderEditPage} from "./pages/home-pages/activity/order-edit/order-edit";
 
 const routes: Routes = [
-  {
-    path: 'tabs',
-    component: TabsPage,
-    children: [
-      {path: 'home', children: [{path: '', loadChildren: './tabs/home/home.module#HomePageModule'}]},
-      {path: 'discover', children: [{path: '', loadChildren: './tabs/discover/discover.module#DiscoverPageModule'}]},
-      {path: 'serve', children: [{path: '', loadChildren: './tabs/serve/serve.module#ServePageModule'}]},
-      {path: 'mine', children: [{path: '', loadChildren: './tabs/mine/mine.module#MinePageModule'}]},
-      {path: '', redirectTo: '/tabs/home', pathMatch: 'full'}
-    ]
-  },
-  {
-    path: 'login', component:LoginPage,
-  },
-  {
-    path: '',
-    redirectTo: '/tabs/home',
-    pathMatch: 'full'
-  },
+    {
+        path: 'tabs',
+        component: TabsPage,
+        children: [
+            {path: 'home', children: [{path: '', loadChildren: './tabs/home/home.module#HomePageModule'}]},
+            {
+                path: 'discover',
+                children: [{path: '', loadChildren: './tabs/discover/discover.module#DiscoverPageModule'}]
+            },
+            {
+                path: 'serve', children: [
+                    {path: '', loadChildren: './tabs/serve/serve.module#ServePageModule'},
+                    {
+                        path: 'activity', children: [
+                            {path: 'activityList', component: ActivityListPage},
+                            {path: 'activityDetail', component: ActivityDetailPage},
+                            {path: 'activityApply', component: ActivityApplyPage},
+                            {path: 'activityConfirm', component: ActivityConfirmPage},
+                            {path: 'batchDetail', component: BatchDetailPage},
+                            {path: 'orderDetail', component: OrderDetailPage},
+                            {path: 'orderEdit', component: OrderEditPage},
+                        ]
+                    },
+                ]
+            },
+            {path: 'mine', children: [{path: '', loadChildren: './tabs/mine/mine.module#MinePageModule'}]},
+            {path: '', redirectTo: '/tabs/home', pathMatch: 'full'}
+        ]
+    },
+    {
+        path: 'login', component: LoginPage,
+    },
+    {
+        path: '',
+        redirectTo: '/tabs/home',
+        pathMatch: 'full'
+    },
 ];
 
 @NgModule({
-  imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
-  ],
-  exports: [RouterModule]
+    imports: [
+        RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})
+    ],
+    exports: [RouterModule]
 })
-export class AppRoutingModule {}
+export class AppRoutingModule {
+}

src/app/app.component.ts

@@ -8,6 +8,7 @@ import {Storage} from "@ionic/storage";
 import {Router} from "@angular/router";
 import {TabsService} from "./tabs/tabs.service";
 import {CommonService} from "../provide/common.service";
+import {TabsCore} from "./tabs/tabs.core";
 
 @Component({
     selector: 'app-root',
@@ -21,6 +22,7 @@ export class AppComponent {
         private platform: Platform,
         private splashScreen: SplashScreen,
         private statusBar: StatusBar,
+        private tabsCore:TabsCore,
         private appVersion: AppVersion,
         private storage: Storage, public commonSer: CommonService,
         private router: Router, public tabSer: TabsService,

src/app/app.module.ts

@@ -18,6 +18,7 @@ import {FileTransfer,FileTransferObject} from "@ionic-native/file-transfer/ngx";
 import {FileOpener} from "@ionic-native/file-opener/ngx";
 import {IonicStorageModule} from "@ionic/storage";
 import {AppMainModule} from "./app.main.module";
+import {TabsCore} from "./tabs/tabs.core";
 
 @NgModule({
     declarations: [AppComponent],
@@ -28,6 +29,7 @@ import {AppMainModule} from "./app.main.module";
         AppRoutingModule,
         IonicModule.forRoot({
             mode:'ios',
+            backButtonText:'',
         }),
         IonicStorageModule.forRoot()
     ],
@@ -43,6 +45,7 @@ import {AppMainModule} from "./app.main.module";
         FileTransfer,
         FileOpener,
         FileTransferObject,
+        TabsCore,
         {provide: RouteReuseStrategy, useClass: IonicRouteStrategy}
     ],
     bootstrap: [AppComponent]

src/app/pages/home-pages/activity/activityApply/activityApply.html

 <ion-header>
-	<ion-navbar>
-		<ion-title text-center>报名订单</ion-title>
-	</ion-navbar>
+	<ion-toolbar>
+		<ion-buttons slot="start">
+			<ion-back-button></ion-back-button>
+		</ion-buttons>
+		<ion-title>报名订单</ion-title>
+	</ion-toolbar>
 </ion-header>
+
 <ion-content class="content">
 	<ion-item class="content-title">
 		<span>活动名称</span>

src/app/pages/home-pages/activity/activityConfirm/activityConfirm.html

 <ion-header>
-	<ion-navbar>
-		<ion-title text-center>订单确认</ion-title>
-	</ion-navbar>
+	<ion-toolbar>
+		<ion-buttons slot="start">
+			<ion-back-button></ion-back-button>
+		</ion-buttons>
+		<ion-title>订单确认</ion-title>
+	</ion-toolbar>
 </ion-header>
 <ion-content class="content">
 	<div class="content-container">

src/app/pages/home-pages/activity/activityDetail/activityDetail.html

 <ion-header>
-    <ion-navbar>
-        <ion-title text-center>活动报名</ion-title>
-    </ion-navbar>
+    <ion-toolbar>
+        <ion-buttons slot="start">
+            <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>活动报名</ion-title>
+    </ion-toolbar>
 </ion-header>
 <ion-content class="content">
 

src/app/pages/home-pages/activity/activityDetail/activityDetail.ts

-import {Component} from '@angular/core';
-
+import {Component, OnInit} from '@angular/core';
 import {Http, Response} from '@angular/http';
-import {AppService,AppGlobal} from "../../../../../http/http.service";
-import {environment} from "../../../../../environments/environment";
-import {BatchDetailPage} from "../batch-detail/batch-detail";
-import {TabsService} from "../../../../tabs/tabs.service";
-import {CommonService} from "../../../../../provide/common.service";
-import {FileTransfer, FileTransferObject} from "@ionic-native/file-transfer/ngx";
-import {File} from "@ionic-native/file";
 import {ActivatedRoute, Router} from "@angular/router";
+import {AppService, AppGlobal} from "../../../../../http/http.service";
+import {CommonService} from "../../../../../provide/common.service";
 
 @Component({
     selector: 'page-activityDetail',
     templateUrl: 'activityDetail.html',
 })
-export class ActivityDetailPage {
+export class ActivityDetailPage implements OnInit{
 
     activityId;  //活动ID
-    batches: object[];
     activity = {
         batchList: [],
         activityIntro: ''
@@ -32,17 +25,13 @@ export class ActivityDetailPage {
 
 
     constructor(public router: Router,
-                public routerInfo:ActivatedRoute,
-                private fileTransfer: FileTransfer,
-                private fileTransferObject: FileTransferObject,
-                private file: File,
+                public routerInfo: ActivatedRoute,
                 public commonSer: CommonService,
                 public http: Http,
-                public appService: AppService,) {
-
+                public appService: AppService) {
     }
 
-    ionViewDidEnter() {
+    ngOnInit() {
         // const index = this.navCtrl.length() - 3;
         // if (index > 1) {
         //     this.navCtrl.remove(3, index);
@@ -118,7 +107,7 @@ export class ActivityDetailPage {
             this.commonSer.toast('您已报名，请先取消报名再点击');
             return false;
         }
-        this.commonSer.alert('确定不参加该活动',()=>{
+        this.commonSer.alert('确定不参加该活动', () => {
             this.appService.ObserverHttpPostAdd("/wisdomgroup/modules/activityNon/admin/", this.activityId)
                 .subscribe((res: Response) => {
                         // this.navCtrl.pop();
@@ -130,7 +119,7 @@ export class ActivityDetailPage {
 
     //参加
     sayYes() {
-        this.commonSer.alert('确定参加该活动?',()=>{
+        this.commonSer.alert('确定参加该活动?', () => {
             this.appService.ObserverHttpPostAdd("/wisdomgroup/modules/activityNon/delete/", this.activityId)
                 .subscribe((res: Response) => {
                         // this.navCtrl.pop();
@@ -141,8 +130,8 @@ export class ActivityDetailPage {
     }
 
     //预览附件
-    downLoad(file){
-        this.commonSer.downloadFile(file.id,file.showName)
+    downLoad(file) {
+        this.commonSer.downloadFile(file.id, file.showName)
     }
 
 }

src/app/pages/home-pages/activity/activityList/activityList.html

 <ion-header>
-	<ion-navbar>
-		<ion-title text-center>最新活动</ion-title>
-	</ion-navbar>
+	<ion-toolbar>
+		<ion-buttons slot="start">
+			<ion-back-button></ion-back-button>
+		</ion-buttons>
+		<ion-title>最新活动</ion-title>
+	</ion-toolbar>
 </ion-header>
 
 <ion-content scrollbar-y="true" direction="y">

src/app/pages/home-pages/activity/batch-detail/batch-detail.html

 <ion-header>
-
-  <ion-navbar>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
     <ion-title>{{batch.batchName}}</ion-title>
-  </ion-navbar>
-
+  </ion-toolbar>
 </ion-header>
 
 

src/app/pages/home-pages/activity/order-detail/order-detail.html

 <ion-header>
-    <ion-navbar>
+    <ion-toolbar>
+        <ion-buttons slot="start">
+            <ion-back-button></ion-back-button>
+        </ion-buttons>
         <ion-title>订单详情</ion-title>
-    </ion-navbar>
+    </ion-toolbar>
 </ion-header>
 <ion-content class="content">
     <div class="content">

src/app/pages/home-pages/activity/order-edit/order-edit.html

 <ion-header>
-  <ion-navbar>
-    <ion-title text-center>报名订单</ion-title>
-  </ion-navbar>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>报名订单</ion-title>
+  </ion-toolbar>
 </ion-header>
 <ion-content class="content">
   <ion-item class="content-title">

src/app/tabs/serve/serve.page.html

@@ -41,7 +41,7 @@
     <div class="item2" style="padding: 0px;">
         <p class="myApp">我的应用</p>
         <div class="item2-2">
-            <div class="card" (click)="goTo('ActivityListPage')">
+            <div class="card" routerLink="./activity/activityList">
                 <img src="./assets/serve/icon-bm.png" alt="">
                 <label class="label2-2">活动报名</label>
                 <img class="new-logo" *ngIf="hasNew.activity==1" src="./assets/imgs/new.png">

src/app/tabs/serve/serve.page.ts

@@ -180,7 +180,7 @@ export class ServePage implements OnInit {
 
     //前往
     goTo(page) {
-        // this.navCtrl.push(page);
+
     }
 
 

src/app/tabs/tabs.core.ts

+import {Injectable} from "@angular/core";
+import {NavigationEnd, Router} from "@angular/router";
+import {Platform} from "@ionic/angular";
+import {filter} from "rxjs/operators";
+
+@Injectable({
+    providedIn:'root'
+})
+
+export class TabsCore {
+    private hideTabBarPages: String[] = [
+        'activityList','activityDetail','activityApply','activityConfirm',
+        'batchDetail','orderDetail','orderEdit'
+    ]
+    constructor(private router:Router,private platform:Platform){
+        this.platform.ready().then(()=>{
+            this.navEvent();
+        })
+    }
+
+    private hideTabs(){
+        const tabBar = document.getElementById('myTabBar');
+        if(tabBar.style.display !== 'none') tabBar.style.display = 'none';
+    }
+
+    private showTabs(){
+        const tabBar = document.getElementById('myTabBar');
+        if(tabBar.style.display !== 'flex') tabBar.style.display = 'flex';
+    }
+
+    navEvent(){
+        this.router.events.pipe(filter(e=> e instanceof NavigationEnd))
+            .subscribe((e:any)=>{
+                console.log(e);
+                this.showHideTabs(e)
+            })
+    }
+
+    private showHideTabs(e: any) {
+        const urlArray = e.url.split('/');
+
+        const pageUrl = urlArray[urlArray.length - 1];
+
+        const page = pageUrl.split('?')[0];
+
+        const shouldHide = this.hideTabBarPages.indexOf(page) > -1;
+
+        try {
+            setTimeout(() => shouldHide ? this.hideTabs() : this.showTabs(), 300);
+        } catch (err) {
+
+        }
+    }
+}
\ No newline at end of file

src/app/tabs/tabs.module.ts

@@ -12,6 +12,6 @@ import { TabsPage } from './tabs.page';
     CommonModule,
     FormsModule,
   ],
-  declarations: [TabsPage]
+  declarations: [TabsPage],
 })
 export class TabsPageModule {}

src/app/tabs/tabs.page.html

 <ion-tabs>
 
-  <ion-tab-bar slot="bottom">
+  <ion-tab-bar #myTabBar id="myTabBar" slot="bottom">
     <ion-tab-button tab="home">
       <ion-icon class="home"></ion-icon>
       <ion-label>首页</ion-label>

src/provide/common.service.ts

@@ -5,7 +5,6 @@ import {FileOpener} from "@ionic-native/file-opener/ngx";
 import {environment} from "../environments/environment";
 
 @Injectable()
-
 export class CommonService{
     constructor(public toastCtrl:ToastController,public alertCtrl:AlertController,
                 private file: File, private fileOpener: FileOpener){}

src/theme/app.scss

@@ -4,8 +4,8 @@ ion-toolbar{
     --background:#e12724;
   }
 }
-ion-title{
-  --color:#fff;
+ion-title,ion-back-button{
+  --color:#fff !important;
 }
 html{
   font-size: 12px;
@@ -19,6 +19,10 @@ th, td /* table elements 表格元素 */ {
   margin: 0;
   padding: 0;
 }
+:focus {
+  outline: none;
+}
+
 .logo{
   height: 2.5rem;
   margin-left: 1rem;