跨域代理

angular.json

@@ -75,7 +75,8 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "app:build"
+            "browserTarget": "app:build",
+            "proxyConfig": "ionic.config.json"
           },
           "configurations": {
             "production": {

ionic.config.json

@@ -4,11 +4,14 @@
     "cordova": {}
   },
   "type": "angular",
-  "proxies": [
-    {
-      "path": "/wisdomgroup",
-      "proxyUrl": "http://101.89.112.92:80/wisdomgroup"
+  "/wisdomgroup": {
+    "target": "http://101.89.112.92:80/wisdomgroup",
+    "secure": false,
+    "logLevel": "debug",
+    "changeOrigin": true,
+    "pathRewrite": {
+      "^/wisdomgroup": ""
     }
-  ],
+  },
   "id": "7c945ac0"
 }

package-lock.json

@@ -5593,6 +5593,11 @@
       "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
       "dev": true
     },
+    "ion2-calendar": {
+      "version": "3.0.0-rc.0",
+      "resolved": "http://r.cnpmjs.org/ion2-calendar/download/ion2-calendar-3.0.0-rc.0.tgz",
+      "integrity": "sha1-k/wg6KX+hZIusjoFWUzP/njv9gc="
+    },
     "ionicons": {
       "version": "4.5.5",
       "resolved": "http://r.cnpmjs.org/ionicons/download/ionicons-4.5.5.tgz",
@@ -7062,6 +7067,11 @@
         }
       }
     },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "http://r.cnpmjs.org/moment/download/moment-2.24.0.tgz",
+      "integrity": "sha1-DQVdU/UFKqZTyfbraLtdEr9cK1s="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "http://r.cnpmjs.org/move-concurrently/download/move-concurrently-1.0.1.tgz",

package.json

@@ -39,6 +39,8 @@
     "cordova-plugin-file-transfer": "^1.7.1",
     "cordova-sqlite-storage": "^3.2.0",
     "core-js": "^2.5.4",
