newCreate.vue 34 KB

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