소스 검색

广告组 广告创意改版

yumeng 5 년 전
부모
커밋
de8cb36ac7
2개의 변경된 파일294개의 추가작업 그리고 191개의 파일을 삭제
  1. 179 186
      src/views/modules/kuaishouapp/creativeCreate.vue
  2. 115 5
      src/views/modules/kuaishouapp/groupCreate.vue

+ 179 - 186
src/views/modules/kuaishouapp/creativeCreate.vue

@@ -34,35 +34,11 @@
                     placeholder="Please select" :changeOnSelect="changeOnSelectValue"/>
       </a-form-item>
 
-
-      <a-form-item
-        label="广告投放位置"
-        :labelCol="labelCol"
-        :wrapperCol="wrapperCol">
-        <a-radio-group v-model="placementPosition" @change="changePlacementPosition">
-          <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="showDeliveryType"
-        :labelCol="labelCol"
-        :wrapperCol="wrapperCol">
-        <a-radio-group v-model="deliveryType" @change="showSinglePicture">
-          <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="视频类型"
         :labelCol="labelCol"
         :wrapperCol="wrapperCol">
-        <a-radio-group v-model="videoType" @change="changeVideoList">
+        <a-radio-group v-model="creativeMaterialType" @change="changeVideoList">
           <a-radio-button value='1'>竖版视频</a-radio-button>
           <a-radio-button value='2'>横版视频</a-radio-button>
           <a-radio-button value='3' v-if="singlePicture">单张图片</a-radio-button>
@@ -82,7 +58,7 @@
 
 
       <a-form-item
-        label="选择本地文件进行上传"
+        label="选择本地视频文件进行上传"
         v-if="localUpload"
         :labelCol="labelCol"
         :wrapperCol="wrapperCol">
@@ -103,21 +79,6 @@
         v-if="selectVideoUpload"
         :labelCol="labelCol"
         :wrapperCol="wrapperCol">
-        <!-- <a-select
-          v-model="videoUrl"
-          @change="getDescription"
-          showSearch
-          allowClear
-          optionFilterProp="children"
-          style="width: 650px"
-          @focus="handleFocus"
-          @blur="handleBlur"
-          :filterOption="filterOption">
-          <a-select-option v-for="video in videoList" :key="video.localUrl" :value="video.localUrl">
-            {{video.videoName}}
-          </a-select-option>
-        </a-select> -->
-        
         <!-- 修改为弹窗形式 -->
         <div>
           <a type="primary" @click="showModalVideo">点击选中已上传作品</a>
@@ -129,15 +90,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,33 +155,23 @@
               <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>
       </a-form-item>
-      <!-- <ul>
-         <li v-for="(item ,index) in items" @click="checkeda(index)">
-           <a href="javascript:">
-             <img :src="item.img" alt="">
-           </a>
-           <p>{{item.title}}</p>
-           <input type="checkbox" v-model="checkeds" :value="index">
-         </li>
-       </ul>-->
-
 
       <a-form-item
         v-if="showLocalImageUpload"
@@ -280,10 +231,19 @@
       </a-form-item>
 
       <a-form-item
+        v-if="showClickTrackUrl"
         label="第三方点击监测链接"
         :labelCol="labelCol"
         :wrapperCol="wrapperCol">
-        <a-input v-model="clickTrackUrl" placeholder="请第三方点击监测链接" style="width: 650px"></a-input>
+        <a-input v-model="clickTrackUrl" placeholder="请填写第三方点击监测链接" style="width: 650px"></a-input>
+      </a-form-item>
+
+      <a-form-item
+        v-if="showImpressionUrl"
+        label="第三方开始播放监测链接"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol">
+        <a-input v-model="impressionUrl" placeholder="请填写第三方开始播放监测链接" style="width: 650px"></a-input>
       </a-form-item>
 
 
@@ -321,11 +281,10 @@
         targetPopulation: '',
         changeOnSelectValue: true,
         ids: [],
-        placementPosition: '1',// 广告投放位置
         showDeliveryType: false,
         deliveryType: '1',
-        videoType: '1',
-        singlePicture: true,// 展示单张图片
+        creativeMaterialType: '1',
+        singlePicture: false,// 展示单张图片
         videoUploadType: '1',
         localUpload: false,
         localUrl: '', // 本地上传地址
