Sfoglia il codice sorgente

创意创建更新,标题

zhuxinbo 5 anni fa
parent
commit
8d0a850b95

+ 8 - 0
src/api/manage.js

@@ -120,3 +120,11 @@ export function getProvince(url, parameter) {
     })
   }
 
+export function getPackage(parameter) {
+    return axios({
+        url: "/template/creative/words/get",
+        method: 'get',
+        params: parameter
+    })
+}
+

+ 339 - 22
src/views/template/creative/create.vue

@@ -179,7 +179,7 @@
       <a-form-item label="创意方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
         <a-radio-group v-model="creativeType">
           <a-radio-button value="customize">自定义创意</a-radio-button>
-          <!--<a-radio-button value="program">程序化创意</a-radio-button>-->
+          <a-radio-button value="program">程序化创意</a-radio-button>
         </a-radio-group>
       </a-form-item>
       <a-form-item label="素材添加方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
@@ -230,7 +230,7 @@
       </a-form-item>
       <!-- 创建大图横图创意 -->
       <a-form-item
-        label="创建大图横图创意"
+        label="创建创意"
         :labelCol="labelCol"
         :wrapperCol="wrapperCol"
         v-if="createLargeImageCreativeCon"
@@ -239,6 +239,14 @@
           <a-layout-content style="padding:10px;">
             <div :style="{ marginBottom: '16px' }">
               <a-button @click="addCreative()" :disabled="count">添加创意</a-button>
+              <span
+                style="color:black;margin-left:10px"
+                v-if="creativeType == 'customize'"
+              >{{countMany}}/10</span>
+              <span
+                style="color:black;margin-left:10px"
+                v-else-if="creativeType == 'program'"
+              >视频数量:{{vadioMany}}/12 图片数量:{{imgMany}}/10</span>
             </div>
             <a-row>
               <a-col :span="8" v-for="(item,index) of HorizontalLargeImageList" :key="index">
@@ -252,7 +260,7 @@
                   <div class="dynamically_add_form_item">
                     <a-form-item class label="素材上传" :labelCol="labelCol" :wrapperCol="wrapperCol">
                       <upload-to-ali
-                        v-model="horizonImageUrlColl[index]"
+                        v-model="item.vadioUrl"
                         :customDomain="customDomain"
                         preview
                         :region="region"
@@ -263,8 +271,45 @@
                         :accessKeySecret="accessKeySecret"
                       ></upload-to-ali>
                     </a-form-item>
-                    <a-form-item label="创意标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
-                      <a-input v-model="horizonImageCreativeTextColl[index]"></a-input>
+                    <a-form-item
+                      label="创意标题"
+                      :labelCol="labelCol"
+                      :wrapperCol="wrapperCol"
+                      v-if="creativeType == 'customize'"
+                    >
+                      <a-input v-model="item.text" class="rending" @change="judge(item)"></a-input>
+                    </a-form-item>
+                    <a-form-item
+                      label="动态词包"
+                      :labelCol="labelCol"
+                      :wrapperCol="wrapperCol"
+                      v-if="creativeType == 'customize'"
+                    >
+                      <a-tag
+                        v-for="(itemTag,indexTag) of tags"
+                        :key="indexTag"
+                        v-show="indexTag<item.many"
+                        @click="getChange(item,itemTag,index)"
+                      >{{itemTag.name}}</a-tag>
+                      <span @click="showElseClick(item)">{{item.showElse?"更多":"收起"}}</span>
+                    </a-form-item>
+                    <a-form-item
+                      label="封面上传"
+                      :labelCol="labelCol"
+                      :wrapperCol="wrapperCol"
+                      v-if="creativeType == 'program'&&(materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'||materialType=='CREATIVE_IMAGE_MODE_VIDEO')"
+                    >
+                      <upload-to-ali
+                        v-model="item.imageUrl"
+                        :customDomain="customDomain"
+                        preview
+                        :region="region"
+                        :bucket="bucket"
+                        :accept="acceptImage"
+                        :size="102400"
+                        :accessKeyId="accessKeyId"
+                        :accessKeySecret="accessKeySecret"
+                      ></upload-to-ali>
                     </a-form-item>
                   </div>
                 </a-card>
