新建直播新增图片修改

src/views/yqrange/create-live.vue

@@ -145,7 +145,7 @@
                 </el-col>
               <el-col :span="16">
                 <!--<div v-for="(item, index) in formData.rtcIntroduces.filter(obj=> obj.type === 2)" :key="index" style="margin-left:0px;min-width: 380px;display: flex;align-items: center">-->
-                <div v-for="(item, index) in formData.rtcIntroducesImages" :key="index" style="margin-left:0px;min-width: 380px;display: flex;align-items: center">
+                <div v-for="(item, index) in rtcIntroducesImages" :key="index" style="margin-left:0px;min-width: 380px;display: flex;align-items: center">
                 <el-upload
                 class="bg-uploader"
                 action="#"
@@ -163,8 +163,8 @@
                   @click="getIndexIntroduce(index)"/>
               </el-upload>
                 <div class="limit-text" style="font-size: 12px;color: #999;margin-left: 10px;margin-top: -10px;">
-                  <p>限制大小: 100kb</p>
-                  <p>尺寸:750*（不限高度）</p>
+                  <p>限制大小: 2Mb</p>
+                  <p>尺寸:750*（高度<3000）</p>
                   <p>支持jpeg, png格式</p>
                 </div>
                   <!--<img-->
@@ -401,7 +401,6 @@
           preImage: '', // 直播预告图url
           textContent: '', // 直播简介文字版
           imageContent: '',// 直播简介图片版
-          rtcIntroducesImages: [],
           // imgUrl2: '',
           // imgUrl2More: {},
           // imgUrl3: '',
@@ -424,6 +423,7 @@
           }] // 嘉宾
         },
         introTextNum: 0,
+        rtcIntroducesImages: [],
         // imgUrl1: '',
         imgUrl1More: {},
         guestErrFlag: false,
