Browse Source

Merge remote-tracking branch 'origin/master'

syh 5 years ago
parent
commit
31b580d610
1 changed files with 94 additions and 74 deletions
  1. 94 74
      src/views/modules/kuaishouapp/creativeCreate.vue

+ 94 - 74
src/views/modules/kuaishouapp/creativeCreate.vue

@@ -117,7 +117,7 @@
             {{video.videoName}}
           </a-select-option>
         </a-select> -->
-        
+
         <!-- 修改为弹窗形式 -->
         <div>
           <a type="primary" @click="showModalVideo">点击选中已上传作品</a>
@@ -129,15 +129,15 @@
             @cancel="handleCancelVideo"
           >
             <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">
-                        您的浏览器不支持 video 标签。
-                        </video>
-                        <div class="item_text">{{video.videoName}}</div>
-                        <a-radio :style="radioStyle" :value="video.localUrl"></a-radio>
-                    </div>
-                </a-radio-group>
+              <a-radio-group @change="getDescription" 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">
+                    您的浏览器不支持 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>
@@ -194,19 +194,19 @@
               <br/>
               <br/>
               <div class="image_item_container">
-                  <div v-for="(item ,index) in imageList" class="image_item" :key="index">
-                    <label :for="item.id" class="label_item">
+                <div v-for="(item ,index) in imageList" class="image_item" :key="index">
+                  <label :for="item.id" class="label_item">
                     <img :src="item.src" alt="" class="item_img">
                     <p class="item_text">{{item.name}}</p>
                     <p class="item_checkbox">
-                        <input class="checkItem" type="checkbox" v-model="checkeds" :value="item.id"
-                            @onClick="checkeda(item.id)"
-                            @change="changChecked" :id="item.id">
+                      <input class="checkItem" type="checkbox" v-model="checkeds" :value="item.id"
+                             @onClick="checkeda(item.id)"
+                             @change="changChecked" :id="item.id">
                     </p>
-                    </label>
+                  </label>
                 </div>
               </div>
-              
+
             </template>
           </a-modal>
         </div>
@@ -333,9 +333,9 @@
         videoUrl: '',// 视频id
         videoList: [],
         radioStyle: { // 视频单选样式
-            display: 'block',
-            height: '30px',
-            lineHeight: '30px',
+          display: 'block',
+          height: '30px',
+          lineHeight: '30px',
         },
         showUploadType: true,
         localImageUrl: '',//图片地址
@@ -423,7 +423,7 @@
         }
       },
       showModal() {
-            this.visible = true;
+        this.visible = true;
       },
 
       // 上传视频弹窗
@@ -431,44 +431,43 @@
         console.log(e);
         console.log(this.videoUrl);
         this.visibleVideo = false;
-        
+
         this.closeAllVideoFun();
-        
+
       },
       showModalVideo() {
         this.visibleVideo = true;
 
         // 设置默认选中的视频
-        this.videoUrl = this.videoList[0].localUrl;
-
         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));
+          // 播放当前视频停止其他视频
+          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();
-          this.videoUrl = "";
+      handleCancelVideo() {
+        this.closeAllVideoFun();
+        this.videoUrl = "";
       },
 
       // 停止播放所有视频
-      closeAllVideoFun(){
-          let videos = jq("video");
-          let videosArr = Array.prototype.slice.call(videos);
-          videosArr.forEach((x)=>{
-              x.pause();
-          });
+      closeAllVideoFun() {
+        let videos = jq("video");
+        let videosArr = Array.prototype.slice.call(videos);
+        videosArr.forEach((x) => {
+          x.pause();
+        });
       },
 
       changChecked() {
@@ -578,6 +577,9 @@
           getAction(this.url.videoListUrl, params).then((res) => {
             if (res.success) {
               this.videoList = res.result.records
+              if (this.videoList.length > 0) {
+                this.videoUrl = this.videoList[0].localUrl;
+              }
             }
           });
           getAction(this.url.imageListUrl, params).then((res) => {
@@ -634,7 +636,7 @@
       handleSubmit(e) {
         console.log(this.imageIds);
         console.log(this.imageUrl)
-        
+
         e.preventDefault()
         this.form.validateFields((err, values) => {
           if (!err) {
@@ -653,7 +655,7 @@
             } else if (this.videoUploadType == '2') {
               params.videoUrl = this.localUrl;
             }
-                        console.log("-----------------------");
+            console.log("-----------------------");
 
             console.log(params.videoUrl);
             params.imageUrl = this.imageUrl;
@@ -744,8 +746,9 @@
       getAction(this.url.videoListUrl, params).then((res) => {
         if (res.success) {
           this.videoList = res.result.records
-          console.log("......")
-          console.log(this.videoList)
+          if (this.videoList.length > 0) {
+            this.videoUrl = this.videoList[0].localUrl;
+          }
         }
       });
 
@@ -765,33 +768,50 @@
 
 
 <style lang="scss">
-.ant-modal-body {
+  .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%;}
+
+    .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%;}
+
+    .video_item_container {
+      .video {
+        width: 100%;
+      }
     }
-} 
+  }
 </style>