|
|
|
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();
|
|
|
|
}); |
...
|
...
|
|
