浏览代码

快手创意管理选作品上传弹窗调整

刘政和 5 年之前
父节点
当前提交
f9e5b730bc
共有 1 个文件被更改,包括 129 次插入50 次删除
  1. 129 50
      src/views/modules/kuaishouapp/creativeCreate.vue

+ 129 - 50
src/views/modules/kuaishouapp/creativeCreate.vue

@@ -103,7 +103,7 @@
         v-if="selectVideoUpload"
         :labelCol="labelCol"
         :wrapperCol="wrapperCol">
-        <a-select
+        <!-- <a-select
           v-model="videoUrl"
           @change="getDescription"
           showSearch
@@ -116,7 +116,45 @@
           <a-select-option v-for="video in videoList" :key="video.localUrl" :value="video.localUrl">
             {{video.videoName}}
           </a-select-option>
-        </a-select>
+        </a-select> -->
+        
+        <!-- 修改为弹窗形式 -->
+        <div>
+          <a type="primary" @click="showModalVideo">点击选中已上传作品</a>
+          <a-modal
+            title="选择作品"
+            v-model="visibleVideo"
+            @ok="handleOkVideo"
+            :width="860"
+            @cancel="handleCancelVideo"
+          >
+            <!-- <template>
+              <div class="image_item_container video_item_container">
+                    <div class="image_item" v-for="(video,index) of videoList" :key="index">
+                        <video class="video" :src="video.localUrl" controls="controls" id="video">
+                        您的浏览器不支持 video 标签。
+                        </video>
+                        <div class="item_text">{{video.videoName}}</div>
+                        <a-checkbox @change="onChange" class="checkItem"   :value="video.localUrl"
+                            @onClick="checkeda(video.id)" :key="video.localUrl">
+                        </a-checkbox>
+                    </div>
+              </div>
+            </template> -->
+            <template>
+                <a-radio-group @change="onChange" v-model="videoUrl" class="image_item_container">
+                    <div class="image_item" v-for="(video,index) of videoList" :key="index">
+                        <video class="video" :src="video.localUrl" controls="controls" id="video" style="width
+                        100%">
+                        您的浏览器不支持 video 标签。
+                        </video>
+                        <div class="item_text">{{video.videoName}}</div>
+                        <a-radio :style="radioStyle" :value="video.localUrl"></a-radio>
+                    </div>
+                </a-radio-group>
+            </template>
+          </a-modal>
+        </div>
       </a-form-item>
 
 
@@ -152,22 +190,6 @@
       </a-form-item>
 
 
-      <!-- <a-select
-          v-model="imageUrl"
-          showSearch
-          allowClear
-          mode="multiple"
-          placeholder="选择视频封面"
-          optionFilterProp="children"
-          style="width: 650px"
-          @focus="handleFocus"
-          @blur="handleBlur"
-          :filterOption="filterOption">
-          <a-select-option v-for="image in imageList" :key="image.localUrl" :value="image.localUrl">
-            {{image.imageName}}
-          </a-select-option>
-        </a-select>-->
-
       <a-form-item
         v-if="showCover"
         label="选择封面"
@@ -175,7 +197,7 @@
         :wrapperCol="wrapperCol">
         <div>
           <a type="primary" @click="showModal">点击选中已上传封面</a>
-          <a-modal class="select_cover_modal"
+          <a-modal
             title="选择封面"
             v-model="visible"
             @ok="handleOk"
@@ -324,6 +346,11 @@
         selectVideoUpload: true,
         videoUrl: '',// 视频id
         videoList: [],
+        radioStyle: { // 视频单选样式
+            display: 'block',
+            height: '30px',
+            lineHeight: '30px',
+        },
         showUploadType: true,
         localImageUrl: '',//图片地址
         showImageUpload: false,
@@ -339,6 +366,7 @@
         showLocalImageUpload: false,
         showUploadImageRadio: true,
         visible: false,
+        visibleVideo: false,
         isAllChecked: false,
         checkeds: [],
         customDomain: '',