@@ -333,15 +292,16 @@
         videoUrl: '',// 视频id
         videoList: [],
         radioStyle: { // 视频单选样式
-            display: 'block',
-            height: '30px',
-            lineHeight: '30px',
+          display: 'block',
+          height: '30px',
+          lineHeight: '30px',
         },
         showUploadType: true,
-        localImageUrl: '',//图片地址
+        localImageUrl: [],//图片地址
         showImageUpload: false,
         imageList: [],
         imageUrl: [],
+        sceneId: '',// 资源位置
         showCover: true,
         imageType: '1',
         actionBarTextList: [],
@@ -354,6 +314,9 @@
         visible: false,
         visibleVideo: false,
         isAllChecked: false,
+        showClickTrackUrl: true,
+        showImpressionUrl: false,
+        impressionUrl: '',
         checkeds: [],
         customDomain: '',
         acceptVideo: 'video/mpeg,video/mp4',
@@ -398,6 +361,7 @@
             getDescriptionUrl: '/kuaishou/kuaiShouVideo/queryShouVideo',
 
             creativeUrl: '/kuaishou/create/createCreative',
+            selectGroupCreate: '/kuaishou/kuaiShouGroupCreateLog/select/group',
 
           }
       }
@@ -423,7 +387,7 @@
         }
       },
       showModal() {
-            this.visible = true;
+        this.visible = true;
       },
 
       // 上传视频弹窗
@@ -431,44 +395,41 @@
         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() {
@@ -534,11 +495,11 @@
         if (this.videoUploadType == 2) {
           this.localUpload = true;
           this.selectVideoUpload = false;
-          this.showImageUpload = false;
+
         } else {
           this.localUpload = false;
           this.selectVideoUpload = true;
-          this.showImageUpload = false;
+
         }
       },
       getDescription() {
@@ -555,93 +516,78 @@
       },
 
       changeVideoList() {
-        if (this.videoType == '2' || this.videoType == '1') {
+        if ((this.creativeMaterialType == '1' || this.creativeMaterialType == '2') && this.sceneId == '2') {
           this.showImageUpload = false;
           this.showUploadType = true;
           this.selectVideoUpload = true;
           this.localUpload = false;
-          this.showCover = false;
-          this.showLocalImageUpload = false;
-          this.videoUrl = '';
-          this.showLocalImageUpload = false;
           this.showUploadImageRadio = true;
           this.showCover = true;
+          this.showLocalImageUpload = false;
+          this.videoUrl = '';
           let params = {};
           params.pageSize = '1000';
           params.loginId = this.userInfo().id;
-          if (this.videoType == '2') {
+          if (this.creativeMaterialType == '2') {
             params.materialType = '2';
           }
-          if (this.videoType == '1') {
+          if (this.creativeMaterialType == '1') {
             params.materialType = '1';
           }
           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) => {
-
             this.imageList = res
-
           });
-        } else {
-          this.showImageUpload = true;
-          this.showUploadType = false;
-          this.selectVideoUpload = false;
-          this.localUpload = false;
-          this.showCover = false;
-          this.showUploadImageRadio = false;
-          this.showLocalImageUpload = false;
-          this.showCover = false;
-        }
-      },
-
-      changePlacementPosition() {
-        this.singlePicture = false;
-        if (this.placementPosition == '1') {
-          this.showDeliveryType = false;
-          this.singlePicture = true;
-        } else if (this.placementPosition == '2' && this.deliveryType == '1') {
-          this.showDeliveryType = true;
-          this.singlePicture = false;
-        } else if (this.placementPosition == '2' && this.deliveryType == '2') {
-          this.showDeliveryType = false;
-          this.singlePicture = true;
-        }
+        } 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.showImageUpload = false;
+            let params = {};
+            params.pageSize = '1000';
+            params.loginId = this.userInfo().id;
+            if (this.creativeMaterialType == '2') {
+              params.materialType = '2';
+            }
+            if (this.creativeMaterialType == '1') {
+              params.materialType = '1';
+            }
+            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;
+                }
+              }
+            });
+          } else if (this.creativeMaterialType == '3') {
 
 
-      },
-      showSinglePicture() {
-        this.singlePicture = false
 
-        if (this.deliveryType == '2') {
-          this.singlePicture = true;
-          this.showImageUpload = false;
-          this.selectVideoUpload = false;
-          this.localUpload = false;
-        } else {
-          this.singlePicture = false;
-          this.showImageUpload = false;
-          this.selectVideoUpload = true;
-          this.localUpload = true;
+            this.showImageUpload = true;
+            this.showUploadType = false;
+            this.localUpload = false;
+            this.selectVideoUpload = false;
+          }
         }
