新增点东西

config.xml

@@ -82,6 +82,6 @@
     <plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
     <plugin name="cordova-plugin-ionic-webview" spec="^3.0.0" />
     <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
-    <engine name="android" spec="~7.1.4" />
-    <engine name="ios" spec="~4.5.5" />
+    <engine name="android" spec="7.1.4" />
+    <engine name="ios" spec="4.5.5" />
 </widget>

package.json

@@ -81,4 +81,4 @@
       "ios"
     ]
   }
-}
+}
\ No newline at end of file

src/app/animations/fade-in.ts

+// 引入 angular 动画组件
+import {trigger, style, state, transition, animate} from '@angular/animations';
+
+export const fadeIn = trigger('fade', [
+  transition('void => *', [
+    style({opacity: 0}),
+    animate('1000ms ease-in', style({opacity: 1}))
+  ]),
+  transition('* => void', [
+    animate('1000ms ease-in', style({opacity: 0}))
+  ])
+]);

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { AuthService } from './service/auth.service';
 
 const routes: Routes = [
-  { path: '', redirectTo: 'home', pathMatch: 'full' },
-  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
-  { path: 'extra', loadChildren: './extra/extra.module#ExtraPageModule' },
+  { path: '', redirectTo: 'extra', pathMatch: 'full' },
+  { path: 'main', canActivateChild: [AuthService], loadChildren: './home/home.module#HomePageModule'},
+  { path: 'extra', loadChildren: './extra/extra.module#ExtraPageModule'},
 ];
 
 @NgModule({

src/app/app.component.html

+<div class="mainLoading" *ngIf="loading"></div>
 <ion-app>
   <ion-router-outlet></ion-router-outlet>
 </ion-app>

src/app/app.component.ts

-import { Component } from '@angular/core';
-
+import { Component, OnInit } from '@angular/core';
+import { Router, NavigationEnd, NavigationStart } from '@angular/router';
 import { Platform } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
 
 @Component({
   selector: 'app-root',
-  templateUrl: 'app.component.html'
+  templateUrl: 'app.component.html',
+  styles: [`
+    .mainLoading{
+      width: 100%;
+      height: 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+    }
+  `]
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
+  loading = false;
   constructor(
     private platform: Platform,
     private splashScreen: SplashScreen,
-    private statusBar: StatusBar
+    private statusBar: StatusBar,
+    private router: Router
   ) {
     this.initializeApp();
   }
@@ -23,4 +34,15 @@ export class AppComponent {
       this.splashScreen.hide();
     });
   }
+
+  ngOnInit() {
+    this.router.events.subscribe((event) => {
+      if (event instanceof NavigationStart) {
+        this.loading = true;
+        setTimeout(() => {
+          this.loading = false;
+        });
+      }
+    });
+  }
 }

src/app/app.module.ts

@@ -9,6 +9,9 @@ import { StatusBar } from '@ionic-native/status-bar/ngx';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
+import { ApiService } from './service/api.service';
+import { AuthService } from './service/auth.service';
+import { HttpService } from './service/http.service';
 
 @NgModule({
   declarations: [AppComponent],
@@ -17,7 +20,10 @@ import { AppRoutingModule } from './app-routing.module';
   providers: [
     StatusBar,
     SplashScreen,
-    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+    ApiService,
+    HttpService,
+    AuthService
   ],
   bootstrap: [AppComponent]
 })

src/app/extra/extra.module.ts

@@ -7,6 +7,8 @@ import { IonicModule } from '@ionic/angular';
 
 import { ExtraPage } from './extra.page';
 
+import { LoginComponent } from './login/login.component';
+
 const routes: Routes = [
   {
     path: '',
@@ -21,6 +23,6 @@ const routes: Routes = [
     IonicModule,
     RouterModule.forChild(routes)
   ],
-  declarations: [ExtraPage]
+  declarations: [ExtraPage, LoginComponent]
 })
 export class ExtraPageModule {}

src/app/extra/extra.page.html

-<ion-header>
-  <ion-toolbar>
-    <ion-title>extra</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content padding>
-
-</ion-content>
+<app-login style="height: 100%;width: 100%"></app-login>

src/app/extra/login/login.component.html

-<p>
-  login works!
-</p>
+<div class="loginPage" @fade>
+    <div class="topBar">
+        <div class="imgPart">Logo</div>
+        <div class="title">上海辉度智能科技有限公司</div>
+    </div>
+    <div class="mainBar">
+        <div class="inputLine">
+            <div class="labelForInput">用户名</div>
+            <ion-input type="text" value="cy" mode="ios" class="input"></ion-input>
+        </div>
+        <div class="inputLine">
+            <div class="labelForInput">密码</div>
+            <ion-input type="password" value="123" mode="ios" class="input"></ion-input>
+        </div>
+        <ion-button mode="ios" color="primary" expand="full" class="loginBtn" (click)="login()">Login</ion-button>
+    </div>
+</div>

src/app/extra/login/login.component.scss

+
+.loginPage{
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 20% 0 0 0;
+  text-align: center;
+}
+
+.topBar{
+  height: 35%;
+  padding: 5%;
+}
+
+.imgPart{
+  height: 70%;
+  width: calc(100% - 180px);
+  margin: 0 auto;
+  font-size: 50px;
+  line-height: 2;
+  border: 1px solid #ccc;
+}
+
+.title{
+  height: 20%;
+  line-height: 1.5;
+  font-size: 20px;
+  margin-top: 5%;
+}
+
+.mainBar {
+  padding: 0 20px;
+}
+
+.inputLine {
+  padding-top: 8%;
+  border-bottom: 2px solid #1890ff;
+}
+
+.labelForInput {
+  width: 35%;
+  display: inline-block;
+  height: 40px;
+  line-height: 40px;
+}
+
+.input {
+  width: 65%;
+  display: inline-block;
+  text-align: left;
+  height: 40px;
+  line-height: 30px;
+}
+
+.loginBtn {
+  margin: 8% 0 0 0;
+  height: 40px;
+  line-height: 40px;
+}
+
+@media all and (orientation : landscape) {
+  .loginPage{
+    padding: 0;
+  }
+
+  .topBar{
+    height: 50%;
+  }
+
+  .imgPart{
+    line-height: 1.3;
+  }
+
+  .inputLine {
+    padding-top: 2%;
+  }
+
+  .loginBtn {
+    margin: 2% 0 0 0;
+  }
+}

src/app/extra/login/login.component.ts

 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { fadeIn } from '../../animations/fade-in';
 
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss'],
+  animations: [fadeIn]
 })
 export class LoginComponent implements OnInit {
 
-  constructor() { }
+  constructor(private router: Router) {}
 
   ngOnInit() {}
 
+  login() {
+    this.router.navigate(['/main']);
+  }
 }

