init

.idea/watcherTasks.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
+</project>
\ No newline at end of file

src/pages/contact/add-block/add-block.module.ts

+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { AddBlockPage } from './add-block';
+
+@NgModule({
+  declarations: [
+    AddBlockPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(AddBlockPage),
+  ],
+})
+export class AddBlockPageModule {}

src/pages/contact/add-block/add-block.scss

+page-add-block {
+
+  .search{
+    width: 18px;
+    height: 18px;
+    float: right;
+    margin-right: 15px;
+  }
+
+  .common{
+    background-color: #f5f5f5;
+    font-size: 12px;
+    color: #b2b2b2;
+    padding-left: 10px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+
+  .item{
+    // height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: left;
+    box-sizing: border-box;
+    padding: 10px 0 10px 15px;
+
+  }
+
+  .contact-icon{
+    font-size: 30px;
+    color: #81afe8;
+    margin-right: 15px;
+  }
+  .icon-span{
+    text-align: center;
+    background-color: #eeeeee;
+    display: inline-block;
+    width: 35px;
+    height: 35px;
+    margin-right: 10px;
+    border-radius: 2px;
+  }
+  .add-icon-contact{
+    font-weight: 600;
+    color: #fff;
+    font-size: 48px;
+    line-height: 35px;
+  }
+
+  .contact-title{
+    font-size: 18px;
+  }
+
+  .item-border{
+    border-bottom: 1px solid #cccccc;
+    padding-bottom: 10px;
+  }
+
+  .wait{
+    width: 100%;
+    height: 100%;
+  }
+
+  .back-btn{
+    width: 30px;
+    height: 30px;
+  }
+  .input{
+    height: 38px;
+    border: 1px solid #ddd;
+    width: 80%;
+    border-radius: 5px;
+    padding: 1px 5px;
+  }
+}

src/pages/contact/add-block/add-block.ts

+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
+import {SelectBlockPage} from "../select-block/select-block";
+
+
+@IonicPage()
+@Component({
+  selector: 'page-add-block',
+  templateUrl: 'add-block.html',
+})
+export class AddBlockPage {
+
+  constructor(public navCtrl: NavController, public navParams: NavParams,
+              public modalCtrl: ModalController) {
+  }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad AddBlockPage');
+  }
+
+    goSelectmodal(){
+      this.navCtrl.push('SelectBlockPage');
+    }
+
+}

src/pages/contact/contact-modal/contact-modal.html

+
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      选择联系人
+    </ion-title>
+    <ion-buttons start>
+      <button ion-button (click)="dismiss()">
+        <span ion-text color="primary" showWhen="ios">取消</span>
+        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
+      </button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+
+
+<ion-content>
+  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
+  <div class="item" (click)="usualContactPersons()">
+    <ion-icon name="ios-contacts" class="contact-icon"></ion-icon>
+    <span class="contact-title">方召</span>
+  </div>
+  <div class="item" (click)="usualContactPersons()">
+    <ion-icon name="ios-contacts" class="contact-icon"></ion-icon>
+    <span class="contact-title">方召</span>
+  </div>
+  <div class="item" (click)="usualContactPersons()">
+    <ion-icon name="ios-contacts" class="contact-icon"></ion-icon>
+    <span class="contact-title">方召</span>
+  </div>
+</ion-content>

src/pages/contact/contact-modal/contact-modal.scss

+page-contact-modal {
+  .search{
+    width: 18px;
+    height: 18px;
+    float: right;
+    margin-right: 15px;
+  }
+
+  .common{
+    background-color: #f5f5f5;
+    font-size: 12px;
+    color: #b2b2b2;
+    padding-left: 10px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+
+  .item{
+    // height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: left;
+    box-sizing: border-box;
+    padding: 10px 0 10px 15px;
+
+  }
+  .item + .item{
+    border-top: 1px solid #dddddd;
+  }
+  .contact-icon{
+    font-size: 30px;
+    color: #81afe8;
+    margin-right: 15px;
+  }
+  .icon-span{
+    text-align: center;
+    background-color: #eeeeee;
+    display: inline-block;
+    width: 35px;
+    height: 35px;
+    margin-right: 10px;
+    border-radius: 2px;
+  }
+  .add-icon-contact{
+    font-weight: 600;
+    color: #fff;
+    font-size: 48px;
+    line-height: 35px;
+  }
+
+  .contact-title{
+    font-size: 18px;
+  }
+
+  .item-border{
+    border-bottom: 1px solid #cccccc;
+    padding-bottom: 10px;
+  }
+
+  .wait{
+    width: 100%;
+    height: 100%;
+  }
+
+  .back-btn{
+    width: 30px;
+    height: 30px;
+  }
+}

src/pages/contact/contact-modal/contact-modal.ts

+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
+
+
+@Component({
+  selector: 'page-contact-modal',
+  templateUrl: 'contact-modal.html',
+})
+export class ContactModalPage {
+  myInput;
+  shouldShowCancel = true;
+
+  constructor(public navCtrl: NavController, public navParams: NavParams,
+              public viewCtrl: ViewController) {
+  }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad ContactModalPage');
+  }
+
+    dismiss() {
+        let data = { 'foo': 'bar' };
+        this.viewCtrl.dismiss(data);
+    }
+
+    getItems(e){
+
+    }
+
+}

