create.vue 28 KB

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