feature.page.js 8.91 KB
var $ = require('yoho-jquery');
var lazyLoad = require('yoho-jquery-lazyload');
var Swiper = require('yoho-swiper');
var yoho = require('../yoho-app');
const qs = require('yoho-qs');
const cookie = require('yoho-cookie');

global.jQuery = $;

let isAndroid = /(Android)/i.test(navigator.userAgent);
let isWechat = /micromessenger/i.test(navigator.userAgent);

lazyLoad($('img.lazy'), {q: 95});

function swiperInit() {
    $('.swiper-container').each(function() {
        let opt = {
            loop: $(this).data('loop') === 1 ? true : false,
            slidesPerView: 'auto'
        };
        let spacebetween = $(this).data('spacebetween');
        let autoplay = $(this).data('autoplay');
        let pagination = $(this).find('.swiper-pagination');

        if (spacebetween) {
            opt.spaceBetween = Number(spacebetween);
        }
        if (autoplay) {
            opt.autoplay = Number(autoplay);
        }
        if (pagination) {
            opt.pagination = pagination;
            opt.paginationClickable = true;
        }

        new Swiper(this, opt);
    });
}

function topNavInit() {
    let topnav = $('.floor.fix');

    if (topnav.length) {
        let doc = $(document);
        let cloneNav = topnav.clone().removeAttr('id').addClass('fixnav').prependTo($('.feature-page'));

        $(window).scroll(function() {
            let top = doc.scrollTop();
            let top1 = topnav.offset().top;

            if (top > top1) {
                cloneNav.fadeIn('slow');

                $('.fixnav').each((index, elem) => {
                    let $elem = $(elem);

                    $(elem).css('top', $elem.prev().height());
                });
            } else {
                cloneNav.fadeOut('slow');
            }
        });
    }
}

function ceXuanFuInit() {
    let cxf = $('#sidebar');
    let pageid = cxf.attr('pageid');
    let href = '//activity.yoho.cn/featuresidebar/';

    if (!pageid) {
        return;
    }

    if (location.hostname === 'm.yohobuy.com') {
        href = '//m.yohobuy.com/activity/featuresidebar/';
    }

    $('#sidebar').load(href + pageid + '.html', function() {
        $('.sidebar-img').click(function() {
            $('.sidebar').show();
        });
        $('.sidebar').click(function(e) {
            var $cur = $(e.target);

            if (!$cur.closest('.sidebar-content').length) {
                $(this).hide();
            }
        });

        $('.closesidebar').click(function() {
            $('.sidebar').hide();
        });
    });
}

function diXuanFuInit() {
    let $bottomFixClickArea = $('#bottomFixClickArea');
    let $bottomPerShow = $('.per-show');
    let href = '//activity.yoho.cn/featurebottombar/';
    let lastClickElem;
    let currentElemclickTimes = 0;

    if (location.hostname === 'm.yohobuy.com') {
        href = '//m.yohobuy.com/activity/featurebottombar/';
    }

    $bottomFixClickArea.children().each((index, elem) => {
        let pageId = $(elem).data('url');
        let bottomShowFlag = pageId + '-' + index;
        let $bottomShow = $('#bottomShow' + bottomShowFlag);

        $bottomShow.load(href + pageId + '.html');

        $('#bottomClick' + bottomShowFlag).on('click', () => {
            $bottomPerShow.addClass('hide');
            if (!lastClickElem) {
                currentElemclickTimes++;
            }
            if (lastClickElem === bottomShowFlag && currentElemclickTimes > 1) {
                currentElemclickTimes = 0;
            } else {
                $bottomShow.removeClass('hide');
            }

            lastClickElem = bottomShowFlag;
            currentElemclickTimes++;
        });
    });
}

function videoInit() {
    function cancelMove(e) {
        e.preventDefault && e.preventDefault();
        e.returnValue = false;
        e.stopPropagation && e.stopPropagation();
        return false;
    }

    $('.video-bg').on('click', function() {
        let v = $(this).nextAll('video')[0];

        v.play();
        if (isAndroid && !isWechat) {
            $('.video').addClass('android');
            $('.video-android-bg').removeClass('hide');
            $('.video-android-close').removeClass('hide');
            $('body').css('overflow', 'hidden').on('touchmove', cancelMove);
        }
    });

    $('.video-android-close').on('click', function() {
        $('.video').removeClass('android');
        $('.video-android-bg').addClass('hide');
        $('.video-android-close').addClass('hide');
        $('body').css('overflow', '').off('touchmove', cancelMove);
        $(this).nextAll('video')[0].pause();
    });
}

