|
@@ -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
|
|
|
}
|
|
|
}
|