购物车功能开发

@@ -114,7 +114,7 @@ function search() {
 }
 }
 
 
 function scrollHandler() {
 function scrollHandler() {
-    if (!end || $(window).scrollTop() + winH >= $(document).height() - 50) {
+    if (!end || $(window).scrollTop() + winH >= $(document).height() - 200) {
         search();
         search();
     }
     }
 }
 }

@@ -18,11 +18,6 @@ var goodsDiscountEl = document.getElementById('goodsDiscount'),
 
 
 var $cart = $('.cart-bar');
 var $cart = $('.cart-bar');
 
 
-
-require('./desc');
-require('./comments-consults');
-require('../recommend-for-you-product-desc');
-
 //add extra marign-bottom for footer to show the yoho copyright
 //add extra marign-bottom for footer to show the yoho copyright
 function showFooter() {
 function showFooter() {
     var $cartBar = $('.cart-bar');
     var $cartBar = $('.cart-bar');
@@ -74,6 +69,10 @@ if (goodsDiscountHammer && $discountFolder.children().length > 0) {
     });
     });
 }
 }
 
 
+require('./desc');
+require('./comments-consults');
+require('../recommend-for-you-product-desc');
+
 //购物车商品数量
 //购物车商品数量
 $.ajax({
 $.ajax({
     type: 'GET',
     type: 'GET',

@@ -155,4 +155,17 @@ $('.btn-balance').on('touchend', function() {
     window.location.href = '/shoppingCart/orderEnsure?cartType=' + cartType;
     window.location.href = '/shoppingCart/orderEnsure?cartType=' + cartType;
 });
 });
 
 
+$('.advance-buy').on('touchend', function() {
+    var $advanceBuy =  $('#advanceBuy'),
+        $mainCart =  $('#mainCart');
+
+    if ($advanceBuy.hasClass('hide')) {
+        $mainCart.removeClass('show').addClass('hide');
+        $advanceBuy.removeClass('hide').addClass('show');
+    } else {
+        $advanceBuy.removeClass('show').addClass('hide');
+        $mainCart.removeClass('hide').addClass('show');
+    }
+});
+
 
 

@@ -21,7 +21,7 @@
       "yoho.iswiper": "3.0.1",
       "yoho.iswiper": "3.0.1",
       "iscroll": "5.1.2",
       "iscroll": "5.1.2",
       "import-style": "1.0.0",
       "import-style": "1.0.0",
-      "yoho.lazyload": "1.1.3",
+      "yoho.lazyload": "1.1.4",
       "yoho.handlebars": "3.0.3",
       "yoho.handlebars": "3.0.3",
       "yoho.hammer": "2.0.4"
       "yoho.hammer": "2.0.4"
     },
     },

@@ -177,4 +177,115 @@
             font-size: 28rem / $pxConvertRem;
             font-size: 28rem / $pxConvertRem;
         }
         }
     }
     }
+
+    .gift-advance-good {
+        position: relative;
+        padding: 20rem / $pxConvertRem 0;
+        margin-left: 34rem / $pxConvertRem;
+        height: 160rem / $pxConvertRem;
+        border-bottom: 1px solid #e0e0e0;
+
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+
+
+    .advance-block .gift-advance-good:last-child {
+        border-bottom: none;
+    }
+
+    .advance-block:last-child .gift-advance-good:last-child {
+        border-bottom: 1px solid #e0e0e0;
+    }
+
+    .thumb-wrap {
+        position: relative;
+        float: left;
+        width: 120rem / $pxConvertRem;
+        height: 160rem / $pxConvertRem;
+
+        .thumb {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .tag {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 25rem / $pxConvertRem;
+        color: #fff;
+        text-align: center;
+        background: #a1ce4e;
+
+        &:before {
+            content: '赠品';
+        }
+    }
+
+    .deps {
+        margin-left: 135rem / $pxConvertRem;
+    }
+
+    .name {
+        font-size: 28rem / $pxConvertRem;
+    }
+
+    .row:nth-child(2) {
+        font-size: 22rem / $pxConvertRem;
+        height: 45rem / $pxConvertRem;
+        line-height: 45rem / $pxConvertRem;
+
+        > span {
+            margin-right: 15rem / $pxConvertRem;
+        }
+    }
+
+    .row:nth-child(3) {
+        position: relative;
+    }
+
+    .color, .size {
+        color: #b6b6b6;
+    }
+
+    .price {
+        font-size: 24rem / $pxConvertRem;
+        color: #000;
+    }
+
+    .count {
+        font-size: 20rem / $pxConvertRem;
+        color: #999;
+        margin-left: 22rem / $pxConvertRem;
+    }
+
+    .chose {
+        position: absolute;
+        width: 88rem / $pxConvertRem;
+        height: 58rem / $pxConvertRem;
+        background: #f8f8f8;
+        border: 1px solid #ccc;
+        right: 20rem / $pxConvertRem;
+        top: 71rem / $pxConvertRem;
+        font-size: 26rem / $pxConvertRem;
+    }
+
+    .title {
+        height: 50rem / $pxConvertRem;
+        line-height: 50rem / $pxConvertRem;
+        padding-left: 20rem / $pxConvertRem;
+        font-size: 24rem / $pxConvertRem;
+        background: #f8f8f8;
+    }
+
+    .advance-block .tag {
+        background: #eb76aa;
+        &:before {
+            content: '加价购';
+        }
+    }
 }
 }

 {{> layout/header}}
 {{> layout/header}}
-<div class="shopping-cart-page yoho-page">
+<div id="mainCart" class="shopping-cart-page yoho-page">
     {{# shoppingCart}}
     {{# shoppingCart}}
         {{#if cartNav}}
         {{#if cartNav}}
             <ul class="cart-nav clearfix">
             <ul class="cart-nav clearfix">
@@ -44,4 +44,21 @@
 
 
     {{/ shoppingCart}}
     {{/ shoppingCart}}
 </div>
 </div>
+
+
+<div id="advanceBuy" class="shopping-cart-page yoho-page hide">
+{{# shoppingCart}}
+    {{# commonCart}}
+        {{# advanceBuy}}
+        <span>
+            {{promotionTitle}}
+        </span>
+        {{# goods}}
+            {{> shopping-cart/gift-advance-good}}
+        {{/ goods}}
+        {{/ advanceBuy}}
+    {{/ commonCart}}
+{{/ shoppingCart}}
+</div>
+
 {{> layout/footer}}
 {{> layout/footer}}

@@ -16,16 +16,16 @@
                 </a>
                 </a>
             </li>
             </li>
         {{/ freebie}}
         {{/ freebie}}
-        {{# advanceBuy}}
+        {{#if advanceBuy}}
             <li class="advance-buy">
             <li class="advance-buy">
                 <span class="iconfont">&#xe61b;</span>
                 <span class="iconfont">&#xe61b;</span>
                 加价购
                 加价购
-                <a href={{url}}>
+                <a href="/shoppingCart/getCartData">
                     <span class="count">{{count}}</span>
                     <span class="count">{{count}}</span>
                     <span class="iconfont icon-right-arrow">&#xe614;</span>
                     <span class="iconfont icon-right-arrow">&#xe614;</span>
                 </a>
                 </a>
             </li>
             </li>
-        {{/ advanceBuy}}
+        {{/if}}
     </ul>
     </ul>
 {{/if}}
 {{/if}}
 
 
@@ -54,4 +54,4 @@
     <a class="btn-balance">
     <a class="btn-balance">
         结算
         结算
     </a>
     </a>
-</div>
+</div>