|
@@ -1,26 +1,132 @@
|
|
|
<template>
|
|
|
<a-card :body-style="{padding: '24px 32px'}" :bordered="false">
|
|
|
<a-form @submit="handleSubmit" :form="form">
|
|
|
+ <a-form-item
|
|
|
+ label="选择头条账户"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-select
|
|
|
+ v-model="accountId"
|
|
|
+ showSearch
|
|
|
+ placeholder="选择头条账户"
|
|
|
+ optionFilterProp="children"
|
|
|
+ style="width: 200px"
|
|
|
+ :filterOption="filterOption"
|
|
|
+ >
|
|
|
+ <a-select-option v-for="user in userList" :key="user.accountId" :value="user.accountId">{{user.advertiserName}}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ label="选择广告组模板"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-select
|
|
|
+ v-model="campaignId"
|
|
|
+ showSearch
|
|
|
+ placeholder="选择广告主模板"
|
|
|
+ optionFilterProp="children"
|
|
|
+ style="width: 200px"
|
|
|
+ :filterOption="filterOption"
|
|
|
+ >
|
|
|
+ <a-select-option v-for="campaign in campaignList" :key="campaign.id" :value="campaign.id">{{campaign.campaignName}}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ label="投放范围"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-radio-group v-model="deliveryRange">
|
|
|
+ <a-radio-button value="DEFAULT">默认</a-radio-button>
|
|
|
+ <a-radio-button value="UNION">穿山甲</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="选择用户定向模板"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-select
|
|
|
+ v-model="userorentationId"
|
|
|
+ showSearch
|
|
|
+ placeholder="选择用户定向模板"
|
|
|
+ optionFilterProp="children"
|
|
|
+ style="width: 200px"
|
|
|
+ :filterOption="filterOption"
|
|
|
+ >
|
|
|
+ <a-select-option value="0">默认</a-select-option>
|
|
|
+ <!--<a-select-option v-for="userorentation in userorentationList" :key="userorentation.id" :value="userorentation.id">{{userorentation.name}}</a-select-option>-->
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ label="选择预算与出价模板"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-select
|
|
|
+ v-model="budgetId"
|
|
|
+ showSearch
|
|
|
+ placeholder="选择预算与出价模板"
|
|
|
+ optionFilterProp="children"
|
|
|
+ style="width: 200px"
|
|
|
+ :filterOption="filterOption"
|
|
|
+ >
|
|
|
+ <a-select-option v-for="budget in budgetList" :key="budget.id" :value="budget.id">{{budget.name}}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
|
|
|
<a-form-item
|
|
|
- label="选择广告计划"
|
|
|
+ label="选择投放目标模板"
|
|
|
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
:wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
<a-select
|
|
|
v-model="deliverytargetId"
|
|
|
showSearch
|
|
|
- placeholder="选择广告计划"
|
|
|
+ placeholder="选择投放目标模板"
|
|
|
optionFilterProp="children"
|
|
|
style="width: 200px"
|
|
|
- @focus="handleFocus"
|
|
|
- @blur="handleBlur"
|
|
|
- @change="handleChange"
|
|
|
:filterOption="filterOption"
|
|
|
>
|
|
|
<a-select-option v-for="deliverytarget in deliverytargetList" :key="deliverytarget.id" :value="deliverytarget.id">{{deliverytarget.name}}</a-select-option>
|
|
|
</a-select>
|
|
|
</a-form-item>
|
|
|
|
|
|
+ <a-form-item
|
|
|
+ label="广告位置"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-radio-group v-model="advertiseLocation" @change="changeLoaction">
|
|
|
+ <a-radio-button value="great">优选广告位</a-radio-button>
|
|
|
+ <a-radio-button value="media">按媒体指定位置</a-radio-button>
|
|
|
+ <a-radio-button value="sence">按场景指定位置</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ label="媒体指定"
|
|
|
+ v-if="showMedia"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-checkbox-group v-model="inventoryType">
|
|
|
+ <a-checkbox value="INVENTORY_FEED">今日头条</a-checkbox>
|
|
|
+ <a-checkbox value="INVENTORY_VIDEO_FEED">西瓜视频</a-checkbox>
|
|
|
+ <a-checkbox value="INVENTORY_HOTSOON_FEED">火山小视频</a-checkbox>
|
|
|
+ <a-checkbox value="INVENTORY_AWEME_FEED">抖音</a-checkbox>
|
|
|
+ <a-checkbox value="INVENTORY_UNION_SLOT">穿山甲</a-checkbox>
|
|
|
+ </a-checkbox-group>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ label="场景选择"
|
|
|
+ v-if="showSence"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-radio-group v-model="sceneInventory">
|
|
|
+ <a-radio-button value="VIDEO_SCENE">沉浸式竖版视频场景广告位</a-radio-button>
|
|
|
+ <a-radio-button value="FEED_SCENE">信息流场景广告位</a-radio-button>
|
|
|
+ <a-radio-button value="TAIL_SCENE">视频后贴和尾帧场景广告位</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
|
|
|
<a-form-item
|
|
|
label="创意方式"
|
|
@@ -28,72 +134,257 @@
|
|
|
:wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
<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="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-radio-group v-model="materialAddType">
|
|
|
+ <a-radio-button value="customize">自定义上传</a-radio-button>
|
|
|
+ <!--<a-radio-button value="program">程序化创意</a-radio-button>-->
|
|
|
</a-radio-group>
|
|
|
</a-form-item>
|
|
|
<a-form-item
|
|
|
- label="上传视频"
|
|
|
+ label="选择素材类型"
|
|
|
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
:wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
- <a-upload
|
|
|
- name="multipartFile"
|
|
|
- :multiple="true"
|
|
|
- action="/jeecg-boot/upload/video?type=bytedance"
|
|
|
- :headers="headers"
|
|
|
- @change="videoChange">
|
|
|
- <a-button><a-icon type="upload" /> 点击上传</a-button>
|
|
|
- </a-upload>
|
|
|
+ <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-radio-group>
|
|
|
</a-form-item>
|
|
|
|
|
|
<a-form-item
|
|
|
- label="上传封面"
|
|
|
+ v-if="showLargeImage"
|
|
|
+ label="大图横图图片素材上传"
|
|
|
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
:wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
- <a-upload
|
|
|
- name="multipartFile"
|
|
|
- listType="picture-card"
|
|
|
- class="avatar-uploader"
|
|
|
- :showUploadList="false"
|
|
|
- action="/jeecg-boot/upload/image?type=bytedance"
|
|
|
- :beforeUpload="beforeUpload"
|
|
|
- @change="imageChange"
|
|
|
- >
|
|
|
- <img v-if="imageUrl" :src="imageUrl" alt="上传封面" />
|
|
|
- <div v-else>
|
|
|
- <a-icon :type="loading ? 'loading' : 'plus'" />
|
|
|
- <div class="上传封面">Upload</div>
|
|
|
- </div>
|
|
|
- </a-upload>
|
|
|
+ <upload-to-ali v-model="horizonImageUrl"
|
|
|
+ :customDomain="customDomain"
|
|
|
+ preview
|
|
|
+ :region="region"
|
|
|
+ :bucket="bucket"
|
|
|
+ :accept="acceptImage"
|
|
|
+ :size="102400"
|
|
|
+ :accessKeyId="accessKeyId"
|
|
|
+ :accessKeySecret="accessKeySecret"></upload-to-ali>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ v-if="showLargeImage"
|
|
|
+ label="大图横图创意标题"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-input v-model="horizonImageCreativeText"></a-input>
|
|
|
</a-form-item>
|
|
|
|
|
|
<a-form-item
|
|
|
- label="创意分类"
|
|
|
+ v-if="showHorizonVideo"
|
|
|
+ label="横版视频素材上传"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <upload-to-ali v-model="horizonVideoUrl"
|
|
|
+ :customDomain="customDomain"
|
|
|
+ preview
|
|
|
+ :region="region"
|
|
|
+ :bucket="bucket"
|
|
|
+ :accept="acceptVideo"
|
|
|
+ :max="1"
|
|
|
+ :size="1024000"
|
|
|
+ :accessKeyId="accessKeyId"
|
|
|
+ :accessKeySecret="accessKeySecret"></upload-to-ali>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="横版视频封面上传"
|
|
|
+ v-if="showHorizonVideo"
|
|
|
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
:wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
- <a-input v-model="creativeText"></a-input>
|
|
|
+ <upload-to-ali v-model="horizonVideoCoverImageUrl"
|
|
|
+ :customDomain="customDomain"
|
|
|
+ preview
|
|
|
+ :region="region"
|
|
|
+ :bucket="bucket"
|
|
|
+ :accept="acceptImage"
|
|
|
+ :max="1"
|
|
|
+ :accessKeyId="accessKeyId"
|
|
|
+ :accessKeySecret="accessKeySecret"></upload-to-ali>
|
|
|
</a-form-item>
|
|
|
|
|
|
<a-form-item
|
|
|
- label="创意标签"
|
|
|
+ v-if="showHorizonVideo"
|
|
|
+ label="横版视频创意标题"
|
|
|
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
:wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
- <a-input v-model="creativeText"></a-input>
|
|
|
+ <a-input v-model="horizonVideoCreativeText"></a-input>
|
|
|
</a-form-item>
|
|
|
|
|
|
<a-form-item
|
|
|
- label="创意文案"
|
|
|
+ v-if="showVerticalVideo"
|
|
|
+ label="竖版视频素材上传"
|
|
|
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
:wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
- <a-input v-model="creativeText"></a-input>
|
|
|
+ <upload-to-ali v-model="verticalVideoUrl"
|
|
|
+ :customDomain="customDomain"
|
|
|
+ preview
|
|
|
+ :region="region"
|
|
|
+ :bucket="bucket"
|
|
|
+ :accept="acceptVideo"
|
|
|
+ :size="1024000"
|
|
|
+ :max="1"
|
|
|
+ :accessKeyId="accessKeyId"
|
|
|
+ :accessKeySecret="accessKeySecret"></upload-to-ali>
|
|
|
</a-form-item>
|
|
|
+
|
|
|
<a-form-item
|
|
|
- label="迭代数量"
|
|
|
+ v-if="showVerticalVideo"
|
|
|
+ label="竖版视频封面上传"
|
|
|
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
:wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
- <a-input-number :min="0" :max="10" v-model="iteratorNum" @change="onChange"/>
|
|
|
+ <upload-to-ali v-model="verticalVideoCoverImageUrl"
|
|
|
+ :customDomain="customDomain"
|
|
|
+ preview
|
|
|
+ :region="region"
|
|
|
+ :bucket="bucket"
|
|
|
+ :accept="acceptImage"
|
|
|
+ :size="1024000"
|
|
|
+ :max="1"
|
|
|
+ :accessKeyId="accessKeyId"
|
|
|
+ :accessKeySecret="accessKeySecret"></upload-to-ali>
|
|
|
</a-form-item>
|
|
|
|
|
|
+ <a-form-item
|
|
|
+ v-if="showVerticalVideo"
|
|
|
+ label="竖版视频创意标题"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-input v-model="verticalVideoCreativeText"></a-input>
|
|
|
+ </a-form-item>
|
|
|
|
|
|
+ <a-form-item
|
|
|
+ v-if="showGroupImage"
|
|
|
+ label="组图图片素材上传"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <upload-to-ali v-model="groupImageUrl" :customDomain="customDomain" :onClick="onClick"
|
|
|
+ preview
|
|
|
+ multiple
|
|
|
+ :region="region"
|
|
|
+ :bucket="bucket"
|
|
|
+ :accept="acceptImage"
|
|
|
+ :max="3"
|
|
|
+ :accessKeyId="accessKeyId"
|
|
|
+ :accessKeySecret="accessKeySecret"></upload-to-ali>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ v-if="showGroupImage"
|
|
|
+ label="组图创意标题"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-input v-model="groupImageCreativeText"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ v-if="showSmallImage"
|
|
|
+ label="小图图片素材上传"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <upload-to-ali v-model="smallImageUrl" :customDomain="customDomain" :onClick="onClick"
|
|
|
+ preview
|
|
|
+ :max="1"
|
|
|
+ :region="region"
|
|
|
+ :bucket="bucket"
|
|
|
+ :accept="acceptImage"
|
|
|
+ :accessKeyId="accessKeyId"
|
|
|
+ :accessKeySecret="accessKeySecret"></upload-to-ali>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ v-if="showSmallImage"
|
|
|
+ label="小图创意标题"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-input v-model="smallImageCreativeText"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ v-if="showLargeVerticalImage"
|
|
|
+ label="大图竖图图片素材上传"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <upload-to-ali v-model="verticalImageUrl" :customDomain="customDomain"
|
|
|
+ preview
|
|
|
+ :region="region"
|
|
|
+ :bucket="bucket"
|
|
|
+ :accept="acceptImage"
|
|
|
+ :max="1"
|
|
|
+ :accessKeyId="accessKeyId"
|
|
|
+ :accessKeySecret="accessKeySecret"></upload-to-ali>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ v-if="showLargeVerticalImage"
|
|
|
+ label="大图竖图创意标题"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-input v-model="verticalImageCreativeText"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ label="应用下载详情页"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-input v-model="webUrl"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="应用名"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-input v-model="appName"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="广告评论"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-radio-group v-model="isCommentDisable ">
|
|
|
+ <a-radio-button value="0">关闭</a-radio-button>
|
|
|
+ <a-radio-button value="1">开启</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="创意展现"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-radio-group v-model="creativeDisplayMode">
|
|
|
+ <a-radio-button value="CREATIVE_DISPLAY_MODE_CTR">优选模式</a-radio-button>
|
|
|
+ <a-radio-button value="CREATIVE_DISPLAY_MODE_RANDOM">轮播模式</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ label="创意分类"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-cascader :options="options" width="200px" v-model="adCategory" @change="onChange" placeholder="请选择分类" />
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ label="创意标签"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-select mode="tags" style="width: 100%" :tokenSeparators="[',']" v-model="adKeywords">
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ label="迭代数量"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
+ <a-input-number :min="0" :max="10" v-model="iteratorNum"/>
|
|
|
+ </a-form-item>
|
|
|
|
|
|
<a-form-item
|
|
|
:wrapperCol="{ span: 24 }"
|
|
@@ -107,99 +398,161 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {deleteAction, postAction, getAction} from '@/api/manage'
|
|
|
- import $ from 'jquery'
|
|
|
+ import UploadToAli from '@femessage/upload-to-ali';
|
|
|
+ import {postAction, getAction} from '@/api/manage';
|
|
|
import moment from 'moment';
|
|
|
- function getBase64 (img, callback) {
|
|
|
- const reader = new FileReader()
|
|
|
- reader.addEventListener('load', () => callback(reader.result))
|
|
|
- reader.readAsDataURL(img)
|
|
|
- }
|
|
|
|
|
|
export default {
|
|
|
name: 'BaseForm',
|
|
|
data() {
|
|
|
return {
|
|
|
- headers: {
|
|
|
- authorization: 'authorization-text',
|
|
|
- },
|
|
|
- videoId:0,
|
|
|
- imageId:0,
|
|
|
- loading: false,
|
|
|
- imageUrl: '',
|
|
|
- iteratorNum:1,
|
|
|
campaignList: {},
|
|
|
deliverytargetList:{},
|
|
|
+ userList:{},
|
|
|
userorentationList:{},
|
|
|
budgetList:{},
|
|
|
- creativeType:'customize',
|
|
|
- creativeText:'',
|
|
|
deliveryRange:'default',
|
|
|
campaignId:null,
|
|
|
deliverytargetId:null,
|
|
|
budgetId:null,
|
|
|
userorentationId:null,
|
|
|
+ adCategory:null,
|
|
|
+ showLargeImage:true,
|
|
|
+ showLargeVerticalImage:false,
|
|
|
+ showHorizonVideo:false,
|
|
|
+ showVerticalVideo:false,
|
|
|
+ showGroupImage:false,
|
|
|
+ showSmallImage:false,
|
|
|
+ horizonImageUrl:'',
|
|
|
+ horizonImageCreativeText:'',
|
|
|
+ horizonVideoUrl:'',
|
|
|
+ horizonVideoCoverImageUrl:'',
|
|
|
+ horizonVideoCreativeText:'',
|
|
|
+ verticalVideoUrl:'',
|
|
|
+ verticalVideoCoverImageUrl:'',
|
|
|
+ verticalVideoCreativeText:'',
|
|
|
+ groupImageUrl:'',
|
|
|
+ groupImageCreativeText:'',
|
|
|
+ smallImageUrl:'',
|
|
|
+ smallImageCreativeText:'',
|
|
|
+ verticalImageUrl:'',
|
|
|
+ verticalImageCreativeText:'',
|
|
|
+ accessKeyId:'LTAIbNbqWzSOklQV',
|
|
|
+ accessKeySecret:'1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
|
|
|
+ bucket:'ctop-media',
|
|
|
+ region:'oss-cn-beijing',
|
|
|
+ acceptImage:'image/jpeg,image/png',
|
|
|
+ acceptVideo:'video/mpeg,video/mp4',
|
|
|
+ customDomain:'',
|
|
|
+ options:[],
|
|
|
+ adKeywords:[],
|
|
|
+ userList:{},
|
|
|
+ accountId:'',
|
|
|
+ planList:{},
|
|
|
+ planId:'',
|
|
|
+ advertiseLocation:'great',
|
|
|
+ showMedia:false,
|
|
|
+ showSence:false,
|
|
|
+ inventoryType:[],
|
|
|
+ sceneInventory:'FEED_SENCE',
|
|
|
+ creativeType:'customize',
|
|
|
+ materialAddType:'customize',
|
|
|
+ materialType:'CREATIVE_IMAGE_MODE_LARGE',
|
|
|
+ webUrl:'',
|
|
|
+ appName:'',
|
|
|
+ advancedCreativeTitle:'',
|
|
|
+ isCommentDisable:'1',
|
|
|
+ creativeDisplayMode:'CREATIVE_DISPLAY_MODE_CTR',
|
|
|
+ loading: false,
|
|
|
+ iteratorNum:1,
|
|
|
+ creativeText:'',
|
|
|
form: this.$form.createForm(this),
|
|
|
url: {
|
|
|
- dictListUrl: 'toutiao/dictitem/list',
|
|
|
- campaignTemplateListUrl:'/template/campaign/list',
|
|
|
+ userAllocationList:'/template/allocation/list',
|
|
|
+ planListUrl:'template/plan/data/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',
|
|
|
- insertUrl:'/template/advertiserplan/insert'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ components:{
|
|
|
+ UploadToAli
|
|
|
+ },
|
|
|
methods: {
|
|
|
- moment,
|
|
|
- videoChange(info) {
|
|
|
- if (info.file.status !== 'uploading') {
|
|
|
- console.log(info.file, info.fileList);
|
|
|
+ filterOption(input, option) {
|
|
|
+ return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
+ },
|
|
|
+ materialTypeChange(){
|
|
|
+ let type = this.materialType;
|
|
|
+ if(type === 'CREATIVE_IMAGE_MODE_SMALL'){
|
|
|
+ this.showLargeImage=false;
|
|
|
+ this.showLargeVerticalImage=false;
|
|
|
+ this.showHorizonVideo=false;
|
|
|
+ this.showVerticalVideo=false;
|
|
|
+ this.showGroupImage=false;
|
|
|
+ this.showSmallImage=true;
|
|
|
}
|
|
|
- if (info.file.status === 'done') {
|
|
|
- let response = info.file.response;
|
|
|
- this.$message.success(`${info.file.name} 文件上传成功`);
|
|
|
- videoId = response.fileInfo.id;
|
|
|
- } else if (info.file.status === 'error') {
|
|
|
- this.$message.error(`${info.file.name} file upload failed.`);
|
|
|
+ if(type === 'CREATIVE_IMAGE_MODE_LARGE'){
|
|
|
+ this.showLargeImage=true;
|
|
|
+ this.showLargeVerticalImage=false;
|
|
|
+ this.showHorizonVideo=false;
|
|
|
+ this.showVerticalVideo=false;
|
|
|
+ this.showGroupImage=false;
|
|
|
+ this.showSmallImage=false;
|
|
|
}
|
|
|
- },
|
|
|
- imageChange (info) {
|
|
|
- if (info.file.status === 'uploading') {
|
|
|
- this.loading = true
|
|
|
- return
|
|
|
+ if(type === 'CREATIVE_IMAGE_MODE_GROUP'){
|
|
|
+ this.showLargeImage=false;
|
|
|
+ this.showLargeVerticalImage=false;
|
|
|
+ this.showHorizonVideo=false;
|
|
|
+ this.showVerticalVideo=false;
|
|
|
+ this.showGroupImage=true;
|
|
|
+ this.showSmallImage=false;
|
|
|
}
|
|
|
- if (info.file.status === 'done') {
|
|
|
- console.log(info);
|
|
|
- let response = info.file.response;
|
|
|
- if(response.success){
|
|
|
- this.$message.success(`${info.file.name} 文件上传成功`);
|
|
|
- this.imageUrl = response.fileInfo.fileUrl;
|
|
|
- videoId = response.fileInfo.id;
|
|
|
- }
|
|
|
- // Get this url from response in real world.
|
|
|
- // getBase64(info.file.originFileObj, (imageUrl) => {
|
|
|
- // this.imageUrl = imageUrl
|
|
|
- // this.loading = false
|
|
|
- // })
|
|
|
+ if(type === 'CREATIVE_IMAGE_MODE_VIDEO'){
|
|
|
+ this.showLargeImage=false;
|
|
|
+ this.showLargeVerticalImage=false;
|
|
|
+ this.showHorizonVideo=true;
|
|
|
+ this.showVerticalVideo=false;
|
|
|
+ this.showGroupImage=false;
|
|
|
+ this.showSmallImage=false;
|
|
|
}
|
|
|
- },
|
|
|
- beforeUpload (file) {
|
|
|
- const isJPG = file.type === 'image/jpeg'
|
|
|
- if (!isJPG) {
|
|
|
- this.$message.error('请上传图片文件!')
|
|
|
+ if(type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL'){
|
|
|
+ this.showLargeImage=false;
|
|
|
+ this.showLargeVerticalImage=true;
|
|
|
+ this.showHorizonVideo=false;
|
|
|
+ this.showVerticalVideo=false;
|
|
|
+ this.showGroupImage=false;
|
|
|
+ this.showSmallImage=false;
|
|
|
+ }
|
|
|
+ if(type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'){
|
|
|
+ this.showLargeImage = false;
|
|
|
+ this.showLargeVerticalImage=false;
|
|
|
+ this.showHorizonVideo=false;
|
|
|
+ this.showVerticalVideo=true;
|
|
|
+ this.showGroupImage=false;
|
|
|
+ this.showSmallImage=false;
|
|
|
}
|
|
|
- return isJPG;
|
|
|
- },
|
|
|
- handleChange (value) {
|
|
|
- console.log(`selected ${value}`);
|
|
|
- },
|
|
|
- handleBlur() {
|
|
|
- console.log('blur');
|
|
|
},
|
|
|
- handleFocus() {
|
|
|
- console.log('focus');
|
|
|
+ moment,
|
|
|
+ changeLoaction(){
|
|
|
+ if(this.advertiseLocation === 'great'){
|
|
|
+ this.showMedia = false;
|
|
|
+ this.showSence = false;
|
|
|
+ }
|
|
|
+ if(this.advertiseLocation === 'media'){
|
|
|
+ this.showMedia = true;
|
|
|
+ this.showSence = false;
|
|
|
+ }
|
|
|
+ if(this.advertiseLocation === 'sence'){
|
|
|
+ this.showMedia = false;
|
|
|
+ this.showSence = true;
|
|
|
+ }
|
|
|
},
|
|
|
+ // this.$message.success(`${info.file.name} 文件上传成功`);
|
|
|
filterOption(input, option) {
|
|
|
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
},
|
|
@@ -210,14 +563,38 @@
|
|
|
console.log('Received values of form: ', values);
|
|
|
|
|
|
let params = {};
|
|
|
- params.campaignTemplateId = this.campaignId;
|
|
|
+ params.campaignId = this.campaignId;
|
|
|
params.deliveryRange = this.deliveryRange;
|
|
|
- params.userOrentationTemplateId = this.userorentationId;
|
|
|
- params.budgetTemplateId = this.budgetId;
|
|
|
- params.deliveryTargetTemplateId = this.deliverytargetId;
|
|
|
- params.videoId = this.videoId;
|
|
|
- params.imageId = this.imageId;
|
|
|
- params.creativeText = this.creativeText;
|
|
|
+ params.userorentationId = this.userorentationId;
|
|
|
+ params.budgetId = this.budgetId;
|
|
|
+ params.deliverytargetId = this.deliverytargetId;
|
|
|
+ params.horizonImageUrl=this.horizonImageUrl;
|
|
|
+ params.horizonImageCreativeText=this.horizonImageCreativeText;
|
|
|
+ params.horizonVideoUrl=this.horizonVideoUrl;
|
|
|
+ params.horizonVideoCoverImageUrl=this.horizonVideoCoverImageUrl;
|
|
|
+ params.horizonVideoCreativeText=this.horizonVideoCreativeText;
|
|
|
+ params.verticalVideoUrl=this.verticalVideoUrl;
|
|
|
+ params.verticalVideoCoverImageUrl=this.verticalVideoCoverImageUrl;
|
|
|
+ params.verticalVideoCreativeText=this.verticalVideoCreativeText;
|
|
|
+ params.groupImageUrl=this.groupImageUrl;
|
|
|
+ params.groupImageCreativeText=this.groupImageCreativeText;
|
|
|
+ params.smallImageUrl=this.smallImageUrl;
|
|
|
+ params.smallImageCreativeText=this.smallImageCreativeText;
|
|
|
+ params.verticalImageUrl=this.verticalImageUrl;
|
|
|
+ params.verticalImageCreativeText=this.verticalImageCreativeText;
|
|
|
+ params.planId=this.planId;
|
|
|
+ params.accountId=this.accountId;
|
|
|
+ params.advertiseLocation=this.advertiseLocation;
|
|
|
+ params.inventoryType=this.inventoryType;
|
|
|
+ params.sceneInventory=this.sceneInventory;
|
|
|
+ params.creativeType=this.creativeType;
|
|
|
+ params.customize=this.customize;
|
|
|
+ params.webUrl=this.webUrl;
|
|
|
+ params.appName=this.appName;
|
|
|
+ params.isCommentDisable=this.isCommentDisable;
|
|
|
+ params.creativeDisplayMode=this.creativeDisplayMode;
|
|
|
+ params.adCategory=this.adCategory;
|
|
|
+ params.adKeywords=this.adKeywords;
|
|
|
params.iteratorNum = this.iteratorNum;
|
|
|
|
|
|
console.log(params)
|
|
@@ -237,8 +614,7 @@
|
|
|
},
|
|
|
created: function () {
|
|
|
let params = {};
|
|
|
- params.pageSize = '1000';
|
|
|
- postAction(this.url.campaignTemplateListUrl, params).then((res) => {
|
|
|
+ postAction(this.url.campaignListUrl,params).then((res) => {
|
|
|
if (res.success) {
|
|
|
this.campaignList = res.result.records
|
|
|
}
|
|
@@ -246,6 +622,19 @@
|
|
|
|
|
|
params = {};
|
|
|
params.pageSize = '1000';
|
|
|
+ params.mediaId='1';
|
|
|
+ postAction(this.url.userAllocationList, params).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.userList = res.result.records
|
|
|
+ }
|
|
|
+ });
|
|
|
+ params = {};
|
|
|
+ getAction(this.url.industryListUrl, params).then((res) => {
|
|
|
+ this.options = res;
|
|
|
+ });
|
|
|
+
|
|
|
+ params = {};
|
|
|
+ params.pageSize = '1000';
|
|
|
postAction(this.url.budgetTemplateListUrl, params).then((res) => {
|
|
|
if (res.success) {
|
|
|
this.budgetList = res.result.records
|
|
@@ -254,6 +643,15 @@
|
|
|
|
|
|
params = {};
|
|
|
params.pageSize = '1000';
|
|
|
+ params.mediaId='1';
|
|
|
+ postAction(this.url.userAllocationList, params).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.userList = res.result.records
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ params = {};
|
|
|
+ params.pageSize = '1000';
|
|
|
postAction(this.url.deliverytargetTemplateListUrl, params).then((res) => {
|
|
|
if (res.success) {
|
|
|
this.deliverytargetList = res.result.records
|
|
@@ -267,6 +665,7 @@
|
|
|
this.userorentationList = res.result.records
|
|
|
}
|
|
|
});
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|