Bladeren bron

快手创建创意添加单张图片的上传方式

刘政和 5 jaren geleden
bovenliggende
commit
94ca3eee71
1 gewijzigde bestanden met toevoegingen van 415 en 74 verwijderingen
  1. 415 74
      src/views/modules/kuaishouapp/creativeCreate.vue

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

@@ -46,6 +46,17 @@
       </a-form-item>
 
       <a-form-item
+        label="贴片类型"
+        v-if="showSinglePicTiepianType"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol">
+        <a-radio-group v-model="singlePicTiepianType" @change="changeSinglePicTiepianTypeFun">
+          <a-radio-button value='1'>竖贴片</a-radio-button>
+          <a-radio-button value='2'>横贴片</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+
+      <a-form-item
         label="视频上传方式"
         v-if="showUploadType"
         :labelCol="labelCol"
@@ -56,6 +67,18 @@
         </a-radio-group>
       </a-form-item>
 
+      <!-- 有单张图,图片上传,图片上传方式 -->
+      <a-form-item
+        label="上传封面"
+        v-if="showUploadSinglePicType"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol">
+        <a-radio-group v-model="changeSinglePicType" @change="changeSinglePicTypeFun">
+          <a-radio-button value='1'>选择封面</a-radio-button>
+          <a-radio-button value='2'>本地上传</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+
 
       <a-form-item
         label="选择本地视频文件进行上传"
@@ -79,7 +102,6 @@
         v-if="selectVideoUpload"
         :labelCol="labelCol"
         :wrapperCol="wrapperCol">
-        <!-- 修改为弹窗形式 -->
         <div>
           <a type="primary" @click="showModalVideo">点击选中已上传作品</a>
           <a-modal
@@ -104,6 +126,81 @@
         </div>
       </a-form-item>
 
+        <!-- 有单张图,视频上传 -->
+      <a-form-item
+        label="选择作品进行上传(有单张)"
+        v-if="hasSinglePicVideoUpload"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol">
+        <div>
+          <a type="primary" @click="showSinglePicModalVideo">点击选中已上传作品</a>
+          <a-modal
+            title="选择作品"
+            v-model="visibleSinglePicVideo"
+            @ok="handleOkSinglePicVideo"
+            :width="860"
+            @cancel="handleCancelSinglePicVideo"
+          >
+            <template>
+              <div>
+                 <a-checkbox-group @change="VideoOnChange" class="checkbox_item_container">
+                     <div class="item_ul">
+                         <div class="item_li" v-for="(video,index) of videoList" :key="index">
+                             <a-col class="item">
+                                <video class="video" :src="video.localUrl" controls="controls" id="video">
+                                    您的浏览器不支持 video 标签。
+                                </video>
+                                <a-checkbox :value="video.localUrl" class="checkbox_item">
+                                    <div class="item_txt">{{video.videoName}}</div>
+                                </a-checkbox>
+                            </a-col>
+                         </div>
+                     </div>
+                </a-checkbox-group>
+                </div>
+            </template>
+          </a-modal>
+        </div>
+      </a-form-item>
+
+      
+
+        <!-- 有单张图,图片上传 -->
+      <a-form-item
+        v-if="hasSinglePicCoverUpload"
+        label="选择封面(有单张)"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol">
+        <div>
+          <a type="primary" @click="showSinglePicCoverModal">点击选中已上传封面</a>
+          <a-modal
+            title="选择封面"
+            v-model="visibleSinglePicCover"
+            @ok="handleOkSinglePicCover"
+            @cancel="handleCancelSinglePicCover"
+            :width="860"
+          >
+            <template>
+            <div>
+                <input v-model='isAllChecked' type="checkbox" @click="checkAll($event)" class="select_all"> 全选
+                <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>
+            </div>
+            </template>
+          </a-modal>
+        </div>
+      </a-form-item>
 
       <a-form-item
         v-if="showImageUpload"
