picker

@@ -72,7 +72,7 @@ Component({
         }
         return;
       }
-console.log(info);
+
       this.triggerEvent('editGoodsNum', info);
     },
     editTabAction(e) {
@@ -83,6 +83,9 @@ console.log(info);
       this.editTimer = setTimeout(() => {
         this.editGoodsNum(e);
       }, 200);
+    },
+    editGoodsColorSize() {
+      this.triggerEvent('editGoodsColorSize', this.data.goods);
     }
   }
 });

@@ -6,7 +6,7 @@
         </view>
         <view class="plus-btn opt-btn {{goods.plusBtnHide ? 'disable' : ''}}" data-type="plus" bindtap="editTabAction"></view>
     </view>
-    <view class="color-size" wx:if="{{goods.colorSize}}">
+    <view class="color-size" wx:if="{{goods.colorSize}}" bindtap="editGoodsColorSize">
         <text class="color-size-text">{{goods.colorSize}}</text>
         <text class="iconfont icon-bottom"></text>
     </view>

@@ -87,6 +87,9 @@ Component({
     },
     editGoodsNum(e) {
       this.triggerEvent('editGoodsNum', e.detail);
+    },
+    editGoodsColorSize(e) {
+      this.triggerEvent('editGoodsColorSize', e.detail);
     }
   }
 });

@@ -44,7 +44,7 @@
         </view>
         <view class="info-edit" wx:if="{{isEditing}}">
           <view class="edit-block">
-            <cart-edit goods="{{item}}" bind:editGoodsNum="editGoodsNum"></cart-edit>
+            <cart-edit goods="{{item}}" bind:editGoodsNum="editGoodsNum" bind:editGoodsColorSize="editGoodsColorSize"></cart-edit>
             <view class="price">
               <text class="sale-price">¥ {{helper.round(item.sales_price)}}</text>
               <text wx:if="{{item.mark_price}}" class="mark-price">¥ {{helper.round(item.mark_price)}}</text>

@@ -213,6 +213,7 @@ const formatOrdinaryCartData = (data, needAllGoods) => {
   }
 
   ordinaryCart.shoppingCartData = data.shopping_cart_data;
+  ordinaryCart.matchGiftIds = data.match_gift_ids;
   ordinaryCart.isSelectAll = allGoodsSelect.isSelectAll();
   ordinaryCart.hasLowStorage = allGoodsSelect.hasLowStorage();
 
@@ -222,7 +223,6 @@ const formatOrdinaryCartData = (data, needAllGoods) => {
     ordinaryCart.promotionInfo = data.promotion_info;
   }
 
-console.log(ordinaryCart);
   return {
     isEmptyCart,
     ...ordinaryCart
@@ -253,16 +253,7 @@ const changeGoodsListData = (list, selected, buyNum) => {
   return glist;
 }
 
-const changeGoodsBundleData = (bundle, selected, buyNum) => {
-  if (!bundle || !bundle.goods_list.length) {
-    return [];
-  }
-
-  return changeGoodsListData(bundle.goods_list, selected, buyNum);
-}
-
 export default {
   formatOrdinaryCartData,
-  changeGoodsListData,
-  changeGoodsBundleData
+  changeGoodsListData
 };

@@ -78,5 +78,18 @@ export default {
       url: '',
       data: params
     });
+  },
+  /**
+     * 编辑购物车商品
+     * @param params
+     * @returns {*}
+     */
+  editCartGoods(params) {
+    return api.get({
+      url: '',
+      data: Object.assign(params, {
+        method: 'app.Shopping.swap'
+      })
+    });
   }
 };

 import wx from '../../utils/wx';
+import formatImage from '../../utils/formatImage';
+import detailModel from '../../models/product/detail';
 import cartModel from '../../models/cart/cart';
 import cartHandle from '../../models/cart/cart-handle';
 
+import Picker from '../product/detail/picker/picker';
+
 const app = getApp();
 const router = global.router;
 
