购物车item增减数量

pages/cart/cart.js

@@ -60,17 +60,24 @@ Page({
   },
 
   bindChangeQuantity: function (e) {
+    if (e.detail.value === "") { return "" }
+
     var cartItems = this.data.cartItems
     var item = cartItems.filter(function(ele){
       return ele.id === e.currentTarget.dataset.id
     })[0]
-    item.quantity = e.detail.value
+    if (e.detail.value >= 1) {
+      item.quantity = parseInt(e.detail.value)
+    } else {
+      item.quantity = 1
+    }
     this.setData({ cartItems: cartItems })
     wx.setStorage({
       key: 'cartItems',
       data: cartItems
     })
     this.changeCartAmount()
+    return item.quantity.toString()
   },
 
   // tap on item to delete cart item
@@ -228,6 +235,33 @@ Page({
     this.setData({amount: amount})
   },
 
+  addQuantity: function(e) {
+    this.changeCartItemQuantity('+', e)
+  },
+
+  minusQuantity: function(e) {
+    this.changeCartItemQuantity('-', e)
+  },
+
+  changeCartItemQuantity: function(op, e) {
+    var cartItems = this.data.cartItems
+    var item = cartItems.filter(function(ele){
+      return ele.id === e.currentTarget.dataset.id
+    })[0]
+    if (op === '-' && item.quantity > 1) {
+      item.quantity -= 1
+    } else if (op === '+') {
+      item.quantity += 1
+    }
+
+    this.setData({ cartItems: cartItems })
+    wx.setStorage({
+      key: 'cartItems',
+      data: cartItems
+    })
+    this.changeCartAmount()
+  },
+
   bindTapAddress () {
     wx.navigateTo({
       url: '../address/address'

pages/cart/cart.wxml

@@ -38,24 +38,23 @@
       </view>
       <view class="item-right">
         <view class="title" catchtap="catchTapOnItem" data-id="{{item.id}}">
-          <text> {{item.product.name}} </text>
+          <text>{{item.product.name}}</text>
         </view>
         <view class="numbers">
           <view>
             <view wx:if="{{ accountType === '巴爷' }}">
-              <text class="price" catchtap="catchTapOnItem" data-id="{{item.id}}">¥{{item.product['baye-price']}} / 件 </text>
+              <text class="price" catchtap="catchTapOnItem" data-id="{{item.id}}">¥{{item.product['baye-price'] * item.quantity}}</text>
             </view>
             <view wx:else>
-              <text class="price" catchtap="catchTapOnItem" data-id="{{item.id}}">¥{{item.product['member-price']}} / 件 </text>
+              <text class="price" catchtap="catchTapOnItem" data-id="{{item.id}}">¥{{item.product['member-price'] * item.quantity}}</text>
             </view>
           </view>
-          <view class="pull-right">
-            <view>
-              <text>数量：</text>
-            </view>
-            <view class="quantity">
-              <input value="{{item.quantity}}" bindinput="bindChangeQuantity" data-id="{{item.id}}"></input>
+          <view class="quantity">
+            <view class="op" bindtap="minusQuantity" data-id="{{item.id}}"><text class="text">-</text></view>
+            <view class="number">
+              <input class="input" value="{{item.quantity}}" bindinput="bindChangeQuantity" data-id="{{item.id}}"></input>
             </view>
+            <view class="op" bindtap="addQuantity" data-id="{{item.id}}"><text class="text">+</text></view>
           </view>
         </view>
       </view>

pages/cart/cart.wxss

@@ -75,18 +75,36 @@
   display: block;
 }
 
-.pull-right {
+.quantity {
   margin-left: auto;
-  font-size: 28rpx;
+  font-size: 26rpx;
   display: flex;
 }
 
-.numbers input {
+.quantity .op {
   border: 1rpx solid lightgrey;
-  width: 60rpx;
+  width: 70rpx;
+  font-size: 32rpx;
+  font-weight: 800;
+  line-height: 50rpx;
+  height: 50rpx;
+  text-align: center;
+}
+
+.quantity .number {
+  border-top: 1rpx solid lightgrey;
+  border-bottom: 1rpx solid lightgrey;
+  line-height: 50rpx;
+  height: 50rpx;
+  text-align: center;
 }
 
-.numbers text {
+.quantity .input {
+  width: 80rpx;
+}
+
+.numbers .price {
+  color: red;
   padding-top: 15rpx;
 }
 
@@ -108,12 +126,6 @@
   font-size: 30rpx;
 }
 
-.quantity input {
-  min-height: 10rpx;
-  height: 50rpx;
-  margin-right: 20rpx;
-}
-
 .separate {
   height: 18rpx;
   background-color: #f2f2f2;