cart-color-panel.js
4.69 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
/**
* Created by yoho on 2017-01-05.
*/
var $ = require('yoho-jquery'),
capi = require('./cart-api'),
dialog = require('../common/dialog'),
Alert = dialog.Alert,
$cartListWrap = $('#Y_CartListWrap'),
selColorWinTpl = require('hbs/cart/select-color-panel.hbs'),
ColorPanelAction;
$(document).bind('click', function(e) {
var target = $(e.target);
if (target.closest('.pay-pro-detail').length === 0 && target.closest('.goods-choose-box').length === 0) {
$('.goods-choose-box').hide();
e.stopPropagation();
}
});
function renderAndShowSelWin($item, pinfo) {
$item.find('.goods-choose-box').remove();
$(selColorWinTpl(pinfo)).appendTo($item).show();
}
ColorPanelAction = {
showColorSizePanel: function() {
var $this = $(this);
var $item = $this.closest('li[data-role="pitem"]');
var pinfo = $this.data('_p_info');
var $selWin = $item.find('.goods-choose-box');
var pid = $item.data('pid');
var skn = $item.data('skn');
var sku = $item.data('id');
var defaultInfo = {
color: $item.data('color'),
size: $item.data('size'),
pid: pid,
sku: sku,
skn: skn
};
$cartListWrap.find('.pay-pro-detail').removeClass('active');
if ($selWin && $selWin.length && $selWin.is(':visible')) {
$selWin.hide();
return;
}
$item.find('.pay-pro-detail').addClass('active');
$cartListWrap.find('.goods-choose-box').hide();
if (!pinfo) {
capi.getProductInfo(pid, skn).done(function(productInfo) {
pinfo = capi.parseProductInfo(productInfo, defaultInfo);
$this.data('_p_info', pinfo);
renderAndShowSelWin($item, pinfo);
}).fail(function() {
new Alert('此商品无法编辑颜色和尺寸').show();
});
return;
}
renderAndShowSelWin($item, pinfo);
},
editColorOrSize: function() {
var $this = $(this);
var $item = $this.closest('li[data-role="pitem"]');
// var pid = $item.data('pid');
var oldSku = $item.data('id');
var $size = $this.closest('.goods-choose-box').find('.choose-size .dt.active');
var newSku = $size.data('sku');
var newSkn = $this.closest('.goods-info').data('skn');
var promotionId = $item.data('promotionid');
// 没有重新选择颜色-尺码,则不用重新请求显示
if (!oldSku || !newSku || oldSku === newSku) {
ColorPanelAction._hideColorSizePanel($item);
return false;
}
// 加价购更换
if ($item.data('isgift') || $item.data('ispricegift')) {
return capi.updateCartGiftItem(promotionId, newSkn, newSku);
}
capi.updateCartItem(newSku, oldSku);
},
_hideColorSizePanel: function($item) {
$item.find('.goods-choose-box').hide();
$item.find('.pay-pro-detail').removeClass('active');
},
hideColorSizePanel: function(event) {
var $this = $(this);
event.stopPropagation();
ColorPanelAction._hideColorSizePanel($this.closest('li[data-role="pitem"]'));
},
selectColor: function() {
var $this = $(this);
var index = $this.parent().find('.dt').index($this);
var $srows = $this.closest('.goods-info').find('.choose-size .size-row');
var $bigImgs = $this.closest('.goods-choose-box').find('.goods-info-bigImg .bigImg');
if ($this.hasClass('active') || $this.hasClass('disabled')) {
return;
}
$this.siblings('.dt').removeClass('active');
$this.addClass('active');
$srows.find('.dt').removeClass('active');
$srows.addClass('hide');
$srows.eq(index).removeClass('hide');
$bigImgs.addClass('hide');
$bigImgs.eq(index).removeClass('hide');
},
selectSize: function() {
var $this = $(this);
if ($this.hasClass('disabled')) {
return;
}
$this.siblings('.dt').removeClass('active');
$this.addClass('active');
}
};
/** 重新选择商品颜色尺码 **/
$cartListWrap.on('click', 'li[data-role="pitem"] .pay-pro-detail', ColorPanelAction.showColorSizePanel);
$cartListWrap.on('click', 'li[data-role="pitem"] .button-cancel', ColorPanelAction.hideColorSizePanel);
$cartListWrap.on('click', 'li[data-role="pitem"] .button-sure', ColorPanelAction.editColorOrSize);
$cartListWrap.on('click', 'li[data-role="pitem"] .goods-choose-box .choose-color .dt', ColorPanelAction.selectColor);
$cartListWrap.on('click', 'li[data-role="pitem"] .goods-choose-box .choose-size .dt', ColorPanelAction.selectSize);