新建日程页面

package.json

@@ -32,6 +32,7 @@
   },
   },
   "devDependencies": {
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.13.0",
     "@angular-devkit/build-angular": "~0.13.0",
+    "@angular/cli": "^7.3.9",
     "@angular/compiler-cli": "~7.2.0",
     "@angular/compiler-cli": "~7.2.0",
     "@angular/language-service": "~7.2.0",
     "@angular/language-service": "~7.2.0",
     "@types/jasmine": "~2.8.8",
     "@types/jasmine": "~2.8.8",

src/app/my/add-task/add-task.component.html

-<p>
-  add-task works!
-</p>
+<div class="todo_wrapper">
+  <div class="top">
+    <div class="head">
+      <h3 (click)="goBack()">&lt;</h3>
+      <h3>新建日程</h3>
+      <div>日历</div>
+    </div>
+    <ul class="nav">
+      <li *ngFor="let tabItem of tabList;index as i;"  [ngClass]="{'selected':tabItem.code === tabType}" (click)="selectTab(tabItem.code)">
+        <span> {{tabItem.name}} </span>
+      </li>
+    </ul>
+  </div>
+  <div class="task_content_wrapper">
+    <div class="part1_wrapper">
+      <ul>
+        <li *ngFor="let salesActivityItem of salesActivityList">
+          {{salesActivityItem.dropOptionName}}
+        </li>
+      </ul>
+      <div class="important_mark"> <span [ngClass]="{'circle':taskImportantTag==true}" (click)="taskImportantTag=!taskImportantTag"></span> <div>重要标签</div> </div>
+    </div>
+    <div class="part1_wrapper">
+      <div>选择任务需要的时间</div>
+      <div class="timeContent">
+        <div class="picker_list">
+        </div>
+        <div style="color: #d9dadc;">到</div>
+        <div class="picker_list">
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/my/add-task/add-task.component.scss

+ul,ol{
+    list-style: none;
+}
+
+.todo_wrapper{
+    background: #fff;
+    .top{
+        margin-bottom: 20px;
+        .head{
+            display: flex;
+            height: 50px;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 8px;
+            margin-bottom: 8px;
+        }
+        .nav{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px #eeeeee solid;
+            li{
+                text-align: center;
+                height: 40px;
+                line-height: 40px;
+                font-size: 18px;
+                width: 30%;
+                span{
+                    display: inline-block;
+                    height: 40px;
+                    line-height: 40px;
+                }
+            }
+            li.selected{
+                span{
+                    color: #f8002e;
+                    border-bottom: 2px #f8002e solid;
+                }
+                
+            }
+        }
+    }
+    .task_content_wrapper{
+        .part1_wrapper{
+            position: relative;
+            padding: 0 2%;
+            ul{
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+                li{
+                    width: 31%;
+                    text-align: center;
+                    height: 35px;
+                    line-height: 35px;
+                    background: #f6f6f6;
+                    border-radius: 10px;
+                    margin:5px 1%;
+                }
+                li.selected{
+                    background: #1b5b99;
+                    color: #fff;
+                }
+            }
+            .important_mark{
+                position: absolute;
+                right: 3%;
+                bottom: 5px;
+                font-size: 12px;
+                color: #a0a0a0;
+                display: flex;
+                align-items: center;
+                margin-right: 5px;
+                span{
+                    width: 15px;
+                    height: 15px;
+                    border-radius: 50%;
+                    border: 1px #8d92ad solid;
+                    margin-right: 5px;
+                }
+                span.circle{
+                    background: #f8002e;
+                    border: none;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

src/app/my/add-task/add-task.component.ts

 import { Component, OnInit } from '@angular/core';
 import { Component, OnInit } from '@angular/core';
-
+import {MyService} from '../my.service';
 @Component({
 @Component({
   selector: 'ydlife-add-task',
   selector: 'ydlife-add-task',
   templateUrl: './add-task.component.html',
   templateUrl: './add-task.component.html',
   styleUrls: ['./add-task.component.scss']
   styleUrls: ['./add-task.component.scss']
 })
 })
 export class AddTaskComponent implements OnInit {
 export class AddTaskComponent implements OnInit {
-
-  constructor() { }
+  tabList:Array<any>;
+  tabType:string;
+  salesActivityList:Array<any>;
+  taskImportantTag:boolean = false;
+  constructor(private myService:MyService) { }
 
 
   ngOnInit() {
   ngOnInit() {
+    this.tabList = [{code:'bizchance_promotion_action',name:'营销'},{code:'team_building_source',name:'增员'},{code:'pep_schedule_task_others',name:'其他'}];
+    this.tabType = 'bizchance_promotion_action';
+    this.dropOptionsQuery(this.tabType)
+  }
+
+  goBack(){
+    history.go(-1);
   }
   }
 
 
+  selectTab(code){
+    this.tabType = code;
+  }
+
+  dropOptionsQuery(code){
+    this.myService.dropOptionsQuery({code:code}).subscribe((res)=>{
+      if(res['success']){
+        this.salesActivityList = res['data']['dropMasterInfoList'][0]['dropOptionsInfoList'];
+        console.log(this.salesActivityList)
+      }
+    })
+  }
 }
 }

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

@@ -34,7 +34,7 @@
         </ul>
         </ul>
       </div>
       </div>
     </div>
     </div>
-    <div class="addBtn" (click)="addTask()" [ngStyle]="{'background':taskList?.length? '#ff002b' : '#eb6100','bottom':taskList?.length?'4%':'-15%'}" [routerLink]="['/addtask'">
+    <div class="addBtn" (click)="addTask()" [ngStyle]="{'background':taskList?.length? '#ff002b' : '#eb6100','bottom':taskList?.length?'4%':'-15%'}" [routerLink]="['/addtask']">
       <i class="iconfont icon-jiahao" ></i>
       <i class="iconfont icon-jiahao" ></i>
     </div>
     </div>
   </div>
   </div>