create.vue 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892
  1. <template>
  2. <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
  3. <a-form @submit="handleSubmit" :form="form">
  4. <a-form-item label="选择头条账户" :labelCol="labelCol" :wrapperCol="wrapperCol">
  5. <a-select
  6. v-model="accountId"
  7. showSearch
  8. placeholder="选择头条账户"
  9. optionFilterProp="children"
  10. style="width: 200px"
  11. :filterOption="filterOption"
  12. >
  13. <a-select-option
  14. v-for="user in userList"
  15. :key="user.accountId"
  16. :value="user.accountId"
  17. >{{user.authName}}</a-select-option>
  18. </a-select>
  19. </a-form-item>
  20. <a-form-item label="选择广告组模板" :labelCol="labelCol" :wrapperCol="wrapperCol">
  21. <a-select
  22. v-model="campaignId"
  23. showSearch
  24. placeholder="选择广告主模板"
  25. optionFilterProp="children"
  26. style="width: 200px"
  27. :filterOption="filterOption"
  28. >
  29. <a-select-option
  30. v-for="campaign in campaignList"
  31. :key="campaign.id"
  32. :value="campaign.id"
  33. >{{campaign.campaignName}}</a-select-option>
  34. </a-select>
  35. </a-form-item>
  36. <!--<a-form-item
  37. label="选择用户定向模板"
  38. :labelCol="labelCol"
  39. :wrapperCol="wrapperCol">
  40. <a-select
  41. v-model="userorentationId"
  42. showSearch
  43. placeholder="选择用户定向模板"
  44. optionFilterProp="children"
  45. style="width: 200px"
  46. :filterOption="filterOption"
  47. >
  48. <a-select-option value="0">默认</a-select-option>
  49. </a-select>
  50. </a-form-item>-->
  51. <a-form-item label="选择预算与出价模板" :labelCol="labelCol" :wrapperCol="wrapperCol">
  52. <a-select
  53. v-model="budgetId"
  54. showSearch
  55. placeholder="选择预算与出价模板"
  56. optionFilterProp="children"
  57. style="width: 200px"
  58. :filterOption="filterOption"
  59. >
  60. <a-select-option
  61. v-for="budget in budgetList"
  62. :key="budget.id"
  63. :value="budget.id"
  64. >{{budget.name}}</a-select-option>
  65. </a-select>
  66. </a-form-item>
  67. <a-form-item label="选择投放目标模板" :labelCol="labelCol" :wrapperCol="wrapperCol">
  68. <a-select
  69. v-model="deliverytargetId"
  70. showSearch
  71. placeholder="选择投放目标模板"
  72. optionFilterProp="children"
  73. style="width: 200px"
  74. :filterOption="filterOption"
  75. @change="changedeliveryTarget"
  76. >
  77. <a-select-option
  78. v-for="deliverytarget in deliverytargetList"
  79. :key="deliverytarget.id"
  80. :value="deliverytarget.id"
  81. >{{deliverytarget.name}}</a-select-option>
  82. </a-select>
  83. </a-form-item>
  84. <a-form-item
  85. v-if="showConvertTarget"
  86. label="选择转化跟踪方式"
  87. :labelCol="labelCol"
  88. :wrapperCol="wrapperCol"
  89. >
  90. <a-select
  91. v-model="convertType"
  92. showSearch
  93. placeholder="选择投放目标模板"
  94. optionFilterProp="children"
  95. style="width: 200px"
  96. :filterOption="filterOption"
  97. @change="changeConvertType"
  98. >
  99. <a-select-option v-if="showSimple" value="SIMPLE">普通应用下载</a-select-option>
  100. <a-select-option value="API">应用下载API</a-select-option>
  101. </a-select>
  102. </a-form-item>
  103. <a-form-item
  104. v-if="showConvertTarget&&showConvertTargetSimple"
  105. label="选择转化目标"
  106. :labelCol="labelCol"
  107. :wrapperCol="wrapperCol"
  108. >
  109. <a-select
  110. v-model="simpleDeliverytarget"
  111. showSearch
  112. placeholder="选择转化目标"
  113. optionFilterProp="children"
  114. style="width: 200px"
  115. :filterOption="filterOption"
  116. >
  117. <a-select-option value="AD_CONVERT_TYPE_INSTALL_FINISH">安装完成</a-select-option>
  118. <a-select-option value="AD_CONVERT_TYPE_DOWNLOAD_FINiSH">下载完成</a-select-option>
  119. </a-select>
  120. </a-form-item>
  121. <a-form-item
  122. v-if="showConvertTarget&&showConvertTargetApi"
  123. label="选择转化目标"
  124. :labelCol="labelCol"
  125. :wrapperCol="wrapperCol"
  126. >
  127. <a-select
  128. v-model="convertId"
  129. showSearch
  130. placeholder="选择转化目标"
  131. optionFilterProp="children"
  132. style="width: 800px"
  133. :filterOption="filterOption"
  134. >
  135. <a-select-option
  136. v-for="activeConvert in activeConvertList"
  137. :key="activeConvert.id"
  138. :value="activeConvert.id"
  139. >{{activeConvert.name}}</a-select-option>
  140. </a-select>
  141. </a-form-item>
  142. <a-form-item label="广告创意名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
  143. <a-input v-model="name"></a-input>
  144. </a-form-item>
  145. <a-form-item label="广告位置" :labelCol="labelCol" :wrapperCol="wrapperCol">
  146. <a-radio-group v-model="advertiseLocation" @change="changeLoaction">
  147. <a-radio-button value="great">优选广告位</a-radio-button>
  148. <a-radio-button value="media">按媒体指定位置</a-radio-button>
  149. <a-radio-button value="sence">按场景指定位置</a-radio-button>
  150. </a-radio-group>
  151. </a-form-item>
  152. <a-form-item label="媒体指定" v-if="showMedia" :labelCol="labelCol" :wrapperCol="wrapperCol">
  153. <a-checkbox-group v-model="inventoryType">
  154. <a-checkbox value="INVENTORY_FEED">今日头条</a-checkbox>
  155. <a-checkbox value="INVENTORY_VIDEO_FEED">西瓜视频</a-checkbox>
  156. <a-checkbox value="INVENTORY_HOTSOON_FEED">火山小视频</a-checkbox>
  157. <a-checkbox value="INVENTORY_AWEME_FEED">抖音</a-checkbox>
  158. <a-checkbox value="INVENTORY_UNION_SLOT">穿山甲</a-checkbox>
  159. </a-checkbox-group>
  160. </a-form-item>
  161. <a-form-item label="场景选择" v-if="showSence" :labelCol="labelCol" :wrapperCol="wrapperCol">
  162. <a-radio-group v-model="sceneInventory">
  163. <a-radio-button value="VIDEO_SCENE">沉浸式竖版视频场景广告位</a-radio-button>
  164. <a-radio-button value="FEED_SCENE">信息流场景广告位</a-radio-button>
  165. <a-radio-button value="TAIL_SCENE">视频后贴和尾帧场景广告位</a-radio-button>
  166. </a-radio-group>
  167. </a-form-item>
  168. <a-form-item label="创意方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
  169. <a-radio-group v-model="creativeType">
  170. <a-radio-button value="customize">自定义创意</a-radio-button>
  171. <!--<a-radio-button value="program">程序化创意</a-radio-button>-->
  172. </a-radio-group>
  173. </a-form-item>
  174. <a-form-item label="素材添加方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
  175. <a-radio-group v-model="materialAddType">
  176. <a-radio-button value="customize">自定义上传</a-radio-button>
  177. <!--<a-radio-button value="program">程序化创意</a-radio-button>-->
  178. </a-radio-group>
  179. </a-form-item>
  180. <a-form-item label="选择素材类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
  181. <a-radio-group v-model="materialType" @change="materialTypeChange">
  182. <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE">大图横图</a-radio-button>
  183. <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO">横版视频</a-radio-button>
  184. <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">竖版视频</a-radio-button>
  185. <a-radio-button value="CREATIVE_IMAGE_MODE_GROUP">组图</a-radio-button>
  186. <a-radio-button value="CREATIVE_IMAGE_MODE_SMALL">小图</a-radio-button>
  187. <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE_VERTICAL">大图竖图</a-radio-button>
  188. </a-radio-group>
  189. </a-form-item>
  190. <!-- 创建大图横图创意 -->
  191. <a-form-item label="创建大图横图创意" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="createLargeImageCreativeCon">
  192. <a-layout>
  193. <a-layout-content style="padding:10px;">
  194. <div :style="{ marginBottom: '16px' }">
  195. <a-button @click="addCreative()">添加创意</a-button>
  196. </div>
  197. <a-row>
  198. <a-col :span="8" v-for="(item,index) of HorizontalLargeImageList" :key="index">
  199. <a-card title="" :ref="item">
  200. <a-icon type="close" style="float:right;cursor: pointer;" @click="deleteCreative(index)"/>
  201. <div style="clear:both"></div>
  202. <div class="dynamically_add_form_item">
  203. <a-form-item
  204. class
  205. label="素材上传"
  206. :labelCol="labelCol"
  207. :wrapperCol="wrapperCol"
  208. >
  209. <upload-to-ali
  210. v-model="horizonImageUrlColl[index]"
  211. :customDomain="customDomain"
  212. preview
  213. :region="region"
  214. :bucket="bucket"
  215. :accept="acceptImage"
  216. :size="102400"
  217. :accessKeyId="accessKeyId"
  218. :accessKeySecret="accessKeySecret"
  219. ></upload-to-ali>
  220. </a-form-item>
  221. <a-form-item
  222. label="创意标题"
  223. :labelCol="labelCol"
  224. :wrapperCol="wrapperCol"
  225. >
  226. <a-input v-model="horizonImageCreativeTextColl[index]"></a-input>
  227. </a-form-item>
  228. </div>
  229. </a-card>
  230. </a-col>
  231. </a-row>
  232. </a-layout-content>
  233. </a-layout>
  234. </a-form-item>
  235. <!-- 创建大图横图创意 E -->
  236. <!-- <a-form-item
  237. v-if="showLargeImage"
  238. label="大图横图图片素材上传"
  239. :labelCol="labelCol"
  240. :wrapperCol="wrapperCol"
  241. >
  242. <upload-to-ali
  243. v-model="horizonImageUrl"
  244. :customDomain="customDomain"
  245. preview
  246. :region="region"
  247. :bucket="bucket"
  248. :accept="acceptImage"
  249. :size="102400"
  250. :accessKeyId="accessKeyId"
  251. :accessKeySecret="accessKeySecret"
  252. ></upload-to-ali>
  253. </a-form-item>
  254. <a-form-item
  255. v-if="showLargeImage"
  256. label="大图横图创意标题"
  257. :labelCol="labelCol"
  258. :wrapperCol="wrapperCol"
  259. >
  260. <a-input v-model="horizonImageCreativeText"></a-input>
  261. </a-form-item> -->
  262. <a-form-item
  263. v-if="showHorizonVideo"
  264. label="横版视频素材上传"
  265. :labelCol="labelCol"
  266. :wrapperCol="wrapperCol"
  267. >
  268. <upload-to-ali
  269. v-model="horizonVideoUrl"
  270. :customDomain="customDomain"
  271. preview
  272. :region="region"
  273. :bucket="bucket"
  274. :accept="acceptVideo"
  275. :max="1"
  276. :size="1024000"
  277. :accessKeyId="accessKeyId"
  278. :accessKeySecret="accessKeySecret"
  279. ></upload-to-ali>
  280. </a-form-item>
  281. <a-form-item
  282. label="横版视频封面上传"
  283. v-if="showHorizonVideo"
  284. :labelCol="labelCol"
  285. :wrapperCol="wrapperCol"
  286. >
  287. <upload-to-ali
  288. v-model="horizonVideoCoverImageUrl"
  289. :customDomain="customDomain"
  290. preview
  291. :region="region"
  292. :bucket="bucket"
  293. :accept="acceptImage"
  294. :max="1"
  295. :accessKeyId="accessKeyId"
  296. :accessKeySecret="accessKeySecret"
  297. ></upload-to-ali>
  298. </a-form-item>
  299. <a-form-item
  300. v-if="showHorizonVideo"
  301. label="横版视频创意标题"
  302. :labelCol="labelCol"
  303. :wrapperCol="wrapperCol"
  304. >
  305. <a-input v-model="horizonVideoCreativeText"></a-input>
  306. </a-form-item>
  307. <a-form-item
  308. v-if="showVerticalVideo"
  309. label="竖版视频素材上传"
  310. :labelCol="labelCol"
  311. :wrapperCol="wrapperCol"
  312. >
  313. <upload-to-ali
  314. v-model="verticalVideoUrl"
  315. :customDomain="customDomain"
  316. preview
  317. :region="region"
  318. :bucket="bucket"
  319. :accept="acceptVideo"
  320. :size="1024000"
  321. :max="1"
  322. :accessKeyId="accessKeyId"
  323. :accessKeySecret="accessKeySecret"
  324. ></upload-to-ali>
  325. </a-form-item>
  326. <a-form-item
  327. v-if="showVerticalVideo"
  328. label="竖版视频封面上传"
  329. :labelCol="labelCol"
  330. :wrapperCol="wrapperCol"
  331. >
  332. <upload-to-ali
  333. v-model="verticalVideoCoverImageUrl"
  334. :customDomain="customDomain"
  335. preview
  336. :region="region"
  337. :bucket="bucket"
  338. :accept="acceptImage"
  339. :size="1024000"
  340. :max="1"
  341. :accessKeyId="accessKeyId"
  342. :accessKeySecret="accessKeySecret"
  343. ></upload-to-ali>
  344. </a-form-item>
  345. <a-form-item
  346. v-if="showVerticalVideo"
  347. label="竖版视频创意标题"
  348. :labelCol="labelCol"
  349. :wrapperCol="wrapperCol"
  350. >
  351. <a-input v-model="verticalVideoCreativeText"></a-input>
  352. </a-form-item>
  353. <a-form-item
  354. v-if="showGroupImage"
  355. label="组图图片素材上传"
  356. :labelCol="labelCol"
  357. :wrapperCol="wrapperCol"
  358. >
  359. <upload-to-ali
  360. v-model="groupImageUrl"
  361. :customDomain="customDomain"
  362. :onClick="onClick"
  363. preview
  364. multiple
  365. :region="region"
  366. :bucket="bucket"
  367. :accept="acceptImage"
  368. :max="3"
  369. :accessKeyId="accessKeyId"
  370. :accessKeySecret="accessKeySecret"
  371. ></upload-to-ali>
  372. </a-form-item>
  373. <a-form-item
  374. v-if="showGroupImage"
  375. label="组图创意标题"
  376. :labelCol="labelCol"
  377. :wrapperCol="wrapperCol"
  378. >
  379. <a-input v-model="groupImageCreativeText"></a-input>
  380. </a-form-item>
  381. <a-form-item
  382. v-if="showSmallImage"
  383. label="小图图片素材上传"
  384. :labelCol="labelCol"
  385. :wrapperCol="wrapperCol"
  386. >
  387. <upload-to-ali
  388. v-model="smallImageUrl"
  389. :customDomain="customDomain"
  390. :onClick="onClick"
  391. preview
  392. :max="1"
  393. :region="region"
  394. :bucket="bucket"
  395. :accept="acceptImage"
  396. :accessKeyId="accessKeyId"
  397. :accessKeySecret="accessKeySecret"
  398. ></upload-to-ali>
  399. </a-form-item>
  400. <a-form-item
  401. v-if="showSmallImage"
  402. label="小图创意标题"
  403. :labelCol="labelCol"
  404. :wrapperCol="wrapperCol"
  405. >
  406. <a-input v-model="smallImageCreativeText"></a-input>
  407. </a-form-item>
  408. <a-form-item
  409. v-if="showLargeVerticalImage"
  410. label="大图竖图图片素材上传"
  411. :labelCol="labelCol"
  412. :wrapperCol="wrapperCol"
  413. >
  414. <upload-to-ali
  415. v-model="verticalImageUrl"
  416. :customDomain="customDomain"
  417. preview
  418. :region="region"
  419. :bucket="bucket"
  420. :accept="acceptImage"
  421. :max="1"
  422. :accessKeyId="accessKeyId"
  423. :accessKeySecret="accessKeySecret"
  424. ></upload-to-ali>
  425. </a-form-item>
  426. <a-form-item
  427. v-if="showLargeVerticalImage"
  428. label="大图竖图创意标题"
  429. :labelCol="labelCol"
  430. :wrapperCol="wrapperCol"
  431. >
  432. <a-input v-model="verticalImageCreativeText"></a-input>
  433. </a-form-item>
  434. <a-form-item label="应用下载详情页" :labelCol="labelCol" :wrapperCol="wrapperCol">
  435. <a-input v-model="webUrl"></a-input>
  436. </a-form-item>
  437. <a-form-item label="应用名" :labelCol="labelCol" :wrapperCol="wrapperCol">
  438. <a-input v-model="appName"></a-input>
  439. </a-form-item>
  440. <a-form-item label="广告评论" :labelCol="labelCol" :wrapperCol="wrapperCol">
  441. <a-radio-group v-model="isCommentDisable ">
  442. <a-radio-button value="0">关闭</a-radio-button>
  443. <a-radio-button value="1">开启</a-radio-button>
  444. </a-radio-group>
  445. </a-form-item>
  446. <a-form-item label="创意展现" :labelCol="labelCol" :wrapperCol="wrapperCol">
  447. <a-radio-group v-model="creativeDisplayMode">
  448. <a-radio-button value="CREATIVE_DISPLAY_MODE_CTR">优选模式</a-radio-button>
  449. <a-radio-button value="CREATIVE_DISPLAY_MODE_RANDOM">轮播模式</a-radio-button>
  450. </a-radio-group>
  451. </a-form-item>
  452. <a-form-item label="创意分类" :labelCol="labelCol" :wrapperCol="wrapperCol">
  453. <a-cascader
  454. :options="options"
  455. width="200px"
  456. v-model="adCategory"
  457. @change="onChange"
  458. placeholder="请选择分类"
  459. />
  460. </a-form-item>
  461. <a-form-item label="创意标签" :labelCol="labelCol" :wrapperCol="wrapperCol">
  462. <a-select mode="tags" style="width: 100%" :tokenSeparators="[' ']" v-model="adKeywords"></a-select>
  463. </a-form-item>
  464. <a-form-item label="迭代数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
  465. <a-input-number :min="0" :max="10" v-model="iteratorNum" />
  466. </a-form-item>
  467. <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
  468. <a-button htmlType="submit" type="primary">提交</a-button>
  469. <a-button style="margin-left: 8px">保存</a-button>
  470. </a-form-item>
  471. </a-form>
  472. </a-card>
  473. </template>
  474. <script>
  475. import UploadToAli from '@femessage/upload-to-ali'
  476. import { postAction, getAction } from '@/api/manage'
  477. import moment from 'moment'
  478. import AFormItem from 'ant-design-vue/es/form/FormItem'
  479. import $ from 'jquery'
  480. export default {
  481. name: 'BaseForm',
  482. data() {
  483. return {
  484. previewVisible: false,
  485. previewImage: '',
  486. labelCol: {
  487. xs: { span: 24 },
  488. sm: { span: 5 }
  489. },
  490. wrapperCol: {
  491. xs: { span: 24 },
  492. sm: { span: 16 }
  493. },
  494. fileList: [],
  495. activeConvertList: [],
  496. showConvertTarget: false,
  497. convertType: '',
  498. simpleDeliverytarget: '',
  499. convertId: '',
  500. showSimple: true,
  501. showConvertTargetSimple: false,
  502. showConvertTargetApi: false,
  503. campaignList: {},
  504. deliverytargetList: {},
  505. userList: {},
  506. userorentationList: {},
  507. budgetList: {},
  508. deliveryRange: 'DEFAULT',
  509. campaignId: null,
  510. deliverytargetId: null,
  511. budgetId: null,
  512. userorentationId: null,
  513. adCategory: null,
  514. showLargeImage: false,
  515. showLargeVerticalImage: false,
  516. showHorizonVideo: false,
  517. showVerticalVideo: false,
  518. showGroupImage: false,
  519. showSmallImage: false,
  520. horizonImageUrl: '',
  521. horizonImageCreativeText: '',
  522. horizonVideoUrl: '',
  523. horizonVideoCoverImageUrl: '',
  524. horizonVideoCreativeText: '',
  525. verticalVideoUrl: '',
  526. verticalVideoCoverImageUrl: '',
  527. verticalVideoCreativeText: '',
  528. groupImageUrl: '',
  529. groupImageCreativeText: '',
  530. smallImageUrl: '',
  531. smallImageCreativeText: '',
  532. verticalImageUrl: '',
  533. verticalImageCreativeText: '',
  534. accessKeyId: 'LTAIbNbqWzSOklQV',
  535. accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  536. bucket: 'ctop-media',
  537. region: 'oss-cn-beijing',
  538. acceptImage: 'image/jpeg,image/png',
  539. acceptVideo: 'video/mpeg,video/mp4',
  540. customDomain: '',
  541. options: [],
  542. adKeywords: [],
  543. userList: {},
  544. accountId: '',
  545. planList: {},
  546. planId: '',
  547. advertiseLocation: 'great',
  548. showMedia: false,
  549. showSence: false,
  550. inventoryType: [],
  551. sceneInventory: 'FEED_SENCE',
  552. creativeType: 'customize',
  553. materialAddType: 'customize',
  554. materialType: 'CREATIVE_IMAGE_MODE_LARGE',
  555. webUrl: '',
  556. appName: '',
  557. name: '',
  558. advancedCreativeTitle: '',
  559. isCommentDisable: '1',
  560. creativeDisplayMode: 'CREATIVE_DISPLAY_MODE_CTR',
  561. loading: false,
  562. iteratorNum: 1,
  563. creativeText: '',
  564. form: this.$form.createForm(this),
  565. url: {
  566. userAllocationList: '/template/allocation/list',
  567. insertUrl: '/template/creative/insert',
  568. industryListUrl: '/template/bytedance/industry/list',
  569. campaignListUrl: '/template/campaign/list',
  570. budgetTemplateListUrl: '/template/budget/list',
  571. deliverytargetTemplateListUrl: '/template/deliverytarget/list',
  572. userorentationTemplateListUrl: '/template/userorentation/list',
  573. deliverytargetTemplateGetUrl: '/template/deliveryTarget/get',
  574. convertList: 'template/convert/list'
  575. },
  576. // 创建大图横图创意
  577. createLargeImageCreativeCon:true,
  578. HorizontalLargeImageList: [],
  579. horizonImageUrlColl: [], // 大图横图图片素材集合
  580. horizonImageCreativeTextColl:[] // 创意标题集合
  581. }
  582. },
  583. components: {
  584. AFormItem,
  585. UploadToAli
  586. },
  587. methods: {
  588. handleCancel() {
  589. this.previewVisible = false
  590. },
  591. handlePreview(file) {
  592. this.previewImage = file.url || file.thumbUrl
  593. this.previewVisible = true
  594. },
  595. handleChange({ fileList }) {
  596. this.fileList = fileList
  597. },
  598. filterOption(input, option) {
  599. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  600. },
  601. refreshConvertApiId() {
  602. let params = {}
  603. getAction(
  604. this.url.convertList + '?accountId=' + this.accountId + '&targetId=' + this.deliverytargetId,
  605. params
  606. ).then(res => {
  607. console.log(res)
  608. if (res.code == 0) {
  609. this.activeConvertList = res.data.active_convert_list
  610. } else {
  611. this.$message.error(res.message)
  612. }
  613. })
  614. },
  615. changedeliveryTarget() {
  616. //切换投放目标模板
  617. this.convertType = null
  618. this.simpleDeliverytarget = null
  619. this.activeConvertList = []
  620. let param = {}
  621. var targetId = this.deliverytargetId
  622. getAction(this.url.deliverytargetTemplateGetUrl + '?targetId=' + targetId, param).then(res => {
  623. if (res.success) {
  624. console.log(res.data)
  625. if (res.data.deliveryTarget == 'CONVERSION') {
  626. this.showConvertTarget = true
  627. } else {
  628. this.showConvertTarget = false
  629. }
  630. //下载链接
  631. if (res.data.downloadType == 'DOWNLOAD_URL') {
  632. this.showSimple = true
  633. } else {
  634. //落地页
  635. this.showSimple = false
  636. }
  637. }
  638. })
  639. },
  640. changeConvertType() {
  641. if (this.convertType == 'SIMPLE') {
  642. this.showConvertTargetSimple = true
  643. this.showConvertTargetApi = false
  644. } else {
  645. this.refreshConvertApiId()
  646. this.showConvertTargetSimple = false
  647. this.showConvertTargetApi = true
  648. }
  649. },
  650. materialTypeChange() {
  651. let type = this.materialType
  652. if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
  653. this.createLargeImageCreativeCon = false
  654. this.showLargeImage = false
  655. this.showLargeVerticalImage = false
  656. this.showHorizonVideo = false
  657. this.showVerticalVideo = false
  658. this.showGroupImage = false
  659. this.showSmallImage = true
  660. }
  661. if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
  662. this.createLargeImageCreativeCon = true
  663. this.showLargeImage = false
  664. this.showLargeVerticalImage = false
  665. this.showHorizonVideo = false
  666. this.showVerticalVideo = false
  667. this.showGroupImage = false
  668. this.showSmallImage = false
  669. }
  670. if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
  671. this.createLargeImageCreativeCon = false
  672. this.showLargeImage = false
  673. this.showLargeVerticalImage = false
  674. this.showHorizonVideo = false
  675. this.showVerticalVideo = false
  676. this.showGroupImage = true
  677. this.showSmallImage = false
  678. }
  679. if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
  680. this.createLargeImageCreativeCon = false
  681. this.showLargeImage = false
  682. this.showLargeVerticalImage = false
  683. this.showHorizonVideo = true
  684. this.showVerticalVideo = false
  685. this.showGroupImage = false
  686. this.showSmallImage = false
  687. }
  688. if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
  689. this.createLargeImageCreativeCon = false
  690. this.showLargeImage = false
  691. this.showLargeVerticalImage = true
  692. this.showHorizonVideo = false
  693. this.showVerticalVideo = false
  694. this.showGroupImage = false
  695. this.showSmallImage = false
  696. }
  697. if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
  698. this.createLargeImageCreativeCon = false
  699. this.showLargeImage = false
  700. this.showLargeVerticalImage = false
  701. this.showHorizonVideo = false
  702. this.showVerticalVideo = true
  703. this.showGroupImage = false
  704. this.showSmallImage = false
  705. }
  706. },
  707. moment,
  708. changeLoaction() {
  709. if (this.advertiseLocation === 'great') {
  710. this.showMedia = false
  711. this.showSence = false
  712. }
  713. if (this.advertiseLocation === 'media') {
  714. this.showMedia = true
  715. this.showSence = false
  716. }
  717. if (this.advertiseLocation === 'sence') {
  718. this.showMedia = false
  719. this.showSence = true
  720. }
  721. },
  722. // this.$message.success(`${info.file.name} 文件上传成功`);
  723. filterOption(input, option) {
  724. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  725. },
  726. handleSubmit(e) {
  727. e.preventDefault()
  728. this.form.validateFields((err, values) => {
  729. if (!err) {
  730. console.log('Received values of form: ', values)
  731. let params = {}
  732. params.campaignId = this.campaignId
  733. params.deliveryRange = this.deliveryRange
  734. params.userorentationId = this.userorentationId
  735. params.budgetId = this.budgetId
  736. params.deliverytargetId = this.deliverytargetId
  737. params.horizonImageUrl = this.horizonImageUrl
  738. params.horizonImageCreativeText = this.horizonImageCreativeText
  739. params.horizonVideoUrl = this.horizonVideoUrl
  740. params.horizonVideoCoverImageUrl = this.horizonVideoCoverImageUrl
  741. params.horizonVideoCreativeText = this.horizonVideoCreativeText
  742. params.verticalVideoUrl = this.verticalVideoUrl
  743. params.verticalVideoCoverImageUrl = this.verticalVideoCoverImageUrl
  744. params.verticalVideoCreativeText = this.verticalVideoCreativeText
  745. params.groupImageUrl = this.groupImageUrl
  746. params.groupImageCreativeText = this.groupImageCreativeText
  747. params.smallImageUrl = this.smallImageUrl
  748. params.smallImageCreativeText = this.smallImageCreativeText
  749. params.verticalImageUrl = this.verticalImageUrl
  750. params.verticalImageCreativeText = this.verticalImageCreativeText
  751. params.planId = this.planId
  752. params.accountId = this.accountId
  753. params.advertiseLocation = this.advertiseLocation
  754. params.inventoryType = this.inventoryType
  755. params.sceneInventory = this.sceneInventory
  756. params.creativeType = this.creativeType
  757. params.customize = this.customize
  758. params.webUrl = this.webUrl
  759. params.appName = this.appName
  760. params.isCommentDisable = this.isCommentDisable
  761. params.creativeDisplayMode = this.creativeDisplayMode
  762. params.adCategory = this.adCategory
  763. params.adKeywords = this.adKeywords
  764. params.name = this.name
  765. params.convertId = this.convertId
  766. params.iteratorNum = this.iteratorNum
  767. console.log(params)
  768. postAction(this.url.insertUrl, params).then(res => {
  769. console.log(res)
  770. if (res.success) {
  771. alert('广告创意批量创建成功')
  772. } else {
  773. alert(res.message)
  774. }
  775. })
  776. }
  777. })
  778. },
  779. onChange(value) {
  780. console.log(value)
  781. },
  782. // 创建大图横图创意
  783. addCreative() {
  784. this.HorizontalLargeImageList.push({})
  785. },
  786. deleteCreative(index){
  787. console.log(index)
  788. console.log(this.HorizontalLargeImageList)
  789. this.HorizontalLargeImageList.splice(index,1)
  790. this.horizonImageCreativeTextColl.splice(index,1)
  791. }
  792. },
  793. created: function() {
  794. let params = {}
  795. postAction(this.url.campaignListUrl, params).then(res => {
  796. if (res.success) {
  797. this.campaignList = res.result.records
  798. }
  799. })
  800. params = {}
  801. params.pageSize = '1000'
  802. params.mediaId = '1'
  803. postAction(this.url.userAllocationList, params).then(res => {
  804. if (res.success) {
  805. this.userList = res.result.records
  806. }
  807. })
  808. params = {}
  809. getAction(this.url.industryListUrl, params).then(res => {
  810. this.options = res
  811. })
  812. params = {}
  813. params.pageSize = '1000'
  814. postAction(this.url.budgetTemplateListUrl, params).then(res => {
  815. if (res.success) {
  816. this.budgetList = res.result.records
  817. }
  818. })
  819. params = {}
  820. params.pageSize = '1000'
  821. params.mediaId = '1'
  822. postAction(this.url.userAllocationList, params).then(res => {
  823. if (res.success) {
  824. this.userList = res.result.records
  825. }
  826. })
  827. params = {}
  828. params.pageSize = '1000'
  829. postAction(this.url.deliverytargetTemplateListUrl, params).then(res => {
  830. if (res.success) {
  831. this.deliverytargetList = res.result.records
  832. }
  833. })
  834. params = {}
  835. params.pageSize = '1000'
  836. postAction(this.url.userorentationTemplateListUrl, params).then(res => {
  837. if (res.success) {
  838. this.userorentationList = res.result.records
  839. }
  840. })
  841. }
  842. }
  843. </script>
  844. <style lang="scss">
  845. .dynamically_add_form_item {
  846. .ant-form-item-label {
  847. width: auto !important;
  848. }
  849. .ant-form-item-control-wrapper {
  850. width: auto !important;
  851. }
  852. }
  853. </style>