师训改为导学，删除配套价格显示

src/component/GoodsItem.js

@@ -15,7 +15,7 @@ class GoodsItem {
                     <div class="goods-des">
                         <p class="title">${data.title}</p>
                         <p class="correlative">${data.correlative || ''}</p>
-                        <p class="price">¥${Utils.twoDecimal_f(data.price)}</p>
+                        <!--<p class="price">¥${Utils.twoDecimal_f(data.price)}</p>-->
                     </div>
                 </div>`;
     }

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/WaterfallIndexScene.tpl

@@ -42,7 +42,7 @@
           <!-- 右侧师训、配套入口 -->
           <div class="right">
             <!-- 师训入口 -->
-            <div id="entrance-training" class="entrance" fe-role="Widget">
+            <div id="entrance-guidance" class="entrance" fe-role="Widget">
 			    <img src="assets/img/WaterfallIndexScene/entrance_training.png"/>
             </div>
             <!-- 配套入口 -->

src/res/values/api.json

@@ -1,4 +1,4 @@
 {
     "api_url": "https://talenkid.lingjiao.cn",
-    "api_url_test": "http://tt-web.ai160.com"
+    "api_url_": "http://tt-web.api.ai160.com"
 }

src/stage/index/scene/CLScene.js

@@ -1,6 +1,7 @@
 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 NotificationCenter from '../../../util/NotificationCenter';
@@ -14,6 +15,7 @@ class CLScene extends scene {
         this.hasNextPage = false;
         this.currentIndex = 1;
         this.noContent = false;
+        this.trainingMap = {};
     }
 
     renderLeftTagList(dataset) {
@@ -45,21 +47,35 @@ 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, redDot, openTime, closeTime, dateDesc } = dataset[i];
+            const { id, title, subTitle, coverUrl, auth, goods, redDot, imgList, 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 == 'guidance') {
+              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) {
+
+          if (0 == i) {
               //第一个课程设为默认父组件的默认焦点子组件
               item.setAttribute('fe-cfg', 'default_focus:yes');
             }
@@ -72,6 +88,13 @@ class CLScene extends scene {
                 correlative: subTitle,
                 img: Consts.IMG_PATH + '/' + coverUrl
               }
+            } else if (this.sceneType == 'guidance') {
+              itemDataset = {
+                subject: title || '',
+                subjectSub: subTitle || '',
+                isNew: redDot ? true : false,
+                img: Consts.IMG_PATH + '/' + coverUrl,
+              };
             } else {
               itemDataset = {
                 subject: title,
@@ -87,6 +110,18 @@ class CLScene extends scene {
         this.moye.root.reRender();
     }
 
+    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();
+      });
+    }
+
     initLeftTabOnFocus() {
         let leftScroll = this.moye.root.getWidgetById('cl-left-tab-scroll');
         leftScroll.on('focus', e => {
@@ -99,6 +134,10 @@ 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 if (this.sceneType == 'guidance') {
+              this.loadGuidanceList(this.selectedTagId, 1);
             } else {
                 this.loadCourseList(this.selectedTagId, 1);
             }
@@ -108,7 +147,6 @@ class CLScene extends scene {
     initRightScrollReachEndEvent() {
         this.rightScrollEvent.onScrollToBottom(() => {
             if (!this.hasNextPage) { return; }//如果没有下一页了，则不继续下面的程序
-
             if (this.sceneType == 'support') {
                 this.loadPeripheryList(this.selectedTagId, this.currentIndex + 1);
             } else if (this.sceneType == 'collection') {
@@ -159,11 +197,24 @@ class CLScene extends scene {
       });
     }
 
+    loadGuidanceList(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 = {
             support: 'PERIPHERY',
             resource: 'RESOURCE',
             training: 'TRAINING',
+            guidance: 'GUIDANCE',
         }[this.sceneType] || 'RESOURCE';
 
         APIClient.getTagListByGroupCode(type, (isTrue, res) => {
@@ -189,6 +240,10 @@ 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 if (this.sceneType == 'guidance') {
+              this.loadGuidanceList(this.selectedTagId, 1);
             } else {
                 this.loadCourseList(this.selectedTagId, 1);
             }
@@ -259,13 +314,25 @@ class CLScene extends scene {
     }
 
     onKeydown(e) {
-        if(e.keyCode == Consts.KEYCODE_RIGHT && e.target.con.classList.contains('item')){
-            if(this.noContent){
-              return;
-            }
-            //有内容
-            FocusEngine.getWidgetById('cl-right-content-scroll').focus();
+      if (e.keyCode == Consts.KEYCODE_LEFT && e.target.id == 'cl-shopping-cart-btn') {
+        //无内容，直接返回
+        if (this.noContent) {
+          return;
+        }
+        //有内容，禁用向左按钮
+        e.preventDefault();
+        e.stopPropagation();
+        //单独的Widget不能阻止焦点变换，只能强行重新获取焦点来实现禁用向左
+        FocusEngine.getWidgetById('cl-shopping-cart-btn').focus();
+      }
+
+      if(e.keyCode == Consts.KEYCODE_RIGHT && e.target.con.classList.contains('item')){
+        if(this.noContent){
+          return;
         }
+        //有内容
+        FocusEngine.getWidgetById('cl-right-content-scroll').focus();
+      }
     }
 
     onKeyup() {

src/stage/index/style/CLScene.less

@@ -74,18 +74,54 @@
         position: relative;
         overflow: hidden;
         width: 14.2rem;
-        margin-top: 1.2rem;
+        margin-top: 1rem;
         margin-left: 0.43rem;
         height: 9.66rem;
         ul {
-            overflow: hidden;
             padding-bottom: 0.18rem;
+            overflow: hidden;
         }
-        .item {
+        .training-item {
             float: left;
+            margin-bottom: 0.1rem;
+            width: 6.8rem;
+            height: 3.5rem;
+            .training-item-frame {
+                position: relative;
+                margin: 0.35rem 0.35rem 0 0.22rem;
+                img {
+                    width: 100%;
+                }
+                .training-desc {
+                    position: absolute;
+                    bottom: 0;
+                    width: 100%;
+                    height: 0.96rem;
+                    background: #fff;
+                    border-radius: 0 0 0.2rem 0.2rem;
+                    p {
+                        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 {
+                        margin-top: 0.16rem;
+                    }
+                }
+            }
+            &.fe-focus .training-item-frame {
+                border-radius: 0.24rem;
+                .after-focus(@borderSize; #ffe100);
+            }
+        }
+        .item {
+            flex: 0 0 25%;
 	        margin-bottom: 0.1rem;
             width: 3.52rem;
-            height: 4.84rem;
 
             //课程item组件在当前scene的margin需要在使用scene的样式中定义
             //周边商品item组件在当前scene的margin需要在使用scene的样式中定义

src/stage/index/style/CourseScene.less

@@ -438,36 +438,27 @@
 			}
 
 			.periphery-detail-wrapper {
-				margin-left: 1.7rem;
-				margin-right: 1.7rem;
+				margin: 0 auto;
 				width: 15.75rem;
 				height: 6.35rem;
 				padding: 0.3rem 0.2rem 0.3rem 0.2rem;
 				border-radius: 0.2rem;
 				font-size: 0;
 				background-color: #fff;
+				display: flex;
 
 				/* 轮播图 */
 				.periphery-slide {
-					display: inline-block;
-					width: 5.75rem;
-					height: 5.75rem;
-					margin-right: 0.3rem;
+					flex: 1;
 					background-color: #eee;
 				}
 
 				/* 配套描述 */
 				.periphery-detail {
-					display: inline-block;
-					vertical-align: bottom;
-					width: 5.8rem;
-					height: 5.75rem;
-
+					flex: 2;
+					padding: 0 .3rem;
 					.periphery-name {
-						width: 100%;
-						height: 1em;
-						overflow: hidden;
-						line-height: 1;
+						line-height: 2;
 						font-size: 0.36rem;
 						font-weight: bold;
 						color: #000;
@@ -482,7 +473,6 @@
 					}
 
 					.periphery-desc {
-						width: 100%;
 						height: 4.58rem;
 						overflow: hidden;
 						font-size: 0.3rem;
@@ -519,7 +509,8 @@
 
 				/* 购买二维码 */
 				.periphery-shopqr {
-					display: inline-block;
+					//flex: 1; 若显示 按照flex布局就可以
+					display: none;
 					vertical-align: bottom;
 					width: 3.4rem;
 					height: 5.75rem;

src/stage/index/style/GlobalGoodDetail.less

@@ -28,31 +28,30 @@
     }
 
     .detail-panel {
+        margin: 1.71rem auto 0rem;
         width: 15.72rem;
         height: 6.33rem;
         background: white;
         border-radius: unit(@borderRadius, rem);
-        margin: 1.71rem 0 0 1.76rem;
+        display: flex;
 
         .detail-cover {
-            display: inline-block;
+            flex: 1;
             width: 5.75rem;
             height: 5.75rem;
             margin: 0.29rem 0.2rem 0.29rem 0.29rem;
         }
 
         .detail-text-panel {
-            display: inline-block;
-            vertical-align: bottom;
-            width: 5.85rem;
-            height: 5.75rem;
-            margin: 0.29rem 0.2rem 0.29rem 0;
+            flex: 2;
+            padding: .3rem;
             .title {
                 color: #000;
                 font-size: 0.36rem;
                 font-weight: 800;
             }
             .price {
+                display: none;
                 color: #ff7e00;
                 font-size: 0.48rem;
                 line-height: 1;
@@ -72,7 +71,7 @@
 
         // 二维码
         .shopqr {
-          display: inline-block;
+          display: none;
           vertical-align: bottom;
           width: 3.1rem;
           height: 5.75rem;

src/util/API/APIClient.js

@@ -72,6 +72,7 @@ class APIClient {
 			'RESOURCE': 'RESOURCE',
 			'TRAINING': 'TRAINING',
 			'PERIPHERY': 'SUPPORT',
+			'GUIDANCE': 'GUIDANCE',
 		};
 		let params = APIClient.addCacheParam({});
 		//AJAXHelper.get(`/tagGroup/${typeToCode[type]}`, params, callback);

src/util/course.js

@@ -180,7 +180,6 @@ class Course {
 				price = goods[0].terminalPrice || '';
 			}
 			let data = {
-				price,
 				img: `${Consts.IMG_PATH}/${coverUrl}`,
 				title: title || '',
 				correlative: subTitle || ''
@@ -228,11 +227,14 @@ class Course {
 				<div class="periphery-slide" id="slide-wrapper-${id}">
 					<div></div>
 				</div>
+				
 				<div class="periphery-detail">
 					<p class="periphery-name">${title + '&nbsp;&nbsp;' + subTitle}</p>
-					<p class="periphery-price">¥${Utils.twoDecimal_f(price)}</p>
+					<!--<p class="periphery-price">¥${Utils.twoDecimal_f(price)}</p>-->
 					<p class="periphery-desc">${detail || ''}</p>
 				</div>
+				
+				<!--二维码的显示地点-->
 				<div class="periphery-shopqr">
 					<div class="periphery-shopqr-wrapper">
 						<div class="shopqr-desc">
@@ -242,6 +244,7 @@ class Course {
 						<div class="shopqr-img">${shopQRImg}</div>
 					</div>
 				</div>
+				
 			</div>`;
 
 		detailContent.innerHTML = `