|
|
|
/**
|
|
|
|
* 商品详情页
|
|
|
|
* @author: xuqi<qi.xu@yoho.cn>
|
|
|
|
* @date: 2015/12/23
|
|
|
|
*/
|
|
|
|
|
|
|
|
var $ = require('yoho.jquery'),
|
|
|
|
lazyLoad = require('yoho.lazyload');
|
|
|
|
|
|
|
|
var $imgShow = $('#img-show'),
|
|
|
|
$thumbs = $('#thumbs > .thumb-wrap');
|
|
|
|
|
|
|
|
var $size = $('#sizes'),
|
|
|
|
$sizes = $size.children('.size'),
|
|
|
|
$sizeWarn = $size.children('.size-warn'),
|
|
|
|
$colorSizeTip = $size.children('.color-size-tip');
|
|
|
|
|
|
|
|
var $num = $('#num'),
|
|
|
|
$plusNum = $('#plus-num'),
|
|
|
|
$minusNum = $('#minus-num'),
|
|
|
|
$numWarn = $('#num-warn');
|
|
|
|
|
|
|
|
var $addToCart = $('#add-to-cart'),
|
|
|
|
$soldOut = $('#sold-out');
|
|
|
|
|
|
|
|
var thumbsLoaded = {};
|
|
|
|
|
|
|
|
var skn = $('.main').data('skn');
|
|
|
|
|
|
|
|
var maxStock = -1; //记录当前选中的颜色-尺码的库存量，若为-1，代表未选择尺码
|
|
|
|
|
|
|
|
var SLIDETIME = 200;
|
|
|
|
|
|
|
|
var colTxt = {
|
|
|
|
default: '收藏商品',
|
|
|
|
coled: '已收藏',
|
|
|
|
hover: '取消收藏'
|
|
|
|
};
|
|
|
|
|
|
|
|
//咨询和评价页数
|
|
|
|
var page = {
|
|
|
|
comments: 1,
|
|
|
|
consults: 1
|
|
|
|
};
|
|
|
|
|
|
|
|
function imgShow(src) {
|
|
|
|
$imgShow.attr('src', src);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 获取当前选择的商品数目
|
|
|
|
* @return [Number]
|
|
|
|
*/
|
|
|
|
function getNum() {
|
|
|
|
return +$num.text();
|
|
|
|
}
|
|
|
|
|
|
|
|
//重置Num显示为1
|
|
|
|
function resetNum() {
|
|
|
|
$num.text('1');
|
|
|
|
|
|
|
|
$numWarn.addClass('hide');
|
|
|
|
}
|
|
|
|
|
|
|
|
//加入购物车和已售罄状态控制
|
|
|
|
function switchBtnStatus() {
|
|
|
|
if (maxStock === 0) {
|
|
|
|
$addToCart.addClass('hide');
|
|
|
|
$soldOut.removeClass('hide');
|
|
|
|
} else {
|
|
|
|
|
|
|
|
//包括默认的-1情况下
|
|
|
|
$addToCart.removeClass('hide');
|
|
|
|
$soldOut.addClass('hide');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//初始化thumbsLoaded
|
|
|
|
thumbsLoaded[$('.colors .focus').index()] = true;
|
|
|
|
|
|
|
|
//颜色
|
|
|
|
$('.colors').on('click', 'li', function() {
|
|
|
|
var $this = $(this),
|
|
|
|
index = $this.index();
|
|
|
|
|
|
|
|
var $imgs;
|
|
|
|
|
|
|
|
if ($this.hasClass('focus')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
$this.siblings('.focus').removeClass('focus');
|
|
|
|
$this.addClass('focus');
|
|
|
|
|
|
|
|
//切换图片显示
|
|
|
|
$thumbs.not('.hide').addClass('hide');
|
|
|
|
$imgs = $thumbs.eq(index).removeClass('hide').find('img');
|
|
|
|
|
|
|
|
if (typeof thumbsLoaded[index] === 'undefined') {
|
|
|
|
|
|
|
|
//trigger layLoad
|
|
|
|
lazyLoad($imgs, {
|
|
|
|
event: 'sporty'
|
|
|
|
});
|
|
|
|
|
|
|
|
$imgs.trigger('sporty');
|
|
|
|
|
|
|
|
thumbsLoaded[index] = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
imgShow($imgs.first().data('shower'));
|
|
|
|
|
|
|
|
//切换尺码显示
|
|
|
|
$sizes.not('.hide').addClass('hide');
|
|
|
|
$sizes.eq(index).removeClass('hide').children('li').removeClass('focus');
|
|
|
|
|
|
|
|
$colorSizeTip.addClass('hide');
|
|
|
|
|
|
|
|
maxStock = -1;
|
|
|
|
|
|
|
|
resetNum();
|
|
|
|
|
|
|
|
switchBtnStatus();
|
|
|
|
});
|
|
|
|
|
|
|
|
//尺码
|
|
|
|
$size.on('click', 'li', function() {
|
|
|
|
var $this = $(this);
|
|
|
|
|
|
|
|
if ($this.hasClass('focus')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
maxStock = +$this.data('num');
|
|
|
|
|
|
|
|
$this.siblings('.focus').removeClass('focus');
|
|
|
|
$this.addClass('focus');
|
|
|
|
|
|
|
|
$colorSizeTip.html($this.data('title')).removeClass('hide');
|
|
|
|
|
|
|
|
$sizeWarn.addClass('hide');
|
|
|
|
|
|
|
|
switchBtnStatus();
|
|
|
|
|
|
|
|
resetNum();
|
|
|
|
}).on('click', '.size-ruler', function() {
|
|
|
|
|
|
|
|
//尺码帮助
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
//数量
|
|
|
|
$plusNum.click(function() {
|
|
|
|
var num = getNum();
|
|
|
|
|
|
|
|
if (maxStock === -1) {
|
|
|
|
$sizeWarn.removeClass('hide');//显示选择尺码提示
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
//已售罄
|
|
|
|
if (maxStock === 0) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (num >= maxStock) {
|
|
|
|
$numWarn.removeClass('hide');
|
|
|
|
} else {
|
|
|
|
$num.text(num + 1);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
$minusNum.click(function() {
|
|
|
|
var num = getNum();
|
|
|
|
|
|
|
|
if (num === 1) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (num <= maxStock) {
|
|
|
|
$numWarn.addClass('hide');
|
|
|
|
}
|
|
|
|
|
|
|
|
$num.text(num - 1);
|
|
|
|
});
|
|
|
|
|
|
|
|
//加入购物车
|
|
|
|
$addToCart.click(function() {
|
|
|
|
if (maxStock === -1) {
|
|
|
|
$sizeWarn.removeClass('hide');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: '/product/item/addToCart',
|
|
|
|
data: {
|
|
|
|
skn: skn
|
|
|
|
}
|
|
|
|
}).then(function(data) {
|
|
|
|
var code = data.code;
|
|
|
|
|
|
|
|
if (code === 200) {
|
|
|
|
$('#type-chose').slideUp(SLIDETIME);
|
|
|
|
$('#balance').slideDown(SLIDETIME);
|
|
|
|
|
|
|
|
$('#cart-num').text(data.num); //更新数目
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
//收藏
|
|
|
|
$('#collect-product').click(function() {
|
|
|
|
var $this = $(this),
|
|
|
|
status = 'collect';
|
|
|
|
|
|
|
|
if ($this.hasClass('coled')) {
|
|
|
|
status = 'cancel';
|
|
|
|
}
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: '/product/item/collect',
|
|
|
|
data: {
|
|
|
|
skn: skn,
|
|
|
|
status: status
|
|
|
|
}
|
|
|
|
}).then(function(data) {
|
|
|
|
var code = data.code;
|
|
|
|
|
|
|
|
if (code === 200) {
|
|
|
|
|
|
|
|
$this.toggleClass('coled');
|
|
|
|
|
|
|
|
if (status === 'cancel') {
|
|
|
|
$this.find('em').text(colTxt.default);
|
|
|
|
} else {
|
|
|
|
$this.find('em').text(colTxt.coled);
|
|
|
|
}
|
|
|
|
} else if (code === 400) {
|
|
|
|
window.location.href = data.data;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}).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);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
//继续购物
|
|
|
|
$('#keep-shopping').click(function() {
|
|
|
|
$('#type-chose').slideDown(SLIDETIME);
|
|
|
|
$('#balance').slideUp(SLIDETIME);
|
|
|
|
});
|
|
|
|
|
|
|
|
//商品详情/材质洗涤切换
|
|
|
|
$('.description-material').on('click', '.title', function() {
|
|
|
|
var $this = $(this),
|
|
|
|
index = $this.index();
|
|
|
|
|
|
|
|
var $description = $('.description-content'),
|
|
|
|
$material = $('.material-content');
|
|
|
|
|
|
|
|
if ($this.hasClass('cur')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
$this.addClass('cur');
|
|
|
|
$this.siblings('.cur').removeClass('cur');
|
|
|
|
|
|
|
|
if (index === 0) {
|
|
|
|
|
|
|
|
//商品信息
|
|
|
|
$description.slideDown(SLIDETIME);
|
|
|
|
$material.slideUp(SLIDETIME);
|
|
|
|
} else {
|
|
|
|
$description.slideUp(SLIDETIME);
|
|
|
|
$material.slideDown(SLIDETIME);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
//评价和咨询切换
|
|
|
|
$('.consult-comment').on('click', '.title', function() {
|
|
|
|
var $this = $(this),
|
|
|
|
index = $this.index();
|
|
|
|
|
|
|
|
var $comments = $('.comments'),
|
|
|
|
$consults = $('.consults');
|
|
|
|
|
|
|
|
if ($this.hasClass('cur')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
$this.addClass('cur');
|
|
|
|
$this.siblings('.cur').removeClass('cur');
|
|
|
|
|
|
|
|
if (index === 0) {
|
|
|
|
|
|
|
|
//咨询
|
|
|
|
$consults.slideDown(SLIDETIME);
|
|
|
|
$comments.slideUp(SLIDETIME);
|
|
|
|
} else {
|
|
|
|
$consults.slideUp(SLIDETIME);
|
|
|
|
$comments.slideDown(SLIDETIME);
|
|
|
|
}
|
|
|
|
}).on('click', '.load-more', function() {
|
|
|
|
var $this = $(this),
|
|
|
|
type;
|
|
|
|
|
|
|
|
if ($this.hasClass('load-more-comments')) {
|
|
|
|
type = 'comments';
|
|
|
|
} else {
|
|
|
|
type = 'consults';
|
|
|
|
}
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: '/product/item/' + type,
|
|
|
|
data: {
|
|
|
|
page: page[type] + 1
|
|
|
|
}
|
|
|
|
}).then(function(html) {
|
|
|
|
if (html === ' ') {
|
|
|
|
$this.closest('.more-wrap').addClass('hide');
|
|
|
|
} else {
|
|
|
|
$(type + '-ul').append(html);
|
|
|
|
page[type]++;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
//我要咨询
|
|
|
|
$('#consults-btn').click(function() {
|
|
|
|
$('.new-consult').removeClass('hide');
|
|
|
|
});
|
|
|
|
|
|
|
|
//售后服务
|
|
|
|
$('.after-service-switch').click(function() {
|
|
|
|
var $this = $(this),
|
|
|
|
$content = $this.next('.after-service-content');
|
|
|
|
|
|
|
|
var html = {
|
|
|
|
default: '',
|
|
|
|
spread: ''
|
|
|
|
};
|
|
|
|
|
|
|
|
if ($content.css('display') === 'none') {
|
|
|
|
$content.slideDown(SLIDETIME);
|
|
|
|
|
|
|
|
$this.find('.triangle').html(html.spread);
|
|
|
|
} else {
|
|
|
|
$content.slideUp(SLIDETIME);
|
|
|
|
|
|
|
|
$this.find('.triangle').html(html.default);
|
|
|
|
}
|
|
|
|
}); |
|
|
\ No newline at end of file |
...
|
...
|
|