@@ -276,7 +373,6 @@
       return {
         accountId: '',// 快手 accountId
         accountList: {},
-
         campaignId: '', //广告计划id
         targetPopulation: '',
         changeOnSelectValue: true,
@@ -286,10 +382,18 @@
         creativeMaterialType: '1',
         singlePicture: false,// 展示单张图片
         videoUploadType: '1',
+        showSinglePicTiepianType:false, // 贴片类型
+        showSinglePicType:false, // 
+        singlePicTiepianType:'1', // 贴片方式
+        singlePicType:'1', // 
         localUpload: false,
         localUrl: '', // 本地上传地址
         selectVideoUpload: true,
+        hasSinglePicVideoUpload:false, // 有单张图片的作品上传
+        hasSinglePicCoverUpload:false, // 有单张图片的封面上传
         videoUrl: '',// 视频id
+        haveSinglePicVideoUrl:[], // 有单张图片的视频id集合
+        haveSinglePicimagesList:[], // // 有单张图片的图片集合
         videoList: [],
         radioStyle: { // 视频单选样式
           display: 'block',
@@ -311,8 +415,12 @@
         clickTrackUrl: '',// 第三方检测链接
         showLocalImageUpload: false,
         showUploadImageRadio: true,
+        showUploadSinglePicType:false, // 单张图片上传类型
+        changeSinglePicType:'1', // 单张图片上传方式
         visible: false,
         visibleVideo: false,
+        visibleSinglePicVideo: false,
+        visibleSinglePicCover: false,
         isAllChecked: false,
         showClickTrackUrl: true,
         showImpressionUrl: false,
@@ -363,7 +471,8 @@
             creativeUrl: '/kuaishou/create/createCreative',
             selectGroupCreate: '/kuaishou/kuaiShouGroupCreateLog/select/group',
 
-          }
+          },
+          
       }
     },
     methods: {
@@ -395,13 +504,42 @@
         console.log(e);
         console.log(this.videoUrl);
         this.visibleVideo = false;
-
         this.closeAllVideoFun();
-
       },
       showModalVideo() {
         this.visibleVideo = true;
-        jq(document).ready(function () {
+        this.stopOtherVideo();
+      },
+      handleCancelVideo() {
+        this.closeAllVideoFun();
+        this.videoUrl = "";
+      },
+
+      // 有单张图片的上传视频弹窗,多选
+      handleOkSinglePicVideo(e) {
+        this.visibleSinglePicVideo = false;
+        this.closeAllVideoFun();
+      },
+      showSinglePicModalVideo() {
+        this.visibleSinglePicVideo = true;
+        console.log("***有单张图片的视频上传***");
+        console.log(this.videoList);
+        this.stopOtherVideo();
+        
+      },
+      handleCancelSinglePicVideo() {
+        this.closeAllVideoFun();
+        this.videoUrl = "";
+      },
+      //   视频多选
+      VideoOnChange (checkedValues) {
+        this.haveSinglePicVideoUrl = checkedValues;
+        console.log(this.haveSinglePicVideoUrl);
+      },
+    
+      // 停止播放除当前外的视频
+      stopOtherVideo(){
+          jq(document).ready(function () {
           // 播放当前视频停止其他视频
           let videos = jq("video");
 
@@ -418,11 +556,6 @@
           });
         });
       },
-      handleCancelVideo() {
-        this.closeAllVideoFun();
-        this.videoUrl = "";
-      },
-
       // 停止播放所有视频
       closeAllVideoFun() {
         let videos = jq("video");
@@ -438,10 +571,35 @@
         } else {
           this.isAllChecked = false;
         }
-
-
       },
 
