...
|
...
|
@@ -8,747 +8,764 @@ var $ = require('yoho-jquery'), |
|
|
lazyLoad = require('yoho-jquery-lazyload'),
|
|
|
Handlebars = require('yoho-handlebars');
|
|
|
|
|
|
var $imgShow = $('#img-show'),
|
|
|
$thumbs = $('#thumbs > .thumb-wrap');
|
|
|
var loadHeaderCompleted = $.Callbacks(); // eslint-disable-line
|
|
|
|
|
|
var $size = $('#sizes'),
|
|
|
$sizes = $size.children('.size'),
|
|
|
$sizeWarn = $size.find('.size-warn'),
|
|
|
$colorSizeTip = $size.children('.color-size-tip');
|
|
|
loadHeaderCompleted.add(function() {
|
|
|
var $imgShow = $('#img-show'),
|
|
|
$thumbs = $('#thumbs > .thumb-wrap');
|
|
|
|
|
|
var $num = $('#num'),
|
|
|
$plusNum = $('#plus-num'),
|
|
|
$minusNum = $('#minus-num');
|
|
|
var $size = $('#sizes'),
|
|
|
$sizes = $size.children('.size'),
|
|
|
$sizeWarn = $size.find('.size-warn'),
|
|
|
$colorSizeTip = $size.children('.color-size-tip');
|
|
|
|
|
|
var $addToCart = $('#add-to-cart'),
|
|
|
$soldOut = $('#sold-out');
|
|
|
var $num = $('#num'),
|
|
|
$plusNum = $('#plus-num'),
|
|
|
$minusNum = $('#minus-num');
|
|
|
|
|
|
var $lcContainer = $('.lc-container'),
|
|
|
$itemBuy = $('.item-buy');
|
|
|
var $addToCart = $('#add-to-cart'),
|
|
|
$soldOut = $('#sold-out');
|
|
|
|
|
|
var $descColor = $('#desc-color');
|
|
|
var $lcContainer = $('.lc-container'),
|
|
|
$itemBuy = $('.item-buy');
|
|
|
|
|
|
var thumbsLoaded = {};
|
|
|
var $descColor = $('#desc-color');
|
|
|
|
|
|
var $main = $('.main'),
|
|
|
id = $main.data('id'),
|
|
|
isTicket = $('input[name="isTicket"]').length > 0 && $('input[name="isTicket"]').val() === 'true';
|
|
|
var thumbsLoaded = {};
|
|
|
|
|
|
var maxStock = -1; // 记录当前选中的颜色-尺码的库存量,若为-1,代表未选择尺码
|
|
|
var $main = $('.main'),
|
|
|
id = $main.data('id'),
|
|
|
isTicket = $('input[name="isTicket"]').length > 0 && $('input[name="isTicket"]').val() === 'true';
|
|
|
|
|
|
var SLIDETIME = 200;
|
|
|
var maxStock = -1; // 记录当前选中的颜色-尺码的库存量,若为-1,代表未选择尺码
|
|
|
|
|
|
var colTxt = {
|
|
|
def: '收藏商品',
|
|
|
coled: '已收藏',
|
|
|
hover: '取消收藏'
|
|
|
};
|
|
|
var SLIDETIME = 200;
|
|
|
|
|
|
var Alert = require('../common/dialog').Alert;
|
|
|
var colTxt = {
|
|
|
def: '收藏商品',
|
|
|
coled: '已收藏',
|
|
|
hover: '取消收藏'
|
|
|
};
|
|
|
|
|
|
require('./detail/latest-walk');
|
|
|
var Alert = require('../common/dialog').Alert;
|
|
|
|
|
|
require('../plugins/share');
|
|
|
function imgShow(src) {
|
|
|
$imgShow.attr('src', src);
|
|
|
}
|
|
|
|
|
|
require('../common');
|
|
|
/**
|
|
|
* 获取当前选择的商品数目
|
|
|
* @return [Number]
|
|
|
*/
|
|
|
function getNum() {
|
|
|
return +$num.text();
|
|
|
}
|
|
|
|
|
|
function imgShow(src) {
|
|
|
$imgShow.attr('src', src);
|
|
|
}
|
|
|
// 重置Num显示为1
|
|
|
function resetNum() {
|
|
|
$num.text('1');
|
|
|
|
|
|
/**
|
|
|
* 获取当前选择的商品数目
|
|
|
* @return [Number]
|
|
|
*/
|
|
|
function getNum() {
|
|
|
return +$num.text();
|
|
|
}
|
|
|
|
|
|
// 重置Num显示为1
|
|
|
function resetNum() {
|
|
|
$num.text('1');
|
|
|
|
|
|
// +-按钮状态重置
|
|
|
if (maxStock === 1 || maxStock === 0) {
|
|
|
|
|
|
// 数目为1/0时
|
|
|
$plusNum.addClass('dis');
|
|
|
$minusNum.addClass('dis');
|
|
|
} else {
|
|
|
$plusNum.removeClass('dis');
|
|
|
$minusNum.addClass('dis');
|
|
|
// +-按钮状态重置
|
|
|
if (maxStock === 1 || maxStock === 0) {
|
|
|
|
|
|
// 数目为1/0时
|
|
|
$plusNum.addClass('dis');
|
|
|
$minusNum.addClass('dis');
|
|
|
} else {
|
|
|
$plusNum.removeClass('dis');
|
|
|
$minusNum.addClass('dis');
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 加入购物车和已售罄状态控制
|
|
|
function switchBtnStatus($color) {
|
|
|
if ($itemBuy.length === 0) {
|
|
|
// 加入购物车和已售罄状态控制
|
|
|
function switchBtnStatus($color) {
|
|
|
if ($itemBuy.length === 0) {
|
|
|
|
|
|
// 全部售罄,按钮状态不变
|
|
|
return;
|
|
|
}
|
|
|
// 全部售罄,按钮状态不变
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 选中的商品存量为0或者某个颜色的total为0
|
|
|
if (maxStock === 0 || ($color && ~~$color.data('total') === 0)) {
|
|
|
$itemBuy.addClass('hide'); // 隐藏加入购物车、即将开始、立即购买等相同位置的按钮
|
|
|
$soldOut.removeClass('hide');
|
|
|
} else {
|
|
|
// 选中的商品存量为0或者某个颜色的total为0
|
|
|
if (maxStock === 0 || ($color && ~~$color.data('total') === 0)) {
|
|
|
$itemBuy.addClass('hide'); // 隐藏加入购物车、即将开始、立即购买等相同位置的按钮
|
|
|
$soldOut.removeClass('hide');
|
|
|
} else {
|
|
|
|
|
|
// 包括默认的-1情况下
|
|
|
$itemBuy.removeClass('hide');
|
|
|
$soldOut.addClass('hide');
|
|
|
// 包括默认的-1情况下
|
|
|
$itemBuy.removeClass('hide');
|
|
|
$soldOut.addClass('hide');
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// size warn
|
|
|
function showSizeWarn() {
|
|
|
$sizes.not('.hide').children('.size-warn').removeClass('hide');
|
|
|
}
|
|
|
// size warn
|
|
|
function showSizeWarn() {
|
|
|
$sizes.not('.hide').children('.size-warn').removeClass('hide');
|
|
|
}
|
|
|
|
|
|
// size title
|
|
|
(function() {
|
|
|
var $sizeTitleJson = $('#size-title-json'),
|
|
|
jsonHtml = $sizeTitleJson.html(),
|
|
|
sizeTitle;
|
|
|
// size title
|
|
|
(function() {
|
|
|
var $sizeTitleJson = $('#size-title-json'),
|
|
|
jsonHtml = $sizeTitleJson.html(),
|
|
|
sizeTitle;
|
|
|
|
|
|
if (jsonHtml === '') {
|
|
|
return;
|
|
|
}
|
|
|
if (jsonHtml === '') {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
sizeTitle = $.parseJSON(jsonHtml);
|
|
|
sizeTitle = $.parseJSON(jsonHtml);
|
|
|
|
|
|
// 数据获取后删除
|
|
|
$sizeTitleJson.remove();
|
|
|
// 数据获取后删除
|
|
|
$sizeTitleJson.remove();
|
|
|
|
|
|
$sizes.children('li').each(function() {
|
|
|
var $this = $(this),
|
|
|
key = $this.data('name');
|
|
|
$sizes.children('li').each(function() {
|
|
|
var $this = $(this),
|
|
|
key = $this.data('name');
|
|
|
|
|
|
$this.data('title', sizeTitle[key]);
|
|
|
});
|
|
|
}());
|
|
|
$this.data('title', sizeTitle[key]);
|
|
|
});
|
|
|
}());
|
|
|
|
|
|
// 初始化thumbsLoaded
|
|
|
thumbsLoaded[$('.colors .focus').index()] = true;
|
|
|
require('./detail/latest-walk');
|
|
|
|
|
|
// 品牌收藏
|
|
|
$('#brand-favour').click(function() {
|
|
|
var $this = $(this);
|
|
|
require('../plugins/share');
|
|
|
|
|
|
$.ajax({
|
|
|
type: 'POST',
|
|
|
url: '/product/index/favoriteBrand',
|
|
|
data: {
|
|
|
brandId: $this.data('id')
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
if (data.code === 200) {
|
|
|
$this.toggleClass('coled');
|
|
|
} else if (data.code === 403) {
|
|
|
location.href = data.data.url;
|
|
|
}
|
|
|
require('../common');
|
|
|
|
|
|
// 品牌收藏
|
|
|
$('#brand-favour').click(function() {
|
|
|
var $this = $(this);
|
|
|
|
|
|
$.ajax({
|
|
|
type: 'POST',
|
|
|
url: '/product/index/favoriteBrand',
|
|
|
data: {
|
|
|
brandId: $this.data('id')
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
if (data.code === 200) {
|
|
|
$this.toggleClass('coled');
|
|
|
} else if (data.code === 403) {
|
|
|
location.href = data.data.url;
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 颜色
|
|
|
$('.colors').on('click', 'li', function() {
|
|
|
var $this = $(this),
|
|
|
index = $this.index();
|
|
|
// 颜色
|
|
|
$('.colors').on('click', 'li', function() {
|
|
|
var $this = $(this),
|
|
|
index = $this.index();
|
|
|
|
|
|
var $imgs;
|
|
|
var $imgs;
|
|
|
|
|
|
// 初始化color-size显示或隐藏
|
|
|
$colorSizeTip.addClass('hide');
|
|
|
// 初始化color-size显示或隐藏
|
|
|
$colorSizeTip.addClass('hide');
|
|
|
|
|
|
// 隐藏尺码提示
|
|
|
$sizeWarn.addClass('hide');
|
|
|
// 隐藏尺码提示
|
|
|
$sizeWarn.addClass('hide');
|
|
|
|
|
|
maxStock = -1;
|
|
|
maxStock = -1;
|
|
|
|
|
|
if ($this.hasClass('focus')) {
|
|
|
if ($this.hasClass('focus')) {
|
|
|
|
|
|
// 已获取焦点的颜色再次点击,清除尺码的选中
|
|
|
$sizes.eq(index).children('li').removeClass('focus');
|
|
|
} else {
|
|
|
// 已获取焦点的颜色再次点击,清除尺码的选中
|
|
|
$sizes.eq(index).children('li').removeClass('focus');
|
|
|
} else {
|
|
|
|
|
|
// 未获取焦点,选择尺码
|
|
|
$this.siblings('.focus').removeClass('focus');
|
|
|
$this.addClass('focus');
|
|
|
// 未获取焦点,选择尺码
|
|
|
$this.siblings('.focus').removeClass('focus');
|
|
|
$this.addClass('focus');
|
|
|
|
|
|
// 切换图片显示
|
|
|
$thumbs.not('.hide').addClass('hide');
|
|
|
$imgs = $thumbs.eq(index).removeClass('hide').find('img');
|
|
|
// 切换图片显示
|
|
|
$thumbs.not('.hide').addClass('hide');
|
|
|
$imgs = $thumbs.eq(index).removeClass('hide').find('img');
|
|
|
|
|
|
if (typeof thumbsLoaded[index] === 'undefined') {
|
|
|
if (typeof thumbsLoaded[index] === 'undefined') {
|
|
|
|
|
|
// trigger layLoad
|
|
|
lazyLoad($imgs, {
|
|
|
event: 'sporty'
|
|
|
});
|
|
|
// trigger layLoad
|
|
|
lazyLoad($imgs, {
|
|
|
event: 'sporty'
|
|
|
});
|
|
|
|
|
|
$imgs.trigger('sporty');
|
|
|
$imgs.trigger('sporty');
|
|
|
|
|
|
thumbsLoaded[index] = true;
|
|
|
}
|
|
|
thumbsLoaded[index] = true;
|
|
|
}
|
|
|
|
|
|
imgShow($imgs.first().data('shower'));
|
|
|
imgShow($imgs.first().data('shower'));
|
|
|
|
|
|
// 切换详细信息的颜色显示
|
|
|
$descColor.text($this.data('color'));
|
|
|
// 切换详细信息的颜色显示
|
|
|
$descColor.text($this.data('color'));
|
|
|
|
|
|
// 切换尺码显示
|
|
|
$sizes.not('.hide').addClass('hide').children('li').removeClass('focus');
|
|
|
$sizes.eq(index).removeClass('hide');
|
|
|
// 切换尺码显示
|
|
|
$sizes.not('.hide').addClass('hide').children('li').removeClass('focus');
|
|
|
$sizes.eq(index).removeClass('hide');
|
|
|
|
|
|
// 是否展览票
|
|
|
if (isTicket) {
|
|
|
$sizes.eq(index).children('li').trigger('click');
|
|
|
$('.chose-size').addClass('hide');
|
|
|
// 是否展览票
|
|
|
if (isTicket) {
|
|
|
$sizes.eq(index).children('li').trigger('click');
|
|
|
$('.chose-size').addClass('hide');
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
resetNum();
|
|
|
switchBtnStatus($this);
|
|
|
});
|
|
|
|
|
|
// 缩略图鼠标移入显示
|
|
|
$('#thumbs').on('mouseenter', '.thumb', function() {
|
|
|
imgShow($(this).data('shower'));
|
|
|
});
|
|
|
resetNum();
|
|
|
switchBtnStatus($this);
|
|
|
});
|
|
|
|
|
|
// 尺码
|
|
|
$size.on('click', 'li', function() {
|
|
|
var $this = $(this);
|
|
|
// 缩略图鼠标移入显示
|
|
|
$('#thumbs').on('mouseenter', '.thumb', function() {
|
|
|
imgShow($(this).data('shower'));
|
|
|
});
|
|
|
|
|
|
if ($this.hasClass('focus')) {
|
|
|
return;
|
|
|
}
|
|
|
// 尺码
|
|
|
$size.on('click', 'li', function() {
|
|
|
var $this = $(this);
|
|
|
|
|
|
maxStock = +$this.data('num');
|
|
|
if ($this.hasClass('focus')) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
$this.siblings('.focus').removeClass('focus');
|
|
|
$this.addClass('focus');
|
|
|
maxStock = +$this.data('num');
|
|
|
|
|
|
$colorSizeTip.html($this.data('title')).removeClass('hide');
|
|
|
$this.siblings('.focus').removeClass('focus');
|
|
|
$this.addClass('focus');
|
|
|
|
|
|
$sizeWarn.addClass('hide');
|
|
|
$colorSizeTip.html($this.data('title')).removeClass('hide');
|
|
|
|
|
|
switchBtnStatus();
|
|
|
$sizeWarn.addClass('hide');
|
|
|
|
|
|
resetNum();
|
|
|
}).on('click', '.size-ruler', function() {
|
|
|
switchBtnStatus();
|
|
|
|
|
|
// 尺码帮助
|
|
|
resetNum();
|
|
|
}).on('click', '.size-ruler', function() {
|
|
|
|
|
|
$('body,html').animate({
|
|
|
scrollTop: $('.size-info').offset().top
|
|
|
}, 300);
|
|
|
});
|
|
|
// 尺码帮助
|
|
|
|
|
|
// 数量
|
|
|
$plusNum.click(function() {
|
|
|
var num = getNum();
|
|
|
$('body,html').animate({
|
|
|
scrollTop: $('.size-info').offset().top
|
|
|
}, 300);
|
|
|
});
|
|
|
|
|
|
if ($(this).hasClass('dis')) {
|
|
|
return;
|
|
|
}
|
|
|
// 数量
|
|
|
$plusNum.click(function() {
|
|
|
var num = getNum();
|
|
|
|
|
|
if (maxStock === -1) {
|
|
|
showSizeWarn();// 显示选择尺码提示
|
|
|
return;
|
|
|
}
|
|
|
if ($(this).hasClass('dis')) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 已售罄
|
|
|
if (maxStock === 0) {
|
|
|
return;
|
|
|
}
|
|
|
if (maxStock === -1) {
|
|
|
showSizeWarn();// 显示选择尺码提示
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (num === maxStock - 1) {
|
|
|
// 已售罄
|
|
|
if (maxStock === 0) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// +按钮不可点
|
|
|
$(this).addClass('dis');
|
|
|
}
|
|
|
if (num === maxStock - 1) {
|
|
|
|
|
|
// 数目为1时点+则移除-不可点状态
|
|
|
if (num === 1) {
|
|
|
$minusNum.removeClass('dis');
|
|
|
}
|
|
|
// +按钮不可点
|
|
|
$(this).addClass('dis');
|
|
|
}
|
|
|
|
|
|
$num.text(num + 1 > maxStock ? maxStock : num + 1);
|
|
|
}).on('selectstart', function() {
|
|
|
return false;
|
|
|
});
|
|
|
// 数目为1时点+则移除-不可点状态
|
|
|
if (num === 1) {
|
|
|
$minusNum.removeClass('dis');
|
|
|
}
|
|
|
|
|
|
$minusNum.click(function() {
|
|
|
var num = getNum();
|
|
|
$num.text(num + 1 > maxStock ? maxStock : num + 1);
|
|
|
}).on('selectstart', function() {
|
|
|
return false;
|
|
|
});
|
|
|
|
|
|
if ($(this).hasClass('dis')) {
|
|
|
return;
|
|
|
}
|
|
|
$minusNum.click(function() {
|
|
|
var num = getNum();
|
|
|
|
|
|
if (num === 2) {
|
|
|
$(this).addClass('dis');
|
|
|
}
|
|
|
if ($(this).hasClass('dis')) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (num === maxStock) {
|
|
|
if (num === 2) {
|
|
|
$(this).addClass('dis');
|
|
|
}
|
|
|
|
|
|
// 恢复+可点
|
|
|
$plusNum.removeClass('dis');
|
|
|
}
|
|
|
if (num === maxStock) {
|
|
|
|
|
|
$num.text(num - 1 < 0 ? 0 : num - 1);
|
|
|
}).on('selectstart', function() {
|
|
|
return false;
|
|
|
});
|
|
|
// 恢复+可点
|
|
|
$plusNum.removeClass('dis');
|
|
|
}
|
|
|
|
|
|
// 限购码
|
|
|
$('.get-lc:not(.dis)').hover(function() {
|
|
|
$lcContainer.removeClass('hide');
|
|
|
}, function() {
|
|
|
$lcContainer.addClass('hide');
|
|
|
});
|
|
|
$num.text(num - 1 < 0 ? 0 : num - 1);
|
|
|
}).on('selectstart', function() {
|
|
|
return false;
|
|
|
});
|
|
|
|
|
|
// 加入购物车
|
|
|
$addToCart.click(function() {
|
|
|
if (maxStock === -1) {
|
|
|
showSizeWarn();
|
|
|
return;
|
|
|
}
|
|
|
// 限购码
|
|
|
$('.get-lc:not(.dis)').hover(function() {
|
|
|
$lcContainer.removeClass('hide');
|
|
|
}, function() {
|
|
|
$lcContainer.addClass('hide');
|
|
|
});
|
|
|
|
|
|
$.ajax({
|
|
|
type: 'POST',
|
|
|
url: '/cart/index/add',
|
|
|
data: {
|
|
|
productSku: $('.size:not(.hide) li.focus').data('sku'),
|
|
|
buyNumber: getNum()
|
|
|
// 加入购物车
|
|
|
$addToCart.click(function() {
|
|
|
if (maxStock === -1) {
|
|
|
showSizeWarn();
|
|
|
return;
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
var code = data.code;
|
|
|
|
|
|
if (code === 200) {
|
|
|
$('#type-chose').slideUp(SLIDETIME);
|
|
|
$('#balance').slideDown(SLIDETIME);
|
|
|
$.ajax({
|
|
|
type: 'POST',
|
|
|
url: '/cart/index/add',
|
|
|
data: {
|
|
|
productSku: $('.size:not(.hide) li.focus').data('sku'),
|
|
|
buyNumber: getNum()
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
var code = data.code;
|
|
|
|
|
|
$('#cart-num').text(data.data.goods_count); // 更新数目
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
if (code === 200) {
|
|
|
$('#type-chose').slideUp(SLIDETIME);
|
|
|
$('#balance').slideDown(SLIDETIME);
|
|
|
|
|
|
// 收藏
|
|
|
$('#collect-product').click(function() {
|
|
|
var $this = $(this),
|
|
|
cancel;
|
|
|
$('#cart-num').text(data.data.goods_count); // 更新数目
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
if ($this.hasClass('coled')) {
|
|
|
cancel = true;
|
|
|
}
|
|
|
// 收藏
|
|
|
$('#collect-product').click(function() {
|
|
|
var $this = $(this),
|
|
|
cancel;
|
|
|
|
|
|
$.ajax({
|
|
|
type: 'POST',
|
|
|
url: '/product/item/togglecollect',
|
|
|
data: {
|
|
|
productId: id,
|
|
|
type: cancel ? 'cancel' : 'add'
|
|
|
if ($this.hasClass('coled')) {
|
|
|
cancel = true;
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
var code = data.code;
|
|
|
|
|
|
if (code === 200) {
|
|
|
$.ajax({
|
|
|
type: 'POST',
|
|
|
url: '/product/item/togglecollect',
|
|
|
data: {
|
|
|
productId: id,
|
|
|
type: cancel ? 'cancel' : 'add'
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
var code = data.code;
|
|
|
|
|
|
if (code === 200) {
|
|
|
|
|
|
$this.toggleClass('coled');
|
|
|
$this.toggleClass('coled');
|
|
|
|
|
|
if (cancel) {
|
|
|
$this.find('em').text(colTxt.def);
|
|
|
} else {
|
|
|
$this.find('em').text(colTxt.coled);
|
|
|
if (cancel) {
|
|
|
$this.find('em').text(colTxt.def);
|
|
|
} else {
|
|
|
$this.find('em').text(colTxt.coled);
|
|
|
}
|
|
|
} else if (code === 403) {
|
|
|
location.href = data.data.url;
|
|
|
}
|
|
|
} else if (code === 403) {
|
|
|
location.href = data.data.url;
|
|
|
});
|
|
|
}).hover(function() {
|
|
|
var $this = $(this);
|
|
|
|
|
|
if ($this.hasClass('coled')) {
|
|
|
$this.find('em').text(colTxt.hover);
|
|
|
}
|
|
|
}, function() {
|
|
|
var $this = $(this);
|
|
|
|
|
|
if ($this.hasClass('coled')) {
|
|
|
$this.find('em').text(colTxt.coled);
|
|
|
}
|
|
|
});
|
|
|
}).hover(function() {
|
|
|
var $this = $(this);
|
|
|
|
|
|
if ($this.hasClass('coled')) {
|
|
|
$this.find('em').text(colTxt.hover);
|
|
|
}
|
|
|
}, function() {
|
|
|
var $this = $(this);
|
|
|
// 继续购物
|
|
|
$('#keep-shopping').click(function() {
|
|
|
$('#type-chose').slideDown(SLIDETIME);
|
|
|
$('#balance').slideUp(SLIDETIME);
|
|
|
});
|
|
|
|
|
|
if ($this.hasClass('coled')) {
|
|
|
$this.find('em').text(colTxt.coled);
|
|
|
}
|
|
|
});
|
|
|
// 电子票立即购买
|
|
|
$('#buy-ticket').click(function() {
|
|
|
var sku,
|
|
|
buyNumber;
|
|
|
|
|
|
// 继续购物
|
|
|
$('#keep-shopping').click(function() {
|
|
|
$('#type-chose').slideDown(SLIDETIME);
|
|
|
$('#balance').slideUp(SLIDETIME);
|
|
|
});
|
|
|
if (maxStock === -1) {
|
|
|
showSizeWarn();
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 电子票立即购买
|
|
|
$('#buy-ticket').click(function() {
|
|
|
var sku,
|
|
|
buyNumber;
|
|
|
if ($(this).hasClass('dis')) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (maxStock === -1) {
|
|
|
showSizeWarn();
|
|
|
return;
|
|
|
}
|
|
|
sku = $('.size:not(.hide) li.focus').data('sku');
|
|
|
buyNumber = getNum();
|
|
|
|
|
|
if ($(this).hasClass('dis')) {
|
|
|
return;
|
|
|
}
|
|
|
$.ajax({
|
|
|
type: 'POST',
|
|
|
url: '/cart/index/setTicket',
|
|
|
data: {
|
|
|
productSku: sku,
|
|
|
buyNumber: buyNumber
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
var $ticketForm,
|
|
|
myAlert;
|
|
|
|
|
|
if (data.code * 1 === 200) {
|
|
|
$ticketForm = $('form[name="ticket-form"]');
|
|
|
$ticketForm.html(
|
|
|
'<input name="productSku" value="' + sku + '" />' +
|
|
|
'<input name="buyNumber" value="' + buyNumber + '" />'
|
|
|
);
|
|
|
$ticketForm.submit();
|
|
|
} else if (data.code * 1 === 401) {
|
|
|
document.location.href = data.message;
|
|
|
} else {
|
|
|
myAlert = new Alert(data.message);
|
|
|
myAlert.show();
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
sku = $('.size:not(.hide) li.focus').data('sku');
|
|
|
buyNumber = getNum();
|
|
|
// 立即购买
|
|
|
$('#buy-now').click(function() {
|
|
|
var sku,
|
|
|
base,
|
|
|
myAlert;
|
|
|
|
|
|
$.ajax({
|
|
|
type: 'POST',
|
|
|
url: '/cart/index/setTicket',
|
|
|
data: {
|
|
|
productSku: sku,
|
|
|
buyNumber: buyNumber
|
|
|
if (maxStock === -1) {
|
|
|
showSizeWarn();
|
|
|
return;
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
var $ticketForm,
|
|
|
myAlert;
|
|
|
|
|
|
if (data.code * 1 === 200) {
|
|
|
$ticketForm = $('form[name="ticket-form"]');
|
|
|
$ticketForm.html(
|
|
|
'<input name="productSku" value="' + sku + '" />' +
|
|
|
'<input name="buyNumber" value="' + buyNumber + '" />'
|
|
|
);
|
|
|
$ticketForm.submit();
|
|
|
} else if (data.code * 1 === 401) {
|
|
|
document.location.href = data.message;
|
|
|
} else {
|
|
|
myAlert = new Alert(data.message);
|
|
|
if ($(this).hasClass('dis')) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
base = $(this).data('base');
|
|
|
|
|
|
// 潮流尖货
|
|
|
if (!base) {
|
|
|
myAlert = new Alert('打开APP可抢购该商品哦~~');
|
|
|
myAlert.show();
|
|
|
return;
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 立即购买
|
|
|
$('#buy-now').click(function() {
|
|
|
var sku,
|
|
|
base,
|
|
|
myAlert;
|
|
|
sku = $sizes.find('.focus').data('sku');
|
|
|
|
|
|
if (maxStock === -1) {
|
|
|
showSizeWarn();
|
|
|
return;
|
|
|
}
|
|
|
if (sku && base) {
|
|
|
location.href = base + '?product_sku=' + sku;
|
|
|
}
|
|
|
});
|
|
|
|
|
|
if ($(this).hasClass('dis')) {
|
|
|
return;
|
|
|
}
|
|
|
// 按钮鼠标移入效果【dis状态的按钮状态不变】
|
|
|
$('.buy-btn').mouseover(function() {
|
|
|
if ($(this).hasClass('dis')) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
base = $(this).data('base');
|
|
|
$(this).addClass('hover');
|
|
|
}).mouseleave(function() {
|
|
|
$(this).removeClass('hover');
|
|
|
});
|
|
|
|
|
|
// 潮流尖货
|
|
|
if (!base) {
|
|
|
myAlert = new Alert('打开APP可抢购该商品哦~~');
|
|
|
myAlert.show();
|
|
|
return;
|
|
|
}
|
|
|
// 商品详情/材质洗涤切换
|
|
|
$('.description-material').on('click', '.title', function() {
|
|
|
var $this = $(this),
|
|
|
index = $this.index();
|
|
|
|
|
|
sku = $sizes.find('.focus').data('sku');
|
|
|
var $description = $('.description-content'),
|
|
|
$material = $('.material-content');
|
|
|
|
|
|
if (sku && base) {
|
|
|
location.href = base + '?product_sku=' + sku;
|
|
|
}
|
|
|
});
|
|
|
if ($this.hasClass('cur')) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 按钮鼠标移入效果【dis状态的按钮状态不变】
|
|
|
$('.buy-btn').mouseover(function() {
|
|
|
if ($(this).hasClass('dis')) {
|
|
|
return;
|
|
|
}
|
|
|
$this.addClass('cur');
|
|
|
$this.siblings('.cur').removeClass('cur');
|
|
|
|
|
|
$(this).addClass('hover');
|
|
|
}).mouseleave(function() {
|
|
|
$(this).removeClass('hover');
|
|
|
});
|
|
|
if (index === 0) {
|
|
|
|
|
|
// 商品详情/材质洗涤切换
|
|
|
$('.description-material').on('click', '.title', function() {
|
|
|
var $this = $(this),
|
|
|
index = $this.index();
|
|
|
// 商品信息
|
|
|
$description.slideDown(SLIDETIME);
|
|
|
$material.slideUp(SLIDETIME);
|
|
|
} else {
|
|
|
$description.slideUp(SLIDETIME);
|
|
|
$material.slideDown(SLIDETIME);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
var $description = $('.description-content'),
|
|
|
$material = $('.material-content');
|
|
|
// 售后服务
|
|
|
$('.after-service-switch').click(function() {
|
|
|
var $this = $(this),
|
|
|
$content = $this.next('.after-service-content');
|
|
|
|
|
|
if ($this.hasClass('cur')) {
|
|
|
return;
|
|
|
}
|
|
|
var html = {
|
|
|
def: '',
|
|
|
spread: ''
|
|
|
};
|
|
|
|
|
|
$this.addClass('cur');
|
|
|
$this.siblings('.cur').removeClass('cur');
|
|
|
if ($content.css('display') === 'none') {
|
|
|
$content.slideDown(SLIDETIME);
|
|
|
|
|
|
if (index === 0) {
|
|
|
$this.find('.triangle').html(html.spread);
|
|
|
} else {
|
|
|
$content.slideUp(SLIDETIME);
|
|
|
|
|
|
// 商品信息
|
|
|
$description.slideDown(SLIDETIME);
|
|
|
$material.slideUp(SLIDETIME);
|
|
|
} else {
|
|
|
$description.slideUp(SLIDETIME);
|
|
|
$material.slideDown(SLIDETIME);
|
|
|
}
|
|
|
});
|
|
|
$this.find('.triangle').html(html.def);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 售后服务
|
|
|
$('.after-service-switch').click(function() {
|
|
|
var $this = $(this),
|
|
|
$content = $this.next('.after-service-content');
|
|
|
|
|
|
var html = {
|
|
|
def: '',
|
|
|
spread: ''
|
|
|
};
|
|
|
// 商品详情区的热点
|
|
|
$.ajax({
|
|
|
type: 'GET',
|
|
|
url: '/product/detail/hotarea',
|
|
|
data: {
|
|
|
productId: id
|
|
|
}
|
|
|
}).then(function(html) {
|
|
|
$('#details-html').prepend(html);
|
|
|
|
|
|
if ($content.css('display') === 'none') {
|
|
|
$content.slideDown(SLIDETIME);
|
|
|
// 修正热区尺寸使居中
|
|
|
$('.hot-point-wrap > img').load(function() {
|
|
|
$(this).parent('.hot-point-wrap').width($(this).width());
|
|
|
});
|
|
|
|
|
|
$this.find('.triangle').html(html.spread);
|
|
|
} else {
|
|
|
$content.slideUp(SLIDETIME);
|
|
|
// Bind Hover event
|
|
|
$('.hot-point').hover(function() {
|
|
|
$(this).addClass('hover');
|
|
|
}, function() {
|
|
|
$(this).removeClass('hover');
|
|
|
});
|
|
|
});
|
|
|
|
|
|
$this.find('.triangle').html(html.def);
|
|
|
}
|
|
|
});
|
|
|
// 商品详情懒加载
|
|
|
lazyLoad($('#details-html img'));
|
|
|
|
|
|
// 只有一个尺码(多个或一个颜色)时默认选中第一个未售罄的颜色的第一个尺码
|
|
|
(function() {
|
|
|
var hasOnlyOneSize = true,
|
|
|
i;
|
|
|
|
|
|
// 商品详情区的热点
|
|
|
$.ajax({
|
|
|
type: 'GET',
|
|
|
url: '/product/detail/hotarea',
|
|
|
data: {
|
|
|
productId: id
|
|
|
}
|
|
|
}).then(function(html) {
|
|
|
$('#details-html').prepend(html);
|
|
|
for (i = 0; i < $sizes.length; i++) {
|
|
|
if ($sizes.eq(i).find('li').length !== 1) {
|
|
|
hasOnlyOneSize = false;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 修正热区尺寸使居中
|
|
|
$('.hot-point-wrap > img').load(function() {
|
|
|
$(this).parent('.hot-point-wrap').width($(this).width());
|
|
|
});
|
|
|
if (hasOnlyOneSize) {
|
|
|
$sizes.eq($('.colors .focus').index()).find('li').click();
|
|
|
}
|
|
|
}());
|
|
|
|
|
|
// Bind Hover event
|
|
|
$('.hot-point').hover(function() {
|
|
|
$(this).addClass('hover');
|
|
|
}, function() {
|
|
|
$(this).removeClass('hover');
|
|
|
});
|
|
|
});
|
|
|
// 咨询和评价
|
|
|
(function() {
|
|
|
var commentPage = 1,
|
|
|
consultPage = 1;
|
|
|
|
|
|
// 商品详情懒加载
|
|
|
lazyLoad($('#details-html img'));
|
|
|
var commentsTpl = Handlebars.compile($('#comments-tpl').html()),
|
|
|
consultsTpl = Handlebars.compile($('#consults-tpl').html());
|
|
|
|
|
|
// 只有一个尺码(多个或一个颜色)时默认选中第一个未售罄的颜色的第一个尺码
|
|
|
(function() {
|
|
|
var hasOnlyOneSize = true,
|
|
|
i;
|
|
|
var $commentsUl = $('#comments-ul'),
|
|
|
$consultsUl = $('#consults-ul');
|
|
|
|
|
|
for (i = 0; i < $sizes.length; i++) {
|
|
|
if ($sizes.eq(i).find('li').length !== 1) {
|
|
|
hasOnlyOneSize = false;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
var $commentNum = $('.comment-num'),
|
|
|
$consultNum = $('.consult-num');
|
|
|
|
|
|
if (hasOnlyOneSize) {
|
|
|
$sizes.eq($('.colors .focus').index()).find('li').click();
|
|
|
}
|
|
|
}());
|
|
|
var loadingComments,
|
|
|
loadingConsults;
|
|
|
|
|
|
// 咨询和评价
|
|
|
(function() {
|
|
|
var commentPage = 1,
|
|
|
consultPage = 1;
|
|
|
// 购买评价
|
|
|
function loadComments() {
|
|
|
if (loadingComments) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
var commentsTpl = Handlebars.compile($('#comments-tpl').html()),
|
|
|
consultsTpl = Handlebars.compile($('#consults-tpl').html());
|
|
|
loadingComments = true;
|
|
|
$.ajax({
|
|
|
type: 'GET',
|
|
|
url: '/product/detail/comment',
|
|
|
data: {
|
|
|
productId: id,
|
|
|
page: commentPage
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
var res;
|
|
|
|
|
|
var $commentsUl = $('#comments-ul'),
|
|
|
$consultsUl = $('#consults-ul');
|
|
|
if (data.code === 200) {
|
|
|
res = data.data;
|
|
|
|
|
|
var $commentNum = $('.comment-num'),
|
|
|
$consultNum = $('.consult-num');
|
|
|
if (res.length === 0) {
|
|
|
$commentsUl.next('.more-wrap').addClass('hide');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
var loadingComments,
|
|
|
loadingConsults;
|
|
|
// 更新总数显示
|
|
|
$commentNum.text(res[0].total);
|
|
|
|
|
|
// 购买评价
|
|
|
function loadComments() {
|
|
|
if (loadingComments) {
|
|
|
return;
|
|
|
$commentsUl.append(commentsTpl({
|
|
|
comments: res
|
|
|
}));
|
|
|
commentPage++;
|
|
|
}
|
|
|
}).always(function() {
|
|
|
loadingComments = false;
|
|
|
});
|
|
|
}
|
|
|
|
|
|
loadingComments = true;
|
|
|
$.ajax({
|
|
|
type: 'GET',
|
|
|
url: '/product/detail/comment',
|
|
|
data: {
|
|
|
productId: id,
|
|
|
page: commentPage
|
|
|
// 顾客咨询
|
|
|
function loadConsults() {
|
|
|
if (loadingConsults) {
|
|
|
return;
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
var res;
|
|
|
|
|
|
if (data.code === 200) {
|
|
|
res = data.data;
|
|
|
loadingConsults = true;
|
|
|
|
|
|
if (res.length === 0) {
|
|
|
$commentsUl.next('.more-wrap').addClass('hide');
|
|
|
return;
|
|
|
$.ajax({
|
|
|
type: 'GET',
|
|
|
url: '/product/detail/consult',
|
|
|
data: {
|
|
|
productId: id,
|
|
|
page: consultPage
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
var res;
|
|
|
|
|
|
// 更新总数显示
|
|
|
$commentNum.text(res[0].total);
|
|
|
if (data.code === 200) {
|
|
|
res = data.data;
|
|
|
|
|
|
$commentsUl.append(commentsTpl({
|
|
|
comments: res
|
|
|
}));
|
|
|
commentPage++;
|
|
|
}
|
|
|
}).always(function() {
|
|
|
loadingComments = false;
|
|
|
});
|
|
|
}
|
|
|
if (res.length === 0) {
|
|
|
$consultsUl.next('.more-wrap').addClass('hide');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 顾客咨询
|
|
|
function loadConsults() {
|
|
|
if (loadingConsults) {
|
|
|
return;
|
|
|
// 更新总数显示
|
|
|
$consultNum.text(res[0].total);
|
|
|
|
|
|
$consultsUl.append(consultsTpl({
|
|
|
consults: res
|
|
|
}));
|
|
|
consultPage++;
|
|
|
}
|
|
|
}).always(function() {
|
|
|
loadingConsults = false;
|
|
|
});
|
|
|
}
|
|
|
|
|
|
loadingConsults = true;
|
|
|
// 评价和咨询切换
|
|
|
$('.consult-comment').on('click', '.title', function() {
|
|
|
var $this = $(this),
|
|
|
index = $this.index();
|
|
|
|
|
|
$.ajax({
|
|
|
type: 'GET',
|
|
|
url: '/product/detail/consult',
|
|
|
data: {
|
|
|
productId: id,
|
|
|
page: consultPage
|
|
|
var $comments = $('.comments'),
|
|
|
$consults = $('.consults');
|
|
|
|
|
|
if ($this.hasClass('cur')) {
|
|
|
return;
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
var res;
|
|
|
|
|
|
if (data.code === 200) {
|
|
|
res = data.data;
|
|
|
$this.addClass('cur');
|
|
|
$this.siblings('.cur').removeClass('cur');
|
|
|
|
|
|
if (res.length === 0) {
|
|
|
$consultsUl.next('.more-wrap').addClass('hide');
|
|
|
return;
|
|
|
}
|
|
|
if (index === 0) {
|
|
|
|
|
|
// 更新总数显示
|
|
|
$consultNum.text(res[0].total);
|
|
|
// 咨询
|
|
|
$consults.slideDown(SLIDETIME);
|
|
|
$comments.slideUp(SLIDETIME);
|
|
|
} else {
|
|
|
$consults.slideUp(SLIDETIME);
|
|
|
$comments.slideDown(SLIDETIME);
|
|
|
}
|
|
|
}).on('click', '.load-more', function() {
|
|
|
var $this = $(this);
|
|
|
|
|
|
$consultsUl.append(consultsTpl({
|
|
|
consults: res
|
|
|
}));
|
|
|
consultPage++;
|
|
|
if ($this.hasClass('load-more-comments')) {
|
|
|
loadComments();
|
|
|
} else {
|
|
|
loadConsults();
|
|
|
}
|
|
|
}).always(function() {
|
|
|
loadingConsults = false;
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 评价和咨询切换
|
|
|
$('.consult-comment').on('click', '.title', function() {
|
|
|
var $this = $(this),
|
|
|
index = $this.index();
|
|
|
|
|
|
var $comments = $('.comments'),
|
|
|
$consults = $('.consults');
|
|
|
|
|
|
if ($this.hasClass('cur')) {
|
|
|
return;
|
|
|
}
|
|
|
// 我要咨询
|
|
|
$('#consults-btn').click(function() {
|
|
|
|
|
|
$this.addClass('cur');
|
|
|
$this.siblings('.cur').removeClass('cur');
|
|
|
|
|
|
if (index === 0) {
|
|
|
// TODO:点击我要资讯的时候更新验证码显示
|
|
|
$('.new-consult').removeClass('hide');
|
|
|
$('.consult-success').addClass('hide');
|
|
|
});
|
|
|
|
|
|
// 咨询
|
|
|
$consults.slideDown(SLIDETIME);
|
|
|
$comments.slideUp(SLIDETIME);
|
|
|
} else {
|
|
|
$consults.slideUp(SLIDETIME);
|
|
|
$comments.slideDown(SLIDETIME);
|
|
|
}
|
|
|
}).on('click', '.load-more', function() {
|
|
|
var $this = $(this);
|
|
|
// 提交咨询
|
|
|
$('#submit-consult').click(function() {
|
|
|
var $this = $(this),
|
|
|
$parent = $this.closest('.new-consult'),
|
|
|
$textarea = $parent.find('.my-consult'),
|
|
|
content = $.trim($textarea.val());
|
|
|
|
|
|
if ($this.hasClass('load-more-comments')) {
|
|
|
loadComments();
|
|
|
} else {
|
|
|
loadConsults();
|
|
|
}
|
|
|
});
|
|
|
var $consultWarn = $parent.find('.consult-warn');
|
|
|
|
|
|
// 我要咨询
|
|
|
$('#consults-btn').click(function() {
|
|
|
var pass = true;
|
|
|
|
|
|
// TODO:点击我要资讯的时候更新验证码显示
|
|
|
$('.new-consult').removeClass('hide');
|
|
|
$('.consult-success').addClass('hide');
|
|
|
});
|
|
|
if (content === '') {
|
|
|
$textarea.addClass('error');
|
|
|
$consultWarn.removeClass('hide');
|
|
|
|
|
|
// 提交咨询
|
|
|
$('#submit-consult').click(function() {
|
|
|
var $this = $(this),
|
|
|
$parent = $this.closest('.new-consult'),
|
|
|
$textarea = $parent.find('.my-consult'),
|
|
|
content = $.trim($textarea.val());
|
|
|
pass = false;
|
|
|
} else {
|
|
|
$textarea.removeClass('error');
|
|
|
$consultWarn.addClass('hide');
|
|
|
}
|
|
|
|
|
|
var $consultWarn = $parent.find('.consult-warn');
|
|
|
if (pass === false) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
var pass = true;
|
|
|
$.ajax({
|
|
|
type: 'POST',
|
|
|
url: '/product/detail/consult',
|
|
|
data: {
|
|
|
productId: id,
|
|
|
content: content
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
var code = data.code;
|
|
|
|
|
|
if (content === '') {
|
|
|
$textarea.addClass('error');
|
|
|
$consultWarn.removeClass('hide');
|
|
|
if (code === 200) {
|
|
|
$parent.addClass('hide');
|
|
|
|
|
|
pass = false;
|
|
|
} else {
|
|
|
$textarea.removeClass('error');
|
|
|
$consultWarn.addClass('hide');
|
|
|
}
|
|
|
$parent.siblings('.consult-success').removeClass('hide');
|
|
|
|
|
|
if (pass === false) {
|
|
|
return;
|
|
|
}
|
|
|
// 清空输入
|
|
|
$textarea.val('');
|
|
|
} else if (code === 400) {
|
|
|
|
|
|
$.ajax({
|
|
|
type: 'POST',
|
|
|
url: '/product/detail/consult',
|
|
|
data: {
|
|
|
productId: id,
|
|
|
content: content
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
var code = data.code;
|
|
|
// 跳转登录页
|
|
|
location.href = data.data.refer;
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
if (code === 200) {
|
|
|
$parent.addClass('hide');
|
|
|
loadComments();
|
|
|
loadConsults();
|
|
|
}());
|
|
|
|
|
|
$parent.siblings('.consult-success').removeClass('hide');
|
|
|
|
|
|
// 清空输入
|
|
|
$textarea.val('');
|
|
|
} else if (code === 400) {
|
|
|
});
|
|
|
|
|
|
// 跳转登录页
|
|
|
location.href = data.data.refer;
|
|
|
}
|
|
|
});
|
|
|
(function() {
|
|
|
$.ajax({
|
|
|
type: 'GET',
|
|
|
url: '/product/detail/header',
|
|
|
dataType: 'html',
|
|
|
data: {
|
|
|
productId: $('.main').data('id')
|
|
|
}
|
|
|
}).then(function(result) {
|
|
|
$('.main').html(result);
|
|
|
loadHeaderCompleted.fire();
|
|
|
});
|
|
|
|
|
|
loadComments();
|
|
|
loadConsults();
|
|
|
}()); |
...
|
...
|
|