color

src/pages/activity-track/activity-search/activity-search.html

-<!--
-  Generated template for the ActivitySearchPage page.
 
-  See http://ionicframework.com/docs/components/#navigation for more info on
-  Ionic pages and navigation.
--->
 <ion-header>
 
   <ion-navbar>
-    <ion-title>activitySearch</ion-title>
+    <ion-navbar>
+      <div class="search-header">
+        <ion-input type="text" placeholder="按姓名搜索" [(ngModel)]="searchValue" (ionChange)="searchUser()"></ion-input>
+        <ion-icon name="close" class="clear" (click)="clearValue()"></ion-icon>
+      </div>
+    </ion-navbar>
   </ion-navbar>
 
 </ion-header>
 
 
-<ion-content padding>
+<ion-content>
+  <ion-list>
+    <ion-item *ngFor="let item of items">
+        <div class="group">
+          <div class="inner-group">
+            <img src="./assets/imgs/head.png" class="person-photo">
+            <div class="item-box">
+              <p class="person-name">{{item?.name}}
+                <ion-icon class="person-sex-male" *ngIf="item?.gender == '1'||item?.gender == null"
+                          name="male"></ion-icon>
+                <ion-icon class="person-sex-female" *ngIf="item?.gender == '0'"
+                          name="female"></ion-icon>
+              </p>
+            </div>
+          </div>
 
+          <!--不参加 1， 非不参加： 0             "isActivityNo": "0",-->
+          <!--报名 ： 1，不报名 ： 0        "isSignUp": "1"-->
+
+          <div class="inner-button">
+            <ng-container *ngIf="item?.isSignUp == 0 && item.isActivityNo == 0">
+              <div class="text-right">
+                <button disabled ion-button round class="btn color3">未报名</button>
+              </div>
+              <div class="margin-top-5">
+                                <span  (click)="goSignUp(item)" ion-button round class="btn color3 blue-btn">代报名
+                                </span>
+                <span  (click)="sayNo(item)" ion-button round class="btn color3 red-btn">不参加</span>
+              </div>
+            </ng-container>
+
+            <ng-container *ngIf="item.isActivityNo == 1">
+              <div class="text-right">
+                <span  (click)="sayNo(item)"  ion-button round class="btn color6">不参加</span>
+              </div>
+            </ng-container>
+            <ng-container *ngIf="item.isSignUp == 1">
+              <div class="text-right">
+                <button disabled ion-button round class="btn color4">已报名</button>
+              </div>
+            </ng-container>
+          </div>
+
+        </div>
+    </ion-item>
+
+  </ion-list>
 </ion-content>

src/pages/activity-track/activity-search/activity-search.scss

 page-activity-search {
+  ion-input, ion-textarea{
+    color: #fff;
+  }
+  .header-ios .toolbar-ios:last-child .toolbar-background-ios{
+    border: none;
+  }
+  .text-input::-webkit-input-placeholder{
+    color:#fff;
+  }
+  .searchToolBar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: left;
+    box-sizing: border-box;
+  }
+  .clear{
+    background-color: #cccccc;
+    width: 15px;
+    height: 15px;
+    border-radius: 15px;
+    text-align: center;
+    margin-right: 10px;
+  }
+  .search-header{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 100%;
+    margin-left: 5px;
+  }
+  a[disabled], button[disabled], [ion-button][disabled]{
+    opacity: 1;
+  }
+  .searchToolBar{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: left;
+    box-sizing: border-box;
+  }
 
