:sparkles: 增加师训类型

src/component/TrainingItem.js

@@ -0,0 +1,24 @@
+class TrainingItem {
+	constructor () {}
+
+	static createElement(data){
+		let d = document.createElement('div');
+		d.innerHTML = Training.createHTMLString(data);
+		return d.childNodes[0];
+	}
+
+	static createHTMLString(data){
+		return `
+            <div class="training-item-frame">
+                <img src="${data.img}" alt="" />
+                <div class="training-new" style="display:${data.isNew ? 'block' : 'none'};"></div>
+                <div class="training-desc">
+                    <p class="subject">${data.subject}</p>
+                    <p class="subject-sub">${data.subjectSub}</p>
+                </div>
+            </div>
+        `;
+	}
+}
+
+module.exports = TrainingItem;

src/res/tpl/TrainingScene.tpl

@@ -0,0 +1,3 @@
+<div id="TrainingScene" fe-role="Switch">
+  <img id="trainingImg" src="./assets/img/default_bg.jpg" />
+</div>

src/res/values/api.json

@@ -1,12 +1,4 @@
 {
     "api_url_kid": "http://kid-app.lingjiao.cn",
-    "api_url": "http://tt-web.api.ai160.com",
-    "api_url_angelbell": "http://web-api.lingjiao.cn",
-    "api_url_light": "http://light-angelbell-web.lingjiao.cn",
-    "api_url_inst": "http://lj-demo-web.ai160.com",
-    "api_url_old_1": "http://2btv.efunbox.cn",
-    "api_url_old_2": "http://2blj.api.ai160.com",
-    "api_url_old_3": "http://lj-web.api.ai160.com",
-    "api_url_local": "http://192.168.1.206:8600",
-    "api_url_mock": "http://127.0.0.1:8082/efunbox-to-b/1.0.0/lib/mockapi/"
+    "api_url": "http://tt-web.api.ai160.com"
 }

src/stage/index/index.less