function tabInit() {
    $('.tab-container').each(function() {
        var tab = $(this).find('a.anchor');
        var tabname = (tab.attr('tab') || '').split('_')[0] + '_';

        tab.on('click', function() {
            tab.removeClass('active');
            $(this).addClass('active');

            let index = $(this).index() + 1;

            for (let i = 1; i <= tab.length; i++) {
                if (index === i) {
                    $('div[tabname="' + tabname + i + '"]').show();
                } else {
                    $('div[tabname="' + tabname + i + '"]').hide();
                }
            }
        });

        for (let i = 2; i <= tab.length; i++) {
            $('div[tabname="' + tabname + i + '"]').hide();
        }
    });
}

function modalInit() {
    $('a.modalimg').on('click', function() {
        $($(this).next('.modal')[0]).show();
    });

    $('.modal-close').on('click', function() {
        $($(this).parent().get(0)).hide();
        return false;
    });

    $('.modal').on('click', function(e) {
        if (e.target.tagName === 'IMG') {
            return false;
        } else {
            $(this).hide();
            return false;
        }
    });
}

function getPersenalCouponHtml(data) {
    let html = `<div class="persenal-coupon">
                    <span class="coupon-amount">${data.amount || 0}</span>
                    <span class="coupon-limit">&yen;${data.useLimit || 0}使用</span>
                    <span class="coupon-name">${data.limitName}</span>
                    <span class="coupon-type">${data.limitTypeName}</span>
                    <span class="coupon-time">有效期:${data.startTime} - ${data.endTime}</span>
                </div>`;

    return html;
}

function persenalCouponInit() {
    let data = {
        activity_id: $('.feature-page').data('id')
    };

    if (yoho.isApp) {
        data.app = {
            uid: cookie.get('app_uid') || qs.uid,
            app_version: cookie.get('app_version') || qs.app_version,
            client_type: cookie.get('app_client_type') || qs.client_type,
            session_key: cookie.get('app_session_key') || qs.session_key
        };
    }

    $('.yoho-conpon').each(function() {
        let $this = $(this);

        if ($this.data('persenal-enable')) {
            $.ajax({
                url: '//m.yohobuy.com/activity/individuation/coupon',
                dataType: 'jsonp',
                data: data,
                success: function(res) {
                    if (res.code === 200 && res.data && res.data.couponId && res.data.personCouponId) {
                        if (res.data.couponCode) {
                            // 领取过
                            const prodList = `http://list.m.yohobuy.com/?coupon_code=${res.data.couponCode}&coupon_id=${res.data.couponId}&intro_text=${res.data.couponName}&title=${res.data.limitTypeName}&openby:yohobuy={"action":"go.couponProductList","params":{"coupon_code":"${res.data.couponCode}","coupon_id":"${res.data.couponId}","title":"${res.data.limitTypeName}","coupon_title":"${res.data.couponName}"}}`; // eslint-disable-line

                            $this.attr('href', prodList);
                            $this.removeClass('yoho-conpon');
                        } else {
                            // 未领取过
                            $this.attr('data-token', `${res.data.couponId}:${res.data.personCouponId}`);
                        }

                        $this.html(getPersenalCouponHtml(res.data));
                        $this.closest('.floor').show();
                    }
                }
            });
        }
    });
}

$(function() {
    if ($('.over').length) {
        // 过期/删除 状态的 活动
        setTimeout(function() {
            yoho.goHome();
        }, 3000);
        return false;
    }

    // tab
    tabInit();

    // 微信中点击之后,返回跳到指定位置
    let totalH, scH;
    let top = localStorage.changtu1;

    window.scrollTo(0, top);
    localStorage.removeItem('changtu1');

    $('a').click(function() {
        totalH = event.pageY;
        scH = event.clientY;
        localStorage.changtu1 = totalH - scH; // 每次点击缓存高度
    });

    // 轮播
    swiperInit();

    // 顶悬浮
    topNavInit();

    // 侧悬浮
    ceXuanFuInit();

    // 底悬浮
    diXuanFuInit();

    // 视频相关
    videoInit();

    // 模态框
    modalInit();

    // 个性化券查询
    persenalCouponInit();
});