@@ -301,6 +346,30 @@
       >
         <a-input v-model="horizonImageCreativeText"></a-input>
       </a-form-item>-->
+      <a-form-item
+        v-if="creativeType == 'program'"
+        label="程序化创意标题"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+      >
+        <a-button @click="addTitle">添加创意标题</a-button>
+        <br />
+        <div v-for="(item,index) of titleData" :key="index">
+          <a-input style="width:55%" v-model="item.text" class="rending-all"></a-input>
+          <a-icon
+            type="delete"
+            style="margin-left:20px;cursor: pointer;"
+            v-show="titleData.length>1"
+            @click="tetleDetele(index)"
+          />
+          <br />
+          <a-tag
+            v-for="(itemTag,indexTag) of tags"
+            :key="indexTag"
+            @click="getChangeAllTitle(item,itemTag,index)"
+          >{{itemTag.name}}</a-tag>
+        </div>
+      </a-form-item>
 
       <a-form-item
         v-if="showHorizonVideo"
@@ -529,7 +598,7 @@
 
 <script>
 import UploadToAli from '@femessage/upload-to-ali'
-import { postAction, getAction } from '@/api/manage'
+import { postAction, getAction, getPackage } from '@/api/manage'
 import moment from 'moment'
 import AFormItem from 'ant-design-vue/es/form/FormItem'
 import $ from 'jquery'
@@ -549,6 +618,7 @@ export default {
         sm: { span: 16 }
       },
       fileList: [],
+      multiple: [],
       activeConvertList: [],
       showConvertTarget: false,
       convertType: '',