@@ -15,6 +15,7 @@ body {
 @import './style/LoginScene.less';
 @import './style/IndexScene.less';
 @import './style/TerminalScene.less';
+@import './style/TrainingScene.less';
 @import './style/DownloadScene.less';
 @import './style/RepeatLoginScene.less';
 @import './style/BuyConfirmScene.less';

src/stage/index/scene/CLScene.js

@@ -1,8 +1,9 @@
-import APIClient from '../../../util/API/APIClient'
-import Consts from '../../../util/Consts'
-import CourseItem from '../../../component/CourseItem'
-import GoodsItem from '../../../component/GoodsItem'
-import ScrollEventPlugin from '../../../util/ScrollEventPlugin'
+import APIClient from '../../../util/API/APIClient';
+import Consts from '../../../util/Consts';
+import CourseItem from '../../../component/CourseItem';
+import TrainingItem from '../../../component/TrainingItem';
+import GoodsItem from '../../../component/GoodsItem';
+import ScrollEventPlugin from '../../../util/ScrollEventPlugin';
 import ShopCartState from '../../../util/ShopCartState';
 import NotificationCenter from '../../../util/NotificationCenter';
 
@@ -15,6 +16,7 @@ class CLScene extends scene {
         this.hasNextPage = false;
         this.currentIndex = 1;
         this.noContent = false;
+        this.trainingMap = {};
     }
 
     renderLeftTagList(dataset) {
@@ -46,15 +48,30 @@ class CLScene extends scene {
         document.getElementById('no-content-message').style.display = this.noContent ? '' : 'none';
 
         for (let i in dataset) {
-            const { id, title, subTitle, coverUrl, auth, goods } = dataset[i];
+            const { id, title, subTitle, coverUrl, auth, goods, imgList, redDot, openTime, closeTime, dateDesc } = dataset[i];
             let price = '';
             if (goods && goods.length >= 1) {
                 price = goods[0].terminalPrice;
             }
 
+            // 师训详情图片预加载
+            this.trainingMap[id] = imgList;
+            if (imgList) {
+              for (let index in imgList) {
+                let imgSrc = Consts.IMG_PATH + '/' + imgList[index];
+                let image = new Image();
+                image.src = imgSrc;
+              }
+            }
+
             let item = document.createElement('li');
+            // 为training item 添加不同样式
+            if (this.sceneType == 'training') {
+              item.setAttribute('class', 'training-item');
+            } else {
+              item.setAttribute('class', 'item');
+            }
             item.setAttribute('id', `item-${id}`);
-            item.setAttribute('class', 'item');
             item.setAttribute('fe-role', 'Widget');
 
             if (0 == i) {
@@ -68,14 +85,21 @@ class CLScene extends scene {
                     title,
                     price,
                     correlative: subTitle,
-                    img: Consts.IMG_PATH + '/' + coverUrl
+                    img: Consts.IMG_PATH + '/' + coverUrl,
                 }
+            } else if (this.sceneType == 'training') {
+                itemDataset = {
+                    subject: title || '',
+                    subjectSub: dateDesc || '',
+                    isNew: redDot ? true : false,
+                    img: Consts.IMG_PATH + '/' + coverUrl,
+                };
             } else {
                 itemDataset = {
                     subject: title,
                     subjectSub: subTitle,
                     buyed: auth,
-                    img: Consts.IMG_PATH+ '/' + coverUrl
+                    img: Consts.IMG_PATH+ '/' + coverUrl,
                 }
             }
 
@@ -97,6 +121,8 @@ class CLScene extends scene {
                 this.loadPeripheryList(this.selectedTagId, 1);
             } else if (this.sceneType == 'collection') {
                 this.loadCollectionList(this.selectedTagId, 1);
+            } else if (this.sceneType == 'training') {
+                this.loadTrainingList(this.selectedTagId, 1);
             } else {
                 this.loadCourseList(this.selectedTagId, 1);
             }
@@ -157,6 +183,18 @@ class CLScene extends scene {
       });
     }
 
+    loadTrainingList(tagId, index) {
+      APIClient.getProductListByTagId(tagId, index, (isTrue, res) => {
+        if (!isTrue) { return; }
+        if (!res.success) { return; }
+        const { pageNo, pageSize, totalSize, list } = res.data || {};
+        this.hasNextPage = pageNo * pageSize < totalSize ? true : false;
+        this.currentIndex = pageNo;
+        this.renderRightContentList(list, TrainingItem, index > 1);
+        this.rightScrollEvent.releaseEventLock();
+      });
+    }
+
     loadTagList() {
         let type = {
             periphery: 'PERIPHERY',
@@ -187,6 +225,8 @@ class CLScene extends scene {
                 this.loadPeripheryList(this.selectedTagId, 1);
             } else if (this.sceneType == 'collection') {
                 this.loadCollectionList(this.selectedTagId, 1);
+            } else if (this.sceneType == 'training') {
+                this.loadTrainingList(this.selectedTagId, 1);
             } else {
                 this.loadCourseList(this.selectedTagId, 1);
             }
@@ -253,6 +293,9 @@ class CLScene extends scene {
         if (this.sceneType == 'periphery') {
             this.showScene(require('./GlobalGoodDetailScene.js'), { id });
             return;
+        } else if (this.sceneType == 'training') {
+            this.showScene(require('./TrainingScene.js'), { id, imgList: this.trainingMap[id] });
+            return;
         }
         // 进入课程详情场景
         this.showScene(require(`./CourseScene.js`), { id });

src/stage/index/scene/TrainingScene.js

@@ -0,0 +1,113 @@
+import APIClient from '../../../util/API/APIClient';
+import Consts from '../../../util/Consts';
+
+class TrainingScene extends scene {
+	constructor(scope) {
+        super(scope);
+        this.imageList = [];
+        this.curImageIndex = 0;
+	}
+
+    loadTrainingContent(trainingId, index) {
+        APIClient.getTrainingDetail(trainingId, (isTrue, res) => {
+            if (!isTrue) { return; }
+            if (!res.success) {
+                TVUtil.Toast.show('获取师训详情失败!', 1500);
+                this.moye.root.reRender();
+                return;
+            }
+            const { imgList } = res.data || {};
+            this.imageList = imgList;
+            this.renderImageView();
+        });
+    }
+
+    renderImageView() {
+        const curImage = this.imageList[this.curImageIndex];
+        document.getElementById('trainingImg').setAttribute('src', Consts.IMG_PATH + '/' + curImage);
+    }
+
+	keyRightHandler() {
+        const hasNextImage = this.curImageIndex < this.imageList.length - 1 ? true : false;
+        if (hasNextImage) {
+            this.curImageIndex += 1;
+            this.renderImageView();
+        }
+	}
+
+	keyLeftHandler() {
+        const hasPreviousImage = this.curImageIndex === 0 ? false : true;
+        if (hasPreviousImage) {
+            this.curImageIndex -= 1;
+            this.renderImageView();
+        }
+	}
+
+	onCreate(data) {
+		if (data && data.imgList) {
+			this.imageList = data.imgList;
+		}
+		this.setContentView(require('../../../res/tpl/TrainingScene.tpl'), {}, 'TrainingScene', {}, () => {
+            /* TODO：详情大图从上个场景拿过来，这里不再单独去请求 */
+			// this.loadTrainingContent(data.id);
+			this.renderImageView();
+		});
+	}
+
+	onResume() {
+
+	}
+
+	onPause() {
+
+	}
+
+	onDestroy() {
+
+	}
+
+	onActive() {
+
+	}
+
+	onInactive() {
+
+	}
+
+	onOK() {
+
+	}
+
+	onBack() {
+
+	}
+
+	onKeyup() {
+
+	}
+
+	onKeydown(e) {
+        switch (e.keyCode) {
+            //左键
+            case 37:
+                this.keyLeftHandler();
+                break;
+            //右键
+            case 39:
+                this.keyRightHandler();
+                break;
+            //触屏设备向左滑动
+            case Consts.KEYCODE_CLICK_LEFT_SCREEN:
+                this.keyLeftHandler();
+                break;
+            //触屏设备向右滑动
+            case Consts.KEYCODE_CLICK_RIGHT_SCREEN:
+                this.keyRightHandler();
+                break;
+            default:
+                break;
+        }
+	}
+}
+
+module.exports = TrainingScene;

src/stage/index/style/CLScene.less

@@ -1,6 +1,7 @@
 @import './Mixins.less';
 @import './component/GoodsItem.less';
 @import './component/CourseItem.less';
+@import './component/TrainingItem.less';
 
 #CLScene {
     position: absolute;
@@ -31,7 +32,6 @@
             color: #fff;
             font-size: 0.6rem;
             font-weight: bold;
-            // padding: 0.58rem 0 0.33rem 0.74rem;
             padding-top: 0.58rem;
             padding-bottom: 0.33rem;
             text-align: center;
@@ -45,7 +45,6 @@
             color: white;
             font-size: 0.42rem;
             height: 1.05rem;
-            // padding-left: 1.16rem;
             text-align: center;
             span {
                 position: relative;
@@ -123,9 +122,21 @@
             overflow: hidden;
             padding-bottom: 0.18rem;
         }
+        .training-item {
+            float: left;
+            margin-bottom: 0.1rem;
+            width: 6.8rem;
+            height: 4.2rem;
+            .training-item-frame {
+                margin: 0.35rem 0.35rem 0 0.22rem;
+            }
+            &.fe-focus .training-item-frame {
+                .after-focus(@borderSize; #ffe100);
+            }
+        }
         .item {
             float: left;
-	        margin-bottom: 0.1rem;
+            margin-bottom: 0.1rem;
             width: 3.52rem;
             height: 4.84rem;
 

src/stage/index/style/TrainingScene.less

@@ -0,0 +1,11 @@
+#trainingImg {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	background-image: url(assets/img/icon.png);
+	background-size: 100% 100%;
+	background-repeat: no-repeat;
+}

src/stage/index/style/component/TrainingItem.less

@@ -0,0 +1,50 @@
+.training-item-frame {
+    width: 6.55rem;
+    height: 4rem;
+    border: solid unit(@borderSize, rem) transparent;
+    border-radius: unit(@borderRadius + 0.04 , rem);
+    position: relative;
+    img {
+        position: inherit;
+        width: 100%;
+        height: 100%;
+        border-radius: unit(@borderRadius, rem);
+    }
+    .training-new{
+        position: absolute;
+        background: url('./assets/img/new.png') no-repeat center;
+        background-size: 100% 100%;
+        width: 0.46rem;
+        height: 0.46rem;
+        border-radius: 0 unit(@borderRadius, rem) 0 0;
+        right: -0.18rem;
+        top: -0.18rem;
+    }
+    .training-desc {
+        position: absolute;
+        // margin-bottom: 0.32rem;
+        bottom: 0;
+        width: 100%;
+        height: 0.96rem;
+        background: #fff;
+        border-radius: 0 0 unit(@borderRadius, rem)  unit(@borderRadius, rem);
+        .subject{
+            width: 100%;
+            margin-top: 0.12rem;
+            margin-left: 0.32rem;
+            font-size: 0.28rem;
+            line-height: 0.28rem;
+            white-space: nowrap;
+			      overflow: hidden;
+        }
+        .subject-sub{
+            width: 100%;
+            margin-top: 0.16rem;
+            margin-left: 0.32rem;
+            font-size: 0.28rem;
+            line-height: 0.28rem;
+            white-space: nowrap;
+            overflow: hidden;
+        }
+    }
+}

src/util/API/APIClient.js

@@ -115,6 +115,12 @@ class APIClient {
 		AJAXHelper.get(`/support/${supportId}`, params, callback);
 	}
 
+	// 获取师训详情
+	static getTrainingDetail(trainingId, callback) {
+		let params = APIClient.addCacheParam({});
+		AJAXHelper.get(`/training/${trainingId}`, params, callback);
+	}
+
 	// 获取购物车列表
 	static getShopCartList(callback) {
 		let params = { pageNo: 1, pageSize: 100 };