@@ -12,10 +16,28 @@ const reverseSelected = {
 
 Page({
   data: {
-    isEditing: false
+    isEditing: false,
+    pickerData: {
+      view: {
+        isShow: false,
+        isSoldOutSoon: false,
+        goodsList: [],
+        sizeList: [],
+        image: '',
+        goodPrice: '',
+        price: '',
+        buyNumber: 1,
+        minusButtonEnable: false,
+        plusButtonEnable: true,
+        buyButtonEnable: true,
+        buy_limit_number: 0,
+        bundle_count: 0
+      },
+      sourceType: 'goodsDetail'
+    }
   },
   onLoad() {
-
+    Picker.init(this);
   },
   onShow() {
     this.getCartData();
@@ -30,17 +52,17 @@ Page({
     wx.showToast({
       title: title,
       icon: 'none',
-      duration: 2000
+      duration: 1000
     });
   },
-  showModal(title) {
-    return wx.showModal({
+  showModal(title, options) {
+    return wx.showModal(Object.assign({
       title: '',
       content: title,
       cancelText: '取消',
       confirmText: '确认',
       confirmColor: '#d0021b'
-    });
+    }, options));
   },
   goShopping() {
     router.go('home');
@@ -153,9 +175,92 @@ Page({
         if (res && res.code === 200) {
           this.editCart(bundle.goods_list, 'Y');
         }
-      })
+      });
     }
   },
+  editGoodsColorSize(e) {
+    let goods = e.detail;
+    let pickData = this.data.pickerData;
+
+    this._cureditGoods = goods;
+
+    pickData.view.should_hidden_number_view = (goods.bundle_activity_id && goods.batch_no);
+    pickData.view.min_buy_number = goods.min_buy_number > 0 ? goods.min_buy_number : 1;
+
+    detailModel.productInfo(goods.product_skn).then(res => {
+      if (res && res.code === 200) {
+        let ImgUrls = [];
+        let color_length = 0;
+
+        if (res.data.goods_list) {
+          color_length = res.data.goods_list.length;
+        }
+        res.data.goods_list.map((item, index) => {
+          let images = item.images_list;
+
+          ImgUrls = [...ImgUrls, ...images];
+          if (index === 0 && color_length === 1) {
+            item.selected = true;
+            this.data.colorSelected = true;
+            this.data.selectedProductId = item.goods_id;
+          }
+        });
+
+        let isSoldOutSoon = false;
+        let tags = res.data.tags;
+
+        if (tags) {
+          isSoldOutSoon = tags.includes('is_soon_sold_out');
+        }
+
+        pickData.view.goodsList = res.data.goods_list;
+        pickData.view.isSoldOutSoon = isSoldOutSoon;
+
+        // 默认显示第一种颜色的尺码
+        pickData.view.sizeList = res.data.goods_list.length ? res.data.goods_list[0].size_list : [];
+
+        let plusButtonEnable = false;
+        let minusButtonEnable = false;
+
+        // 根据库存设置该尺码是否可以选择
+        let size_length = 0;
+
+        if (pickData.view.sizeList) {
+          size_length = pickData.view.sizeList.length;
+        }
+
+        pickData.view.sizeList && pickData.view.sizeList.map((item, index) => {
+          item.enable = item.storage_number > 0;
+          if (index === 0 && size_length === 1 && this.data.colorSelected) {
+            // 当颜色被选中 并且只有一个size 时 才会自动 做选中尺码操作
+            pickData.view.buyButtonEnable = item.enable;
+            if (item.enable) {
+              item.selected = true;
+              plusButtonEnable = item.storage_number > 1;
+              this.setData({
+                selectedSKU: item.product_sku,
+                storageNumber: item.storage_number
+              });
+            }
+          }
+        });
+
+        pickData.view.plusButtonEnable = plusButtonEnable;
+        pickData.view.minusButtonEnable = minusButtonEnable;
+        pickData.view.image = formatImage.image(ImgUrls.length > 0 ? ImgUrls[0].image_url : '', 168, 232);
+        pickData.view.price = res.data.format_market_price;
+        pickData.view.goodPrice = res.data.format_sales_price;
+
+
+        this.setData({
+          pickerData: pickData
+        });
+        Picker.pickerShow(this);
+      }
+    }).catch(err => {
+      this.showToast(err.code + err.message + '');
+    });
+  },
   removeGoodsListInEdit(e) {
     let info = e.detail;
 
@@ -223,5 +328,77 @@ Page({
         this.showToast('您全选的商品中存在库存不足商品，已帮您自动取消勾选成功');
       }
     });
-  }
+  },
+  paymentAction: function() {
+    //如果没有选中商品则不能进入结算页
+    if (this.data.shoppingCartData.selected_goods_count <= 0) {
+      return this.showToast('您还没有选择宝贝哦');
+    }
+
+    if (this.data.matchGiftIds && this.data.matchGiftIds.length > 0) {
+      return this.showModal('您还未选择赠品,是否去选择赠品?', {
+        cancelText: '不要赠品',
+        confirmText: '去选择',
+        confirmColor: '#444444',
+        cancelColor: '#444444',
+      }).then(res => {
+          if (res.confirm) {
+            // TODO 去选择赠品
+            // that.navToChooseGiftPage();
+          } else if (res.cancel) {
+            //直接跳转 结算页面
+            router.go('cartEnsure');
+          }
+      });
+    }
+    router.go('cartEnsure');
+  },
+
+  hidePicker(e) {
+    if (e.target.id === 'picker-bg') {
+      Picker.pickerHide(this);
+    }
+  },
+  confirmChoose(e) {
+    let sku = this.data.selectedSKU;
+
+    if (!sku) {
+      return this.showToast('请选择颜色或尺码');
+    }
+
+    let buyNumber = this.data.pickerData.view.buyNumber;
+    let min_buy_number = this.data.pickerData.view.min_buy_number > 0 ? this.data.pickerData.view.min_buy_number : 1;
+
+    if (buyNumber > 0 && buyNumber < min_buy_number && min_buy_number != 1) {
+      return this.showToast('最低' + min_buy_number + '件起');
+    }
+
+    let goods = this._cureditGoods;
+    let goodsInfo = [{
+      old_product_sku: goods.product_sku,
+      new_product_sku: sku,
+      buy_number: buyNumber,
+      activity_id: goods.bundle_activity_id,
+      batch_no: goods.batch_no,
+      selected: 'Y',
+    }];
+
+    return cartModel.editCartGoods({
+      swap_data: JSON.stringify(goodsInfo),
+      uid: app.getUid()
+    }).then(res => {
+      if (res && res.code === 200) {
+        this.editCart([{
+          buy_number: buyNumber,
+          goods_type: goods.goods_type,
+          product_sku: sku,
+          promotion_id: goods.promotion_id,
+          selected: 'Y',
+        }], 'Y');
+        Picker.pickerHide(this);
+        this.clearPickerData && this.clearPickerData();
+      }
+    });
+  },
+  ...Picker.pickerAction
 });

 <wxs src="../../wxs/helper.wxs" module="helper" />
 