+        //   有单张图片的上传封面
+        showSinglePicCoverModal(){
+            this.visibleSinglePicCover = true;
+            console.log("***有单张图片的封面上传***");
+            console.log(this.imageList);
+        },
+        handleOkSinglePicCover(){
+            this.haveSinglePicimagesList = [];
+            if (this.checkeds.length > 0) {
+                for (let i = 0; i < this.checkeds.length; i++) {
+                let imageId = this.checkeds[i];
+                for (let j = 0; j < this.imageList.length; j++) {
+                    let imageVo = this.imageList[j];
+                    if (imageId == imageVo.id) {
+                    this.haveSinglePicimagesList.push(imageVo.src)
+                    }
+                }
+                }
+            }
+            console.log(this.haveSinglePicimagesList);
+            this.visibleSinglePicCover = false;
+        },
+        handleCancelSinglePicCover(){
+            this.visibleSinglePicCover = false;
+            this.haveSinglePicimagesList = [];
+        },
+
       checkeda: function (id) {
         let indexOf = this.checkeds.indexOf(id)
         if (indexOf >= 0) {
@@ -491,32 +649,10 @@
       filterOption(input, option) {
         return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
       },
-      changeUploadVideo() {
-        if (this.videoUploadType == 2) {
-          this.localUpload = true;
-          this.selectVideoUpload = false;
-
-        } else {
-          this.localUpload = false;
-          this.selectVideoUpload = true;
-
-        }
-      },
-      getDescription() {
-        let params = {};
-        params.localUrl = this.videoUrl;
-        params.loginId = this.userInfo().id;
-        postAction(this.url.getDescriptionUrl, params).then((res) => {
-          console.log(res)
-          if (res.success) {
-            this.description = res.result.videoDesc;
-            this.creativeName = res.result.videoName + "_" + moment().format('YYYY-MM-DD_HH:mm');
-          }
-        });
-      },
 
+      // 视频类型
       changeVideoList() {
-        if ((this.creativeMaterialType == '1' || this.creativeMaterialType == '2') && this.sceneId == '2') {
+        if ((this.creativeMaterialType == '1' || this.creativeMaterialType == '2') && this.sceneId == '2') { // 横版竖版并且无单张图片
           this.showImageUpload = false;
           this.showUploadType = true;
           this.selectVideoUpload = true;
@@ -525,14 +661,21 @@
           this.showCover = true;
           this.showLocalImageUpload = false;
           this.videoUrl = '';
+          this.hasSinglePicVideoUpload = false;
+          this.hasSinglePicCoverUpload = false;
+          this.showSinglePicType = false;
+          this.showSinglePicTiepianType = false;
+
           let params = {};
           params.pageSize = '1000';
           params.loginId = this.userInfo().id;
-          if (this.creativeMaterialType == '2') {
+          params.positionType = '1';
+          if (this.creativeMaterialType == '1') { // 竖版视频
+            params.materialType = '1';
+          }if (this.creativeMaterialType == '2') {
             params.materialType = '2';
           }
-          if (this.creativeMaterialType == '1') {
-            params.materialType = '1';
+          if (this.creativeMaterialType == '3') {
           }
           getAction(this.url.videoListUrl, params).then((res) => {
             if (res.success) {
@@ -546,15 +689,19 @@
           getAction(this.url.imageListUrl, params).then((res) => {
             this.imageList = res
           });
-        } else if ((this.creativeMaterialType == '1' || this.creativeMaterialType == '2' || this.creativeMaterialType == '3') && this.sceneId == '3') {
-          if (this.creativeMaterialType == '1' || this.creativeMaterialType == '2') {
+        } else if ((this.creativeMaterialType == '1' || this.creativeMaterialType == '2' || this.creativeMaterialType == '3') && this.sceneId == '3') { // 横版竖版有单张图片
+          if (this.creativeMaterialType == '1' || this.creativeMaterialType == '2') {  // 切换横版或竖版
             this.showUploadType = true;
             this.localUpload = false;
-            this.selectVideoUpload = true;
+            this.selectVideoUpload = false;
             this.showImageUpload = false;
+            this.showUploadImageRadio = false;
+            this.showUploadSinglePicType = false;
+            this.hasSinglePicVideoUpload = true;
             let params = {};
             params.pageSize = '1000';
             params.loginId = this.userInfo().id;
+            params.positionType = '2';
             if (this.creativeMaterialType == '2') {
               params.materialType = '2';
             }
@@ -570,18 +717,115 @@
                 }
               }
             });
-          } else if (this.creativeMaterialType == '3') {
-
-
+          } else if (this.creativeMaterialType == '3') { // 切换单张图片
 
             this.showImageUpload = true;
             this.showUploadType = false;
             this.localUpload = false;
             this.selectVideoUpload = false;
+            this.showSinglePicType = false;
+            this.showSinglePicTiepianType = false;
+            this.hasSinglePicVideoUpload = false;
           }
         }
+        if(this.creativeMaterialType == '1' || this.creativeMaterialType == '2'){
+            this.hasSinglePicCoverUpload = false;
+            this.showSinglePicTiepianType = false;
+        }
+        if(this.creativeMaterialType == '3'){  // 单张图片时
+            this.hasSinglePicVideoUpload = false;
+            this.hasSinglePicCoverUpload = true;
+            this.localUpload = false;
+            this.showSinglePicType = true;
+            this.showUploadSinglePicType = true;
+            this.showImageUpload = false;
+            this.showSinglePicTiepianType = true;
+        }
       },
 
+      // 视频上传方式
+      changeUploadVideo() {
+        if ( this.sceneId == '2' && this.videoUploadType == '2'){ // 无单张图片时
+            this.hasSinglePicVideoUpload = false;
+            this.hasSinglePicCoverUpload = false;
+            this.localUpload = true;
+        }
+        if(this.sceneId == "3"){ // 有单张图片时
+            
+            this.showUploadImageRadio = false;
+            // 如果有单张图片,上传作品方式为多选
+            if (this.videoUploadType == 2) {
+                this.localUpload = true;
+                this.showUploadImageRadio = false;
+                this.hasSinglePicVideoUpload = false;
+                this.hasSinglePicCoverUpload = false;
+            }else{
+                this.localUpload = false;
+                this.hasSinglePicVideoUpload = true;
+                this.hasSinglePicCoverUpload = false;
+            }
+        }else{
+            this.hasSinglePicVideoUpload = false;
+            this.hasSinglePicCoverUpload = false;
+            if (this.videoUploadType == 2) {
+                this.hasSinglePicCoverUpload = false;
+                this.selectVideoUpload = false;
+            } else {
+                this.localUpload = false;
+                this.selectVideoUpload = true;
+            }
+        }
+        
+      },
+      getDescription() {
+        let params = {};
+        params.localUrl = this.videoUrl;
+        params.loginId = this.userInfo().id;
+        postAction(this.url.getDescriptionUrl, params).then((res) => {
+          console.log(res)
+          if (res.success) {
+            this.description = res.result.videoDesc;
+            this.creativeName = res.result.videoName + "_" + moment().format('YYYY-MM-DD_HH:mm');
+          }
+        });
+      },
+
+      
+
+      // 有单张图片的贴片方式
+      changeSinglePicTiepianTypeFun(){
+            let params = {};
+            params.pageSize = '1000';
+            params.loginId = this.userInfo().id;
+            if(this.singlePicTiepianType == '1'){
+                params.materialType = '2';
+                params.positionType = '1';
+            }
+            if(this.singlePicTiepianType == '2'){
+                params.materialType = '2';
+                params.positionType = '2';
+            }
+            getAction(this.url.imageListUrl, params).then((res) => {
+                this.imageList = res;
+                console.log(res);
+            });
+
+      },
+
+        // 有单张图片的图片上传方式
+      changeSinglePicTypeFun(){
+          if(this.changeSinglePicType == '1'){
+              this.hasSinglePicCoverUpload = true;
+              this.localUpload = false;
+          }
+          if(this.changeSinglePicType == '2'){
+              this.hasSinglePicCoverUpload = false;
+              this.localUpload = true;
+          }
+      },
+    
+    
+
 
       handleSubmit(e) {
         console.log(this.imageUrl)
@@ -612,6 +856,9 @@
             params.impressionUrl = this.impressionUrl;
             params.sceneId = this.sceneId;
             params.loginId = this.userInfo().id;
+            params.haveSinglePicVideoUrl = this.haveSinglePicVideoUrl;
+            params.haveSinglePicimagesList = this.haveSinglePicimagesList;
+            console.log(params.haveSinglePicimagesList)
             postAction(this.url.creativeUrl, params).then((res) => {
               console.log(res)
               if (res.success) {
@@ -621,9 +868,7 @@
           }
         })
       },
-      onChange(value) {
-        console.log(value);
-      },
+      
 
       onChangeActionBarText() {
         if (this.ids.length == 2) {
@@ -641,7 +886,7 @@
           unitParams.unitId = unitId;
           getAction(this.url.selectGroupCreate, unitParams).then((res) => {
             this.sceneId = res.sceneId
-            if (res.sceneId == '2') {
+            if (res.sceneId == '2') { // 无单张图片的时候
               this.singlePicture = false;
               this.showImageUpload = false;
               this.showImpressionUrl = false;
@@ -649,14 +894,72 @@
               this.showUploadImageRadio = true;
               this.showCover = true;
               this.showLocalImageUpload = false;
-
-            } else if (res.sceneId == '3') {
+              this.selectVideoUpload = true;
+              this.hasSinglePicVideoUpload = false;
+              this.hasSinglePicCoverUpload = false;
+
+                let params2 = {};
+                    params2.pageSize = '1000';
+                    params2.materialType = '1';
+                        params2.positionType = '1';
+                    params2.loginId = this.userInfo().id;
+                    getAction(this.url.videoListUrl, params2).then((res) => {
+                        if (res.success) {
+                        this.videoList = res.result.records
+                        // 设置默认选中的视频
+                        if (this.videoList.length > 0) {
+                            this.videoUrl = this.videoList[0].localUrl;
+                        }
+
+                        console.log("......")
+                        console.log(this.videoList)
+                        }
+                    });
+
+                    // 图片列表
+                    getAction(this.url.imageListUrl, params2).then((res) => {
+                        this.imageList = res
+                        console.log(res)
+                    });
+
+            } else if (res.sceneId == '3') { // 有单张图片的时候
               this.singlePicture = true;
               this.showImpressionUrl = true;
               this.showClickTrackUrl = false;
               this.showUploadImageRadio = false;
               this.showCover = false;
+              this.selectVideoUpload = false;
               this.showLocalImageUpload = false;
+
+            // 如果有单张图片,上传作品方式为多选
+              this.hasSinglePicVideoUpload = true;
+              
+                let params2 = {};
+                    params2.pageSize = '1000';
+                    params2.materialType = '1';
+                    params2.positionType = '2';
+                    params2.loginId = this.userInfo().id;
+                    getAction(this.url.videoListUrl, params2).then((res) => {
+                        if (res.success) {
+                        this.videoList = res.result.records
+                        // 设置默认选中的视频
+                        if (this.videoList.length > 0) {
+                            this.videoUrl = this.videoList[0].localUrl;
+                        }
+
+                        console.log("......")
+                        console.log(this.videoList)
+                        }
+                    });
+
+                    // 图片列表
+                    getAction(this.url.imageListUrl, params2).then((res) => {
+
+                        this.imageList = res
+                        console.log(res)
+
+                    });
+
             }
 
           });
@@ -709,30 +1012,30 @@
 
 
       // 页面初始化 查询竖版视频
-      params = {};
-      params.pageSize = '1000';
-      params.materialType = '1';
-      params.loginId = this.userInfo().id;
-      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;
-          }
+    //   params = {};
+    //   params.pageSize = '1000';
+    //   params.materialType = '1';
+    //   params.loginId = this.userInfo().id;
+    //   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;
+    //       }
 
-          console.log("......")
-          console.log(this.videoList)
-        }
-      });
+    //       console.log("......")
+    //       console.log(this.videoList)
+    //     }
+    //   });
 
-      // 图片列表
-      getAction(this.url.imageListUrl, params).then((res) => {
+    //   // 图片列表
+    //   getAction(this.url.imageListUrl, params).then((res) => {
 
-        this.imageList = res
-        console.log(res)
+    //     this.imageList = res
+    //     console.log(res)
 
-      });
+    //   });
 
 
     }
@@ -742,13 +1045,15 @@
 
 
 <style lang="scss">
+.select_all{
+    margin-bottom: 10px;
+}
   .ant-modal-body {
     height: 650px;
     overflow-y: scroll;
-
     .image_item_container {
       margin: 0 -10px;
-
+      width: 100%;
       .image_item {
         display: inline-block;
         width: 20%;
@@ -788,4 +1093,40 @@
       }
     }
   }
+
+//   多选框
+.checkbox_item_container{
+    .item_ul{
+        margin: 0 -10px;
+        .item_li{
+            width: 20%;
+            float:left;
+            padding: 0 10px;
+            box-sizing: border-box;
+            .item{
+                position: relative;
+               video{
+                   width: 100%;
+                   min-height: 255px;
+               }
+               .checkbox_item{
+                   display: block;
+                   .ant-checkbox{
+                    display: inline-block;
+                    }
+                    span{
+                        display: block;
+                        padding:0;
+                        .item_txt{
+                        text-align: left;
+                        height:42px;
+                        overflow: hidden;
+                        }
+                    }
+               }
+               
+            }
+        }
+    }
+}
 </style>