|
|
require('product/detail/detail.page.css');
|
|
|
var $ = require('yoho-jquery');
|
|
|
var productId = $('#productId').val();
|
|
|
var goodsId = $('#goodsId').val();
|
|
|
var productSkn = $('#productSkn').val();
|
|
|
var brandId = $('#brand-id').val();
|
|
|
var bundleType = $('#bundleType').val();
|
|
|
// 调用秒杀js
|
|
|
$(window).on('seckill', function() {
|
|
|
require('./tick');
|
|
|
});
|
|
|
|
|
|
require('../common');
|
|
|
// 调用新商品详情页js
|
|
|
require('./new-detail');
|
|
|
|
|
|
// 领券
|
|
|
require('./detail/brand-coupon');
|
|
|
|
|
|
// 页面底部异步加载的部分
|
|
|
require('./detail/desc');
|
|
|
|
|
|
// 为你优选
|
|
|
require('./detail/recommend-for-you-product-desc');
|
|
|
|
|
|
window.rePosFooter && window.rePosFooter();
|
|
|
|
|
|
setTimeout(() => {
|
|
|
var Swiper = require('yoho-swiper');
|
|
|
|
|
|
// 顶部swiper
|
|
|
var swiper = new Swiper('.banner-swiper', {
|
|
|
preloadImages: false,
|
|
|
lazyLoading: true,
|
|
|
lazyLoadingInPrevNext: true,
|
|
|
lazyLoadingOnTransitionStart: true,
|
|
|
paginationClickable: true,
|
|
|
pagination: '.banner-top .pagination-inner',
|
|
|
nextButton: '.my-swiper-button-next',
|
|
|
prevButton: '.my-swiper-button-prev',
|
|
|
spaceBetween: 3
|
|
|
});
|
|
|
|
|
|
$('.banner-swiper').click(function() {
|
|
|
$('.banner-top').toggleClass('hover');
|
|
|
swiper.onResize();
|
|
|
});
|
|
|
$('.banner-top-single').click(function() {
|
|
|
$('.banner-top-single').toggleClass('hover');
|
|
|
});
|
|
|
}, 500);
|
|
|
|
|
|
|
|
|
// 动态加载数据
|
|
|
(function() {
|
|
|
function renderInfo(data) {
|
|
|
if (!data) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
var dbClass = 'data-bind',
|
|
|
infoDataHbs = require('product/detail/infodata.hbs'),
|
|
|
priceDataHbs = require('product/detail/pricedata.hbs');
|
|
|
|
|
|
// 商品价格
|
|
|
if (data.goodsPrice) {
|
|
|
$('.goods-price>.current-price').text(data.goodsPrice.currentPrice);
|
|
|
$('.goods-price>.previous-price').text(data.goodsPrice.previousPrice);
|
|
|
}
|
|
|
|
|
|
// 限购码
|
|
|
if (!data.noLimitGoodsBtn) {
|
|
|
if (data.canGetLimitCode) {
|
|
|
$('.data-can-get-limit-code').removeClass(dbClass);
|
|
|
}
|
|
|
if (data.codeEmpty) {
|
|
|
$('.data-code-empty').removeClass(dbClass);
|
|
|
}
|
|
|
if (data.gotCode) {
|
|
|
$('.data-got-code').removeClass(dbClass);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (data.studentPrice) {
|
|
|
data.studentPrice = Math.round(data.studentPrice.toString().replace('¥', ''));
|
|
|
}
|
|
|
$('#placeholder-pricedata').replaceWith(priceDataHbs(data));
|
|
|
|
|
|
$('#placeholder-infodata').replaceWith(infoDataHbs(data));
|
|
|
|
|
|
if (data.isDepositAdvance === 'Y') {
|
|
|
// 定金预售商品
|
|
|
var tip = require('../plugin/tip');
|
|
|
|
|
|
setTimeout(function() {
|
|
|
$('#addtoCart').text('立即购买').off('touchstart').on('touchstart', function() {
|
|
|
tip.show('定金预售商品只能在APP端购买');
|
|
|
return false;
|
|
|
});
|
|
|
}, 200);
|
|
|
}
|
|
|
|
|
|
// 调用秒杀js
|
|
|
require('./tick');
|
|
|
}
|
|
|
|
|
|
if (productId && (goodsId || productSkn)) {
|
|
|
setTimeout(() => {
|
|
|
$.ajax({
|
|
|
type: 'POST',
|
|
|
url: '/product/detail/newinfo',
|
|
|
data: {
|
|
|
id: productId,
|
|
|
goodsId: goodsId,
|
|
|
productSkn: productSkn,
|
|
|
bundleType: bundleType
|
|
|
},
|
|
|
success: (data) => {
|
|
|
// 如果当前是秒杀商品,且不在秒杀路径下,跳到该商品的秒杀详情页
|
|
|
var reg = /\/product\/show_([\d]+)/;
|
|
|
var regPro = /\/product\/pro_([\d]+)_([\d]+)/;
|
|
|
var regSeckill = /\/product\/seckill/;
|
|
|
|
|
|
// var regProSeckill = /\/product\/seckill\/pro_([\d]+)_([\d]+)/;
|
|
|
var thisHref = window.location.href;
|
|
|
var thisRefer = document.referrer;
|
|
|
|
|
|
if (!regSeckill.test(thisRefer)) {
|
|
|
if (data.isSecKill === 'Y' && (reg.test(thisHref) || regPro.test(thisHref))) {
|
|
|
window.location.replace('/product/seckill/show_' + productSkn + '.html');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 如果秒杀商品没有吊牌价,显示原销售价
|
|
|
if (data.isSecKill === 'Y' && !data.cartInfo.price) {
|
|
|
$('.previous-price').text(data.cartInfo.salePrice);
|
|
|
}
|
|
|
|
|
|
// 渲染动态数据
|
|
|
renderInfo(data);
|
|
|
|
|
|
// 引入like事件
|
|
|
require('./detail/like');
|
|
|
|
|
|
// 设定购物bar
|
|
|
var $cartBar = $('.cart-bar');
|
|
|
var timer = setInterval(function() {
|
|
|
if ($cartBar) {
|
|
|
window.reMarginFooter('.cart-bar');
|
|
|
clearInterval(timer);
|
|
|
} else {
|
|
|
$cartBar = $('.cart-bar');
|
|
|
}
|
|
|
}, 500);
|
|
|
|
|
|
// 限购
|
|
|
var dialog = require('../plugin/dialog');
|
|
|
|
|
|
$('#limit-sale').on('touchend', function(e) {
|
|
|
var loginUrl = $('#loginUrl').val(),
|
|
|
time,
|
|
|
ifr;
|
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
if (loginUrl) {
|
|
|
window.location = loginUrl;
|
|
|
} else {
|
|
|
dialog.showDialog({
|
|
|
dialogText: '进入有货APP,获取限购码',
|
|
|
hasFooter: {
|
|
|
rightBtnText: '打开Yoho!Buy有货APP'
|
|
|
}
|
|
|
}, function() {
|
|
|
var appUrl = $('input[name="limitCodeUrl"]').val();
|
|
|
|
|
|
ifr = document.createElement('iframe');
|
|
|
ifr.src = appUrl;
|
|
|
ifr.style.display = 'none';
|
|
|
document.body.appendChild(ifr);
|
|
|
window.location.href = appUrl;
|
|
|
|
|
|
time = Date.now();
|
|
|
window.setTimeout(function() {
|
|
|
document.body.removeChild(ifr);
|
|
|
if (Date.now() - time < 3200) {
|
|
|
window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.yoho';
|
|
|
}
|
|
|
}, 3000);
|
|
|
|
|
|
}, null, true);
|
|
|
|
|
|
$('.dialog-wrapper').off('touchstart').on('touchstart', function(para) {
|
|
|
para.stopPropagation();
|
|
|
if ($(para.target).hasClass('dialog-wrapper')) {
|
|
|
dialog.hideDialog();
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
|
|
|
window.rePosFooter && window.rePosFooter();
|
|
|
}
|
|
|
});
|
|
|
}, 150);
|
|
|
}
|
|
|
}());
|
|
|
|
|
|
/*
|
|
|
* 获取商品 相关数据: 1. 促销 2. feedback 3. 店铺, 并初始化
|
|
|
*/
|
|
|
+ (function(skn, productId, brandId) { // eslint-disable-line
|
|
|
// 模版: 促销, feedback, 店铺
|
|
|
var promotionT = require('product/detail/promotion.hbs');
|
|
|
var feedbackT = require('product/detail/feedbacks.hbs');
|
|
|
var enterStoreT = require('product/detail/enterStore.hbs');
|
|
|
var bundleT = require('product/detail/bundle.hbs');
|
|
|
|
|
|
// placeholder
|
|
|
var $feedbackStore = $('#placeholder-feedback-store');
|
|
|
var $promotion = $('#placeholder-promotion');
|
|
|
var $bundle = $('#placeholder-bundle');
|
|
|
|
|
|
/**
|
|
|
* 渲染 feedback, 店铺, 替换placeholder
|
|
|
* @param data
|
|
|
* {
|
|
|
* enterStore, feedback
|
|
|
* }
|
|
|
* @param $placeholder
|
|
|
*/
|
|
|
function renderFeedbackStore(data, $placeholder) {
|
|
|
var feedbackHtml = feedbackT({
|
|
|
feedbacks: data.feedbacks
|
|
|
});
|
|
|
|
|
|
var enterStoreHtml = enterStoreT({
|
|
|
enterStore: data.enterStore
|
|
|
});
|
|
|
|
|
|
return $placeholder.replaceWith([feedbackHtml, enterStoreHtml]);
|
|
|
}
|
|
|
|
|
|
|
|
|
/**
|
|
|
* 渲染 促销, 替换placeholder
|
|
|
* @param data
|
|
|
* {
|
|
|
* promotion
|
|
|
* }
|
|
|
* @param $placeholder
|
|
|
*/
|
|
|
function renderPromotion(data, $placeholder) {
|
|
|
var promotionHtml = promotionT({
|
|
|
promotion: data.promotion
|
|
|
});
|
|
|
|
|
|
return $placeholder.replaceWith(promotionHtml);
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 渲染 套装,替换placeholder
|
|
|
* @param data
|
|
|
* @param $placeholder
|
|
|
* @returns {*}
|
|
|
*/
|
|
|
function renderBundle(data, $placeholder) {
|
|
|
var bundleHtml = bundleT({
|
|
|
bundleData: data.bundleData
|
|
|
});
|
|
|
|
|
|
return $placeholder.replaceWith(bundleHtml);
|
|
|
}
|
|
|
|
|
|
function promotionInit() {
|
|
|
var $goodsDiscount = $('#goodsDiscount');
|
|
|
var $discountFirstItem = $goodsDiscount.find('.first-item');
|
|
|
var $discountFolder = $goodsDiscount.find('.discount-folder');
|
|
|
var $discountArrow = $goodsDiscount.find('.first-item span');
|
|
|
|
|
|
// 初始化goods-discount
|
|
|
if ($discountFolder.children().length === 0) {
|
|
|
$discountFolder.css('display', 'none');
|
|
|
$discountArrow.html('');
|
|
|
}
|
|
|
|
|
|
// goods-discount下拉按钮点击事件
|
|
|
if ($goodsDiscount.length && $discountFolder.children().length > 0) {
|
|
|
$goodsDiscount.on('click', function() {
|
|
|
if ($discountFolder.is(':hidden')) {
|
|
|
$discountFirstItem.removeClass('short-text');
|
|
|
$discountArrow.removeClass('icon-down').addClass('icon-up').html('');
|
|
|
$discountFolder.slideDown();
|
|
|
} else {
|
|
|
$discountFirstItem.addClass('short-text');
|
|
|
$discountArrow.removeClass('icon-up').addClass('icon-down').html('');
|
|
|
$discountFolder.slideUp();
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// boot
|
|
|
setTimeout(() => {
|
|
|
$.get('/product/detail/sknData.json', {
|
|
|
skn: skn,
|
|
|
productId: productId,
|
|
|
brandId: brandId,
|
|
|
bundleType: bundleType,
|
|
|
gid: goodsId
|
|
|
}).done(function(info) {
|
|
|
// step1: render dom
|
|
|
renderFeedbackStore(info, $feedbackStore);
|
|
|
renderPromotion(info, $promotion);
|
|
|
|
|
|
if (info.bundleData) {
|
|
|
renderBundle(info, $bundle);
|
|
|
$('.bundle').on('touchstart', function() {
|
|
|
if (window._yas && window._yas.sendCustomInfo) {
|
|
|
window._yas.sendCustomInfo({
|
|
|
op: 'YB_GDS_PACKAGE_C',
|
|
|
param: JSON.stringify({
|
|
|
C_ID: window._ChannelVary[window.cookie('_Channel')],
|
|
|
PRD_ID: productId
|
|
|
})
|
|
|
}, true);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// step2: init js
|
|
|
require('./detail/comments-consults');
|
|
|
require('./detail/consultform'); // TODO
|
|
|
require('./detail/bundle');
|
|
|
promotionInit();
|
|
|
window.rePosFooter && window.rePosFooter();
|
|
|
});
|
|
|
}, 200);
|
|
|
|
|
|
// 加载详情页的返回顶部按钮并注册事件
|
|
|
|
|
|
$(document).scroll(function() {
|
|
|
if ($(document).scrollTop() >= $(document).height() - $(window).height() - 120) {
|
|
|
var top = $('.back-to-top').offset().top - $('.float-top').offset().top + ($('.back-to-top').height() - $('.float-top').height()) / 2;
|
|
|
var left = $('.back-to-top').offset().left - $('.float-top').offset().left;
|
|
|
|
|
|
$('.float-top').addClass('animation').css({
|
|
|
transform: 'translate(' + left + 'px, ' + top + 'px) scale(0, 0)',
|
|
|
});
|
|
|
} else if ($('.product-detail').length && $(document).scrollTop() >= $('.product-detail').offset().top) {
|
|
|
if (!$('.float-top').hasClass('hover') || $('.float-top').hasClass('animation')) {
|
|
|
$('.float-top').addClass('hover').removeClass('animation').removeAttr('style');
|
|
|
}
|
|
|
} else {
|
|
|
if ($('.float-top').hasClass('hover')) {
|
|
|
$('.float-top').removeClass('hover');
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 加载详情页的返回顶部按钮并注册事件-end
|
|
|
}(productSkn, productId, brandId)); |
...
|
...
|
|