日历

angular.json

@@ -29,6 +29,7 @@
             "styles": [ // 引入全局样式，构建时会打包进来，常用于第三方库引入的样式
               "src/assets/font/iconfont.css",
               "src/assets/weui/weui.css",
+              "node_modules/ng-zorro-antd-mobile/src/ng-zorro-antd-mobile.min.css",
               "src/styles.scss"
             ],
             "scripts": [], // 引入全局脚步，构建时会打包进来，常用于第三方库引入的脚本

package.json

@@ -24,6 +24,7 @@
     "buffer": "^5.4.3",
     "core-js": "^2.5.4",
     "html2canvas": "^1.0.0-rc.5",
+    "ng-zorro-antd-mobile": "^0.12.5",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",
     "uuid": "^3.3.3",
@@ -50,4 +51,4 @@
     "tslint": "~5.11.0",
     "typescript": "~3.2.2"
   }
-}
\ No newline at end of file
+}

src/app/app.module.ts

@@ -13,6 +13,7 @@ import { DatePipe } from "@angular/common";
 import { SafeHtmlPipe } from './safe-html.pipe';
 import { LocalStorage } from './domain/local.storage';
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { NgZorroAntdMobileModule } from 'ng-zorro-antd-mobile';
 
 @NgModule({
   declarations: [
@@ -27,7 +28,8 @@ import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
     LifeCommonModule,
     HttpClientModule,
     AppRoutingModule,
-    BrowserAnimationsModule
+    BrowserAnimationsModule,
+    NgZorroAntdMobileModule
   ],
   providers: [DatePipe, httpInterceptorProviders, LocalStorage],
   bootstrap: [AppComponent]

src/app/common/life-common.service.ts

@@ -9,10 +9,11 @@ declare var wx: any;
 export class LifeCommonService {
   private shareStatusSource = new Subject<string>();
   shareStatus$ = this.shareStatusSource.asObservable();
-
+  weekArr: Array<any>;
   constructor(private datePipe: DatePipe,
     private titleService: Title,
     private metaService: Meta) {
+    this.weekArr = [{ week: '', day: '' }, { week: '', day: '' }, { week: '', day: '' }, { week: '', day: '' }, { week: '', day: '' }, { week: '', day: '' }, { week: '', day: '' }]
   }
 
   // 向订阅者发布分享结果
@@ -229,4 +230,61 @@ export class LifeCommonService {
     const newStr = str.substr(0, 4) + '年' + str.substr(4, 2) + '月';
     return newStr;
   }
+
+  //获取本周日期
+  makeDate() {
+    var date = new Date();
+    var month = date.getMonth();
+    var week = date.getDay();
+    var month = month + 1;
+    var day = date.getDate();
+    // 本周内今天的前几天的数量
+    var leftNum = week - 1;
+    // 本周内今天的后几天的数量
+    var rightNum = 7 - week;
+    // 本周内今天的前几天
+    for (var i = 0; i < leftNum; i++) {
+      this.weekArr[i].week = week - (week - i) + 1;
+      if (i == 0) {
+        this.weekArr[i].day = day - week;
+      } else {
+        this.weekArr[i].day = day - (week - i) + 1;
+      }
+    }
+    // 本周内今天的后几天
+    for (var i = 0; i < rightNum; i++) {
+      this.weekArr[i + week].week = week + i + 1;
+      this.weekArr[i + week].day = day + i + 1;
+    }
+    // 今天
+    this.weekArr[week - 1].week = week;
+    this.weekArr[week - 1].day = day;
+    this.weekArr[week - 1].selected = true;
+    return this.weekArr;
+  }
+
+  //获取星期
+  getWeek(str){
+    if(str==1){
+      return '周一';
+    }
+    if(str ==2){
+      return '周二';
+    }
+    if(str ==3){
+      return '周三';
+    }
+    if(str==4){
+      return '周四';
+    }
+    if(str ==5){
+      return '周五';
+    }
+    if(str==6){
+      return '周六';
+    }
+    if(str ==7){
+      return '周日';
+    }
+  }
 }

src/app/my/my-center-home/my-center-home.component.html

@@ -36,8 +36,9 @@
           <li *ngFor="let item of performanceList" (click)="rank(item.time,1,2);rank(item.time,2,2)"
             [ngClass]="{selected:performanceSelectedFlag==item.time}">
             <div style="position: relative;">
-              <h3>{{item.name}}
-                <i class="line" *ngIf="performanceSelectedFlag==item.time" [ngStyle]="{'left':leftWidth}"></i>
+              <h3>
+                <span>{{item.name}}</span>
+                <!-- <i class="line" *ngIf="performanceSelectedFlag==item.time" [ngStyle]="{'left':leftWidth}"></i> -->
               </h3>
             </div>
           </li>
@@ -97,7 +98,7 @@
           </ul>
         </div>
       </div>
-      <div class="part2_item todo">
+      <div class="part2_item todo" routerLink="todo">
         <div>
           <span>今日任务</span>
           <img style="width: 50%;" src="assets/images/todo_icon.png">
@@ -109,7 +110,6 @@
       </div>
     </div>
   </div>
-
   <!--body-->
   <div class="weui-panel__bd">
     <div class="tool_wrapper" *ngFor="let menuItem of menuLists;">

src/app/my/my-center-home/my-center-home.component.scss

@@ -137,15 +137,20 @@ ul,ol{
           li.selected{
             h3{
               font-weight: bold;
+              font-size: 20px;
+              span{
+                border-bottom: 2px #fff solid;
+                padding-bottom: 3px;
+              }
             }
-            .line{
-              width: 20px;
-              height: 3px;
-              display: inline-block;
-              position: absolute;
-              bottom: 2px;
-              background: #ff002a;
-            }
+            // .line{
+            //   width: 20px;
+            //   height: 3px;
+            //   display: inline-block;
+            //   position: absolute;
+            //   bottom: 2px;
+            //   background: #ff002a;
+            // }
           }
         }
         .detail{
@@ -199,7 +204,7 @@ ul,ol{
     }
     .part2{
       display: flex;
-      margin-bottom: 20px;
+      margin-bottom: 10px;
       .part2_item{
         width: 48%;
         display: flex;

src/app/my/my-center-home/my-center-home.component.ts

@@ -51,8 +51,8 @@ export class MyCenterHomeComponent implements OnInit, AfterViewInit {
     this.lifeCustomerInfo = JSON.parse(localStorage.getItem('lifeCustomerInfo')) ? JSON.parse(localStorage.getItem('lifeCustomerInfo')) : null;
     this.announcementQuery();
     this.performanceList = [
-      { name: '本月', time: 1 },
-      { name: '季度', time: 3 },
+      { name: `${this.lifeCommonService.dateFormat(new Date, ('M'))}月`, time: 1 },
+      { name: `${this.getQuarter(this.lifeCommonService.dateFormat(new Date, ('M')))}`, time: 3 },
       { name: '本年度', time: 2 }
     ]
     //初始化调本月线上 保费+ 本月线下保费
@@ -316,4 +316,19 @@ export class MyCenterHomeComponent implements OnInit, AfterViewInit {
     })
   }
 
+  //获取季度
+  getQuarter(quarter) {
+    if (quarter == '1' || quarter == '2' || quarter == '3') {
+      return '第一季度';
+    }
+    if (quarter == '4' || quarter == '5' || quarter == '6') {
+      return '第二季度';
+    }
+    if (quarter == '7' || quarter == '8' || quarter == '9') {
+      return '第三季度';
+    }
+    if (quarter == '10' || quarter == '11' || quarter == '12') {
+      return '第四季度';
+    }
+  }
 }

src/app/my/my-routing.module.ts

@@ -25,6 +25,8 @@ import { ScoreDetailsComponent } from './score-details/score-details.component';
 import { BusinessCardComponent } from "./business-card/business-card.component";
 import { OrderDetailComponent } from './order-detail/order-detail.component';
 import { SalaryComponent } from './salary/salary.component';
+import { TodoListComponent } from './todo-list/todo-list.component';
+
 const myRoutes: Routes = [
   { path: '', component: MyCenterHomeComponent, canActivate: [AuthGuard], data: [{ title: '银盾保险经纪 - 工作台' }] },
   { path: 'material', component: MkMaterialComponent, canActivate: [AuthGuard] },
@@ -50,7 +52,8 @@ const myRoutes: Routes = [
   { path: 'scoreDeatil', component: ScoreDetailsComponent, canActivate: [AuthGuard] },
   { path: 'businessCard', component: BusinessCardComponent, canActivate: [AuthGuard] },
   { path: 'orderDetail', component: OrderDetailComponent, canActivate: [AuthGuard] },
-  { path: 'salary', component: SalaryComponent, canActivate: [AuthGuard] }
+  { path: 'salary', component: SalaryComponent, canActivate: [AuthGuard] },
+  { path: 'todo', component: TodoListComponent, canActivate: [AuthGuard] }
 
 ];
 

src/app/my/my.module.ts

@@ -30,9 +30,10 @@ import { ScoreDetailsComponent } from './score-details/score-details.component';
 import { BusinessCardComponent } from './business-card/business-card.component';
 import { OrderDetailComponent } from './order-detail/order-detail.component';
 import { SalaryComponent } from './salary/salary.component';
+import { TodoListComponent } from './todo-list/todo-list.component';
 
 @NgModule({
-  declarations: [MyCenterHomeComponent, MkMaterialComponent, MkMaterialDetailComponent, FileUploadComponent, ImportantAnnouncementComponent, SalesDetailComponent, AnnouncementDetailComponent, MyBusinessComponent, MyBusinessDetailComponent, PickerComponent, ToastComponent, SalesRankComponent, TeamRankComponent, RecruitingComponent, RecruitingDetailComponent, ThanksComponent, MySettingComponent, MySettingDetailComponent, MyNewsComponent, MyTargetComponent, TeamPanelComponent, SwitchNumberPipe, TeamSalesScoreComponent, ScoreDetailsComponent, BusinessCardComponent, OrderDetailComponent, SalaryComponent],
+  declarations: [MyCenterHomeComponent, MkMaterialComponent, MkMaterialDetailComponent, FileUploadComponent, ImportantAnnouncementComponent, SalesDetailComponent, AnnouncementDetailComponent, MyBusinessComponent, MyBusinessDetailComponent, PickerComponent, ToastComponent, SalesRankComponent, TeamRankComponent, RecruitingComponent, RecruitingDetailComponent, ThanksComponent, MySettingComponent, MySettingDetailComponent, MyNewsComponent, MyTargetComponent, TeamPanelComponent, SwitchNumberPipe, TeamSalesScoreComponent, ScoreDetailsComponent, BusinessCardComponent, OrderDetailComponent, SalaryComponent, TodoListComponent],
   imports: [
     CommonModule,
     LifeCommonModule,

src/app/my/todo-list/todo-list.component.html

+<div class="todo_wrapper">
+  <div class="top">
+    <div class="head">
+      <h3 (click)="goBack()">&lt;</h3>
+      <h3>今日任务</h3>
+      <div>日历</div>
+    </div>
+    <ul class="week">
+      <li *ngFor="let weekItem of weekArr;index as i;"  [ngClass]="{'selected':weekItem.selected}" (click)="selectDay(weekItem)">
+        <div>{{weekItem.day}}</div>
+        <span>{{lifeCommonService.getWeek(i+1)}}</span>
+      </li>
+    </ul>
+  </div>
+  <div class="todoList">
+    <img style="max-width: 80%;" src="assets/images/noListBg.png" >
+    <div class="addBtn">
+      <i class="iconfont icon-jiahao" ></i>
+    </div>
+  </div>
+  <!-- <Calendar [(ngModel)]="this.state.date"
+                [locale]="this.state.en ? 'enUS' : 'zhCN'"
+                [enterDirection]="this.state.enterDirection"
+                [visible]="this.state.show"
+                [getDateExtra]="this.state.getDateExtra"
+                [defaultDate]="this.state.now"
+                [minDate]="this.state.minDate"
+                [maxDate]="this.state.maxDate"
+                [pickTime]="this.state.pickTime"
+                [type]="this.state.type"
+                [rowSize]="this.state.rowSize"
+                [showShortcut]="this.state.showShortcut"
+                [infinite]="this.state.infinite"
+                [defaultValue]="this.state.defaultValue"
+                [onSelect]="this.state.onSelect"
+                (onCancel)="triggerCancel()"
+                (onConfirm)="triggerConfirm($event)"
+                (onSelectHasDisableDate)="triggerSelectHasDisableDate($event)"
+      ></Calendar> -->
+</div>
\ No newline at end of file

src/app/my/todo-list/todo-list.component.scss

+ul,ol{
+    list-style: none;
+}
+.todo_wrapper{
+    .top{
+        .head{
+            display: flex;
+            height: 50px;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 8px;
+            border-bottom: 1px #eeeeee solid;
+            margin-bottom: 10px;
+        }
+        .week{
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            li{
+                width: 11%;
+                text-align: center;
+                height: 50px;
+                font-size: 18px;
+                font-weight: bold;
+                span{
+                    font-size: 10px;
+                    font-weight: normal;
+                    display: block;  
+                    color: #7d7d7d;  
+                }
+            }
+            li.selected{
+                border-radius: 5px;
+                background: #1b5b99;
+                color: #fff;
+                span{
+                    color: #fff;
+                }
+            }
+        }
+    }
+    .todoList{
+        margin-top: 15%;
+        font-size: 20px;
+        color: #9a9fb4;
+        position: relative;
+        margin: 0 auto;
+        .addtips{
+            text-align: center;
+        }
+        .addBtn{
+            position: absolute;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background: #eb6100;
+            color: #fff;
+            text-align: center;
+            line-height: 55px;
+            bottom: 0;
+            right: 35px;
+            .iconfont{
+                font-size: 30px;
+            }
+        }
+    }
+}
\ No newline at end of file

src/app/my/todo-list/todo-list.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TodoListComponent } from './todo-list.component';
+
+describe('TodoListComponent', () => {
+  let component: TodoListComponent;
+  let fixture: ComponentFixture<TodoListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TodoListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TodoListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/my/todo-list/todo-list.component.ts

+import { Component, OnInit } from '@angular/core';
+import { LifeCommonService } from '../../common/life-common.service';
+const extra = {
+  '2017/07/15': { info: 'Disable', disable: true }
+};
+
+const now = new Date();
+extra[+new Date(now.getFullYear(), now.getMonth(), now.getDate() + 5)] = { info: 'Disable', disable: true };
+extra[+new Date(now.getFullYear(), now.getMonth(), now.getDate() + 6)] = { info: 'Disable', disable: true };
+extra[+new Date(now.getFullYear(), now.getMonth(), now.getDate() + 7)] = { info: 'Disable', disable: true };
+extra[+new Date(now.getFullYear(), now.getMonth(), now.getDate() + 8)] = { info: 'Disable', disable: true };
+
+for (let key in extra) {
+  if (extra.hasOwnProperty(key)) {
+    let info = extra[key];
+    const date = new Date(key);
+    if (!Number.isNaN(+date) && !extra[+date]) {
+      extra[+date] = info;
+    }
+  }
+}
+@Component({
+  selector: 'ydlife-todo-list',
+  templateUrl: './todo-list.component.html',
+  styleUrls: ['./todo-list.component.scss']
+})
+export class TodoListComponent implements OnInit {
+  weekArr: Array<any>;
+  state: any = {
+    en: false,
+    date: null,
+    show: false,
+    pickTime: false,
+    now: new Date(),
+    type: 'range',
+    enterDirection: '',
+    rowSize: 'normal',
+    showShortcut: false,
+    infinite: true,
+    defaultValue: undefined,
+    minDate: new Date(+now - 5184000000),
+    maxDate: new Date(+now + 31536000000),
+    onSelect: undefined,
+  }
+  constructor(private lifeCommonService: LifeCommonService) { }
+  
+  ngOnInit() {
+    this.weekArr = this.lifeCommonService.makeDate();
+  }
+
+  goBack(){
+    history.go(-1)
+  }
+
+  selectDay(weekItem){
+    weekItem.selected = true;
+  }
+  
+}