+    "ion2-calendar": "^3.0.0-rc.0",
+    "moment": "^2.24.0",
     "rxjs": "~6.3.3",
     "zone.js": "~0.8.29"
   },

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 import {TabsPage} from "./tabs/tabs.page";
-import {AppComponent} from "./app.component";
+import {LoginPage} from "./tabs/login/login.page";
 
 const routes: Routes = [
   {
@@ -15,9 +15,9 @@ const routes: Routes = [
       {path: '', redirectTo: '/tabs/home', pathMatch: 'full'}
     ]
   },
-  // {
-    // path: 'login', children: [{path: '', loadChildren: './tabs/login/login.module#LoginPageModule'}],
-  // },
+  {
+    path: 'login', component:LoginPage,
+  },
   {
     path: '',
     redirectTo: '/tabs/home',

src/app/app.component.ts

-import { Component } from '@angular/core';
-import { Platform } from '@ionic/angular';
-import { SplashScreen } from '@ionic-native/splash-screen/ngx';
-import { StatusBar } from '@ionic-native/status-bar/ngx';
+import {Component} from '@angular/core';
+import {Platform} from '@ionic/angular';
+import {SplashScreen} from '@ionic-native/splash-screen/ngx';
+import {StatusBar} from '@ionic-native/status-bar/ngx';
 import {environment} from "../environments/environment";
 import {AppVersion} from "@ionic-native/app-version/ngx";
 import {Storage} from "@ionic/storage";
 import {Router} from "@angular/router";
+import {TabsService} from "./tabs/tabs.service";
+import {CommonService} from "../provide/common.service";
 
 @Component({
     selector: 'app-root',
     templateUrl: 'app.component.html'
 })
 export class AppComponent {
+
+    user;
+
     constructor(
         private platform: Platform,
         private splashScreen: SplashScreen,
         private statusBar: StatusBar,
-    private appVersion:AppVersion,
-    private storage:Storage,
-    private router:Router,
+        private appVersion: AppVersion,
+        private storage: Storage, public commonSer: CommonService,
+        private router: Router, public tabSer: TabsService,
     ) {
         this.initializeApp();
         // console.log(App)
@@ -31,7 +36,7 @@ export class AppComponent {
             this.statusBar.overlaysWebView(false);
             this.statusBar.backgroundColorByHexString('#e12724');
             this.statusBar.styleLightContent();
-        this.appVersion.getVersionNumber().then((version:string)=>{
+            this.appVersion.getVersionNumber().then((version: string) => {
                 alert(version);
             })
 
@@ -40,37 +45,32 @@ export class AppComponent {
         });
     }
 
-    loadLogin(){
-      this.storage.get("userLoginInfo").then((value)=>{
+    loadLogin() {
+        this.storage.get("userLoginInfo").then((value) => {
             if (value != null && value != '') {
-              this.router.navigate(['tabs/home'])
-              // this.user = value;
-              // if(this.user.remember){
-              //     this.appService.ObserverHttpPost("/wisdomgroup/app/loginpost", this.user)
-              //         .subscribe((res: Response) => {
-              //                 let data = res.json();
-              //                 if (data["code"] == '200') {
-              //                     this.storage.set('user', data.data);
-              //                     this.user.userid = data.data.id;
-              //                     this.storage.set('userLoginInfo', this.user);
-              //                     this.rootPage = TabsPage;
-              //                 } else {
-              //                     this.appService.alert('手机号或密码错误！');
-              //                     this.rootPage = LoginPage;
-              //                 }
-              //             }, error => {
-              //                 this.rootPage = LoginPage;
-              //                 this.appService.alert('网络异常！');
-              //             }
-              //         );
-              // }else{
-              //     this.rootPage = LoginPage;
-              // }
-
+                this.user = value;
+                if (this.user.remember) {
+                    this.tabSer.loginpost(this.user).subscribe(
+                        (res) => {
+                            if (res["code"] == '200') {
+                                this.storage.set('user', res.data);
+                                this.user.userid = res.data.id;
+                                this.storage.set('userLoginInfo', this.user);
+                                this.router.navigate(['/tabs/home'])
+                            } else {
+                                this.commonSer.alert('手机号或密码错误！');
+                                this.router.navigate(['/login'])
+                            }
+                        },
+                        (err) => {
+                            this.commonSer.alert('网络异常！');
+                        }
+                    )
+                } else {
+                    this.router.navigate(['/login'])
                 }
-          else {
-              console.log('login')
-              // this.rootPage = LoginPage;
+            } else {
+                this.router.navigate(['/login'])
             }
         })
     }

src/app/app.main.module.ts

@@ -7,11 +7,16 @@ import {DiscoverPageModule} from "./tabs/discover/discover.module";
 import {ServePageModule} from "./tabs/serve/serve.module";
 import {MinePageModule} from "./tabs/mine/mine.module";
 import {TabsPageModule} from "./tabs/tabs.module";
-
+import {TabsService} from "./tabs/tabs.service";
+import {AppService} from "../http/http.service";
+import {HttpClientModule} from "@angular/common/http";
+import {HttpModule} from "@angular/http";
+import {LoginPageModule} from "./tabs/login/login.module";
 
 
 @NgModule({
     imports: [
+        LoginPageModule,
         TabsPageModule,
         HomePageModule,
         DiscoverPageModule,
@@ -20,10 +25,14 @@ import {TabsPageModule} from "./tabs/tabs.module";
         IonicModule,
         CommonModule,
         FormsModule,
+        HttpClientModule,
+        HttpModule
     ],
-    declarations: [
-
-    ]
+    providers: [
+        TabsService,
+        AppService,
+    ],
+    declarations: []
 })
 export class AppMainModule {
 }

src/app/tabs/login/login.page.html

 <ion-header>
   <ion-toolbar>
-    <ion-title>login</ion-title>
+    <ion-title>用户登录</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
+  <div class="login-box">
+    <div class="login">
+      <img src="./assets/logo_login.png" class="login-logo">
+      <form #loginForm="ngForm" class="login-form">
+        <div class="login-input">
+          <img src="./assets/icon-phone.png" class="login-input-img">
+          <input [(ngModel)]="user.mobile" class="login-input-content" name="mobile" type="text" #mobile required placeholder="手机号"
+                 (ionBlur)="loseFocus()" (ionFocus)="getFocus()" />
+        </div>
+        <div class="login-input">
+          <img src="./assets/icon-password.png" class="login-input-img">
+          <input [(ngModel)]="user.password" class="login-input-content" name="password" type="password" #password required placeholder="密  码"
+                 (ionBlur)="loseFocus()" (ionFocus)="getFocus()" />
+        </div>
+        <div class="mui-input-row mui-checkbox mui-left" style="margin-bottom: 15px;">
+          <input [(ngModel)]="user.remember" name="checkbox" class="jizhu-password" value="1" type="checkbox" checked="true" style="margin-left:10px;width:17px;height:17px;vertical-align:middle">
+          <label style="padding-left:5px;font-family:'微软雅黑';" class="jizhu-password-label">记住密码</label>
+        </div>
 
+        <button type="button" (click)="forgetPassword()" class="login-btn" style="width: 48%;float: left;background-color: #b3bdcf;border-color: #b3bdcf;">忘记密码</button>
+
+        <button type="button" (click)="login()" class="login-btn" style="width: 48%;float: right;">登&nbsp;&nbsp;录</button>
+
+      </form>
+
+      <div class="introduce">
+        登陆手机号为组织部统一配发的手机号，初始密码为000000，使用过程中如有任何问题请联系人事处。
+      </div>
+
+    </div>
+
+
+  </div>
 </ion-content>
\ No newline at end of file

src/app/tabs/login/login.page.scss

+.searchToolBar{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: left;
+  box-sizing: border-box;
+}
+
+.login-box{
+
+  background-color: #f0f1f2;
+  height: 100%
+}
+
+.login{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.login-logo{
+  width: 100px;
+  height: 70px;
+  margin: 20px 0;
+}
+
+.login-form{
+  width: 100%;
+  padding: 0 30px;
+}
+
+.login-input{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: left;
+  box-sizing: border-box;
+  background-color: #feffff;
+  width: 100%;
+  border-radius: 5px;
+  margin-bottom: 20px;
+  padding: 7px 3px;
+  font-size: 16px;
+}
+
+.login-input-img{
+  width: 30px;
+  height: 30px;
+}
+
+.login-input-content{
+  // background-color: #feffff;
+  border: 0;
+  width: 100%;
+}
+
+.login-bt{
+  background-color: #488afa;
+  font-size: 20px;
+}
+
+// .introduce-box{
+//     background-color: #f4f5f6;
+//     width: 100%;
+//     position: absolute;
+//     bottom: 0;
+//     padding: 5px 0;
+// }
+
+// .introduce{
+//     margin: 0 0 0 40px;
+//     font-size: 16px;
+//     color: #7e7f80;
+// }
+.introduce{
+  margin: 20px 30px 0 30px;
+  font-size: 14px;
+  color: #7e7f80;
+  // text-indent:2em;
+}
+
+.login-btn{
+  display: block;
+  width: 100%;
+  margin-bottom: 10px;
+  padding: 11px 0;
+  color: #fff;
+  border: 1px solid #4a89f9;
+  background-color: #4a89f9;
+  font-size: 18px;
+  font-weight: 600;
+  position: relative;
+  text-align: center;
+  white-space: nowrap;
+  border-radius: 3px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+
+.jizhu-password{
+  color: #4a89f9;
+  font-family: Muiicons;
+  font-size: 28px;
+  font-weight: 400;
+  line-height: 1;
+  text-decoration: none;
+
+  border-radius: 0;
+  background: 0 0;
+  -webkit-font-smoothing: antialiased;
+}
+
+.back-btn{
+  width: 30px;
+  height: 30px;
+}
\ No newline at end of file

src/app/tabs/login/login.page.ts

 import { Component, OnInit } from '@angular/core';
+import {Router} from "@angular/router";
+import {Storage} from "@ionic/storage";
+import {LoadingController} from "@ionic/angular";
+import {TabsService} from "../tabs.service";
+import {CommonService} from "../../../provide/common.service";
 
 @Component({
   selector: 'app-login',
   templateUrl: './login.page.html',
   styleUrls: ['./login.page.scss'],
 })
-export class LoginPage implements OnInit {
+export class LoginPage {
+  submitted: boolean = false;								//表单是否已经提交
+  tipFlag: boolean = false;            // 输入时隐藏输入框以下信息
+  user = {
+    userid: '',							//登录数据
+    mobile: '',
+    password: '',
+    remember:true
+  };
+  tabflag:any;
+  constructor(
+      public router:Router,
+              public storage: Storage,
+              private loadingCtrl: LoadingController,
+              public commonSer:CommonService,
+              private tabSer:TabsService,) {
 
-  constructor() { }
+  }
+
+  ionViewDidLoad(){
+
+  }
+
+  ionViewDidEnter() {
+    //默认显示
+    this.storage.get("userLoginInfo").then((value)=>{
+      if(value!=null && value != ''){
+        if( value.remember ){
+          this.user = value;
+        }
+      }
+    });
+  }
+
+  //输入框获取焦点：隐藏，失去焦点：显示
+  getFocus() {
+    this.tipFlag = true;
+  }
+
+  loseFocus() {
+    this.tipFlag = false;
+  }
 
-  ngOnInit() {
+  async login() {
+
+    //验证手机号和密码是否输入
+    if(this.user.mobile == null || this.user.mobile == ''){
+      this.commonSer.toast('请输入手机号！');
+      return ;
+    }
+    if(this.user.password == null || this.user.password == ''){
+      this.commonSer.toast('请输入密码！');
+      return ;
     }
 
+    let loading = await this.loadingCtrl.create({
+      message: '正在登录...',
+    });
+    loading.present();
+    this.tabSer.loginpost(this.user).subscribe(
+        (res)=>{
+          loading.dismiss();
+          this.submitted = true;
+          if(res.code == '200'){
+            this.storage.set('user', res.data);
+            this.user.userid = res.data.id;
+            this.storage.set('userLoginInfo',this.user);
+            this.router.navigate(['/tabs/home']);
+          }else{
+            this.commonSer.alert('手机号或密码错误！');
+          }
+        },
+        (err)=>{
+          if (loading) loading.dismiss();
+          this.commonSer.alert('系统错误！');
+        }
+    )
+  }
+  //忘记密码
+  forgetPassword():void{
+    this.commonSer.alert('若忘记密码，请与人事处联系。');
+  }
 }

src/app/tabs/serve/serve.module.ts

-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { Routes, RouterModule } from '@angular/router';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {Routes, RouterModule} from '@angular/router';
 
-import { IonicModule } from '@ionic/angular';
+import {IonicModule} from '@ionic/angular';
 
-import { ServePage } from './serve.page';
+import {ServePage} from './serve.page';
+import {CalendarModule} from "ion2-calendar";
 
 const routes: Routes = [
     {
@@ -19,8 +20,10 @@ const routes: Routes = [
         CommonModule,
         FormsModule,
         IonicModule,
+        CalendarModule,
         RouterModule.forChild(routes)
     ],
     declarations: [ServePage]
 })
-export class ServePageModule {}
+export class ServePageModule {
+}

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

 <ion-header>
-  <ion-toolbar>
-    <ion-title>serve</ion-title>
+  <ion-toolbar >
+    <ion-button>
+      <img class="logo" src="./assets/logo.png">
+    </ion-button>
+    <ion-button slot="end">
+      <ion-icon name="mail"></ion-icon>
+      <span class="num">2</span>
+    </ion-button>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
+  <div style="height: 160px">
+    <ion-slides [options]="slideOpts" pager="true" loop="true" autoplay="2000" speed="1500">
+      <ion-slide style="height:160px;width: 100%;position: relative" *ngFor="let item of slidersItems">
+        <img src="{{picture+item.pictureId}}" class="slide-image" (click)="go(item)">
+        <p class="slides-title">{{item.title}}</p>
+      </ion-slide>
+    </ion-slides>
+  </div>
 
+  <div class="item3" style="padding-top: 0px;">
+    <div class="item3-2" style="background-color:#f8f8f8;" (click)="gotoNotice()">
+      <div class="card3" style="width: 15%;">
+        <span *ngIf="hasNew.message == 1" class="img-tips"></span>
+        <img src="./assets/serve/icon-mail.png" >
+      </div>
+      <div class="card3" style="width: 75%;">
+        <div class="card3-item" *ngFor="let item of noticeList;">
+          <span *ngIf="noticeTips > 0" class="tips"></span>
+          <span class="color-996">{{item.title}}</span>
+          {{item.content}}
+        </div>
+      </div>
+      <div class="card3" style="width: 10%;color: #999999;font-size: 1.6rem">
+        <ion-icon name="ios-arrow-forward" class="icon-right"></ion-icon>
+      </div>
+    </div>
+  </div>
+
+
+  <div class="item2" style="padding: 0px;">
+    <div class="item2-2">
+      <div class="card" (click)="goTo('ActivityListPage')">
+        <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">
+      </div>
+      <div class="card" (click)="goTo('AnnouncementPage')">
+        <img src="./assets/serve/icon-tz.png" alt="">
+        <label class="label2-2">通知公告</label>
+        <img class="new-logo" *ngIf="hasNew.notice==1" src="./assets/imgs/new.png">
+      </div>
+      <div class="card" (click)="goOutGoingReportAboutAll()">
+        <img src="./assets/serve/icon-lhbb.png" alt="">
+        <label class="label2-2">离沪报备</label>
+        <img class="new-logo" *ngIf="hasNew.premanager==1" src="./assets/imgs/new.png">
+      </div>
+      <div class="card" (click)="goTo('DutyPage')">
+        <img src="./assets/serve/icon-zb.png" alt="">
+        <label class="label2-2">值班情况</label>
+      </div>
+      <ng-container *ngIf="role == 2 || role == 1 || role == 3">
+        <div class="card" (click)="goTo('ActivityTrackPage')">
+          <img src="./assets/serve/icon-hdgz.png" alt="">
+          <label class="label2-2">活动跟踪</label>
+        </div>
+        <div class="card" (click)="goTo('ReportTrackPage')">
+          <img src="./assets/serve/icon-bbgz.png" alt="">
+          <label class="label2-2">报备跟踪</label>
+        </div>
+      </ng-container>
+      <div class="card" (click)="goTo('SurveryPage')">
+        <img src="./assets/serve/icon-wjtc.png" alt="">
+        <label class="label2-2 more2-2">问卷调查</label>
+      </div>
+      <div class="card" (click)="goTo('LearningListPage')">
+        <img src="./assets/serve/icon-xxcs.png" alt="">
+        <label class="label2-2 more2-2 main-color">学习测试</label>
+        <img class="new-logo" *ngIf="hasNew.test==1" src="./assets/imgs/new.png">
+      </div>
+      <ng-container *ngIf="role == 3">
+        <div class="card" (click)="goTo('LearnManagePage')">
+          <img src="./assets/serve/icon-ccgl.png" alt="">
+          <label class="label2-2 more2-2">测试管理</label>
+        </div>
+      </ng-container>
+      <div class="card" (click)="goTo('MoreAppPage')">
+        <img src="./assets/serve/icon-more.png" alt="">
+        <label class="label2-2 more2-2">更多应用</label>
+      </div>
+    </div>
+  </div>
+  <div class="calen-tab">
+    日程表:<span class="calen1">休息日</span> <span class="calen2">参加活动</span>
+    <span class="calen3">值班</span><span class="calen4">离沪</span>
+  </div>
+  <ion-calendar #calendar>
+
+  </ion-calendar>
 </ion-content>

src/app/tabs/serve/serve.page.scss

+ion-button{
+  position: relative;
+  ion-icon{
+    font-size: 2.5rem;
+  }
+  .num{
+    position: absolute;
+    top: 3px;
+    right: 11px;
+    background-color: #fff;
+    padding: 1px 5px;
+    color: #e12724;
+    font-size: .8rem;
+    border-radius: 100px;
+  }
+}
+
+ion-slides{
+  width: 100%;
+  height: 160px;
+}
+.slide-image{
+  width: 100%;
+  height: 160px;
+}
+.swiper-container{
+  height: 160px;
+  width: 100%;
+}
+
+.item2,.item3,.item4,.item5{
+  background-color: #f1f1f1;
+  padding: 5px 0px;
+}
+
+.item2-1,.item3-1,.item4-1,.item5-1{
+  font-size: 10px;
+  background-color: #ffffff;
+  padding-top: 15px;
+
+}
+
+.icon2{
+  color: aqua;
+  margin-left: 6px;
+  font-size: 16px;
+}
+.common_applications{
+  color: #666666;
+  font-size: 16px;
+}
+
+.item2-2,.item3-2,.item4-2,.item5-2{
+  background-color: #ffffff;
+  //box-shadow:0px 5px 5px #b5cef7;
+  padding-bottom: 8px;
+}
+
+.item2-2,.item3-2{
+  display: flex;
+  flex-direction: row;
+  flex-wrap:wrap;
+  align-content: space-between;
+  justify-content: left;
+  box-sizing: border-box;
+}
+.card3-item{
+  margin: 3px 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width:100%;
+}
+.card{
+  height: 100%;
+  width: 20%;
+  display: inline-flex;
+  flex-direction: column;
+  // flex-direction: center;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  margin:2.5%;
+  position: relative;
+}
+.card img:first-child{
+  width: 50%;
+}
+.icon2-2{
+  color: #488afe;
+  font-size: 40px;
+}
+
+.label2-2{
+  color: #666666
+}
+
+.new-logo{
+  position: absolute;
+  width: 25px;
+  height: 12px;
+  top: -3px;
+  right: -1px;
+}
+
+.icon3{
+  color: #f3a035;
+  margin-left: 6px;
+  font-size: 16px;
+}
+
+.daily_reminder{
+  color: #666666;
+  font-size: 16px;
+}
+
+.more{
+  float: right;
+  color: #666666;
+  margin-right: 10px;
+}
+
+.item3-2{
+  padding-top: 8px;
+}
+
+.card3{
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  box-sizing: border-box;
+  padding:3px;
+  position: relative;
+  font-size: 1.2rem;
+}
+.img-tips{
+  position: absolute;
+  padding: 4px;
+  background-color: red;
+  border-radius: 50%;
+  right: 10px;
+  top: 12px;
+}
+.label3-1{
+  font-size: 20px;
+  color: #f26d3a;
+}
+.color-996{
+  color: #fb9662;
+}
+.tips{
+  display: inline-block;
+  padding: 2px;
+  background-color: #fb9662;
+  border-radius: 50%;
+  vertical-align: middle;
+  margin-right: 5px;
+}
+
+.label3-2{
+  font-size: 12px;
+  color: #666666;
+}
+
+.duty_arrangements{
+  color: #666666;
+  font-size: 16px;
+}
+
+.icon4{
+  color: #46b553;
+  margin-left: 6px;
+  font-size: 16px;
+}
+
+.item4-title{
+  text-align: center;
+}
+
+.group{
+  text-align: center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.card4{
+  height: 100%;
+  // width: 66px;
+  display: inline-flex;
+  flex-direction: column;
+  // flex-direction: center;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  margin: 0 10px;
+  // background-color: #e0e9fa;
+  padding: 8px 3px;
+}
+
+.card4-2{
+  line-height: 20px;
+  width: 20px;
+  height: 20px;
+  border-radius: 20px;
+}
+
+.selected{
+  background-color: #5c91ed;
+}
+
+.operation_record{
+  color: #666666;
+  font-size: 16px;
+}
+
+.icon5{
+  color: #f57746;
+  margin-left: 6px;
+  font-size: 16px;
+}
+
+.card5-1{
+  font-size: 13px;
+  margin-left: 10px;
+}
+
+.card5-1-1{
+  color: #5c91ed;
+}
+
+.time{
+  font-size: 8px;
+  color: #666666;
+  float: right;
+  margin-right: 10px;
+}
+
+.header-img{
+  width: 100%;
+  height: 25%;
+}
+
+//tej
+.common-menu{
+  background-color:#6299fa;
+  width: 55px;
+  height: 55px;
+  border-radius:5px;
+  margin-bottom:5px;
+  text-align: center;
+  color: #fff;
+  font-weight: bolder;
+  font-size: 16px;
+  // width:58px;
+  // height:58px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.common-menu-count{
+  font-size: 13px;
+  color:#fff;
+  background-color: #f36b35;
+  width: 24px;
+  height: 24px;
+  border-radius:50%;
+  position: absolute;
+  text-align: center;
+  line-height:24px;
+  left:43px;
+  top:-6px;
+}
+//
+.cover{
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 100;
+}
+
+.wait{
+  width: 80%;
+  margin: 100px 10% 0 10%;
+}
+
+.time_home{
+  font-size: 10px;
+  color: #666666;
+  float: right;
+  margin-right: 10px;
+}
+.slides-title{
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  font-size: 1.5rem;
+  color: #fff;
+  width: 100%;
+  background-color: rgba(153,153,153,0.5);
+  text-align: left;
+  padding: 3px 15px;
+}
+.calen-tab{
+  margin: 16px 16px 0px 16px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #dddddd;
+  font-size: 1.3rem;
+}
+.calen1,
+.calen2,
+.calen3,
+.calen4{
+  position: relative;
+  margin-left:1.8rem;
+}
+.calen1::after,
+.calen2::after,
+.calen3::after,
+.calen4::after{
+  content: '';
+  position: absolute;
+  top: 23%;
+  left: -13px;
+  width:8px;
+  height:8px;
+  border-radius:50%;
+}
+.calen1::after{
+  border:1px solid #ddd;
+}
+.calen2::after{
+  background-color: #41afef;
+}
+.calen3::after{
+  background-color: #f53d3d;
+}
+.calen4::after{
+  background-color: #f7ce53;
+}
+ion-calendar-month button.days-btn.dayOff1{
+  border: 1px solid #dddddd;
+}
+ion-calendar-month button.days-btn.dayOff2{
+  background-color: #41afef;
+  border: 1px solid #41afef;
+}
+ion-calendar-month button.days-btn.dayOff3{
+  background-color: #f53d3d;
+  border: 1px solid #f53d3d;
+}
+ion-calendar-month button.days-btn.dayOff4{
+  background-color: #f7ce53;
+  border: 1px solid #f7ce53;
+}
+ion-calendar-month .primary .days .dayOff2 p,
+ion-calendar-month .primary .days .dayOff3 p,
+ion-calendar-month .primary .days .dayOff4 p{
+  color: white;
+}
+ion-calendar-month .primary .dayOff1.today p{
+  color: #333333;
+}
+button[disabled]{
+  opacity: 1;
+}
\ No newline at end of file

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

-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {IonSlides} from "@ionic/angular";
+import {CommonService} from "../../../provide/common.service";
+import {Badge} from "@ionic-native/badge/ngx";
+import {CalendarComponentOptions,DayConfig} from "ion2-calendar";
+import {Storage} from "@ionic/storage";
+import {TabsService} from "../tabs.service";
+import {AppService,AppGlobal} from "../../../http/http.service";
+import {monthCh,weekDay} from "../../../main";
+import {Router} from "@angular/router";
 
 @Component({
   selector: 'app-serve',
@@ -7,9 +16,337 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ServePage implements OnInit {
 
-  constructor() { }
+  slideOpts = {
+    initialSlide: 1,
+    speed: 400
+  };
+  slidersItems = [];
+  hasNew = {
+    activity:0,
+    notice:0,
+    premanager:0,
+    message:0,
+    test:0,
+  };
 
-  ngOnInit() {
+  //日历
+  date: string;
+  type: 'string';
+
+  optionsMulti: CalendarComponentOptions;
+  newArr: DayConfig[] = [];
+
+  //未读通知
+  NoticeNotreadCount = '0';
+  //尚未报备
+  PremanagerNotdoCount = '0';
+  //是否显示正在开发中
+  isWait: boolean = false;
+
+  noticeList = [];
+
+  picture: string = AppGlobal.picture;
+
+  operations: Array<string>;
+
+  //当前年份
+  year;
+  //当前月份
+  month;
+  //当前第几周
+  weekNo;
+
+  noticeTips;
+  role;
+
+  constructor(public commonSer:CommonService,public router:Router,
+              public appService: AppService,  public storage: Storage,
+              public badge: Badge, public tabsSer: TabsService) {
+
+  }
+
+  ngOnInit(): void {
+    this.appService.ObserverHttpGet("/wisdomgroup/modules/message/findAllActivityForAppWithXQ", null).subscribe((res: Response) => {
+      // this.noticeList = res.json().slice(0, 2);
+    }, error => {
+      this.commonSer.alert('系统错误！');
+    });
+  }
+
+  ionViewDidEnter() {
+    //获取权限
+    this.getRole();
+    //获取消息数量
+    this.getNewCount();
+    //获取日历
+    this.getCalendar();
+  }
+
+  ionViewWillEnter() {
+    this.slidersItems = [];
+    this.getHasNew();
+    //初始化日期
+    this.appService.ObserverHttpGet("/wisdomgroup/modules/common/file/getBanner", {}).subscribe((res: Response) => {
+      // this.slidersItems = res.json();
+    }, error => {
+    })
+
+  }
+
+  ionViewDidLeave() {
+    this.newArr = [];
+    // if (this.slides) {
+    //   this.slides.stopAutoplay();
+    // }
+  }
+
+
+  //获取权限
+  getRole() {
+    this.tabsSer.getRoles().subscribe(
+        (res) => {
+          this.role = res
+        },
+        error => {
+          this.commonSer.alert('系统错误！');
+        }
+    )
+  }
+
+  wait() {
+    this.isWait = true;
+  }
+
+  cancleWait() {
+    this.isWait = false;
+  }
+
+
+  go(item) {
+    if (item.type == 1) {
+      this.getActivity(item.id);
+    } else if (item.type == 2) {
+      this.getPremanager(item.id);
+    } else if (item.type == 3) {
+      // this.navCtrl.push("AnnouncementViewPage", {
+      //   id: item.id
+      // });
+    }
+  }
+
+  //获取活动ById
+  getActivity(id) {
+    this.appService.ObserverHttpPost("/wisdomgroup/modules/activity/appFindById", {id: id})
+        .toPromise()
+        .then(res => {
+          let activity = res.json();
+          // this.router.navigate([])
+          // this.navCtrl.push('ActivityDetailPage', {id: activity.id});
+        })
+        .catch(error => {
+        });
+  }
+
+
+  //获取报备
+  getPremanager(id) {
+    this.storage.remove("temp_userpre");
+    this.storage.remove("managerId");
+    this.storage.remove("city");
+    this.storage.remove("cityList");
+    this.storage.remove("person");
+    this.appService.ObserverHttpPost("/wisdomgroup/modules/premanager/findById", {id: id}).subscribe((res) => {
+      let premanager = res.json();
+      this.storage.set("premanager", premanager);
+      // this.navCtrl.push("OutGoingReportEditPage");
+    })
+  }
+
+  //消息通知
+  gotoNotice() {
+    // this.navCtrl.setRoot(NoticePage);
+    // this.navCtrl.parent.select(2);
+  }
+
+  //外出报备跳转
+  goOutGoingReportAboutAll() {
+    // this.navCtrl.push("OutGoingReportPage", {
+    //   type: 1
+    // });
+  }
+
+  //前往
+  goTo(page) {
+    // this.navCtrl.push(page);
   }
 
+
+  /**
+   * 获取是否有新的信息
+   */
+  getHasNew(){
+    //获取是否有新活动
+    this.tabsSer.hasNewActivity().subscribe(
+        (res)=>{
+          this.hasNew.activity = res;
+        }
+    )
+
+    //获取是否有新通知
+    this.tabsSer.hasNewNotice().subscribe(
+        (res)=>{
+          this.hasNew.notice = res;
+        }
+    )
+
+    //获取是否有新通知
+    this.tabsSer.hasNewMessage().subscribe(
+        (res)=>{
+          this.hasNew.message = res;
+        }
+    )
+
+    //获取是否有新报备
+    this.tabsSer.hasNewPremanager().subscribe(
+        (res)=>{
+          this.hasNew.premanager = res;
+        }
+    )
+
+    //获取是否有新问卷
+    this.tabsSer.hasNewTest().subscribe(
+        (res)=>{
+          this.hasNew.test = res;
+        }
+    )
+  }
+
+  //获取所有未读消息的数量--->设置角标
+  getNewCount() {
+    this.appService.ObserverHttpGetData('/wisdomgroup/modules/activity/hasNewCount', null)
+        .subscribe((res) => {
+          let data = Number(res.json());
+          this.noticeTips = data;
+          console.log(this.noticeTips)
+          if (data > 0) {
+            this.badge.set(data);
+          } else {
+            this.badge.clear();
+          }
+        })
+  }
+
+  //日历
+
+  getCalendar() {
+    this.newArr = [];
+    let date = new Date();
+    let year = date.getFullYear();
+    let month = date.getMonth() + 1;
+
+    //2.参加活动日期
+    this.tabsSer.appOrderCal().subscribe(
+        (order)=>{
+          order.forEach(event => {
+            this.newArr.push({
+              date: new Date(event.batch.batchGoDate),
+              disable: true,
+              cssClass: 'dayOff2'
+            })
+          });
+
+          this.tabsSer.appPreCal().subscribe(
+              (pre)=>{
+                pre.forEach(event => {
+                  this.newArr.push({
+                    date: new Date(event.formshTime),
+                    disable: true,
+                    cssClass: 'dayOff4'
+                  })
+                });
+
+                this.loadEvent(year, month);
+              }
+          )
+        }
+    );
+  }
+
+  loadEvent(year, month) {
+    //5.获取每月值班信息
+    const data = {
+      date: year + '/' + month + '/01'
+    };
+    this.tabsSer.getMyScheduleOnMonth(data).subscribe(
+        (schedule)=>{
+          for (let i = 0; i < schedule.length; i++) {
+            const ev = {
+              date: new Date(schedule[i].dutyDate),
+              disable: true,
+              cssClass: 'dayOff3'
+            };
+            this.newArr.push(ev);
+          }
+          this.tabsSer.getFestivalAboutMonth(data).subscribe(
+              (festival)=>{
+                festival.forEach(event => {
+                  const data = {
+                    date: new Date(event.date),
+                    disable: true,
+                    cssClass: 'dayOff1'
+                  };
+                  this.newArr.push(data);
+                });
+                this.setCalendar(year, month);
+              }
+          )
+        }
+    )
+
+  }
+
+  setCalendar(year, month) {
+    let date = new Date();
+    //4.每月的周末
+    let d = new Date(year, month, 0).getDate();
+    for (let i = 1; i < d + 1; i++) {
+      date.setFullYear(year, month - 1, i);
+      let day = date.getDay();
+      if (day == 6 || day == 0) {
+        const data = {
+          date: new Date(year, month - 1, i),
+          disable: true,
+          cssClass: 'dayOff1'
+        };
+        this.newArr.push(data);
+      }
+    }
+
+    this.optionsMulti = {
+      pickMode: 'multi',
+      monthFormat: 'YYYY 年 MM 月 ',
+      weekdays: weekDay,
+      monthPickerFormat: monthCh,
+      weekStart: 0,
+      disableWeeks: [0, 1, 2, 3, 4, 5, 6],
+      daysConfig: this.newArr
+    };
+  }
+
+  onChange(e) {
+  }
+
+  //月份改变
+  monChange(e) {
+    this.loadEvent(e.newMonth.years, e.newMonth.months);
+  }
+
+}
+
+//定义星期实体
+export class Week {
+  id: number;
+  title: string;
+  date: number;
+  isToday: boolean = false;
 }

src/app/tabs/tabs.service.ts

+import {Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {Http} from "@angular/http";
+import {Observable} from "rxjs";
+import {environment} from "../../environments/environment";
+import {CommonService} from "../../provide/common.service";
+
+@Injectable()
+export class TabsService{
+    constructor(
+        private http:HttpClient,   //该请求 将结果转为json
+        private commonSer:CommonService,
+        private https:Http,    //该请求不转json
+    ){}
+
+    loginpost(data): Observable<any>{
+        return this.http.post(environment.domain+'/wisdomgroup/app/loginpost?'+this.commonSer.toQuery(data),null)
+    }
+
+    //获取权限
+    getRoles(): Observable<any>{
+        return this.http.get(environment.domain +'/wisdomgroup/app/getRoles', );
+    }
+
+    //获取参加活动的日期
+    appOrderCal(): Observable<any>{
+        return this.http.get(environment.domain +'/wisdomgroup/modules/order/appOrderCal');
+    }
+
+    //获取离沪日期
+    appPreCal(): Observable<any>{
+        return this.http.get(environment.domain +'/wisdomgroup/modules/userpre/appPreCal');
+    }
+
+    //每月值班信息
+    getMyScheduleOnMonth(data): Observable<any>{
+        return this.http.get(environment.domain +'/wisdomgroup/schedule/app/getMyScheduleOnMonth?'+this.commonSer.toQuery(data));
+    }
+
+    //获取节假日
+    getFestivalAboutMonth(data): Observable<any>{
+        return this.http.get(environment.domain +'/wisdomgroup/workCalendar/getFestivalAboutMonth?'+this.commonSer.toQuery(data));
+    }
+
+    //获取是否有新的活动
+    hasNewActivity(): Observable<any>{
+        return this.http.get(environment.domain +'/wisdomgroup/modules/activity/hasNewActivity');
+    }
+
+    //获取是否有新的通知
+    hasNewNotice(): Observable<any>{
+        return this.http.get(environment.domain +'/wisdomgroup/modules/notice/hasNewNotice');
+    }
+
+    //获取是否有新信息
+    hasNewMessage(): Observable<any>{
+        return this.http.get(environment.domain +'/wisdomgroup/modules/message/hasNewMessage');
+    }
+
+    //获取是否有新信息
+    hasNewPremanager(): Observable<any>{
+        return this.http.get(environment.domain +'/wisdomgroup/modules/premanager/hasNewPremanager');
+    }
+
+    //获取是否有新的问卷
+    hasNewTest(): Observable<any>{
+        return this.http.get(environment.domain +'/wisdomgroup/modules/learnTest/hasNewTest');
+    }
+
+    //问卷已读
+    testAddRecodings(): Observable<any>{
+        return this.https.get(environment.domain +'/wisdomgroup/modules/learnTest/addRecodings');
+    }
+
+    //活动已读
+    activityAddRecodings(): Observable<any>{
+        return this.https.get(environment.domain +'/wisdomgroup/modules/activity/addRecodings');
+    }
+
+    //下载文件
+    downFile(data): Observable<any>{
+        return this.http.get(environment.domain +'/wisdomgroup/modules/common/file/download/'+data,{responseType: 'blob'});
+    }
+
+}
\ No newline at end of file

src/http/http.service.ts

@@ -37,10 +37,7 @@ export class AppGlobal {
 
 @Injectable()
 export class AppService {
-    constructor(public http: Http,
-                public loadingCtrl: LoadingController,
-                private alertCtrl: AlertController,
-                private toastCtrl: ToastController,) {
+    constructor(public http: Http) {
     }
 
     // 对参数进行编码

src/main.ts

@@ -10,3 +10,11 @@ if (environment.production) {
 
 platformBrowserDynamic().bootstrapModule(AppModule)
   .catch(err => console.log(err));
+
+export const monthCh = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
+export const weekDay = ['日', '一', '二', '三', '四', '五', '六'];
+export const message = {
+  duration:2000,
+  cssClass:'text-center',
+  position:'middle',
+};
\ No newline at end of file

src/theme/app.scss

@@ -4,8 +4,11 @@ ion-toolbar{
     --background:#e12724;
   }
 }
+ion-title{
+  --color:#fff;
+}
 html{
-  font-size: 16px;
+  font-size: 12px;
 }
 /** 清除内外边距 **/
 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */