/** * 逛详情页 * @author: xuqi<qi.xu@yoho.cn> * @date: 2015/10/13 */ require('guang/info-index.page.css'); let $ = require('yoho-jquery'), lazyLoad = require('yoho-jquery-lazyload'); let $authorIntro = $('.author .intro'); // collocation block variable let $fixedThumbContainer = $(''), $coBlock, $thumbContainer = $('.thumb-container'); let $sideNav = $('.side-nav'), $guangPage = $('.guang-detail-page'), $overlay = $('.overlay'), $subNav = $('.sub-nav'); let $relatedRecoMore = $('.related-reco-more'); // 展开更多 let time = 0; require('common'); require('plugin/wx-share')(); require('./detail-dynamic'); require('./detail/guang-cart'); require('./detail/guang-comments'); let CollactionBlock = require('./collocation-block'); $('#wrapper').css({ 'overflow-y': 'scroll' }); // 初始化iscroll function initIscroll() { let $yohoHeader = $('.yoho-header'); let hH = 0, winH, tcH, cbH, cbTop, fixedThumbDom; if (CollactionBlock.exists()) { new CollactionBlock(); } // 考虑通用头部的影响:对offset().top以及winH做对应偏移 if ($yohoHeader.length > 0) { hH = $yohoHeader.outerHeight(); } winH = $(window).height() - hH; fixedThumbDom = $fixedThumbContainer[0]; tcH = $thumbContainer ? $thumbContainer.outerHeight() : 0; if ($coBlock) { cbH = $coBlock.outerHeight(); cbTop = $coBlock.offset().top - hH; } $(window).on('scroll', function() { let sTop = -this.y; let classList = fixedThumbDom && fixedThumbDom.className; if (sTop <= cbTop - winH + tcH) { if (classList.indexOf('fixed-bottom') === -1) { $fixedThumbContainer .addClass('fixed-bottom') .removeClass('hide'); } } else if (sTop <= cbTop) { if (classList.indexOf('hide') === -1) { $fixedThumbContainer .addClass('hide') .removeClass('fixed-bottom fixed-top'); } } else if (sTop <= cbTop + cbH - tcH) { if (classList.indexOf('fixed-top') === -1) { $fixedThumbContainer .addClass('fixed-top') .removeClass('hide absolute') .css('top', ''); } } else if (sTop <= cbTop + cbH) { if (classList.indexOf('absolute') === -1) { $fixedThumbContainer .addClass('absolute') .removeClass('fixed-top hide'); } fixedThumbDom.style.top = cbTop + hH + cbH - tcH - sTop + 'px'; } else if (sTop > cbTop + cbH) { if (classList.indexOf('hide') === -1) { $fixedThumbContainer .addClass('hide') .removeClass('absolute'); } } }); // 评论滚动加载 // setTimeout(function() { // let afterScroll = document.body.scrollTop; // if (afterScroll - beforeScroll > 0) { // window.requestAnimationFrame(scrollHandler); // beforeScroll = afterScroll; // } else { // return false; // } // }, 5); } /** * 相关商品点击事件 */ $relatedRecoMore.on('touchstart', function(e) { let $relatedRecoBlock = $(e.currentTarget).parent().find('.related-reco-block'); if ($relatedRecoBlock.hasClass('related-reco-hide')) { $relatedRecoBlock.removeClass('related-reco-hide'); $(e.currentTarget).remove(); } else { $relatedRecoBlock.addClass('related-reco-hide'); } return false; }); // 微信导航 $('.nav-btn').on('touchstart', function() { $sideNav.css('pointer-events', 'none'); $guangPage.addClass('menu-open'); $overlay.show().css({ opacity: 0.3, height: $('#scroller').height() }); $sideNav.addClass('on'); setTimeout(function() { $sideNav.css('pointer-events', 'auto'); }, 400); return false; }); // 点击一级导航,弹出二级导航 $sideNav.on('touchend', 'li', function(e) { if ($(this).find('.sub-nav').size() > 0) { $('.sub-nav').removeClass('show'); $(this).find('.sub-nav').addClass('show'); $(this).find('.highlight').removeClass('highlight'); } if (e.target.pathname === location.pathname) { hideSideBar(); // eslint-disable-line return false; } }); // 返回一级导航,收起二级导航 $subNav.each(function() { $(this).find('li').eq(0).on('click', function() { $('.sub-nav').removeClass('show'); return false; }); }).on('touchstart', function(e) { if (e.currentTarget !== e.target) { $subNav.find('li').removeClass('current'); } }); // 侧边栏点击背景色变化 function highlight($elem) { $elem.find('li').on('touchstart', function() { $elem.find('.highlight').removeClass('highlight'); $(this).addClass('highlight'); }).on('touchend touchcancel', function() { $(this).removeClass('highlight'); }); } highlight($sideNav); highlight($subNav); function hideSideBar() { if ($guangPage.hasClass('menu-open')) { $guangPage.removeClass('menu-open'); $overlay.hide(); $('.sub-nav').removeClass('show'); $sideNav.removeClass('on'); } } $overlay.on('touchstart', function() { hideSideBar(); return false; }); function setCookie(name, value, options) { let expires = '', path, domain, secure, date; if (typeof value !== 'undefined') { options = options || {}; if (value === null) { value = ''; options.expires = -1; } if (options.expires && (typeof options.expires === 'number' || options.expires.toUTCString)) { if (typeof options.expires === 'number') { date = new Date(); date.setTime(Date.parse((new Date()).toLocaleDateString()) + 86400 * 1000); } else { date = options.expires; } expires = '; expires=' + date.toGMTString(); } path = options.path ? '; path=' + options.path : ''; domain = options.domain ? '; domain=' + options.domain : ''; secure = options.secure ? '; secure' : ''; document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); } } // 长按二维码埋点 $('.wei-share').on('touchstart', function() { time = setTimeout(function() { if (window._yas && window._yas.sendCustomInfo) { window._yas.sendCustomInfo({ op: 'YB_PRESS_QRCODE', param: JSON.stringify({ C_ID: window._ChannelVary[window.cookie('_Channel')], PAGE_URL: window.location.href }) }, true); } }, 500); }); $('.wei-share').on('touchend', function(e) { e.stopPropagation(); clearTimeout(time); }); // 初始化页面,包括是否使用iscorll初始化页面 // 接口暴露在HTML中,使用压缩名 (function() { let isweixin = navigator.userAgent.indexOf('MicroMessenger') ? true : false; // pagecache 前端判断是否显示头 let param = location.search; let isHeader = navigator.userAgent.indexOf('MicroMessenger') > -1 || param.indexOf('app_version') > -1 || param.indexOf('appVersion') > -1; isHeader && $('#yoho-header').remove(); $('.main-wrap').css({ position: 'static' }); lazyLoad($('.lazy')); // offset.left约等于marginLeft的值则表示介绍被换行,则清除intro的paddingTop让其更靠近头像和作者名 if ($authorIntro.offset() && (parseInt($authorIntro.offset().left, 10) === parseInt($authorIntro.css('margin-left'), 10))) { $authorIntro.css('padding-top', 0); } if (isweixin) { $overlay.css('position', 'absolute'); } $('#float-layer-close').on('touchend', function() { let appClose = window.cookie('_float-layer-app-close') || '0'; if (parseInt(appClose, 10) === 0) { setCookie('_float-layer-app-close', 1, {expires: -1}); } else if (parseInt(appClose, 10) === 1) { setCookie('_float-layer-app-close', 2, {expires: -1}); } $('#float-layer-app').hide(); $('.down-bottom').hide(); return false; }); if ($('#float-layer-btn') && $('#float-layer-btn')[0]) { $('#float-layer-btn').on('touchstart', function(e) { if (window._yas && window._yas.sendCustomInfo) { window._yas.sendCustomInfo({ op: 'YB_DOWNLOAD_C', param: JSON.stringify({ C_ID: window._ChannelVary[window.cookie('_Channel')], TO_URL: 'http://www.yohoshow.com/about/index/yohobuyqr' }) }, true); } window.location = 'http://www.yohoshow.com/about/index/yohobuyqr'; e.srcEvent.stopPropagation(); }); if (typeof window.cookie === 'function' && parseInt(window.cookie('_float-layer-app-close'), 10) !== 2) { $('.down-bottom').show(); } else { $('.down-bottom').hide(); } } initIscroll(); }());