Browse Source

:zap: 幼儿园网页版后退功能调整

zhanghe 6 years ago
parent
commit
4f9dd73147

+ 3 - 0
src/res/tpl/CLScene.tpl

@@ -21,4 +21,7 @@
             </div>
         </div>
     </div>
+	<div class="goback" fe-role="Widget">
+		<img src="assets/img/goback.png" />
+	</div>
 </div>

+ 3 - 0
src/res/tpl/CourseScene.tpl

@@ -15,4 +15,7 @@
 		</div>
 	</div>
 	<div class="main" id="course-main"></div>
+	<div class="goback" fe-role="Widget">
+		<img src="assets/img/goback.png" />
+	</div>
 </div>

+ 3 - 0
src/res/tpl/DataBuildingScene.tpl

@@ -1,3 +1,6 @@
 <div id="DataBuildingScene" fe-role="Switch">
     <img id="building-pic-bg"  src="assets/img/default_bg.jpg" alt="">
+	<div class="goback" fe-role="Widget">
+		<img src="assets/img/goback.png" />
+	</div>
 </div>

+ 3 - 0
src/res/tpl/DownloadScene.tpl

@@ -104,4 +104,7 @@
 			<div class="scroll-list scroll-lines-wrapper clearfix" id="download-status-table-wrapper"></div>
 		</div>
 	</div>
+	<div class="goback" fe-role="Widget">
+		<img src="assets/img/goback.png" />
+	</div>
 </div>

+ 3 - 0
src/res/tpl/GlobalGoodDetail.tpl

@@ -23,4 +23,7 @@
             </ul>
         </div>
     </div>
+	<div class="goback" fe-role="Widget">
+		<img src="assets/img/goback.png" />
+	</div>
 </div>

+ 9 - 2
src/res/tpl/ImageWareFullScreen.tpl

@@ -1,5 +1,12 @@
 <div id="ImageWareFullScreen" fe-role="Switch">
     <img id="wareImg" src="./assets/img/default_bg.jpg" />
-    <img id="imgLeft" src="./assets/img/LessonScene/arrow_left.png" />
-    <img id="imgRight" src="./assets/img/LessonScene/arrow_right.png" />
+    <div id="imgLeft" fe-role="Widget">
+        <img src="./assets/img/backward.png" />
+    </div>
+    <div id="imgRight" fe-role="Widget">
+        <img src="./assets/img/forward.png" />
+    </div>
+	<div class="goback" fe-role="Widget">
+		<img src="assets/img/goback.png" />
+	</div>
 </div>

+ 3 - 0
src/res/tpl/LessonScene.tpl

@@ -8,4 +8,7 @@
 		<div id="view-content"></div>
 		<div id="view-bottom"></div>
 	</div>
+	<div class="goback" fe-role="Widget">
+		<img src="assets/img/goback.png" />
+	</div>
 </div>

+ 3 - 0
src/res/tpl/ShopCartScene.tpl

@@ -10,4 +10,7 @@
 		<div class="scroll-list" id="shop-cart-wrapper"></div>
 	</div>
 	<div fe-role="Widget" class="send-msg" id="send-msg"></div>
+	<div class="goback" fe-role="Widget">
+		<img src="assets/img/goback.png" />
+	</div>
 </div>

+ 3 - 0
src/res/tpl/TerminalScene.tpl

@@ -4,4 +4,7 @@
 	</div>
 	<ul fe-role="Switch" class="terminal-wrapper clearfix" id="terminal-wrapper"></ul>
 	<div class="terminal-quit" id="terminal-quit" fe-role="Widget" fe-cfg="default_focus:yes"></div>
+	<div class="goback" fe-role="Widget">
+		<img src="assets/img/goback.png" />
+	</div>
 </div>

+ 10 - 1
src/res/tpl/TrainingScene.tpl

@@ -1,3 +1,12 @@
 <div id="TrainingScene" fe-role="Switch">
