瀏覽代碼

切换分支

朱鑫波 4 年之前
父節點
當前提交
60f9d50f77

+ 197 - 45
src/views/modules/kuaishouapp/account/stepForm/Step3.vue

@@ -125,16 +125,18 @@
           <a-form-item label="广告组名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-input v-model="pane.tab" readOnly></a-input>
           </a-form-item>
-          <a-form-item label="素材类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
-            <a-radio-group buttonStyle="solid" v-decorator="['creativeMaterialType', { initialValue: '1' }]">
+          <a-form-item label="素材类型" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="JSON.parse(pane.sceneId).indexOf(1)>0||JSON.parse(pane.sceneId).indexOf(3)>0||JSON.parse(pane.sceneId).indexOf(6)>0">
+            <a-radio-group buttonStyle="solid" v-decorator="['creativeMaterialType', { initialValue: '1' }]"  @change="changeType(bestIndex)">
               <a-radio-button value="1">竖版视频</a-radio-button>
               <a-radio-button value="2">横版视频</a-radio-button>
+              <!-- <a-radio-button value="4" v-if="JSON.parse(pane.sceneId).indexOf(7)>0">便利贴创意</a-radio-button> -->
+              
             </a-radio-group>
           </a-form-item>
           <!-- <a-form-item label="素材同步" :labelCol="labelCol" :wrapperCol="wrapperCol">
            
           </a-form-item> -->
-          <a-form-item label="创意内容" :labelCol="labelCol">
+          <a-form-item label="创意内容" :labelCol="labelCol"  v-if="JSON.parse(pane.sceneId).indexOf(1)>=0||JSON.parse(pane.sceneId).indexOf(3)>=0||JSON.parse(pane.sceneId).indexOf(6)>=0">
             <a-layout>
               <a-layout-content style="padding:10px;">
 
@@ -146,9 +148,9 @@
                       <div style="clear:both"></div>
                       <div class="dynamically_add_form_item">
 
-                        <a-form-item label="">
+                        <a-form-item label="" v-if="getData('creativeMaterialType')!='4'">
                           <a @click="getVideoList('video', index, item, bestIndex)">选择视频</a>
-                          <a @click="uploadVideo(index,bestIndex)" style="margin-left:10px">上传视频</a>
+                          <a @click="uploadVideo(index,bestIndex,item)" style="margin-left:10px">上传视频</a>
 
                           <br />
                           <video :src="item.videoList.url" controls="controls" style="width:25%"
@@ -170,7 +172,7 @@
                         </div>
                         <a-form-item label="">
                           <a @click="getVideoList('image', index, item, bestIndex)">选择封面</a>
-                          <a @click="uploadImages(index,bestIndex)" style="margin-left:10px">上传封面</a>
+                          <a @click="uploadImages(index,bestIndex,item)" style="margin-left:10px">上传封面</a>
                           <a @click="showImages(index,bestIndex)" v-if="item.chouzhenShow"
                             style="margin-left:10px">推荐封面</a>
                           <br />
@@ -210,6 +212,83 @@
               </a-layout-content>
             </a-layout>
           </a-form-item>
