feat(pages): init pages

src/app/pages/home/home.page.html

@@ -0,0 +1,17 @@
+<ion-header>
+  <ion-toolbar>
+    <button ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>{{ 'HOME.Home' | translate }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content padding>
+  <h3>Ionic Boilerplate</h3>
+
+  <p>
+    create by <a href="https://yipeng.info/">pengkobe</a> .
+  </p>
+
+  <button ion-button secondary menuToggle>{{ 'HOME.Toggle' | translate }}</button>
+</ion-content>

src/app/pages/home/home.page.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { NavController } from '@ionic/angular';
+
+@Component({
+  selector: 'page-home',
+  templateUrl: 'home.page.html'
+})
+export class HomePage {
+
+  constructor(public navCtrl: NavController) {
+
+  }
+
+}

src/app/pages/list/calendar/calendar.html

@@ -0,0 +1,22 @@
+<!--
+  Generated template for the TestPage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Calendar 演示</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding>
+    <ion-calendar [(ngModel)]="date"
+    (onChange)="onChange($event)"
+    [type]="type"
+    [format]="'YYYY-MM-DD'">
+</ion-calendar>
+</ion-content>

src/app/pages/list/calendar/calendar.scss

@@ -0,0 +1 @@
+page-calendar {}

src/app/pages/list/calendar/calendar.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+/**
+ * Generated class for the CalendarPage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
+
+@Component({
+  selector: 'page-calendar',
+  templateUrl: 'calendar.html',
+})
+export class CalendarPage {
+  constructor() {}
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad EchartsPage');
+  }
+  date: string;
+  type: 'string'; // 'string' | 'js-date' | 'moment' | 'time' | 'object'
+
+  onChange($event) {
+    console.log($event);
+  }
+}

src/app/pages/list/echarts/echarts.html

@@ -0,0 +1,18 @@
+<!--
+  Generated template for the TestPage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Echarts 演示</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding>
+  <div echarts [options]="options" class="demo-chart"></div>
+</ion-content>

src/app/pages/list/echarts/echarts.scss

@@ -0,0 +1,3 @@
+page-echarts {
+
+}

src/app/pages/list/echarts/echarts.ts

@@ -0,0 +1,58 @@
+import { Component } from '@angular/core';
+import { EChartOption } from 'echarts';
+/**
+ * Generated class for the EchartsPage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
+
+@Component({
+  selector: 'page-echarts',
+  templateUrl: 'echarts.html',
+})
+export class EchartsPage {
+  isAlwaysLight = false;
+
+  languageType: string;
+
+  options: EChartOption = {
+    color: ['#3398DB'],
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        axisTick: {
+          alignWithLabel: true
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    series: [
+      {
+        name: 'Test',
+        type: 'bar',
+        barWidth: '60%',
+        data: [10, 52, 200, 334, 390, 330, 220]
+      }
+    ]
+  };
+
+  constructor(
+  ) {}
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad EchartsPage');
+  }
+
+}

src/app/pages/list/list.page.html

@@ -0,0 +1,27 @@
+<ion-header>
+  <ion-toolbar>
+    <button ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>{{ 'HOME.List' | translate }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-refresher (ionRefresh)="doRefresh($event)">
+    <ion-refresher-content></ion-refresher-content>
+  </ion-refresher>
+
+  <ion-list>
+    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
+      <ion-icon [name]="item.icon" item-start></ion-icon>
+      {{ item.title }}
+      <div class="item-note" item-end>
+        {{ item.note }}
+      </div>
+    </button>
+  </ion-list>
+  <div *ngIf="selectedItem" padding>
+    You navigated here from <b>{{ selectedItem.title }}</b>
+  </div>
+</ion-content>

src/app/pages/list/list.page.ts

@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { NavController } from '@ionic/angular';
+import { EchartsPage } from './echarts/echarts';
+import { CalendarPage } from './calendar/calendar';
+
+@Component({
+  selector: 'page-list',
+  templateUrl: 'list.page.html',
+})
+export class ListPage {
+  selectedItem: any;
+  icons: string[];
+  items: Array<{ title: string; note: string; icon: string }>;
+
+  constructor(public navCtrl: NavController) {
+    // If we navigated to this page, we will have an item available as a nav param
+
+    this.items = [
+      {
+        title: 'echarts',
+        note: '',
+        icon: 'speedometer',
+      },
+      {
+        title: 'calendar',
+        note: '',
+        icon: 'calendar',
+      },
+    ];
+  }
+
+  itemTapped(event, item) {
+    // if (item.title === 'echarts') {
+    //   this.navCtrl.navigateForward('EchartsPage',true, {
+    //     item: item,
+    //   });
+    // }
+    // if (item.title === 'calendar') {
+    //   this.navCtrl.navigateForward(CalendarPage, {
+    //     item: item,
+    //   });
+    // }
+  }
+
+  doRefresh(refresher) {
+    console.log('Begin async operation', refresher);
+
+    setTimeout(() => {
+      console.log('Async operation has ended');
+      refresher.complete();
+    }, 600);
+  }
+}

src/app/pages/test/test.page.html

@@ -0,0 +1,54 @@
+<!--
+  Generated template for the TestPage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<ion-header>
+
+  <ion-toolbar>
+    <button ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>{{ 'HOME.Test' | translate }}</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding>
+  <ion-grid>
+    <ion-row>
+
+      <ion-col col-12 (click)="open()">
+        <ion-item>
+          <ion-label> 扫码拍照</ion-label>
+          <ion-icon name="qr-scanner" item-start color="primary"></ion-icon>
+        </ion-item>
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col col-12>
+        <ion-item>
+          <ion-icon name="bulb" item-start color="primary"></ion-icon>
+          <ion-label> 屏幕常亮</ion-label>
+          <ion-toggle (ionChange)="changeLightState()" color="secondary" [(ngModel)]="isAlwaysLight"></ion-toggle>
+        </ion-item>
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col col-12>
+        <ion-item>
+          <ion-icon name="musical-notes" item-start color="primary"></ion-icon>
+          <ion-label>语言切换</ion-label>
+          <ion-select [(ngModel)]="languageType" (ngModelChange)="setLanguageType($event)" cancelText="取消" okText="确定">
+            <ion-select-option value="zh" selected="true">中文</ion-select-option>
+            <ion-select-option value="en">英文</ion-select-option>
+          </ion-select>
+        </ion-item>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-content>

src/app/pages/test/test.page.scss

@@ -0,0 +1,3 @@
+page-test {
+
+}