fe / yohobuywap-node · Commits

Go to a project

Authored by 郭成尧
Commit f59f22ee60d4af60759af4125c2ee11e8a59cfae 1 parent ccd249b0

'shop-js'

Inline Side-by-side
Showing 1 changed file with 258 additions and 189 deletions
... ... @@ -13,10 +13,11 @@ var bannerSwiper,
nav1H,
main1H,
main1oH,
nav2H,
main2oH,
scH,
$nav1 = $('#pos-nav'),
$nav2 = $('#pos-list'),
sTop;
$nav2 = $('#pos-list');
var tip = require('../../plugin/tip'),
filter = require('../../plugin/filter'),
... ... @@ -24,8 +25,6 @@ var tip = require('../../plugin/tip'),
var $subNav = $('.home-sub-nav'),
$collect = $('#collect'),
$categoryList = $('.category-list'),
$subGroup = $('.sub-group'),
$goodsContainer = $('#goods-container'),
$goodsChildren = $goodsContainer.children(),
$ngc = $($goodsChildren.get(0)),
... ... @@ -44,7 +43,7 @@ var defaultOpt = require('../../common/query-param');
var $listNav = $('#list-nav'),
// 导航数据信息
//导航数据信息
navInfo = {
new: {
order: 1,
... ... @@ -53,13 +52,13 @@ var $listNav = $('#list-nav'),
end: false
},
hot: {
order: 0,
order: 1,
reload: true,
page: 1,
end: false
},
newest: {
order: 0,
order: 1,
reload: true,
page: 0,
end: false
... ... @@ -77,7 +76,7 @@ var $listNav = $('#list-nav'),
end: false
}
},
$pre = $listNav.find('.active'), // 纪录进入筛选前的active项，初始为选中项
$pre = $listNav.find('.active'), //纪录进入筛选前的active项，初始为选中项
searching;
var viewType = 1, // 1-首页,2-上新,3-人气
... ... @@ -85,16 +84,13 @@ var viewType = 1, // 1-首页,2-上新,3-人气
listModValue = 4 - listCount % 4,
listIndex;
var subdomains = location.protocol + '//m.yohobuy.com';
require('../../common');
lazyLoad($('img.lazy'));
$('.main-wrap').css({
position: 'static'
});
// 焦点效果
//焦点效果
if ($('.banner-swiper').find('li').size() > 1) {
bannerSwiper = new Swiper('.banner-swiper', {
lazyLoading: true,
... ... @@ -120,18 +116,18 @@ if ($('.multi-browse').find('li').size() > 1) {
});
}
// 根据热门品类的个数来改变样式展示
//根据热门品类的个数来改变样式展示
//
if ($categoryList.find('li').length % 4 !== 0) {
if ($('.category-list li').length % 4 !== 0) {
$('.category-list li:last-child').addClass('category-list-last-li');
}
if ($categoryList.find('li').length < 4) {
$categoryList.addClass('category-list-top-board');
$categoryList.find('.buriedpoint').addClass('category-list-only-one-row');
if ($('.category-list li').length < 4) {
$('.category-list').addClass('category-list-top-board');
$('.category-list').find('.buriedpoint').addClass('category-list-only-one-row');
}
if ($categoryList.find('li').length >= 5) {
if ($('.category-list li').length >= 5) {
for (listIndex = listModValue; listIndex >= 0; listIndex--) {
$('.category-list li').eq(listCount - 4 + listIndex - 1).addClass('category-list-last-full-row');
}
... ... @@ -147,7 +143,7 @@ function getPageGoods(info) {
navType = info.data.type;
nav = navInfo[navType];
// 不需要重新加载并且数据请求结束
//不需要重新加载并且数据请求结束
if (nav.end) {
return;
... ... @@ -156,16 +152,16 @@ function getPageGoods(info) {
searching = true;
$.ajax({
type: 'GET',
url: subdomains + '/product/search/search',
url: info.url,
data: info.data,
success: function(data) {
if (data === '') {
success: function (data) {
if (data === ' ') {
nav.end = true;
}
info.callBack(data);
},
error: function() {
error: function () {
alert('网络断开连接了~');
searching = false;
}
... ... @@ -185,16 +181,17 @@ function getParam(req) {
function newData(callback) {
var req = {};
req.url = location.protocol + '//m.yohobuy.com/index/search/search';
req.data = {
type: 'newest',
order: '0',
order: '1',
page: navInfo.new.page,
tagNew: '1'
};
getParam(req);
req.callBack = function(data) {
req.callBack = function (data) {
$('#new-arrival').append(data);
navInfo.new.page++;
myScroll.refresh();
... ... @@ -209,16 +206,17 @@ function newData(callback) {
function hotData(callback) {
var req = {};
req.url = location.protocol + '//m.yohobuy.com/index/search/search';
req.data = {
type: 'hot',
order: '0',
order: '1',
page: navInfo.hot.page,
showTag: '1'
};
getParam(req);
req.callBack = function(data) {
req.callBack = function (data) {
$('#popularity').append(data);
navInfo.hot.page++;
myScroll.refresh();
... ... @@ -233,21 +231,29 @@ function hotData(callback) {
function tabChange(dom, index) {
var li = dom.eq(index);
dom.removeClass('active');
li.addClass('active');
dom.removeClass('color');
li.addClass('color');
dom.removeClass('active color');
li.addClass('active color');
}
// 首页导航
$.jqtab = function(nav, posNav, main) {
$(nav + ' li, ' + posNav + ' li').not('li.all-goods').on('touchstart', function() {
myScroll = new IScroll('#wrapper', {
probeType: 3,
mouseWheel: true,
click: true
});
//首页导航
(function (nav, posNav, main) {
$(nav + ' li, ' + posNav + ' li').not('li.all-goods').on('touchstart', function () {
var index = $(this).index(),
activeTab = $(this).attr('tab');
if (!$('.filter-mask').hasClass('hide')) {
return;
}
$nav1.removeClass('fixed-top');
tabChange($(nav + ' li'), index);
tabChange($(posNav + ' li'), index);
... ... @@ -263,49 +269,97 @@ $.jqtab = function(nav, posNav, main) {
myScroll && myScroll.refresh();
scH = $('#scroller').outerHeight();
$nav1.removeClass('fixed-top');
$nav1.removeClass('absolute');
$nav2.removeClass('fixed-top');
$nav2.removeClass('absolute');
$nav1.removeClass('fixed-top absolute');
$nav2.removeClass('fixed-top absolute');
}
if (!$nav1.hasClass('hide')) {
myScroll.scrollTo(0, 0 - imgH);
myScroll && myScroll.scrollTo(0, 0 - imgH);
}
$nav1.addClass('hide');
});
};
$.jqtab('#nav', '#pos-nav', '.main');
$('#wrapper').addClass('scroll-wrapper');
}('#nav', '#pos-nav', '.main'));
myScroll = new IScroll('#wrapper', {
probeType: 3,
mouseWheel: true,
click: true
});
myScroll.on('scroll', function() {
var theY;
/**
* 筛选后内容变化，导致nav1位置错掉，重新计算确保位置正确显示
*/
function reNav1Pos() {
var sTop = theY ? theY : 0;
if (sTop < imgH + main1oH + nav1H) {
if ($nav1.hasClass('hide')) {
$nav1.removeClass('hide');
}
if (sTop < imgH + main1H) {
tra = 'translate3d(0, ' + (-scH) + 'px, 0)';
$nav1.addClass('fixed-top')
.removeClass('absolute')
.css({
transform: tra,
'-moz-transform': tra,
'-ms-transform': tra,
'-webkit-transform': tra
});
} else if (sTop < imgH + main1H + nav1H) {
if ($('#home-page').is(':hidden')) {
return false;
}
$nav1.addClass('absolute')
.removeClass('fixed-top');
tra = 'translate3d(0, ' + (imgH + main1H - sTop - scH) + 'px, 0)';
$nav1.css({
transform: tra,
'-moz-transform': tra,
'-ms-transform': tra,
'-webkit-transform': tra
});
}
} else {
if (!$nav1.hasClass('hide')) {
$nav1.addClass('hide');
}
}
}
myScroll.on('scroll', function () {
var scrollCall,
sTop = -this.y;
var tra;
theY = sTop;
if (sTop + winH > scH - 0.25 * $goodsContainer.height() - 50) {
if ($pre !== undefined) {
search({
type: 'shop_id',
id: shopId,
brand: brand,
url: location.protocol + '//m.yohobuy.com/index/search/search',
nextPage: true
});
}
}
if (sTop + winH * 2 > scH) {
switch (viewType) {
case 2:
scrollCall = function() {
scrollCall = function () {
var translate = 'translate3d(0, ' + (-scH) + 'px, 0)';
$nav1.css({
transform: 'translate(0, ' + (-scH) + 'px)'
transform: translate,
'-moz-transform': translate,
'-ms-transform': translate,
'-webkit-transform': translate
});
};
switch (viewType) {
case 2:
newData(scrollCall);
break;
case 3:
scrollCall = function() {
$nav1.css({
transform: 'translate(0, ' + (-scH) + 'px)'
});
};
hotData(scrollCall);
break;
default:
break;
}
}
... ... @@ -315,24 +369,28 @@ myScroll.on('scroll', function() {
}
if (!$nav2.hasClass('hide')) {
$nav2.addClass('hide');
} // 滑动距离不到导航1
} else if (sTop < imgH + nav1H + main1oH) {
} //滑动距离不到导航1
} else if (sTop < imgH + main1oH + nav1H) {
if ($nav1.hasClass('hide')) {
$nav1.removeClass('hide');
}
if (!$nav2.hasClass('hide')) {
$nav2.addClass('hide');
}// 滑动距离不到导航2
} //滑动距离不到导航2
if (sTop < imgH + main1H) {
if (!$nav1.hasClass('fixed-top')) {
tra = 'translate3d(0, ' + (-scH) + 'px, 0)';
$nav1.addClass('fixed-top')
.removeClass('absolute')
.css({
transform: 'translate(0, ' + (-scH) + 'px)'
transform: tra,
'-moz-transform': tra,
'-ms-transform': tra,
'-webkit-transform': tra
});
}
} else if (sTop < imgH + nav1H + main1H) {
} else if (sTop < imgH + main1H + nav1H) {
if ($('#home-page').is(':hidden')) {
return false;
}
... ... @@ -340,8 +398,12 @@ myScroll.on('scroll', function() {
$nav1.addClass('absolute')
.removeClass('fixed-top');
}
tra = 'translate3d(0, ' + (imgH + main1H - sTop - scH) + 'px, 0)';
$nav1.css({
transform: 'translate(0, ' + (imgH + main1H - sTop - scH) + 'px)'
transform: tra,
'-moz-transform': tra,
'-ms-transform': tra,
'-webkit-transform': tra
});
}
} else {
... ... @@ -361,28 +423,58 @@ myScroll.on('scroll', function() {
$nav2.addClass('absolute')
.removeClass('fixed-top');
}
tra = 'translate3d(0, ' + (-scH) + 'px, 0)';
$nav2.css({
transform: 'translate(0, ' + (-scH) + 'px)'
transform: tra,
'-moz-transform': tra,
'-ms-transform': tra,
'-webkit-transform': tra
});
}
}
$('#scroller').trigger('scroll');
});
myScroll.on('scrollStart', function () {
// stop auto play when scroll
bannerSwiper && bannerSwiper.stopAutoplay();
document.addEventListener('touchmove', function(e) {
multiSwiper && multiSwiper.stopAutoplay();
});
myScroll.on('scrollEnd', function () {
// start auto play when scroll end
bannerSwiper && bannerSwiper.startAutoplay();
multiSwiper && multiSwiper.startAutoplay();
$('#scroller').trigger('scroll');
});
document.addEventListener('touchmove', function (e) {
// sub classify不阻止默认事件
if ($(e.target).closest('.sub-classify').length === 0) {
e.preventDefault();
}
}, false);
// window onload 后重新refresh iscroll
$(window).load(function() {
/*if (!isIphone) {
return;
}*/
//window onload 后重新refresh iscroll
$(window).load(function () {
myScroll && myScroll.refresh();
imgH = $('#nav-top').outerHeight();
nav1H = $('#nav').outerHeight();
main1H = $('#nav-main').height();
main1oH = $('#nav-main').outerHeight();
setTimeout(function() {
nav2H = $('#list-nav').outerHeight();
main2oH = $('#goods-container').outerHeight();
setTimeout(function () {
scH = $('#scroller').outerHeight();
}, 1000);
});
... ... @@ -399,12 +491,16 @@ function search(opt) {
page;
if (searching) {
return false;
return;
}
if (!opt.url) {
opt.url = location.protocol + '//m.yohobuy.com/index/search/search';
}
if (!opt.nextPage) {
// 筛选项变更则重置reload为true
//筛选项变更则重置reload为true
for (att in navInfo) {
if (navInfo.hasOwnProperty(att)) {
navInfo[att].reload = true;
... ... @@ -463,11 +559,11 @@ function search(opt) {
default:
break;
}
$.extend(defaultOpt, ext); // 扩展筛选项
$.extend(defaultOpt, ext); //扩展筛选项
}
}
// 导航类别
//导航类别
if ($pre.hasClass('new')) {
navType = 'newest';
} else if ($pre.hasClass('price')) {
... ... @@ -482,7 +578,7 @@ function search(opt) {
page = 1;
} else if (nav.end) {
// 不需要重新加载并且数据请求结束
//不需要重新加载并且数据请求结束
return;
}
$.extend(setting, defaultOpt, {
... ... @@ -503,9 +599,9 @@ function search(opt) {
$.ajax({
type: 'GET',
url: subdomains + '/product/search/search',
url: opt.url ? opt.url : '',
data: setting,
success: function(data) {
success: function (data) {
var $container,
num;
... ... @@ -523,7 +619,7 @@ function search(opt) {
break;
}
if (data === '') {
if (data === ' ') {
nav.end = true;
if (nav.reload) {
... ... @@ -540,6 +636,8 @@ function search(opt) {
}
}
scH = $('#scroller').outerHeight();
nav.reload = false;
nav.page = page;
... ... @@ -548,13 +646,12 @@ function search(opt) {
window.rePosFooter();
setTimeout(function() {
myScroll.refresh();
scH = $('#scroller').outerHeight();
}, 1000);
reNav1Pos();
bindGoodThumbClick();
},
error: function() {
error: function () {
tip.show('网络断开连接了~');
searching = false;
loading.hideLoadingMask();
... ... @@ -562,55 +659,12 @@ function search(opt) {
});
}
/**
* 获取url参数
*/
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r !== null) {
return window.unescape(r[2]);
}
return null;
}
$.ajax({
type: 'GET',
url: subdomains + '/product/search/filter',
data: {
shop_id: brand ? '' : shopId,
brand: brand,
gender: getQueryString('gender'),
channel: getQueryString('channel')
},
success: function(data) {
$goodsContainer.append(data);
// 初始化filter&注册filter回调
filter.initFilter({
fCbFn: search,
hCbFn: function() {
// 切换active状态到$pre上
$pre.addClass('active');
$pre.siblings('.filter').removeClass('active');
},
missStatus: true
});
setTimeout(function() {
myScroll.refresh();
scH = $('#scroller').outerHeight();
}, 1000);
}
});
$listNav.bind('contextmenu', function() {
$listNav.bind('contextmenu', function (e) {
return false;
});
$subNav.on('touchend touchcancel', function(e) {
$subNav.on('touchend touchcancel', function (e) {
var $this = $(e.target).closest('li'),
cname,
nav,
... ... @@ -627,20 +681,36 @@ $subNav.on('touchend touchcancel', function(e) {
if ($this.hasClass('filter')) {
// 筛选面板切换状态
//筛选面板切换状态
if ($this.hasClass('active')) {
filter.hideFilter();
// 点击筛选钱的active项回复active
//点击筛选钱的active项回复active
$pre.addClass('active');
$this.removeClass('active');
myScroll.enable();
} else {
$pre = $this.siblings('.active');
$pre.removeClass('active');
$this.addClass('active');
myScroll.scrollTo(0, -(imgH + main1oH + nav1H));
theY = imgH + main1oH + nav1H;
reNav1Pos();
filter.showFilter();
if ($this.closest('.pos-list').length > 0) {
$('.filter-mask').addClass('call-by-fix').css('top', '');
} else {
$('.filter-mask').removeClass('call-by-fix').css('top', $this.offset().top + nav1H);
}
myScroll.disable();
}
} else {
if ($this.hasClass('new')) {
... ... @@ -654,11 +724,13 @@ $subNav.on('touchend touchcancel', function(e) {
navType = 'discount';
}
myScroll.enable();
nav = navInfo[navType];
if ($this.hasClass('active')) {
// 最新无排序切换
//最新无排序切换
if ($this.hasClass('new')) {
return;
}
... ... @@ -668,9 +740,9 @@ $subNav.on('touchend touchcancel', function(e) {
// 价格/折扣切换排序状态
$this.find('.icon > .iconfont').toggleClass('cur');
$pre = $this; // 更新pre为当前项
nav.reload = true; // 重置reload,HTML会被替换为逆序的HTML
nav.order = nav.order === 0 ? 1 : 0; // 切换排序
$pre = $this; //更新pre为当前项
nav.reload = true; //重置reload,HTML会被替换为逆序的HTML
nav.order = nav.order === 0 ? 1 : 0; //切换排序
$goodsContainer.children('.container:not(.hide)').addClass('hide');
... ... @@ -694,15 +766,15 @@ $subNav.on('touchend touchcancel', function(e) {
} else {
$active = $subNav.find('.active');
$pre = $this; // $pre为除筛选导航的其他导航项，若当前active的为筛选，则把$pre置为当前点击项
$pre = $this; //$pre为除筛选导航的其他导航项，若当前active的为筛选，则把$pre置为当前点击项
if ($active.hasClass('filter')) {
// 若之前active项为筛选，则隐藏筛选面板
//若之前active项为筛选，则隐藏筛选面板
filter.hideFilter();
} else {
// 切换container显示
//切换container显示
$goodsContainer.children('.container:not(.hide)').addClass('hide');
switch (navType) {
... ... @@ -731,6 +803,7 @@ $subNav.on('touchend touchcancel', function(e) {
type: 'shop_id',
id: shopId,
brand: brand,
url: location.protocol + '//m.yohobuy.com/index/search/search',
nextPage: false
});
}
... ... @@ -738,80 +811,68 @@ $subNav.on('touchend touchcancel', function(e) {
e.stopPropagation();
});
filter.initFilter({
fCbFn: function (option) {
search(option);
myScroll.enable();
},
hCbFn: function () {
function scrollHandler() {
sTop = -myScroll.y;
// 当scroll到1/4$goodsContainer高度后继续请求下一页数据
myScroll && myScroll.refresh();
if (sTop + winH > $('#scroller').height() - 0.25 * $goodsContainer.height() - 50) {
if ($pre !== undefined) {
search({
type: 'shop_id',
id: shopId,
brand: brand,
nextPage: true
});
}
}
}
// srcoll to load more
$(window).scroll(function() {
window.requestAnimationFrame(scrollHandler);
});
//切换active状态到$pre上
$pre.addClass('active');
$pre.siblings('.filter').removeClass('active');
// 初始请求最新第一页数据
search({
type: 'shop_id',
id: shopId,
brand: brand,
nextPage: false
myScroll.enable();
},
missStatus: true
});
$listNav.on('touchstart', 'li', function() {
$listNav.on('touchstart', 'li', function (e) {
$(this).addClass('bytouch');
}).on('touchend touchcancel', function() {
}).on('touchend touchcancel', function () {
$listNav.find('li').removeClass('bytouch');
myScroll.refresh();
});
$nav2.on('touchstart', 'li', function() {
$nav2.on('touchstart', 'li', function (e) {
$(this).addClass('bytouch');
}).on('touchend touchcancel', function() {
}).on('touchend touchcancel', function () {
$nav2.find('li').removeClass('bytouch');
myScroll.refresh();
});
// 底部导航点击
//底部导航点击
function fotterClick(group) {
$(group + ' li').on('touchstart', function() {
$subGroup.addClass('hide');
if ($(this).find('.sub-group').length > 0) {
$(group + ' li').on('touchstart', function () {
$('.sub-group').addClass('hide');
$(this).find('.sub-group').removeClass('hide');
}
});
}
fotterClick('.shop-foot-wrapper');
$(document).bind('touchstart', function(e) {
if ($(e.target).hasClass('good-category') || $(e.target).hasClass('sub-group')) {
return false;
function stopPropagation(e) {
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
$subGroup.addClass('hide');
}
$(document).bind('touchstart', function (e) {
$('.sub-group').addClass('hide');
});
$('.shop-foot-wrapper').bind('touchstart', function (e) {
stopPropagation(e);
});
// 店铺收藏 || 取消收藏
$collect.on('touchstart', function() {
$collect.on('touchstart', function () {
var opt;
if (searching) {
return;
}
searching = true;
if ($collect.hasClass('already-collect')) {
... ... @@ -821,15 +882,15 @@ $collect.on('touchstart', function() {
}
$.ajax({
type: 'POST',
url: subdomains + '/product/opt/favoriteBrand',
method: 'get',
url: location.protocol + '//m.yohobuy.com' + '/product/opt/favoriteBrand',
data: {
id: favId ? favId : shopId,
appVersion: appVersion,
opt: opt,
type: 'shop'
},
success: function(data) {
success: function (data) {
var url = '';
if (data.code === 200) {
... ... @@ -840,20 +901,28 @@ $collect.on('touchstart', function() {
}
}
if (data.code === 400) {
url = data.url;
if (data.code === 401) {
url = 'http://m.yohobuy.com/signin.html?refer=' + encodeURIComponent(location.href) + '&openby:yohobuy=';
url += JSON.stringify({"action": "go.weblogin",
"params": {
"jumpurl": {"url": 'http://m.yohobuy.com' + location.pathname, "param": info.data},
"requesturl": {"param": {}, "url": ""},
"priority": "N"
}
});
$('body').append('<a href=\'' + url + '\'><span class="jump-login"><span></a>');
$('.jump-login').click();
}
setTimeout(function() {
setTimeout(function () {
myScroll.refresh();
scH = $('#scroller').outerHeight();
}, 1000);
searching = false;
},
error: function() {
error: function () {
tip.show('网络断开连接了~');
searching = false;
}
... ...