Authored by 梁志锋

购物车功能开发

@@ -5,6 +5,7 @@ @@ -5,6 +5,7 @@
5 */ 5 */
6 6
7 var $ = require('jquery'), 7 var $ = require('jquery'),
  8 + lazyLoad = require('yoho.lazyload'),
8 Hammer = require('yoho.hammer'); 9 Hammer = require('yoho.hammer');
9 10
10 var $cartContent = $('.cart-content'); 11 var $cartContent = $('.cart-content');
@@ -13,6 +14,8 @@ var navHammer; @@ -13,6 +14,8 @@ var navHammer;
13 14
14 require('./good'); 15 require('./good');
15 16
  17 +lazyLoad($('img.lazy'));
  18 +
16 navHammer = new Hammer(document.getElementsByClassName('cart-nav')[0]); 19 navHammer = new Hammer(document.getElementsByClassName('cart-nav')[0]);
17 navHammer.on('tap', function(e) { 20 navHammer.on('tap', function(e) {
18 var $this = $(e.target).closest('li'); 21 var $this = $(e.target).closest('li');
@@ -8,78 +8,151 @@ var $ = require('jquery'), @@ -8,78 +8,151 @@ var $ = require('jquery'),
8 ellipsis = require('mlellipsis'), 8 ellipsis = require('mlellipsis'),
9 lazyLoad = require('yoho.lazyload'); 9 lazyLoad = require('yoho.lazyload');
10 10
11 -var chosePanel = require('./chose-panel'); 11 +var dialog = require('../me/dialog'),
  12 + tip = require('../plugin/tip');
12 13
13 -var $curDelPanel; 14 +var $names;
14 15
15 -//删除面板显示后任何点击行为都将触发隐藏面板  
16 -function docTouchEvt() {  
17 - $curDelPanel && $curDelPanel.addClass('hide'); 16 +//chosePanel = require('./chose-panel');
18 17
19 - //  
20 - $(document).off('touchstart', docTouchEvt);  
21 -} 18 +var cartType = 'ordinary';
  19 +
  20 +//var $curDelPanel;
  21 +
  22 +////删除面板显示后任何点击行为都将触发隐藏面板
  23 +//function docTouchEvt() {
  24 +// $curDelPanel && $curDelPanel.addClass('hide');
  25 +//
  26 +// //
  27 +// $(document).off('touchstart', docTouchEvt);
  28 +//}
22 29
23 ellipsis.init(); 30 ellipsis.init();
24 31
25 -lazyLoad($('.lazy')); 32 +lazyLoad({
  33 + try_again_css: 'order-failure'
  34 +});
26 35
27 -$('.name')[0].mlellipsis(2); 36 +$names = $('.name');
  37 +if ($names.length > 0) {
  38 + $names[0].mlellipsis(2);
  39 +}
28 40
29 //TIP:事件委托在.cart-goods,商品列表的容器统一需要有.cart-goods 41 //TIP:事件委托在.cart-goods,商品列表的容器统一需要有.cart-goods
30 $('.cart-goods').on('touchstart', '.checkbox', function() { 42 $('.cart-goods').on('touchstart', '.checkbox', function() {
31 - var $this = $(this);  
32 -  
33 - if ($this.hasClass('icon-cb-checked')) {  
34 - $this.removeClass('icon-cb-checked').addClass('icon-checkbox');  
35 - } else {  
36 - $this.removeClass('icon-checkbox').addClass('icon-cb-checked');  
37 - }  
38 -}).on('touchstart', '.icon-edit', function() {  
39 - var id = $(this).closest('.shopping-cart-good').data('id'); 43 + var $this = $(this),
  44 + id = $(this).closest('.shopping-cart-good').data('id');
40 45
41 $.ajax({ 46 $.ajax({
42 type: 'GET', 47 type: 'GET',
43 - url: '/shoppingCart/goodinfo', 48 + url: '/shoppingCart/select',
44 data: { 49 data: {
45 id: id 50 id: id
46 - },  
47 - success: function(data) {  
48 - if (data.code === 200) {  
49 - chosePanel.show(data.data); 51 + }
  52 + }).then(function(data) {
  53 + if (data.code === 200) {
  54 + if ($this.hasClass('icon-cb-checked')) {
  55 + $this.removeClass('icon-cb-checked').addClass('icon-checkbox');
  56 + } else {
  57 + $this.removeClass('icon-checkbox').addClass('icon-cb-checked');
50 } 58 }
51 } 59 }
  60 + $.ajax({
  61 + type: 'GET',
  62 + url: '/shoppingCart/getCartData',
  63 + data: {
  64 + id: id
  65 + },
  66 + success: function(data) {
  67 + if (data) {
  68 + $('#good-totalprice').html('¥' + data.commonCart.price);
  69 + $('#good-activityPrice').html('¥' + data.commonCart.activityPrice);
  70 + $('#good-total').html(data.commonCart.count + '件总计:¥' + data.commonCart.sumPrice);
  71 + }
  72 + },
  73 + error: function() {
  74 + tip.show('网络错误');
  75 + }
  76 + });
  77 +
  78 + }).fail(function() {
  79 + tip.show('网络错误');
52 }); 80 });
  81 +}).on('touchstart', '.icon-edit', function() {
  82 +
53 }).on('touchstart', '.icon-del', function(e) { 83 }).on('touchstart', '.icon-del', function(e) {
  84 + var $this = $(this);
  85 +
54 e.stopPropagation(); 86 e.stopPropagation();
55 87
56 //手动触发docTouchEvt清除因点击到del按钮上而被阻止冒泡到doc上的事件从而清除已打开的删除面板 88 //手动触发docTouchEvt清除因点击到del按钮上而被阻止冒泡到doc上的事件从而清除已打开的删除面板
57 - docTouchEvt();  
58 -  
59 - $curDelPanel = $(this).closest('.shopping-cart-good').children('.opt-panel').removeClass('hide');  
60 -  
61 - $(document).on('touchstart', docTouchEvt);  
62 -}).on('touchstart', '.opt-panel', function() {  
63 - var $this = $(this),  
64 - id = $this.closest('.shopping-cart-good').data('id'),  
65 - url;  
66 -  
67 - if ($this.closest('.put-in-favorite').length > 0) {  
68 -  
69 - //移入收藏夹  
70 - url = '/shoppingCart/col';  
71 - } else {  
72 -  
73 - //删除  
74 - url = '/shoppingCart/del';  
75 - } 89 + //docTouchEvt();
  90 + //
  91 + //$curDelPanel = $(this).closest('.shopping-cart-good').children('.opt-panel').removeClass('hide');
  92 + //
  93 + //$(document).on('touchstart', docTouchEvt);
76 94
77 - $.ajax({  
78 - type: 'POST',  
79 - url: url,  
80 - data: {  
81 - id: id 95 + dialog.showDialog({
  96 + dialogText: '您确定要从购物车中删除吗?',
  97 + hasFooter: {
  98 + leftBtnText: '取消',
  99 + rightBtnText: '确定'
82 } 100 }
  101 + }, function() {
  102 + var id = $this.closest('.shopping-cart-good').data('id');
  103 +
  104 + $.ajax({
  105 + method: 'post',
  106 + url: '/shoppingCart/del',
  107 + data: {
  108 + id: id
  109 + }
  110 + }).then(function(data) {
  111 + if (data.code === 200) {
  112 + dialog.showDialog({
  113 + dialogText: '删除成功',
  114 + autoHide: true,
  115 + fast: true
  116 + });
  117 + history.go(0);
  118 + }
  119 + }).fail(function() {
  120 + dialog.showDialog({
  121 + autoHide: true,
  122 + dialogText: '网络错误~'
  123 + });
  124 + });
83 }); 125 });
  126 +
  127 +});
  128 +
  129 +// .on('touchstart', '.opt-panel', function() {
  130 +// var $this = $(this),
  131 +// id = $this.closest('.shopping-cart-good').data('id'),
  132 +// url;
  133 +//
  134 +// if ($this.closest('.put-in-favorite').length > 0) {
  135 +//
  136 +// //移入收藏夹
  137 +// url = '/shoppingCart/col';
  138 +// } else {
  139 +//
  140 +// //删除
  141 +// url = '/shoppingCart/del';
  142 +// }
  143 +//
  144 +// $.ajax({
  145 +// type: 'POST',
  146 +// url: url,
  147 +// data: {
  148 +// id: id
  149 +// }
  150 +// });
  151 +//})
  152 +
  153 +
  154 +$('.btn-balance').on('touchend', function() {
  155 + window.location.href = '/shoppingCart/orderEnsure?cartType=' + cartType;
84 }); 156 });
85 157
  158 +
@@ -32,26 +32,26 @@ @@ -32,26 +32,26 @@
32 <div class="price-compute"> 32 <div class="price-compute">
33 <p class="sum-price"> 33 <p class="sum-price">
34 <span class="title">总价</span> 34 <span class="title">总价</span>
35 - ¥{{price}} 35 + <span id="good-totalprice">¥{{price}}</span>
36 </p> 36 </p>
37 <p class="activity-price"> 37 <p class="activity-price">
38 <span class="title"> 38 <span class="title">
39 活动价 39 活动价
40 <i class="minus">-</i> 40 <i class="minus">-</i>
41 </span> 41 </span>
42 - ¥{{activityPrice}} 42 + <span id="good-activityPrice">¥{{activityPrice}}</span>
43 </p> 43 </p>
44 </div> 44 </div>
45 45
46 <div class="balance"> 46 <div class="balance">
47 <span class="iconfont icon-cb-checked"></span> 47 <span class="iconfont icon-cb-checked"></span>
48 <p> 48 <p>
49 - <span> 49 + <span id="good-total">
50 {{count}}件总计:¥{{sumPrice}} 50 {{count}}件总计:¥{{sumPrice}}
51 </span> 51 </span>
52 <span class="tip">(不含运费)</span> 52 <span class="tip">(不含运费)</span>
53 </p> 53 </p>
54 - <button class="btn-balance"> 54 + <a class="btn-balance">
55 结算 55 结算
56 - </button> 56 + </a>
57 </div> 57 </div>
@@ -22,6 +22,9 @@ @@ -22,6 +22,9 @@
22 <span class="price"> 22 <span class="price">
23 ¥{{price}} 23 ¥{{price}}
24 </span> 24 </span>
  25 + <span class="price">
  26 + ¥{{salePrice}}
  27 + </span>
25 <span class="count"> 28 <span class="count">
26 ×{{count}} 29 ×{{count}}
27 </span> 30 </span>
@@ -51,7 +51,7 @@ @@ -51,7 +51,7 @@
51 </p> 51 </p>
52 </div> 52 </div>
53 </div> 53 </div>
54 - <div class="opt-panel hide"> 54 + <!--<div class="opt-panel hide">
55 <div class="put-in-favorite"> 55 <div class="put-in-favorite">
56 <span class="iconfont">&#xe622;</span> 56 <span class="iconfont">&#xe622;</span>
57 <span>移入</span> 57 <span>移入</span>
@@ -61,5 +61,5 @@ @@ -61,5 +61,5 @@
61 <span class="iconfont">&#xe626;</span> 61 <span class="iconfont">&#xe626;</span>
62 删除 62 删除
63 </div> 63 </div>
64 - </div> 64 + </div>-->
65 </div> 65 </div>