联系人列表更新

src/pages/serve-pages/food/rush-buy/rush-buy.html

+
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>抢购</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content>
+  <ion-item (click)="chooseFood()">
+    <ion-label class="item-left"><span class="color-red">*</span>餐点:</ion-label>
+    <ion-label [ngStyle]="{'color':obj.foodText == '请选择'?'#999':'#333'}"
+               class="choose">{{obj.foodText}}</ion-label>
+    <ion-label class="right-arrow">
+      <ion-icon name="arrow-forward"></ion-icon>
+    </ion-label>
+  </ion-item>
+  <div class="item-box">
+    <div class="left">数量:</div>
+    <div class="right num">
+      <span class="reduce" (click)="reduce()">-</span>
+      <input type="number" value="1" [(ngModel)]="obj.amount">
+      <span class="add" (click)="add()">+</span>
+    </div>
+  </div>
+</ion-content>

src/pages/serve-pages/food/rush-buy/rush-buy.scss

+page-rush-buy {
+  .num {
+    text-align: right;
+    input {
+      width: 40px;
+      height: 24px;
+      font-size: 1.6rem;
+      font-weight: bold;
+      text-align: center;
+      background-color: #f2f2f2;
+      border: 1px solid #f2f2f2;
+      margin: 0 8px;
+    }
+    span{
+      font-size: 2.5rem;
+      font-weight: bold;
+      vertical-align: initial;
+      display: inline-block;
+      width: 40px;
+      height: 40px;
+      text-align: center;
+    }
+  }
+
+  .item-left {
+    text-align: right;
+    width: 20%;
+    font-weight: bold;
+    font-size: 1.4rem;
+    flex: none;
+  }
+
+  .item-ios.item-block .item-inner {
+    border-bottom: 0.55px solid #eeeeee;
+  }
+
+  ion-datetime, ion-select {
+    width: 80%;
+    max-width: 80%;
+    text-align: right;
+    font-size: 1.4rem;
+  }
+  ion-datetime{
+    padding-right: 18px !important;
+  }
+
+  ion-input input {
+    text-align: right;
+    font-size: 1.4rem;
+  }
+
+  ion-item, .item-box {
+    position: relative;
+  }
+
+  .choose {
+    text-align: right;
+    margin-right: 20px;
+    font-size: 1.5rem;
+    color: #999;
+  }
+
+  .right-arrow {
+    position: absolute;
+    right: 2px;
+    top: 5px;
+    color: #999;
+    font-size: 1.6rem;
+  }
+
+  .item-box {
+    display: flex;
+    border-bottom: 0.55px solid #eeeeee;
+
+    .left {
+      text-align: right;
+      width: 20%;
+      font-weight: bold;
+      font-size: 1.4rem;
+      margin: 11px 8px 11px 0;
+    }
+
+    .right {
+      width: 80%;
+      padding: 11px 8px 11px 16px;
+
+      .div-tag {
+        span {
+          display: inline-block;
+          margin-right: 10px;
+          white-space: initial;
+          border: 1px solid #eee;
+          padding: 2px 5px;
+          font-size: 1rem;
+          margin-bottom: 5px;
+          border-radius: 4px;
+
+          ion-icon {
+            margin-left: 3px;
+            color: #666666;
+            font-size: 1rem;
+          }
+        }
+      }
+
+      button {
+        margin: 0;
+      }
+
+      ion-textarea {
+        padding: 6px;
+        height: 100px;
+        border: 1px solid #ddd;
+      }
+
+      .tag {
+        border: 1px solid #ccc;
+        margin: 0 5px 10px 0;
+        display: inline-block;
+        padding: 4px 20px;
+        brder-radius: 4px;
+        font-size: 1.2rem;
+      }
+
+      span.selectLead {
+        background-color: #fdf8f2;
+        border: 1px solid #e42417;
+        color: #e42417;
+      }
+    }
+  }
+
+}

src/pages/serve-pages/food/rush-buy/rush-buy.ts

+import {Component} from '@angular/core';
+import {ActionSheetController, IonicPage, NavController, NavParams} from 'ionic-angular';
+
+@Component({
+    selector: 'page-rush-buy',
+    templateUrl: 'rush-buy.html',
+})
+export class RushBuyPage {
+
+    obj = {
+        amount: null,
+        food: '',
+        foodText: '请选择',
+    };
+    foodList;
+
+    constructor(public navCtrl: NavController, public navParams: NavParams,
+                private actionSheetCtrl: ActionSheetController) {
+    }
+
+    ionViewDidLoad() {
+        console.log('ionViewDidLoad RushBuyPage');
+    }
+
+    chooseFood() {
+        const btnArr = this.foodList.map(e => {
+            const data = {
+                text: e.name,
+                role: e.id,
+                handler: () => {
+                    // this.obj.orgId = e.id;
+                    // this.obj.orgText = e.name;
+                }
+            };
+            return data;
+        });
+        btnArr.push({
+            text: '取消',
+            role: 'cancel',
+            handler: () => {
+                console.log('Cancel clicked');
+            }
+        });
+        const actionSheet = this.actionSheetCtrl.create({
+            cssClass: 'cameraAction',
+            buttons: btnArr
+        });
+        actionSheet.present();
+    }
+
+    //增加
+    add() {
+        if (this.obj.amount < 10) this.obj.amount ++;
+    }
+
+    //减少
+    reduce() {
+        if (this.obj.amount > 1) this.obj.amount --;
+    }
+
+}