Authored by htoooth

async detail header

... ... @@ -170,12 +170,24 @@ class CreateConsultAction extends YohoAction {
}
}
const detailHeader = (req, res, next) => {
let pid = req.query.productId || 0;
let uid = req.user.uid || '';
let vipLevel = detailHelper.vipLevel(req.user.vip);
service.getDetailHeader(pid, uid, req.user.isStudent, vipLevel).then((result) => {
res.render('product/detail-header', Object.assign({layout: false}, result));
}).catch(next);
};
module.exports = {
showMain: Actions.createAction(DetailAction),
indexHotArea: Actions.createAction(HotAreaAction),
indexComment: Actions.createAction(CommentAction),
indexConsult: Actions.createAction(ConsultAction),
createConsult: Actions.createAction(CreateConsultAction)
createConsult: Actions.createAction(CreateConsultAction),
productHeader: detailHeader
};
... ...
... ... @@ -8,7 +8,6 @@
const Promise = require('bluebird');
const co = Promise.coroutine;
const moment = require('moment');
const _ = require('lodash');
const url = require('url');
const helpers = global.yoho.helpers;
... ... @@ -111,10 +110,10 @@ const _getTagsDataByProductInfo = (data) => {
case 'is_advance': // 再到着
tags.isReNew = true;
break;
case 'midYear':// 年中热促
case 'mid_year':// 年中热促
tags.isYearMidPromotion = true;
break;
case 'yearEnd':// 年终大促
case 'year_end':// 年终大促
tags.isYearEndPromotion = true;
break;
default:
... ... @@ -1056,8 +1055,8 @@ const _detailDataPkg = (origin, uid, vipLevel) => {
result.skn = propOrigin('product_skn');
result.productId = propOrigin('product_id');
result.maxSortId = propOrigin('max_sort_id', '');
result.smallSortId = propOrigin('small_sort_id', '');
result.maxSortId = propOrigin('maxSortId', '');
result.smallSortId = propOrigin('smallSortId', '');
result.goCartUrl = helpers.urlFormat('/shopping/cart');
... ... @@ -1269,6 +1268,13 @@ const _detailDataPkg = (origin, uid, vipLevel) => {
})();
};
const getDetailHeader = (pid, uid, isStudent, vipLevel) => {
let currentUserProductInfo = _.partial(_detailDataPkg, _, uid, vipLevel);
return productAPI.getProductAsync(pid, uid, isStudent, vipLevel)
.then(result => currentUserProductInfo(result.data));
};
/**
* 获取某一个商品详情主页面
*/
... ... @@ -1330,5 +1336,6 @@ module.exports = {
createConsultAsync: consultService.createAsync, // 添加咨询
showMainAsync: showMainAsync, // 获取某一个商品详情主页面
indexHotAreaAsync: hotAreaService.indexAsync, // 获取某一个商品的热区数据
saveRecentGoodInCookies // 保存最近的商品
saveRecentGoodInCookies, // 保存最近的商品
getDetailHeader
};
... ...
... ... @@ -53,6 +53,7 @@ router.post('/detail/consult', auth, detail.createConsult);// 创建咨询
router.get('/detail/hotarea', detail.indexHotArea);// 商品热区
router.post('/index/favoriteBrand', favorite.changeFavoriteBrand);// 收藏品牌
router.post('/item/togglecollect', favorite.collectProduct); // 收藏商品
router.get('/detail/header', detail.productHeader); // 动态加载商品详情页的数据
// 学生优惠routers
router.get('/students', students.index); // students 首页
... ...
{{> product/detail-header}}
\ No newline at end of file
... ...
... ... @@ -24,325 +24,6 @@
{{# goodsInfo}}
<div class="main clearfix" data-skn="{{skn}}" data-id="{{productId}}">
<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}}
... ...
{{# goodsInfo}}
<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>
{{/ goodsInfo}}
\ No newline at end of file
... ...
... ... @@ -17,7 +17,7 @@ module.exports = () => {
// 用户是否学生
if (req.user.uid && req.cookies.isStudent) {
req.user.isStudent = req.cookies.isStudent;
req.user.isStudent = req.cookies.isStudent || 0;
}
// 从 SESSION 中获取到当前登录用户的 UID
... ...
... ... @@ -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: '&#xe610;',
spread: '&#xe615;'
};
$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: '&#xe610;',
spread: '&#xe615;'
};
// 商品详情区的热点
$.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();
}());
... ...
... ... @@ -49,6 +49,7 @@
.main {
width: 990px;
margin: 0 auto;
min-height: 560px;
.infos {
width: 465px;
... ...