src/app/home/home.module.ts

-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { IonicModule } from '@ionic/angular';
-import { FormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-import { HomePage } from './home.page';
-import { PageOneComponent } from '../main/page-one/page-one.component';
-import { PageTwoComponent } from '../main/page-two/page-two.component';
-import { PageThreeComponent } from '../main/page-three/page-three.component';
-import { PageFourComponent } from '../main/page-four/page-four.component';
-import { PageDetailComponent } from '../main/page-detail/page-detail.component';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {IonicModule} from '@ionic/angular';
+import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+import {HomePage} from './home.page';
+import {PageOneComponent} from '../main/page-one/page-one.component';
+import {PageTwoComponent} from '../main/page-two/page-two.component';
+import {PageThreeComponent} from '../main/page-three/page-three.component';
+import {PageFourComponent} from '../main/page-four/page-four.component';
+import {PageDetailComponent} from '../main/page-detail/page-detail.component';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    FormsModule,
-    IonicModule,
-    RouterModule.forChild([
-      {
-        path: '',
-        component: HomePage
-      }
-    ])
-  ],
-  declarations: [
-      HomePage,
-      PageOneComponent,
-      PageTwoComponent,
-      PageThreeComponent,
-      PageFourComponent,
-      PageDetailComponent
-  ]
+    imports: [
+        CommonModule,
+        FormsModule,
+        IonicModule,
+        RouterModule.forChild([
+            {
+                path: '',
+                component: HomePage
+            },
+            {
+                path: 'detail',
+                component: PageDetailComponent
+            }
+        ])
+    ],
+    declarations: [
+        HomePage,
+        PageOneComponent,
+        PageTwoComponent,
+        PageThreeComponent,
+        PageFourComponent,
+        PageDetailComponent
+    ]
 })
-export class HomePageModule {}
+export class HomePageModule {
+}

src/app/home/home.page.html

-<ion-slides id="slideComponent" style="width: 100%;height: 100%;"
+<ion-slides @fade id="slideComponent" style="width: 100%;height: 100%;"
             mode="ios" [options]="options" [@toLeft]="toLeft" [@toRight]="toRight" (ionSlideDidChange)="slideOnChange()">
   <ion-slide>
     <div class="box" style="color: #ffd31a"><app-page-one></app-page-one></div>

src/app/home/home.page.ts

@@ -3,12 +3,14 @@ import { IonSlides } from '@ionic/angular';
 import 'web-animations-js/web-animations.min';
 import { toLeft } from '../animations/toLeftAndBack';
 import { toRight } from '../animations/toRightAndBack';
