:bookmark: 基于dev_base分支创建online_angelbell分支

src/res/tpl/CLScene.tpl

@@ -1,5 +1,5 @@
 <div id="CLScene" fe-role="Switch">
-	<div class="cl-bg"><img id="CLSceneBG" src="assets/img/CLScene/background.jpg" alt=""></div>
+	<div class="cl-bg"><img id="CLSceneBG" src="assets/img/CLScene/bg_default.jpg" alt=""></div>
     <div id="cl-left-panel">
         <div id="name-text"></div>
         <div id="cl-left-tab-scroll" fe-role="Scroll" fe-cfg="scroll_dir:v">

src/res/tpl/DownloadCollection.tpl

@@ -0,0 +1,111 @@
+<div id="DownloadCollectionScene" fe-role="Switch">
+	<div id="dc-left-panel">
+		<div id="dc-left-tab-scroll" fe-role="Scroll" fe-cfg="scroll_dir:v">
+			<ul id="dc-left-tab-list" class="scroll-list">
+				<li id="download" class="tag-item" fe-role="Widget">
+					<span>本地下载</span>
+				</li>
+				<li id="collection" class="tag-item" fe-role="Widget">
+					<span>课程收藏</span>
+				</li>
+			</ul>
+		</div>
+	</div>
+	<div id="dc-right-panel">
+		<div id="download-background" class="download-bg-wrapper">
+			<div class="download-bg-header">
+		        <div class="header">
+					<div class="row row-header">
+						<div class="one right-border">下载日期</div>
+						<div class="two right-border">课程名称</div>
+						<div class="three right-border">课名称</div>
+						<div class="four right-border">容量</div>
+						<div class="five right-border">下载状态</div>
+						<div class="six">操作</div>
+					</div>
+		        </div>
+		        <div class="horizon-line first-line"></div>
+		        <div class="horizon-line"></div>
+		        <div class="horizon-line"></div>
+		        <div class="horizon-line"></div>
+		        <div class="horizon-line"></div>
+		        <div class="horizon-line"></div>
+		        <div class="horizon-line"></div>
+		        <div class="horizon-line"></div>
+		        <div class="horizon-line"></div>
+		  	</div>
+			<div class="back-row">
+				<div class="one"></div>
+				<div class="two"></div>
+				<div class="three"></div>
+				<div class="four"></div>
+				<div class="five"></div>
+				<div class="six"></div>
+			</div>
+			<div class="back-row">
+				<div class="one"></div>
+				<div class="two"></div>
+				<div class="three"></div>
+				<div class="four"></div>
+				<div class="five"></div>
+				<div class="six"></div>
+			</div>
+			<div class="back-row">
+				<div class="one"></div>
+				<div class="two"></div>
+				<div class="three"></div>
+				<div class="four"></div>
+				<div class="five"></div>
+				<div class="six"></div>
+			</div>
+			<div class="back-row">
+				<div class="one"></div>
+				<div class="two"></div>
+				<div class="three"></div>
+				<div class="four"></div>
+				<div class="five"></div>
+				<div class="six"></div>
+			</div>
+			<div class="back-row">
+				<div class="one"></div>
+				<div class="two"></div>
+				<div class="three"></div>
+				<div class="four"></div>
+				<div class="five"></div>
+				<div class="six"></div>
+			</div>
+			<div class="back-row">
+				<div class="one"></div>
+				<div class="two"></div>
+				<div class="three"></div>
+				<div class="four"></div>
+				<div class="five"></div>
+				<div class="six"></div>
+			</div>
+			<div class="back-row">
+				<div class="one"></div>
+				<div class="two"></div>
+				<div class="three"></div>
+				<div class="four"></div>
+				<div class="five"></div>
+				<div class="six"></div>
+			</div>
+			<div class="back-row">
+				<div class="one"></div>
+				<div class="two"></div>
+				<div class="three"></div>
+				<div class="four"></div>
+				<div class="five"></div>
+				<div class="six"></div>
+			</div>
+			<div class="back-row">
+				<div class="one"></div>
+				<div class="two"></div>
+				<div class="three"></div>
+				<div class="four"></div>
+				<div class="five"></div>
+				<div class="six"></div>
+			</div>
+		</div>
+	</div>
+</div>

src/res/tpl/DownloadScene.tpl

@@ -1,107 +0,0 @@
-<div id="DownloadManagerScene" fe-role="Switch">
-	<div class="download-manager-bg">
-		<img src="./assets/img/GlobalGoodDetail/background.jpg" alt="" />
-	</div>
-  	<div class="local-download-icon">
-    	<img src="assets/img/DownloadScene/download.png" alt="" />
-    	<div>本地下载列表</div>
-  	</div>
-  	<div class="background-wrapper">
-		<div class="background-header">
-    		<div class="header">
-				<div class="row row-header">
-					<div class="one right-border">下载日期</div>
-					<div class="two right-border">课程名称</div>
-					<div class="three right-border">课名称</div>
-					<div class="four right-border">容量</div>
-					<div class="five right-border">下载状态</div>
-					<div class="six">操作</div>
-	    		</div>
-			</div>
-			<div class="horizon-line first-line"></div>
-			<div class="horizon-line"></div>
-			<div class="horizon-line"></div>
-			<div class="horizon-line"></div>
-			<div class="horizon-line"></div>
-			<div class="horizon-line"></div>
-			<div class="horizon-line"></div>
-			<div class="horizon-line"></div>
-			<div class="horizon-line"></div>
-    	</div>
-		<div class="back-row">
-			<div class="one"></div>
-			<div class="two"></div>
-			<div class="three"></div>
-			<div class="four"></div>
-			<div class="five"></div>
-			<div class="six"></div>
-    	</div>
-		<div class="back-row">
-			<div class="one"></div>
-			<div class="two"></div>
-			<div class="three"></div>
-			<div class="four"></div>
-			<div class="five"></div>
-			<div class="six"></div>
-	    </div>
-		<div class="back-row">
-			<div class="one"></div>
-			<div class="two"></div>
-			<div class="three"></div>
-			<div class="four"></div>
-			<div class="five"></div>
-			<div class="six"></div>
-	    </div>
-		<div class="back-row">
-			<div class="one"></div>
-			<div class="two"></div>
-			<div class="three"></div>
-			<div class="four"></div>
-			<div class="five"></div>
-			<div class="six"></div>
-		</div>
-		<div class="back-row">
-			<div class="one"></div>
-			<div class="two"></div>
-			<div class="three"></div>
-			<div class="four"></div>
-			<div class="five"></div>
-			<div class="six"></div>
-	  	</div>
-		<div class="back-row">
-			<div class="one"></div>
-			<div class="two"></div>
-			<div class="three"></div>
-			<div class="four"></div>
-			<div class="five"></div>
-			<div class="six"></div>
-    	</div>
-		<div class="back-row">
-			<div class="one"></div>
-			<div class="two"></div>
-			<div class="three"></div>
-			<div class="four"></div>
-			<div class="five"></div>
-			<div class="six"></div>
-    	</div>
-		<div class="back-row">
-			<div class="one"></div>
-			<div class="two"></div>
-			<div class="three"></div>
-			<div class="four"></div>
-			<div class="five"></div>
-			<div class="six"></div>
-	  	</div>
-		<div class="back-row">
-			<div class="one"></div>
-			<div class="two"></div>
-			<div class="three"></div>
-			<div class="four"></div>
-			<div class="five"></div>
-			<div class="six"></div>
-    	</div>
-    	<div fe-role="Scroll" fe-cfg="scroll_dir:v,scroll_center:con,scroll_duration:0.2,scroll_easing:linear" class="content-wrapper" >
-			<div class="scroll-list scroll-lines-wrapper clearfix" id="download-status-table-wrapper"></div>
-		</div>
-	</div>
-</div>

