|
|
@@ -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) {
|
|
|
+ // 构建swiper dom结构
|
|
|
+ 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;
|
|
|
+ // 创建swiper对象
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ /* 工具二: 将课程数据转成html字符串 */
|
|
|
+ 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';
|
|
|
+ }
|
|
|
+ /* 构造{ serialName: 'xx', courseList: []} 格式的数据组 */
|
|
|
+ const groups = [];
|
|
|
+ for (let index in tagList) {
|
|
|
+ const tag = tagList[index];
|
|
|
+ const { name, recs } = tag;
|
|
|
+ // 去掉无内容标签
|
|
|
+ if (!recs || !recs.length) {
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ // 每5个分割
|
|
|
+ const splitedRecs = subGroupSpliter(recs, 5);
|
|
|
+ // 构造数据组
|
|
|
+ splitedRecs.forEach((oneRecs, index) => {
|
|
|
+ let serialName = '';
|
|
|
+ if (index === 0) {
|
|
|
+ serialName = name;
|
|
|
+ }
|
|
|
+ groups.push({
|
|
|
+ serialName,
|
|
|
+ courseList: oneRecs,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ /* 将groups中内容构造成html字符串 */
|
|
|
+ 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>
|
|
|
+ `
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ /* 将groupHTML内容构造成多个slider */
|
|
|
+ const sliderGroups = subGroupSpliter(groupHTMLArr, 2);
|
|
|
+ const sliders = [];
|
|
|
+ sliderGroups.forEach(sliderGroup => {
|
|
|
+ sliders.push(
|
|
|
+ `
|
|
|
+ <div class="waterfall-content">
|
|
|
+ <div class="scroll-list">
|
|
|
+ ${sliderGroup.join('')}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `
|
|
|
+ );
|
|
|
+ });
|
|
|
+ /* 将sliders插入到页面dom中 */
|
|
|
+ let swiperContainer = document.getElementById('waterfall-swiper');
|
|
|
+ /* 销毁除slide-0以外的全部slider, 防止页面元素重复 */
|
|
|
+ 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);
|
|
|
+ });
|
|
|
+ /* 注册swiper */
|
|
|
+ if (!this.waterfallSwiper) {
|
|
|
+ this.waterfallSwiper = new Swiper('.swiper-container-waterfall', {
|
|
|
+ direction: 'vertical',
|
|
|
+ pagination: {
|
|
|
+ el: '.swiper-pagination-waterfall',
|
|
|
+ bulletElement: 'li',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ /* 更新swiper */
|
|
|
+ } else {
|
|
|
+ this.waterfallSwiper.updateSlides();
|
|
|
+ }
|
|
|
+ /* 重新渲染下，使新构造的swiper生效 */
|
|
|
+ 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() {
|
|
|
+ // 判断本地存储是否保存deviceCode,没有则跳转到登录界面
|
|
|
+ if (!localStorage.getItem('deviceCode')) {
|
|
|
+ if ( -1 != this.moye.focusList.indexOf('LoginScene')) {
|
|
|
+ this.hideScene({}, 'LoginScene');
|
|
|
+ } else {
|
|
|
+ this.showScene(require('./LoginScene.js'), {});
|
|
|
+ }
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 取得deviceCode,换取新token
|
|
|
+ APIClient.refreshTokenByDeviceCode(
|
|
|
+ (isTrue, res) => {
|
|
|
+ // 正常获取到token,进行下一步请求和渲染动作
|
|
|
+ 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(),
|
|
|
+ },
|
|
|
+ });
|
|
|
+ // 未正确获取到token,跳转到登录界面
|
|
|
+ } 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()
|
|
|
+ );
|
|
|
+ }
|
|
|
+ // 渲染完成使用deviceCode刷新token
|
|
|
+ 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;
|