-
-
       },
 
 
       handleSubmit(e) {
-        console.log(this.imageIds);
         console.log(this.imageUrl)
-        
         e.preventDefault()
         this.form.validateFields((err, values) => {
           if (!err) {
-            console.log(this.imageIds);
-            console.log('Received values of form: ', values);
-            console.log('快手账号: ', this.accountId);
-            console.log('  ---: ', this.ids);
             let params = {};
             params.accountId = this.accountId;
             if (this.ids.length == 2) {
@@ -653,8 +599,6 @@
             } else if (this.videoUploadType == '2') {
               params.videoUrl = this.localUrl;
             }
-                        console.log("-----------------------");
-
             console.log(params.videoUrl);
             params.imageUrl = this.imageUrl;
             console.log(this.imageUrl)
@@ -663,7 +607,9 @@
             params.clickTrackUrl = this.clickTrackUrl;
             params.creativeName = this.creativeName;
             params.imageType = this.imageType;
-            params.videoType = this.videoType;
+            params.creativeMaterialType = this.creativeMaterialType;
+            params.localImageUrl = this.localImageUrl;
+            params.impressionUrl = this.impressionUrl;
             params.loginId = this.userInfo().id;
             postAction(this.url.creativeUrl, params).then((res) => {
               console.log(res)
@@ -689,6 +635,31 @@
             }
           });
 
+          let unitId = this.ids[1];
+          let unitParams = {};
+          unitParams.unitId = unitId;
+          getAction(this.url.selectGroupCreate, unitParams).then((res) => {
+            this.sceneId = res.sceneId
+            if (res.sceneId == '2') {
+              this.singlePicture = false;
+              this.showImageUpload = false;
+              this.showImpressionUrl = false;
+              this.showClickTrackUrl = true;
+              this.showUploadImageRadio = true;
+              this.showCover = true;
+              this.showLocalImageUpload = false;
+
+            } else if (res.sceneId == '3') {
+              this.singlePicture = true;
+              this.showImpressionUrl = true;
+              this.showClickTrackUrl = false;
+              this.showUploadImageRadio = false;
+              this.showCover = false;
+              this.showLocalImageUpload = false;
+            }
+
+          });
+
         }
 
       },
@@ -744,6 +715,11 @@
       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)
         }
@@ -765,33 +741,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>

+ 115 - 5
src/views/modules/kuaishouapp/groupCreate.vue

@@ -199,7 +199,7 @@
 
 
       <a-form-item
-        label="出价"
+        label="OCPC出价"
         v-if="showCpaBid"
         :labelCol="{lg: {span: 7}, sm: {span: 7}}"
         :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
@@ -216,6 +216,74 @@
 
 
       <a-form-item
+        label="深度转化目标"
+        v-if="showDeepConversionType"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-select
+          v-model="deepConversionType"
+          showSearch
+          showArrow
+          allowClear
+          optionFilterProp="children"
+          style="width: 500px"
+          :filterOption="filterOption"
+        >
+          <a-select-option v-for="conversionType in deepConversionTypes"
+                           :key="conversionType.deep_conversion_type"
+                           :value="conversionType.deep_conversion_type">{{conversionType.desc}}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+
+
+      <a-form-item
+        label="深度转化目标出价"
+        v-if="showDeepConversionBid"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-input
+          v-model="deepConversionBid"
+          placeholder="请填写深度转化出价金额" style="width: 70%"></a-input>
+        元
+      </a-form-item>
+
+
+      <a-form-item
+        label="广告投放位置"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-radio-group v-model="placementPosition" buttonStyle="solid" @change="changeShowPosition()">
+          <a-radio-button value='1' :disabled="true">优选广告位</a-radio-button>
+          <a-radio-button value='2'>按场景选择广告位</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+
+
+      <a-form-item
+        label="场景广告位"
+        v-if="showPosition"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-radio-group v-model="sceneId">
+          <a-radio-button value='2'>信息流广告</a-radio-button>
+          <a-radio-button value='3'>视频后贴片广告</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+
+
+      <a-form-item
+        label="创意制作方式"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-radio-group v-model="unitType">
+          <a-radio-button value='4'>自定义</a-radio-button>
+          <a-radio-button value='2' :disabled="true">程序化创意</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+
+
+      <a-form-item
         label="广告组名称"
         :labelCol="{lg: {span: 7}, sm: {span: 7}}"
         :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
