new-home.page.js 3.82 KB
import 'home/new-home.page.css';
import 'product/new-recommend/new-recommend';
import $ from 'yoho-jquery';
import Page from 'yoho-page';
import 'common/set-trend-world';
import Swiper from 'yoho-swiper2';
import yoho from 'yoho-app';
import AutoScroll from './new-home/auto-scroll';

class NewHome extends Page {
    constructor() {
        super();

        this.selector = {
            $userAvatar: $('.user-avatar'),
            $codeSet: $('.code-set'),
            $resYas: $('.res-c').find('a'),
            $trendCode: $('.trend-code'),
            $floatTop: $('.float-top'),
            $recommendC: $('#new-recommend-c')
        };

        this.init();
    }

    init() {
        this.defaultPic();
        this.bindEvents();
        this.swiper();
        this.showTrend();
        this.autoScroll();
        this.backToTop();
        window.reMarginFooter('.footer-tab');
    }

    backToTop() {
        if (this.selector.$recommendC.length > 0) {
            $(document).scroll(() => {
                let recommendTop = this.selector.$recommendC.offset().top - $(document).scrollTop();

                if (recommendTop <= 400) {
                    this.selector.$floatTop.addClass('hover');
                } else {
                    this.selector.$floatTop.removeClass('hover');
                }
            });
        }
    }

    autoScroll() {
        new AutoScroll(
            {
                scrollC: $('.scroll-c'), // 内容
                scrollWords: $('.scroll-words') // 容器
            }
        );
    }

    // 首次进入个人中心,且登陆,且没有设置潮流口令,打开弹框子
    showTrend() {
        if (yoho.isLogin() && (!this.selector.$trendCode.hasClass('trend')) && !window.cookie('first-trend')) {
            $('.set-trend-world').removeClass('set-trend-hide');
            window.setCookie('first-trend', true, {
                path: '/home',
                expires: 1
            });
        }
    }

    bindEvents() {
        this.selector.$codeSet.on('click', this.codeSet.bind(this));
        this.selector.$resYas.on('click', this.yas.bind(this));
    }

    // 资源位
    swiper() {
        if ($('.banner-center-swiper').length > 0) {
            new Swiper('.banner-center-swiper', {
                pagination: '.swiper-pagination',
                lazyLoading: true,
                lazyLoadingInPrevNext: true,
                paginationClickable: true,
                autoplay: 3000
            });
        }
    }

    // 埋点
    yas(e) {
        let $this = $(e.currentTarget);
        let index = $this.index() + 1;
        let pIndex = $this.parent('div').index() + 1;
        let url = $this.attr('href');
        let name = $this.attr('name');
        let id = $this.attr('id');
        let status = $this.parent('li').hasClass('swiper-slide');

        if (status) {
            index = $this.parent('li').index() + 1;
            pIndex = 1;
        }

        if (window._yas && window._yas.sendCustomInfo) {
            window._yas.sendCustomInfo && window._yas.sendCustomInfo({
                op: 'YB_MY_BANNER_C',
                param: JSON.stringify({
                    I_INDEX: index,
                    F_URL: encodeURIComponent(url),
                    F_NAME: name,
                    F_INDEX: pIndex,
                    F_ID: id
                })
            }, true);
        }
    }

    // 默认头像
    defaultPic() {
        let myImage = new Image(),
            avatar;

        avatar = this.selector.$userAvatar.data('avatar') || '';
        myImage.src = avatar;
        myImage.onload = () => {
            this.selector.$userAvatar.css('background-image', 'url(' + avatar + ')');
        };
    }

    // 修改潮流口令
    codeSet(e) {
        e.preventDefault();
        $('.set-trend-world').show();
        return false;
    }
}

$(() => {
    new NewHome();
});