+
+          <a-form-item label="便利贴广告" :labelCol="labelCol"  v-if="JSON.parse(pane.sceneId).indexOf(7)>=0">
+            <a-layout>
+              <a-layout-content style="padding:10px;">
+
+                <a-row>
+                  <a-col :span="24" v-for="(item, index) of pane.postAdList" :key="index">
+                    <a-card title :ref="item">
+                      <a-icon type="close" style="float:right;cursor: pointer;"
+                        @click="deleteCreative(bestIndex, index,'postAdList')" />
+                      <div style="clear:both"></div>
+                      <div class="dynamically_add_form_item">
+                        <div class="downLoad" style="overflow:auto">
+                          <ul class="actor-photo-list step3-image"
+                            :style="{ width: item.imageUrlList.length>4?25 * item.imageUrlList.length + '%':'100%' }"
+                            v-if="item.imageUrlList.length > 0">
+                            <a-checkbox-group v-model="item.checkArrImage"
+                              style="width:100%;  display: flex;padding-left: 0;" @change="onChangeCheckImage">
+                              <li v-for="(item, index) of item.imageUrlList" :key="index">
+                                <a-checkbox :value="item.code" style="height:100%;width:100%">
+                                  <img class="video" :src="item.url" />
+                                </a-checkbox>
+                              </li>
+                            </a-checkbox-group>
+                          </ul>
+                        </div>
+                        <a-form-item label="">
+                          <a @click="getVideoList('image', index, item, bestIndex)">选择封面</a>
+                          <a @click="uploadImages(index,bestIndex,item)" style="margin-left:10px">上传封面</a>
+                          <a @click="showImages(index,bestIndex)" v-if="item.chouzhenShow"
+                            style="margin-left:10px">推荐封面</a>
+                          <br />
+                          <span v-for="(item,deleteIndex) of item.imageList" style="position:relative;">
+                            <img :src="item.url" style="width:18%;margin:1%;" :key="item.url" />
+                            <a-icon type="close-circle" @click="deleteData(index,bestIndex,deleteIndex)"
+                              style="position: absolute;right: 0px;" />
+                          </span>
+
+
+                        </a-form-item>
+                        <a-form-item label="广告语">
+                          <a @click="showTitle(index,bestIndex)">推荐广告语</a>
+
+
+                          <a-textarea class="rending" placeholder="请输入广告语" v-model.trim="item.description"
+                            :autosize="{ minRows: 2, maxRows: 6 }"></a-textarea>
+                          <span v-if="item.description.length>30" style="color:red">广告语长度不能超过30个字符</span>
+                          <br>
+                          <a @click="cunTitle(index,bestIndex)">收藏</a>
+                          <a @click="showCunTitle(index,bestIndex)" style="margin-left:10px">收藏列表</a>
+                          <br>
+                          <a-tag v-for="(itemTag,indexTag) of tags" :key="indexTag"
+                            @click="getChange(item, itemTag, index)">{{itemTag.name}}</a-tag>
+                        </a-form-item>
+                        
+                        <a-form-item label="创意标题">
+                            <a-textarea class="rending" placeholder="请输入短广告语" v-model.trim="item.shortSlogan"
+                            :autosize="{ minRows: 2, maxRows: 6 }" :maxLength="8"></a-textarea>
+                            <span v-if="item.shortSlogan.length>8" style="color:red">短广告语长度不能超过30个字符</span>
+                        </a-form-item>
+                        <a-form-item label="创意标题">
+                          <a-input v-model="item.name"></a-input>
+                        </a-form-item>
+                      </div>
+                    </a-card>
+                  </a-col>
+                </a-row>
+                <div :style="{ marginBottom: '16px' }">
+                  <a-button @click="addAdList(bestIndex)" :disabled="contentAll>=15||pane.postAdList.length>=1">
+                    添加便利贴</a-button>
+                </div>
+              </a-layout-content>
+            </a-layout>
+          </a-form-item>
+
+
+
           <a-form-item label="行动号召" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-select v-decorator="['actionBarText', { rules: [{ required: true, message: '行动号召按钮文案' }] }]" showSearch
               allowClear placeholder="选择行动号召按钮文案" optionFilterProp="children" :filterOption="filterOption">