@@ -278,11 +346,19 @@
         showOcpxActionType: false,
         showCpaBid: false,
         cpaBid: 0,// bid_type 是 OCPC 时该字段必填
-        page: 2,// 资源位置
         unitName: "_" + moment().format('YYYY-MM-DD_HH:mm'),//广告组名称
         activationDisabled: true,
         isFormDisabled: true,
 
+        placementPosition: '2',
+        showPosition: true,
+        sceneId: '2',
+        deepConversionTypes: [],
+        deepConversionType: '',
+        showDeepConversionType: false,
+        showDeepConversionBid: false,
+        deepConversionBid: 0,
+        unitType: '4',
 
         form: this.$form.createForm(this),
         url: {
@@ -298,6 +374,15 @@
     methods: {
       ...mapGetters(["nickname", "avatar", "userInfo"]),
 
+
+      changeShowPosition() {
+        if (this.placementPosition == 1) {
+          this.showPosition = false;
+        } else {
+          this.showPosition = true;
+        }
+      },
+
       deepConversion() {
         if (this.accountId != '') {
           let params = {};
@@ -306,6 +391,7 @@
             if (res.success) {
               if (res.result.isActivate == 1) {
                 this.activationDisabled = false;
+                this.deepConversionTypes = res.result.deepConversionTypes;
               } else {
                 this.activationDisabled = true;
               }
@@ -314,10 +400,13 @@
               } else {
                 this.isFormDisabled = true;
               }
-              console.log(res.result)
+
+
             } else {
               this.activationDisabled = true;
               this.isFormDisabled = true;
+              this.showDeepConversionType = false;
+              this.showDeepConversionBid = false;
             }
           });
 
@@ -330,6 +419,17 @@
           this.showBid = false;
           this.showOcpxActionType = true;
           this.showCpaBid = true;
+
+          if(this.ocpxActionType == '180' && this.deepConversionTypes.length > 0){
+            this.showDeepConversionType = true;
+            this.showDeepConversionBid = true;
+
+          } else {
+            this.showDeepConversionType = false;
+            this.showDeepConversionBid = false;
+          }
+
+
         } else {
           this.showBid = true;
           this.showOcpxActionType = false;
@@ -419,7 +519,12 @@
               console.log('优化目标:', this.ocpxActionType);
               console.log('出价金额,cpaBid:', this.cpaBid);
             }
-            console.log('资源位置: ', this.page);
+
+
+            console.log('资源位置: ', this.sceneId);
+            console.log('创意制作防水: ', this.unitType);
+            console.log('深度转化目标: ', this.deepConversionType);
+            console.log('深度转化目标出价: ', this.deepConversionBid);
             console.log('广告组名称: ', this.unitName);
             let params = {};
             params.dayBudget = this.dayBudget * 1000;
@@ -443,13 +548,18 @@
               params.ocpxActionType = this.ocpxActionType;
               params.cpaBid = this.cpaBid * 1000;
             }
-            params.page = this.page;
+
             params.showModel = this.showMode;
             params.unitName = this.unitName;
             params.loginId = this.userInfo().id;
             params.accountId = this.accountId;
             params.campaignTemplateId = this.campaignTemplateId;
             params.createCount = this.createCount;
+            params.sceneId = this.sceneId;
+            params.unitType = this.unitType;
+            params.deepConversionType = this.deepConversionType;
+            params.deepConversionBid = this.deepConversionBid * 1000;
+
 
             console.log(params)
             postAction(this.url.insertTemplateUrl, params).then((res) => {