create.vue 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810
  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 Spin3 from '**/spin3'
  428. import {postAction, getAction} from '@/api/manage';
  429. import moment from 'moment';
  430. import AFormItem from "ant-design-vue/es/form/FormItem";
  431. export default {
  432. name: 'BaseForm',
  433. data() {
  434. return {
  435. previewVisible: false,
  436. previewImage: '',
  437. labelCol: {
  438. xs: { span: 24 },
  439. sm: { span: 5 },
  440. },
  441. wrapperCol: {
  442. xs: { span: 24 },
  443. sm: { span: 16 },
  444. },
  445. loader:false,
  446. fileList:[],
  447. activeConvertList:[],
  448. showConvertTarget:false,
  449. convertType:'',
  450. simpleDeliverytarget:'',
  451. convertId:'',
  452. showSimple:true,
  453. showConvertTargetSimple:false,
  454. showConvertTargetApi:false,
  455. campaignList: {},
  456. deliverytargetList:{},
  457. userList:{},
  458. userorentationList:{},
  459. budgetList:{},
  460. deliveryRange:'DEFAULT',
  461. campaignId:null,
  462. deliverytargetId:null,
  463. budgetId:null,
  464. userorentationId:null,
  465. adCategory:null,
  466. showLargeImage:true,
  467. showLargeVerticalImage:false,
  468. showHorizonVideo:false,
  469. showVerticalVideo:false,
  470. showGroupImage:false,
  471. showSmallImage:false,
  472. horizonImageUrl:'',
  473. horizonImageCreativeText:'',
  474. horizonVideoUrl:'',
  475. horizonVideoCoverImageUrl:'',
  476. horizonVideoCreativeText:'',
  477. verticalVideoUrl:'',
  478. verticalVideoCoverImageUrl:'',
  479. verticalVideoCreativeText:'',
  480. groupImageUrl:'',
  481. groupImageCreativeText:'',
  482. smallImageUrl:'',
  483. smallImageCreativeText:'',
  484. verticalImageUrl:'',
  485. verticalImageCreativeText:'',
  486. accessKeyId:'LTAIbNbqWzSOklQV',
  487. accessKeySecret:'1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  488. bucket:'ctop-media',
  489. region:'oss-cn-beijing',
  490. acceptImage:'image/jpeg,image/png',
  491. acceptVideo:'video/mpeg,video/mp4',
  492. customDomain:'',
  493. options:[],
  494. adKeywords:[],
  495. userList:{},
  496. accountId:'',
  497. planList:{},
  498. planId:'',
  499. advertiseLocation:'great',
  500. showMedia:false,
  501. showSence:false,
  502. inventoryType:[],
  503. sceneInventory:'FEED_SENCE',
  504. creativeType:'customize',
  505. materialAddType:'customize',
  506. materialType:'CREATIVE_IMAGE_MODE_LARGE',
  507. webUrl:'',
  508. appName:'',
  509. name:'',
  510. advancedCreativeTitle:'',
  511. isCommentDisable:'1',
  512. creativeDisplayMode:'CREATIVE_DISPLAY_MODE_CTR',
  513. loading: false,
  514. iteratorNum:1,
  515. creativeText:'',
  516. form: this.$form.createForm(this),
  517. url: {
  518. userAllocationList:'/template/allocation/list',
  519. insertUrl:'/template/creative/insert',
  520. industryListUrl:'/template/bytedance/industry/list',
  521. campaignListUrl:'/template/campaign/list',
  522. budgetTemplateListUrl:'/template/budget/list',
  523. deliverytargetTemplateListUrl:'/template/deliverytarget/list',
  524. userorentationTemplateListUrl:'/template/userorentation/list',
  525. deliverytargetTemplateGetUrl:'/template/deliveryTarget/get',
  526. convertList:'template/convert/list'
  527. }
  528. }
  529. },
  530. components:{
  531. AFormItem,
  532. UploadToAli
  533. },
  534. methods: {
  535. handleCancel () {
  536. this.previewVisible = false
  537. },
  538. handlePreview (file) {
  539. this.previewImage = file.url || file.thumbUrl
  540. this.previewVisible = true
  541. },
  542. handleChange ({ fileList }) {
  543. this.fileList = fileList
  544. },
  545. filterOption(input, option) {
  546. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  547. },
  548. refreshConvertApiId(){
  549. let params = {};
  550. getAction(this.url.convertList+'?accountId='+this.accountId+'&targetId='+this.deliverytargetId ,params).then((res)=>{
  551. console.log(res);
  552. if(res.code == 0){
  553. this.activeConvertList = res.data.active_convert_list;
  554. }else{
  555. this.$message.error(res.message);
  556. }
  557. });
  558. },
  559. changedeliveryTarget(){
  560. //切换投放目标模板
  561. this.convertType = null;
  562. this.simpleDeliverytarget = null;
  563. this.activeConvertList = [];
  564. let param = {};
  565. var targetId = this.deliverytargetId;
  566. getAction(this.url.deliverytargetTemplateGetUrl+"?targetId="+targetId, param).then((res) => {
  567. if (res.success) {
  568. console.log(res.data);
  569. if(res.data.deliveryTarget == 'CONVERSION'){
  570. this.showConvertTarget = true;
  571. }else{
  572. this.showConvertTarget = false;
  573. }
  574. //下载链接
  575. if(res.data.downloadType == 'DOWNLOAD_URL'){
  576. this.showSimple = true;
  577. }else{//落地页
  578. this.showSimple = false;
  579. }
  580. }
  581. });
  582. },
  583. changeConvertType(){
  584. if(this.convertType == 'SIMPLE'){
  585. this.showConvertTargetSimple = true;
  586. this.showConvertTargetApi = false;
  587. }else{
  588. this.refreshConvertApiId();
  589. this.showConvertTargetSimple = false;
  590. this.showConvertTargetApi = true;
  591. }
  592. },
  593. materialTypeChange(){
  594. let type = this.materialType;
  595. if(type === 'CREATIVE_IMAGE_MODE_SMALL'){
  596. this.showLargeImage=false;
  597. this.showLargeVerticalImage=false;
  598. this.showHorizonVideo=false;
  599. this.showVerticalVideo=false;
  600. this.showGroupImage=false;
  601. this.showSmallImage=true;
  602. }
  603. if(type === 'CREATIVE_IMAGE_MODE_LARGE'){
  604. this.showLargeImage=true;
  605. this.showLargeVerticalImage=false;
  606. this.showHorizonVideo=false;
  607. this.showVerticalVideo=false;
  608. this.showGroupImage=false;
  609. this.showSmallImage=false;
  610. }
  611. if(type === 'CREATIVE_IMAGE_MODE_GROUP'){
  612. this.showLargeImage=false;
  613. this.showLargeVerticalImage=false;
  614. this.showHorizonVideo=false;
  615. this.showVerticalVideo=false;
  616. this.showGroupImage=true;
  617. this.showSmallImage=false;
  618. }
  619. if(type === 'CREATIVE_IMAGE_MODE_VIDEO'){
  620. this.showLargeImage=false;
  621. this.showLargeVerticalImage=false;
  622. this.showHorizonVideo=true;
  623. this.showVerticalVideo=false;
  624. this.showGroupImage=false;
  625. this.showSmallImage=false;
  626. }
  627. if(type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL'){
  628. this.showLargeImage=false;
  629. this.showLargeVerticalImage=true;
  630. this.showHorizonVideo=false;
  631. this.showVerticalVideo=false;
  632. this.showGroupImage=false;
  633. this.showSmallImage=false;
  634. }
  635. if(type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'){
  636. this.showLargeImage = false;
  637. this.showLargeVerticalImage=false;
  638. this.showHorizonVideo=false;
  639. this.showVerticalVideo=true;
  640. this.showGroupImage=false;
  641. this.showSmallImage=false;
  642. }
  643. },
  644. moment,
  645. changeLoaction(){
  646. if(this.advertiseLocation === 'great'){
  647. this.showMedia = false;
  648. this.showSence = false;
  649. }
  650. if(this.advertiseLocation === 'media'){
  651. this.showMedia = true;
  652. this.showSence = false;
  653. }
  654. if(this.advertiseLocation === 'sence'){
  655. this.showMedia = false;
  656. this.showSence = true;
  657. }
  658. },
  659. // this.$message.success(`${info.file.name} 文件上传成功`);
  660. filterOption(input, option) {
  661. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  662. },
  663. handleSubmit(e) {
  664. e.preventDefault()
  665. this.form.validateFields((err, values) => {
  666. if (!err) {
  667. console.log('Received values of form: ', values);
  668. this.loader = true;
  669. let params = {};
  670. params.campaignId = this.campaignId;
  671. params.deliveryRange = this.deliveryRange;
  672. params.userorentationId = this.userorentationId;
  673. params.budgetId = this.budgetId;
  674. params.deliverytargetId = this.deliverytargetId;
  675. params.horizonImageUrl=this.horizonImageUrl;
  676. params.horizonImageCreativeText=this.horizonImageCreativeText;
  677. params.horizonVideoUrl=this.horizonVideoUrl;
  678. params.horizonVideoCoverImageUrl=this.horizonVideoCoverImageUrl;
  679. params.horizonVideoCreativeText=this.horizonVideoCreativeText;
  680. params.verticalVideoUrl=this.verticalVideoUrl;
  681. params.verticalVideoCoverImageUrl=this.verticalVideoCoverImageUrl;
  682. params.verticalVideoCreativeText=this.verticalVideoCreativeText;
  683. params.groupImageUrl=this.groupImageUrl;
  684. params.groupImageCreativeText=this.groupImageCreativeText;
  685. params.smallImageUrl=this.smallImageUrl;
  686. params.smallImageCreativeText=this.smallImageCreativeText;
  687. params.verticalImageUrl=this.verticalImageUrl;
  688. params.verticalImageCreativeText=this.verticalImageCreativeText;
  689. params.planId=this.planId;
  690. params.accountId=this.accountId;
  691. params.advertiseLocation=this.advertiseLocation;
  692. params.inventoryType=this.inventoryType;
  693. params.sceneInventory=this.sceneInventory;
  694. params.creativeType=this.creativeType;
  695. params.customize=this.customize;
  696. params.webUrl=this.webUrl;
  697. params.appName=this.appName;
  698. params.isCommentDisable=this.isCommentDisable;
  699. params.creativeDisplayMode=this.creativeDisplayMode;
  700. params.adCategory=this.adCategory;
  701. params.adKeywords=this.adKeywords;
  702. params.name = this.name;
  703. params.convertId = this.convertId;
  704. params.iteratorNum = this.iteratorNum;
  705. console.log(params)
  706. postAction(this.url.insertUrl,params).then((res)=>{
  707. this.loader = false;
  708. console.log(res)
  709. if(res.success){
  710. alert("广告创意批量创建成功");
  711. }else{
  712. alert(res.message);
  713. }
  714. });
  715. }
  716. })
  717. },
  718. onChange(value) {
  719. console.log(value)
  720. }
  721. },
  722. created: function () {
  723. let params = {};
  724. postAction(this.url.campaignListUrl,params).then((res) => {
  725. if (res.success) {
  726. this.campaignList = res.result.records
  727. }
  728. });
  729. params = {};
  730. params.pageSize = '1000';
  731. params.mediaId='1';
  732. postAction(this.url.userAllocationList, params).then((res) => {
  733. if (res.success) {
  734. this.userList = res.result.records
  735. }
  736. });
  737. params = {};
  738. getAction(this.url.industryListUrl, params).then((res) => {
  739. this.options = res;
  740. });
  741. params = {};
  742. params.pageSize = '1000';
  743. postAction(this.url.budgetTemplateListUrl, params).then((res) => {
  744. if (res.success) {
  745. this.budgetList = res.result.records
  746. }
  747. });
  748. params = {};
  749. params.pageSize = '1000';
  750. params.mediaId='1';
  751. postAction(this.url.userAllocationList, params).then((res) => {
  752. if (res.success) {
  753. this.userList = res.result.records
  754. }
  755. });
  756. params = {};
  757. params.pageSize = '1000';
  758. postAction(this.url.deliverytargetTemplateListUrl, params).then((res) => {
  759. if (res.success) {
  760. this.deliverytargetList = res.result.records
  761. }
  762. });
  763. params = {};
  764. params.pageSize = '1000';
  765. postAction(this.url.userorentationTemplateListUrl, params).then((res) => {
  766. if (res.success) {
  767. this.userorentationList = res.result.records
  768. }
  769. });
  770. }
  771. }
  772. </script>