src/pages/contact/my-block/my-block.html

+
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>设置分组</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+<ion-content>
+  <div class="item">
+        <span class="icon-span">
+                    <ion-icon ios="ios-add" class="add-icon-contact" md="md-add"></ion-icon>
+        </span>
+    <span class="contact-title color-999">分组</span>
+  </div>
+
+</ion-content>

src/pages/contact/my-block/my-block.module.ts

+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { MyBlockPage } from './my-block';
+
+@NgModule({
+  declarations: [
+    MyBlockPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(MyBlockPage),
+  ],
+})
+export class MyBlockPageModule {}

src/pages/contact/my-block/my-block.scss

+page-my-block {
+  .search{
+    width: 18px;
+    height: 18px;
+    float: right;
+    margin-right: 15px;
+  }
+
+  .common{
+    background-color: #f5f5f5;
+    font-size: 12px;
+    color: #b2b2b2;
+    padding-left: 10px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+
+  .item{
+    // height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: left;
+    box-sizing: border-box;
+    padding: 10px 0 10px 15px;
+
+  }
+
+  .contact-icon{
+    font-size: 30px;
+    color: #81afe8;
+    margin-right: 15px;
+  }
+  .icon-span{
+    text-align: center;
+    background-color: #eeeeee;
+    display: inline-block;
+    width: 35px;
+    height: 35px;
+    margin-right: 10px;
+    border-radius: 2px;
+  }
+  .add-icon-contact{
+    font-weight: 600;
+    color: #fff;
+    font-size: 48px;
+    line-height: 35px;
+  }
+
+  .contact-title{
+    font-size: 18px;
+  }
+
+  .item-border{
+    border-bottom: 1px solid #cccccc;
+    padding-bottom: 10px;
+  }
+
+  .wait{
+    width: 100%;
+    height: 100%;
+  }
+
+  .back-btn{
+    width: 30px;
+    height: 30px;
+  }
+  .input{
+    height: 38px;
+    border: 1px solid #ddd;
+    width: 80%;
+    border-radius: 5px;
+    padding: 1px 5px;
+  }
+}

src/pages/contact/my-block/my-block.ts

+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+
+
+@IonicPage()
+@Component({
+  selector: 'page-my-block',
+  templateUrl: 'my-block.html',
+})
+export class MyBlockPage {
+
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad MyBlockPage');
+  }
+
+}

src/pages/contact/select-block/select-block.html

+<ion-header>
+
+  <ion-navbar>
+    <ion-title>选择联系人</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content>
+    <div class="item item-border"  (click)="showPeoModal()">
+        <ion-icon name="folder" class="contact-icon"></ion-icon>
+        <span class="contact-title">分组1</span>
+    </div>
+    <div class="item item-border"  (click)="showPeoModal()">
+        <ion-icon name="folder" class="contact-icon"></ion-icon>
+        <span class="contact-title">分组1</span>
+    </div>
+    <div class="item item-border"  (click)="showPeoModal()">
+        <ion-icon name="folder" class="contact-icon"></ion-icon>
+        <span class="contact-title">分组1</span>
+    </div>
+</ion-content>

src/pages/contact/select-block/select-block.module.ts

+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { SelectBlockPage } from './select-block';
+
+@NgModule({
+  declarations: [
+    SelectBlockPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(SelectBlockPage),
+  ],
+})
+export class SelectBlockPageModule {}

src/pages/contact/select-block/select-block.scss

