|
@@ -0,0 +1,430 @@
|
|
|
+import APIClient from '../../../util/API/APIClient';
|
|
|
+import CourseItem from '../../../component/CourseItem';
|
|
|
+import Consts from '../../../util/Consts';
|
|
|
+import userDataStorage from '../../../util/userDataStorage';
|
|
|
+import Utils from '../../../util/Utils';
|
|
|
+import { CommandBus, CMD_TYPE } from '../../../util/CommandBus';
|
|
|
+
|
|
|
+class WaterfallIndexScene extends scene {
|
|
|
+ constructor(scope) {
|
|
|
+ super(scope);
|
|
|
+ this.advertSwiper = null;
|
|
|
+ this.advertList = [];
|
|
|
+ this.waterfallSwiper = null;
|
|
|
+ this.clockTimeout = null;
|
|
|
+ this.firstCourseItemId = null;
|
|
|
+ }
|
|
|
+
|
|
|
+ fetchRecommendList() {
|
|
|
+ APIClient.getRecommendList((isTrue, res) => {
|
|
|
+ if (!isTrue) { return; }
|
|
|
+ if (!res.success) {
|
|
|
+ TVUtil.Toast.show('获取推荐列表失败!', 1500);
|
|
|
+ }
|
|
|
+ this.renderRecommendList(res.data || []);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ renderRecommendList(dataset) {
|
|
|
+ let list = document.getElementById('recommend');
|
|
|
+ list.innerHTML = '';
|
|
|
+ let listHtml = '';
|
|
|
+ for (let i in dataset) {
|
|
|
+ const { id, title, subTitle, coverUrl } = dataset[i];
|
|
|
+ let subject = title;
|
|
|
+ let subjectSub = subTitle;
|
|
|
+ let img = Consts.IMG_PATH + '/' + coverUrl;
|
|
|
+ let itemDataset = { img, subject, subjectSub, buyed: false };
|
|
|
+ if (0 == i) {
|
|
|
+ this.firstCourseItemId = `product-item-recommend-${id}`;
|
|
|
+ }
|
|
|
+ listHtml += `
|
|
|
+ <div class="product-item" id="product-item-recommend-${id}" fe-role="Widget">
|
|
|
+ ${CourseItem.createHTMLString(itemDataset)}
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ }
|
|
|
+ list.innerHTML = listHtml;
|
|
|
+ this.moye.root.reRender();
|
|
|
+
|
|
|
+ if (this.firstCourseItemId) {
|
|
|
+ this.moye.root.getWidgetById(this.firstCourseItemId).focus();
|
|
|
+ }
|
|
|
+
|
|
|
+ this.fetchRenewProductList();
|
|
|
+ }
|
|
|
+
|
|
|
+ fetchAdvertList() {
|
|
|
+ APIClient.getRecommendPosters((isTrue, res) => {
|
|
|
+ if (!isTrue || !res.success) { return; }
|
|
|
+ this.renderAdvertList(res.data.recs || []);
|
|
|
+ this.advertList = res.data.recs;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ renderAdvertList(recs) {
|
|
|
+
|
|
|
+ let sliderHTML = [];
|
|
|
+ recs.forEach(rec => {
|
|
|
+ const { img, pid, type } = rec;
|
|
|
+ sliderHTML.push(`<div class="swiper-slide"><img src="${Consts.IMG_PATH}/${img}" alt="" /></div>`)
|
|
|
+ });
|
|
|
+ let swiperHTML = `
|
|
|
+ <div id="swiper-advert" class="swiper-container-advert swiper-container" fe-role="Widget">
|
|
|
+ <div class="swiper-wrapper">${sliderHTML.join('')}</div>
|
|
|
+ <div class="swiper-pagination swiper-pagination-advert"></div>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ let container = document.getElementById('advert-carousel');
|
|
|
+ container.innerHTML = swiperHTML;
|
|
|
+
|
|
|
+ this.advertSwiper = new Swiper('.swiper-container-advert', {
|
|
|
+ direction: 'horizontal',
|
|
|
+ autoplay: true,
|
|
|
+ pagination: {
|
|
|
+ el: '.swiper-pagination-advert',
|
|
|
+ bulletElement: 'li',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ this.moye.root.reRender();
|
|
|
+ }
|
|
|
+
|
|
|
+ fetchRenewProductList() {
|
|
|
+ APIClient.getRenewProductList((isTrue, res) => {
|
|
|
+ if (!isTrue || !res.success) { return; }
|
|
|
+ if (res.data && res.data.totalNum) {
|
|
|
+ this.showScene(require('./RenewAlertScene.js'), { recs: res.data.recs });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ fetchWaterfallList() {
|
|
|
+ APIClient.getWaterfallList((isTrue, res) => {
|
|
|
+ if (!isTrue || !res.success) { return; }
|
|
|
+ this.renderWaterfallList(res.data || []);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ renderWaterfallList(tagList) {
|
|
|
+
|
|
|
+ if (!tagList || !Array.isArray(tagList)) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const subGroupSpliter = (array, subGroupLength) => {
|
|
|
+ let cursor = 0;
|
|
|
+ let newArray = [];
|
|
|
+ while (cursor < array.length) {
|
|
|
+ newArray.push(array.slice(cursor, cursor += subGroupLength));
|
|
|
+ }
|
|
|
+ return newArray;
|
|
|
+ }
|
|
|
+
|
|
|
+ const courseDataTransfer = (groupIndex, dataset) => {
|
|
|
+ let listHTML = '';
|
|
|
+ dataset.forEach(item => {
|
|
|
+ const { id, title, subTitle, coverUrl } = item;
|
|
|
+ const courseItemDataset = {
|
|
|
+ img: Consts.IMG_PATH + '/' + coverUrl,
|
|
|
+ subject: title,
|
|
|
+ subjectSub: subTitle,
|
|
|
+ buyed: false,
|
|
|
+ };
|
|
|
+ listHTML += `
|
|
|
+ <div class="product-item" fe-role="Widget" id="product-item-${groupIndex}-${id}">
|
|
|
+ ${CourseItem.createHTMLString(courseItemDataset)}
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ });
|
|
|
+ return listHTML;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (tagList.length) {
|
|
|
+ document.querySelector('.arrow_down').style.display = 'block';
|
|
|
+ }
|
|
|
+
|
|
|
+ const groups = [];
|
|
|
+ for (let index in tagList) {
|
|
|
+ const tag = tagList[index];
|
|
|
+ const { name, recs } = tag;
|
|
|
+
|
|
|
+ if (!recs || !recs.length) {
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+
|
|
|
+ const splitedRecs = subGroupSpliter(recs, 5);
|
|
|
+
|
|
|
+ splitedRecs.forEach((oneRecs, index) => {
|
|
|
+ let serialName = '';
|
|
|
+ if (index === 0) {
|
|
|
+ serialName = name;
|
|
|
+ }
|
|
|
+ groups.push({
|
|
|
+ serialName,
|
|
|
+ courseList: oneRecs,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ const groupHTMLArr = [];
|
|
|
+ groups.forEach((group, groupIndex) => {
|
|
|
+ const { serialName, courseList } = group;
|
|
|
+ if (serialName) {
|
|
|
+ groupHTMLArr.push(
|
|
|
+ `
|
|
|
+ <div class="group-wrapper">
|
|
|
+ <div class="group-name">${serialName}</div>
|
|
|
+ <div class="group-list">${courseDataTransfer(groupIndex, courseList)}</div>
|
|
|
+ </div>
|
|
|
+ `
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ groupHTMLArr.push(
|
|
|
+ `
|
|
|
+ <div class="group-wrapper">
|
|
|
+ <div class="group-list">${courseDataTransfer(groupIndex, courseList)}</div>
|
|
|
+ </div>
|
|
|
+ `
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ const sliderGroups = subGroupSpliter(groupHTMLArr, 2);
|
|
|
+ const sliders = [];
|
|
|
+ sliderGroups.forEach(sliderGroup => {
|
|
|
+ sliders.push(
|
|
|
+ `
|
|
|
+ <div class="waterfall-content">
|
|
|
+ <div class="scroll-list">
|
|
|
+ ${sliderGroup.join('')}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `
|
|
|
+ );
|
|
|
+ });
|
|
|
+
|
|
|
+ let swiperContainer = document.getElementById('waterfall-swiper');
|
|
|
+
|
|
|
+ let sliderFirst = document.getElementById('slide-0');
|
|
|
+ if (swiperContainer && sliderFirst) {
|
|
|
+ swiperContainer.innerHTML = '';
|
|
|
+ swiperContainer.appendChild(sliderFirst);
|
|
|
+ }
|
|
|
+ sliders.forEach((slider, sliderIndex) => {
|
|
|
+ let slideDom = document.createElement('div');
|
|
|
+ slideDom.setAttribute('class', 'swiper-slide');
|
|
|
+ slideDom.setAttribute('fe-role', 'Switch');
|
|
|
+ slideDom.setAttribute('id', `slide-${sliderIndex + 1}`);
|
|
|
+ if (sliderIndex < sliders.length - 1) {
|
|
|
+ slideDom.innerHTML = slider + '<div class="arrow_down"><img src="assets/img/WaterfallIndexScene/arrow_down.png" alt="" /></div>';
|
|
|
+ } else {
|
|
|
+ slideDom.innerHTML = slider;
|
|
|
+ }
|
|
|
+ swiperContainer.appendChild(slideDom);
|
|
|
+ });
|
|
|
+
|
|
|
+ if (!this.waterfallSwiper) {
|
|
|
+ this.waterfallSwiper = new Swiper('.swiper-container-waterfall', {
|
|
|
+ direction: 'vertical',
|
|
|
+ pagination: {
|
|
|
+ el: '.swiper-pagination-waterfall',
|
|
|
+ bulletElement: 'li',
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.waterfallSwiper.updateSlides();
|
|
|
+ }
|
|
|
+
|
|
|
+ this.moye.root.reRender();
|
|
|
+ }
|
|
|
+
|
|
|
+ renderDigitalClock() {
|
|
|
+ const clock = () => {
|
|
|
+ window.clearTimeout(this.clockTimeout);
|
|
|
+ let dt = new Date();
|
|
|
+ let h = dt.getHours();
|
|
|
+ let m = dt.getMinutes();
|
|
|
+ let s = dt.getSeconds();
|
|
|
+ let clockHTML = `${(h < 10 ? '0' : '') + h}<span style="visibility: ${s % 2 ? 'visible' : 'hidden'}">:</span>${(m < 10 ? '0' : '') + m}`;
|
|
|
+ let clockDom = document.querySelector(".clock");
|
|
|
+ clockDom.innerHTML = clockHTML;
|
|
|
+ this.clockTimeout = window.setTimeout(clock, 1000);
|
|
|
+ }
|
|
|
+ clock();
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ * 使用设备号deviceCode刷新token
|
|
|
+ */
|
|
|
+ refreshToken() {
|
|
|
+
|
|
|
+ if (!localStorage.getItem('deviceCode')) {
|
|
|
+ if ( -1 != this.moye.focusList.indexOf('LoginScene')) {
|
|
|
+ this.hideScene({}, 'LoginScene');
|
|
|
+ } else {
|
|
|
+ this.showScene(require('./LoginScene.js'), {});
|
|
|
+ }
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ APIClient.refreshTokenByDeviceCode(
|
|
|
+ (isTrue, res) => {
|
|
|
+
|
|
|
+ if (!isTrue) { return; }
|
|
|
+ if (res.success) {
|
|
|
+
|
|
|
+ userDataStorage.setData(res.data);
|
|
|
+
|
|
|
+ this.renderDigitalClock();
|
|
|
+
|
|
|
+ this.fetchRecommendList();
|
|
|
+
|
|
|
+ this.fetchAdvertList();
|
|
|
+
|
|
|
+ this.fetchWaterfallList();
|
|
|
+
|
|
|
+ let { status, data } = CommandBus.execute({
|
|
|
+ type: CMD_TYPE.APP_BHV_USER_LOGIN,
|
|
|
+ payload: {
|
|
|
+ "eid": userDataStorage.getData().eid,
|
|
|
+ "uid": userDataStorage.getData().uid.toString(),
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ } else {
|
|
|
+ if ( -1 != this.moye.focusList.indexOf('LoginScene')) {
|
|
|
+ this.hideScene({}, 'LoginScene');
|
|
|
+ } else {
|
|
|
+ this.showScene(require('./LoginScene.js'), {});
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ onCreate() {
|
|
|
+ this.setContentView(
|
|
|
+ require('../../../res/tpl/WaterfallIndexScene.tpl'),
|
|
|
+ { 'title': '2B双师标准教学平台' },
|
|
|
+ 'WaterfallIndexScene',
|
|
|
+ {},
|
|
|
+ () => {
|
|
|
+
|
|
|
+ setAndroidEvent('keydown', 40);
|
|
|
+
|
|
|
+ if (!localStorage.getItem('deviceCode')) {
|
|
|
+ localStorage.setItem(
|
|
|
+ 'deviceCode',
|
|
|
+ window.efunbox ? window.efunbox.getUuidForDevice() : Utils.getUuidForWeb()
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ this.refreshToken();
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ onPause() {
|
|
|
+
|
|
|
+ window.clearTimeout(this.clockTimeout);
|
|
|
+ let clockDom = document.querySelector('.clock');
|
|
|
+ clockDom.innerHTML = '';
|
|
|
+ }
|
|
|
+
|
|
|
+ onDestroy() {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ onActive() {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ onInactive() {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ onResume(data) {
|
|
|
+
|
|
|
+ this.renderDigitalClock();
|
|
|
+
|
|
|
+ if (data && data.success) {
|
|
|
+ this.refreshToken();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ onBack() {
|
|
|
+ if (this.waterfallSwiper.activeIndex === 0) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ this.waterfallSwiper.slideTo(0, 1000, false);
|
|
|
+ this.moye.root.getWidgetById(this.firstCourseItemId).focus();
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ onOK(e) {
|
|
|
+
|
|
|
+ if (e.target.con.classList.contains('entrance')) {
|
|
|
+ let type = e.target.id.replace('entrance-', '');
|
|
|
+ if (type === 'terminal') {
|
|
|
+ this.showScene(require('./TerminalScene.js'), {});
|
|
|
+ } else if (type === 'download') {
|
|
|
+ this.showScene(require('./DownloadCollectionScene.js'), {});
|
|
|
+ } else {
|
|
|
+ this.showScene(require('./CLScene.js'), { type });
|
|
|
+ }
|
|
|
+
|
|
|
+ } else if (e.target.con.classList.contains('config')) {
|
|
|
+ if (e.target.id === 'system-config') {
|
|
|
+ CommandBus.execute({
|
|
|
+ type: CMD_TYPE.APP_SYSTEM_SETTING_OPEN,
|
|
|
+ payload: {},
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (e.target.id === 'wifi-config') {
|
|
|
+ CommandBus.execute({
|
|
|
+ type: CMD_TYPE.APP_SYSTEM_SETTING_NETWORK_OPEN,
|
|
|
+ payload: {},
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else if (e.target.con.classList.contains('product-item')) {
|
|
|
+ let id = e.target.id.split('-')[3];
|
|
|
+ this.showScene(require('./CourseScene.js'), { id });
|
|
|
+ } else if (e.target.con.classList.contains('swiper-container-advert') && this.advertList.length) {
|
|
|
+ let currentAdvert = this.advertList[this.advertSwiper.activeIndex];
|
|
|
+ const { pid, type } = currentAdvert;
|
|
|
+
|
|
|
+ if (!pid) { return; }
|
|
|
+ if (type === Consts.TYPE_COURSE) {
|
|
|
+ this.showScene(require('./CourseScene.js'), { id: pid });
|
|
|
+ } else if (type === Consts.TYPE_TRAINING) {
|
|
|
+ this.showScene(require('./CourseScene.js'), { id: pid });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ onKeydown(e) {
|
|
|
+ const isSwitchSlide = () => {
|
|
|
+ let currentFocusId = FocusEngine.getFocusedLeaf().id;
|
|
|
+ let currentFocus = document.getElementById(currentFocusId);
|
|
|
+ let currentSlideIndex = this.waterfallSwiper.activeIndex;
|
|
|
+ let currentSlide = document.getElementById(`slide-${currentSlideIndex}`);
|
|
|
+ return currentSlide.contains(currentFocus) ? false : true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (e.keyCode === Consts.KEYCODE_DOWN && this.waterfallSwiper && isSwitchSlide()) {
|
|
|
+ this.waterfallSwiper.slideNext();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (e.keyCode === Consts.KEYCODE_UP && this.waterfallSwiper && isSwitchSlide()) {
|
|
|
+ this.waterfallSwiper.slidePrev();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ onKeyup() {
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+module.exports = WaterfallIndexScene;
|