+  .activity-title{
+    background-color: #f5f5f5;
+    font-size: 1.6rem;
+    color: #333;
+    padding-left: 10px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+  }
+
+  .content-box{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    border-bottom: 1px solid #cccccc;
+  }
+
+  .content-box-item{
+    width: 105px;
+    height: 80px;
+    margin: 8px 7px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    font-size: 14px;
+    border-radius: 2px;
+    color: white;
+    border: 1px solid #34b4fc;
+  }
+  .content-box-item.bgc-34b4fc .item-title,
+  .content-box-item.bgc-34b4fc .item-count{
+    color: white;
+  }
+
+
+  .item-count{
+    font-weight: bold;
+  }
+
+  .i1{
+    background-color: #70c1df;
+  }
+
+  .i2{
+    background-color: #64d262;
+  }
+
+  .i3{
+    background-color: #ef8355;
+  }
+  .i4{
+    background-color: #5097f5;
+  }
+  .i5{
+    background-color: #55efda;
+  }
+
+  .btn{
+    background-color: white;
+    border: 1px solid #90da91;
+    color: #90da91;
+    margin: 0 0;
+    font-size: 6px;
+  }
+
+  .color1{
+    border-color: #93cfe5;
+    color: #93cfe5;
+    border-radius: 3px;
+  }
+
+  .color2{
+    border-color: #90db90;
+    color: #90db90;
+    border-radius: 3px;
+  }
+
+  .color3{
+    border-color: #f3a778;
+    color: #f3a778;
+    border-radius: 3px;
+  }
+  .color4{
+    border-color: #5097f5;
+    color: #5097f5;
+    border-radius: 3px;
+  }
+  .color5{
+    border-color: #55efda;
+    color: #55efda;
+    border-radius: 3px;
+  }
+  .color6{
+    border-color: #dadada;
+    color: #808080;
+    border-radius: 3px;
+  }
+
+  .group{
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    box-sizing: border-box;
+  }
+
+  .group1{
+
+  }
+
+  .inner-group{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: left;
+    box-sizing: border-box;
+  }
+
+  .person-photo{
+    width: 48px;
+    height: 48px;
+    margin-right: 10px;
+  }
+
+  .item-box{
+    display: inline-block;
+  }
+
+  .person-name{
+    font-size: 18px;
+    color: black;
+
+  }
+
+  .person-sex-male{
+    font-size: 14px;
+    color: #6bc7fd;
+    font-weight: bolder;
+    margin-left: 5px;
+  }
+
+  .person-sex-female{
+    font-size: 14px;
+    color: #f0a7ea;
+    font-weight: bolder;
+    margin-left: 5px;
+  }
+
+  .person-batch{
+    font-size: 14px;
+    color: #cccccc;
+  }
+
+  .back-btn{
+    width: 30px;
+    height: 30px;
+  }
+  .bgc-34b4fc{
+    background-color: #34b4fc;
+  }
+  .item-title{
+    color: #34b4fc;
+  }
+  .item-count{
+    color: #999999;
+  }
+  .red-btn,
+  .red-btn.activated{
+    background-color: #fc6063;
+    color: #fff;
+    border: 1px solid #fc6067;
+  }
+  .blue-btn,
+  .blue-btn.activated{
+    background-color: #34b4fc;
+    color: #fff;
+    border: 2px solid #34b4fc;
+  }
 }

src/pages/activity-track/activity-search/activity-search.ts

 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import {AppService} from "../../../service/appHttpService";
+import {message} from "../../../app/main";
+import {Response} from "@angular/http";
 
-/**
- * Generated class for the ActivitySearchPage page.
- *
- * See https://ionicframework.com/docs/components/#navigation for more info on
- * Ionic pages and navigation.
- */
 
 @IonicPage()
 @Component({
@@ -15,11 +12,49 @@ import { IonicPage, NavController, NavParams } from 'ionic-angular';
 })
 export class ActivitySearchPage {
 
-  constructor(public navCtrl: NavController, public navParams: NavParams) {
+    searchValue = '';
+    items;
+    id;
+  constructor(public navCtrl: NavController, public navParams: NavParams,
+              public appService: AppService) {
   }
 
   ionViewDidLoad() {
-    console.log('ionViewDidLoad ActivitySearchPage');
+    this.id = this.navParams.get('id');
   }
 
+    clearValue() {
+        this.searchValue = "";
+    }
+
+    //代报名
+    goSignUp(item) {
+        this.navCtrl.push('ReplaceApplyPage', {id: this.id, personInfo: item})
+    }
+
+    //不参加
+    sayNo(item) {
+        const data = {
+            'userId': item.id,
+            'userName': item.name
+        };
+        this.appService.ObserverHttpForm("/wisdomgroup/modules/activityNon/", this.id, data)
+            .subscribe((res: Response) => {
+                   this.appService.popToastView('已保存该用户不参加','middle',1500);
+                   this.searchUser();
+                }, error => {
+                    this.appService.alert('网络异常！');
+                }
+            );
+    }
+
+    searchUser() {
+        const data = {
+            name: this.searchValue,
+        };
+        this.appService.ObserverHttpForm('/wisdomgroup/modules/activity/signAllByName/', this.id, data).subscribe((res) => {
+            this.items = res.json();
+        })
+    }
+
 }

src/pages/activity-track/joinDetail/joinDetail.ts

@@ -7,6 +7,7 @@ import {AppService} from '../../../service/appHttpService';
 import {ActivityStatisticService} from '../../../service/activityStatisticService';
 import {ReplaceApplyPage} from "../replace-apply/replace-apply";
 import {message} from "../../../app/main";
+import {ActivitySearchPage} from "../activity-search/activity-search";
 
 @IonicPage()
 @Component({
@@ -145,15 +146,7 @@ export class JoinDetailPage {
             );
     }
 
-
-    init(){
-        const data = {
-            name:'刘',
-        };
-        this.appService.ObserverHttpForm('/wisdomgroup/modules/activity/signAllByName/',this.acitivityid,data).
-        subscribe((res)=>{
-
-        })
+    search(){
+        this.navCtrl.push('ActivitySearchPage',{id:this.acitivityid});
     }
-
 }