create.vue 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095
  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-badge
  183. :count="HorizontalLargeImageListBig.length"
  184. :numberStyle="{backgroundColor: '#52c41a'} "
  185. >
  186. <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE">大图横图</a-radio-button>
  187. </a-badge>
  188. <a-badge
  189. :count="HorizontalLargeImageListShu.length"
  190. :numberStyle="{backgroundColor: '#52c41a'} "
  191. >
  192. <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO">横版视频</a-radio-button>
  193. </a-badge>
  194. <a-badge
  195. :count="HorizontalLargeImageListHeng.length"
  196. :numberStyle="{backgroundColor: '#52c41a'} "
  197. >
  198. <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">竖版视频</a-radio-button>
  199. </a-badge>
  200. <a-badge
  201. :count="HorizontalLargeImageListZu.length"
  202. :numberStyle="{backgroundColor: '#52c41a'} "
  203. >
  204. <a-radio-button value="CREATIVE_IMAGE_MODE_GROUP">组图</a-radio-button>
  205. </a-badge>
  206. <a-badge
  207. :count="HorizontalLargeImageListSmall.length"
  208. :numberStyle="{backgroundColor: '#52c41a'} "
  209. >
  210. <a-radio-button value="CREATIVE_IMAGE_MODE_SMALL">小图</a-radio-button>
  211. </a-badge>
  212. <a-badge
  213. :count="HorizontalLargeImageListBigShu.length"
  214. :numberStyle="{backgroundColor: '#52c41a'} "
  215. >
  216. <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE_VERTICAL">大图竖图</a-radio-button>
  217. </a-badge>
  218. </a-radio-group>
  219. </a-form-item>-->
  220. <!-- 创建大图横图创意 -->
  221. <!-- <a-form-item
  222. label="创建创意"
  223. :labelCol="labelCol"
  224. :wrapperCol="wrapperCol"
  225. v-if="createLargeImageCreativeCon"
  226. >
  227. <a-layout>
  228. <a-layout-content style="padding:10px;">
  229. <div :style="{ marginBottom: '16px' }">
  230. <a-button @click="addCreative()" :disabled="count">添加创意</a-button>
  231. <span
  232. style="color:black;margin-left:10px"
  233. v-if="creativeType == 'customize'"
  234. >{{countMany}}/10</span>
  235. <span
  236. style="color:black;margin-left:10px"
  237. v-else-if="creativeType == 'program'"
  238. >视频数量:{{vadioMany}}/12 图片数量:{{imgMany}}/10</span>
  239. </div>
  240. <a-row>
  241. <a-col :span="8" v-for="(item,index) of HorizontalLargeImageList" :key="index">
  242. <a-card title :ref="item">
  243. <a-icon
  244. type="close"
  245. style="float:right;cursor: pointer;"
  246. @click="deleteCreative(index)"
  247. />
  248. <div style="clear:both"></div>
  249. <div class="dynamically_add_form_item">
  250. <a-form-item class label="素材上传" :labelCol="labelCol" :wrapperCol="wrapperCol">
  251. <upload-to-ali
  252. v-model="item.vadioUrl"
  253. :customDomain="customDomain"
  254. preview
  255. :region="region"
  256. :bucket="bucket"
  257. :accept="acceptImage"
  258. :size="102400"
  259. :accessKeyId="accessKeyId"
  260. :accessKeySecret="accessKeySecret"
  261. ></upload-to-ali>
  262. </a-form-item>
  263. <a-form-item
  264. label="创意标题"
  265. :labelCol="labelCol"
  266. :wrapperCol="wrapperCol"
  267. v-if="creativeType == 'customize'"
  268. >
  269. <a-input v-model="item.text" class="rending" @change="judge(item)"></a-input>
  270. </a-form-item>
  271. <a-form-item
  272. label="动态词包"
  273. :labelCol="labelCol"
  274. :wrapperCol="wrapperCol"
  275. v-if="creativeType == 'customize'"
  276. >
  277. <a-tag
  278. v-for="(itemTag,indexTag) of tags"
  279. :key="indexTag"
  280. v-show="indexTag<item.many"
  281. @click="getChange(item,itemTag,index)"
  282. >{{itemTag.name}}</a-tag>
  283. <span @click="showElseClick(item)">{{item.showElse?"更多":"收起"}}</span>
  284. </a-form-item>
  285. <a-form-item
  286. label="封面上传"
  287. :labelCol="labelCol"
  288. :wrapperCol="wrapperCol"
  289. v-if="creativeType == 'program'&&(materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'||materialType=='CREATIVE_IMAGE_MODE_VIDEO')"
  290. >
  291. <upload-to-ali
  292. v-model="item.imageUrl"
  293. :customDomain="customDomain"
  294. preview
  295. :region="region"
  296. :bucket="bucket"
  297. :accept="acceptImage"
  298. :size="102400"
  299. :accessKeyId="accessKeyId"
  300. :accessKeySecret="accessKeySecret"
  301. ></upload-to-ali>
  302. </a-form-item>
  303. </div>
  304. </a-card>
  305. </a-col>
  306. </a-row>
  307. </a-layout-content>
  308. </a-layout>
  309. </a-form-item>
  310. <a-form-item
  311. v-if="creativeType == 'program'"
  312. label="程序化创意标题"
  313. :labelCol="labelCol"
  314. :wrapperCol="wrapperCol"
  315. >
  316. <a-button @click="addTitle">添加创意标题</a-button>
  317. <br />
  318. <div v-for="(item,index) of titleData" :key="index">
  319. <a-input style="width:55%" v-model="item.text" class="rending-all"></a-input>
  320. <a-icon
  321. type="delete"
  322. style="margin-left:20px;cursor: pointer;"
  323. v-show="titleData.length>1"
  324. @click="tetleDetele(index)"
  325. />
  326. <br />
  327. <a-tag
  328. v-for="(itemTag,indexTag) of tags"
  329. :key="indexTag"
  330. @click="getChangeAllTitle(item,itemTag,index)"
  331. >{{itemTag.name}}</a-tag>
  332. </div>
  333. </a-form-item>-->
  334. <material :creativeType.sync="creativeType" :accountId.sync="accountId" ref="material"></material>
  335. <a-form-item label="应用下载详情页" :labelCol="labelCol" :wrapperCol="wrapperCol">
  336. <a-input v-model="webUrl"></a-input>
  337. </a-form-item>
  338. <a-form-item label="应用名" :labelCol="labelCol" :wrapperCol="wrapperCol">
  339. <a-input v-model="appName"></a-input>
  340. </a-form-item>
  341. <a-form-item label="广告评论" :labelCol="labelCol" :wrapperCol="wrapperCol">
  342. <a-radio-group v-model="isCommentDisable ">
  343. <a-radio-button value="0">关闭</a-radio-button>
  344. <a-radio-button value="1">开启</a-radio-button>
  345. </a-radio-group>
  346. </a-form-item>
  347. <a-form-item label="创意展现" :labelCol="labelCol" :wrapperCol="wrapperCol">
  348. <a-radio-group v-model="creativeDisplayMode">
  349. <a-radio-button value="CREATIVE_DISPLAY_MODE_CTR">优选模式</a-radio-button>
  350. <a-radio-button value="CREATIVE_DISPLAY_MODE_RANDOM">轮播模式</a-radio-button>
  351. </a-radio-group>
  352. </a-form-item>
  353. <a-form-item label="创意分类" :labelCol="labelCol" :wrapperCol="wrapperCol">
  354. <a-cascader
  355. :options="options"
  356. width="200px"
  357. v-model="adCategory"
  358. @change="onChange"
  359. placeholder="请选择分类"
  360. />
  361. </a-form-item>
  362. <a-form-item label="创意标签" :labelCol="labelCol" :wrapperCol="wrapperCol">
  363. <a-select mode="tags" style="width: 100%" :tokenSeparators="[' ']" v-model="adKeywords"></a-select>
  364. </a-form-item>
  365. <a-form-item label="迭代数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
  366. <a-input-number :min="0" :max="10" v-model="iteratorNum" />
  367. </a-form-item>
  368. <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
  369. <a-button htmlType="submit" type="primary">提交</a-button>
  370. <a-button style="margin-left: 8px">保存</a-button>
  371. </a-form-item>
  372. </a-form>
  373. </a-card>
  374. </template>
  375. <script>
  376. import UploadToAli from '@femessage/upload-to-ali'
  377. import { postAction, getAction, getPackage } from '@/api/manage'
  378. import moment from 'moment'
  379. import AFormItem from 'ant-design-vue/es/form/FormItem'
  380. import material from './modules/material'
  381. import $ from 'jquery'
  382. export default {
  383. name: 'BaseForm',
  384. data() {
  385. return {
  386. previewVisible: false,
  387. previewImage: '',
  388. labelCol: {
  389. xs: { span: 24 },
  390. sm: { span: 5 }
  391. },
  392. wrapperCol: {
  393. xs: { span: 24 },
  394. sm: { span: 16 }
  395. },
  396. fileList: [],
  397. multiple: [],
  398. activeConvertList: [],
  399. showConvertTarget: false,
  400. convertType: '',
  401. simpleDeliverytarget: '',
  402. convertId: '',
  403. showSimple: true,
  404. showConvertTargetSimple: false,
  405. showConvertTargetApi: false,
  406. campaignList: {},
  407. deliverytargetList: {},
  408. userList: {},
  409. userorentationList: {},
  410. budgetList: {},
  411. deliveryRange: 'DEFAULT',
  412. campaignId: null,
  413. deliverytargetId: null,
  414. budgetId: null,
  415. userorentationId: null,
  416. adCategory: null,
  417. showLargeImage: false,
  418. showLargeVerticalImage: false,
  419. showHorizonVideo: false,
  420. showVerticalVideo: false,
  421. showGroupImage: false,
  422. showSmallImage: false,
  423. horizonImageUrl: '',
  424. horizonImageCreativeText: '',
  425. horizonVideoUrl: '',
  426. horizonVideoCoverImageUrl: '',
  427. horizonVideoCreativeText: '',
  428. verticalVideoUrl: '',
  429. verticalVideoCoverImageUrl: '',
  430. verticalVideoCreativeText: '',
  431. groupImageUrl: '',
  432. groupImageCreativeText: '',
  433. smallImageUrl: '',
  434. smallImageCreativeText: '',
  435. verticalImageUrl: '',
  436. verticalImageCreativeText: '',
  437. accessKeyId: 'LTAIbNbqWzSOklQV',
  438. accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  439. bucket: 'ctop-media',
  440. region: 'oss-cn-beijing',
  441. acceptImage: 'image/jpeg,image/png',
  442. acceptVideo: 'video/mpeg,video/mp4',
  443. customDomain: '',
  444. options: [],
  445. adKeywords: [],
  446. userList: {},
  447. accountId: '',
  448. planList: {},
  449. planId: '',
  450. advertiseLocation: 'great',
  451. showMedia: false,
  452. showSence: false,
  453. inventoryType: [],
  454. sceneInventory: 'FEED_SENCE',
  455. creativeType: 'customize',
  456. materialAddType: 'customize',
  457. materialType: 'CREATIVE_IMAGE_MODE_LARGE',
  458. webUrl: '',
  459. appName: '',
  460. name: '',
  461. advancedCreativeTitle: '',
  462. isCommentDisable: '1',
  463. creativeDisplayMode: 'CREATIVE_DISPLAY_MODE_CTR',
  464. loading: false,
  465. iteratorNum: 1,
  466. creativeText: '',
  467. form: this.$form.createForm(this),
  468. url: {
  469. userAllocationList: '/template/allocation/list',
  470. insertUrl: '/template/creative/insert',
  471. industryListUrl: '/template/bytedance/industry/list',
  472. campaignListUrl: '/template/campaign/list',
  473. budgetTemplateListUrl: '/template/budget/list',
  474. deliverytargetTemplateListUrl: '/template/deliverytarget/list',
  475. userorentationTemplateListUrl: '/template/userorentation/list',
  476. deliverytargetTemplateGetUrl: '/template/deliveryTarget/get',
  477. convertList: 'template/convert/list'
  478. },
  479. // 创建大图横图创意
  480. createLargeImageCreativeCon: true,
  481. HorizontalLargeImageList: [],
  482. HorizontalLargeImageListBig: [],
  483. HorizontalLargeImageListHeng: [],
  484. HorizontalLargeImageListShu: [],
  485. HorizontalLargeImageListZu: [],
  486. HorizontalLargeImageListSmall: [],
  487. HorizontalLargeImageListBigShu: [],
  488. horizonImageUrlColl: [], // 大图横图图片素材集合
  489. horizonImageCreativeTextColl: [], // 创意标题集合
  490. itemIndex: null,
  491. tags: [],
  492. range: null,
  493. countTag: 0,
  494. titleData: [{ text: '', showElse: true, titleMany: 0 }]
  495. }
  496. },
  497. components: {
  498. AFormItem,
  499. UploadToAli,
  500. material
  501. },
  502. methods: {
  503. handleCancel() {
  504. this.previewVisible = false
  505. },
  506. handlePreview(file) {
  507. this.previewImage = file.url || file.thumbUrl
  508. this.previewVisible = true
  509. },
  510. handleChange({ fileList }) {
  511. this.fileList = fileList
  512. },
  513. judge(item) {
  514. var left = item.text.split('{')
  515. var right = item.text.split('}')
  516. console.log(left)
  517. if (item.countTag == 0) {
  518. return
  519. } else {
  520. if (left.length != 3 && right.lenght != 3) {
  521. item.countTag -= 1
  522. }
  523. }
  524. },
  525. getChange(item, tag, index) {
  526. item.countTag++
  527. if (item.text == '') {
  528. item.countTag = 0
  529. }
  530. if (item.countTag >= 2) {
  531. this.$message.error('最多插入两条词包')
  532. item.countTag = 2
  533. return
  534. }
  535. var node = document.getElementsByClassName('rending')[index]
  536. var v = '{' + tag.name + '}'
  537. if (document.selection) {
  538. //IE
  539. node.focus()
  540. var sel = document.selection.createRange()
  541. sel.text = v
  542. sel.select()
  543. } else if (node.selectionStart || node.selectionStart == '0') {
  544. //MOZILLA/GOOGLE
  545. var startPos = node.selectionStart
  546. var endPos = node.selectionEnd
  547. var restoreTop = node.scrollTop
  548. node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
  549. if (restoreTop > 0) {
  550. node.scrollTop = restoreTop
  551. }
  552. item.text = node.value
  553. node.focus()
  554. node.selectionStart = startPos + v.length
  555. node.selectionEnd = startPos + v.length
  556. } else {
  557. //OTHER
  558. node.value += v
  559. item.text = node.value
  560. node.focus()
  561. }
  562. },
  563. getChangeAllTitle(item, tag, index) {
  564. item.titleMany++
  565. if (item.text == '') {
  566. item.titleMany = 0
  567. }
  568. if (item.titleMany >= 2) {
  569. this.$message.error('最多插入两条词包')
  570. item.titleMany = 2
  571. return
  572. }
  573. var node = document.getElementsByClassName('rending-all')[index]
  574. var v = '{' + tag.name + '}'
  575. if (document.selection) {
  576. //IE
  577. node.focus()
  578. var sel = document.selection.createRange()
  579. sel.text = v
  580. sel.select()
  581. } else if (node.selectionStart || node.selectionStart == '0') {
  582. //MOZILLA/GOOGLE
  583. var startPos = node.selectionStart
  584. var endPos = node.selectionEnd
  585. var restoreTop = node.scrollTop
  586. node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
  587. if (restoreTop > 0) {
  588. node.scrollTop = restoreTop
  589. }
  590. item.text = node.value
  591. node.focus()
  592. node.selectionStart = startPos + v.length
  593. node.selectionEnd = startPos + v.length
  594. } else {
  595. //OTHER
  596. node.value += v
  597. item.text = node.value
  598. node.focus()
  599. }
  600. },
  601. showElseClick(item) {
  602. item.showElse = !item.showElse
  603. if (!item.showElse) {
  604. item.many = this.tags.length
  605. } else {
  606. item.many = 3
  607. }
  608. },
  609. handleChangeText(value, option) {
  610. console.log(`selected ${value}`)
  611. this.HorizontalLargeImageList[this.itemIndex].text += value.join()
  612. },
  613. getIndex(item, index) {
  614. this.itemIndex = index
  615. },
  616. filterOption(input, option) {
  617. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  618. },
  619. refreshConvertApiId() {
  620. let params = {}
  621. getAction(
  622. this.url.convertList + '?accountId=' + this.accountId + '&targetId=' + this.deliverytargetId,
  623. params
  624. ).then(res => {
  625. console.log(res)
  626. if (res.code == 0) {
  627. this.activeConvertList = res.data.active_convert_list
  628. } else {
  629. this.$message.error(res.message)
  630. }
  631. })
  632. },
  633. changedeliveryTarget() {
  634. //切换投放目标模板
  635. this.convertType = null
  636. this.simpleDeliverytarget = null
  637. this.activeConvertList = []
  638. let param = {}
  639. var targetId = this.deliverytargetId
  640. getAction(this.url.deliverytargetTemplateGetUrl + '?targetId=' + targetId, param).then(res => {
  641. if (res.success) {
  642. console.log(res.data)
  643. if (res.data.deliveryTarget == 'CONVERSION') {
  644. this.showConvertTarget = true
  645. } else {
  646. this.showConvertTarget = false
  647. }
  648. //下载链接
  649. if (res.data.downloadType == 'DOWNLOAD_URL') {
  650. this.showSimple = true
  651. } else {
  652. //落地页
  653. this.showSimple = false
  654. }
  655. }
  656. })
  657. },
  658. changeConvertType() {
  659. if (this.convertType == 'SIMPLE') {
  660. this.showConvertTargetSimple = true
  661. this.showConvertTargetApi = false
  662. } else {
  663. this.refreshConvertApiId()
  664. this.showConvertTargetSimple = false
  665. this.showConvertTargetApi = true
  666. }
  667. },
  668. materialTypeChange() {
  669. let type = this.materialType
  670. if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
  671. // this.createLargeImageCreativeCon = false
  672. this.showLargeImage = false
  673. this.showLargeVerticalImage = false
  674. this.showHorizonVideo = false
  675. this.showVerticalVideo = false
  676. this.showGroupImage = false
  677. this.showSmallImage = true
  678. this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
  679. }
  680. if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
  681. // this.createLargeImageCreativeCon = true
  682. this.showLargeImage = false
  683. this.showLargeVerticalImage = false
  684. this.showHorizonVideo = false
  685. this.showVerticalVideo = false
  686. this.showGroupImage = false
  687. this.showSmallImage = false
  688. this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
  689. }
  690. if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
  691. // this.createLargeImageCreativeCon = false
  692. this.showLargeImage = false
  693. this.showLargeVerticalImage = false
  694. this.showHorizonVideo = false
  695. this.showVerticalVideo = false
  696. this.showGroupImage = true
  697. this.showSmallImage = false
  698. this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
  699. }
  700. if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
  701. // this.createLargeImageCreativeCon = false
  702. this.showLargeImage = false
  703. this.showLargeVerticalImage = false
  704. this.showHorizonVideo = true
  705. this.showVerticalVideo = false
  706. this.showGroupImage = false
  707. this.showSmallImage = false
  708. this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
  709. }
  710. if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
  711. // this.createLargeImageCreativeCon = false
  712. this.showLargeImage = false
  713. this.showLargeVerticalImage = true
  714. this.showHorizonVideo = false
  715. this.showVerticalVideo = false
  716. this.showGroupImage = false
  717. this.showSmallImage = false
  718. this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
  719. }
  720. if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
  721. // this.createLargeImageCreativeCon = false
  722. this.showLargeImage = false
  723. this.showLargeVerticalImage = false
  724. this.showHorizonVideo = false
  725. this.showVerticalVideo = true
  726. this.showGroupImage = false
  727. this.showSmallImage = false
  728. this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
  729. }
  730. },
  731. moment,
  732. changeLoaction() {
  733. if (this.advertiseLocation === 'great') {
  734. this.showMedia = false
  735. this.showSence = false
  736. }
  737. if (this.advertiseLocation === 'media') {
  738. this.showMedia = true
  739. this.showSence = false
  740. }
  741. if (this.advertiseLocation === 'sence') {
  742. this.showMedia = false
  743. this.showSence = true
  744. }
  745. },
  746. // this.$message.success(`${info.file.name} 文件上传成功`);
  747. filterOption(input, option) {
  748. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  749. },
  750. handleSubmit(e) {
  751. e.preventDefault()
  752. this.form.validateFields((err, values) => {
  753. if (!err) {
  754. console.log('Received values of form: ', values)
  755. let params = {}
  756. params.campaignId = this.campaignId
  757. params.deliveryRange = this.deliveryRange
  758. params.userorentationId = this.userorentationId
  759. params.budgetId = this.budgetId
  760. params.deliverytargetId = this.deliverytargetId
  761. params.horizonImageUrl = this.horizonImageUrl
  762. params.horizonImageCreativeText = this.horizonImageCreativeText
  763. params.horizonVideoUrl = this.horizonVideoUrl
  764. params.horizonVideoCoverImageUrl = this.horizonVideoCoverImageUrl
  765. params.horizonVideoCreativeText = this.horizonVideoCreativeText
  766. params.verticalVideoUrl = this.verticalVideoUrl
  767. params.verticalVideoCoverImageUrl = this.verticalVideoCoverImageUrl
  768. params.verticalVideoCreativeText = this.verticalVideoCreativeText
  769. params.groupImageUrl = this.groupImageUrl
  770. params.groupImageCreativeText = this.groupImageCreativeText
  771. params.smallImageUrl = this.smallImageUrl
  772. params.smallImageCreativeText = this.smallImageCreativeText
  773. params.verticalImageUrl = this.verticalImageUrl
  774. params.verticalImageCreativeText = this.verticalImageCreativeText
  775. params.planId = this.planId
  776. params.accountId = this.accountId
  777. params.advertiseLocation = this.advertiseLocation
  778. params.inventoryType = this.inventoryType
  779. params.sceneInventory = this.sceneInventory
  780. params.creativeType = this.creativeType
  781. params.customize = this.customize
  782. params.webUrl = this.webUrl
  783. params.appName = this.appName
  784. params.isCommentDisable = this.isCommentDisable
  785. params.creativeDisplayMode = this.creativeDisplayMode
  786. params.adCategory = this.adCategory
  787. params.adKeywords = this.adKeywords
  788. params.name = this.name
  789. params.convertId = this.convertId
  790. params.iteratorNum = this.iteratorNum
  791. // var dataCreatives = this.HorizontalLargeImageListBig.concat(
  792. // this.HorizontalLargeImageListHeng,
  793. // this.HorizontalLargeImageListShu,
  794. // this.HorizontalLargeImageListZu,
  795. // this.HorizontalLargeImageListSmall,
  796. // this.HorizontalLargeImageListBigShu
  797. // )
  798. var dataCreatives = this.$refs.material.HorizontalLargeImageListBig.concat(
  799. this.$refs.material.HorizontalLargeImageListHeng,
  800. this.$refs.material.HorizontalLargeImageListShu,
  801. this.$refs.material.HorizontalLargeImageListZu,
  802. this.$refs.material.HorizontalLargeImageListSmall,
  803. this.$refs.material.HorizontalLargeImageListBigShu
  804. )
  805. console.log(dataCreatives)
  806. params.creatives = dataCreatives
  807. if (this.creativeType == 'program') {
  808. // params.titles = this.titleData
  809. params.titles = this.$refs.material.titleData
  810. }
  811. console.log(params)
  812. postAction(this.url.insertUrl, params).then(res => {
  813. console.log(res)
  814. if (res.success) {
  815. alert('广告创意批量创建成功')
  816. } else {
  817. alert(res.message)
  818. }
  819. })
  820. }
  821. })
  822. },
  823. onChange(value) {
  824. console.log(value)
  825. console.log(this.HorizontalLargeImageListSmall)
  826. console.log(this.HorizontalLargeImageListBig)
  827. console.log(this.HorizontalLargeImageListZu)
  828. },
  829. // 创建大图横图创意
  830. addCreative() {
  831. let type = this.materialType
  832. if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
  833. this.HorizontalLargeImageListSmall.push({
  834. typeCode: type,
  835. imageUrl: '',
  836. text: '',
  837. vadioUrl: '',
  838. multiple: [],
  839. countTag: 0,
  840. many: 3,
  841. showElse: true
  842. })
  843. this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
  844. }
  845. if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
  846. this.HorizontalLargeImageListBig.push({
  847. typeCode: type,
  848. imageUrl: '',
  849. text: '',
  850. vadioUrl: '',
  851. multiple: [],
  852. countTag: 0,
  853. many: 3,
  854. showElse: true
  855. })
  856. this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
  857. }
  858. if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
  859. this.HorizontalLargeImageListZu.push({
  860. creativeType: this.creativeType,
  861. typeCode: type,
  862. imageUrl: '',
  863. text: '',
  864. vadioUrl: '',
  865. multiple: [],
  866. countTag: 0,
  867. many: 3,
  868. showElse: true
  869. })
  870. this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
  871. }
  872. if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
  873. this.HorizontalLargeImageListShu.push({
  874. creativeType: this.creativeType,
  875. typeCode: type,
  876. imageUrl: '',
  877. text: '',
  878. vadioUrl: '',
  879. multiple: [],
  880. countTag: 0,
  881. many: 3,
  882. showElse: true
  883. })
  884. this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
  885. }
  886. if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
  887. this.HorizontalLargeImageListBigShu.push({
  888. creativeType: this.creativeType,
  889. typeCode: type,
  890. imageUrl: '',
  891. text: '',
  892. vadioUrl: '',
  893. multiple: [],
  894. countTag: 0,
  895. many: 3,
  896. showElse: true
  897. })
  898. this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
  899. }
  900. if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
  901. this.HorizontalLargeImageListHeng.push({
  902. creativeType: this.creativeType,
  903. typeCode: type,
  904. imageUrl: '',
  905. text: '',
  906. vadioUrl: '',
  907. multiple: [],
  908. countTag: 0,
  909. many: 3,
  910. showElse: true
  911. })
  912. this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
  913. }
  914. },
  915. deleteCreative(index) {
  916. console.log(index)
  917. console.log(this.HorizontalLargeImageList)
  918. this.HorizontalLargeImageList.splice(index, 1)
  919. this.horizonImageCreativeTextColl.splice(index, 1)
  920. this.range = null
  921. },
  922. getTags() {
  923. getPackage({ accountId: this.accountId }).then(res => {
  924. if (res.code == '0') {
  925. this.tags = res.creative_word
  926. }
  927. })
  928. },
  929. addTitle() {
  930. this.titleData.push({ text: '', titleMany: 0 })
  931. },
  932. tetleDetele(index) {
  933. this.titleData.splice(index, 1)
  934. }
  935. },
  936. created: function() {
  937. let params = {}
  938. postAction(this.url.campaignListUrl, params).then(res => {
  939. if (res.success) {
  940. this.campaignList = res.result.records
  941. }
  942. })
  943. params = {}
  944. params.pageSize = '1000'
  945. params.mediaId = '1'
  946. postAction(this.url.userAllocationList, params).then(res => {
  947. if (res.success) {
  948. this.userList = res.result.records
  949. }
  950. })
  951. params = {}
  952. getAction(this.url.industryListUrl, params).then(res => {
  953. this.options = res
  954. })
  955. params = {}
  956. params.pageSize = '1000'
  957. postAction(this.url.budgetTemplateListUrl, params).then(res => {
  958. if (res.success) {
  959. this.budgetList = res.result.records
  960. }
  961. })
  962. params = {}
  963. params.pageSize = '1000'
  964. params.mediaId = '1'
  965. postAction(this.url.userAllocationList, params).then(res => {
  966. if (res.success) {
  967. this.userList = res.result.records
  968. }
  969. })
  970. params = {}
  971. params.pageSize = '1000'
  972. postAction(this.url.deliverytargetTemplateListUrl, params).then(res => {
  973. if (res.success) {
  974. this.deliverytargetList = res.result.records
  975. }
  976. })
  977. params = {}
  978. params.pageSize = '1000'
  979. postAction(this.url.userorentationTemplateListUrl, params).then(res => {
  980. if (res.success) {
  981. this.userorentationList = res.result.records
  982. }
  983. })
  984. },
  985. watch: {
  986. creativeType: function(n, o) {
  987. console.log(n, o)
  988. this.HorizontalLargeImageListBig = []
  989. this.HorizontalLargeImageListHeng = []
  990. this.HorizontalLargeImageListShu = []
  991. this.HorizontalLargeImageListZu = []
  992. this.HorizontalLargeImageListSmall = []
  993. this.HorizontalLargeImageListBigShu = []
  994. this.HorizontalLargeImageList = []
  995. },
  996. accountId: function(n, o) {
  997. this.getTags()
  998. }
  999. },
  1000. computed: {
  1001. count: function() {
  1002. var bool
  1003. if (this.creativeType == 'customize') {
  1004. bool =
  1005. this.HorizontalLargeImageListBig.length +
  1006. this.HorizontalLargeImageListHeng.length +
  1007. this.HorizontalLargeImageListShu.length +
  1008. this.HorizontalLargeImageListZu.length +
  1009. this.HorizontalLargeImageListSmall.length +
  1010. this.HorizontalLargeImageListBigShu.length >=
  1011. 10
  1012. ? true
  1013. : false
  1014. } else {
  1015. if (
  1016. this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL' ||
  1017. this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO'
  1018. ) {
  1019. bool = this.HorizontalLargeImageListHeng.length + this.HorizontalLargeImageListShu.length >= 12 ? true : false
  1020. } else {
  1021. bool =
  1022. this.HorizontalLargeImageListBig.length +
  1023. this.HorizontalLargeImageListZu.length +
  1024. this.HorizontalLargeImageListSmall.length +
  1025. this.HorizontalLargeImageListBigShu.length >=
  1026. 10
  1027. ? true
  1028. : false
  1029. }
  1030. }
  1031. return bool
  1032. },
  1033. countMany: function() {
  1034. var bool =
  1035. this.HorizontalLargeImageListBig.length +
  1036. this.HorizontalLargeImageListHeng.length +
  1037. this.HorizontalLargeImageListShu.length +
  1038. this.HorizontalLargeImageListZu.length +
  1039. this.HorizontalLargeImageListSmall.length +
  1040. this.HorizontalLargeImageListBigShu.length
  1041. return bool
  1042. },
  1043. vadioMany: function() {
  1044. var bool = this.HorizontalLargeImageListHeng.length + this.HorizontalLargeImageListShu.length
  1045. return bool
  1046. },
  1047. imgMany: function() {
  1048. var bool =
  1049. this.HorizontalLargeImageListBig.length +
  1050. this.HorizontalLargeImageListZu.length +
  1051. this.HorizontalLargeImageListSmall.length +
  1052. this.HorizontalLargeImageListBigShu.length
  1053. return bool
  1054. }
  1055. }
  1056. }
  1057. </script>
  1058. <style lang="scss">
  1059. .dynamically_add_form_item {
  1060. .ant-form-item-label {
  1061. width: auto !important;
  1062. }
  1063. .ant-form-item-control-wrapper {
  1064. width: auto !important;
  1065. }
  1066. }
  1067. </style>