detail.page.js 6.31 KB
/**
 *  商品详情
 * @author: liangzhifeng<zhifeng.liang@yoho.cn>
 * @date: 2015/10/20
 */
require('product/detail/detail.page.css');
let $ = require('yoho-jquery'),
    Swiper = require('yoho-swiper'),
    Hammer = require('yoho-hammer'),
    lazyLoad = require('yoho-jquery-lazyload');

require('./detail/page-render')(function() {
    let $discountFolder = $('.goods-discount .discount-folder'),
        $discountArrow = $('.goods-discount .first-item span');

    let goodsDiscountEl = document.getElementById('goodsDiscount'),
        goodsDiscountHammer = goodsDiscountEl && new Hammer(goodsDiscountEl),
        $discountFirstItem = $(goodsDiscountEl).find('.first-item');

    let $cart = $('.cart-bar');

    let appUrl = $('input[name="limitCodeUrl"]').val();

    let dialog = require('../plugin/dialog');

    require('../common');

    // add extra marign-bottom for footer to show the yoho copyright
    function showFooter() {
        let $cartBar = $('.cart-bar');

        let timer = setInterval(function() {
            if ($cartBar) {
                window.reMarginFooter('.cart-bar');
                clearInterval(timer);
            } else {
                $cartBar = $('.cart-bar');
            }
        }, 200);
    }

    showFooter();

    lazyLoad($('img.lazy'));

    if ($('#goodsDiscount h1').length < 1) {
        $('.dropdown').remove();
    }

    // 顶部swiper
    let swiper = new Swiper('.banner-swiper', {
        lazyLoading: true,
        lazyLoadingInPrevNext: true,
        paginationClickable: true,
        pagination: '.banner-top .pagination-inner',
        nextButton: '.my-swiper-button-next',
        prevButton: '.my-swiper-button-prev',
        spaceBetween: 3
    });

    if ($('.banner-swiper').length) {
        let bannerSwiperHammer = new Hammer($('.banner-swiper')[0]);

        bannerSwiperHammer.on('tap', function() {
            $('.banner-top').toggleClass('hover');
            swiper.onResize();
        });
    }


    // 初始化goods-discount
    if ($discountFolder.children().length === 0) {
        $discountFolder.css('display', 'none');
        $discountArrow.html('');
    }

    // goods-discount下拉按钮点击事件
    if (goodsDiscountHammer && $discountFolder.children().length > 0) {
        goodsDiscountHammer.on('tap', function() {
            if ($discountFolder.is(':hidden')) {
                $discountFirstItem.removeClass('short-text');
                $discountArrow.removeClass('icon-down').addClass('icon-up').html('&#xe608;');
                $discountFolder.slideDown();
            } else {
                $discountFirstItem.addClass('short-text');
                $discountArrow.removeClass('icon-up').addClass('icon-down').html('&#xe609;');
                $discountFolder.slideUp();
            }
        });
    }

    $('#limit-sale').on('touchend', function(e) {
        let loginUrl = $('#loginUrl').val(),
            time,
            ifr;

        e.stopPropagation();

        if (loginUrl) {
            window.location = loginUrl;
        } else {
            dialog.showDialog({
                dialogText: '进入有货APP,获取限购码',
                hasFooter: {
                    rightBtnText: '打开Yoho!Buy有货APP'
                }
            }, function() {
                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();
                }
            });
        }
    });

    require('./detail/like');
    require('./detail/desc');
    require('./detail/comments-consults');
    require('./detail/consultform');
    require('./detail/recommend-for-you-product-desc');
    require('./detail/bundle');

    if ($('#remove-cart-count').length) {
        // 购物车商品数量
        $.ajax({
            type: 'GET',
            url: '/cart/index/count',
            success: function(data) {
                let count;

                if (data.code === 200) {
                    count = data.data.cart_goods_count || 0;
                    if (count === 0) {
                        return false;
                    }
                    if (count > 99) {
                        count = '99+';
                    }
                    $cart.find('.num-tag').html(count).removeClass('hide');
                }
            }
        });
    }

    if ($('.good-detail-page').length > 0) {
        $('#yoho-footer').css('border-top', '1px solid #e0e0e0');
    }

    // 加载详情页的返回顶部按钮并注册事件

    $(document).scroll(function() {
        if ($(document).scrollTop() >= $(document).height() - $(window).height() - 20) {
            if (!$('.float-top').hasClass('animation')) {
                let top = $('.back-to-top').offset().top -
                    $('.float-top').offset().top +
                    ($('.back-to-top').height() - $('.float-top').height()) / 2;
                let 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
});
require('./detail/brand-coupon');