|
@@ -0,0 +1,589 @@
|
|
|
|
+<template>
|
|
|
|
+ <a-form :form="form">
|
|
|
|
+ <a-form-item label="选择素材类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
|
+ <a-radio-group v-model="materialType" @change="materialTypeChange">
|
|
|
|
+ <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-form-item>
|
|
|
|
+ <!-- 创建大图横图创意 -->
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="创建创意"
|
|
|
|
+ :labelCol="labelCol"
|
|
|
|
+ :wrapperCol="wrapperCol"
|
|
|
|
+ v-if="createLargeImageCreativeCon"
|
|
|
|
+ >
|
|
|
|
+ <a-layout>
|
|
|
|
+ <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">
|
|
|
|
+ <a-card title :ref="item">
|
|
|
|
+ <a-icon
|
|
|
|
+ type="close"
|
|
|
|
+ style="float:right;cursor: pointer;"
|
|
|
|
+ @click="deleteCreative(index)"
|
|
|
|
+ />
|
|
|
|
+ <div style="clear:both"></div>
|
|
|
|
+ <div class="dynamically_add_form_item">
|
|
|
|
+ <a-form-item class label="素材上传" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
|
+ <upload-to-ali
|
|
|
|
+ v-model="item.vadioUrl"
|
|
|
|
+ :customDomain="customDomain"
|
|
|
|
+ preview
|
|
|
|
+ :region="region"
|
|
|
|
+ :bucket="bucket"
|
|
|
|
+ :accept="acceptImage"
|
|
|
|
+ :size="102400"
|
|
|
|
+ :accessKeyId="accessKeyId"
|
|
|
|
+ :accessKeySecret="accessKeySecret"
|
|
|
|
+ ></upload-to-ali>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <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>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </a-layout-content>
|
|
|
|
+ </a-layout>
|
|
|
|
+ </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>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import UploadToAli from '@femessage/upload-to-ali'
|
|
|
|
+import { postAction, getAction, getPackage } from '@/api/manage'
|
|
|
|
+import moment from 'moment'
|
|
|
|
+import AFormItem from 'ant-design-vue/es/form/FormItem'
|
|
|
|
+import $ from 'jquery'
|
|
|
|
+
|
|
|
|
+export default {
|
|
|
|
+ name: 'BaseForm',
|
|
|
|
+ props: {
|
|
|
|
+ accountId: {
|
|
|
|
+ default() {
|
|
|
|
+ return ''
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ creativeType: {
|
|
|
|
+ type: String,
|
|
|
|
+ default() {
|
|
|
|
+ return 'customize'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ components: {
|
|
|
|
+ AFormItem,
|
|
|
|
+ UploadToAli
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ labelCol: {
|
|
|
|
+ xs: { span: 24 },
|
|
|
|
+ sm: { span: 5 }
|
|
|
|
+ },
|
|
|
|
+ wrapperCol: {
|
|
|
|
+ xs: { span: 24 },
|
|
|
|
+ sm: { span: 16 }
|
|
|
|
+ },
|
|
|
|
+ accessKeyId: 'LTAIbNbqWzSOklQV',
|
|
|
|
+ accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
|
|
|
|
+ bucket: 'ctop-media',
|
|
|
|
+ region: 'oss-cn-beijing',
|
|
|
|
+ acceptImage: 'image/jpeg,image/png',
|
|
|
|
+ acceptVideo: 'video/mpeg,video/mp4',
|
|
|
|
+ customDomain: '',
|
|
|
|
+ form: this.$form.createForm(this),
|
|
|
|
+ url: {
|
|
|
|
+ userAllocationList: '/template/allocation/list',
|
|
|
|
+ insertUrl: '/template/creative/insert',
|
|
|
|
+ industryListUrl: '/template/bytedance/industry/list',
|
|
|
|
+ campaignListUrl: '/template/campaign/list',
|
|
|
|
+ budgetTemplateListUrl: '/template/budget/list',
|
|
|
|
+ deliverytargetTemplateListUrl: '/template/deliverytarget/list',
|
|
|
|
+ userorentationTemplateListUrl: '/template/userorentation/list',
|
|
|
|
+ deliverytargetTemplateGetUrl: '/template/deliveryTarget/get',
|
|
|
|
+ convertList: 'template/convert/list'
|
|
|
|
+ },
|
|
|
|
+ materialType: 'CREATIVE_IMAGE_MODE_LARGE',
|
|
|
|
+ // 创建大图横图创意
|
|
|
|
+ createLargeImageCreativeCon: true,
|
|
|
|
+ HorizontalLargeImageList: [],
|
|
|
|
+ HorizontalLargeImageListBig: [],
|
|
|
|
+ HorizontalLargeImageListHeng: [],
|
|
|
|
+ HorizontalLargeImageListShu: [],
|
|
|
|
+ HorizontalLargeImageListZu: [],
|
|
|
|
+ HorizontalLargeImageListSmall: [],
|
|
|
|
+ HorizontalLargeImageListBigShu: [],
|
|
|
|
+ horizonImageUrlColl: [], // 大图横图图片素材集合
|
|
|
|
+ horizonImageCreativeTextColl: [], // 创意标题集合
|
|
|
|
+ itemIndex: null,
|
|
|
|
+ tags: [],
|
|
|
|
+ range: null,
|
|
|
|
+ countTag: 0,
|
|
|
|
+ titleData: [{ text: '', showElse: true, titleMany: 0 }]
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ 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
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ materialTypeChange() {
|
|
|
|
+ let type = this.materialType
|
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
|
|
|
|
+ // this.createLargeImageCreativeCon = false
|
|
|
|
+ this.showLargeImage = false
|
|
|
|
+ this.showLargeVerticalImage = false
|
|
|
|
+ this.showHorizonVideo = false
|
|
|
|
+ this.showVerticalVideo = false
|
|
|
|
+ this.showGroupImage = false
|
|
|
|
+ this.showSmallImage = true
|
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
|
|
|
|
+ }
|
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
|
|
|
|
+ // this.createLargeImageCreativeCon = true
|
|
|
|
+ this.showLargeImage = false
|
|
|
|
+ this.showLargeVerticalImage = false
|
|
|
|
+ this.showHorizonVideo = false
|
|
|
|
+ this.showVerticalVideo = false
|
|
|
|
+ this.showGroupImage = false
|
|
|
|
+ this.showSmallImage = false
|
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
|
|
|
|
+ }
|
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
|
|
|
|
+ // this.createLargeImageCreativeCon = false
|
|
|
|
+ this.showLargeImage = false
|
|
|
|
+ this.showLargeVerticalImage = false
|
|
|
|
+ this.showHorizonVideo = false
|
|
|
|
+ this.showVerticalVideo = false
|
|
|
|
+ this.showGroupImage = true
|
|
|
|
+ this.showSmallImage = false
|
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
|
|
|
|
+ }
|
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
|
|
|
|
+ // this.createLargeImageCreativeCon = false
|
|
|
|
+ this.showLargeImage = false
|
|
|
|
+ this.showLargeVerticalImage = false
|
|
|
|
+ this.showHorizonVideo = true
|
|
|
|
+ this.showVerticalVideo = false
|
|
|
|
+ this.showGroupImage = false
|
|
|
|
+ this.showSmallImage = false
|
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
|
|
|
|
+ }
|
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
|
|
|
|
+ // this.createLargeImageCreativeCon = false
|
|
|
|
+ this.showLargeImage = false
|
|
|
|
+ this.showLargeVerticalImage = true
|
|
|
|
+ this.showHorizonVideo = false
|
|
|
|
+ this.showVerticalVideo = false
|
|
|
|
+ this.showGroupImage = false
|
|
|
|
+ this.showSmallImage = false
|
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
|
|
|
|
+ }
|
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
|
|
|
|
+ // this.createLargeImageCreativeCon = false
|
|
|
|
+ this.showLargeImage = false
|
|
|
|
+ this.showLargeVerticalImage = false
|
|
|
|
+ this.showHorizonVideo = false
|
|
|
|
+ this.showVerticalVideo = true
|
|
|
|
+ this.showGroupImage = false
|
|
|
|
+ this.showSmallImage = false
|
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 创建大图横图创意
|
|
|
|
+ addCreative() {
|
|
|
|
+ let type = this.materialType
|
|
|
|
+ if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
|
|
|
|
+ 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({
|
|
|
|
+ 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({
|
|
|
|
+ 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({
|
|
|
|
+ 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({
|
|
|
|
+ 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({
|
|
|
|
+ creativeType: this.creativeType,
|
|
|
|
+ typeCode: type,
|
|
|
|
+ imageUrl: '',
|
|
|
|
+ text: '',
|
|
|
|
+ vadioUrl: '',
|
|
|
|
+ multiple: [],
|
|
|
|
+ countTag: 0,
|
|
|
|
+ many: 3,
|
|
|
|
+ showElse: true
|
|
|
|
+ })
|
|
|
|
+ this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ deleteCreative(index) {
|
|
|
|
+ console.log(index)
|
|
|
|
+ console.log(this.HorizontalLargeImageList)
|
|
|
|
+ this.HorizontalLargeImageList.splice(index, 1)
|
|
|
|
+ },
|
|
|
|
+ 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() {},
|
|
|
|
+ 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) {
|
|
|
|
+ if (n != '') {
|
|
|
|
+ this.getTags()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ materialType: function(n, o) {
|
|
|
|
+ this.materialTypeChange()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ 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.HorizontalLargeImageListZu.length +
|
|
|
|
+ this.HorizontalLargeImageListSmall.length +
|
|
|
|
+ this.HorizontalLargeImageListBigShu.length
|
|
|
|
+ return bool
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+<style lang="scss">
|
|
|
|
+.dynamically_add_form_item {
|
|
|
|
+ .ant-form-item-label {
|
|
|
|
+ width: auto !important;
|
|
|
|
+ }
|
|
|
|
+ .ant-form-item-control-wrapper {
|
|
|
|
+ width: auto !important;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|