quantity

app.json

@@ -7,7 +7,8 @@
     "pages/label/index",
     "pages/loadmore/index",
     "pages/panel/index",
-    "pages/tab/index"
+    "pages/tab/index",
+    "pages/quantity/index"
   ],
   "window":{
     "navigationBarBackgroundColor": "#FAFAFA",

pages/dashboard/index.wxml

@@ -25,10 +25,14 @@
       <view class="zui-cell__bd">Tab</view>
       <view class="zui-cell__ft"></view>
     </navigator>
-    <navigator class="zui-cell zui-cell--access zui-cell--last-child" url="/pages/label/index">
+    <navigator class="zui-cell zui-cell--access" url="/pages/label/index">
       <view class="zui-cell__bd">Label</view>
       <view class="zui-cell__ft"></view>
     </navigator>
+    <navigator class="zui-cell zui-cell--access zui-cell--last-child" url="/pages/quantity/index">
+      <view class="zui-cell__bd">Quantity</view>
+      <view class="zui-cell__ft"></view>
+    </navigator>
   </view>
 
 </view>

pages/quantity/index.js

@@ -0,0 +1,25 @@
+var ZUI = require('../../zui/index');
+
+Page(Object.assign({}, ZUI.Quantity, {
+  data: {
+    quantity1: {
+      quantity: 1,
+      min: 1,
+      max: 20
+    },
+    quantity2: {
+      quantity: 1,
+      min: 1,
+      max: 1
+    }
+  },
+
+  handleZuiQuantityChange(e) {
+    var componentId = e.componentId;
+    var quantity = e.quantity;
+
+    this.setData({
+      [`${componentId}.quantity`]: quantity
+    });
+  }
+}));

pages/quantity/index.wxml

@@ -0,0 +1,10 @@
+<import src="/zui/quantity/index.wxml" />
+
+<view class="container">
+  <view style="padding: 40px 15px">
+    <template is="zui-quantity" data="{{ ...quantity1, componentId: 'quantity1' }}" />
+  </view>
+  <view style="padding: 40px 15px ">
+    <template is="zui-quantity" data="{{ ...quantity2, componentId: 'quantity2' }}" />
+  </view>
+</view>

pages/tab/index.js

@@ -48,7 +48,6 @@ Page(Object.assign({}, ZUI.Tab, {
   },
 
   handleZuiTabChange(e) {
-    console.info('[ZUI:Tab:Change]', e);
     var componentId = e.componentId;
     var selectedId = e.selectedId;
 

zui/index.js

@@ -1 +1,2 @@
 exports.Tab = require('./tab/index');
+exports.Quantity = require('./quantity/index');

zui/quantity/index.js

@@ -0,0 +1,58 @@
+function handle(e, num) {
+  var dataset = e.currentTarget.dataset;
+  var componentId = dataset.componentId;
+  var disabled = dataset.disabled;
+  var quantity = +dataset.quantity;
+
+  if (disabled == 'true') return null;
+
+  callback.call(this, componentId, quantity + num);
+}
+
+function callback(componentId, quantity) {
+  if (this.handleZuiQuantityChange) {
+    quantity = +quantity;
+    var e = { componentId, quantity };
+    console.info('[ZUI:Quantity:Change]', e);
+    this.handleZuiQuantityChange(e);
+  }
+}
+
+var ComponentQuantity = {
+  _handleZuiQuantityMinus(e) {
+    handle.call(this, e, -1);
+  },
+
+  _handleZuiQuantityPlus(e) {
+    handle.call(this, e, +1);
+  },
+
+  _handleZuiQuantityBlur(e) {
+    var dataset = e.currentTarget.dataset;
+    var componentId = dataset.componentId;
+    var max = +dataset.max;
+    var min = +dataset.min;
+    var value = e.detail.value;
+
+    if (!value) {
+      setTimeout(() => {
+        callback.call(this, componentId, min);
+      }, 16);
+      callback.call(this, componentId, value);
+      return '' + value;
+    }
+
+    value = +value;
+    if (value > max) {
+      value = max;
+    } else if (value < min) {
+      value = min;
+    }
+
+    callback.call(this, componentId, value);
+
+    return '' + value;
+  }
+};
+
+module.exports = ComponentQuantity;

zui/quantity/index.wxml

@@ -0,0 +1,28 @@
+<template name="zui-quantity">
+  <view class="zui-quantity">
+    <view
+      class="zui-quantity__minus {{ quantity <= min ? 'zui-quantity--disabled' : '' }}"
+      data-component-id="{{ componentId }}"
+      data-quantity="{{ quantity }}"
+      data-disabled="{{ quantity <= min }}"
+      bindtap="_handleZuiQuantityMinus"
+    >-</view>
+    <input
+      class="zui-quantity__text {{ min >= max ? 'zui-quantity--disabled' : '' }}"
+      type="number"
+      data-component-id="{{ componentId }}"
+      data-min="{{ min }}"
+      data-max="{{ max }}"
+      value="{{ quantity }}"
+      disabled="{{ min >= max }}"
+      bindblur="_handleZuiQuantityBlur"
+    ></input>
+    <view
+      class="zui-quantity__plus {{ quantity >= max ? 'zui-quantity--disabled' : '' }}"
+      data-component-id="{{ componentId }}"
+      data-quantity="{{ quantity }}"
+      data-disabled="{{ quantity >= max }}"
+      bindtap="_handleZuiQuantityPlus"
+    >+</view>
+  </view>
+</template>

zui/tab/index.js

@@ -5,6 +5,10 @@ var Tab = {
     var selectedId = dataset.itemId;
 
     if (this.handleZuiTabChange) {
+      console.info('[ZUI:Tab:Change]', {
+        componentId,
+        selectedId
+      });
       this.handleZuiTabChange({
         componentId,
         selectedId