-  <img id="trainingImg" src="./assets/img/default_bg.jpg" />
+    <img id="trainingImg" src="./assets/img/default_bg.jpg" />
+    <div id="imgLeft" fe-role="Widget">
+        <img src="./assets/img/backward.png" />
+    </div>
+    <div id="imgRight" fe-role="Widget">
+        <img src="./assets/img/forward.png" />
+    </div>
+	<div class="goback" fe-role="Widget">
+		<img src="assets/img/goback.png" />
+	</div>
 </div>

BIN
src/stage/index/assets/img/backward.png


BIN
src/stage/index/assets/img/forward.png


BIN
src/stage/index/assets/img/goback.png


+ 2 - 2
src/stage/index/index.html

@@ -48,7 +48,7 @@
 	<script src="https://cdn.bootcss.com/crypto-js/3.1.9/sha1.min.js"></script>
 	<script src="https://cdn.bootcss.com/crypto-js/3.1.9/md5.min.js"></script>
 	<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
-	<script src="../../lib/js/FocusEngine.min.js"></script>
+	<script src="../../lib/js/FocusEngine.js"></script>
 	<script src="../../lib/js/blitz.js"></script>
 	<script src="../../lib/js/moye.min.js"></script>
 	<script src="../../lib/js/TVUtil.min.js"></script>
@@ -65,7 +65,7 @@
 		document.head.appendChild(appCss);
 
 		var appScript = document.createElement('script');
-		appScript.src = './index.min.js?t=' + ts;
+		appScript.src = './index.js?t=' + ts;
 		document.body.appendChild(appScript);
 	</script>
 	<script>

+ 6 - 0
src/stage/index/scene/CLScene.js

