/** * 品牌店铺首页 */ let $ = require('yoho-jquery'), IScroll = require('yoho-iscroll/build/iscroll-probe'), lazyLoad = require('yoho-jquery-lazyload'), Swiper = require('yoho-swiper'); let bannerSwiper, multiSwiper, myScroll, imgH, nav1H, main1H, main1oH, scH, $nav1 = $('#pos-nav'), $nav2 = $('#pos-list'); let tip = require('plugin/tip'), filter = require('plugin/filter'), loading = require('plugin/loading'); let $subNav = $('.home-sub-nav'), $collect = $('#collect'), $goodsContainer = $('#goods-container'), $ngc = $goodsContainer.children('.newest-goods'), $defaultgc = $goodsContainer.children('.default-goods'), $sgc = $goodsContainer.children('.sale-goods'), $pgc = $goodsContainer.children('.price-goods'), $dgc = $goodsContainer.children('.discount-goods'), shopId = $('input[name="shop_id"]').val(), appVersion = $('input[name="app_version"]').val(), brand = $('input[name="brand"]').val(), coverChannel = $('input[name="coverChannel"]').val(), favId = $('input[name="favId"]').val(), uid = $('input[name="uid"]').val(), $newList = $('.new-list'); let winH = $(window).height(), noResult = '<p class="no-result">未找到相关搜索结果</p>'; require('common'); // pagecache判断app设置cookie,判断是否收藏 (function() { let param = location.search; let isApp = param.indexOf('app_version') > -1 || param.indexOf('appVersion') > -1; if (isApp) { $.ajax({ type: 'GET', url: location.protocol + '//m.yohobuy.com/product/index/shopAppCookie', xhrFields: { withCredentials: true }, error: function() { tip.show('网络断开连接了~'); } }); } if ($('.not-collect').data('switch') !== true) { $.ajax({ type: 'GET', url: location.protocol + '//m.yohobuy.com/product/index/shopFav', xhrFields: { withCredentials: true }, data: { shopId: $('.shopid').val(), }, success: function(data) { if (data.collect) { $collect.attr('class', 'already-collect'); } }, error: function() { tip.show('网络断开连接了~'); } }); } }()); // 默认筛选条件 let defaultOpt = require('common/query-param'); let $listNav = $('#list-nav'), // 导航数据信息 navInfo = { new: { order: 1, reload: true, page: 1, end: false }, hot: { order: 1, reload: true, page: 1, end: false }, price: { order: 1, reload: true, page: 0, end: false }, discount: { order: 1, reload: true, page: 0, end: false }, newest: { order: 0, reload: true, page: 0, end: false }, default: { order: 0, reload: true, page: 0, end: false }, sale: { order: 0, reload: true, page: 0, end: false } }, $pre = $listNav.find('.active'), // 纪录进入筛选前的active项,初始为选中项 searching; let viewType = 1, // 1-首页,2-上新,3-人气 listCount = $('.category-list li').length, listModValue = 4 - listCount % 4, listIndex; $('.main-wrap').css({ position: 'static' }); // 焦点效果 if ($('.banner-swiper').find('li').size() > 1) { bannerSwiper = new Swiper('.banner-swiper', { lazyLoading: true, lazyLoadingInPrevNext: true, loop: true, autoplay: 3000, autoplayDisableOnInteraction: false, paginationClickable: true, slideElement: 'li', pagination: '.banner-top .pagination-inner' }); } if ($('.multi-browse').find('li').size() > 1) { multiSwiper = new Swiper('.multi-browse', { lazyLoading: true, lazyLoadingInPrevNext: true, lazyLoadingOnTransitionStart: true, grabCursor: true, slidesPerView: 'auto', slideElement: 'li', watchSlidesVisibility: true }); } // 根据热门品类的个数来改变样式展示 // if ($('.category-list li').length % 4 !== 0) { $('.category-list li:last-child').addClass('category-list-last-li'); } if ($('.category-list li').length < 4) { $('.category-list').addClass('category-list-top-board'); $('.category-list').find('.buriedpoint').addClass('category-list-only-one-row'); } else 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'); } } function getPageGoods(info) { let nav, navType; if (searching) { return; } navType = info.data.type; nav = navInfo[navType]; // 不需要重新加载并且数据请求结束 if (nav.end) { return; } if (info.data && coverChannel) { info.data.coverChannel = coverChannel; } searching = true; $.ajax({ type: 'GET', url: info.url, data: info.data, xhrFields: { withCredentials: true }, success: function(data) { if (data === '' || (data.list && data.list.length <= 0)) { nav.end = true; } info.callBack(data); }, error: function() { tip.show('网络断开连接了~'); searching = false; } }); } function getParam(req) { if (brand) { req.data.brand = brand; } if (shopId) { req.data.shop_id = shopId; } } function newData(callback) { let req = {}; req.url = location.protocol + '//m.yohobuy.com/product/search/search'; req.data = { type: 'new', order: '0', page: navInfo.new.page, tagNew: '1', appVersion: appVersion }; getParam(req); req.callBack = function(data) { $('#new-arrival').append(data); navInfo.new.page++; myScroll && myScroll.refresh(); lazyLoad($('#new-arrival .lazy')); scH = $('#scroller').outerHeight(); searching = false; callback && $.isFunction(callback) && callback(); }; getPageGoods(req); } function hotData(callback) { let req = {}; req.url = location.protocol + '//m.yohobuy.com/product/search/search'; req.data = { type: 'hot', order: '1', page: navInfo.hot.page, showTag: '1', appVersion: appVersion }; getParam(req); req.callBack = function(data) { $('#popularity').append(data); navInfo.hot.page++; myScroll && myScroll.refresh(); lazyLoad($('#popularity .lazy')); scH = $('#scroller').outerHeight(); searching = false; callback && $.isFunction(callback) && callback(); }; getPageGoods(req); } function tabChange(dom, index) { let li = dom.eq(index); dom.removeClass('active color'); li.addClass('active color'); } // 首页导航 (function(nav, posNav, main) { $(nav + ' li, ' + posNav + ' li').not('li.all-goods').on('touchstart', function() { let 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); $(main).hide(); $('#' + activeTab).fadeIn(); if (activeTab === 'new-arrival') { newData(); viewType = 2; } else if (activeTab === 'popularity') { hotData(); viewType = 3; } else if (activeTab === 'home-page') { $nav1.removeClass('fixed-top absolute'); $nav2.removeClass('fixed-top absolute'); } myScroll && myScroll.refresh(); scH = $('#scroller').outerHeight(); if (!$nav1.hasClass('hide')) { myScroll && myScroll.scrollTo(0, 0 - imgH); } $nav1.addClass('hide'); }); }('#nav', '#pos-nav', '.main')); let theY; /** * 筛选后内容变化,导致nav1位置错掉,重新计算确保位置正确显示 */ function reNav1Pos() { let sTop = theY ? theY : 0, tra; 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'); } } } function scrollHandler() { let scrollCall, sTop = -this.y; let tra; theY = sTop; if (sTop + winH > scH - 0.25 * $goodsContainer.height() - 50) { if (typeof $pre !== 'undefined') { search({ // eslint-disable-line type: 'shop_id', id: shopId, brand: brand, url: location.protocol + '//m.yohobuy.com/product/search/search', nextPage: true }); } } if (sTop + winH * 2 > scH) { scrollCall = function() { let translate = 'translate3d(0, ' + (-scH) + 'px, 0)'; $nav1.css({ transform: translate, '-moz-transform': translate, '-ms-transform': translate, '-webkit-transform': translate }); }; switch (viewType) { case 2: newData(scrollCall); break; case 3: hotData(scrollCall); break; default: break; } } if (sTop < imgH) { if (!$nav1.hasClass('hide')) { $nav1.addClass('hide'); } if (!$nav2.hasClass('hide')) { $nav2.addClass('hide'); } // 滑动距离不到导航1 } else if (sTop < imgH + main1oH + nav1H) { if ($nav1.hasClass('hide')) { $nav1.removeClass('hide'); } if (!$nav2.hasClass('hide')) { $nav2.addClass('hide'); } // 滑动距离不到导航2 if (sTop < imgH + main1H) { if (!$nav1.hasClass('fixed-top')) { 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; } if (!$nav1.hasClass('absolute')) { $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 ($('#home-page').is(':hidden')) { return false; } if (!$nav1.hasClass('hide')) { $nav1.addClass('hide'); } if ($nav2.hasClass('hide')) { $nav2.removeClass('hide'); } if (sTop < scH) { if (!$nav2.hasClass('absolute')) { $nav2.addClass('absolute') .removeClass('fixed-top'); } tra = 'translate3d(0, ' + (-scH) + 'px, 0)'; $nav2.css({ transform: tra, '-moz-transform': tra, '-ms-transform': tra, '-webkit-transform': tra }); } } } document.addEventListener('touchmove', function(e) { // sub classify不阻止默认事件 if ($(e.target).closest('.sub-classify').length === 0) { e.preventDefault(); } }, false); /* if (!isIphone) { return; }*/ // window ready 后重新refresh iscroll $(window).ready(function() { myScroll && myScroll.refresh(); imgH = $('#nav-top').outerHeight(); nav1H = $('#nav').outerHeight(); main1H = $('#nav-main').height(); main1oH = $('#nav-main').outerHeight(true); myScroll = new IScroll('#wrapper', { probeType: 2, mouseWheel: false, click: true }); setTimeout(function() { scH = $('#scroller').outerHeight(); }, 500); myScroll.on('scroll', scrollHandler); myScroll.on('scrollStart', function() { // stop auto play when scroll bannerSwiper && bannerSwiper.stopAutoplay(); multiSwiper && multiSwiper.stopAutoplay(); }); myScroll.on('scrollEnd', function() { // start auto play when scroll end bannerSwiper && bannerSwiper.startAutoplay(); multiSwiper && multiSwiper.startAutoplay(); $('#scroller').trigger('scroll'); scrollHandler.bind(this)(); }); lazyLoad($('img.lazy')); }); function bindGoodThumbClick() { $(document).trigger('rebindBpEvent'); } function search(opt) { let setting = {}, ext, att, nav, navType, page; if (searching) { return; } if (!opt.url) { opt.url = location.protocol + '//m.yohobuy.com/product/search/search'; } $pre = $listNav.find('.active').eq(0); if (!opt.nextPage) { // 筛选项变更则重置reload为true for (att in navInfo) { if (navInfo.hasOwnProperty(att)) { navInfo[att].reload = true; } } $listNav.children('.active').removeClass('active'); $pre.addClass('active'); if (opt.hasOwnProperty('id')) { switch (opt.type) { case 'shop_id': ext = { shop_id: opt.id }; break; case 'gender': ext = { gender: opt.id }; ext.coverChannel = opt.id; break; case 'brand': ext = { brand: opt.id }; break; case 'sort': ext = { sort: opt.id }; break; case 'color': ext = { color: opt.id }; break; case 'size': ext = { size: opt.id }; break; case 'price': ext = { price: opt.id }; break; case 'discount': ext = { discount: opt.id }; break; case 'ageLevel': ext = { age_level: opt.id }; break; case 'p_d': ext = { p_d: opt.id }; break; default: break; } $.extend(defaultOpt, ext); // 扩展筛选项 } } // 导航类别 if ($pre.hasClass('newest')) { navType = 'newest'; } else if ($pre.hasClass('price')) { navType = 'price'; } else if ($pre.hasClass('discount')) { navType = 'discount'; } else if ($pre.hasClass('default')) { navType = 'default'; } else if ($pre.hasClass('sale')) { navType = 'sale'; } nav = navInfo[navType]; page = nav.page + 1; if (nav.reload) { page = 1; } else if (nav.end) { // 不需要重新加载并且数据请求结束 return; } // 封面图,defaultOpt对象也有可能包含coverChannel,但defaultOpt优先级高 if (coverChannel) { setting.coverChannel = coverChannel; } $.extend(setting, defaultOpt, { type: navType, order: nav.order, page: page, appVersion: appVersion }); if (brand) { setting.brand = brand; } if (shopId) { setting.shop_id = shopId; } searching = true; loading.showLoadingMask(); $.ajax({ type: 'GET', url: opt.url ? opt.url : '', data: setting, success: function(data) { let $container, num; switch (navType) { case 'newest': $container = $ngc; break; case 'price': $container = $pgc; break; case 'discount': $container = $dgc; break; case 'default': $container = $defaultgc; break; case 'sale': $container = $sgc; break; default: break; } if (data === '' || (data.list && data.list.length <= 0)) { nav.end = true; if (nav.reload) { $container.html(noResult); } } else { if (nav.reload) { $container.html(data); lazyLoad($container.find('.lazy')); } else { num = $container.find('.good-info').length; $container.append(data); lazyLoad($container.find('.good-info:gt(' + (num - 1) + ') .lazy')); } } scH = $('#scroller').outerHeight(); nav.reload = false; nav.page = page; searching = false; loading.hideLoadingMask(); window.rePosFooter(); myScroll && myScroll.refresh(); reNav1Pos(); bindGoodThumbClick(); }, error: function() { tip.show('网络断开连接了~'); searching = false; loading.hideLoadingMask(); } }); } $listNav.bind('contextmenu', function() { return false; }); function newListHide() { let $firstLi = $('ul.pos-list').find('li.first-li-more'); if ($newList.hasClass('hide')) { $firstLi.find('span.up').addClass('hide'); $firstLi.find('span.down').removeClass('hide'); } else { $firstLi.find('span.down').addClass('hide'); $firstLi.find('span.up').removeClass('hide'); } } $newList.on('touchstart', 'li', function(e) { let navType, bpIdData = $(this).attr('data-bp-id') || '', $firstLiDom = $('ul.pos-list').find('li.first-li-more'); e.preventDefault(); if ($(this).hasClass('newest')) { navType = 'newest'; } else if ($(this).hasClass('default')) { navType = 'default'; } else if ($(this).hasClass('sale')) { navType = 'sale'; } $newList.addClass('hide'); $firstLiDom.find('.spanTest').text($(this).text()); $firstLiDom.attr('data-bp-id', bpIdData).addClass('active').siblings().removeClass('active'); $subNav.find('.first-li-more').removeClass('newest default sale').addClass(navType); $(document).trigger('shouldSendBpData', [bpIdData]); newListHide(); // 切换container显示 $goodsContainer.children('.container:not(.hide)').addClass('hide'); switch (navType) { case 'newest': $ngc.removeClass('hide'); break; case 'price': $pgc.removeClass('hide'); break; case 'discount': $dgc.removeClass('hide'); break; case 'default': $defaultgc.removeClass('hide'); break; case 'sale': $sgc.removeClass('hide'); break; default: break; } search({ type: 'shop_id', id: shopId, brand: brand, appVersion: appVersion, url: location.protocol + '//m.yohobuy.com/product/search/search', nextPage: false }); }); $(document).on('touchstart', function(e) { if (!$newList.hasClass('hide') && $(e.target).closest('.new-list, li.first-li-more').length <= 0) { $newList.addClass('hide'); newListHide(); } }); $subNav.on('touchend touchcancel', function(e) { let $this = $(e.target).closest('li'), cname, nav, navType, $active; let bpIdData = $this.attr('data-bp-id') || ''; e.preventDefault(); if ($this.hasClass('first-li-more')) { filter.hideFilter(); $newList.toggleClass('hide'); if ($this.hasClass('default')) { $newList.find('li.default').addClass('active').siblings().removeClass('active'); } else if ($this.hasClass('newest')) { $newList.find('li.newest').addClass('active').siblings().removeClass('active'); } else if ($this.hasClass('sale')) { $newList.find('li.sale').addClass('active').siblings().removeClass('active'); } newListHide(); return true; } // 最新li 列表 $newList.addClass('hide'); $(document).trigger('shouldSendBpData', [bpIdData]); if (typeof $this === 'undefined' || $this.length === 0) { return; } if ($this.hasClass('filter')) { // 筛选面板切换状态 if ($this.hasClass('active')) { $this.removeClass('active'); filter.hideFilter(); myScroll && myScroll.enable(); } else { $this.addClass('active'); myScroll && 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 && myScroll.disable(); } } else { filter.hideFilter();// 隐藏面板 if ($this.hasClass('newest')) { cname = '.newest'; navType = 'newest'; } else if ($this.hasClass('price')) { cname = '.price'; navType = 'price'; } else if ($this.hasClass('discount')) { cname = '.discount'; navType = 'discount'; } else if ($this.hasClass('hot')) { cname = '.default'; navType = 'default'; } else if ($this.hasClass('sale')) { cname = '.sale'; navType = 'sale'; } myScroll && myScroll.enable(); nav = navInfo[navType]; if ($this.hasClass('active')) { // 最新无排序切换 if ($this.hasClass('new')) { return; } if ($this.hasClass('price') || $this.hasClass('discount')) { $this = $subNav.find(cname); // 价格/折扣切换排序状态 $this.find('.icon > .iconfont').toggleClass('cur'); nav.reload = true; // 重置reload,HTML会被替换为逆序的HTML nav.order = nav.order === 0 ? 1 : 0; // 切换排序 $goodsContainer.children('.container:not(.hide)').addClass('hide'); switch (navType) { case 'newest': $ngc.removeClass('newest'); break; case 'price': $pgc.removeClass('hide'); break; case 'discount': $dgc.removeClass('hide'); break; case 'default': $defaultgc.removeClass('hide'); break; case 'sale': $sgc.removeClass('hide'); break; default: break; } } } else { $active = $subNav.find('.active'); if ($active.hasClass('filter')) { // 若之前active项为筛选,则隐藏筛选面板 filter.hideFilter(); } else { // 切换container显示 $goodsContainer.children('.container:not(.hide)').addClass('hide'); switch (navType) { case 'newest': $ngc.removeClass('hide'); break; case 'price': $pgc.removeClass('hide'); break; case 'discount': $dgc.removeClass('hide'); break; case 'default': $defaultgc.removeClass('hide'); break; case 'sale': $sgc.removeClass('hide'); break; default: break; } theY = imgH + main1oH + nav1H; reNav1Pos(); } $subNav.children().removeClass('active'); $subNav.find(cname).addClass('active'); } if (nav.reload) { search({ type: 'shop_id', id: shopId, brand: brand, appVersion: appVersion, url: location.protocol + '//m.yohobuy.com/product/search/search', nextPage: false }); } } e.stopPropagation(); }); filter.initFilter({ fCbFn: function(option) { search(option); myScroll && myScroll.enable(); }, hCbFn: function() { // 切换active状态到$pre上 $pre.addClass('active'); $pre.siblings('.filter').removeClass('active'); myScroll && myScroll.enable(); }, missStatus: true }); $listNav.on('touchstart', 'li', function() { $(this).addClass('bytouch'); }).on('touchend touchcancel', function() { $listNav.find('li').removeClass('bytouch'); // myScroll && myScroll.refresh(); }); $nav2.on('touchstart', 'li', function() { $(this).addClass('bytouch'); }).on('touchend touchcancel', function() { $nav2.find('li').removeClass('bytouch'); // myScroll && myScroll.refresh(); }); // 底部导航点击 // function fotterClick(group) { // $(group + ' li').on('touchstart', function() { // $('.sub-group').addClass('hide'); // $(this).find('.sub-group').removeClass('hide'); // }); // } // // fotterClick('.shop-foot-wrapper'); // // function stopPropagation(e) { // if (e.stopPropagation) { // e.stopPropagation(); // } else { // e.cancelBubble = true; // } // } // // $(document).bind('touchstart', function() { // $('.sub-group').addClass('hide'); // }); // // $('#shop-category').bind('touchstart', function(e) { // // stopPropagation(e); // }); $('.shop-foot-wrapper .buriedpoint').click(function() { let subGroup = $(this).find('.sub-group'); if (subGroup.hasClass('hide')) { subGroup.removeClass('hide'); } else { subGroup.addClass('hide'); } }); // 店铺收藏 || 取消收藏 $collect.on('touchstart', function() { let opt; if (searching) { return; } searching = true; if ($collect.hasClass('already-collect')) { opt = 'cancel'; } else { opt = 'ok'; } $.ajax({ method: 'get', url: location.protocol + '//m.yohobuy.com/product/opt/favoriteBrand', data: { id: favId ? favId : shopId, appVersion: appVersion, opt: opt, type: 'shop', uid: uid }, xhrFields: { withCredentials: true }, success: function(data) { let url = ''; if (data.code === 200) { if ($collect.hasClass('already-collect')) { $collect.attr('class', 'not-collect'); tip.show('店铺取消收藏成功'); } else { $collect.attr('class', 'already-collect'); tip.show('店铺收藏成功'); } } if (data.code === 400) { url = data.data; if ($('#jump-login').length <= 0) { $('body').append('<a href=\'' + url + '\'><span id="jump-login"><span></a>'); } $('#jump-login').click(); } setTimeout(function() { myScroll && myScroll.refresh(); scH = $('#scroller').outerHeight(); }, 500); searching = false; }, error: function() { tip.show('网络断开连接了~'); searching = false; } }); });