Authored by htoooth

refactor

... ... @@ -174,9 +174,14 @@ const detailHeader = (req, res, next) => {
let pid = req.query.productId || 0;
let uid = req.user.uid || '';
let vipLevel = detailHelper.vipLevel(req.user.vip);
let dataMd5 = req.query.md5 || 0;
service.getDetailHeader(pid, uid, req.user.isStudent, vipLevel).then((result) => {
res.render('product/detail-header', Object.assign({layout: false}, result));
service.getDetailHeader(pid, uid, req.user.isStudent, vipLevel, dataMd5).then((result) => {
if (result.code === 200) {
return res.render('product/detail-header', Object.assign({layout: false}, result));
} else {
return res.status(204).end();
}
}).catch(next);
};
... ...
... ... @@ -1047,13 +1047,16 @@ const _getSeoByGoodsInfo = function(goodsInfo, navs) {
const _detailDataPkg = (origin, uid, vipLevel) => {
return co(function*() {
let result = {}; // 结果输出
let md5 = origin.md5;
origin = origin.data;
let propOrigin = _.partial(_.get, origin);
origin.uid = uid;
result.name = propOrigin('product_name');
result.skn = propOrigin('product_skn');
result.productId = propOrigin('product_id');
result.md5 = md5; // 用于前端数据变化的对比
result.maxSortId = propOrigin('maxSortId', '');
result.smallSortId = propOrigin('smallSortId', '');
... ... @@ -1268,11 +1271,24 @@ const _detailDataPkg = (origin, uid, vipLevel) => {
})();
};
const getDetailHeader = (pid, uid, isStudent, vipLevel) => {
const getDetailHeader = (pid, uid, isStudent, vipLevel, dataMd5) => {
let currentUserProductInfo = _.partial(_detailDataPkg, _, uid, vipLevel);
return productAPI.getProductAsync(pid, uid, isStudent, vipLevel)
.then(result => currentUserProductInfo(result.data));
.then(result => currentUserProductInfo(result))
.then((result) => {
if (result.goodsInfo.md5 !== dataMd5) {
return {
code: 200, // 改变数据
data: result.data
};
} else {
return {
code: 204, // 没有改变数据
data: {}
};
}
});
};
/**
... ... @@ -1285,7 +1301,7 @@ const showMainAsync = (data) => {
// 获取商品信息
let productInfo = yield productAPI.getProductAsync(data.pid, data.uid, data.isStudent, data.vipLevel)
.then(res => currentUserProductInfo(res.data));
.then(res => currentUserProductInfo(res));
if (_.isEmpty(productInfo) || _.isEmpty(productInfo.goodsInfo)) {
return Promise.reject({
... ...
... ... @@ -23,7 +23,328 @@
{{> common/path-nav}}
{{# goodsInfo}}
<div class="main clearfix" data-skn="{{skn}}" data-id="{{productId}}">
<div class="main clearfix" data-skn="{{skn}}" data-id="{{productId}}" data-md5="{{md5}}">
<div class="pull-left imgs clearfix">
<div class="pull-left img">
<div class="tags clearfix">
{{# tags}}
{{# isNew}}
<span class="good-tag new-tag">NEW</span>
{{/ isNew}}
{{# isReNew}}
<span class="good-tag renew-tag">再到着</span>
{{/ isReNew}}
{{# isSale}}
<span class="good-tag sale-tag">SALE</span>
{{/ isSale}}
{{# isNewFestival}}
<span class="good-tag new-festival-tag">新品节</span>
{{/ isNewFestival}}
{{# isLimit}}
<span class="good-tag limit-tag">限量商品</span>
{{/ isLimit}}
{{# isYearEndPromotion}}
<span class="good-tag yep-tag">年终大促</span>
{{/ isYearEndPromotion}}
{{# isYearMidPromotion}}
<span class="good-tag ymp-tag">年中热促</span>
{{/ isYearMidPromotion}}
{{/ tags}}
</div>
<img id="img-show" class="img-show" src="{{img}}">
</div>
<div id="thumbs" class="pull-right thumbs">
{{# colors}}
<div class="thumb-wrap{{#unless focus}} hide{{/unless}}">
{{#if focus}}
{{# thumbs}}
<img class="thumb" src="{{img}}" data-shower="{{shower}}">
{{/ thumbs}}
{{^}}
{{# thumbs}}
<img class="thumb lazy" data-original="{{img}}" data-shower="{{shower}}">
{{/ thumbs}}
{{/if}}
</div>
{{/ colors}}
</div>
</div>
<div class="pull-right infos">
<p class="name">
{{name}}
{{#if saleTip}}
<span class="sale-tip">{{saleTip}}</span>
{{/if}}
</p>
<a class="brand-name" href="{{brandUrl}}">{{brandName}}</a>
<p class="market-price">
<span class="title">市场价:</span>
<span class="price{{#if hasOtherPrice}} has-other-price{{/if}}">{{marketPrice}}</span>
</p>
{{#if salePrice}}
<p class="sale-price">
<span class="title">促销价:</span>
<span class="price">{{salePrice}}</span>
</p>
{{/if}}
{{#if presalePrice}}
<p class="presale-price">
<span class="title">预售价:</span>
<span class="price">{{presalePrice}}</span>
<span class="arrival-date">上市期:{{arrivalDate}}</span>
</p>
{{/if}}
{{#if advancePrice}}
<p class="advance-price">
<span class="title">先行价:</span>
<span class="price">{{advancePrice}}</span>
</p>
{{/if}}
{{# vipPrice}}
<p class="vip-price">
{{#if unLogin}}
登录后即可查看vip价格
<a class="login-url" href="{{unLogin}}">立即登录</a>
{{/if}}
{{#if normalUser}}
<span class="vip-price-item">您当前是普通会员,成为VIP享受更多优惠!</span>
{{/if}}
{{# prices}}
<span class="vip-price-item{{#if cur}} cur{{/if}}">
{{name}}
<em>
{{price}}
</em>
</span>
{{/ prices}}
{{#unless unLogin}}
<a class="vip-schedual" href="{{vipSchedualUrl}}">查看我的VIP进度</a>
{{/unless}}
</p>
{{/ vipPrice}}
{{#if studentsPrice}}
<p class="students-price">
<span class="title">学生价</span>
<span class="price">{{studentsPrice}}</span>
</p>
{{/if}}
{{#if activity}}
<ul class="activity">
{{#each activity}}
<li>
{{#if activityImg}}
<a class="img-link" href="{{url}}">
<img src="{{activityImg}}">
</a>
{{^}}
<span class="ac-type">{{type}}</span>
<span class="ac-des">{{des}}</span>
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
<div class="trade-content">
<div id="type-chose" class="type-chose">
{{#if virtualGoods}}
<div class="chose-ticket chose-color row clearfix">
<span class="title pull-left">选日期:</span>
<ul class="colors pull-left clearfix">
{{#each colors}}
<li class="{{#if focus}}focus{{/if}} {{#if disable}}disable{{/if}} pull-left"
title="{{title}}" data-color="{{name}}" data-total="{{total}}">
{{name}}
</li>
{{/each}}
</ul>
</div>
<div class="chose-size row clearfix {{#if isTicket}} hide {{/if}}">
<input type="hidden" name="isTicket" value="{{isTicket}}"/>
<span class="title pull-left">
选区域:
</span>
<div id="sizes" class="size-wrapper pull-left">
{{#each colors}}
<ul class="size{{#unless focus}} hide{{/unless}}">
{{#each size}}
<li {{#unless num}}class="disable"{{/unless}} data-sku="{{sku}}"
data-num="{{num}}" data-name="{{name}}">{{name}}</li>
{{/each}}
<span class="size-warn warn-tip hide">
<i class="iconfont">&#xe62c;</i>
请选择区域
</span>
</ul>
{{/each}}
</div>
</div>
{{else}}
<div class="chose-color row clearfix">
<span class="title pull-left">选颜色:</span>
<ul class="colors pull-left clearfix">
{{#each colors}}
<li class="{{#if focus}}focus{{/if}} {{#if disable}}disable{{/if}} pull-left"
title="{{title}}" data-color="{{name}}" data-total="{{total}}">
<img src="{{src}}">
</li>
{{/each}}
</ul>
</div>
<div class="chose-size row clearfix">
<span class="title pull-left">
选尺码:
</span>
<div id="sizes" class="size-wrapper pull-left">
{{#each colors}}
<ul class="size{{#unless focus}} hide{{/unless}}">
{{#each size}}
<li {{#unless num}}class="disable"{{/unless}} data-sku="{{sku}}"
data-num="{{num}}" data-name="{{name}}">{{name}}</li>
{{/each}}
{{#unless virtualGoods}}
<span class="size-ruler"></span>
{{/unless}}
<span class="size-warn warn-tip hide">
<i class="iconfont">&#xe61f;</i>
请选择尺码
</span>
</ul>
{{/each}}
{{#unless virtualGoods}}
<p class="color-size-tip hide"></p>
{{/unless}}
</div>
</div>
{{/if}}
<div class="chose-count row clearfix">
<span class="title pull-left">选数量:</span>
<div class="num-wraper pull-left clearfix">
<span id="num" class="num pull-left">1</span>
<span class="minus-plus pull-left">
<i id="plus-num" class="plus iconfont">&#xe607;</i>
<i id="minus-num" class="minus dis iconfont">&#xe60b;</i>
</span>
{{#each tags}}
{{#if isFew}}
<span class="warn-tip">即将售罄</span>
{{/if}}
{{/each}}
{{# fashionTopGoods}}
{{#if getLimitedCode}}
<span class="lc-btn get-lc{{#if getLimitedCodeDis}} dis{{/if}}">获取限购码</span>
<div class="lc-container hide">
<span class="lc-arrow"></span>
<div class="lc-content">
<div class="qr-code"></div>
<p class="title">打开APP扫描二维码获取限购码</p>
<p class="sub-title">商品开售后即可购买</p>
</div>
</div>
{{/if}}
{{#if hadLimitedCode}}
<span class="lc-btn had-lc">已获取限购码</span>
{{/if}}
{{#if limitedCodeSoldOut}}
<span class="lc-btn lc-sold-out">限购码已抢光</span>
{{/if}}
{{/ fashionTopGoods}}
</div>
</div>
<p class="row">
{{#if virtualGoods}}
{{!-- 电子门票按钮 --}}
{{#if isVirtualBtn}}
<form name="ticket-form" action="//www.yohobuy.com/cart/index/ticketEnsure"
method="POST"
class="hide"></form>
<span id="buy-ticket" class="buy-ticket buy-now item-buy{{#if dis}} dis{{/if}}">立即购买</span>
{{/if}}
{{else}}
{{!-- 各颜色下所有尺码均售罄则只显示售罄按钮 --}}
{{#unless soldOut}}
{{# buyNow}}
<span id="buy-now" class="buy-btn buy-now item-buy{{#if dis}} dis{{/if}}"
data-base="{{buyNowBase}}">立即购买</span>
{{/ buyNow}}
{{# openSoon}}
<span id="open-soon" class="buy-btn item-buy dis">即将开售</span>
{{/ openSoon}}
{{#if notForSale}}
<span class="buy-btn dis">
<i class="iconfont">&#xe61c;</i>
非买品
</span>
{{/if}}
{{#if addToCart}}
<span id="add-to-cart" class="buy-btn item-buy add-to-cart">
<i class="iconfont">&#xe61b;</i>
添加到购物车
</span>
{{/if}}
{{/unless}}
{{/if}}
<span id="sold-out" class="buy-btn dis{{#unless soldOut}} hide{{/unless}}">
<i class="iconfont">&#xe61c;</i>
已售罄
</span>
<span id="collect-product" class="{{#if isCollect}}coled {{/if}}collect-product">
<i class="iconfont">&#xe611;</i>
{{#if isCollect}}
<em>已收藏</em>
{{^}}
<em>收藏商品</em>
{{/if}}
</span>
</p>
<div class="share-row">
<span class="title pull-left">分享商品:</span>
{{> common/share }}
</div>
</div>
<div id="balance" class="balance">
<p class="success-tip">商品已成功添加到购物车!</p>
<p class="cart-total">购物车一共有<span id="cart-num">0</span>件商品</p>
<p class="balance-btns">
<a class="go-cart buy-btn" href="{{goCartUrl}}">
去购物车结算
<i class="iconfont">&#xe60c;</i>
</a>
<span id="keep-shopping" class="keep-shopping">
继续购物
</span>
</p>
</div>
</div>
</div>
</div>
{{/ goodsInfo}}
... ... @@ -296,7 +617,8 @@
<div class="text">
<h4>退换货承诺</h4>
<p>
自您签收商品7日内可以退货,15日内可以换货,在商品不影响二次销售的情况下,YOHO!BUY 有货将为您办理退换货服务,请在网站提交"退换货"申请。需要说明的是:非质量问题的退换货,来回运费由您承担。</p>
自您签收商品7日内可以退货,15日内可以换货,在商品不影响二次销售的情况下,YOHO!BUY
有货将为您办理退换货服务,请在网站提交"退换货"申请。需要说明的是:非质量问题的退换货,来回运费由您承担。</p>
<h4>退换货方式</h4>
<p>
针对国内大中型城市,YOHO!BUY 有货开通了<span class="orange">"上门换货"</span>服务,上门服务区域及费用请联系客服中心;若您所在的区域不在上门换货范围内,请您选择普通快递将商品、内包装、赠品及发货单等一并寄回。质量问题的退换货,目前不支持运费到付款业务,请您先垫付运费寄回。如需退换货,请致电客服电话:400-889-9646。
... ... @@ -376,7 +698,10 @@
_mvq.push(['$setAccount', 'm-23428-1']);
_mvq.push(['$setGeneral', 'goodsdetail', '', /*用户名*/ '', /*用户id*/ '']);
_mvq.push(['$logConversion']);
_mvq.push(['$addGoods', /*分类id*/ '', /*品牌id*/ '', /*商品名称*/ '', /*商品ID*/ '{{skn}}', /*商品售价*/ '', /*商品图片url*/ '', /*分类名*/ '', /*品牌名*/ '', /*商品库存状态1或是0*/ '', /*网络价*/ '', /*收藏人数*/ '']);
_mvq.push([
'$addGoods', /*分类id*/ '', /*品牌id*/ '', /*商品名称*/ '', /*商品ID*/ '{{skn}}', /*商品售价*/ '', /*商品图片url*/ '', /*分类名*/
'', /*品牌名*/ '', /*商品库存状态1或是0*/ '', /*网络价*/ '', /*收藏人数*/ ''
]);
_mvq.push(['$logData']);
var _goodsData = {
id: '{{skn}}',// 商品ID
... ... @@ -394,7 +719,7 @@
{{/statGoodsInfo}}
<script type="text/javascript">
(function () {
(function() {
try {
var timestamp = (new Date()).valueOf();
var view = document.createElement('img');
... ...
/**
* 商品详情页
* @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: '&#xe610;',
spread: '&#xe615;'
};
// 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: '&#xe610;',
spread: '&#xe615;'
};
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();
}
});
}());
... ...