newCreate.vue 34 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012
  1. <style>
  2. .display-none-selset{
  3. display: none !important;
  4. }
  5. </style>
  6. <template>
  7. <div class="newCreate">
  8. <a-form :form="form">
  9. <div class="moduler">
  10. <div class="moduler-title">计划名称</div>
  11. <div class="adName">
  12. <span>广告计划名称:</span>
  13. <div class="nameList">
  14. <strong v-for="item in planInfo" :key="item.id" class="item">{{item.name+'('+item.id+')'}}</strong>
  15. </div>
  16. </div>
  17. </div>
  18. <!-- 设置投放位置 -->
  19. <div class="moduler">
  20. <div class="moduler-title">设置投放位置</div>
  21. <div class="ad-range">
  22. <div class="row-item">
  23. <div class="hint-item"></div>
  24. <div class="label-item">
  25. <div class="text-item">广告位置</div>
  26. <div class="required-item"></div>
  27. </div>
  28. <div class="input-item">
  29. <a-form-item>
  30. <a-radio-group v-model="adposition" @change="adPositionChange">
  31. <a-radio-button value="smartInventorys">优选广告位</a-radio-button>
  32. <a-radio-button value="inventoryTypes">按媒体指定位置</a-radio-button>
  33. <a-radio-button value="sceneInventorys">按场景指定位置</a-radio-button>
  34. </a-radio-group>
  35. </a-form-item>
  36. <div style="width: 400px; margin-top: 24px;" v-show="adposition=='inventoryTypes'">
  37. <div class="inventory-tags-lists-header">
  38. <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
  39. </a-checkbox>
  40. <div class="inventory-tags-lists-name"><strong>APP名称</strong></div>
  41. </div>
  42. <div class="inventory-tags-lists-container">
  43. <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
  44. </div>
  45. </div>
  46. <div style="width: 400px; margin-top: 24px;" v-show="adposition=='sceneInventorys'">
  47. <div class="inventory-tags-lists-header">
  48. <div class="inventory-tags-lists-name" style="padding-left:15px"><strong>位置选择</strong></div>
  49. </div>
  50. <div class="inventory-tags-lists-container">
  51. <a-radio-group v-model=sceneInventory>
  52. <a-radio :style="radioStyle" value="VIDEO_SCENE">沉浸式竖版视频场景广告位</a-radio>
  53. <a-radio :style="radioStyle" value="FEED_SCENE">信息流场景广告位</a-radio>
  54. <a-radio :style="radioStyle" value="TAIL_SCENE">视频后贴和尾帧场景广告位</a-radio>
  55. </a-radio-group>
  56. </div>
  57. </div>
  58. </div><div class=""></div>
  59. </div>
  60. </div>
  61. </div>
  62. <!-- 制作创意 -->
  63. <div class="moduler">
  64. <div class="moduler-title">制作创意</div>
  65. <div class="ad-range">
  66. <div class="row-item">
  67. <div class="hint-item"></div>
  68. <div class="label-item">
  69. <div class="text-item">创意方式</div>
  70. <div class="required-item"></div>
  71. </div>
  72. <div class="input-item">
  73. <a-form-item>
  74. <a-radio-group v-decorator="['creativeWay', { initialValue:'customCreativity' }]">
  75. <a-radio-button value="proceduralCreativity" :disabled="creativeWayDisable">程序化创意</a-radio-button>
  76. <a-radio-button value="customCreativity" :disabled="creativeWayDisable">自定义创意</a-radio-button>
  77. </a-radio-group>
  78. </a-form-item>
  79. </div>
  80. </div>
  81. <div class="row-item" v-if="getFormData('creativeWay')=='proceduralCreativity'">
  82. <div class="hint-item"></div>
  83. <div class="label-item">
  84. <div class="text-item">素材添加方式</div>
  85. <div class="required-item"></div>
  86. </div>
  87. <div class="input-item">
  88. <a-form-item>
  89. <a-radio-group v-decorator="['materialAddType', { initialValue:'customUpload' }]">
  90. <a-radio-button value="customUpload">自定义上传</a-radio-button>
  91. <a-tooltip>
  92. <template slot="title">暂未开启该功能</template>
  93. <a-radio-button value="chooseProgramCreativePackage" :disabled="true">选择程序化创意包</a-radio-button>
  94. </a-tooltip>
  95. </a-radio-group>
  96. </a-form-item>
  97. </div>
  98. </div>
  99. <div class="row-item">
  100. <div class="hint-item"></div>
  101. <div class="label-item">
  102. <div class="text-item">创意内容</div>
  103. <div class="required-item"></div>
  104. </div>
  105. <!-- <div class="input-item">
  106. <a-form-item>
  107. <p v-if="getFormData('creativeWay')=='customCreativity'">创意个数: <strong>{{}}/10</strong></p>
  108. <p v-else>
  109. <span>图片创意个数: <strong>{{}}/10</strong></span>
  110. <span>视频创意个数: <strong>{{}}/6</strong></span>
  111. </p>
  112. <div class="bui-tabs-scroll">
  113. <a-tabs
  114. :style="{ height: '500px',width:'700px',border:'1px solid #ccc',overflow:'auto',padding:'0 15px 10px'}">
  115. <a-tab-pane v-for="i in 10" :key="i" :tab="`Tab-${i}`">
  116. <div class="no">
  117. </div>
  118. <a-button type='primary' @click="addCreate">
  119. <a-icon type="plus" />添加创意
  120. </a-button>
  121. </a-tab-pane>
  122. </a-tabs>
  123. </div>
  124. </a-form-item>
  125. </div> -->
  126. <material ref="material" :creativeType="getFormData('creativeWay')"></material>
  127. </div>
  128. <div class="row-item">
  129. <div class="hint-item"></div>
  130. <div class="label-item">
  131. <div class="text-item">品牌主页</div>
  132. <div class="required-item"></div>
  133. </div>
  134. <div class="input-item">
  135. <a-form-item>
  136. <a-radio-group v-decorator="['deliveryRange', { initialValue:'DEFAULT' }]">
  137. <a-radio-button value="DEFAULT">不开启</a-radio-button>
  138. <a-radio-button value="UNION">开启抖音主页</a-radio-button>
  139. </a-radio-group>
  140. </a-form-item>
  141. </div>
  142. </div>
  143. <div class="row-item">
  144. <div class="hint-item"></div>
  145. <div class="label-item">
  146. <div class="text-item">应用下载详情页</div>
  147. <div class="required-item"></div>
  148. </div>
  149. <div class="input-item">
  150. <a-form-item>
  151. <a-input v-decorator="['webUrl', {rules:validationRules.url}]" />
  152. </a-form-item>
  153. </div>
  154. </div>
  155. <div class="row-item">
  156. <div class="hint-item"></div>
  157. <div class="label-item">
  158. <div class="text-item">行动号召</div>
  159. <div class="required-item"></div>
  160. </div>
  161. <div class="input-item">
  162. <a-form-item>
  163. <a-select v-decorator="[
  164. 'actionText', // 给表单赋值或拉取表单时,该input对应的key
  165. { rules: [{ required: true, message: '该选项必须填写' }] }
  166. ]" showSearch style="width: 480px">
  167. <a-select-option :value="item" v-for="(item,i) in actionTextList" :key="i">
  168. {{item}}
  169. </a-select-option>
  170. </a-select>
  171. </a-form-item>
  172. </div>
  173. </div>
  174. <div class="row-item">
  175. <div class="hint-item"></div>
  176. <div class="label-item">
  177. <div class="text-item">应用名</div>
  178. <div class="required-item"></div>
  179. </div>
  180. <div class="input-item">
  181. <a-form-item>
  182. <a-input placeholder="请输入2-10个字的应用名," :maxLength='10' v-decorator="['appName', {rules:validationRules.name}]" />
  183. </a-form-item>
  184. </div>
  185. </div>
  186. <div class="row-item">
  187. <div class="hint-item"></div>
  188. <div class="label-item">
  189. <div class="text-item">副标题</div>
  190. <!-- <div class="required-item"></div> -->
  191. </div>
  192. <div class="input-item">
  193. <a-form-item>
  194. <a-input placeholder="请输入2-12个字的副标题," :maxLength='12' v-decorator="['advancedCreativeTitle']" />
  195. </a-form-item>
  196. </div>
  197. </div>
  198. <div class="row-item">
  199. <div class="hint-item"></div>
  200. <div class="label-item">
  201. <div class="text-item">广告评论</div>
  202. <div class="required-item"></div>
  203. </div>
  204. <div class="input-item">
  205. <a-form-item>
  206. <a-radio-group v-decorator="['isCommentDisable', { initialValue:0 }]">
  207. <a-radio-button :value="0">关闭</a-radio-button>
  208. <a-radio-button :value="1">开启</a-radio-button>
  209. </a-radio-group>
  210. </a-form-item>
  211. </div>
  212. </div>
  213. <div class="row-item">
  214. <div class="hint-item"></div>
  215. <div class="label-item">
  216. <div class="text-item">创意展示</div>
  217. <div class="required-item"></div>
  218. </div>
  219. <div class="input-item">
  220. <a-form-item>
  221. <a-radio-group v-decorator="['creativeDisplayMode', { initialValue:'CREATIVE_DISPLAY_MODE_CTR' }]">
  222. <a-radio-button value="CREATIVE_DISPLAY_MODE_CTR">优选模式</a-radio-button>
  223. <a-radio-button value="CREATIVE_DISPLAY_MODE_RANDOM">轮播模式</a-radio-button>
  224. </a-radio-group>
  225. </a-form-item>
  226. </div>
  227. </div>
  228. </div>
  229. </div>
  230. <!-- 创意分类 -->
  231. <div class="moduler">
  232. <div class="moduler-title">创意分类</div>
  233. <div class="ad-range">
  234. <div class="row-item">
  235. <div class="hint-item"></div>
  236. <div class="label-item">
  237. <div class="text-item">创意分类</div>
  238. <div class="required-item"></div>
  239. </div>
  240. <div class="input-item">
  241. <a-form-item>
  242. <a-cascader :options="createOptions" v-model="thirdIndustryIds" :fieldNames="fieldNames" placeholder="请选择创意分类" @change="createChange" />
  243. </a-form-item>
  244. </div>
  245. </div>
  246. <div class="row-item">
  247. <div class="hint-item"></div>
  248. <div class="label-item">
  249. <div class="text-item">创意标签</div>
  250. <div class="required-item"></div>
  251. </div>
  252. <div class="input-item">
  253. <a-form-item>
  254. <!-- <a-input v-model="createTip" @keyup.enter="onSubmit"></a-input>
  255. <div v-if="createTipList.length>0">
  256. <template v-for="(tag, index) in createTipList">
  257. <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
  258. <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
  259. {{ `${tag.slice(0, 20)}...` }}
  260. </a-tag>
  261. </a-tooltip>
  262. <a-tag v-else :key="tag" :closable="true" :afterClose="() => handleClose(tag)">
  263. {{ tag }}
  264. </a-tag>
  265. </template>
  266. </div> -->
  267. <a-select mode="tags" style="width: 100%" placeholder="按空格生成标签" v-model="createTipList" :token-separators="[' ']" dropdownClassName="display-none-selset">
  268. </a-select>
  269. </a-form-item>
  270. </div>
  271. </div>
  272. </div>
  273. </div>
  274. <!-- 监测链接 -->
  275. <div class="moduler">
  276. <div class="moduler-title">监测链接</div>
  277. <div class="ad-range">
  278. <div class="row-item">
  279. <div class="hint-item"></div>
  280. <div class="label-item">
  281. <div class="text-item">展示</div>
  282. <!-- <div class="required-item"></div> -->
  283. </div>
  284. <div class="input-item">
  285. <a-form-item>
  286. <a-input v-decorator="['trackUrl']" />
  287. </a-form-item>
  288. </div>
  289. </div>
  290. <div class="row-item">
  291. <div class="hint-item"></div>
  292. <div class="label-item">
  293. <div class="text-item">点击</div>
  294. <!-- <div class="required-item"></div> -->
  295. </div>
  296. <div class="input-item">
  297. <a-form-item>
  298. <a-input v-decorator="['actionTrackUrl']" />
  299. </a-form-item>
  300. </div>
  301. </div>
  302. <div class="row-item">
  303. <div class="hint-item"></div>
  304. <div class="label-item">
  305. <div class="text-item">视频播放</div>
  306. <!-- <div class="required-item"></div> -->
  307. </div>
  308. <div class="input-item">
  309. <a-form-item>
  310. <a-input v-decorator="['videoPlayTrackUrl']" />
  311. </a-form-item>
  312. </div>
  313. </div>
  314. <div class="row-item">
  315. <div class="hint-item"></div>
  316. <div class="label-item">
  317. <div class="text-item">视频播完</div>
  318. <!-- <div class="required-item"></div> -->
  319. </div>
  320. <div class="input-item">
  321. <a-form-item>
  322. <a-input v-decorator="['videoPlayDoneTrackUrl']" />
  323. </a-form-item>
  324. </div>
  325. </div>
  326. <div class="row-item">
  327. <div class="hint-item"></div>
  328. <div class="label-item">
  329. <div class="text-item">视频有效播放</div>
  330. <!-- <div class="required-item"></div> -->
  331. </div>
  332. <div class="input-item">
  333. <a-form-item>
  334. <a-input v-decorator="['videoPlayEffectiveTrackUrl']" />
  335. </a-form-item>
  336. </div>
  337. </div>
  338. </div>
  339. </div>
  340. <div class="moduler">
  341. <!-- <div class="moduler-title"></div> -->
  342. <div>
  343. 当前账户:
  344. <strong>{{accountInfo.title}}</strong>
  345. </div>
  346. </div>
  347. <!-- 操作 -->
  348. <div class="moduler">
  349. <!-- <div class="moduler-title">计划名称</div> -->
  350. <div class="opt">
  351. <a-button type="default" style="margin-right:15px" @click="goBack">取消</a-button>
  352. <a-button type="primary" style="margin-right:15px" @click="goSave" :loading="loading">立即创建</a-button>
  353. </div>
  354. </div>
  355. </a-form>
  356. <div class="infoModal">
  357. <a-modal v-model="visible" title="提示" @ok="handleOk" :keyboard='false' :maskClosable='false'>
  358. <ul>
  359. <li v-for="(item,index) in errorInfo" :key="index">
  360. <span>第{{index+1}}条:</span>{{item.message}}
  361. </li>
  362. </ul>
  363. <template slot="footer">
  364. <a-button key="back" @click="handleCancel">
  365. 返回本页
  366. </a-button>
  367. <a-button key="submit" type="primary" @click="handleOk">
  368. 返回头条批量页面
  369. </a-button>
  370. </template>
  371. </a-modal>
  372. </div>
  373. </div>
  374. </template>
  375. <script>
  376. import moment from 'moment'
  377. import {
  378. getAction,
  379. postAction,
  380. downFile,
  381. downFilePost
  382. } from '@/api/manage'
  383. import material from './components/material'
  384. import qs from 'qs'
  385. const plainOptions = [{
  386. value: 'INVENTORY_FEED',
  387. label: '今日头条'
  388. },
  389. {
  390. value: 'INVENTORY_VIDEO_FEED',
  391. label: '西瓜视频'
  392. },
  393. {
  394. value: 'INVENTORY_AWEME_FEED',
  395. label: '抖音'
  396. },
  397. {
  398. value: 'INVENTORY_HOTSOON_FEED',
  399. label: '抖音火山版'
  400. },
  401. {
  402. value: 'INVENTORY_UNION_SLOT',
  403. label: '穿山甲'
  404. },
  405. ];
  406. export default {
  407. data() {
  408. return {
  409. planInfo: [],
  410. groupInfo: {},
  411. accountInfo: {},
  412. createTip: "",
  413. createTipList: [],
  414. actionTextList: [],
  415. radioStyle: {
  416. display: 'block',
  417. height: '30px',
  418. lineHeight: '30px',
  419. padding: '0 15px'
  420. },
  421. checkedList: [],
  422. indeterminate: false,
  423. checkAll: false,
  424. plainOptions,
  425. form: this.$form.createForm(this),
  426. positionvalue: undefined,
  427. validationRules: {
  428. url: [
  429. {
  430. required: true,
  431. validator: this.validateURL,
  432. },
  433. ],
  434. name:[{
  435. required: true,
  436. message:'应用名必须填写',
  437. }],
  438. bid:[{
  439. required: true,
  440. message:'出价信息必须填写',
  441. // validator: this.validateBid,
  442. }]
  443. },
  444. createType: undefined, //创意分类的页面
  445. createOptions: [], //创意分类的数组
  446. fieldNames: {
  447. label: 'name',
  448. value: 'id',
  449. children: 'children'
  450. },
  451. thirdIndustryId:undefined,
  452. thirdIndustryIds:undefined,
  453. adposition:'smartInventorys',
  454. sceneInventory:'VIDEO_SCENE',
  455. errorInfo:[],
  456. visible:false,
  457. loading:false,
  458. creativeWayDisable:false,//创意方式是否禁用
  459. currentCreateData:{}, // 编辑当前的创意的数据
  460. }
  461. },
  462. components: {
  463. material
  464. },
  465. methods: {
  466. handleChange(){
  467. console.log(this.createTipList)
  468. },
  469. handleOk(e) {
  470. this.visible=false;
  471. this.$router.push('/modules/BatchCreate/TouTiaoBatch')
  472. this.$bus.$emit('remove', '/modules/BatchCreate/newCreate')
  473. localStorage.removeItem('groupInfo')
  474. localStorage.removeItem('planInfo')
  475. localStorage.removeItem('accountInfo')
  476. },
  477. handleCancel(e) {
  478. this.visible = false;
  479. },
  480. handleClose(removedTag) {
  481. const tags = this.createTipList.filter(tag => tag !== removedTag)
  482. this.createTipList = tags
  483. },
  484. onSubmit() {
  485. // this.createTip
  486. if (this.createTip != '') {
  487. console.log(this.createTip.split(/\s+/))
  488. if (this.createTipList.length > 20) {
  489. this.$message.error('最多只能建立20个创意标签')
  490. } else {
  491. this.createTipList.push(...this.createTip.split(/\s+/))
  492. }
  493. this.createTip = ''
  494. }
  495. },
  496. onChange(checkedList) {
  497. this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
  498. this.checkAll = checkedList.length === plainOptions.length;
  499. },
  500. onCheckAllChange(e) {
  501. let valueOption = [];
  502. this.plainOptions.forEach((item) => {
  503. valueOption.push(item.value)
  504. })
  505. Object.assign(this, {
  506. checkedList: e.target.checked ? valueOption : [],
  507. indeterminate: false,
  508. checkAll: e.target.checked,
  509. });
  510. },
  511. // tab切换
  512. tabcallback() {
  513. },
  514. // 添加创意
  515. addCreate() {
  516. },
  517. createChange(value){
  518. console.log(value);
  519. this.thirdIndustryId=value[2]
  520. console.log(this.form.getFieldsValue())
  521. },
  522. // //获取表单的某一个属性值
  523. getFormData(className) {
  524. return this.form.getFieldValue(className)
  525. },
  526. // 广告位置选择改变
  527. adPositionChange(val) {
  528. console.log(val)
  529. // if (val.target.value == 'smartInventorys') {
  530. // this.form.setFieldsValue({
  531. // smartInventory: 1,
  532. // inventoryType: [],
  533. // })
  534. // } else if (val.target.value == 'inventoryTypes') {
  535. // this.form.setFieldsValue({
  536. // smartInventory: 0,
  537. // inventoryType: this.checkedList,
  538. // })
  539. // } else if (val.target.value == 'sceneInventorys') {
  540. // this.form.setFieldsValue({
  541. // smartInventory: 0,
  542. // inventoryType: [],
  543. // })
  544. // console.log(this.getFormData('sceneInventory'))
  545. // }
  546. },
  547. // 注册表单的字段
  548. initFormValue() {
  549. // this.form.getFieldDecorator('inventoryType')
  550. // this.form.getFieldDecorator('smartInventory')
  551. // this.form.getFieldDecorator('thirdIndustryId')
  552. // this.form.getFieldDecorator('sceneInventory')
  553. },
  554. // 验证网址
  555. IsURL(res) {
  556. // var strRegex = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/|www\.)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/
  557. var strRegex =
  558. /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+(.+[A-Za-z0-9-~\/])+$/
  559. var re = new RegExp(strRegex)
  560. // console.log(re.test(res))
  561. if (re.test(res)) {
  562. return true
  563. } else {
  564. return false
  565. }
  566. },
  567. validateURL(rule, value, callback) {
  568. // console.log(rule, value, callback);
  569. if (this.IsURL(value)) {
  570. callback()
  571. } else if (value && !this.IsURL(value)) {
  572. callback('链接地址无法访问,请正确输入')
  573. } else {
  574. // callback('下载链接必须填写')
  575. }
  576. },
  577. goBack() {
  578. this.$router.replace('/modules/BatchCreate/TouTiaoBatch')
  579. localStorage.removeItem('groupInfo');
  580. localStorage.removeItem('planInfo');
  581. localStorage.removeItem('accountInfo');
  582. this.$bus.$emit('remove', '/modules/BatchCreate/newCreate')
  583. },
  584. goSave() {
  585. this.$nextTick(() => {
  586. var dataCreatives = this.$refs.material.HorizontalLargeImageListBig.concat(
  587. this.$refs.material.HorizontalLargeImageListHeng,
  588. this.$refs.material.HorizontalLargeImageListShu,
  589. this.$refs.material.HorizontalLargeImageListZu,
  590. this.$refs.material.HorizontalLargeImageListSmall,
  591. this.$refs.material.HorizontalLargeImageListBigShu
  592. )
  593. console.log(dataCreatives, this.$refs.material.titleData)
  594. this.form.validateFields((err, values) => {
  595. if (!err) {
  596. var params = {
  597. ...values
  598. }
  599. this.loading=true;
  600. // params.thirdIndustryId = params.thirdIndustryId.pop()
  601. var dataCreatives = this.$refs.material.HorizontalLargeImageListBig.concat(
  602. this.$refs.material.HorizontalLargeImageListHeng,
  603. this.$refs.material.HorizontalLargeImageListShu,
  604. this.$refs.material.HorizontalLargeImageListZu,
  605. this.$refs.material.HorizontalLargeImageListSmall,
  606. this.$refs.material.HorizontalLargeImageListBigShu
  607. )
  608. console.log('Received values of form: ', values)
  609. console.log(dataCreatives)
  610. if (this.getFormData('creativeWay') == 'proceduralCreativity') {
  611. // params.titles = this.titleData
  612. params.titles = this.$refs.material.titleData
  613. }
  614. values.thirdIndustryId=this.thirdIndustryId;
  615. if (this.adposition == 'smartInventorys') {
  616. values.smartInventory=1;
  617. } else if (this.adposition == 'inventoryTypes') {
  618. values.inventoryType=this.checkedList
  619. } else if (this.adposition == 'sceneInventorys') {
  620. values.sceneInventory=this.sceneInventory
  621. }
  622. values.adKeywords=this.createTipList;
  623. let adIds=[];
  624. let postUrl=''
  625. if(this.currentCreateData.adId){
  626. postUrl='/ctop/byteDanceCreative/updateCreative'
  627. adIds[0]=this.planInfo[0].id
  628. }else{
  629. postUrl='/bytedance/batch/create/creative';
  630. this.planInfo.forEach(item=>{
  631. adIds.push(item.id)
  632. })
  633. }
  634. postAction(postUrl, {
  635. accountId:this.accountInfo.value,
  636. adIds,
  637. ...values,
  638. creatives: dataCreatives
  639. }).then((res) => {
  640. console.log(res)
  641. if (res.success) {
  642. this.errorInfo=res.data;
  643. this.loading=false;
  644. this.visible=true;
  645. // res.data.forEach((item)=>{
  646. // this.$message.error(item.message)
  647. // })
  648. } else {
  649. this.loading=false;
  650. }
  651. })
  652. } else {
  653. // console.log(err)
  654. this.$message.error('请正确填写必填项目')
  655. }
  656. })
  657. })
  658. },
  659. },
  660. mounted() {
  661. this.initFormValue();
  662. getAction('/bytedance/batch/industry/list').then(res => {
  663. this.createOptions = res.data
  664. })
  665. this.$bus.$emit('remove', '/modules/BatchCreate/newPlan')
  666. let planInfo = localStorage.getItem('planInfo')
  667. if (planInfo!='') {
  668. this.planInfo = JSON.parse(planInfo)
  669. }
  670. console.log(this.planInfo)
  671. let groupInfo = localStorage.getItem('groupInfo')
  672. if (groupInfo!=null) {
  673. this.groupInfo = JSON.parse(groupInfo)
  674. }
  675. let accountInfo = localStorage.getItem('accountInfo')
  676. if (accountInfo!=null) {
  677. this.accountInfo = JSON.parse(accountInfo)
  678. }
  679. getAction('/bytedance/batch/action/text', {
  680. accountId: "1649600126891015",
  681. landType: "APP"
  682. }).then(res => {
  683. if (res.code == '0') {
  684. this.actionTextList = res.data
  685. } else {
  686. this.actionTextList = []
  687. }
  688. })
  689. this.$nextTick(()=>{
  690. if(this.accountInfo.value&&this.planInfo[0].id){
  691. postAction('/ctop/byteDanceCreative/detail',qs.stringify({
  692. planId:this.planInfo[0].id,
  693. accountId:this.accountInfo.value
  694. })).then(res=>{
  695. console.log(res);
  696. if(res.success){
  697. if(res.data!=null){
  698. this.creativeWayDisable=true;
  699. // 编辑当前的创意的数据
  700. this.currentCreateData=res.data
  701. this.form.setFieldsValue({
  702. ...res.data
  703. })
  704. this.sceneInventory=res.data.sceneInventory;
  705. if(res.data.smartInventory){
  706. this.adposition='smartInventorys'
  707. }else if(res.data.sceneInventory){
  708. this.adposition='sceneInventorys';
  709. this.sceneInventory=res.data.sceneInventory
  710. }else if(res.data.inventoryType.length>0){
  711. this.adposition='inventoryTypes';
  712. this.checkedList=res.data.inventoryType;
  713. this.onChange(this.checkedList)
  714. }
  715. this.createTipList=res.data.adKeywords;
  716. let thirdIndustryArr=[];
  717. thirdIndustryArr[0]=(res.data.thirdIndustryId+'').substring(0,4);
  718. thirdIndustryArr[1]=(res.data.thirdIndustryId+'').substring(0,6);
  719. thirdIndustryArr[2]=(res.data.thirdIndustryId+'').substring(0,8);
  720. thirdIndustryArr=thirdIndustryArr.map(item=>{
  721. return item*1
  722. })
  723. console.log(thirdIndustryArr)
  724. this.thirdIndustryId=res.data.thirdIndustryId;
  725. this.thirdIndustryIds=thirdIndustryArr;
  726. if(res.data.title_list){
  727. this.form.setFieldsValue({
  728. creativeWay:'proceduralCreativity'
  729. })
  730. this.$refs.material.titleData=res.data.title_list
  731. }else{
  732. this.form.setFieldsValue({
  733. creativeWay:'customCreativity'
  734. })
  735. }
  736. var dataCreatives = this.$refs.material.HorizontalLargeImageListBig.concat(
  737. this.$refs.material.HorizontalLargeImageListHeng,
  738. this.$refs.material.HorizontalLargeImageListShu,
  739. this.$refs.material.HorizontalLargeImageListZu,
  740. this.$refs.material.HorizontalLargeImageListSmall,
  741. this.$refs.material.HorizontalLargeImageListBigShu
  742. )
  743. res.data.creatives.forEach(item=>{
  744. if(item.imageMode=="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL"){
  745. item.showElse=true;
  746. item.many=5
  747. this.$refs.material.HorizontalLargeImageListHeng.push(item)
  748. }else if(item.imageMode=="CREATIVE_IMAGE_MODE_VIDEO"){
  749. item.showElse=true;
  750. item.many=5
  751. this.$refs.material.HorizontalLargeImageListShu.push(item)
  752. }
  753. })
  754. if(this.$refs.material.HorizontalLargeImageListShu.length>0){
  755. this.$refs.material.HorizontalLargeImageList=this.$refs.material.HorizontalLargeImageListShu;
  756. this.$refs.material.materialType='CREATIVE_IMAGE_MODE_VIDEO'
  757. }else if(this.$refs.material.HorizontalLargeImageListHeng.length>0){
  758. this.$refs.material.HorizontalLargeImageList=this.$refs.material.HorizontalLargeImageListHeng;
  759. this.$refs.material.materialType='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'
  760. }
  761. console.log(this.$refs.material, this.$refs.material.titleData)
  762. }
  763. }
  764. })
  765. }
  766. })
  767. },
  768. }
  769. </script>
  770. <style lang="scss">
  771. .newCreate{
  772. .ant-btn-danger {
  773. background-color: #ff4d4f !important;
  774. }
  775. }
  776. .ant-tooltip-inner,
  777. .ant-tooltip-arrow::before {
  778. background-color: #fff;
  779. color: #333;
  780. }
  781. .ant-tooltip-inner {
  782. span {
  783. display: block;
  784. }
  785. }
  786. .ant-tooltip {
  787. max-width: 450px;
  788. }
  789. .newCreate {
  790. .ant-radio-button-wrapper {
  791. min-width: 80px;
  792. text-align: center;
  793. }
  794. .ant-form-item {
  795. -webkit-box-sizing: border-box;
  796. box-sizing: border-box;
  797. margin: 0;
  798. padding: 0;
  799. color: rgba(0, 0, 0, 0.65);
  800. font-size: 14px;
  801. font-variant: tabular-nums;
  802. line-height: 1.5;
  803. list-style: none;
  804. -webkit-font-feature-settings: 'tnum';
  805. font-feature-settings: 'tnum';
  806. vertical-align: top;
  807. }
  808. .directedBody {
  809. .ant-form-item {
  810. margin-bottom: 20px;
  811. }
  812. }
  813. .ant-checkbox-wrapper,
  814. .ant-checkbox-group-item {
  815. display: block;
  816. padding: 5px 15px;
  817. }
  818. .ant-checkbox-wrapper:first-child {
  819. padding: 0 15px 5px;
  820. }
  821. }
  822. </style>
  823. <style lang="scss" scoped>
  824. .newCreate {
  825. font-family: PingFangSC-Regular, tahoma, arial, 'Hiragino Sans GB', 'Microsoft yahei', sans-serif;
  826. color: #333;
  827. ul,
  828. li {
  829. margin: 0;
  830. padding: 0;
  831. }
  832. .moduler {
  833. background: #fff;
  834. margin-bottom: 16px;
  835. position: relative;
  836. padding: 32px 24px 48px 32px;
  837. border-radius: 4px;
  838. box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
  839. .moduler-title {
  840. display: flex;
  841. align-items: center;
  842. font-size: 22px;
  843. margin-bottom: 20px;
  844. }
  845. .row-item {
  846. display: flex;
  847. justify-content: flex-start;
  848. align-items: center;
  849. margin-bottom: 32px;
  850. }
  851. .row-item:last-of-type {
  852. margin-bottom: 0;
  853. }
  854. .row-item .hint-item {
  855. width: 24px;
  856. min-width: 24px;
  857. align-self: flex-start;
  858. line-height: 20px;
  859. height: 20px;
  860. margin-top: 9px;
  861. }
  862. .row-item .label-item {
  863. position: relative;
  864. align-items: flex-start;
  865. align-self: flex-start;
  866. line-height: 20px;
  867. height: 20px;
  868. margin-top: 10px;
  869. width: 80px;
  870. min-width: 80px;
  871. .text-item {
  872. font-size: 14px;
  873. width: 60px;
  874. }
  875. }
  876. .row-item .required-item {
  877. width: 4px;
  878. height: 4px;
  879. border-radius: 2px;
  880. background: #f45858;
  881. position: absolute;
  882. right: 10px;
  883. top: 50%;
  884. transform: translateY(-50%);
  885. }
  886. .row-item .input-item {
  887. min-width: 480px;
  888. position: relative;
  889. // height: 35px;
  890. .tip {
  891. font-size: 12px;
  892. color: tomato;
  893. }
  894. .inventory-tags-lists-header {
  895. background-color: #F8F9FA;
  896. border: 1px solid #E4E9ED;
  897. height: 36px;
  898. line-height: 33px;
  899. border-radius: 4px 4px 0 0;
  900. font-weight: bold;
  901. display: flex;
  902. }
  903. .inventory-tags-lists-container {
  904. border: 1px solid #E4E9ED;
  905. margin-top: -1px;
  906. height: 100%;
  907. padding: 4px 0px;
  908. border-radius: 0 0 4px 4px;
  909. }
  910. .inventory-tags-lists-item {
  911. width: 100%;
  912. height: 37px;
  913. line-height: 37px;
  914. padding-left: 12px;
  915. padding-right: 12px;
  916. display: flex;
  917. font-size: 14px;
  918. color: #333;
  919. }
  920. }
  921. }
  922. .opt {
  923. text-align: right;
  924. }
  925. .adName{
  926. display: flex;
  927. .nameList{
  928. width: 90%;
  929. }
  930. .item{
  931. display: inline-block;
  932. width: 30%;
  933. margin-left: 15px;
  934. margin-bottom: 10px;
  935. }
  936. }
  937. }
  938. </style>