+import { fadeIn } from '../animations/fade-in';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-home',
   templateUrl: 'home.page.html',
   styleUrls: ['home.page.scss'],
-  animations: [toLeft, toRight]
+  animations: [toLeft, toRight, fadeIn]
 })
 export class HomePage implements OnInit {
   @ViewChild(IonSlides) slides;
@@ -25,24 +27,23 @@ export class HomePage implements OnInit {
   toLeft = 'backLeft';
   toRight = 'backRight';
 
+  constructor(private router: Router) {}
+
   ngOnInit() {
     document.getElementById('slideComponent').addEventListener('touchstart', <TouchEvent>(e) => {
-      e.preventDefault();
       this.startX = e.touches[0].pageX;
       this.startY = e.touches[0].pageY;
     });
     document.getElementById('slideComponent').addEventListener('touchmove', <TouchEvent>(e) => {
-      e.preventDefault();
       const moveEndX = e.touches[0].pageX;
       const moveEndY = e.touches[0].pageY;
       this.X = moveEndX - this.startX;
       this.Y = moveEndY - this.startY;
     });
     document.getElementById('slideComponent').addEventListener('touchend', <TouchEvent>(e) => {
-      e.preventDefault();
-      if ( this.X > 50 ) {
+      if ( this.X > 100 ) {
         this.slidePrev();
-      } else if ( this.X < -50 ) {
+      } else if ( this.X < -100 ) {
         this.slideNext();
       }
     });

src/app/main/page-detail/page-detail.component.html

-<p>
-  page-detail works!
-</p>
+<ion-button mode="ios" color="primary" expand="full" class="loginBtn" (click)="toList()">List</ion-button>

src/app/main/page-detail/page-detail.component.ts

 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-page-detail',
@@ -7,8 +8,12 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PageDetailComponent implements OnInit {
 
-  constructor() { }
+  constructor(private router: Router) { }
 
   ngOnInit() {}
 
+  toList() {
+    this.router.navigate(['/main']);
+  }
+
 }

src/app/main/page-two/page-two.component.html

 <p>
   page-two works!
 </p>
+<ion-button mode="ios" color="primary" expand="full" class="loginBtn" (click)="toDetail()">Detail</ion-button>

src/app/main/page-two/page-two.component.ts

 import { Component, OnInit } from '@angular/core';
+import { NavController } from '@ionic/angular';
 
 @Component({
   selector: 'app-page-two',
@@ -7,8 +8,12 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PageTwoComponent implements OnInit {
 
-  constructor() { }
+  constructor(private nav: NavController) { }
 
-  ngOnInit() {}
+  ngOnInit() {
+  }
 
+  toDetail() {
+    this.nav.navigateForward('/main/detail');
+  }
 }

src/app/service/api.service.ts

+import { HttpService } from './http.service';
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { environment } from '../../environments/environment';
+
+@Injectable()
+export class ApiService {
+    constructor(private http: HttpService, private router: Router) {
+    }
+
+    tokenLoseflag = 0;
+    public url = environment.url;
+
+    public login = {
+        dologin: (data) => this.trans('post', '/login/dologin', data),
+        logout: (data) => this.trans('get', '/login/logout', data),
+    };
+
+    private trans(type, addr, data) {
+        this.sendHttpReq(type, addr, data[0], data[1], data[2], data[3]);
+    }
+
+    private sendHttpReq(type, addr, reqB, next, error, complete) {
+        let nextFunc;
+        if (addr === '/login/dologin') {
+            nextFunc = (data: any) => {
+                next(data);
+            };
+        } else {
+            nextFunc = (data: any) => {
+                if (this.http.handleToken(data)) {
+                    next(data);
+                } else {
+                    if (!this.tokenLoseflag) {
+                        // this.message.error(this.translate.instant('loginOutValidityTips'));
+                        this.http.toLoginPage(2000);
+                        this.tokenLoseflag = 1;
+                        setTimeout(() => {
+                            this.tokenLoseflag = 0;
+                        }, 5000);
+                    }
+                }
+            };
+        }
+        if (!error) {
+            error = (err) => {
+                // const data;
+                if (err && err.error && err.error.status) {
+                    if (err.error.status === 401) {
+                        // data = {code: 0, message: this.translate.instant('noLoginTips')};
+                        this.router.navigate(['/extra/login']);
+                    } else {
+                        // data = {code: 0, message: this.translate.instant('wrongServerWithCode') + err.error.status};
+                    }
+                } else {
+                    // data = {code: 0, message: this.translate.instant('wrongServer')};
+                }
+                // next(data);
+            };
+        }
+        if (type === 'get') {
+            this.http.get(this.url + addr, nextFunc, error, complete);
+        } else {
+            this.http.post(this.url + addr, reqB, nextFunc, error, complete);
+        }
+    }
+}

src/app/service/auth.service.ts

+import { Injectable, OnInit } from '@angular/core';
+import { CanActivateChild, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+// import { PermissionService } from './permission.service';
+// import { MenuService } from './menu.service';
+
+@Injectable()
+export class AuthService implements CanActivateChild, OnInit {
+    // public login = false;
+    // private permissionR = '';
+
+    constructor(private router: Router) {
+    }
+
+    ngOnInit() {
+    }
+
+    canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+        // const layoutCon = document.getElementById('layoutCon');
+        // if (layoutCon) {
+        //     layoutCon.scrollTop = 0;
+        // }
+        // return this.checkLogin() && this.permissionCheck(state.url);
+        // // return this.checkLogin();
+        return true;
+    }
+
+    // // 登录验证,如果有值就返回true.没有就跳转登录
+    // checkLogin() {
+    //     if (window.sessionStorage.getItem('_AMap_AMap.MapInner')) {
+    //         return true;
+    //     }
+    //     this.router.navigate(['/extra/login']);
+    //     return false;
+    // }
+    //
+    // // 路由跳转权限检测
+    // permissionCheck(routerUrl) {
+    //     clearInterval(parseInt(window.sessionStorage.getItem('_inv'), 10));
+    //     let routerReq;
+    //     if (routerUrl.indexOf('?') > -1) {
+    //         routerReq = routerUrl.slice(0, routerUrl.indexOf('?'));
+    //     } else {
+    //         routerReq = routerUrl;
+    //     }
+    //     routerReq = routerReq.split('/');
+    //     if (routerReq[routerReq.length - 1] === 'xdkDetail' || routerReq[routerReq.length - 1] === 'cissDetail'
+    //         || routerReq[routerReq.length - 1] === 'warnEdit' || routerReq[routerReq.length - 1] === 'warnNew') {
+    //         this.permissionR = routerReq[routerReq.length - 2];
+    //     } else {
+    //         this.permissionR = routerReq[routerReq.length - 1];
+    //     }
+    //     const permissions = JSON.stringify(this.permission.getTiny());
+    //     if (permissions.indexOf(this.permissionR) > -1) {
+    //         return true;
+    //     } else {
+    //         return false;
+    //     }
+    // }
+}

src/app/service/http.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Http, RequestOptions, Response } from '@angular/http';
+import { Subscription } from 'rxjs/index';
+import { Router } from '@angular/router';
+
+@Injectable()
+export class HttpService {
+
+    constructor(private http: HttpClient, private router: Router) {
+        this.subs = new Array<Subscription>();
+    }
+    private subs: Subscription[];
+    private header = new HttpHeaders().append('Content-Type', 'application/json').append('Access-Control-Allow-Origin', '*');
+    postParamObj = {
+        withCredentials: true,
+        headers: this.header
+    };
+    getParamObj = {
+        withCredentials: true,
+    };
+
+    // 封装统一的 http 请求方法
+    get(url: string,
+        next?: (value: Response) => void,
+        error?: (error: any) => void,
+        complete?: () => void): void {
+        if (url.indexOf('?') > -1) {
+            // 有参数
+            url += `&dateStamp=${(new Date).getTime()}`;
+        } else {
+            // 无参数
+            url += `?dateStamp=${(new Date).getTime()}`;
+        }
+        this.subs.push(this.http.get(`${url}`, this.getParamObj).subscribe(next, error, complete));
+    }
+
+    post(url: string,
+         data: any,
+         next?: (value: Response) => void,
+         error?: (error: any) => void,
+         complete?: () => void): void {
+        if (url.indexOf('?') > -1) {
+            // 有参数
+            url += `&dateStamp=${(new Date).getTime()}`;
+        } else {
+            // 无参数
+            url += `?dateStamp=${(new Date).getTime()}`;
+        }
+
+        this.subs.push(this.http.post(url, data, this.postParamObj).subscribe(next, error, complete));
+    }
+
+    // token 失效处理函数
+    handleToken = (value) => {
+        if (value && value.code && value.code === 2) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+
+    // 跳转登录页面
+    toLoginPage(time) {
+        window.setTimeout(() => {
+            this.router.navigate(['/extra/login']);
+        }, time);
+    }
+
+    // 复制属性
+    public cloneProp(ob, nOb) {
+        const car = new nOb();
+        for (const prop in ob) {
+            if (ob[prop] || ob[prop] === 0) {
+                car[prop] = ob[prop];
+            } else {
+                car[prop] = '';
+            }
+        }
+        return car;
+    }
+}

src/environments/environment.ts

@@ -3,7 +3,8 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  url: ''
 };
 
 /*