购物车功能开发

梁志锋
Commit 7bb68f4c40be3b5310d775c870eb5099b1d8b243 2 parents 66b3b61e 251e35ef
Showing 12 changed files with 128 additions and 37 deletions
framework
static/js/shopping-cart/chose-panel.js
static/js/shopping-cart/good.js
static/js/shopping-cart/order-ensure.js
static/js/shopping-cart/order-info.js
static/sass/shopping-cart/_chose-panel.scss
static/sass/shopping-cart/_index.scss
template/m.yohobuy.com/actions/index/shoppingCart/index.phtml
template/m.yohobuy.com/actions/index/shoppingCart/order-ensure.phtml
template/m.yohobuy.com/partials/layout/use.phtml
template/m.yohobuy.com/partials/shopping-cart/chose-panel.phtml
yohobuy/m.yohobuy.com/application/controllers/ShoppingCart.php
--- a/framework @ 75bbc3b0
+++ b/framework @ 75bbc3b0
-Subproject commit e9d066dd88a8e7e37103021c427a205a5cfcdcec
+Subproject commit 75bbc3b075de19f239532f60c5995d06c5f814e2
--- a/static/js/shopping-cart/chose-panel.js
View file @7bb68f4
+++ b/static/js/shopping-cart/chose-panel.js
View file @7bb68f4
@@ -11,7 +11,8 @@ var $ = require('jquery');
 // var $page = $('.yoho-page');
-var $num;
+var $num,
+    $chosed;
 // var tpl;
@@ -64,41 +65,69 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
     var $this = $(this),
         $that = $(e.target).closest('.chose-items'),
         numArray,