@@ -395,6 +423,7 @@
         console.log(e);
         this.visible = false;
         this.imageUrl = [];
+        this.videoList = [];
         if (this.checkeds.length > 0) {
           for (let i = 0; i < this.checkeds.length; i++) {
             let imageId = this.checkeds[i];
@@ -409,7 +438,52 @@
         }
       },
       showModal() {
-        this.visible = true
+            this.visible = true;
+      },
+
+      // 上传视频弹窗
+      handleOkVideo(e) {
+        console.log(e);
+        console.log(this.videoUrl);
+        this.visibleVideo = false;
+        
+        this.closeAllVideoFun();
+        
+      },
+      showModalVideo() {
+        this.visibleVideo = true;
+
+        // 设置默认选中的视频
+        this.videoUrl = this.videoList[0].localUrl;
+        console.log(this.videoUrl);
+
+        jq(document).ready(function () {
+            // 播放当前视频停止其他视频
+            let videos = jq("video");
+            function pauseAll() {
+                let self = this;
+                [].forEach.call(videos, (i)=> {
+                    // 将 videos 中其他的 video 全部暂停
+                    i !== self && i.pause();
+                });
+            };
+            // 给play事件绑定暂停函数
+            [].forEach.call(videos, (i)=> {
+                i.addEventListener("play", pauseAll.bind(i));
+            });
+        });
+      },
+      handleCancelVideo(){
+          this.closeAllVideoFun();
+      },
+
+      // 停止播放所有视频
+      closeAllVideoFun(){
+          let videos = jq("video");
+          let videosArr = Array.prototype.slice.call(videos);
+          videosArr.forEach((x)=>{
+              x.pause();
+          });
       },
 
       changChecked() {
@@ -575,7 +649,7 @@
       handleSubmit(e) {
         console.log(this.imageIds);
         console.log(this.imageUrl)
-        console.log(this.localUrl)
+        
         e.preventDefault()
         this.form.validateFields((err, values) => {
           if (!err) {
@@ -594,6 +668,9 @@
             } else if (this.videoUploadType == '2') {
               params.videoUrl = this.localUrl;
             }
+                        console.log("-----------------------");
+
+            console.log(params.videoUrl);
             params.imageUrl = this.imageUrl;
             console.log(this.imageUrl)
             params.actionBarText = this.actionBarTextDesc;
@@ -658,9 +735,9 @@
           this.options = res
           console.log(res)
         });
-      }
-    }
-    ,
+      },
+
+    },
 
     created: function () {
       let params = {};
@@ -703,31 +780,33 @@
 
 
 <style lang="scss">
-.select_cover_modal {
-        .ant-modal-body {
-            height: 650px;
-            overflow-y: scroll;
-            .image_item_container{
-                margin: 0 -10px;
-                .image_item {
-                    display: inline-block;
-                    width: 20%;
-                    padding: 0 10px;
-                    box-sizing: border-box;
-                    margin-bottom: 20px;
-                    .label_item {
-                        display: block;
-                        cursor: pointer;
-                    }
-            
-                    .item_img {
-                        width: 100%;
-                        margin-bottom: 10px;
-                    }
-                    .item_text{height: 42px;overflow: hidden;margin-bottom: 0;}
-                    .item_checkbox{margin-bottom: 0;}
-                }
+.ant-modal-body {
+    height: 650px;
+    overflow-y: scroll;
+    .image_item_container{
+        margin: 0 -10px;
+        .image_item {
+            display: inline-block;
+            width: 20%;
+            padding: 0 10px;
+            box-sizing: border-box;
+            margin-bottom: 20px;
+            .label_item {
+                display: block;
+                cursor: pointer;
             }
-        } 
-}
+    
+            .item_img {
+                width: 100%;
+                margin-bottom: 10px;
+            }
+            .item_text{height: 42px;overflow: hidden;margin-bottom: 0;}
+            .item_checkbox{margin-bottom: 0;}
+            .video{width:100%;}
+        }
+    }
+    .video_item_container{
+        .video{width: 100%;}
+    }
+} 
 </style>