|
@@ -190,34 +190,67 @@
|
|
</a-form-item>
|
|
</a-form-item>
|
|
<a-form-item label="选择素材类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
<a-form-item label="选择素材类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
<a-radio-group v-model="materialType" @change="materialTypeChange">
|
|
<a-radio-group v-model="materialType" @change="materialTypeChange">
|
|
- <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE">大图横图</a-radio-button>
|
|
|
|
- <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO">横版视频</a-radio-button>
|
|
|
|
- <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">竖版视频</a-radio-button>
|
|
|
|
- <a-radio-button value="CREATIVE_IMAGE_MODE_GROUP">组图</a-radio-button>
|
|
|
|
- <a-radio-button value="CREATIVE_IMAGE_MODE_SMALL">小图</a-radio-button>
|
|
|
|
- <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE_VERTICAL">大图竖图</a-radio-button>
|
|
|
|
|
|
+ <a-badge
|
|
|
|
+ :count="HorizontalLargeImageListBig.length"
|
|
|
|
+ :numberStyle="{backgroundColor: '#52c41a'} "
|
|
|
|
+ >
|
|
|
|
+ <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE">大图横图</a-radio-button>
|
|
|
|
+ </a-badge>
|
|
|
|
+ <a-badge
|
|
|
|
+ :count="HorizontalLargeImageListShu.length"
|
|
|
|
+ :numberStyle="{backgroundColor: '#52c41a'} "
|
|
|
|
+ >
|
|
|
|
+ <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO">横版视频</a-radio-button>
|
|
|
|
+ </a-badge>
|
|
|
|
+ <a-badge
|
|
|
|
+ :count="HorizontalLargeImageListHeng.length"
|
|
|
|
+ :numberStyle="{backgroundColor: '#52c41a'} "
|
|
|
|
+ >
|
|
|
|
+ <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">竖版视频</a-radio-button>
|
|
|
|
+ </a-badge>
|
|
|
|
+ <a-badge
|
|
|
|
+ :count="HorizontalLargeImageListZu.length"
|
|
|
|
+ :numberStyle="{backgroundColor: '#52c41a'} "
|
|
|
|
+ >
|
|
|
|
+ <a-radio-button value="CREATIVE_IMAGE_MODE_GROUP">组图</a-radio-button>
|
|
|
|
+ </a-badge>
|
|
|
|
+ <a-badge
|
|
|
|
+ :count="HorizontalLargeImageListSmall.length"
|
|
|
|
+ :numberStyle="{backgroundColor: '#52c41a'} "
|
|
|
|
+ >
|
|
|
|
+ <a-radio-button value="CREATIVE_IMAGE_MODE_SMALL">小图</a-radio-button>
|
|
|
|
+ </a-badge>
|
|
|
|
+ <a-badge
|
|
|
|
+ :count="HorizontalLargeImageListBigShu.length"
|
|
|
|
+ :numberStyle="{backgroundColor: '#52c41a'} "
|
|
|
|
+ >
|
|
|
|
+ <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE_VERTICAL">大图竖图</a-radio-button>
|
|
|
|
+ </a-badge>
|
|
</a-radio-group>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
-
|
|
|
|
<!-- 创建大图横图创意 -->
|
|
<!-- 创建大图横图创意 -->
|
|
- <a-form-item label="创建大图横图创意" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="createLargeImageCreativeCon">
|
|
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="创建大图横图创意"
|
|
|
|
+ :labelCol="labelCol"
|
|
|
|
+ :wrapperCol="wrapperCol"
|
|
|
|
+ v-if="createLargeImageCreativeCon"
|
|
|
|
+ >
|
|
<a-layout>
|
|
<a-layout>
|
|
<a-layout-content style="padding:10px;">
|
|
<a-layout-content style="padding:10px;">
|
|
<div :style="{ marginBottom: '16px' }">
|
|
<div :style="{ marginBottom: '16px' }">
|
|
- <a-button @click="addCreative()">添加创意</a-button>
|
|
|
|
|
|
+ <a-button @click="addCreative()" :disabled="count">添加创意</a-button>
|
|
</div>
|
|
</div>
|
|
<a-row>
|
|
<a-row>
|
|
<a-col :span="8" v-for="(item,index) of HorizontalLargeImageList" :key="index">
|
|
<a-col :span="8" v-for="(item,index) of HorizontalLargeImageList" :key="index">
|
|
- <a-card title="" :ref="item">
|
|
|
|
- <a-icon type="close" style="float:right;cursor: pointer;" @click="deleteCreative(index)"/>
|
|
|
|
|
|
+ <a-card title :ref="item">
|
|
|
|
+ <a-icon
|
|
|
|
+ type="close"
|
|
|
|
+ style="float:right;cursor: pointer;"
|
|
|
|
+ @click="deleteCreative(index)"
|
|
|
|
+ />
|
|
<div style="clear:both"></div>
|
|
<div style="clear:both"></div>
|
|
<div class="dynamically_add_form_item">
|
|
<div class="dynamically_add_form_item">
|
|
- <a-form-item
|
|
|
|
- class
|
|
|
|
- label="素材上传"
|
|
|
|
- :labelCol="labelCol"
|
|
|
|
- :wrapperCol="wrapperCol"
|
|
|
|
- >
|
|
|
|
|
|
+ <a-form-item class label="素材上传" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
<upload-to-ali
|
|
<upload-to-ali
|
|
v-model="horizonImageUrlColl[index]"
|
|
v-model="horizonImageUrlColl[index]"
|
|
:customDomain="customDomain"
|
|
:customDomain="customDomain"
|
|
@@ -230,11 +263,7 @@
|
|
:accessKeySecret="accessKeySecret"
|
|
:accessKeySecret="accessKeySecret"
|
|
></upload-to-ali>
|
|
></upload-to-ali>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
- <a-form-item
|
|
|
|
- label="创意标题"
|
|
|
|
- :labelCol="labelCol"
|
|
|
|
- :wrapperCol="wrapperCol"
|
|
|
|
- >
|
|
|
|
|
|
+ <a-form-item label="创意标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
<a-input v-model="horizonImageCreativeTextColl[index]"></a-input>
|
|
<a-input v-model="horizonImageCreativeTextColl[index]"></a-input>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
</div>
|
|
</div>
|
|
@@ -271,7 +300,7 @@
|
|
:wrapperCol="wrapperCol"
|
|
:wrapperCol="wrapperCol"
|
|
>
|
|
>
|
|
<a-input v-model="horizonImageCreativeText"></a-input>
|
|
<a-input v-model="horizonImageCreativeText"></a-input>
|
|
- </a-form-item> -->
|
|
|
|
|
|
+ </a-form-item>-->
|
|
|
|
|
|
<a-form-item
|
|
<a-form-item
|
|
v-if="showHorizonVideo"
|
|
v-if="showHorizonVideo"
|
|
@@ -603,10 +632,16 @@ export default {
|
|
},
|
|
},
|
|
|
|
|
|
// 创建大图横图创意
|
|
// 创建大图横图创意
|
|
- createLargeImageCreativeCon:true,
|
|
|
|
|
|
+ createLargeImageCreativeCon: true,
|
|
HorizontalLargeImageList: [],
|
|
HorizontalLargeImageList: [],
|
|
|
|
+ HorizontalLargeImageListBig: [],
|
|
|
|
+ HorizontalLargeImageListHeng: [],
|
|
|
|
+ HorizontalLargeImageListShu: [],
|
|
|
|
+ HorizontalLargeImageListZu: [],
|
|
|
|
+ HorizontalLargeImageListSmall: [],
|
|
|
|
+ HorizontalLargeImageListBigShu: [],
|
|
horizonImageUrlColl: [], // 大图横图图片素材集合
|
|
horizonImageUrlColl: [], // 大图横图图片素材集合
|
|
- horizonImageCreativeTextColl:[] // 创意标题集合
|
|
|
|
|
|
+ horizonImageCreativeTextColl: [] // 创意标题集合
|
|
}
|
|
}
|
|
},
|
|
},
|
|
components: {
|
|
components: {
|
|
@@ -679,58 +714,64 @@ export default {
|
|
materialTypeChange() {
|
|
materialTypeChange() {
|
|
let type = this.materialType
|
|
let type = this.materialType
|
|
if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
|
|
if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
|
|
- this.createLargeImageCreativeCon = false
|
|
|
|
|
|
+ // this.createLargeImageCreativeCon = false
|
|
this.showLargeImage = false
|
|
this.showLargeImage = false
|
|
this.showLargeVerticalImage = false
|
|
this.showLargeVerticalImage = false
|
|
this.showHorizonVideo = false
|
|
this.showHorizonVideo = false
|
|
this.showVerticalVideo = false
|
|
this.showVerticalVideo = false
|
|
this.showGroupImage = false
|
|
this.showGroupImage = false
|
|
this.showSmallImage = true
|
|
this.showSmallImage = true
|
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
|
|
}
|
|
}
|
|
if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
|
|
if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
|
|
- this.createLargeImageCreativeCon = true
|
|
|
|
|
|
+ // this.createLargeImageCreativeCon = true
|
|
this.showLargeImage = false
|
|
this.showLargeImage = false
|
|
this.showLargeVerticalImage = false
|
|
this.showLargeVerticalImage = false
|
|
this.showHorizonVideo = false
|
|
this.showHorizonVideo = false
|
|
this.showVerticalVideo = false
|
|
this.showVerticalVideo = false
|
|
this.showGroupImage = false
|
|
this.showGroupImage = false
|
|
this.showSmallImage = false
|
|
this.showSmallImage = false
|
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
|
|
}
|
|
}
|
|
if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
|
|
if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
|
|
- this.createLargeImageCreativeCon = false
|
|
|
|
|
|
+ // this.createLargeImageCreativeCon = false
|
|
this.showLargeImage = false
|
|
this.showLargeImage = false
|
|
this.showLargeVerticalImage = false
|
|
this.showLargeVerticalImage = false
|
|
this.showHorizonVideo = false
|
|
this.showHorizonVideo = false
|
|
this.showVerticalVideo = false
|
|
this.showVerticalVideo = false
|
|
this.showGroupImage = true
|
|
this.showGroupImage = true
|
|
this.showSmallImage = false
|
|
this.showSmallImage = false
|
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
|
|
}
|
|
}
|
|
if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
|
|
if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
|
|
- this.createLargeImageCreativeCon = false
|
|
|
|
|
|
+ // this.createLargeImageCreativeCon = false
|
|
this.showLargeImage = false
|
|
this.showLargeImage = false
|
|
this.showLargeVerticalImage = false
|
|
this.showLargeVerticalImage = false
|
|
this.showHorizonVideo = true
|
|
this.showHorizonVideo = true
|
|
this.showVerticalVideo = false
|
|
this.showVerticalVideo = false
|
|
this.showGroupImage = false
|
|
this.showGroupImage = false
|
|
this.showSmallImage = false
|
|
this.showSmallImage = false
|
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
|
|
}
|
|
}
|
|
if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
|
|
if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
|
|
- this.createLargeImageCreativeCon = false
|
|
|
|
|
|
+ // this.createLargeImageCreativeCon = false
|
|
this.showLargeImage = false
|
|
this.showLargeImage = false
|
|
this.showLargeVerticalImage = true
|
|
this.showLargeVerticalImage = true
|
|
this.showHorizonVideo = false
|
|
this.showHorizonVideo = false
|
|
this.showVerticalVideo = false
|
|
this.showVerticalVideo = false
|
|
this.showGroupImage = false
|
|
this.showGroupImage = false
|
|
this.showSmallImage = false
|
|
this.showSmallImage = false
|
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
|
|
}
|
|
}
|
|
if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
|
|
if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
|
|
- this.createLargeImageCreativeCon = false
|
|
|
|
|
|
+ // this.createLargeImageCreativeCon = false
|
|
this.showLargeImage = false
|
|
this.showLargeImage = false
|
|
this.showLargeVerticalImage = false
|
|
this.showLargeVerticalImage = false
|
|
this.showHorizonVideo = false
|
|
this.showHorizonVideo = false
|
|
this.showVerticalVideo = true
|
|
this.showVerticalVideo = true
|
|
this.showGroupImage = false
|
|
this.showGroupImage = false
|
|
this.showSmallImage = false
|
|
this.showSmallImage = false
|
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
|
|
}
|
|
}
|
|
},
|
|
},
|
|
moment,
|
|
moment,
|
|
@@ -757,7 +798,6 @@ export default {
|
|
this.form.validateFields((err, values) => {
|
|
this.form.validateFields((err, values) => {
|
|
if (!err) {
|
|
if (!err) {
|
|
console.log('Received values of form: ', values)
|
|
console.log('Received values of form: ', values)
|
|
-
|
|
|
|
let params = {}
|
|
let params = {}
|
|
params.campaignId = this.campaignId
|
|
params.campaignId = this.campaignId
|
|
params.deliveryRange = this.deliveryRange
|
|
params.deliveryRange = this.deliveryRange
|
|
@@ -810,16 +850,39 @@ export default {
|
|
onChange(value) {
|
|
onChange(value) {
|
|
console.log(value)
|
|
console.log(value)
|
|
},
|
|
},
|
|
-
|
|
|
|
// 创建大图横图创意
|
|
// 创建大图横图创意
|
|
addCreative() {
|
|
addCreative() {
|
|
- this.HorizontalLargeImageList.push({})
|
|
|
|
|
|
+ let type = this.materialType
|
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
|
|
|
|
+ this.HorizontalLargeImageListSmall.push({})
|
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
|
|
|
|
+ }
|
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
|
|
|
|
+ this.HorizontalLargeImageListBig.push({})
|
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
|
|
|
|
+ }
|
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
|
|
|
|
+ this.HorizontalLargeImageListZu.push({})
|
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
|
|
|
|
+ }
|
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
|
|
|
|
+ this.HorizontalLargeImageListShu.push({})
|
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
|
|
|
|
+ }
|
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
|
|
|
|
+ this.HorizontalLargeImageListBigShu.push({})
|
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
|
|
|
|
+ }
|
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
|
|
|
|
+ this.HorizontalLargeImageListHeng.push({})
|
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
|
|
|
|
+ }
|
|
},
|
|
},
|
|
- deleteCreative(index){
|
|
|
|
- console.log(index)
|
|
|
|
- console.log(this.HorizontalLargeImageList)
|
|
|
|
- this.HorizontalLargeImageList.splice(index,1)
|
|
|
|
- this.horizonImageCreativeTextColl.splice(index,1)
|
|
|
|
|
|
+ deleteCreative(index) {
|
|
|
|
+ console.log(index)
|
|
|
|
+ console.log(this.HorizontalLargeImageList)
|
|
|
|
+ this.HorizontalLargeImageList.splice(index, 1)
|
|
|
|
+ this.horizonImageCreativeTextColl.splice(index, 1)
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created: function() {
|
|
created: function() {
|
|
@@ -875,6 +938,21 @@ export default {
|
|
this.userorentationList = res.result.records
|
|
this.userorentationList = res.result.records
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ count: function() {
|
|
|
|
+ var bool =
|
|
|
|
+ this.HorizontalLargeImageListBig.length +
|
|
|
|
+ this.HorizontalLargeImageListHeng.length +
|
|
|
|
+ this.HorizontalLargeImageListShu.length +
|
|
|
|
+ this.HorizontalLargeImageListZu.length +
|
|
|
|
+ this.HorizontalLargeImageListSmall.length +
|
|
|
|
+ this.HorizontalLargeImageListBigShu.length >=
|
|
|
|
+ 10
|
|
|
|
+ ? true
|
|
|
|
+ : false
|
|
|
|
+ return bool
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|