优化修改视频体验和视频信息显示

src/frontend/views/my-course/edit.php

@@ -41,25 +41,23 @@ AppAsset::addCss($this, '@web/assets/css/course_publish.css');
 		<teachers init-teachers="<?=join(',', $teacherIds)?>"></teachers>
 	</div>
 
-	<?php if ($sourceEditable) { ?>
 	<div class="cls-part">
-		<div class="tit">更换视频 <span class="text-info" style="font-size:12px;">不选择则继续使用现有视频</span></div>
-		<video-upload uptoken="<?=$videoToken?>" text="保留原视频或选择要更换的视频"></video-upload>
-	</div>
-	<?php } else { ?>
-	<div class="cls-part">
-		<div class="tit">视频信息</div>
-		<div>
+		<div class="tit">视频文件</div>
+		<div v-if="dynamicVideo==null">
 			<div class="upload-ready">
-				<div class="video-detail" style="margin-top:0;">
-					视频时长：<?=Utils::humanSeconds($lesson->time)?><br>
-					原始大小：<?=Utils::byteConvert($lesson->size)?><br>
-					原始格式：<?=$lesson->format?><br>
+				<h3>原有视频.<?=$lesson->format?></h3>
+				<div class="video-detail" style="margin-top:15px;">
+					视频大小: <?=Utils::byteConvert($lesson->size)?> &nbsp;
+					时长: <?=Utils::humanSeconds($lesson->time)?>
 				</div>
+				<i class="upload-progress" style="width:100%"></i>
+				<?php if ($sourceEditable) { ?>
+				<a href="javascript:;" class="delete" title="删除当前视频" @click="removeVideoClick"><i class="icon-cross"></i></a>
+				<?php } ?>
 			</div>
 		</div>
+		<component :is="dynamicVideo" uptoken="<?=$videoToken?>"></component>
 	</div>
-	<?php } ?>
 
 	<div class="cls-part">
 		<div class="tit">规则设定</div>

src/frontend/web/css/style.css

@@ -969,8 +969,11 @@ textarea.input-r-control {
     height: 90px;
     border-radius: 3px;
     border: 1px solid #e7e7e7;
+    overflow: hidden;
     padding: 10px;
     margin-top: 10px;
+    position:relative;
+    z-index:2;
 }
 
 .upload-ready h3 {
@@ -978,6 +981,9 @@ textarea.input-r-control {
     color: #333;
     font-weight: normal;
     margin: 0;
+    overflow:hidden;
+    white-space:nowrap;
+    text-overflow:ellipsis;
 }
 
 .upload-ready .video-detail {
@@ -995,10 +1001,7 @@ textarea.input-r-control {
     position: absolute;
     left: 0;
     bottom: 0;
-    display: inline-block;
-    width: 200px;
     height: 3px;
-    border-radius: 0 0 0 3px;
     background-color: #4285f4;
 }
 

src/frontend/web/js/components/uploader/video-upload.vue

 <template xmlns:v-bind="http://www.w3.org/1999/xhtml">
     <div>
-        <div class="upload-video-btn" v-bind:id="uploaderId" v-show="state=='ready' || state=='error'">
+        <div class="upload-video-btn" v-bind:id="uploaderId" v-show="state=='ready' || state=='error'" style="cursor:pointer;">
             <i class="icon-play"></i>
-            <b>{{text}}</b>
+            <b>上传视频</b>
         </div>
-
         <div class="upload-ready" v-else>
             <h3>{{videoName}}</h3>
             <div class="video-detail">
@@ -23,11 +22,6 @@
         </div>
     </div>
 </template>
-<style>
-.upload-video-btn {cursor:pointer;}
-.upload-ready {position:relative; z-index:2;}
-.upload-ready h3 {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
-</style>
 <script>
 import filesize from "file-size";
 import layer from "layer-js";
@@ -48,11 +42,7 @@ export default {
         }
     },
     props: {
-        uptoken: String,
-        text: {
-            type: String,
-            default: "上传视频"
-        }
+        uptoken: String
     },
     methods: {
         cancelClick: function() {

src/frontend/web/js/my-course/edit.js

@@ -19,13 +19,20 @@ var vm = new Vue({
 	data: {
 		vuid: "",
 		previewKey: "",
-		tmp: str.rand(20)
+		tmp: str.rand(20),
+		dynamicVideo: null
 	},
 	components: {
 		videoUpload: videoUpload,
 		thumbUpload: thumbUpload,
 		teachers: teacherQuickList
 	},
+	methods: {
+		removeVideoClick: function() {
+			this.dynamicVideo = "videoUpload";
+			this.vuid = "";
+		}
+	},
 	ready: function() {
 		var self = this;
 
@@ -74,7 +81,11 @@ var vm = new Vue({
 		});
 
 		var validator = $(form).validate(opt);
-		var doValidate = function() { validator.form(); };
+		var doValidate = function() {
+			self.$nextTick(function() {
+				validator.form();
+			});
+		};
 
 		this.$watch("vuid", doValidate);
 		this.$watch("previewKey", doValidate);

src/frontend/web/js/my-course/publish.js

@@ -66,7 +66,11 @@ var vm = new Vue({
 		});
 
 		var validator = $(form).validate(opt);
-		var doValidate = function() { validator.form(); };
+		var doValidate = function() {
+			self.$nextTick(function() {
+				validator.form();
+			});
+		};
 
 		this.$watch("vuid", doValidate);
 		this.$watch("previewKey", doValidate);

src/frontend/web/js/my-course/validate-option.js

@@ -46,7 +46,7 @@ module.exports = {
 				var org = element.get(0);
 				var to = null;
 
-				if (create && org == form.vuid) {
+				if (org == form.vuid) {
 					to = $(".upload-video-btn").get(0);
 				} else if (org == form.preview) {
 					to = $(".upload-video-screen").get(0);

ui/html/css/style.css

@@ -806,14 +806,20 @@ textarea.input-r-control {
     height: 90px;
     border-radius: 3px;
     border: 1px solid #e7e7e7;
+    overflow: hidden;
     padding: 10px;
     margin-top: 10px;
+    position:relative;
+    z-index:2;
 }
 .upload-ready h3 {
     font-size: 14px;
     color: #333;
     font-weight: normal;
     margin: 0;
+    overflow:hidden;
+    white-space:nowrap;
+    text-overflow:ellipsis;
 }
 .upload-ready .video-detail {
     color: #999;
@@ -824,14 +830,11 @@ textarea.input-r-control {
     font-size: 12px;
     padding-top: 8px;
 }
-.upload-ready i {
+.upload-ready > i {
     position: absolute;
     left: 0;
     bottom: 0;
-    display: inline-block;
-    width: 200px;
     height: 3px;
-    border-radius: 0 0 0 3px;
     background-color: #4285f4;
 }
 .cls-intro-textarea {