交互视频提交

src/components/pages/interVideo/index.vue

@@ -18,12 +18,19 @@
                     <div class="content" v-else>请上传视频</div>
                 </div>
                 <div class="settingBox" v-if="this.json.video">
+										<div class="settingName">
+											<span class="title">视频名称</span>
+											<el-input class="settingInput" v-model="json.name" @input="changeVideoName"></el-input>
+										</div>
                     <div class="settingBtn">
                         <span class="title">交互设置</span>
-                        <el-button type="primary" size="small" @click="addSetting">添加</el-button>
+                        <el-button type="primary" size="small" @click="addSetting">添加hiding</el-button>
                     </div>
                     <div class="settingContent">
-                        <div class="setting_b" v-for="(item, index) in json.setting" :key="index">
+                        <div class="setting_b" v-for="(item, index) in json.setting">
+														<!-- <div class="time_box">
+                                <span>序号：{{ index+1 }}</span>
+                            </div> -->
                             <div class="time_box">
                                 <span>触发时间：</span>
                                 <el-input-number v-model="item.time" :controls="false" :min="1" placeholder="视频第几秒"
@@ -31,8 +38,10 @@
                             </div>
                             <div class="setting_fool">
                                 <span>工具设置：</span>
-                                <el-button type="primary" size="mini" @click="setting(index)">{{ item.tool.tool ? "已设置" :
-                                    "插入工具" }}</el-button><el-button type="text" size="mini" @click="deleteSetting(index)" style="color:#818181">删除</el-button>
+                                <el-button type="primary" size="mini" @click="setting(index)">{{ item.tool.tool ? "已设置" : "插入工具" }}</el-button>
+																<!-- <el-button type="primary" size="mini">上移</el-button>
+																<el-button type="primary" size="mini">下移</el-button> -->
+																<el-button type="text" size="mini" @click="deleteSetting(index)" style="color:#818181">删除</el-button>
                             </div>
                             <!-- <div>
                                 <el-button type="primary" size="mini" @click="deleteSetting(index)">删除</el-button>
@@ -139,6 +148,10 @@ export default {
             this.$emit("update:dialogVisibleVideo", false)
         },
         addV() {
+						if(!this.json.name){
+							this.$message.error("请输入视频名称");
+							return;
+						}
             if (!this.json.video) {
                 this.$message.error("请上传视频")
                 return;
@@ -204,12 +217,20 @@ export default {
         changeTime(time, index) {
             if (time > this.videoTime) {
                 this.$message.error("设置时间不能大于视频播放时长")
-                this.$nextTick(() => {
+                return this.$nextTick(() => {
                     this.json.setting[index].time = 1
                     this.$forceUpdate();
                 })
             }
+						// 排序
+						this.json.setting.sort((a, b) => {
+						  return a.time - b.time;
+						})
+						this.$forceUpdate();
         },
+				changeVideoName(e){
+					this.$forceUpdate();
+				},
         addSetting() {
             this.json.setting.push({
                 time: "",
@@ -218,6 +239,11 @@ export default {
                     toolJson: {}
                 }
             })
+						// 排序
+						this.json.setting.sort((a, b) => {
+						  return a.time - b.time;
+						})
+						this.$forceUpdate();
         },
         deleteSetting(index) {
             this
@@ -308,7 +334,9 @@ export default {
                         if (err) {
                             _this.$message.error("上传失败");
                         } else {
+													
                             _this.json.video = data.Location;
+														_this.json.name = data.key;//视频名称
                             _this.playerO = JSON.parse(JSON.stringify(_this.playerOptions));
                             _this.playerO.sources[0].src = data.Location
                             _this.$nextTick(() => {
@@ -398,6 +426,22 @@ export default {
     margin-top: 20px;
 }
 
+.settingName{
+	display: flex;
+	align-items: center;
+	margin-bottom: 10px;
+}
+
+.settingName>.title{
+	font-size: 22px;
+	margin-right: 10px;
+	color:#222;
+}
+
+.settingName>.settingInput{
+	width: 90%;
+}
+
 .settingBtn {
     display: flex;
     align-items: center;