@@ -641,7 +711,12 @@ export default {
       HorizontalLargeImageListSmall: [],
       HorizontalLargeImageListBigShu: [],
       horizonImageUrlColl: [], // 大图横图图片素材集合
-      horizonImageCreativeTextColl: [] // 创意标题集合
+      horizonImageCreativeTextColl: [], // 创意标题集合
+      itemIndex: null,
+      tags: [],
+      range: null,
+      countTag: 0,
+      titleData: [{ text: '', showElse: true, titleMany: 0 }]
     }
   },
   components: {
@@ -659,6 +734,109 @@ export default {
     handleChange({ fileList }) {
       this.fileList = fileList
     },
+    judge(item) {
+      var left = item.text.split('{')
+      var right = item.text.split('}')
+      console.log(left)
+      if (item.countTag == 0) {
+        return
+      } else {
+        if (left.length != 3 && right.lenght != 3) {
+          item.countTag -= 1
+        }
+      }
+    },
+    getChange(item, tag, index) {
+      item.countTag++
+      if (item.text == '') {
+        item.countTag = 0
+      }
+      if (item.countTag >= 2) {
+        this.$message.error('最多插入两条词包')
+        item.countTag = 2
+        return
+      }
+      var node = document.getElementsByClassName('rending')[index]
+      var v = '{' + tag.name + '}'
+      if (document.selection) {
+        //IE
+        node.focus()
+        var sel = document.selection.createRange()
+        sel.text = v
+        sel.select()
+      } else if (node.selectionStart || node.selectionStart == '0') {
+        //MOZILLA/GOOGLE
+        var startPos = node.selectionStart
+        var endPos = node.selectionEnd
+        var restoreTop = node.scrollTop
+        node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
+        if (restoreTop > 0) {
+          node.scrollTop = restoreTop
+        }
+        item.text = node.value
+        node.focus()
+        node.selectionStart = startPos + v.length
+        node.selectionEnd = startPos + v.length
+      } else {
+        //OTHER
+        node.value += v
+        item.text = node.value
+        node.focus()
+      }
+    },
+    getChangeAllTitle(item, tag, index) {
+      item.titleMany++
+      if (item.text == '') {
+        item.titleMany = 0
+      }
+      if (item.titleMany >= 2) {
+        this.$message.error('最多插入两条词包')
+        item.titleMany = 2
+        return
+      }
+      var node = document.getElementsByClassName('rending-all')[index]
+      var v = '{' + tag.name + '}'
+      if (document.selection) {
+        //IE
+        node.focus()
+        var sel = document.selection.createRange()
+        sel.text = v
+        sel.select()
+      } else if (node.selectionStart || node.selectionStart == '0') {
+        //MOZILLA/GOOGLE
+        var startPos = node.selectionStart
+        var endPos = node.selectionEnd
+        var restoreTop = node.scrollTop
+        node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
+        if (restoreTop > 0) {
+          node.scrollTop = restoreTop
+        }
+        item.text = node.value
+        node.focus()
+        node.selectionStart = startPos + v.length
+        node.selectionEnd = startPos + v.length
+      } else {
+        //OTHER
+        node.value += v
+        item.text = node.value
+        node.focus()
+      }
+    },
+    showElseClick(item) {
+      item.showElse = !item.showElse
+      if (!item.showElse) {
+        item.many = this.tags.length
+      } else {
+        item.many = 3
+      }
+    },
+    handleChangeText(value, option) {
+      console.log(`selected ${value}`)
+      this.HorizontalLargeImageList[this.itemIndex].text += value.join()
+    },
+    getIndex(item, index) {
+      this.itemIndex = index
+    },
     filterOption(input, option) {
       return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
     },
@@ -834,7 +1012,15 @@ export default {
           params.name = this.name
           params.convertId = this.convertId
           params.iteratorNum = this.iteratorNum
-
+          var dataCreatives = this.HorizontalLargeImageListBig.concat(
+            this.HorizontalLargeImageListHeng,
+            this.HorizontalLargeImageListShu,
+            this.HorizontalLargeImageListZu,
+            this.HorizontalLargeImageListSmall,
+            this.HorizontalLargeImageListBigShu
+          )
+          params.creatives = dataCreatives
+          params.titles = this.titleData
           console.log(params)
           postAction(this.url.insertUrl, params).then(res => {
             console.log(res)
@@ -849,32 +1035,93 @@ export default {
     },
     onChange(value) {
       console.log(value)
+      console.log(this.HorizontalLargeImageListSmall)
+      console.log(this.HorizontalLargeImageListBig)
+      console.log(this.HorizontalLargeImageListZu)
     },
     //   创建大图横图创意
     addCreative() {
       let type = this.materialType
       if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
-        this.HorizontalLargeImageListSmall.push({})
+        this.HorizontalLargeImageListSmall.push({
+          typeCode: type,
+          imageUrl: '',
+          text: '',
+          vadioUrl: '',
+          multiple: [],
+          countTag: 0,
+          many: 3,
+          showElse: true
+        })
         this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
       }
       if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
-        this.HorizontalLargeImageListBig.push({})
+        this.HorizontalLargeImageListBig.push({
+          typeCode: type,
+          imageUrl: '',
+          text: '',
+          vadioUrl: '',
+          multiple: [],
+          countTag: 0,
+          many: 3,
+          showElse: true
+        })
         this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
       }
       if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
-        this.HorizontalLargeImageListZu.push({})
+        this.HorizontalLargeImageListZu.push({
+          creativeType: this.creativeType,
+          typeCode: type,
+          imageUrl: '',
+          text: '',
+          vadioUrl: '',
+          multiple: [],
+          countTag: 0,
+          many: 3,
+          showElse: true
+        })
         this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
       }
       if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
-        this.HorizontalLargeImageListShu.push({})
+        this.HorizontalLargeImageListShu.push({
+          creativeType: this.creativeType,
+          typeCode: type,
+          imageUrl: '',
+          text: '',
+          vadioUrl: '',
+          multiple: [],
+          countTag: 0,
+          many: 3,
+          showElse: true
+        })
         this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
       }
       if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
-        this.HorizontalLargeImageListBigShu.push({})
+        this.HorizontalLargeImageListBigShu.push({
+          creativeType: this.creativeType,
+          typeCode: type,
+          imageUrl: '',
+          text: '',
+          vadioUrl: '',
+          multiple: [],
+          countTag: 0,
+          many: 3,
+          showElse: true
+        })
         this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
       }
       if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
-        this.HorizontalLargeImageListHeng.push({})
+        this.HorizontalLargeImageListHeng.push({
+          creativeType: this.creativeType,
+          typeCode: type,
+          imageUrl: '',
+          text: '',
+          vadioUrl: '',
+          multiple: [],
+          countTag: 0,
+          many: 3,
+          showElse: true
+        })
         this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
       }
     },