@@ -278,6 +278,12 @@ class CLScene extends scene {
     // 在使用Atv时Id对应:e.target.id
     // 非使用Atv是Id对应:e.target.id
     onOK(e) {
+        // 后退
+        if (e.target.con.classList.contains('goback')) {
+            this.hideScene({});
+            return;
+        }
+
         // 进入购物车场景
         if (e.target.con.classList.contains('shopping-cart-btn-frame')) {
             this.showScene(require('./ShopCartScene.js'), {});

+ 6 - 0
src/stage/index/scene/CourseScene.js

@@ -346,6 +346,12 @@ class CourseScene extends scene {
 	// 在使用Atv时Id对应:e.target.id
 	// 非使用Atv是Id对应:e.target.id
 	onOK(e) {
+        // 后退
+        if (e.target.con.classList.contains('goback')) {
+            this.hideScene({});
+            return;
+        }
+		
 		// 点击某一课
 		if (e.target.con.classList.contains('img-wrapper') || e.target.con.classList.contains('text-wrapper')) {
 			// 课件模版 COURSE_WARE_VIDEO(课视频模版)  COURSE_WARE_LIST(课列表)

+ 5 - 2
src/stage/index/scene/DataBuildingScene.js

@@ -27,8 +27,11 @@ class DataBuildingScene extends scene {
 
     }
 
-    onOk() {
-
+    onOK(e) {
+        if (e.target.con.classList.contains('goback')) {
+            this.hideScene({});
+            return;
+        }
     }
 
     onActive() {

+ 5 - 0
src/stage/index/scene/DownloadManagerScene.js

@@ -181,6 +181,11 @@ class DownloadManagerScene extends scene {
     }
 
     onOK(e) {
+        // 后退
+        if (e.target.con.classList.contains('goback')) {
+            this.hideScene({});
+            return;
+        }
         if(e.target.con.classList.contains('download-del-btn')){
             let lessonID = e.target.con.dataset.id;
             let title = this.lessonItems[lessonID].lessonName;

+ 6 - 0
src/stage/index/scene/GlobalGoodDetailScene.js

@@ -156,6 +156,12 @@ class GlobalGoodDetailScene extends scene {
     // 在使用Atv时Id对应:e.target.id
     // 非使用Atv是Id对应:e.target.id
     onOK(e) {
+        // 后退
+        if (e.target.con.classList.contains('goback')) {
+            this.hideScene({});
+            return;
+        }
+        
         if (e.target.con.classList.contains('item')) {
             let targetId = e.target.id.split('-')[2];
             // targetId = 6;

+ 41 - 2
src/stage/index/scene/ImageWareFullScreenScene.js

@@ -10,9 +10,35 @@ class ImageWareFullScreenScene extends scene {
 		this.curImageIndex = 0;
 	}
 
+	renderLeftRightBtn() {
+		let btnRight = document.getElementById('imgRight');
+		let btnLeft = document.getElementById('imgLeft');
+		// 如果是最后一张,不显示向右按钮
+		if (this.curImageList.length - 1 === this.curImageIndex) {
+			if (btnRight) {
+				btnRight.style.display = 'none';
+			}
+		} else {
+			if (btnRight) {
+				btnRight.style.display = 'block';
+			}
+		}
+		// 如果是第一张,不显示向左按钮
+		if (this.curImageIndex === 0) {
+			if (btnLeft) {
+				btnLeft.style.display = 'none';
+			}
+		} else {
+			if (btnLeft) {
+				btnLeft.style.display = 'block';
+			}
+		}
+	}
+
 	renderImageView() {
 		const curImage = this.curImageList[this.curImageIndex];
 		document.getElementById('wareImg').setAttribute('src', curImage.url);
+		this.renderLeftRightBtn()
 	}
 
 	dynamicChangeWare(wareIndex, type) {
@@ -126,8 +152,21 @@ class ImageWareFullScreenScene extends scene {
 
 	}
 
-	onOK() {
-
+	onOK(e) {
+        // 后退
+        if (e.target.con.classList.contains('goback')) {
+			this.hideScene({
+				curWareIndex: this.curWareIndex,
+				curImageList: this.curImageList,
+				curImageIndex: this.curImageIndex,
+			}, 'LessonScene');
+            return;
+        }
+		if (e.target.id === 'imgLeft') {
+			this.keyLeftHandler();
+		} else if (e.target.id === 'imgRight') {
+			this.keyRightHandler();
+		}
 	}
 
 	onBack() {

+ 13 - 7
src/stage/index/scene/LessonScene.js

@@ -479,7 +479,12 @@ class LessonScene extends scene {
         this.isBack = true;
     }
 
-    onOK() {
+    onOK(e) {
+        // 后退
+        if (e.target.con.classList.contains('goback')) {
+            this.hideScene({id: this.courseId}, 'CourseScene');
+            return;
+        }
     	const leaf = FocusEngine.getFocusedLeaf();
         // 拦截音频控制相关事件单独处理
         if (leaf.id && leaf.id.startsWith('audio')) {
@@ -511,13 +516,14 @@ class LessonScene extends scene {
                 } else if (this.curWareType === Consts.TYPE_VIDEO) {
                     let video = document.getElementById('hls-video');
                     if (video) {
-                        document.getElementById('view-content').removeChild(video);
+                        video.webkitRequestFullScreen();
+                        // document.getElementById('view-content').removeChild(video);
                     }
-                    this.showScene(require('./VideoWareFullScreenScene.js'), {
-                        isFull: true,
-                        wareList: this.wareList,
-                        curWareIndex: this.curWareIndex,
-                    });
+                    // this.showScene(require('./VideoWareFullScreenScene.js'), {
+                    //     isFull: true,
+                    //     wareList: this.wareList,
+                    //     curWareIndex: this.curWareIndex,
+                    // });
                 } else if (this.curWareType === Consts.TYPE_AUDIOBOOK) {
                     // 全屏前移除audio标签
                     let audio = document.getElementById('courseware-audio');

+ 6 - 0
src/stage/index/scene/ShopCartScene.js

@@ -163,6 +163,12 @@ class ShopCartScene extends scene {
 	// 在使用Atv时Id对应:e.target.id
 	// 非使用Atv是Id对应:e.target.id
 	onOK(e) {
+        // 后退
+        if (e.target.con.classList.contains('goback')) {
+            this.hideScene({});
+            return;
+        }
+		
 		if (e.target.con.id == 'send-msg' && this.goodsArr.length) {
 			this.showScene(require('./ShopCartCheckScene.js'), { id: 0 });
 		} else if (e.target.con.classList.contains('del')) {

+ 6 - 0
src/stage/index/scene/TerminalScene.js

@@ -60,6 +60,12 @@ class TerminalScene extends scene {
 	// 在使用Atv时Id对应:e.target.id
 	// 非使用Atv是Id对应:e.target.id
 	onOK(e) {
+        // 后退
+        if (e.target.con.classList.contains('goback')) {
+            this.hideScene({});
+            return;
+        }
+		
 		if (e.target.con.classList.contains('terminal-quit')) {
 			APIClient.userLogoutAndUnbindDevice((isTrue, res) => {
 				if (!isTrue) { return; }

+ 37 - 2
src/stage/index/scene/TrainingScene.js

@@ -8,6 +8,31 @@ class TrainingScene extends scene {
         this.curImageIndex = 0;
 	}
 
+	renderLeftRightBtn() {
+		let btnRight = document.getElementById('imgRight');
+		let btnLeft = document.getElementById('imgLeft');
+		// 如果是最后一张,不显示向右按钮
+		if (this.imageList.length - 1 === this.curImageIndex) {
+			if (btnRight) {
+				btnRight.style.display = 'none';
+			}
+		} else {
+			if (btnRight) {
+				btnRight.style.display = 'block';
+			}
+		}
+		// 如果是第一张,不显示向左按钮
+		if (this.curImageIndex === 0) {
+			if (btnLeft) {
+				btnLeft.style.display = 'none';
+			}
+		} else {
+			if (btnLeft) {
+				btnLeft.style.display = 'block';
+			}
+		}
+	}
+
     loadTrainingContent(trainingId, index) {
         APIClient.getTrainingDetail(trainingId, (isTrue, res) => {
             if (!isTrue) { return; }
@@ -25,6 +50,7 @@ class TrainingScene extends scene {
     renderImageView() {
         const curImage = this.imageList[this.curImageIndex];
         document.getElementById('trainingImg').setAttribute('src', Consts.IMG_PATH + '/' + curImage);
+		this.renderLeftRightBtn();
     }
 
 	keyRightHandler() {
@@ -74,8 +100,17 @@ class TrainingScene extends scene {
 
 	}
 
-	onOK() {
-
+	onOK(e) {
+        // 后退
+        if (e.target.con.classList.contains('goback')) {
+			this.hideScene({});
+            return;
+        }
+		if (e.target.id === 'imgLeft') {
+			this.keyLeftHandler();
+		} else if (e.target.id === 'imgRight') {
+			this.keyRightHandler();
+		}
 	}
 
 	onBack() {

+ 2 - 1
src/stage/index/scene/VideoWareFullScreenScene.js

@@ -125,6 +125,7 @@ class VideoWareFullScreenScene extends scene {
         } else {
     		const videoDom = `<video id="hls-full-video" controls>你的浏览器不支持视频播放</video>`;
     		document.getElementById('VideoWareFullScreen').innerHTML = videoDom;
+            this.moye.root.reRender();
     		this.videoPlayer = new HlsVideoPlugin();
     		this.videoPlayer.initH5Player(playUrl, 'hls-full-video');
         }
@@ -164,7 +165,7 @@ class VideoWareFullScreenScene extends scene {
 
     }
 
-    onOK() {
+    onOK(e) {
         if (this.videoPlayer.playStatus()) {
             this.videoPlayer.pause();
         } else {

+ 30 - 10
src/stage/index/style/ImageWareFullScreen.less

@@ -10,16 +10,36 @@
 	background-repeat: no-repeat;
 }
 #imgLeft {
-  position: absolute;
-  top: 5rem;
-  left: 0.5rem;
-  display: none;
-  z-index: 2;
+	position: absolute;
+	top: 5rem;
+	left: 0.15rem;
+	width: .77rem;
+	height: .78rem;
+	z-index: 2;
+	border: solid unit(@borderSize, rem) transparent;
+	border-radius: 50%;
+	img {
+		width: 100%;
+		height: 100%;
+	}
+	&.fe-focus {
+		border: solid unit(@borderSize, rem) #ffe100;
+	}
 }
 #imgRight {
-  position: absolute;
-  top: 5rem;
-  right: 0.5rem;
-  display: none;
-  z-index: 2;
+	position: absolute;
+	top: 5rem;
+	right: 0.15rem;
+	z-index: 2;
+	width: .87rem;
+	height: .88rem;
+	border: solid unit(@borderSize, rem) transparent;
+	border-radius: 50%;
+	img {
+		width: 100%;
+		height: 100%;
+	}
+	&.fe-focus {
+		border: solid unit(@borderSize, rem) #ffe100;
+	}
 }

+ 2 - 2
src/stage/index/style/LessonScene.less

@@ -24,7 +24,7 @@
 
 	#list {
 		position: absolute;
-		top: 1.7rem;
+		top: 1.6rem;
 		left: 0.7rem;
 		width: 7.2rem;
 		height: 8.15rem;
@@ -94,7 +94,7 @@
 
 	#view {
 		position: absolute;
-		top: 1.7rem;
+		top: 1.6rem;
 		left: 7.9rem;
 		width: 10.72rem;
 		height: 8.15rem;

+ 18 - 0
src/stage/index/style/Mixins.less

@@ -29,3 +29,21 @@
 	box-shadow: .03rem .03rem unit(@boxShadowSize, rem) @boxShadowColor;
 	z-index: 9999;
 }
+
+.goback {
+	z-index: 99999;
+	position: absolute;
+	width: .93rem;
+	height: .94rem;
+	bottom: .1rem;
+	right: .15rem;
+	border: solid unit(@borderSize, rem) transparent;
+	border-radius: 50%;
+	img {
+		width: 100%;
+		height: 100%;
+	}
+	&.fe-focus {
+		border: solid unit(@borderSize, rem) #ffe100;
+	}
+}

+ 34 - 0
src/stage/index/style/TrainingScene.less

@@ -9,3 +9,37 @@
 	background-size: 100% 100%;
 	background-repeat: no-repeat;
 }
+#imgLeft {
+	position: absolute;
+	top: 5rem;
+	left: 0.15rem;
+	width: .77rem;
+	height: .78rem;
+	z-index: 2;
+	border: solid unit(@borderSize, rem) transparent;
+	border-radius: 50%;
+	img {
+		width: 100%;
+		height: 100%;
+	}
+	&.fe-focus {
+		border: solid unit(@borderSize, rem) #ffe100;
+	}
+}
+#imgRight {
+	position: absolute;
+	top: 5rem;
+	right: 0.15rem;
+	z-index: 2;
+	width: .87rem;
+	height: .88rem;
+	border: solid unit(@borderSize, rem) transparent;
+	border-radius: 50%;
+	img {
+		width: 100%;
+		height: 100%;
+	}
+	&.fe-focus {
+		border: solid unit(@borderSize, rem) #ffe100;
+	}
+}

+ 1 - 0
src/util/API/AJAXHelper.js

@@ -64,6 +64,7 @@ class AJAXHelper {
 		xmlHttpReq.setRequestHeader('terminal', platform);
 		xmlHttpReq.setRequestHeader('merchant', 'baby');
 		xmlHttpReq.setRequestHeader('requestId', requestId);
+		xmlHttpReq.setRequestHeader('merchant', 'baby');
 		xmlHttpReq.setRequestHeader('Authentication', sign); //header中增加Authentication以兼容老版本
 		xmlHttpReq.setRequestHeader('Content-Type', 'application/' + (method == 'POST' || method == 'PUT' ? 'json' : 'text'));
 		//构造请求体