|
|
/**
|
|
|
* 商品详情页
|
|
|
* @author: xuqi<qi.xu@yoho.cn>
|
|
|
* @date: 2015/12/23
|
|
|
* @author: tao.huang<tao.huang@yoho.cn>
|
|
|
* @date: 2016/9/22
|
|
|
*/
|
|
|
|
|
|
/**
|
|
|
* 说明:这里有一些优化方法。
|
|
|
* 页面已经被 nginx 缓存,变化后的数据需要通过 ajax 进行获取后,重新绑定事件。
|
|
|
*/
|
|
|
|
|
|
var $ = require('yoho-jquery'),
|
|
|
lazyLoad = require('yoho-jquery-lazyload'),
|
|
|
Handlebars = require('yoho-handlebars');
|
|
|
|
|
|
var loadHeaderCompleted = $.Callbacks(); // eslint-disable-line
|
|
|
var bindEvent = $.Callbacks(); // eslint-disable-line
|
|
|
|
|
|
var $main = $('.main'),
|
|
|
id = $main.data('id'),
|
|
|
md5 = $main.data('md5');
|
|
|
|
|
|
var SLIDETIME = 200;
|
|
|
|
|
|
loadHeaderCompleted.add(function() {
|
|
|
var colTxt = {
|
|
|
def: '收藏商品',
|
|
|
coled: '已收藏',
|
|
|
hover: '取消收藏'
|
|
|
};
|
|
|
|
|
|
bindEvent.add(function() {
|
|
|
var $imgShow = $('#img-show'),
|
|
|
$thumbs = $('#thumbs > .thumb-wrap');
|
|
|
|
...
|
...
|
@@ -33,20 +50,10 @@ loadHeaderCompleted.add(function() { |
|
|
|
|
|
var thumbsLoaded = {};
|
|
|
|
|
|
var $main = $('.main'),
|
|
|
id = $main.data('id'),
|
|
|
isTicket = $('input[name="isTicket"]').length > 0 && $('input[name="isTicket"]').val() === 'true';
|
|
|
var isTicket = $('input[name="isTicket"]').length > 0 && $('input[name="isTicket"]').val() === 'true';
|
|
|
|
|
|
var maxStock = -1; // 记录当前选中的颜色-尺码的库存量,若为-1,代表未选择尺码
|
|
|
|
|
|
var SLIDETIME = 200;
|
|
|
|
|
|
var colTxt = {
|
|
|
def: '收藏商品',
|
|
|
coled: '已收藏',
|
|
|
hover: '取消收藏'
|
|
|
};
|
|
|
|
|
|
var Alert = require('../common/dialog').Alert;
|
|
|
|
|
|
function imgShow(src) {
|
...
|
...
|
@@ -125,11 +132,8 @@ loadHeaderCompleted.add(function() { |
|
|
});
|
|
|
}());
|
|
|
|
|
|
require('./detail/latest-walk');
|
|
|
|
|
|
require('../plugins/share');
|
|
|
|
|
|
require('../common');
|
|
|
|
|
|
// 品牌收藏
|
|
|
$('#brand-favour').click(function() {
|
...
|
...
|
@@ -245,7 +249,7 @@ loadHeaderCompleted.add(function() { |
|
|
}, 300);
|
|
|
});
|
|
|
|
|
|
// 数量
|
|
|
// 增加购买数量
|
|
|
$plusNum.click(function() {
|
|
|
var num = getNum();
|
|
|
|
...
|
...
|
@@ -279,6 +283,7 @@ loadHeaderCompleted.add(function() { |
|
|
return false;
|
|
|
});
|
|
|
|
|
|
// 减少购买数量
|
|
|
$minusNum.click(function() {
|
|
|
var num = getNum();
|
|
|
|
...
|
...
|
@@ -472,300 +477,312 @@ loadHeaderCompleted.add(function() { |
|
|
$(this).removeClass('hover');
|
|
|
});
|
|
|
|
|
|
// 商品详情/材质洗涤切换
|
|
|
$('.description-material').on('click', '.title', function() {
|
|
|
var $this = $(this),
|
|
|
index = $this.index();
|
|
|
|
|
|
var $description = $('.description-content'),
|
|
|
$material = $('.material-content');
|
|
|
// 只有一个尺码(多个或一个颜色)时默认选中第一个未售罄的颜色的第一个尺码
|
|
|
(function() {
|
|
|
var hasOnlyOneSize = true,
|
|
|
i;
|
|
|
|
|
|
if ($this.hasClass('cur')) {
|
|
|
return;
|
|
|
for (i = 0; i < $sizes.length; i++) {
|
|
|
if ($sizes.eq(i).find('li').length !== 1) {
|
|
|
hasOnlyOneSize = false;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
$this.addClass('cur');
|
|
|
$this.siblings('.cur').removeClass('cur');
|
|
|
|
|
|
if (index === 0) {
|
|
|
|
|
|
// 商品信息
|
|
|
$description.slideDown(SLIDETIME);
|
|
|
$material.slideUp(SLIDETIME);
|
|
|
} else {
|
|
|
$description.slideUp(SLIDETIME);
|
|
|
$material.slideDown(SLIDETIME);
|
|
|
if (hasOnlyOneSize) {
|
|
|
$sizes.eq($('.colors .focus').index()).find('li').click();
|
|
|
}
|
|
|
});
|
|
|
}());
|
|
|
|
|
|
// 售后服务
|
|
|
$('.after-service-switch').click(function() {
|
|
|
var $this = $(this),
|
|
|
$content = $this.next('.after-service-content');
|
|
|
});
|
|
|
|
|
|
var html = {
|
|
|
def: '',
|
|
|
spread: ''
|
|
|
};
|
|
|
// yas
|
|
|
require('../common');
|
|
|
|
|
|
if ($content.css('display') === 'none') {
|
|
|
$content.slideDown(SLIDETIME);
|
|
|
// 最近浏览
|
|
|
require('./detail/latest-walk');
|
|
|
|
|
|
$this.find('.triangle').html(html.spread);
|
|
|
} else {
|
|
|
$content.slideUp(SLIDETIME);
|
|
|
// 商品详情/材质洗涤切换
|
|
|
$('.description-material').on('click', '.title', function() {
|
|
|
var $this = $(this),
|
|
|
index = $this.index();
|
|
|
|
|
|
$this.find('.triangle').html(html.def);
|
|
|
}
|
|
|
});
|
|
|
var $description = $('.description-content'),
|
|
|
$material = $('.material-content');
|
|
|
|
|
|
if ($this.hasClass('cur')) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 商品详情区的热点
|
|
|
$.ajax({
|
|
|
type: 'GET',
|
|
|
url: '/product/detail/hotarea',
|
|
|
data: {
|
|
|
productId: id
|
|
|
}
|
|
|
}).then(function(html) {
|
|
|
$('#details-html').prepend(html);
|
|
|
$this.addClass('cur');
|
|
|
$this.siblings('.cur').removeClass('cur');
|
|
|
|
|
|
// 修正热区尺寸使居中
|
|
|
$('.hot-point-wrap > img').load(function() {
|
|
|
$(this).parent('.hot-point-wrap').width($(this).width());
|
|
|
});
|
|
|
if (index === 0) {
|
|
|
|
|
|
// Bind Hover event
|
|
|
$('.hot-point').hover(function() {
|
|
|
$(this).addClass('hover');
|
|
|
}, function() {
|
|
|
$(this).removeClass('hover');
|
|
|
});
|
|
|
});
|
|
|
// 商品信息
|
|
|
$description.slideDown(SLIDETIME);
|
|
|
$material.slideUp(SLIDETIME);
|
|
|
} else {
|
|
|
$description.slideUp(SLIDETIME);
|
|
|
$material.slideDown(SLIDETIME);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 商品详情懒加载
|
|
|
lazyLoad($('#details-html img'));
|
|
|
// 售后服务
|
|
|
$('.after-service-switch').click(function() {
|
|
|
var $this = $(this),
|
|
|
$content = $this.next('.after-service-content');
|
|
|
|
|
|
// 只有一个尺码(多个或一个颜色)时默认选中第一个未售罄的颜色的第一个尺码
|
|
|
(function() {
|
|
|
var hasOnlyOneSize = true,
|
|
|
i;
|
|
|
var html = {
|
|
|
def: '',
|
|
|
spread: ''
|
|
|
};
|
|
|
|
|
|
for (i = 0; i < $sizes.length; i++) {
|
|
|
if ($sizes.eq(i).find('li').length !== 1) {
|
|
|
hasOnlyOneSize = false;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
if ($content.css('display') === 'none') {
|
|
|
$content.slideDown(SLIDETIME);
|
|
|
|
|
|
if (hasOnlyOneSize) {
|
|
|
$sizes.eq($('.colors .focus').index()).find('li').click();
|
|
|
}
|
|
|
}());
|
|
|
$this.find('.triangle').html(html.spread);
|
|
|
} else {
|
|
|
$content.slideUp(SLIDETIME);
|
|
|
|
|
|
// 咨询和评价
|
|
|
(function() {
|
|
|
var commentPage = 1,
|
|
|
consultPage = 1;
|
|
|
$this.find('.triangle').html(html.def);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
var commentsTpl = Handlebars.compile($('#comments-tpl').html()),
|
|
|
consultsTpl = Handlebars.compile($('#consults-tpl').html());
|
|
|
// 商品详情区的热点
|
|
|
$.ajax({
|
|
|
type: 'GET',
|
|
|
url: '/product/detail/hotarea',
|
|
|
data: {
|
|
|
productId: id
|
|
|
}
|
|
|
}).then(function(html) {
|
|
|
$('#details-html').prepend(html);
|
|
|
|
|
|
var $commentsUl = $('#comments-ul'),
|
|
|
$consultsUl = $('#consults-ul');
|
|
|
// 修正热区尺寸使居中
|
|
|
$('.hot-point-wrap > img').load(function() {
|
|
|
$(this).parent('.hot-point-wrap').width($(this).width());
|
|
|
});
|
|
|
|
|
|
var $commentNum = $('.comment-num'),
|
|
|
$consultNum = $('.consult-num');
|
|
|
// Bind Hover event
|
|
|
$('.hot-point').hover(function() {
|
|
|
$(this).addClass('hover');
|
|
|
}, function() {
|
|
|
$(this).removeClass('hover');
|
|
|
});
|
|
|
});
|
|
|
|
|
|
var loadingComments,
|
|
|
loadingConsults;
|
|
|
// 商品详情懒加载
|
|
|
lazyLoad($('#details-html img'));
|
|
|
|
|
|
// 购买评价
|
|
|
function loadComments() {
|
|
|
if (loadingComments) {
|
|
|
return;
|
|
|
}
|
|
|
// 咨询和评价
|
|
|
(function() {
|
|
|
var commentPage = 1,
|
|
|
consultPage = 1;
|
|
|
|
|
|
loadingComments = true;
|
|
|
$.ajax({
|
|
|
type: 'GET',
|
|
|
url: '/product/detail/comment',
|
|
|
data: {
|
|
|
productId: id,
|
|
|
page: commentPage
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
var res;
|
|
|
var commentsTpl = Handlebars.compile($('#comments-tpl').html()),
|
|
|
consultsTpl = Handlebars.compile($('#consults-tpl').html());
|
|
|
|
|
|
if (data.code === 200) {
|
|
|
res = data.data;
|
|
|
var $commentsUl = $('#comments-ul'),
|
|
|
$consultsUl = $('#consults-ul');
|
|
|
|
|
|
if (res.length === 0) {
|
|
|
$commentsUl.next('.more-wrap').addClass('hide');
|
|
|
return;
|
|
|
}
|
|
|
var $commentNum = $('.comment-num'),
|
|
|
$consultNum = $('.consult-num');
|
|
|
|
|
|
// 更新总数显示
|
|
|
$commentNum.text(res[0].total);
|
|
|
var loadingComments,
|
|
|
loadingConsults;
|
|
|
|
|
|
$commentsUl.append(commentsTpl({
|
|
|
comments: res
|
|
|
}));
|
|
|
commentPage++;
|
|
|
}
|
|
|
}).always(function() {
|
|
|
loadingComments = false;
|
|
|
});
|
|
|
// 购买评价
|
|
|
function loadComments() {
|
|
|
if (loadingComments) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 顾客咨询
|
|
|
function loadConsults() {
|
|
|
if (loadingConsults) {
|
|
|
return;
|
|
|
loadingComments = true;
|
|
|
$.ajax({
|
|
|
type: 'GET',
|
|
|
url: '/product/detail/comment',
|
|
|
data: {
|
|
|
productId: id,
|
|
|
page: commentPage
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
var res;
|
|
|
|
|
|
loadingConsults = true;
|
|
|
if (data.code === 200) {
|
|
|
res = data.data;
|
|
|
|
|
|
$.ajax({
|
|
|
type: 'GET',
|
|
|
url: '/product/detail/consult',
|
|
|
data: {
|
|
|
productId: id,
|
|
|
page: consultPage
|
|
|
if (res.length === 0) {
|
|
|
$commentsUl.next('.more-wrap').addClass('hide');
|
|
|
return;
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
var res;
|
|
|
|
|
|
if (data.code === 200) {
|
|
|
res = data.data;
|
|
|
// 更新总数显示
|
|
|
$commentNum.text(res[0].total);
|
|
|
|
|
|
if (res.length === 0) {
|
|
|
$consultsUl.next('.more-wrap').addClass('hide');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 更新总数显示
|
|
|
$consultNum.text(res[0].total);
|
|
|
$commentsUl.append(commentsTpl({
|
|
|
comments: res
|
|
|
}));
|
|
|
commentPage++;
|
|
|
}
|
|
|
}).always(function() {
|
|
|
loadingComments = false;
|
|
|
});
|
|
|
}
|
|
|
|
|
|
$consultsUl.append(consultsTpl({
|
|
|
consults: res
|
|
|
}));
|
|
|
consultPage++;
|
|
|
}
|
|
|
}).always(function() {
|
|
|
loadingConsults = false;
|
|
|
});
|
|
|
// 顾客咨询
|
|
|
function loadConsults() {
|
|
|
if (loadingConsults) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 评价和咨询切换
|
|
|
$('.consult-comment').on('click', '.title', function() {
|
|
|
var $this = $(this),
|
|
|
index = $this.index();
|
|
|
loadingConsults = true;
|
|
|
|
|
|
var $comments = $('.comments'),
|
|
|
$consults = $('.consults');
|
|
|
|
|
|
if ($this.hasClass('cur')) {
|
|
|
return;
|
|
|
$.ajax({
|
|
|
type: 'GET',
|
|
|
url: '/product/detail/consult',
|
|
|
data: {
|
|
|
productId: id,
|
|
|
page: consultPage
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
var res;
|
|
|
|
|
|
$this.addClass('cur');
|
|
|
$this.siblings('.cur').removeClass('cur');
|
|
|
if (data.code === 200) {
|
|
|
res = data.data;
|
|
|
|
|
|
if (index === 0) {
|
|
|
if (res.length === 0) {
|
|
|
$consultsUl.next('.more-wrap').addClass('hide');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 咨询
|
|
|
$consults.slideDown(SLIDETIME);
|
|
|
$comments.slideUp(SLIDETIME);
|
|
|
} else {
|
|
|
$consults.slideUp(SLIDETIME);
|
|
|
$comments.slideDown(SLIDETIME);
|
|
|
}
|
|
|
}).on('click', '.load-more', function() {
|
|
|
var $this = $(this);
|
|
|
// 更新总数显示
|
|
|
$consultNum.text(res[0].total);
|
|
|
|
|
|
if ($this.hasClass('load-more-comments')) {
|
|
|
loadComments();
|
|
|
} else {
|
|
|
loadConsults();
|
|
|
$consultsUl.append(consultsTpl({
|
|
|
consults: res
|
|
|
}));
|
|
|
consultPage++;
|
|
|
}
|
|
|
}).always(function() {
|
|
|
loadingConsults = false;
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 我要咨询
|
|
|
$('#consults-btn').click(function() {
|
|
|
// 评价和咨询切换
|
|
|
$('.consult-comment').on('click', '.title', function() {
|
|
|
var $this = $(this),
|
|
|
index = $this.index();
|
|
|
|
|
|
// TODO:点击我要资讯的时候更新验证码显示
|
|
|
$('.new-consult').removeClass('hide');
|
|
|
$('.consult-success').addClass('hide');
|
|
|
});
|
|
|
var $comments = $('.comments'),
|
|
|
$consults = $('.consults');
|
|
|
|
|
|
// 提交咨询
|
|
|
$('#submit-consult').click(function() {
|
|
|
var $this = $(this),
|
|
|
$parent = $this.closest('.new-consult'),
|
|
|
$textarea = $parent.find('.my-consult'),
|
|
|
content = $.trim($textarea.val());
|
|
|
if ($this.hasClass('cur')) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
var $consultWarn = $parent.find('.consult-warn');
|
|
|
$this.addClass('cur');
|
|
|
$this.siblings('.cur').removeClass('cur');
|
|
|
|
|
|
var pass = true;
|
|
|
if (index === 0) {
|
|
|
|
|
|
if (content === '') {
|
|
|
$textarea.addClass('error');
|
|
|
$consultWarn.removeClass('hide');
|
|
|
// 咨询
|
|
|
$consults.slideDown(SLIDETIME);
|
|
|
$comments.slideUp(SLIDETIME);
|
|
|
} else {
|
|
|
$consults.slideUp(SLIDETIME);
|
|
|
$comments.slideDown(SLIDETIME);
|
|
|
}
|
|
|
}).on('click', '.load-more', function() {
|
|
|
var $this = $(this);
|
|
|
|
|
|
pass = false;
|
|
|
} else {
|
|
|
$textarea.removeClass('error');
|
|
|
$consultWarn.addClass('hide');
|
|
|
}
|
|
|
if ($this.hasClass('load-more-comments')) {
|
|
|
loadComments();
|
|
|
} else {
|
|
|
loadConsults();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
if (pass === false) {
|
|
|
return;
|
|
|
}
|
|
|
// 我要咨询
|
|
|
$('#consults-btn').click(function() {
|
|
|
|
|
|
$.ajax({
|
|
|
type: 'POST',
|
|
|
url: '/product/detail/consult',
|
|
|
data: {
|
|
|
productId: id,
|
|
|
content: content
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
var code = data.code;
|
|
|
// TODO:点击我要资讯的时候更新验证码显示
|
|
|
$('.new-consult').removeClass('hide');
|
|
|
$('.consult-success').addClass('hide');
|
|
|
});
|
|
|
|
|
|
if (code === 200) {
|
|
|
$parent.addClass('hide');
|
|
|
// 提交咨询
|
|
|
$('#submit-consult').click(function() {
|
|
|
var $this = $(this),
|
|
|
$parent = $this.closest('.new-consult'),
|
|
|
$textarea = $parent.find('.my-consult'),
|
|
|
content = $.trim($textarea.val());
|
|
|
|
|
|
$parent.siblings('.consult-success').removeClass('hide');
|
|
|
var $consultWarn = $parent.find('.consult-warn');
|
|
|
|
|
|
// 清空输入
|
|
|
$textarea.val('');
|
|
|
} else if (code === 400) {
|
|
|
var pass = true;
|
|
|
|
|
|
// 跳转登录页
|
|
|
location.href = data.data.refer;
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
if (content === '') {
|
|
|
$textarea.addClass('error');
|
|
|
$consultWarn.removeClass('hide');
|
|
|
|
|
|
loadComments();
|
|
|
loadConsults();
|
|
|
}());
|
|
|
pass = false;
|
|
|
} else {
|
|
|
$textarea.removeClass('error');
|
|
|
$consultWarn.addClass('hide');
|
|
|
}
|
|
|
|
|
|
if (pass === false) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
});
|
|
|
$.ajax({
|
|
|
type: 'POST',
|
|
|
url: '/product/detail/consult',
|
|
|
data: {
|
|
|
productId: id,
|
|
|
content: content
|
|
|
}
|
|
|
}).then(function(data) {
|
|
|
var code = data.code;
|
|
|
|
|
|
if (code === 200) {
|
|
|
$parent.addClass('hide');
|
|
|
|
|
|
$parent.siblings('.consult-success').removeClass('hide');
|
|
|
|
|
|
// 清空输入
|
|
|
$textarea.val('');
|
|
|
} else if (code === 400) {
|
|
|
|
|
|
// 跳转登录页
|
|
|
location.href = data.data.refer;
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
loadComments();
|
|
|
loadConsults();
|
|
|
}());
|
|
|
|
|
|
// 首屏加载,绑定事件
|
|
|
bindEvent.fire();
|
|
|
|
|
|
// 首屏加载后,对比数据是否变化,如果变化,重新渲染,重新绑定事件
|
|
|
// 当前只渲染商品详情页的变化敏感的部分
|
|
|
(function() {
|
|
|
$.ajax({
|
|
|
type: 'GET',
|
|
|
url: '/product/detail/header',
|
|
|
dataType: 'html',
|
|
|
data: {
|
|
|
productId: $('.main').data('id')
|
|
|
productId: id,
|
|
|
md5: md5
|
|
|
}
|
|
|
}).then(function(result) {
|
|
|
$('.main').html(result);
|
|
|
loadHeaderCompleted.fire();
|
|
|
if (result) {
|
|
|
$('.main').html(result);
|
|
|
bindEvent.fire();
|
|
|
}
|
|
|
});
|
|
|
}()); |
...
|
...
|
|