+page-select-block {
+  .search{
+    width: 18px;
+    height: 18px;
+    float: right;
+    margin-right: 15px;
+  }
+
+  .common{
+    background-color: #f5f5f5;
+    font-size: 12px;
+    color: #b2b2b2;
+    padding-left: 10px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+
+  .item{
+    // height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: left;
+    box-sizing: border-box;
+    padding: 10px 0 10px 15px;
+
+  }
+
+  .contact-icon{
+    font-size: 30px;
+    color: #81afe8;
+    margin-right: 15px;
+  }
+  .icon-span{
+    text-align: center;
+    background-color: #eeeeee;
+    display: inline-block;
+    width: 35px;
+    height: 35px;
+    margin-right: 10px;
+    border-radius: 2px;
+  }
+  .add-icon-contact{
+    font-weight: 600;
+    color: #fff;
+    font-size: 48px;
+    line-height: 35px;
+  }
+
+  .contact-title{
+    font-size: 18px;
+  }
+
+  .item-border{
+    border-bottom: 1px solid #cccccc;
+    padding-bottom: 10px;
+  }
+
+  .wait{
+    width: 100%;
+    height: 100%;
+  }
+
+  .back-btn{
+    width: 30px;
+    height: 30px;
+  }
+  .input{
+    height: 38px;
+    border: 1px solid #ddd;
+    width: 80%;
+    border-radius: 5px;
+    padding: 1px 5px;
+  }
+}

src/pages/contact/select-block/select-block.ts

+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
+import {ContactModalPage} from "../contact-modal/contact-modal";
+
+/**
+ * Generated class for the SelectBlockPage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
+
+@IonicPage()
+@Component({
+  selector: 'page-select-block',
+  templateUrl: 'select-block.html',
+})
+export class SelectBlockPage {
+
+  constructor(public navCtrl: NavController, public navParams: NavParams,
+              public modalCtrl: ModalController) {
+  }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad SelectBlockPage');
+  }
+
+  showPeoModal(){
+    let peoModal = this.modalCtrl.create(ContactModalPage);
+    peoModal.present();
+  }
+}

src/pages/tabs/notice/notice.html

+
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>消息提醒</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content padding>
+  <div class="notice">
+    <div class="notice-card">
+      <div class="notice-type">
+        <div class="type-img" ></div>
+        <div class="type-info" style="width:50%;">生日祝福</div>
+        <div class="type-time" style="width:30%;">2018-08-30</div>
+      </div>
+      <div class="notice-content">
+        今天是 <span class="notice-key">张豆豆</span>同志的生日，祝他生日快乐!
+      </div>
+    </div>
+    <div class="notice-card">
+      <div class="notice-type">
+        <div class="type-img" ></div>
+        <div class="type-info" style="width:50%;">入职祝福</div>
+        <div class="type-time" style="width:30%;">2018-08-30</div>
+      </div>
+      <div class="notice-content">
+        欢迎 <span class="notice-key">张豆豆</span>同志加入组织部大家。
+      </div>
+    </div>
+    <div class="notice-card">
+      <div class="notice-type">
+        <div class="type-img" ></div>
+        <div class="type-info" style="width:50%;">新的外出报备提醒</div>
+        <div class="type-time" style="width:30%;">2018-08-30</div>
+      </div>
+      <div class="notice-content">
+        <span class="notice-key">张豆豆</span>已发布，请抓紧时间报备！
+      </div>
+    </div>
+    <div class="notice-card">
+      <div class="notice-type">
+        <div class="type-img" ></div>
+        <div class="type-info" style="width:50%;">新的活动提醒</div>
+        <div class="type-time" style="width:30%;">2018-08-30</div>
+      </div>
+      <div class="notice-content">
+       <span class="notice-key">张豆豆</span>已发布，请抓紧时间报名！
+      </div>
+    </div>
+    <div class="notice-card">
+      <div class="notice-type">
+        <div class="type-img" ></div>
+        <div class="type-info" style="width:50%;">新的问卷调查提醒</div>
+        <div class="type-time" style="width:30%;">2018-08-30</div>
+      </div>
+      <div class="notice-content">
+        <span class="notice-key">张豆豆</span>已发布，请参与问卷调查！
+      </div>
+    </div>
+    <div class="notice-card">
+      <div class="notice-type">
+        <div class="type-img" ></div>
+        <div class="type-info" style="width:50%;">新的值班排班提醒</div>
+        <div class="type-time" style="width:30%;">2018-08-30</div>
+      </div>
+      <div class="notice-content">
+        <span class="notice-key">张豆豆</span>已发布，请至值班排班情况中查看！
+      </div>
+    </div>
+    <div class="notice-card">
+      <div class="notice-type">
+        <div class="type-img" ></div>
+        <div class="type-info" style="width:50%;">换班提醒</div>
+        <div class="type-time" style="width:30%;">2018-08-30</div>
+      </div>
+      <div class="notice-content">
+        <span class="notice-key">张豆豆</span>,请至我的值班中查看！
+      </div>
+    </div>
+    <div class="notice-card">
+      <div class="notice-type">
+        <div class="type-img" ></div>
+        <div class="type-info" style="width:50%;">替班提醒</div>
+        <div class="type-time" style="width:30%;">2018-08-30</div>
+      </div>
+      <div class="notice-content">
+        <span class="notice-key">张豆豆</span>,请至我的值班中查看！
+      </div>
+    </div>
+    <div class="notice-card">
+      <div class="notice-type">
+        <div class="type-img" ></div>
+        <div class="type-info" style="width:50%;">换班申请忽略提醒</div>
+        <div class="type-time" style="width:30%;">2018-08-30</div>
+      </div>
+      <div class="notice-content">
+       你提交的换班申请已被<span class="notice-key">张豆豆</span>，请至值班排班情况中查看！
+      </div>
+    </div>
+    <div class="notice-card">
+      <div class="notice-type">
+        <div class="type-img" ></div>
+        <div class="type-info" style="width:50%;">换班申请忽略提醒</div>
+        <div class="type-time" style="width:30%;">2018-08-30</div>
+      </div>
+      <div class="notice-content">
+        用户<span class="notice-key">张豆豆</span>提交了换班申请，祝他生日快乐!
+      </div>
+    </div>
+    <div class="notice-card">
+      <div class="notice-type">
+        <div class="type-img" ></div>
+        <div class="type-info" style="width:50%;">新的通知公告提醒</div>
+        <div class="type-time" style="width:30%;">2018-08-30</div>
+      </div>
+      <div class="notice-content">
+        <span class="notice-key">张豆豆</span>已发布，请至通知公告中查看！
+      </div>
+    </div>
+    <div class="notice-card">
+      <div class="notice-type">
+        <div class="type-img" ></div>
+        <div class="type-info" style="width:50%;">值班签到提醒</div>
+        <div class="type-time" style="width:30%;">2018-08-30</div>
+      </div>
+      <div class="notice-content">
+        今天是你的 <span class="notice-key">张豆豆</span>，请记得签到
+      </div>
+    </div>
+    <div class="notice-card">
+      <div class="notice-type">
+        <div class="type-img" ></div>
+        <div class="type-info" style="width:50%;">调查问卷过期提醒</div>
+        <div class="type-time" style="width:30%;">2018-08-30</div>
+      </div>
+      <div class="notice-content">
+       <span class="notice-key">张豆豆</span>已过期，无法在参与问卷调查。
+      </div>
+    </div>
+
+
+
+  </div>
+</ion-content>

src/pages/tabs/notice/notice.module.ts

+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { NoticePage } from './notice';
+
+@NgModule({
+  declarations: [
+    NoticePage,
+  ],
+  imports: [
+    IonicPageModule.forChild(NoticePage),
+  ],
+})
+export class NoticePageModule {}

src/pages/tabs/notice/notice.scss

+page-notice {
+  .scroll-content{
+    padding: 10px !important;
+    background-color: #e5e8ee;
+  }
+  .notice-card{
+    background-color: #fff;
+    padding: 10px;
+    margin: 10px 0;
+    border-radius: 5px;
+  }
+  .notice-type{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .type-img{
+    width: 20%;
+  }
+  .type-info{
+    width: 50%;
+    font-size: 18px;
+  }
+  .type-time{
+    width: 30%;
+    color: #999;
+  }
+  .notice-key{
+    color:#2b98f0;
+    margin: 0 5px;
+  }
+  .notice-type{
+    padding: 15px 0;
+    border-bottom: 1px solid #ddd;
+  }
+  .notice-content{
+    padding: 15px 0;
+  }
+}

src/pages/tabs/notice/notice.ts

+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+
+/**
+ * Generated class for the NoticePage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
+
+@IonicPage()
+@Component({
+  selector: 'page-notice',
+  templateUrl: 'notice.html',
+})
+export class NoticePage {
+
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad NoticePage');
+  }
+
+}