Browse Source

增加正在下载提示框

sophieChenyx 6 years ago
parent
commit
016106d538

+ 7 - 0
src/res/tpl/DownloadTipScene.tpl

@@ -0,0 +1,7 @@
+<div id="DownloadTipScene" class="course-download-wrapper" fe-role="Switch">
+    <div class="toast">
+        <img src="./../../stage/index/assets/img/CourseScene/download_btn_list_undownload.png" alt="">
+        <p>当前正在下载中,请等待下载结束</p>
+        <div class="ok-btn" fe-role="Widget" id="ok-btn">确认</div>
+    </div>
+</div>

+ 1 - 0
src/stage/index/index.less

@@ -18,6 +18,7 @@ body {
 @import './style/IndexScene.less';
 @import './style/TerminalScene.less';
 @import './style/DownloadScene.less';
+@import './style/DownloadTipScene.less';
 @import './style/RepeatLoginScene.less';
 @import './style/BuyConfirmScene.less';
 @import './style/DelConfirmScene.less';

+ 23 - 4
src/stage/index/scene/CourseScene.js

@@ -273,6 +273,7 @@ class CourseScene extends scene {
 	onResume(data) {
 		if (!data) { return }
 		if ('BuyConfirmScene' === data.backScene) {
+
 			if ('goBuy' === data.mode) {
 				//TODO:需降低耦合,统一管理路由,暂时先造个对象
 				this.navSwitch({ target: { id: 'course-tab-detail' } });
@@ -282,6 +283,9 @@ class CourseScene extends scene {
 			} else {
 				return;
 			}
+
+		} else if ('DownloadTipScene' === data.backScene) {
+				return;
 		} else {
 			this.renderCourse(this.id);
 		}
@@ -337,16 +341,30 @@ class CourseScene extends scene {
             return;
         }
 
-		// 点击某一课
+		// 点击正在下载的某一课
+		if (e.target.con.classList.contains('download-btn-lesson-list-ongoing') || e.target.con.classList.contains('download-btn-lesson-icon-ready')) {
+      this.showScene(require('./DownloadTipScene.js'), {});
+      return;
+		}
+    if (e.target.con.classList.contains('text-wrapper')) {
+      let i = 0;
+			for (i < e.target.parentWidget.childWidgets; i++;) {
+        if(e.target.parentWidget.childWidgets[i].con.classList.contains('download-btn-lesson-list-ongoing') || e.target.con.classList.contains('download-btn-lesson-icon-ready')) {
+          this.showScene(require('./DownloadTipScene.js'), {});
+          return;
+				}
+			}
+    }
+
 		if (e.target.con.classList.contains('img-wrapper') || e.target.con.classList.contains('text-wrapper')) {
 			// 课件模版 COURSE_WARE_VIDEO(课视频模版)  COURSE_WARE_LIST(课列表)
-			let id = e.target.con.dataset.id;
+			// 当前是否是正在下载的课件,禁止重新下载行为等待下载动作结束
 
-			//检查课的权限
+			let id = e.target.con.dataset.id;
+      //检查课的权限
 			//首先获取课的序号
 			let lessonSeq = parseInt(e.target.con.dataset.seq);
 			if (!this.isAuthorized(lessonSeq)) {
-				//新添需求,如果该课程未购买,出现确认购买弹框
 				this.showScene(require('./BuyConfirmScene.js'), {});
 				return;
 			}
@@ -356,6 +374,7 @@ class CourseScene extends scene {
 			return;
 		}
 
+
     	//点击课程配套列表中的某个配套
 		if (e.target.con.classList.contains('periphery-wrapper')) {
 			document.querySelector('.periphery-container').style.opacity = '0';

+ 59 - 0
src/stage/index/scene/DownloadTipScene.js

@@ -0,0 +1,59 @@
+class DownloadTipScene extends scene {
+  constructor(scope) {
+    super(scope);
+  }
+
+  onCreate() {
+    this.setContentView(require('../../../res/tpl/DownloadTipScene.tpl'), {}, 'DownloadTipScene', {
+      'isParentShow': true
+    }, () => {
+      this.moye.root.getWidgetById('ok-btn').focus();
+    });
+  }
+
+  onResume() {
+
+  }
+
+  onPause() {
+
+  }
+
+  onDestroy() {
+
+  }
+
+  onActive() {
+
+  }
+
+  onInactive() {
+
+  }
+
+  // 所有事件类函数默认触发时会传递过来一个Event,其中包含着事件响应节点以及其他相关信息
+  // 查看信息:console.log(e)
+  // 获取Event节点Id的方法(前提是触发事件的节点存在Id)
+  // 在使用Atv时Id对应:e.target.id
+  // 非使用Atv是Id对应:e.target.id
+  onOK(e) {
+    let backScene = 'DownloadTipScene';
+    if (e.target.con.id == 'ok-btn') {
+      this.hideScene( { backScene } , 'CourseScene');
+    }
+  }
+
+  onBack() {
+
+  }
+
+  onKeydown() {
+
+  }
+
+  onKeyup() {
+
+  }
+}
+
+module.exports = DownloadTipScene;

+ 74 - 0
src/stage/index/style/DownloadTipScene.less

@@ -0,0 +1,74 @@
+.course-download-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, .5);
+  z-index: 2;
+
+  .toast {
+    position: absolute;
+    width: 8.52rem;
+    height: 5.04rem;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    -webkit-transform: translate3d(-50%, -50%, 0);
+    overflow: hidden;
+    padding: 0.33rem;
+    line-height: 1;
+    background-color: #ffffff;
+    text-align: center;
+    border-radius: 0.6rem;
+    font-size: 0.48rem;
+
+    img {
+      width: 1.3rem;
+      height: 1.3rem;
+      border-radius: 0.65rem;
+    }
+
+    p {
+      color: #515151;
+      font-size: 0.48rem;
+      margin: 0.4rem;
+    }
+
+    .ok-btn {
+      position: absolute;
+      bottom: .34rem;
+      left: 2.5rem;
+      width: 3.6rem;
+      height: 1.2rem;
+      padding: 0.3rem 0;
+      border-radius: .5rem;
+      color: #fff;
+      background-color: #fe84b2;
+      font-size: 0.48rem;
+
+      &.fe-focus {
+        //.after-focus(@borderSize; #ff5050);
+      }
+    }
+
+    /*
+    .cancle {
+        position: absolute;
+        bottom: .34rem;
+        right: .34rem;
+        width: 3.6rem;
+        height: 1.2rem;
+        line-height: 1.2rem;
+        border-radius: .5rem;
+        color: #fff;
+        background-color: #fe84b2;
+        font-size: 0.48rem;
+
+        &.fe-focus {
+            .after-focus(@borderSize; #ff5050);
+        }
+    }
+    */
+  }
+}