@@ -528,6 +607,7 @@
     },
     data() {
       return {
+        sceneIdValue:'1',
         trackName: '',
         showImageChouzhen: false,
         showImageStr: null,
@@ -656,10 +736,33 @@
         acceptImage: 'image/jpeg,image/jpg',
         accessKeyId: 'LTAIbNbqWzSOklQV',
         accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
-        messageTip: null
+        messageTip: null,
+        verticalPhoto:[],
+        horizontalPhoto:[],
+        creativeMaterialType:'1'
       }
     },
     methods: {
+      changeType(index) {
+        this.$nextTick(() => {
+          console.log(this.getData('creativeMaterialType'))
+          // if (this.getData('creativeMaterialType') == '1') {
+          //   if (this.verticalPhoto.length > 0) {
+          //     this.pans[index].list = this.verticalPhoto
+          //   } else {
+          //     this.addCreative(index)
+          //   }
+          // } else {
+          //   if (this.horizontalPhoto.length > 0) {
+          //     this.pans[index].list = this.horizontalPhoto
+          //   } else {
+          //     this.addCreative(index)
+          //   }
+          // }
+
+          // this.addCreative(index)
+        })
+      },
       ...mapGetters(["nickname", "avatar", "userInfo"]),
       onSearch(value) {
         console.log(value, this.trackName);
@@ -996,7 +1099,7 @@
         this.ipagination.current = page
         var params = {}
         params.accountId = localStorage.getItem('accountId')
-        params.materialType = this.getData('creativeMaterialType')
+        params.materialType =this.creativeMaterialType 
         params.pageSize = this.ipagination.pageSize
         params.pageNo = page
         params.channelType = this.channelType
@@ -1031,6 +1134,7 @@
           this.active = 0
           this.time = []
           this.channelType = 0
+          this.creativeMaterialType = item.creativeMaterialType
           //   var params = {}
           //   params.accountId = localStorage.getItem('accountId')
           //   params.materialType = this.getData('creativeMaterialType')
@@ -1040,7 +1144,7 @@
           //   this.showVideoList('/kuaishou/batch/getVideoList', params)
         } else {
           this.$refs.check.showCheck(
-            this.getData('creativeMaterialType'),
+            item.creativeMaterialType,
             '/kuaishou/batch/getImageList',
             item.imageList,
             type,
@@ -1119,6 +1223,7 @@
             this.loading = true
             var dataJson = this.pans[index].list.map(item => {
               return {
+                creativeMaterialType:item.creativeMaterialType,
                 description: item.description,
                 imageArr: item.imageList.map((ele, index) => {
                   return {
@@ -1136,6 +1241,23 @@
                 name: item.name
               }
             })
+
+
+            var dataAd = this.pans[index].postAdList.map(item => {
+              return {
+                creativeMaterialType:item.creativeMaterialType,
+                description: item.description,
+                shortSlogan:item.shortSlogan,
+                imageArr: item.imageList.map((ele, index) => {
+                  return {
+                    signature: ele.signature,
+                    name: item.name
+                  }
+                }),
+                name: item.name
+              }
+            })
+
             var allJson = dataJson.map(item => {
               return {
                 description: item.description,
@@ -1143,27 +1265,30 @@
                   .imageArrTwo) : [{
                   name: item.name
                 }],
-                photoId: item.photoId
+                photoId: item.photoId,
+                creativeMaterialType:item.creativeMaterialType
               }
             })
             var params = {
-              dataJson: allJson,
+              dataJson: allJson.concat(dataAd),
               ...values,
               unitId: this.pansKey,
               accountId: localStorage.getItem('accountId'),
               content: this.content
             }
-            postAction('/kuaishou/batch/createCreative', params).then(res => {
-              if (res.success) {
-                this.visible = true
-                this.allForm.fail = res.result.fail
-                this.allForm.success = res.result.success
-                this.loading = false
-              } else {
-                this.loading = false
-                this.$message.error(res.message)
-              }
-            })
+            console.log(params)
+            this.loading = false
+            // postAction('/kuaishou/batch/createCreative', params).then(res => {
+            //   if (res.success) {
+            //     this.visible = true
+            //     this.allForm.fail = res.result.fail
+            //     this.allForm.success = res.result.success
+            //     this.loading = false
+            //   } else {
+            //     this.loading = false
+            //     this.$message.error(res.message)
+            //   }
+            // })
           }
         })
       },
@@ -1177,31 +1302,56 @@
         this.$emit('prevStep')
       },
       addCreative(index) {
-        this.pans[index].list.push({
-          videoList: '',
-          imageList: [],
-          name: this.getData('creativeMaterialType') == '1' ?
-            '自定义创意_竖版视频_' : '自定义创意_横版视频_',
-          description: '',
-          creativeMaterialType: '1',
-          actionBarText: '',
-          imageUrlList: [],
-          checkArrImage: [],
-          checkAllImage: false,
-          chouzhenShow: false
+        this.$nextTick(()=>{
+          this.pans[index].list.push({
+            videoList: '',
+            imageList: [],
+            name: this.getData('creativeMaterialType') == '1' ?
+              '自定义创意_竖版视频_' : '自定义创意_横版视频_',
+            description: '',
+            creativeMaterialType: this.getData('creativeMaterialType'),
+            actionBarText: '',
+            imageUrlList: [],
+            checkArrImage: [],
+            checkAllImage: false,
+            chouzhenShow: false
+          })
         })
+        
       },
-      deleteCreative(bestIndex, index) {
-        this.pans[bestIndex].list.splice(index, 1)
+      addAdList(index){
+        this.$nextTick(()=>{
+          this.pans[index].postAdList.push({
+            imageList: [],
+            shortSlogan:'',
+            name: '便利贴创意',
+            description: '',
+            creativeMaterialType: "4",
+            actionBarText: '',
+            imageUrlList: [],
+            checkArrImage: [],
+            checkAllImage: false,
+            chouzhenShow: false
+          })
+        })
+      },
+      deleteCreative(bestIndex, index,type) {
+        if(type){
+          this.pans[bestIndex].postAdList.splice(index, 1)
+        }else{
+          this.pans[bestIndex].list.splice(index, 1)
+        }
+
       },
       filterOption(input, option) {
         return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
       },
-      uploadVideo(index, bestIndex) {
+      uploadVideo(index, bestIndex,item) {
         console.log(index, bestIndex)
         nowIndex = index
         bestIndex = bestIndex
         this.addVideoVisible = true
+        this.creativeMaterialType = item.creativeMaterialType 
       },
       tongbu() {
         this.tongbuLoading = true
@@ -1213,7 +1363,7 @@
             this.tongbuLoading = false
             var params = {}
             params.accountId = localStorage.getItem('accountId')
-            params.materialType = this.getData('creativeMaterialType')
+            params.materialType = this.creativeMaterialType 
             params.pageSize = this.ipagination.pageSize
             params.pageNo = 1
             params.status = 0
@@ -1272,11 +1422,12 @@
           }
         })
       },
-      uploadImages(index, bestIndex) {
+      uploadImages(index, bestIndex,item) {
         nowIndex = index
         bestIndex = bestIndex
         this.addImageVisible = true
         this.loadingImage = false
+        this.creativeMaterialType = item.creativeMaterialType 
       },
       closeImage() {
         this.addImageVisible = false
@@ -1488,7 +1639,7 @@
         } else {
           var params = {
             url: this.urlList.url,
-            type: this.getData('creativeMaterialType'),
+            type: this.creativeMaterialType,
             signature: this.urlList.md5,
             accountId: localStorage.getItem('accountId')
           }
@@ -1651,7 +1802,7 @@
 
             arr.push(...this.pans[0].list[i].checkArrImage, ...this.pans[0].list[i].imageList)
           }
-          return arr.length + this.content
+          return arr.length + this.content + this.pans[0].postAdList.length
         } else {
           return 0
         }
@@ -1677,7 +1828,7 @@
         if (n.length > 0) {
           var params = {}
           params.accountId = localStorage.getItem('accountId')
-          params.materialType = this.getData('creativeMaterialType')
+          params.materialType = this.creativeMaterialType 
           params.pageSize = this.ipagination.pageSize
           params.pageNo = 1
           params.status = 0
@@ -1688,7 +1839,7 @@
         } else {
           var params = {}
           params.accountId = localStorage.getItem('accountId')
-          params.materialType = this.getData('creativeMaterialType')
+          params.materialType = this.creativeMaterialType 
           params.pageSize = this.ipagination.pageSize
           params.pageNo = 1
           params.status = 0
@@ -1714,10 +1865,11 @@
           this.pans = JSON.parse(localStorage.getItem('pans')).map(item => {
             return {
               ...item,
-              list: []
+              list: [],
+              postAdList:[]
             }
           })
-
+          this.sceneIdValue = (JSON.parse(this.pans[0].sceneId).indexOf(1)>0||JSON.parse(this.pans[0].sceneId).indexOf(3)>0||JSON.parse(this.pans[0].sceneId).indexOf(6)>0)?'1':'4'
           this.pansKey = this.pans[0].key
           setTimeout(() => {
             this.addCreative(0)

+ 4 - 48
src/views/modules/kuaishouapp/account/stepForm/Step4.vue

@@ -206,25 +206,6 @@ li.chouzhen.first:before {
                             v-if="item.videoList"
                           ></video>
                         </a-form-item>
-                        <div class="downLoad" style="overflow:auto">
-                          <ul
-                            class="actor-photo-list step3-image"
-                            :style="{ width: item.imageUrlList.length>4?25 * item.imageUrlList.length + '%':'100%' }"
-                            v-if="item.imageUrlList.length > 0"
-                          >
-                            <a-checkbox-group
-                              v-model="item.checkArrImage"
-                              style="width:100%;  display: flex;padding-left: 0;"
-                              @change="onChangeCheckImage"
-                            >
-                              <li v-for="(item, index) of item.imageUrlList" :key="index">
-                                <a-checkbox :value="item.code" style="height:100%;width:100%">
-                                  <img class="video" :src="item.url" />
-                                </a-checkbox>
-                              </li>
-                            </a-checkbox-group>
-                          </ul>
-                        </div>
                         <a-form-item label>
                           <a
                             @click="getVideoList('image', index, item, bestIndex)"
@@ -1200,7 +1181,7 @@ export default {
         //   this.pans[index].list[item.key].imageList.push(...item.image)
 
         if (item.image.length + this.pans[index].list[item.key].imageList > 4) {
-          this.$message.error('当前选择封面' + item.image.length + '张,最多可选择' + (4 - this.pans[index].list[item.key].imageList) + '张')
+          this.$message.error('当前选择封面' + item.image.length + '张,最多可选择' + (4 - this.pans[index].list[item.key].imageList.length) + '张')
           return
         } else {
           this.pans[index].list[item.key].imageList.push(...item.image)
@@ -1491,7 +1472,7 @@ export default {
         }
       }
       if (arr.length + this.pans[bestIndex].list[nowIndex].imageList.length > 4) {
-        this.$message.error('当前选择封面' + arr.length + '张,最多可选择' + (4 - this.pans[index].list[item.key].imageList) + '张')
+        this.$message.error('当前选择封面' + arr.length + '张,最多可选择' + (4 - this.pans[bestIndex].list[nowIndex].imageList.length) + '张')
         return
       } else {
         this.pans[bestIndex].list[nowIndex].imageList.push(...arr)
@@ -1555,7 +1536,7 @@ export default {
       postAction('/kusiShouUpload/image', params).then((res) => {
         if (res.success) {
           if (res.result.length + this.pans[bestIndex].list[nowIndex].imageList > 4) {
-            this.$message.error('当前上传封面' + res.result.length + '张,最多可上传' + (4 - this.pans[bestIndex].list[nowIndex].imageList) + '张')
+            this.$message.error('当前上传封面' + res.result.length + '张,最多可上传' + (4 - this.pans[bestIndex].list[nowIndex].imageList.length) + '张')
             this.loadingImage = false
             return
           } else {
@@ -1760,33 +1741,7 @@ export default {
       //
 
       this.pans[bestIndex].list[nowIndex].imageList = []
-      getAction('/kuaishou/batch/getCreativeCopywriter', {
-        code: this.checkVideo[0].signature,
-        accountId: localStorage.getItem('accountId'),
-      }).then((res) => {
-        if (res.success) {
-          this.pans[bestIndex].list[nowIndex].description = res.result
-            ? res.result.creativeCopywriter
-              ? res.result.creativeCopywriter
-              : ''
-            : ''
-        }
-      })
-      getAction('/ctop/MaterialImageInfo/list', {
-        videoId: this.checkVideo[0].signature,
-        status: 1,
-      }).then((res) => {
-        // console.log(res)
-        if (res.success) {
-          this.pans[bestIndex].list[nowIndex].imageUrlList = res.result
-          this.pans[bestIndex].list[nowIndex].checkArrImage = res.result.map((item) => {
-            return item.code
-          })
-        }
-      })
-
       this.pans[bestIndex].list[nowIndex].videoList = this.checkVideo[0]
-      this.visibleMatemal = false
       this.ipagination.current = 1
       var params = {
         videoSignature: this.checkVideo[0].signature,
@@ -1801,6 +1756,7 @@ export default {
           } else {
             this.pans[bestIndex].list[nowIndex].chouzhenShow = false
           }
+          this.visibleMatemal = false
         }
       })
     },

+ 1 - 1
src/views/modules/kuaishouapp/account/stepForm/StepForm.vue

@@ -16,7 +16,7 @@
 <script>
 import Step1 from './Step1'
 import Step2 from './Step2'
-import Step3 from './Step4'
+import Step3 from './Step3'
 export default {
   name: 'StepForm',
   components: {