|
...
|
...
|
@@ -8,119 +8,208 @@ var $ = require('yoho-jquery'), |
|
|
|
Swiper = require('yoho-swiper'),
|
|
|
|
tip = require('../plugin/tip'),
|
|
|
|
loading = require('../plugin/loading'),
|
|
|
|
lazyload = require('yoho-jquery-lazyload'),
|
|
|
|
banner = require('../../hbs/resources/banner-top.hbs'),
|
|
|
|
tab = require('../../hbs/activity/single-day/tab.hbs'),
|
|
|
|
product = require('../../hbs/activity/single-day/product-list.hbs');
|
|
|
|
banner = require('resources/banner-top.hbs'),
|
|
|
|
tab = require('activity/single-day/tab.hbs'),
|
|
|
|
product = require('activity/single-day/product-list.hbs');
|
|
|
|
|
|
|
|
|
|
|
|
var singleDay = {
|
|
|
|
initParams: function() {
|
|
|
|
var self = this,
|
|
|
|
opt = {
|
|
|
|
$productList: $('.product-list'),
|
|
|
|
$swiper: $('.swiper-tab'),
|
|
|
|
getFlag: false,
|
|
|
|
previousScrollTop: 0,
|
|
|
|
winH: $(window).height(),
|
|
|
|
noResult: '<p class="no-result">未找到相关商品</p>',
|
|
|
|
page: 0,
|
|
|
|
contCode: window.queryString.code || '',
|
|
|
|
channelId: window.queryString.channel_id
|
|
|
|
};
|
|
|
|
|
|
|
|
self.swiperOTop = opt.$swiper[0].offsetTop;
|
|
|
|
|
|
|
|
$.extend(self, opt);
|
|
|
|
},
|
|
|
|
getInitData: function() {
|
|
|
|
var self = this;
|
|
|
|
var _scrollHandler;
|
|
|
|
|
|
|
|
self.initParams();
|
|
|
|
|
|
|
|
_scrollHandler = function() {
|
|
|
|
var curScrollTop = $(window).scrollTop(),
|
|
|
|
index = $('.swiper-tab .active').index(),
|
|
|
|
curHeight = self.$productList.find('ul').eq(index).height();
|
|
|
|
|
|
|
|
// 当scroll到1/4$goodsContainer高度后继续请求下一页数据
|
|
|
|
if (curScrollTop > self.previousScrollTop &&
|
|
|
|
(curScrollTop + self.winH >
|
|
|
|
$(document).height() - 0.25 * curHeight - 50)) {
|
|
|
|
self.getProductData({
|
|
|
|
index: index,
|
|
|
|
tabName: self.tabName(index),
|
|
|
|
isScroll: true
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
var $productList = $('.product-list');
|
|
|
|
var getFlag = false;
|
|
|
|
self.previousScrollTop = curScrollTop;
|
|
|
|
};
|
|
|
|
|
|
|
|
var getProductData = function(index, tabName) {
|
|
|
|
if (getFlag) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
getFlag = true;
|
|
|
|
loading.showLoadingMask();
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: '/activity/single-day/getProductData',
|
|
|
|
data: {
|
|
|
|
tab_name: tabName
|
|
|
|
},
|
|
|
|
success: function(data) {
|
|
|
|
var $productTab = $('.product-tab');
|
|
|
|
|
|
|
|
if (data) {
|
|
|
|
$productTab.eq(index).append(product(data));
|
|
|
|
$(window).on('scroll touchmove touchstart touchend', function() {
|
|
|
|
if ($(window).scrollTop() > self.swiperOTop) {
|
|
|
|
self.$swiper.addClass('fixer');
|
|
|
|
} else {
|
|
|
|
self.$swiper.removeClass('fixer');
|
|
|
|
}
|
|
|
|
|
|
|
|
$productTab.hide().eq(index).show();
|
|
|
|
window.requestAnimationFrame(_scrollHandler.bind(self));
|
|
|
|
});
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: '/activity/single-day/getSingleData',
|
|
|
|
data: {
|
|
|
|
channel_id: self.channelId,
|
|
|
|
contCode: self.contCode
|
|
|
|
},
|
|
|
|
success: function(data) {
|
|
|
|
var i = 0, $swiperTab;
|
|
|
|
var tabNum = window.queryString.tabNum ? window.queryString.tabNum - 1 : 0;
|
|
|
|
|
|
|
|
if (data[0]) {
|
|
|
|
$('.banner').append(banner(data[0][0]));
|
|
|
|
|
|
|
|
if ($('.banner-swiper').find('li').size() > 1) {
|
|
|
|
new Swiper('.banner-swiper', {
|
|
|
|
lazyLoading: true,
|
|
|
|
lazyLoadingInPrevNext: true,
|
|
|
|
loop: true,
|
|
|
|
autoplay: 3000,
|
|
|
|
autoplayDisableOnInteraction: false,
|
|
|
|
paginationClickable: true,
|
|
|
|
slideElement: 'li',
|
|
|
|
pagination: '.banner-top .pagination-inner'
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
lazyload($('img.lazy'));
|
|
|
|
getFlag = false;
|
|
|
|
loading.hideLoadingMask();
|
|
|
|
},
|
|
|
|
error: function() {
|
|
|
|
tip.show('网络断开连接了~');
|
|
|
|
loading.hideLoadingMask();
|
|
|
|
getFlag = false;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
if (data[1]) {
|
|
|
|
$('.swiper-tab').append(tab(data[1]));
|
|
|
|
|
|
|
|
var tabName = function(index) {
|
|
|
|
return $('.swiper-tab li').eq(index).html();
|
|
|
|
};
|
|
|
|
$swiperTab = $('.swiper-tab li');
|
|
|
|
|
|
|
|
var getInitData = function() {
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: '/activity/single-day/getSingleData',
|
|
|
|
success: function(data) {
|
|
|
|
var i = 0, $swiperTab, $productTab;
|
|
|
|
var tabNum = window.queryString.tabNum ? window.queryString.tabNum - 1 : 0;
|
|
|
|
|
|
|
|
if (data[0]) {
|
|
|
|
$('.banner').append(banner(data[0][0]));
|
|
|
|
|
|
|
|
if ($('.banner-swiper').find('li').size() > 1) {
|
|
|
|
new Swiper('.banner-swiper', {
|
|
|
|
lazyLoading: true,
|
|
|
|
lazyLoadingInPrevNext: true,
|
|
|
|
loop: true,
|
|
|
|
autoplay: 3000,
|
|
|
|
autoplayDisableOnInteraction: false,
|
|
|
|
paginationClickable: true,
|
|
|
|
slideElement: 'li',
|
|
|
|
pagination: '.banner-top .pagination-inner'
|
|
|
|
new Swiper('.swiper-tab', {
|
|
|
|
initialSlide: tabNum,
|
|
|
|
slidesPerView: 'auto'
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (data[1]) {
|
|
|
|
$('.swiper-tab').append(tab(data[1]));
|
|
|
|
if (tabNum < 3) {
|
|
|
|
$('.swiper-tab ul').css({
|
|
|
|
transform: 'translateX(0px)'
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
$swiperTab = $('.swiper-tab li');
|
|
|
|
for (i; i < data[1].length; i++) {
|
|
|
|
self.$productList.append('<ul class="product-tab" data-page="0"></ul>');
|
|
|
|
}
|
|
|
|
|
|
|
|
new Swiper('.swiper-tab', {
|
|
|
|
slidesPerView: 'auto'
|
|
|
|
});
|
|
|
|
self.$productTab = $('.product-tab');
|
|
|
|
|
|
|
|
for (i; i < data[1].length; i++) {
|
|
|
|
$productList.append('<ul class="product-tab"></ul>');
|
|
|
|
}
|
|
|
|
self.getProductData({
|
|
|
|
index: tabNum,
|
|
|
|
tabName: self.tabName(tabNum)
|
|
|
|
});
|
|
|
|
$swiperTab.eq(tabNum).addClass('active');
|
|
|
|
|
|
|
|
$productTab = $('.product-tab');
|
|
|
|
$swiperTab.on('click', function() {
|
|
|
|
var index = $(this).index();
|
|
|
|
|
|
|
|
getProductData(tabNum, tabName(tabNum));
|
|
|
|
$swiperTab.eq(tabNum).addClass('active');
|
|
|
|
$swiperTab.removeClass('active').eq(index).addClass('active');
|
|
|
|
|
|
|
|
$swiperTab.on('click', function() {
|
|
|
|
var index = $(this).index();
|
|
|
|
if (self.$productTab.eq(index).find('li').length > 0) {
|
|
|
|
self.$productTab.hide().eq(index).fadeIn();
|
|
|
|
} else {
|
|
|
|
self.getProductData({
|
|
|
|
index: index,
|
|
|
|
tabName: self.tabName(index)
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
$swiperTab.removeClass('active').eq(index).addClass('active');
|
|
|
|
loading.hideLoadingMask();
|
|
|
|
},
|
|
|
|
error: function() {
|
|
|
|
tip.show('网络断开连接了~');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
tabName: function(index) {
|
|
|
|
return $('.swiper-tab li').eq(index).html();
|
|
|
|
},
|
|
|
|
getProductData: function(params) {
|
|
|
|
var self = this;
|
|
|
|
var page;
|
|
|
|
var curProductTab = self.$productTab.eq(params.index);
|
|
|
|
|
|
|
|
if (self.getFlag) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
if ($productTab.eq(index).find('li').length > 0) {
|
|
|
|
$productTab.hide().eq(index).show();
|
|
|
|
page = +curProductTab.attr('data-page') + 1;
|
|
|
|
self.getFlag = true;
|
|
|
|
loading.showLoadingMask();
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: '/activity/single-day/getProductData',
|
|
|
|
data: {
|
|
|
|
tab_name: params.tabName || '',
|
|
|
|
channel_id: self.channelId,
|
|
|
|
page: page
|
|
|
|
},
|
|
|
|
success: function(data) {
|
|
|
|
if (data) {
|
|
|
|
curProductTab.find('.no-result').hide();
|
|
|
|
curProductTab.append(product(data));
|
|
|
|
curProductTab.attr('data-page', page);
|
|
|
|
self.getFlag = false;
|
|
|
|
} else {
|
|
|
|
if (page === 1) {
|
|
|
|
if (curProductTab.find('.no-result').length === 0) {
|
|
|
|
curProductTab.append(self.noResult);
|
|
|
|
}
|
|
|
|
self.getFlag = false;
|
|
|
|
} else {
|
|
|
|
getProductData(index, tabName(index));
|
|
|
|
self.getFlag = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!params.isScroll) {
|
|
|
|
self.$productTab.hide().eq(params.index).fadeIn();
|
|
|
|
}
|
|
|
|
|
|
|
|
$('img.lazy').lazyload({
|
|
|
|
effect: 'fadeIn'
|
|
|
|
});
|
|
|
|
loading.hideLoadingMask();
|
|
|
|
},
|
|
|
|
error: function() {
|
|
|
|
tip.show('网络断开连接了~');
|
|
|
|
loading.hideLoadingMask();
|
|
|
|
self.getFlag = false;
|
|
|
|
}
|
|
|
|
|
|
|
|
loading.hideLoadingMask();
|
|
|
|
},
|
|
|
|
error: function() {
|
|
|
|
tip.show('网络断开连接了~');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
require('../common');
|
|
|
|
require('../common/share');
|
|
|
|
require('yoho-jquery-lazyload');
|
|
|
|
|
|
|
|
$(function() {
|
|
|
|
loading.showLoadingMask();
|
|
|
|
getInitData();
|
|
|
|
singleDay.getInitData();
|
|
|
|
}); |
...
|
...
|
|