src/res/tpl/IndexScene.tpl

@@ -1,5 +1,5 @@
 <div id="IndexScene" fe-role="Switch">
-	<div class="index-bg"><img src="assets/img/IndexScene/background.jpg" alt=""></div>
+	<div class="index-bg"><img src="assets/img/IndexScene/background.png" alt=""></div>
  	<div class="m-header-user" fe-role="Switch">
 		<div fe-role="Widget" class="user-info" id="user-info">
 			<div class="user-info-text">
@@ -13,20 +13,20 @@
 		<div class="scroll-list">
 			<div id="history" class="history-wrapper"></div>
 			<div id="fun" class="fun-wrapper">
-				<div id="fun-download" class="fun-item" fe-role="Widget">
-					<img src="./../../stage/index/assets/img/IndexScene/entrance_download.png"/>
+				<div id="fun-dc" class="fun-item" fe-role="Widget">
+					<img src="./../../stage/index/assets/img/IndexScene/entrance_dc.png"/>
 				</div>
-				<div id="fun-collection" class="fun-item" fe-role="Widget">
-					<img src="./../../stage/index/assets/img/IndexScene/entrance_collection.png"/>
+				<div id="fun-style" class="fun-item" fe-role="Widget">
+					<img src="./../../stage/index/assets/img/IndexScene/entrance_style.png"/>
 				</div>
-				<div id="fun-resource" class="fun-item" fe-role="Widget">
-					<img src="./../../stage/index/assets/img/IndexScene/entrance_resource.png"/>
+				<div id="fun-sync" class="fun-item" fe-role="Widget">
+					<img src="./../../stage/index/assets/img/IndexScene/entrance_sync.png"/>
 				</div>
-				<div id="fun-periphery" class="fun-item" fe-role="Widget">
-					<img src="./../../stage/index/assets/img/IndexScene/entrance_periphery.png"/>
+				<div id="fun-interest" class="fun-item" fe-role="Widget">
+					<img src="./../../stage/index/assets/img/IndexScene/entrance_interest.png"/>
 				</div>
-				<div id="fun-training" class="fun-item" fe-role="Widget">
-					<img src="./../../stage/index/assets/img/IndexScene/entrance_training.png"/>
+				<div id="fun-periphery" class="fun-item" fe-role="Widget">
+					<img src="./../../stage/index/assets/img/IndexScene/entrance_support.png"/>
 				</div>
 			</div>
 		</div>

src/res/values/api.json

@@ -1,4 +1,4 @@
 {
-    "api_url_kid": "http://kid-app.lingjiao.cn",
-    "api_url": "http://tt-web.api.ai160.com"
+    "api_url": "https://web-api.lingjiao.cn",
+    "api_url_dev": "http://tt-web.api.ai160.com"
 }

src/stage/index/index.less

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

src/stage/index/scene/CLScene.js

@@ -1,9 +1,10 @@
-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 GoodsItem from '../../../component/GoodsItem';
+import ScrollEventPlugin from '../../../util/ScrollEventPlugin';
 import ShopCartState from '../../../util/ShopCartState';