+<import src="../product/detail/picker/picker.wxml"/>
 <import src="./template/cart/goods-pool.wxml"/>
 <import src="./template/cart/goods-list.wxml"/>
 <import src="./template/cart/gift-list.wxml"/>
@@ -81,7 +82,7 @@
         </view>
       </view>
     </block>
-
-
   </scroll-view>
+
+  <template is="Picker" data="{{pickerData, loadingForPayment}}"/>
 </block>

 @import "./template/cart/goods-pool.wxss";
 @import "./template/cart/gift-list.wxss";
 @import "./template/cart/invalid-list.wxss";
+@import "../product/detail/picker/picker.wxss";
 
 page {
   height: 100%;

 <template name="cartGoodsList">
   <block wx:if="{{goodsList.length}}">
     <block wx:for="{{goodsList}}" wx:key="unique">
-      <cart-item item="{{item}}" index="{{index}}" isEditing="{{isEditing}}" isInvalid="{{isInvalid}}" bind:chooseGoodsItem="chooseGoodsItem" bind:removeGoodsListInEdit="removeGoodsListInEdit" bind:editGoodsNum="editGoodsNum"></cart-item>
+      <cart-item item="{{item}}" index="{{index}}" isEditing="{{isEditing}}" isInvalid="{{isInvalid}}" bind:chooseGoodsItem="chooseGoodsItem" bind:removeGoodsListInEdit="removeGoodsListInEdit" bind:editGoodsNum="editGoodsNum" bind:editGoodsColorSize="editGoodsColorSize"></cart-item>
     </block>
   </block>
 </template>

@@ -27,8 +27,213 @@ function pickerHide(ctx) {
   });
 }
 
