封面,其他图片新增进度条

src/views/sce/sceInfo/index.vue

@@ -152,11 +152,14 @@
             :on-change="uploadImg"
             :on-success="handleAvatar"
             :before-upload="beforeAvatarUpload"
+            element-loading-text="正在上传..."
+            v-loading="loadingCover"
           >
             <img v-if="ruleForm.cover" :src="ruleForm.cover" class="avatar" />
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
         </el-form-item>
+        <el-progress :percentage="jinduCoverNum" v-if="jinduShowCover" status="success"></el-progress>
         <el-form-item label="其它图片" style="width:100%">
           <div
             v-for="(item, l) in dataImg"
@@ -188,6 +191,8 @@
             list-type="picture-card"
             :show-file-list="false"
             :http-request="changeImgs"
+            element-loading-text="正在上传..."
+            v-loading="loadingOtherImg"
           >
             <i class="el-icon-plus"></i>
           </el-upload>
@@ -221,6 +226,7 @@
             </div>
           </el-upload> -->
         </el-form-item>
+        <el-progress :percentage="jinduOtherImgNum" v-if="jinduShowOtherImg" status="success"></el-progress>
         <h3 class="form-title">剧本简介</h3>
         <el-form-item label="简介" prop="introduction" style="width:100%">
           <!-- <el-input
@@ -971,9 +977,13 @@ export default {
       audioTitle:'',//上传音频标题
       videoTitle:'',//上传音频标题
       jindu:0,
+      jinduCoverNum:0,//封面图片进度
+      jinduOtherImgNum:0,//其他图片进度
       jinduImgNum:0,
       jinduAudioNum:0,
       jinduVideoNum:0,
+      jinduShowCover:false,//封面进度条是否显示
+      jinduShowOtherImg:false,//其他进度条显示
       jinduShowImg:false,
       jinduShowAudio:false,
       jinduShowVideo:false,
@@ -982,6 +992,8 @@ export default {
       videoTime:null,
 
       liuChengLeixingType:'',
+      loadingOtherImg:false,//其他图片加载圈
+      loadingCover:false,//封面加载圈
       loadingAudio: false,
       loadingImg:false,
       baseUrl,
@@ -1665,6 +1677,9 @@ export default {
     },
     //上传图片
     async uploadImg(file, fileList) {
+      this.loadingCover=true;//显示加载
+      this.jinduCoverNum=0;//进度从0开始
+      this.jinduShowCover=true;//显示进度条
       try {
         let formData = new FormData();
         let type = file.raw.type;
@@ -1673,16 +1688,50 @@ export default {
         let res = await uploadFile(formData);
         // this.ruleForm.cover = res.data.wjUrl;
         this.$set(this.ruleForm, "cover", res.data.wjUrl);
+        this.loadingCover=false;
+        clearInterval(this.videoTime); //清除定时器
+        this.videoTime = null; //清除定时器
+        this.successVideo('cover')
       } catch (err) {}
+       let videoJindu1 = setTimeout(() => {
+        this.jinduVideoNum = 30;
+      }, 500);
+      let videoJindu2 = setTimeout(() => {
+        videoJindu1
+        this.jinduVideoNum = 69;
+      }, 1000);
+      this.videoTime = setTimeout(() => {
+        videoJindu2
+        this.jinduVideoNum = 94;
+      }, 1500);
+
     },
     //其他图片
     changeImgs({ file }) {
+      this.loadingOtherImg = true; //显示加载
+      this.jinduOtherImgNum = 0;//进度条从0开始
+      this.jinduShowOtherImg = true; //是否显示进度条
       let formData = new FormData();
       formData.append("file", file);
       formData.append("type", "product");
       uploadFile(formData).then(res => {
         this.dataImg.push(res.data.wjUrl);
+        this.loadingOtherImg = false; //显示加载
+        clearInterval(this.videoTime); //清除定时器
+        this.videoTime = null; //清除定时器
+        this.successVideo('otherImg'); //
       });
+      let videoJindu1 = setTimeout(() => {
+        this.jinduVideoNum = 30;
+      }, 500);
+      let videoJindu2 = setTimeout(() => {
+        videoJindu1
+        this.jinduVideoNum = 80;
+      }, 1000);
+      this.videoTime = setTimeout(() => {
+        videoJindu2
+        this.jinduVideoNum = 90;
+      }, 1500);
     },
     beforeAvatarUpload(file) {
       const isJPG = file.type;
@@ -1946,7 +1995,7 @@ export default {
         });
         this.imgType = true;
         this.loadingImg = false;
-        this.jinduImgNum = 100;
+        // this.jinduImgNum = 100;
         this.jinduShowImg = false;
         clearInterval(this.videoTime);
         this.videoTime = null;
@@ -1984,8 +2033,8 @@ export default {
         });
         this.loadingAudio = false;
         this.musicType = true;
-        this.jinduAudioNum = 100;
-        this.jinduShowAudio = false;
+        // this.jinduAudioNum = 100;
+        // this.jinduShowAudio = false;
         clearInterval(this.videoTime);
         this.videoTime = null;
         this.successVideo('audio');
@@ -2045,6 +2094,18 @@ export default {
     successVideo(type){
       console.log('上传成功');
       switch (type) {
+        case 'cover': //封面
+          this.jinduCoverNum = 100;
+          setTimeout(() => {
+            this.jinduShowCover = false;
+          }, 1200);
+          break;
+        case 'otherImg': //其他图片
+          this.jinduOtherImgNum = 100;
+          setTimeout(() => {
+            this.jinduShowOtherImg = false;
+          }, 1200);
+          break;
         case 'img':
           this.jinduImgNum = 100;
           setTimeout(() => {
@@ -2194,7 +2255,9 @@ export default {
       }
       this.list = item;
       this.typeUrl = type;
-      // this.processId = "";
+      if(this.dialog.title == "新增剧本"){
+        this.processId = "";
+      }
       this.process.Visible = true;
     },
     subMitLc() {