-        index;
+        index,
+        i;
-    if ($this.hasClass('chosed')) {
-        $this.parent().find('.block').removeClass('chosed');
-        $that.find('.num .left-num').html('');
-    } else if ($this.hasClass('disable')) {
-        $this.css('background-color', '#000');
-        return;
-    } else if (!$this.hasClass('chosed')) {
-        $this.siblings('.chosed').removeClass('chosed');
-        $this.addClass('chosed');
-        index = $this.index();
+    var $siblingBlock = $this.closest('.block-list').siblings(':first'),
+        currentNumArray = $this.data('numstr').split('/');
+    $this.siblings('.chosed').removeClass('chosed');
+    $this.toggleClass('chosed');
+    index = $this.index();
+    $chosed = $('.block-list>ul>li.chosed');
-        //根据颜色切换图片
-        if ($this.closest('.block-list').hasClass('color-list')) {
-            $('.chose-panel .basic-info').find('.thumb').addClass('hide').eq(index).removeClass('hide');
-        }
+    //根据颜色切换图片
+    if ($this.closest('.block-list').hasClass('color-list')) {
+        $('.chose-panel .basic-info').find('.thumb').addClass('hide').eq(index).removeClass('hide');
+    }
-        //剩余的商品数
-        if ($that.find('.color-list ul>li').hasClass('chosed') && $that.find('.size-list ul>li').hasClass('chosed')) {
-            numArray = $this.closest('.block-list').siblings(':first').find('.chosed').data('numstr').split('/');
-            $that.find('.num .left-num').html('剩余' + numArray[index] + '件');
-        } else {
-            $that.find('.num .left-num').html('');
+    if ($chosed.length === 0) {
+        $this.closest('ul>li').each(function() {
+            $(this).removeClass('zero-stock');
+            if (0 === $(this).data('num') - 0) {
+                $(this).addClass('zero-stock');
+            }
+        });
+
+        $siblingBlock.find('ul>li').each(function() {
+            $(this).removeClass('zero-stock');
+            if (0 === $(this).data('num') - 0) {
+                $(this).addClass('zero-stock');
+            }
+        });
+    } else if ($chosed.length === 1 && $this.hasClass('chosed')) {
+        numArray = $chosed.data('numstr').split('/');
+        $siblingBlock.find('.block').removeClass('zero-stock');
+        for (i = 0; i < numArray.length; i++) {
+            if (0 === numArray[i] - 0) {
+                $siblingBlock.find('.block').eq(i).addClass('zero-stock');
+            }
         }
-
-        //点击切换
+    } else if ($chosed.length === 1 && !$this.hasClass('chosed')) {
+        $siblingBlock.find('ul>li').each(function() {
+            $(this).removeClass('zero-stock');
+            if (0 === $(this).data('num') - 0) {
+                $(this).addClass('zero-stock');
+            }
+        });
+        $that.find('.num .left-num').html('');
+    } else if ($chosed.length === 2) {
+        $siblingBlock.find('.block').removeClass('zero-stock');
+        for (i = 0; i < currentNumArray.length; i++) {
+            if (0 === currentNumArray[i] - 0) {
+                $siblingBlock.find('.block').eq(i).addClass('zero-stock');
+            }
+        }
+        numArray = $siblingBlock.find('.chosed').data('numstr').split('/');
+        $that.find('.num .left-num').html('剩余' + numArray[index] + '件');
     }
 }).on('touchstart', '.btn-minus', function() {
-    var num = +$num.val();
+    var num = +$num.val(),
+        $chosed = $('.block-list>ul>li.chosed');
     //若颜色和尺码没有被同时选中，则不能点击
-    if ($('.block-list>ul>li.chosed').length < 2) {
+    if ($chosed.length < 2) {
         return;
     }
--- a/static/js/shopping-cart/good.js
View file @7bb68f4
+++ b/static/js/shopping-cart/good.js
View file @7bb68f4
@@ -33,6 +33,7 @@ lazyLoad({
     try_again_css: 'order-failure'
 });
+
 $names = $('.name');
 if ($names.length > 0) {
     $names[0].mlellipsis(2);
--- a/static/js/shopping-cart/order-ensure.js
View file @7bb68f4
+++ b/static/js/shopping-cart/order-ensure.js
View file @7bb68f4
@@ -98,8 +98,8 @@ function submitOrder() {
         data: {
             addressId: orderInfo('addressId'),
             cartType: orderInfo('cartType'),
-            deliveryId: orderInfo('deliveryId'),
-            deliveryTimeId: orderInfo('deliveryTimeId'),
+            deliveryId: orderInfo('deliveryId') || 1,
+            deliveryTimeId: orderInfo('deliveryTimeId') || 1,
             invoiceText: orderInfo('invoiceText'),
             invoiceType: orderInfo('invoiceType'),
             msg: orderInfo('msg'),
@@ -109,13 +109,24 @@ function submitOrder() {
             yohoCoin: orderInfo('yohoCoin')
         }
     }).then(function(res) {
-        console.log(res);
+        if (!res) {
+            tip.show('网络出错');
+        }
+        if (res.code !== 200) {
+            tip.show(res.message || '网络出错');
+        } else {
+            console.log(1);
+        }
     }).fail(function() {
         tip.show('网络出错');
     });
 }
 // 界面点击，状态存 cookie
+if (!orderInfo('addressId')) {
+    orderInfo('addressId', $('.address-wrap').data('address-id'));
+}
+
 $('.dispatch-mode').on('touchend', 'li', function() {
     orderInfo('deliveryId', $(this).data('id'));
     orderCompute();
--- a/static/js/shopping-cart/order-info.js
View file @7bb68f4
+++ b/static/js/shopping-cart/order-info.js
View file @7bb68f4
@@ -22,6 +22,7 @@ try {
         invoiceType: null,
         msg: null
     };
+    window.setCookie('order-info', JSON.stringify(info));
 }
 exports.orderInfo = function(key, value) {
--- a/static/sass/shopping-cart/_chose-panel.scss
View file @7bb68f4
+++ b/static/sass/shopping-cart/_chose-panel.scss
View file @7bb68f4
@@ -105,10 +105,16 @@
             color: #e10;
         }
-        &.disable {
+        &.zero-stock {
            color: #e0e0e0;
            border-color: #e0e0e0; 
         }
+        &.zero-stock.chosed {
+            border-color: #e0e0e0; 
+            background: none;
+            color: #e0e0e0;
+            background-color: #f0f0f0;
+        }
     }
     .num {
--- a/static/sass/shopping-cart/_index.scss
View file @7bb68f4
+++ b/static/sass/shopping-cart/_index.scss
View file @7bb68f4
@@ -289,3 +289,36 @@
         }
     }
 }
+.shopping-cart-zero{
+    .cart-zero{
+        width: 100%;
+        height: auto;
+        padding-top:2rem;
+        padding-bottom:20%;
+        i{
+            font-size: 6em;
+            display: block;
+            margin: 0 auto;
+            text-align: center;
+            color: #505050;
+        }
+        p{
+            display: block;
+            text-align: center;
+            font-size: 1.2em;
+            color: #505050;
+            padding:.6rem 0;
+        }
+        a{
+           width: 27%;
+           height: 1.2rem;
+           overflow: hidden;
+           line-height: 1.2rem;
+           border:1px solid #505050;
+           border-radius:.2rem;
+           display: block;
+           margin: 0 auto; 
+           text-align: center;
+        }
+    }
+}
--- a/template/m.yohobuy.com/actions/index/shoppingCart/index.phtml
View file @7bb68f4
+++ b/template/m.yohobuy.com/actions/index/shoppingCart/index.phtml
View file @7bb68f4
 {{> layout/header}}
-<div id="mainCart" class="shopping-cart-page yoho-page">
+<div id="mainCart" class="shopping-cart-page yoho-page" style="display: none;">
+
     {{# shoppingCart}}
         {{#if cartNav}}
             <ul class="cart-nav clearfix">
@@ -45,7 +46,6 @@
     {{/ shoppingCart}}
 </div>
-
 <div id="advanceBuy" class="shopping-cart-page yoho-page hide">
 {{# shoppingCart}}
     {{# commonCart}}
@@ -61,4 +61,13 @@
 {{/ shoppingCart}}
 </div>
+<div class="shopping-cart-zero yoho-page">
+    <div class="cart-zero">
+        <i class="iconfont">&#xe62c</i>
+        <p>您的购物车暂无商品</p>
+        <a href="">随便逛逛</a>
+    </div>
+    {{> product/recommend-for-you}}
+</div>
+
 {{> layout/footer}}
--- a/template/m.yohobuy.com/actions/index/shoppingCart/order-ensure.phtml
View file @7bb68f4
+++ b/template/m.yohobuy.com/actions/index/shoppingCart/order-ensure.phtml
View file @7bb68f4
 {{> layout/header}}
 <div class="order-ensure-page yoho-page">
     {{# orderEnsure}}
-        <a class="address-wrap block" href="/shoppingCart/selectAddress">
+        <a class="address-wrap block" href="/shoppingCart/selectAddress" data-address-id="{{addressId}}">
             <p class="infos">
                 收货地址
                 <span class="per-info">{{name}} {{phoneNum}}</span>
--- a/template/m.yohobuy.com/partials/layout/use.phtml
View file @7bb68f4
+++ b/template/m.yohobuy.com/partials/layout/use.phtml
View file @7bb68f4
@@ -206,6 +206,7 @@
 {{#if shoppingCartPage}}
 <script>
     seajs.use('js/shopping-cart/cart');
+    seajs.use('js/product/recommend-for-you');
 </script>
 {{/if}}
 {{#if giftAdvancePage}}
--- a/template/m.yohobuy.com/partials/shopping-cart/chose-panel.phtml
View file @7bb68f4
+++ b/template/m.yohobuy.com/partials/shopping-cart/chose-panel.phtml
View file @7bb68f4
@@ -25,7 +25,7 @@
                     <span>颜色</span>
                     <ul class="clearfix" data-type="color">
                         {{# colors}}
-                            <li class="block {{#if chosed}}chosed{{/if}} {{#unless colorNum}}disable{{/unless}}" data-id={{id}} data-numstr="{{sizeNumStr}}">
+                            <li class="block {{#if chosed}}chosed{{/if}} {{#unless colorNum}}zero-stock{{/unless}}" data-num="{{colorNum}}" data-numstr="{{sizeNumStr}}">
                                 {{name}}
                             </li>
                         {{/ colors}}
@@ -35,7 +35,7 @@
                     <span>尺码</span>                  
                     <ul class="clearfix" data-type="size" >
                         {{# sizes}}
-                            <li class="block {{#if chosed}}chosed{{/if}} {{#unless sizeNum}}disable{{/unless}}" data-id={{id}} data-numstr="{{colorNumStr}}">
+                            <li class="block {{#if chosed}}chosed{{/if}} {{#unless sizeNum}}zero-stock{{/unless}}" data-id={{id}} data-num="{{sizeNum}}" data-numstr="{{colorNumStr}}">
                                 {{name}}
                             </li>
                         {{/ sizes}}
--- a/yohobuy/m.yohobuy.com/application/controllers/ShoppingCart.php
View file @7bb68f4
+++ b/yohobuy/m.yohobuy.com/application/controllers/ShoppingCart.php
View file @7bb68f4
@@ -195,7 +195,7 @@ class ShoppingCartController extends AbstractAction
 			'orderEnsurePage' => true,
 			'orderEnsure' => CartModel::cartPay($uid, $cartType, $cookieData)
 		);
-
+        // var_dump($data);
 		$this->_view->display('order-ensure', $data);
 	}