浏览代码

Merge remote-tracking branch 'origin/master'

syh 5 年之前
父节点
当前提交
0ac85113ce

+ 132 - 35
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,31 @@
           <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>
+                <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>
+            </template>
+          </a-modal>
+        </div>
       </a-form-item>
 
 
@@ -152,22 +176,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="选择封面"
@@ -180,23 +188,25 @@
             v-model="visible"
             @ok="handleOk"
             :width="860"
-            style="height:650px;overflow-y:auto"
           >
             <template>
-              <input v-model='isAllChecked' type="checkbox" @click="checkAll($event)"> 全选
+              <input v-model='isAllChecked' type="checkbox" @click="checkAll($event)" class="select_all"> 全选
               <br/>
               <br/>
-              <div v-for="(item ,index) in imageList" style="display:inline-block;width:20%">
-                <a href="javascript:">
-                  <img :src="item.src" alt="" height="100">&nbsp;&nbsp;&nbsp;
-                  <p>{{item.name}}</p>
-                  <p>
-                    <input class="checkItem" type="checkbox" v-model="checkeds" :value="item.id"
-                           @onClick="checkeda(item.id)"
-                           @change="changChecked">
-                  </p>
-                </a>
+              <div class="image_item_container">
+                  <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">
+                    </p>
+                    </label>
+                </div>
               </div>
+              
             </template>
           </a-modal>
         </div>
@@ -322,6 +332,11 @@
         selectVideoUpload: true,
         videoUrl: '',// 视频id
         videoList: [],
+        radioStyle: { // 视频单选样式
+            display: 'block',
+            height: '30px',
+            lineHeight: '30px',
+        },
         showUploadType: true,
         localImageUrl: '',//图片地址
         showImageUpload: false,
@@ -337,6 +352,7 @@
         showLocalImageUpload: false,
         showUploadImageRadio: true,
         visible: false,
+        visibleVideo: false,
         isAllChecked: false,
         checkeds: [],
         customDomain: '',
@@ -407,7 +423,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;
+
+        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();
+          this.videoUrl = "";
+      },
+
+      // 停止播放所有视频
+      closeAllVideoFun(){
+          let videos = jq("video");
+          let videosArr = Array.prototype.slice.call(videos);
+          videosArr.forEach((x)=>{
+              x.pause();
+          });
       },
 
       changChecked() {
@@ -573,7 +634,7 @@
       handleSubmit(e) {
         console.log(this.imageIds);
         console.log(this.imageUrl)
-        console.log(this.localUrl)
+        
         e.preventDefault()
         this.form.validateFields((err, values) => {
           if (!err) {
@@ -592,6 +653,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;
@@ -656,9 +720,9 @@
           this.options = res
           console.log(res)
         });
-      }
-    }
-    ,
+      },
+
+    },
 
     created: function () {
       let params = {};
@@ -698,3 +762,36 @@
   }
 
 </script>
+
+
+<style lang="scss">
+.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>

+ 2 - 2
src/views/modules/kuaishouapp/groupCreate.vue

@@ -150,8 +150,8 @@
         :labelCol="{lg: {span: 7}, sm: {span: 7}}"
         :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
         <a-radio-group v-model="showMode">
-          <a-radio-button value='1'>轮播</a-radio-button>
           <a-radio-button value='2'>优先</a-radio-button>
+          <a-radio-button value='1'>轮播</a-radio-button>
         </a-radio-group>
       </a-form-item>
 
@@ -270,7 +270,7 @@
         scheduleTimeType: '1',
         showScheduleTime: false,
         scheduleTime: '',// 投放时间选择值
-        showMode: '1', // 1 轮播 2 优选
+        showMode: '2', // 1 轮播 2 优选
         bidType: '2',
         showBid: true,
         bid: 0,// bid_type 为 CPC/eCPC 出价

+ 7 - 3
src/views/modules/kuaishouapp/uploadVideo.vue

@@ -41,7 +41,7 @@
       </a-form-item>
 
 
-      <a-form-item
+      <a-form-item class="pic_upload_content"
         label="封面图素材上传"
         :labelCol="{lg: {span: 7}, sm: {span: 7}}"
         :wrapperCol="{lg: {span: 12}, sm: {span: 12} }">
@@ -52,7 +52,7 @@
                        :region="region"
                        :bucket="bucket"
                        :accept="acceptImage"
-                       :max="10"
+                       :max="100"
                        :size="1024000"
                        :accessKeyId="accessKeyId"
                        :accessKeySecret="accessKeySecret"></upload-to-ali>
@@ -163,4 +163,8 @@
       },
     }
   }
-</script>
+</script>
+
+<style lang="scss">
+.pic_upload_content .draggable-list{display: block;}
+</style>