@@ -883,6 +1130,20 @@ export default {
       console.log(this.HorizontalLargeImageList)
       this.HorizontalLargeImageList.splice(index, 1)
       this.horizonImageCreativeTextColl.splice(index, 1)
+      this.range = null
+    },
+    getTags() {
+      getPackage({ accountId: this.accountId }).then(res => {
+        if (res.code == '0') {
+          this.tags = res.creative_word
+        }
+      })
+    },
+    addTitle() {
+      this.titleData.push({ text: '', titleMany: 0 })
+    },
+    tetleDetele(index) {
+      this.titleData.splice(index, 1)
     }
   },
   created: function() {
@@ -939,18 +1200,74 @@ export default {
       }
     })
   },
+  watch: {
+    creativeType: function(n, o) {
+      console.log(n, o)
+      this.HorizontalLargeImageListBig = []
+      this.HorizontalLargeImageListHeng = []
+      this.HorizontalLargeImageListShu = []
+      this.HorizontalLargeImageListZu = []
+      this.HorizontalLargeImageListSmall = []
+      this.HorizontalLargeImageListBigShu = []
+      this.HorizontalLargeImageList = []
+    },
+    accountId: function(n, o) {
+      this.getTags()
+    }
+  },
   computed: {
     count: function() {
+      var bool
+      if (this.creativeType == 'customize') {
+        bool =
+          this.HorizontalLargeImageListBig.length +
+            this.HorizontalLargeImageListHeng.length +
+            this.HorizontalLargeImageListShu.length +
+            this.HorizontalLargeImageListZu.length +
+            this.HorizontalLargeImageListSmall.length +
+            this.HorizontalLargeImageListBigShu.length >=
+          10
+            ? true
+            : false
+      } else {
+        if (
+          this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL' ||
+          this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO'
+        ) {
+          bool = this.HorizontalLargeImageListHeng.length + this.HorizontalLargeImageListShu.length >= 12 ? true : false
+        } else {
+          bool =
+            this.HorizontalLargeImageListBig.length +
+              this.HorizontalLargeImageListZu.length +
+              this.HorizontalLargeImageListSmall.length +
+              this.HorizontalLargeImageListBigShu.length >=
+            10
+              ? true
+              : false
+        }
+      }
+      return bool
+    },
+    countMany: function() {
+      var bool =
+        this.HorizontalLargeImageListBig.length +
+        this.HorizontalLargeImageListHeng.length +
+        this.HorizontalLargeImageListShu.length +
+        this.HorizontalLargeImageListZu.length +
+        this.HorizontalLargeImageListSmall.length +
+        this.HorizontalLargeImageListBigShu.length
+      return bool
+    },
+    vadioMany: function() {
+      var bool = this.HorizontalLargeImageListHeng.length + this.HorizontalLargeImageListShu.length
+      return bool
+    },
+    imgMany: function() {
       var bool =
         this.HorizontalLargeImageListBig.length +
-          this.HorizontalLargeImageListHeng.length +
-          this.HorizontalLargeImageListShu.length +
-          this.HorizontalLargeImageListZu.length +
-          this.HorizontalLargeImageListSmall.length +
-          this.HorizontalLargeImageListBigShu.length >=
-        10
-          ? true
-          : false
+        this.HorizontalLargeImageListZu.length +
+        this.HorizontalLargeImageListSmall.length +
+        this.HorizontalLargeImageListBigShu.length
       return bool
     }
   }

+ 1 - 1
src/views/template/userorientation/list.vue

@@ -50,7 +50,7 @@
     <div class="table-operator">
       <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
     </div>
-    <transfer :checkData.sync="dataBox" />
+    <!-- <transfer :checkData.sync="dataBox" /> -->
     <!-- table区域-begin -->
     <div>
       <a-table