+
 import NotificationCenter from '../../../util/NotificationCenter';
 
 class CLScene extends scene {
@@ -49,7 +50,7 @@ class CLScene extends scene {
             const { id, title, subTitle, coverUrl, auth, goods } = dataset[i];
             let price = '';
             if (goods && goods.length >= 1) {
-                price = goods[0].terminalPrice;
+              price = goods[0].terminalPrice;
             }
 
             let item = document.createElement('li');
@@ -58,25 +59,25 @@ class CLScene extends scene {
             item.setAttribute('fe-role', 'Widget');
 
             if (0 == i) {
-                //第一个课程设为默认父组件的默认焦点子组件
-                item.setAttribute('fe-cfg', 'default_focus:yes');
+              //第一个课程设为默认父组件的默认焦点子组件
+              item.setAttribute('fe-cfg', 'default_focus:yes');
             }
 
             let itemDataset = {}
             if (this.sceneType == 'periphery') {
-                itemDataset = {
-                    title,
-                    price,
-                    correlative: subTitle,
-                    img: Consts.IMG_PATH + '/' + coverUrl
-                }
+              itemDataset = {
+                title,
+                price,
+                correlative: subTitle,
+                img: Consts.IMG_PATH + '/' + coverUrl
+              }
             } else {
-                itemDataset = {
-                    subject: title,
-                    subjectSub: subTitle,
-                    buyed: auth,
-                    img: Consts.IMG_PATH+ '/' + coverUrl
-                }
+              itemDataset = {
+                subject: title,
+                subjectSub: subTitle,
+                buyed: auth,
+                img: Consts.IMG_PATH+ '/' + coverUrl
+              }
             }
 
             item.innerHTML = component.createHTMLString(itemDataset);
@@ -95,8 +96,6 @@ class CLScene extends scene {
             this.selectedTagId = id;
             if (this.sceneType == 'periphery') {
                 this.loadPeripheryList(this.selectedTagId, 1);
-            } else if (this.sceneType == 'collection') {
-                this.loadCollectionList(this.selectedTagId, 1);
             } else {
                 this.loadCourseList(this.selectedTagId, 1);
             }
@@ -109,30 +108,12 @@ class CLScene extends scene {
 
             if (this.sceneType == 'periphery') {
                 this.loadPeripheryList(this.selectedTagId, this.currentIndex + 1);
-            } else if (this.sceneType == 'collection') {
-                this.loadCollectionList(this.selectedTagId, this.currentIndex + 1);
             } else {
                 this.loadCourseList(this.selectedTagId, this.currentIndex + 1);
             }
         });
     }
 
-    loadCollectionList(tagId, index) {
-      APIClient.getCollectionList(tagId, index, (isTrue, res) => {
-        if (!isTrue) { return; }
-        if (!res.success) {
-            TVUtil.Toast.show('获取收藏列表失败!', 1500);
-            this.moye.root.reRender();
-            return;
-        }
-        const { pageNo, pageSize, totalSize, list } = res.data || {};
-        this.hasNextPage = pageNo * pageSize < totalSize ? true : false;
-        this.currentIndex = pageNo;
-        this.renderRightContentList(list, CourseItem, index > 1);
-        this.rightScrollEvent.releaseEventLock();
-      });
-    }
-
     loadCourseList(tagId, index) {
       APIClient.getProductListByTagId(tagId, index, (isTrue, res) => {
         if (!isTrue) { return; }
@@ -160,8 +141,9 @@ class CLScene extends scene {
     loadTagList() {
         let type = {
             periphery: 'PERIPHERY',
-            resource: 'RESOURCE',
-            training: 'TRAINING',
+            style: 'STYLE',
+            sync: 'SYNC',
+            interest: 'INTEREST',
         }[this.sceneType] || 'DEFAULT';
 
         APIClient.getTagListByGroupCode(type, (isTrue, res) => {
@@ -185,8 +167,6 @@ class CLScene extends scene {
             this.selectedTagId = res.data.list[0].id;
             if (this.sceneType == 'periphery') {
                 this.loadPeripheryList(this.selectedTagId, 1);
-            } else if (this.sceneType == 'collection') {
-                this.loadCollectionList(this.selectedTagId, 1);
             } else {
                 this.loadCourseList(this.selectedTagId, 1);
             }
@@ -203,12 +183,14 @@ class CLScene extends scene {
         this.setContentView(require('../../../res/tpl/CLScene.tpl'), {}, 'CLScene', {}, () => {
             // 页面渲染完成异步回调
             this.sceneType = data.type;
+            // 不同场景加载不同的背景图片
+            let imgWrapper = document.getElementById('CLSceneBG');
+            imgWrapper.setAttribute('src', `./assets/img/CLScene/bg_${this.sceneType}.jpg`);
             this.loadTagList();
             this.initLeftTabOnFocus();
 
             this.rightScrollEvent.bind(this.moye.root.getWidgetById('cl-right-content-scroll'));
             ShopCartState.getCount();
-
             NotificationCenter.add('collection_refresh', this.collectionObserver.bind(this));
         });
     }
@@ -232,6 +214,7 @@ class CLScene extends scene {
     onInactive() {
 
     }
+
     // 所有事件类函数默认触发时会传递过来一个Event,其中包含着事件响应节点以及其他相关信息
     // 查看信息：console.log(e)
     // 获取Event节点Id的方法(前提是触发事件的节点存在Id)
@@ -264,6 +247,8 @@ class CLScene extends scene {
 
     onKeydown(e) {
         if (e.keyCode == Consts.KEYCODE_LEFT && e.target.id == 'cl-shopping-cart-btn') {
+        //if (e.keyCode == Consts.KEYCODE_LEFT && e.target.con.classList.contains('shopping-cart-btn-frame')) {
+            // console.log(document.getElementById('no-content-message').style.display);
             //无内容，直接返回
             if (this.noContent) {
               return;

src/stage/index/scene/DownloadCollectionScene.js

@@ -0,0 +1,366 @@
+import Consts from '../../../util/Consts';
+import Utils from '../../../util/Utils';
+import APIClient from '../../../util/API/APIClient';
+import CourseItem from '../../../component/CourseItem';
+import GoodsItem from '../../../component/GoodsItem';
+import ScrollEventPlugin from '../../../util/ScrollEventPlugin';
+import NotificationCenter from '../../../util/NotificationCenter';
+import {CommandBus, CMD_TYPE} from '../../../util/CommandBus';
+
+class DownloadCollectionScene extends scene {
+    constructor(scope) {
+        super(scope);
+        this.lessonIds = [];
+        this.lessonItems = {};
+        this.rightScrollEvent = new ScrollEventPlugin();
+        this.hasNextPage = false;
+        this.currentIndex = 1;
+        this.noContent = false;
+    }
+
+    /**
+    * @desc 为每一个标签绑定focus事件
+    */
+    initLeftTabOnFocus() {
+        let leftScroll = this.moye.root.getWidgetById('dc-left-tab-scroll');
+        leftScroll.on('focus', e => {
+            if (e.target.id == 'download') {
+                const currentDom = document.getElementById('download-content');
+                if (!currentDom) {
+                    this.renderRightDownloadContent();
+                }
+            } else if (e.target.id == 'collection') {
+                const currentDom = document.getElementById('dc-right-content-scroll');
+                if (!currentDom) {
+                    this.renderRightCollectionContent();
+                }
+            }
+        });
+    }
+
+    // ===================== 渲染下载列表逻辑 ======================
+    /**
+    * @desc 渲染出下载列表
+    */
+    renderRightDownloadContent() {
+        // 删除收藏列表节点
+        const courseWrapperNode = document.getElementById('dc-right-content-scroll');
+        if (courseWrapperNode) {
+            courseWrapperNode.parentNode.removeChild(courseWrapperNode);
+        }
+        // 显示下载列表背景
+        document.getElementById('download-background').setAttribute('style', 'visibility:visible');
+        // 重置收藏请求页码
+        this.currentIndex = 1;
+
+        /*
+        // 假数据，方便在网页调试
+        let recs = []
+        for(let i=1; i < 15; i++){
+            recs.push({
+                'date':'2017-09-01',
+                'courseName':'同步辅导语文一年级'+i,
+                'courseID':'course-'+i,
+                'lessonName':'悯农',
+                'lessonID':'lesson-'+i,
+                'downloadStatus':'下载完成',
+                'createTime':1505187194,
+                'storageUsage':150211,
+            });
+        }*/
+        // 调安卓获取已下载的文件列表
+        let {status, data, error} = CommandBus.execute({type:CMD_TYPE.DOWNLOAD_ALL_LESSON_STATUS_GET, payload:{}});
+        let recs = [];
+        if (!status && data && data.recs){
+            recs = data.recs;
+        }
+        // 记录已下载的课id，快速观看使用此id
+        this.lessonIds = [];
+        for(let idx in recs){
+            let item = recs[idx];
+            this.lessonIds.push(item['lessonID']);
+            // make a map of lessonID to courseID
+            this.lessonItems[item['lessonID']] = {
+                'lessonName':item['lessonName'],
+                'courseID':item['courseID'],
+            }
+        }
+        let downloadTableHtml = this.generateDownloadStatusTable({recs});
+        let wrapper = document.createElement('div');
+        wrapper.setAttribute('id', 'download-content');
+        wrapper.setAttribute('class', 'download-content-wrapper');
+        wrapper.setAttribute('fe-role', 'Scroll');
+        wrapper.setAttribute('fe-cfg', 'scroll_dir:v,scroll_center:con,scroll_duration:0.2,scroll_easing:linea');
+        wrapper.innerHTML = downloadTableHtml;
+        document.getElementById('dc-right-panel').appendChild(wrapper);
+        this.moye.root.reRender();
+    }
+
+    /**
+    * @desc 生成下载列表
+    */
+    generateDownloadStatusTable({recs}) {
+        let trAcc = '';
+        let count = 0;
+        for (let idx in recs){
+            let rec = recs[idx];
+            let feCfg = "";
+            if (0 == count){
+                feCfg = "default_focus:yes";
+            }
+            count += 1;
+
+            //downloadDate
+            let downloadDateStr = '2017-09-10';
+            if (rec.createTime){
+                let createDate = new Date();
+                createDate.setTime(rec.createTime);
+                downloadDateStr = Utils.dateFormat(createDate, 'yyyy-MM-dd');
+            }
+            let downloadStatus = rec['downloadStatus'];
+            let downloadDesc = '';
+
+            //storageUsage
+            let storageUsageStr = '';
+            if (rec.storageUsage){
+                storageUsageStr = '' + parseInt(rec.storageUsage/1000) + 'M';
+            }
+
+            //downloadStatus
+            switch (downloadStatus) {
+                case Consts.DOWNLOAD_STATUS_UNDOWNLOAD:
+                    downloadDesc = '未下载';
+                    break;
+                case Consts.DOWNLOAD_STATUS_ONGOING:
+                    // downloadDesc = '已下载'+rec['progress']*100 + '%';
+                    downloadDesc = '正在下载';
+                    break;
+                case Consts.DOWNLOAD_STATUS_SUCCESS:
+                    downloadDesc = '下载完成';
+                    break;
+                case Consts.DOWNLOAD_STATUS_FAILED:
+                    downloadDesc = '下载失败';
+                    break;
+                default:
+                    downloadDesc = '未下载';
+            }
+            if (!rec['lessonName'])
+            {
+                rec['lessonName'] = rec['courseName'];
+            }
+
+            trAcc += `<div id='lesson-download-record-${rec['lessonID']}' class="row" lesson_id="${rec['lessonID']}">
+                <div class="one">${downloadDateStr}</div>
+                <div class="two">${rec['courseName']}</div>
+                <div class="three">${rec['lessonName']}</div>
+                <div class="four">${storageUsageStr}</div>
+                <div class="five">${downloadDesc}</div>
+                <div class="six" >
+                  <div id="download-btn-wrapper" fe-fole="Switch">
+                    <img src="./assets/img/DownloadCollection/download_enter_btn.png" id="enter-btn-lesson-${rec['lessonID']}" class="download-enter-btn" fe-role="Widget" data-id="${rec['lessonID']}" />
+                    <img src="./assets/img/DownloadCollection/download_del_btn.png" id="del-btn-lesson-${rec['lessonID']}" class="download-del-btn" fe-role="Widget" data-id="${rec['lessonID']}" />
+                  </div>
+                </div>
+                </div>`
+        }
+        const scrollList = `<div class="scroll-list scroll-lines-wrapper clearfix" id="download-status-table-wrapper">${trAcc}</div>`
+        return scrollList;
+    }
+
+    /**
+    * @desc 下载列表删除操作
+    */
+    deleteDownloadItem(retData) {
+        //send delete cmd
+        let lessonID = retData.lessonID;
+        let {status, data} = CommandBus.execute({type:CMD_TYPE.DOWNLOAD_LESSON_DELETE, payload:{lessonID}});
+        //delete dom node
+
+        //if(0 == status){
+        let curNode = document.getElementById('lesson-download-record-'+lessonID);
+        curNode.parentNode.removeChild(curNode);
+        //}
+
+        this.moye.root.reRender();
+        //找兄弟结点
+        let findIdx = this.lessonIds.indexOf(lessonID);
+        if(-1 == findIdx){
+            return;
+        }
+        this.lessonIds.splice(findIdx, 1);
+        if(findIdx >= this.lessonIds.length){
+            findIdx = this.lessonIds.length - 1;
+        }
+        let nextFocusLessonId = null;
+        if(findIdx >= 0){
+            nextFocusLessonId = this.lessonIds[findIdx];
+        }
+        if(nextFocusLessonId){
+            this.moye.root.getWidgetById('del-btn-lesson-'+nextFocusLessonId).focus();
+        }
+    }
+
+    // ================= 收藏内容渲染逻辑 ==================
+    /**
+    * @desc 收藏内容渲染
+    */
+    renderRightCollectionContent() {
+        // 隐藏下载列表的背景
+        document.getElementById('download-background').setAttribute('style', 'visibility:hidden');
+        // 删除下载列表节点
+        const downloadWrapperNode = document.getElementById('download-content');
+        if (downloadWrapperNode) {
+            downloadWrapperNode.parentNode.removeChild(downloadWrapperNode);
+        }
+        // 创建课程列表容器节点并添加到dom中
+        let wrapper = document.createElement('div');
+        wrapper.setAttribute('id', 'dc-right-content-scroll');
+        wrapper.setAttribute('fe-role', 'Scroll');
+        wrapper.setAttribute('fe-cfg', 'scroll_dir:v');
+        const scrollList = `
+            <ul id="dc-right-content-list" class="scroll-list" ></ul>
+            <div id="no-content-message" style="display:none;">
+                无内容
+            </div>`;
+        wrapper.innerHTML = scrollList;
+        document.getElementById('dc-right-panel').appendChild(wrapper);
+        // 重新渲染
+        this.moye.root.reRender();
+        // 加载收藏课程
+        this.loadCollectionList(this.currentIndex);
+    }
+
+    /**
+    * @desc 加载收藏列表
+    */
+    loadCollectionList(index) {
+        //tagId='',返回全部的收藏
+        APIClient.getCollectionList('', index, (isTrue, res) => {
+            if (!isTrue) { return; }
+            if (!res.success) {
+                TVUtil.Toast.show('获取收藏列表失败!', 1500);
+                this.moye.root.reRender();
+                return;
+            }
+            const { pageNo, pageSize, totalSize, list } = res.data || {};
+            this.hasNextPage = pageNo * pageSize < totalSize ? true : false;
+            this.currentIndex = pageNo;
+            this.renderCollectionList(list, CourseItem, index > 1);
+            this.rightScrollEvent.releaseEventLock();
+        });
+    }
+
+    /**
+    * @desc 滚动加载下一页收藏列表
+    */
+    initRightScrollReachEndEvent() {
+      this.rightScrollEvent.onScrollToBottom(() => {
+          if (!this.hasNextPage) { return; }//如果没有下一页了，则不继续下面的程序
+          this.loadCollectionList(this.currentIndex + 1);
+      });
+    }
+
+    /**
+    * @desc 渲染右侧面板中的收藏课程列表
+    */
+    renderCollectionList(dataset, component, isAppend) {
+        let list = document.getElementById('dc-right-content-list');
+
+        if (!isAppend) {
+            list.style.top = '0px';
+            while (list.hasChildNodes()) {
+                list.removeChild(list.lastChild);
+            }
+            this.initRightScrollReachEndEvent();
+        }
+
+        this.noContent = !dataset || dataset.length < 1;
+        FocusEngine.getWidgetById('dc-right-content-scroll').disabled = this.noContent;
+        document.getElementById('no-content-message').style.display = this.noContent ? '' : 'none';
+
+        for (let i in dataset) {
+            let currentItem = dataset[i];
+            let item = document.createElement('li');
+            item.setAttribute('id', `item-${currentItem.id}`);
+            item.setAttribute('class', 'item');
+            item.setAttribute('fe-role', 'Widget');
+            if(0 == i){
+                //第一个课程设为默认父组件的默认焦点子组件
+                item.setAttribute('fe-cfg', 'default_focus:yes');
+            }
+            const itemDataset = {
+                subject: currentItem.title,
+                subjectSub: currentItem.subTitle,
+                buyed: false,
+                img: Consts.IMG_PATH + '/' + currentItem.coverUrl,
+            };
+            item.innerHTML = component.createHTMLString(itemDataset);
+            list.appendChild(item);
+        }
+        this.moye.root.reRender();
+    }
+
+    onCreate() {
+        this.setContentView(require('../../../res/tpl/DownloadCollection.tpl'), {}, 'DownloadCollectionScene', {}, () => {
+            //页面渲染完成异步回调
+            this.initLeftTabOnFocus();
+            this.renderRightDownloadContent();
+        });
+    }
+
+    onOK(e) {
+        // 点击删除
+        if(e.target.con.classList.contains('download-del-btn')){
+            let lessonID = e.target.con.dataset.id;
+            let title = this.lessonItems[lessonID].lessonName;
+            let parentScene = 'DownloadCollectionScene';
+            this.showScene(require('./DelConfirmScene.js'), { parentScene, lessonID, title });
+        // 点击快速观看
+        } else if (e.target.con.classList.contains('download-enter-btn')) {
+            let lessonID = e.target.con.dataset.id;
+            let courseID = this.lessonItems[lessonID].courseID;
+            let lessonName = this.lessonItems[lessonID].lessonName;
+            this.showScene(require('./LessonScene.js'), {id:lessonID, courseId:courseID, title:lessonName});
+        // 点击courseItem
+        } else if (e.target.con.classList.contains('item')) {
+            let params = e.target.id.split('-');
+            let id = params[1];
+            this.showScene(require(`./CourseScene.js`), { id });
+        }
+    }
+
+    onKeydown() {
+
+    }
+
+    onKeyup() {
+
+    }
+
+    onResume(retData) {
+        if (!retData) return;
+        this.deleteDownloadItem(retData);
+    }
+
+    onPause() {
+
+    }
+
+    onDestroy() {
+
+    }
+
+    onActive() {
+
+    }
+
+    onInactive() {
+
+    }
+
+    onBack() {
+
+    }
+}
+
+module.exports = DownloadCollectionScene;

src/stage/index/scene/DownloadManagerScene.js

@@ -1,211 +0,0 @@
-import Consts from '../../../util/Consts';
-import Utils from '../../../util/Utils';
-import {CommandBus, CMD_TYPE} from '../../../util/CommandBus';
-
-class DownloadManagerScene extends scene {
-    constructor(scope) {
-        super(scope);
-        this.lessonIds = [];
-        this.lessonItems = {};
-    }
-
-    generateDownloadStatusTable({recs}) {
-        let trAcc = '';
-        let count = 0;
-        for (let idx in recs) {
-            let rec = recs[idx];
-            let feCfg = "";
-            if (0 == count){
-                feCfg = "default_focus:yes";
-            }
-            count += 1;
-            //for tmp
-
-            //downloadDate
-            let downloadDateStr = '2017-09-10';
-            if (rec.createTime) {
-                let createDate = new Date();
-                createDate.setTime(rec.createTime);
-                downloadDateStr = Utils.dateFormat(createDate, 'yyyy-MM-dd');
-            }
-            let downloadStatus = rec['downloadStatus'];
-            let downloadDesc = '';
-
-            //storageUsage
-            let storageUsageStr = '';
-            if (rec.storageUsage){
-                storageUsageStr = '' + parseInt(rec.storageUsage/1000) + 'M';
-            }
-
-            //downloadStatus
-            switch (downloadStatus) {
-            case Consts.DOWNLOAD_STATUS_UNDOWNLOAD:
-                downloadDesc = '未下载';
-                break;
-            case Consts.DOWNLOAD_STATUS_ONGOING:
-                //downloadDesc = '已下载'+rec['progress']*100 + '%';
-                downloadDesc = '正在下载';
-                break;
-            case Consts.DOWNLOAD_STATUS_SUCCESS:
-                downloadDesc = '下载完成';
-                break;
-            case Consts.DOWNLOAD_STATUS_FAILED:
-                downloadDesc = '下载失败';
-                break;
-            default:
-                downloadDesc = '未下载';
-            }
-            if (!rec['lessonName']) {
-                rec['lessonName'] = rec['courseName'];
-            }
-
-            trAcc += `<div id='lesson-download-record-${rec['lessonID']}' class="row" lesson_id="${rec['lessonID']}">
-            <div class="one">${downloadDateStr}</div>
-            <div class="two">${rec['courseName']}</div>
-            <div class="three">${rec['lessonName']}</div>
-            <div class="four">${storageUsageStr}</div>
-            <div class="five">${downloadDesc}</div>
-            <div class="six" >
-              <div id="download-btn-wrapper" fe-fole="Switch">
-                <div id="enter-btn-lesson-${rec['lessonID']}" class="download-enter-btn" fe-role="Widget" data-id="${rec['lessonID']}">
-                  <img src="./assets/img/DownloadScene/download_enter_btn.png" class="img-btn"/>
-                </div>
-                <div id="del-btn-lesson-${rec['lessonID']}" class="download-del-btn" fe-role="Widget" data-id="${rec['lessonID']}" >
-                  <img src="./assets/img/DownloadScene/download_del_btn.png" class="img-btn"/>
-                </div>
-              </div>
-            </div>
-            </div>`
-            //<div class="delete-btn"  fe-role="Widget" fe-cfg="${feCfg}"/>
-            //<img src="./assets/img/download_del_btn.png" />
-        }
-        let header = `<div class="row header">
-          <div class="one">下载日期</div>
-          <div class="two">课程名称</div>
-          <div class="three">课名称</div>
-          <div class="four">容量</div>
-          <div class="five">下载状态</div>
-          <div class="six">操作</div>
-          </div>`
-        return `${trAcc}`;
-    }
-
-    onCreate() {
-        /*
-          let recs = []
-          for(let i=1; i < 15; i++){
-            recs.push({
-              'date':'2017-09-01',
-              'courseName':'同步辅导语文一年级上'+i,
-              'courseID':'course-'+i,
-              'lessonName':'悯农',
-              'lessonID':'lesson-'+i,
-              'downloadStatus':'下载完成',
-              'createTime':1505187194,
-              'storageUsage':150211,
-            });
-          }
-          */
-        let {status, data, error} = CommandBus.execute({type:CMD_TYPE.DOWNLOAD_ALL_LESSON_STATUS_GET, payload:{}});
-        let recs = [];
-        if (!status && data && data.recs){
-            recs = data.recs;
-        }
-
-        this.lessonIds = [];
-        for(let idx in recs){
-            let item = recs[idx];
-            this.lessonIds.push(item['lessonID']);
-
-            // make a map of lessonID to courseID
-            this.lessonItems[item['lessonID']] = {
-                'lessonName':item['lessonName'],
-                'courseID':item['courseID'],
-            }
-        }
-
-        //TVUtil.Toast.show(JSON.stringify({status,data, error, recs}), 5000);
-        this.setContentView(require('../../../res/tpl/DownloadScene.tpl'), {}, 'DownloadManagerScene', {}, () => {
-            let downloadStatusTableHtml = this.generateDownloadStatusTable({recs});
-            let downloadStatusTableWrapper = document.getElementById('download-status-table-wrapper');
-            downloadStatusTableWrapper.innerHTML = downloadStatusTableHtml;
-            this.moye.root.reRender();
-        });
-    }
-
-    onResume(retData) {
-      if (!retData) return;
-      //send delete cmd
-      let lessonID = retData.lessonID;
-      let {status, data} = CommandBus.execute({type:CMD_TYPE.DOWNLOAD_LESSON_DELETE, payload:{lessonID}});
-      //delete dom node
-
-      //if(0 == status){
-      let curNode = document.getElementById('lesson-download-record-'+lessonID);
-      curNode.parentNode.removeChild(curNode);
-      //}
-
-      this.moye.root.reRender();
-      //找兄弟结点
-      let findIdx = this.lessonIds.indexOf(lessonID);
-      if(-1 == findIdx){
-          return;
-      }
-      this.lessonIds.splice(findIdx, 1);
-      if(findIdx >= this.lessonIds.length){
-          findIdx = this.lessonIds.length - 1;
-      }
-      let nextFocusLessonId = null;
-      if(findIdx >= 0){
-          nextFocusLessonId = this.lessonIds[findIdx];
-      }
-      if(nextFocusLessonId){
-        this.moye.root.getWidgetById('del-btn-lesson-'+nextFocusLessonId).focus();
-      }
-    }
-
-    onPause() {
-
-    }
-
-    onDestroy() {
-
-    }
-
-    onActive() {
-
-    }
-
-    onInactive() {
-
-    }
-
-    onOK(e) {
-        if(e.target.con.classList.contains('download-del-btn')){
-            let lessonID = e.target.con.dataset.id;
-            let title = this.lessonItems[lessonID].lessonName;
-            let parentScene = 'DownloadManagerScene';
-            this.showScene(require('./DelConfirmScene.js'), { parentScene, lessonID, title });
-        } else if (e.target.con.classList.contains('download-enter-btn')) {
-            let lessonID = e.target.con.dataset.id;
-            let courseID = this.lessonItems[lessonID].courseID;
-            let lessonName = this.lessonItems[lessonID].lessonName;
-            // enter relative lesson scene
-            this.showScene(require('./LessonScene.js'), {id:lessonID, courseId:courseID, title:lessonName});
-        }
-    }
-
-    onBack() {
-
-    }
-
-    onKeydown() {
-
-    }
-
-    onKeyup() {
-
-    }
-}
-
-module.exports = DownloadManagerScene;

src/stage/index/scene/IndexScene.js

@@ -143,8 +143,8 @@ class IndexScene extends scene {
 		// 点击终端信息、推荐列表、底部五个入口的处理逻辑
 		if (e.target.con.classList.contains('fun-item')) {
 			let type = e.target.id.replace('fun-', '');
-			if (type == 'download') {
-				this.showScene(require('./DownloadManagerScene.js'), {});
+			if (type == 'dc') {
+				this.showScene(require('./DownloadCollectionScene.js'), {});
 			} else {
 				this.showScene(require('./CLScene.js'), { type });
 			}

src/stage/index/style/DownloadCollection.less

@@ -0,0 +1,269 @@
+@import './Mixins.less';
+@import './component/GoodsItem.less';
+@import './component/CourseItem.less';
+
+@tagHeight: 1.05rem;
+@marginTop: 1.77rem;
+.custom-focus(@borderSize:0; @borderColor: transparent; @boxShadowSize: 0; @boxShadowColor: transparent) {
+	transform: scale3d(1.07, 1.07, 1.07);
+	-webkit-transform: scale3d(1.07, 1.07, 1.07);
+	border: solid unit(@borderSize, rem) @borderColor;
+	z-index: 9999;
+}
+
+#DownloadCollectionScene {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: url('./assets/img/DownloadCollection/background.jpg') center no-repeat;
+    background-size: 100% 100%;
+
+    // 1.左侧面板
+    #dc-left-panel {
+        float: left;
+        width: 3.7rem;
+        height: 100%;
+        #dc-left-tab-scroll {
+            padding-top: @marginTop;
+            position: relative;
+            overflow: hidden;
+            height: 8.55rem;
+        }
+        .tag-item {
+            color: white;
+            font-size: 0.42rem;
+            height: @tagHeight;
+            text-align: center;
+            span {
+                position: relative;
+                height: 0.42rem;
+                top: 0.2rem;
+            }
+            &.fe-cache {
+                color: white;
+                background: #4d92df;
+            }
+            &.fe-focus {
+                color: #ffe100;
+                font-weight: bolder;
+                background: #4d92df;
+            }
+        }
+    }
+
+    // 2.右侧面板
+    #dc-right-panel {
+        float: right;
+        width: 15.5rem;
+        height: 100%;
+
+        // 2-1.下载table背景样式
+        .download-bg-wrapper {
+            z-index: 0;
+            position: absolute;
+            margin-top: @marginTop;
+          	width: 14.36rem;
+          	height: 8.34rem;
+          	border-radius: 0rem 0.3rem 0.3rem 0rem;
+          	background-color: #244b7e;
+          	text-align: center;
+
+            // table-header-background
+            .download-bg-header {
+      			z-index: 0;
+      			background-color: #5a70d6;
+      			border-radius: 0rem 0.3rem 0rem 0rem;
+      			height: @tagHeight;
+            }
+
+            // table-body-row-split-line
+    		.horizon-line {
+      			z-index: 0;
+      			height: 0.81rem;
+      			width: 14.35rem;
+                border-bottom: 0.02rem solid #053864;
+      			margin: 0 auto;
+      			&.first-line {
+    				height: @tagHeight;
+    				border-bottom: none;
+                }
+    		}
+
+            // table-body-background-row
+    		.back-row {
+                z-index: 2;
+                height: 0.81rem;
+                text-align: center;
+                position: relative;
+                float: left;
+                line-height: 0.81rem;
+                font-size: 0.3rem;
+                color: white;
+                display: table-row;
+                // margin-left: 0.38rem;
+                div {
+                	display: table-cell;
+                    vertical-align: middle;
+                }
+                .right-border {
+                	height: 0.81rem;
+                	border-right: 0.02rem solid #053864;
+                }
+                .one {
+                	width: 2rem;
+                	text-align: center;
+                	.right-border;
+                }
+                .two {
+                	width: 3.37rem;
+                	.right-border;
+                }
+                .three {
+                	width: 3.87rem;
+                	.right-border;
+                }
+                .four {
+                	width: 1.5rem;
+                	.right-border;
+                }
+                .five {
+                	width: 2rem;
+                	.right-border;
+                }
+                .six {
+                	width: 2.5rem;
+                }
+            }
+        }
+
+        // 2-2.下载table行样式
+        .row {
+			z-index: 1;
+			height: 0.81rem;
+			text-align: center;
+            vertical-align: middle;
+			position: relative;
+			font-size: 0.3rem;
+			color: white;
+			display: table-row;
+			margin: 0 auto;
+			div {
+				display: table-cell;
+                vertical-align: middle;
+			}
+			.right-border {
+				border-right: 0.02rem solid #053864;
+			}
+			.one {
+				width: 2.02rem;
+				text-align: center;
+			}
+			.two {
+				width: 3.40rem;
+			}
+			.three {
+				width: 3.91rem;
+			}
+			.four {
+				width: 1.5rem;
+			}
+			.five {
+				width: 2.02rem;
+			}
+			.six {
+                width: 2.5rem;
+                padding: 0rem 0.1rem 0rem 0.2rem;
+                #download-btn-wrapper {
+                    // 第6列中快速进入按钮
+                    .download-enter-btn {
+                    	width: 1.25rem;
+                    	height: 0.4rem;
+                    	&.fe-focus {
+                			.custom-focus(0.032rem; #ffe100; 0; rgba(0,0,0,0.5));
+                			border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
+                    	}
+                    }
+                    // 第6列中删除按钮
+                    .download-del-btn {
+                        width: 0.65rem;
+                        height: 0.4rem;
+                        &.fe-focus {
+                        	.custom-focus(0.032rem; #ffe100; 0; rgba(0,0,0,0.5));
+                        	border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
+                        }
+                    }
+                }
+            }
+            &.row-header {
+                height: 1.06rem;
+            }
+        }
+
+        // 2-3.下载table表头
+        .header {
+            height: @tagHeight;
+            text-align: center;
+            position: absolute;
+            margin-top: 0;
+        }
+
+        // 2-4.表层数据
+      	.download-content-wrapper {
+            z-index: 2;
+            position: absolute;
+            margin-top: (@marginTop + @tagHeight);
+          	width: 14.36rem;
+          	height: 7.29rem;
+          	text-align: center;
+            display: table;
+            overflow: hidden;
+
+    		.scroll-lines-wrapper {
+      			z-index: 1;
+            // margin-top: (@marginTop + @tagHeight);
+      			position: absolute;
+      			// margin-top: 0;
+    		}
+      	}
+    }
+
+    #dc-right-content-scroll {
+        position: relative;
+        overflow: hidden;
+        width: 14.2rem;
+        margin-left: 0.43rem;
+        margin-top: 1.3rem;
+        height: 9.66rem;
+        ul {
+            overflow: hidden;
+            padding-bottom: 0.18rem;
+        }
+        .item {
+            float: left;
+	          margin-bottom: 0.1rem;
+            width: 3.52rem;
+            height: 4.84rem;
+
+            //课程item组件在当前scene的margin需要在使用scene的样式中定义
+            //周边商品item组件在当前scene的margin需要在使用scene的样式中定义
+            .course-item-frame,
+            .goods-item-frame {
+                margin: 0.18rem 0 0 0.18rem;
+            }
+            //自定义课程item在当前scene的focus样式
+            //自定义周边商品item在当前scene的focus样式
+            &.fe-focus .course-item-frame,
+            &.fe-focus .goods-item-frame {
+                .after-focus(@borderSize; #ffe100);
+            }
+        }
+
+        #no-content-message {
+            font-size: .5rem;
+            color: white;
+            position: absolute;
+            left: 46%;
+            top: 45%;
+        }
+    }
+}

src/stage/index/style/DownloadScene.less

@@ -1,213 +0,0 @@
-@import "./Mixins.less";
-
-#DownloadManagerScene {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-	text-align: center;
-
-	.download-manager-bg {
-		position: absolute;
-		top: 0;
-		left: 0;
-		z-index: -1;
-		width: 100%;
-		height: 100%;
-		img {
-			width: 100%;
-			height: 100%;
-		}
-	}
-
-	.local-download-icon{
-		float: left;
-		position: relative;
-		left:0.5rem;
-		top:0.3rem;
-		width:3rem;
-		img {
-			float: left;
-			width: 1rem;
-		}
-		div{
-			float: left;
-			font-size: 0.3rem;
-			color: white;
-			margin-top: 0.3rem;
-			margin-left: 0.2rem;
-		}
-	}
-
-	.background-wrapper{
-		z-index: 0;
-		position: absolute;
-		left: 0.4rem;
-		margin: 1.55rem 1.25rem;
-		width: 16rem;
-		height: 8.29rem;
-		border-radius: 0.3rem 0.3rem 0.3rem 0.3rem;
-		background-color: #244b7e;
-		text-align: center;
-
-		.background-header{
-			z-index: 0;
-			background-color:#5a70d6;
-			border-radius: 0.3rem 0.3rem 0rem 0rem;
-			height:0.9rem;
-		}
-
-		.horizon-line {
-			z-index: 0;
-			height:0.82rem;
-			width: 15.6rem;
-      		border-bottom: 0.02rem solid #053864;
-			margin: 0 auto;
-			&.first-line{
-				height: 0.9rem;
-				border-bottom: none;
-			}
-		}
-
-		.back-row {
-			z-index: 2;
-			height: 0.82rem;
-			text-align: center;
-			position:relative;
-			float: left;
-			line-height: 0.82rem;
-			font-size: 0.3rem;
-			color: white;
-			display:table-row;
-			margin-left: 0.38rem;
-			div {
-				display:table-cell;
-      			vertical-align:middle;
-			}
-			.right-border {
-				height: 0.82rem;
-				border-right: 0.02rem solid #053864;
-			}
-			.one {
-				width:2rem;
-				.right-border;
-				text-align: center;
-			}
-			.two {
-				width:3.87rem;
-				.right-border;
-			}
-			.three {
-				width:3.37rem;
-				.right-border;
-			}
-			.four {
-				width:1.5rem;
-				.right-border;
-			}
-			.five {
-				width:2rem;
-				.right-border;
-			}
-			.six {
-				width:2.9rem;
-			}
-		}
-	}
-
-	.content-wrapper {
-		z-index: 2;
-		position: absolute;
-		width: 100%;
-		margin-left: 0.38rem;
-		display:table;
-		height: 7.39rem;
-    	overflow: hidden;
-
-		.scroll-lines-wrapper{
-			z-index: 1;
-			position: absolute;
-			margin-top: 0;
-		}
-	}//content-wrapper
-
-	.row {
-		z-index: 1;
-		height: 0.82rem;
-		text-align: center;
-		position:relative;
-		font-size: 0.3rem;
-		color: white;
-		display:table-row;
-		margin: 0 auto;
-		div {
-			display:table-cell;
-  			vertical-align:middle;
-		}
-		.right-border {
-			border-right: 0.02rem solid #053864;
-		}
-		.one {
-			width:2rem;
-			text-align: center;
-		}
-		.two {
-			width:3.87rem;
-		}
-		.three {
-			width:3.37rem;
-		}
-		.four {
-			width:1.5rem;
-		}
-		.five {
-			width:2rem;
-		}
-		.six {
-			width:2.9rem;
-			text-align: center;
-
-			.download-enter-btn {
-				width: 1.7rem;
-				height: .6rem;
-				border: .05rem solid transparent;
-				.img-btn {
-					height: 100%;
-					width: 100%;
-				}
-
-				&.fe-focus {
-					border: .05rem solid #ffe100;
-					border-radius: .25rem;
-				}
-			}
-
-			.download-del-btn {
-				width: 1rem;
-				height: .6rem;
-				border: .05rem solid transparent;
-				.img-btn{
-					height: 100%;
-					width: 100%;
-				}
-				&.fe-focus {
-					border: .05rem solid #ffe100;
-					border-radius: .25rem;
-				}
-			}
-		}
-		&.row-header{
-			height: 0.9rem;
-		}
-	}//row
-
-	.header {
-		height: 0.9rem;
-		text-align: center;
-		position: absolute;
-		margin-top: 0;
-		padding-left: 0.38rem;
-	}
-}

src/util/API/APIClient.js

@@ -69,9 +69,10 @@ class APIClient {
 	// 获取标签组下的标签列表
 	static getTagListByGroupCode(type, callback) {
 		const typeToCode = {
-			'RESOURCE': 'BABY_RESOURCE',
-			'TRAINING': 'BABY_TRAINING',
-			'PERIPHERY': 'BABY_SUPPORT',
+			'PERIPHERY': 'ANGELBELL_SUPPORT',
+			'SYNC': 'ANGELBELL_SYNC',
+			'STYLE': 'ANGELBELL_STYLE',
+			'INTEREST': 'ANGELBELL_INTEREST',
 		};
 		let params = APIClient.addCacheParam({});
 		AJAXHelper.get(`/tagGroup/${typeToCode[type]}`, params, callback);