+const pickerAction = {
+  chooseColor: function(e) {
+    let pickData = this.data.pickerData;
+
+    // 先遍历将所有颜色、尺码置为未选中状态
+    pickData.view.goodsList && pickData.view.goodsList.map(item => {
+      item.selected = false;
+      item.size_list.map(subItem => {
+        subItem.selected = false;
+        subItem.enable = subItem.storage_number > 0;
+      });
+    });
+
+    // 将当前颜色置为选中状态
+    let tempItem = e.target.dataset.key;
+
+    // 遍历颜色尺码，根据库存切换显示状态
+    tempItem && tempItem.size_list && tempItem.size_list.map(item => {
+      item.enable = item.storage_number > 0;
+    });
+    tempItem.selected = true;
+    this.data.selectedProductId = tempItem.goods_id;
+
+    // 设置标志位，表示已经选择颜色
+    let colorSelected = true;
+
+    // 重置库存、当前选中sku的值
+    pickData.storageNumber = 0;
+    pickData.selectedSKU = 0;
+    this.data.selectedSKU = 0;
+
+    pickData.view.goodsList[Number(e.target.id)] = tempItem;
+    pickData.view.sizeList = tempItem.size_list;
+
+    pickData.view.minusButtonEnable = false;
+
+    // 将购买数量设为初始状态
+    pickData.view.buyNumber = 1;
+
+    this.setData({
+      colorSelected,
+      pickerData: pickData
+    });
+  },
+  chooseSize: function(e) {
+    let pickData = this.data.pickerData;
+
+    // 现遍历将所有尺码置为未选中状态
+    pickData.view.sizeList && pickData.view.sizeList.map(item => {
+      item.selected = false;
+    });
+
+    // 将当前尺码置为选中状态
+    let tempItem = e.currentTarget.dataset.key;
+
+    tempItem.selected = true;
+    pickData.view.sizeList[parseInt(e.currentTarget.id)] = tempItem;
+
+    // 设置数量加减按钮启用状态
+        pickData.view.plusButtonEnable = (!pickData.view.buy_limit_number || pickData.view.buy_limit_number > 1) && tempItem.storage_number > 1; // eslint-disable-line
+
+    pickData.view.minusButtonEnable = false;
+    pickData.view.buyButtonEnable = true;
+
+    if (pickData.view.bundle_count === 0) {
+      pickData.view.buyNumber = 1;
+    }
+
+    if (tempItem.storage_number <= 0) {
+      wx.showToast({
+        title: '该尺码已经售罄',
+        icon: 'none',
+        duration: 2000
+      });
+
+      pickData.view.buyButtonEnable = false;
+    }
+
+    this.setData({
+      pickerData: pickData,
+      selectedSKU: tempItem.storage_number > 0 ? tempItem.product_sku : 0,
+      storageNumber: tempItem.storage_number
+    });
+  },
+  bindMinus: function() {
+    let pickerData = this.data.pickerData;
+    let buyNumber = parseInt(pickerData.view.buyNumber);
+
+    if (pickerData.view.bundle_count > 0) {
+      if (buyNumber > pickerData.view.bundle_count) {
+        pickerData.view.minusButtonEnable = true;
+      } else {
+        this.minReachedLimitAction(pickerData.view.bundle_count);
+        pickerData.view.minusButtonEnable = false;
+        return;
+      }
+    }
+
+    if (buyNumber > 1) {
+      buyNumber = buyNumber - 1;
+    }
+    pickerData.view.buyNumber = buyNumber;
+
+    if (buyNumber === 1) {
+      pickerData.view.minusButtonEnable = false;
+    } else {
+      pickerData.view.minusButtonEnable = true;
+    }
+
+    if (pickerData.view.buy_limit_number !== 0 && buyNumber < pickerData.view.buy_limit_number) {
+      pickerData.view.plusButtonEnable = true;
+    }
+
+    if (buyNumber < this.data.storageNumber) {
+      pickerData.view.plusButtonEnable = true;
+    }
+
+    this.setData({pickerData});
+  },
+
+  // 增加购买数量
+  bindPlus: function() {
+    if (!this.data.colorSelected) {
+      return wx.showToast({
+        title: '请选择颜色',
+        icon: 'none',
+        duration: 1000
+      });
+    }
+
+    if (!this.data.selectedSKU) {
+      return wx.showToast({
+        title: '请选择尺码',
+        icon: 'none',
+        duration: 1000
+      });
+    }
+
+    let pickerData = this.data.pickerData;
+    let buyNumber = pickerData.view.buyNumber;
+
+    if (pickerData.view.buy_limit_number !== 0 && buyNumber >= pickerData.view.buy_limit_number) {
+      return this.plusReachedLimitAction(pickerData.view.buy_limit_number);
+    }
+
+    if (buyNumber >= this.data.storageNumber) {
+      return this.plusReachedMaxAction();
+    }
+
+    if (pickerData.view.buy_limit_number !== 0 && buyNumber < pickerData.view.buy_limit_number) {
+      pickerData.view.plusButtonEnable = true;
+    }
+
+    if (buyNumber < this.data.storageNumber) {
+      pickerData.view.plusButtonEnable = true;
+      buyNumber = parseInt(buyNumber) + 1;
+    }
+
+
+    if (buyNumber >= this.data.storageNumber) {
+      pickerData.view.plusButtonEnable = false;
+    }
+
+    if (buyNumber > 1) {
+      pickerData.view.minusButtonEnable = true;
+    }
+
+    pickerData.view.buyNumber = buyNumber;
+    this.setData({pickerData});
+  },
+
+  plusReachedMaxAction: function() {
+    return wx.showToast({
+      title: '对不起，没有更多库存了',
+      icon: 'none',
+      duration: 1000
+    });
+  },
+
+  plusReachedLimitAction: function(n) {
+    return wx.showToast({
+      title: '限购' + n + '件',
+      icon: 'none',
+      duration: 1000
+    });
+
+  },
+
+  minReachedLimitAction: function(n) {
+    return wx.showToast({
+      title: n + '件起售',
+      icon: 'none',
+      duration: 1000
+    });
+  },
+  clearPickerData() {
+    this.setData({
+      colorSelected: false,
+      selectedSKU: '',
+      storageNumber: 0
+    });
+  }
+};
+
 module.exports = {
   init: init,
   pickerShow: pickerShow,
-  pickerHide: pickerHide
+  pickerHide: pickerHide,
+  pickerAction
 };