@@ -585,9 +585,9 @@
       beforeUploadPic1(file) {
         let fileLimit = {
           width: 750,
-          height: "",
-          size: 0.1,
-          sizeText: "100k",
+          height: 3000,
+          size: 2,
+          sizeText: "2Mb",
           key: "imageContent",
           more: "imgUrl1More",
           show: "uploadImgMessage1"
@@ -684,14 +684,14 @@
         vm.$message.info('开始上传');
         const isJPG = file.type === 'image/jpeg'
         const isPNG = file.type === 'image/png'
-        const isLt100kb = file.size / 1024 < 100
+        const isLt2M = file.size / 1024 / 1024 < fileLimit.size
         if (!isJPG && !isPNG) {
           vm.$message.error('上传直播简介图片只能是 JPEG或者png 格式!')
           // vm.isDisabledIns = false;
           return;
         }
-        if (!isLt100kb) {
-          vm.$message.error('上传图片大小不能超过 100kb')
+        if (!isLt2M) {
+          vm.$message.error('图片大小不符合规范，请根据规范上传图片')
           // vm.isDisabledIns = false;
           return;
         }
@@ -710,8 +710,8 @@
             }else {
               doUpload(vm,file, getFilePath(file,null), 'preview4', 'progress1', 1).then(function (path) {
                 // vm.cleatBroadcast.liveIntroduceModel[vm.introduceIndex].content = path.fullPath;
-                vm.formData.rtcIntroduces[vm.introduceIndex].content = path.fullPath;
-                vm.formData.rtcIntroduces[vm.introduceIndex].seqNo = vm.introduceIndex+1;
+                vm.rtcIntroducesImages[vm.introduceIndex].content = path.fullPath;
+                vm.rtcIntroducesImages[vm.introduceIndex].seqNo = vm.introduceIndex+1;
                 vm.$message.success('上传成功');
                 // vm.isDisabledIns = false;
               });
@@ -805,13 +805,20 @@
 
           // 公开直播，两个拉流地址都需要
           if(this.formData.scope == "2"){
+            if(this.formData.pullStreamRtmp == "" && this.formData.pullStreamHttp == ""){
+              this.$message.warning("请输入APP拉流地址和H5拉流地址");
+              flag = false;
+              return flag;
+            }
             if(this.formData.pullStreamRtmp == ""){
               this.$message.warning("请输入APP拉流地址");
               flag = false;
+              return flag;
             }
             if(this.formData.pullStreamHttp == ""){
               this.$message.warning("请输入H5拉流地址");
               flag = false;
+              return flag;
             }
           }
           else {
@@ -841,7 +848,7 @@
       },
       // 增加直播简介
       addIntroImage(){
-        let length = this.formData.rtcIntroduces.length;
+        let length = this.rtcIntroducesImages.length;
 
 
         if(length > 5){
@@ -849,18 +856,18 @@
           return;
         }
         this.showIntroImageFlag = true;
-        const  item = {
+        const item = {
           seqNo: length + 1,
-          content: '',
+          content: "",
           type: 2 // 文字
         };
-          this.formData.rtcIntroduces.push(item);
+          this.rtcIntroducesImages.push(item);
 
       },
       // 删除直播简介
       delIntroImage(index, item){
 
-        this.formData.rtcIntroduces.splice(index, 1);
+        this.rtcIntroducesImages.splice(index, 1);
       },
 
 
@@ -1003,7 +1010,7 @@
         this.formData.infoCollect = String(this.formData.infoCollect);
         this.$set(this.formData, 'textContent', "");
         if(this.formData.rtcIntroduces != null){
-          this.formData.rtcIntroducesImages = [];
+          this.rtcIntroducesImages = [];
           for(let i=0;i<this.formData.rtcIntroduces.length;i++) {
             if(this.formData.rtcIntroduces[i].type == "1"){
                 // this.formData.textContent = this.formData.rtcIntroduces[i].content;
@@ -1011,13 +1018,22 @@
                 // break;
             }
             else {
-              this.formData.rtcIntroducesImages.push(this.formData.rtcIntroduces[i]);
+              // this.$set(this.formData, "rtcIntroducesImages", )
+              this.rtcIntroducesImages.push(this.formData.rtcIntroduces[i]);
             }
             // else if(this.formData.rtcIntroduces[i].type == "2"){
             //     // this.formData.imageContent = this.formData.rtcIntroduces[i].content;
             //     this.$set(this.formData, 'imageContent', this.formData.rtcIntroduces[i].content);
             // }
           }
+
+          // this.rtcIntroducesImages = this.formData.rtcIntroduces.filter(function (item) {
+          //   return item.type == "2";
+          // });
+
+
+
+
         }
         // (formData.textContent).replace(/\s+/g,"").length
 
@@ -1047,7 +1063,7 @@
         }
 
         // 直播简介图片版
-        this.formData.rtcIntroduces = this.formData.rtcIntroducesImages;
+        this.formData.rtcIntroduces = this.rtcIntroducesImages;
         // 直播简介文字版
         if(this.formData.textContent != null && this.formData.textContent != ""){
           this.formData.rtcIntroduces.push({type:1,content:this.formData.textContent});

src/views/yqrange/live-manage.vue

@@ -173,17 +173,17 @@
           </el-radio-group>
         </div>
 
-        <div v-if="uploadFlag">
+        <div v-if="uploadFlag" style="line-height: 40px;">
           <div v-if="numberShowFlag">
             <span>存在"{{videoNumber}}段"直播原视频，请下载合并后上传</span>
           </div>
           <div style="margin-left:30px;">
           <span>①下载原视频</span>
 
-          <!--<el-col :span="1">-->
-              <!--<img style="vertical-align: middle" src="../../assets/image/icon_download.png" />-->
+            <!--<el-col :span="1">-->
+
             <!--</el-col>-->
-          <el-button @click="download('model')" style="margin-left: 190px;" size="small" type="text">下载</el-button>
+          <el-button @click="download('model')" size="small" type="text"><img style="vertical-align: middle;margin-left: 150px" src="../../assets/image/icon_download.png" />下载</el-button>
           </div>
 
         <div style="margin-left:30px;">
@@ -195,22 +195,22 @@
             :limit="1"
             :before-upload="beforeVideoUpload">
             <!--<el-col :span="1">-->
-              <!--<img style="vertical-align: middle" src="../../assets/image/icon_upload.png" />-->
+
             <!--</el-col>-->
-            <el-button type="text" size="small" v-if="fileFlag">上传（仅支持mp4）</el-button>
+            <el-button type="text" size="small" v-if="fileFlag"><img style="vertical-align: middle;margin-left: 120px;" src="../../assets/image/icon_upload.png" />上传（仅支持mp4）</el-button>
             <!--<video class="video-mg-url" controls preload :src="cleatBroadcast.liveInfo.mgUrl"></video>-->
             <!-- <img v-if="!cleatBroadcast.liveInfo.mgUrl" class="video-bg-img" src="../../../static/img/small.png"> -->
           </el-upload>
           <el-progress
             :text-inside="true"
-            :stroke-width="16"
+            :stroke-width="28"
             :percentage="uploadProgress1"
             status="success"
             v-show="uploadProgress1 > 0 && uploadProgress1 < 100">
           </el-progress>
           <div v-if="deleteFileFlag">
-            <span>{{playbackForm.videos[0].videoName}}({{videoToSize(playbackForm.videos[0].videoSize, 1)}}M)</span>
-            <el-button @click="delVideo" style="margin-left: 190px;" size="small" type="text">删除</el-button>
+            <span>{{videoToName(playbackForm.videos[0].videoName, 6)}}({{videoToSize(playbackForm.videos[0].videoSize, 1)}}M)</span>
+            <el-button @click="delVideo" style="margin-left: 100px;" size="small" type="text">删除</el-button>
           </div>
           <!--<div v-if="fileFlag">-->
             <!---->
@@ -550,9 +550,25 @@ export default {
      return (fileSize / 1024 / 1024).toFixed(number);
     },
 
+    videoToName(fileName, number){
+      if(fileName != ""){
+        const index = fileName.indexOf(".mp4");
+        const  str = fileName.slice(0, index);
+        if(str.length > number){
+          return str.slice(0,number+1) + "..." + ".mp4";
+        }
+        else {
+          return fileName;
+        }
+      }
+      return fileName;
+
+    },
+
     // 上传视频
     beforeVideoUpload(file){
-      vm.fileFlag = true;
+      vm.fileFlag = false;
+      vm.deleteFileFlag = true;
       // vm.fileName = file.name;
       // if(file.size != null){
       //   vm.fileSize = vm.videoSize(file.size, 1);
@@ -583,7 +599,7 @@ export default {
 
         vm.deleteFileFlag = true;
 
-        vm.$message.success('上传成功')
+        vm.$message.success('上传成功');
       });
     },
 
@@ -657,7 +673,8 @@ export default {
             if(res.code == "000000") {
 
               // if(canPlayback == 0){
-                this.$message.success("关闭成功");
+              vm.$message.success("关闭成功");
+              vm.getLiveList("", "");
 
             } else {
 
@@ -665,7 +682,7 @@ export default {
 
             }
           }).catch((error) => {
-            this.$message.error("请重试");
+            vm.$message.error("请重试");
           })