family-coin.page.js 3.87 KB
import 'home/family-coin.page.css';
import $ from 'yoho-jquery';
import Page from 'yoho-page';
import resultRender from 'home/coin-list.hbs';

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

        this.selector = {
            $coverBg: $('.cover-bg'),
            $tabItem: $('.tab-item'),
            $scoreDetailC: $('.score-detail-c'),
            $chosen: $('.tab-item .list').find('li'),
            $defaultChosen: $('.tab-item .list').find('li:first'),
            $result: $('.result')
        };

        this.view = {
            resultRender
        };

        this.source = 0;
        this.queryType = 0;
        this.beginTime = '';
        this.endTime = '';
        this.page = 1;
        this.loading = false;
        this.end = false;

        this.init();
    }

    init() {
        this.selector.$defaultChosen.addClass('chosen');
        this.setHeight();
        this.bindEvents();
        this.chosenData();
        $(window).scroll(() => {
            window.requestAnimationFrame(this.scrollHandler.bind(this));
        });
    }

    scrollHandler() {
        if (($(window).scrollTop() + $(window).height() >= $(document).height() * 0.8)) {
            this.doMore();
        }
    }

    doMore() {
        if (!this.end && !this.loading) {
            this.page++;
            this.chosenData();
        }
    }

    bindEvents() {
        this.selector.$tabItem.on('click', this.tab.bind(this));
        this.selector.$coverBg.on('click', this.coverBg.bind(this));
        this.selector.$chosen.on('click', this.chosen.bind(this));
    }

    chosen(e) {
        let $this = $(e.currentTarget);
        let $parensId = $this.parents('.tab-item').attr('id');

        this.selector.$result.empty();
        switch ($parensId) {
            case 'source':
                alert('source');
                break;
            case 'queryType':
                this.queryType = $this.attr('data-queryType');
                break;
            case 'time':
                alert('time');
                break;
            default:
                alert('default');
        }
        this.end = false;
        this.page = 0;
        this.chosenData();
        $this.addClass('chosen').siblings('li').removeClass('chosen');
        return false;
    }

    setHeight() {
        let wHeight = $(window).height();

        this.selector.$coverBg.css('min-height', `${wHeight}px`);
    }

    tab(e) {
        let $this = $(e.currentTarget);

        // $this.find('li:first').addClass('chosen');
        // $this.find('li:first').siblings('li').removeClass('chosen');
        if ($this.hasClass('active')) {
            $this.removeClass('active');
            this.selector.$scoreDetailC.removeClass('active');
        } else {
            $this.addClass('active');
            $this.siblings('.tab-item').removeClass('active');
            this.selector.$scoreDetailC.addClass('active');
        }
    }

    coverBg() {
        this.selector.$scoreDetailC.removeClass('active');
        this.selector.$tabItem.removeClass('active');
    }

    chosenData() {
        this.loading = true;
        this.ajax({
            url: '/home/family/coinDetail/getCoinData',
            data: {
                source: this.source,
                queryType: this.queryType,
                beginTime: this.beginTime,
                endTime: this.endTime,
                page: this.page
            }
        }).then(result => {
            if (result && result.coinList.length > 0) {
                this.selector.$result.append(this.view.resultRender(result));
                this.loading = false;
                this.selector.$tabItem.removeClass('active');
                this.selector.$scoreDetailC.removeClass('active');
            } else {
                this.end = true;
            }
        }).catch(error => {
            console.error(error);
        });
    }
}

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