:lipstick: 未购买课程的第一课增加免费标识

src/stage/index/scene/CourseScene.js

@@ -58,11 +58,11 @@ class CourseScene extends scene {
 	renderCourse(id) {
 		APIClient.getLessonList(id, (isTrue, res) => {
 			if (!isTrue) { return; }
-      if (!res.success) {
-          TVUtil.Toast.show('获取课列表失败!', 1500);
-          this.moye.root.reRender();
-          return;
-      }
+			if (!res.success) {
+				TVUtil.Toast.show('获取课列表失败!', 1500);
+				this.moye.root.reRender();
+				return;
+			}
 			// 判断课列表是否为空,为空显示正在突击中或者背景图片
 			if (!res.data || !res.data.list || !res.data.list.length) {
 				this.hideScene();
@@ -88,7 +88,7 @@ class CourseScene extends scene {
 				collect.classList.add('selected');
 			}
 			// 5. render lesson list
-			Course.renderList(list);
+			Course.renderList(list, auth);
 			this.moye.root.reRender();
 			//光标放到第一节课, TODO:记录上次光标位置
 			let firstLessonBtn = this.moye.root.getWidgetById('lesson-btn-0');
@@ -109,9 +109,9 @@ class CourseScene extends scene {
 			}
 			Course.renderDetail(res.data);
 			this.moye.root.reRender();
-      if (focusButtonId) {
-			  this.moye.root.getWidgetById(focusButtonId).focus();
-		  }
+			if (focusButtonId) {
+				this.moye.root.getWidgetById(focusButtonId).focus();
+			}
 		});
 	}
 
@@ -279,9 +279,9 @@ class CourseScene extends scene {
 			this.renderCourse(this.id);
 		});
 	    CommandBus.execute({type:CMD_TYPE.APP_BHV_POST, payload:{
-				eventName: "enter_courseScene",
-				eventPage: "courseScene",
-				eventAttr: { courseID: data.id },
+			eventName: "enter_courseScene",
+			eventPage: "courseScene",
+			eventAttr: { courseID: data.id },
 	    }});
 	}
 

src/stage/index/style/CourseScene.less

@@ -207,13 +207,22 @@
 					background-color: #fff;
 					margin: 0 0.26rem 0.3rem;
 					border-radius: 0.35rem;
-					border: 0.05rem solid transparent;
+					// border: 0.05rem solid transparent;
 					font-size: .48rem;
 					color: #404040;
 					padding: 0 0.4rem;
 					&.fe-focus {
 						.after-focus(@borderSize; #ff5050; .1rem; rgba(0,0,0,0.5));
 					}
+					.free-flag {
+						width: .86rem;
+						height: .86rem;
+						position: absolute;
+						top: -0.05rem;
+						right: -0.05rem;
+						background: url('assets/img/CourseScene/icon_free.png') no-repeat center;
+						background-size: cover;
+					}
 				}
 
 				.download-btn-lesson {}
@@ -226,7 +235,7 @@
 					height: 1.1rem;
 					line-height: 1.1rem;
 					overflow: hidden;
-					border-radius: 0.30rem;
+					border-radius: 0.33rem;
 					background-image:url('assets/img/CourseScene/download_btn_list_undownload.png');
 					background-repeat: no-repeat;
 					background-size: cover;

src/util/course.js

@@ -6,7 +6,7 @@ import {CommandBus, CMD_TYPE} from './CommandBus';
 class Course {
 	constructor() {}
 
-	static renderList(data) {
+	static renderList(data, auth) {
 		let main = document.querySelector('#course-main');
 		main.innerHTML = '';
 		//先获取各课的下载状态
@@ -26,7 +26,7 @@ class Course {
 		}
 
 		// 现在只按文字模板进行渲染
-		main.innerHTML = this.textList(data, lessonDownloadStatus);
+		main.innerHTML = this.textList(data, lessonDownloadStatus, auth);
 	}
 
 	//废弃
@@ -67,20 +67,26 @@ class Course {
 		</div>`;
 	}
 
-	static textList(data, lessonDownloadStatus) {
+	static textList(data, lessonDownloadStatus, auth) {
 		let content = '';
-		function listItem(data, seq, downloadStatus) {
+		function listItem(data, seq, downloadStatus, isFree) {
 			let btnClass = 'download-btn-lesson-list-ready';
 			if (downloadStatus == Consts.DOWNLOAD_STATUS_ONGOING){
-					btnClass = 'download-btn-lesson-list-ongoing';
+				btnClass = 'download-btn-lesson-list-ongoing';
 			}
 			else if (downloadStatus == Consts.DOWNLOAD_STATUS_SUCCESS) {
-					btnClass = 'download-btn-lesson-list-success';
+				btnClass = 'download-btn-lesson-list-success';
 			}
-			return `<div data-seq="${seq}">
-		        <div id="lesson-btn-${seq}" data-id="${data.id}" data-name="${data.title}" data-seq="${seq}" fe-role="Widget" class="text-wrapper">${Utils.fixOverflowStr(data.title, 32, '...')}</div>
-		        <div id="download-btn-${data.id}" fe-role="Widget" class="${btnClass}" data-id="${data.id}" data-name="${data.title}" data-seq="${seq}" ></div>
-		        </div>`;
+			return `
+				<div data-seq="${seq}">
+		        	<div id="lesson-btn-${seq}" data-id="${data.id}" data-name="${data.title}" data-seq="${seq}" fe-role="Widget" class="text-wrapper">
+						${Utils.fixOverflowStr(data.title, 32, '...')}
+						<div class="free-flag" style="display: ${isFree ? "block" : "none"}"></div>
+					</div>
+		        	<div id="download-btn-${data.id}" fe-role="Widget" class="${btnClass}" data-id="${data.id}" data-name="${data.title}" data-seq="${seq}">
+					</div>
+		        </div>
+			`;
 		}
 		for (let i in data) {
 			let downloadStatus = Consts.DOWNLOAD_STATUS_UNDOWNLOAD;
@@ -88,8 +94,12 @@ class Course {
 			if (lessonDownloadStatus[lessonId]){
 				downloadStatus = lessonDownloadStatus[lessonId];
 			}
-
-			content += listItem(data[i], i, downloadStatus);
+			// 课程未购买的第一课加入free标记
+			if (i == 0 && !auth) {
+				content += listItem(data[i], i, downloadStatus, true);
+			} else {
+				content += listItem(data[i], i, downloadStatus, false);
+			}
 		}
 		return `<div id="list-text-container" class="list-text-container" fe-role="Scroll" fe-cfg="scroll_dir:v,scroll_center:con,scroll_duration:0.2,scroll_easing:linear"><div class="scroll-list clearfix" id="course-main-list">${content}</div></div> `;
 	}