newCreate.vue 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916
  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>
  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">程序化创意</a-radio-button>
  71. <a-radio-button value="customCreativity">自定义创意</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="['creativeWay', { initialValue:'DEFAULT' }]">
  85. <a-radio-button value="proceduralCreativity">自定义上传</a-radio-button>
  86. <a-tooltip>
  87. <template slot="title">暂未开启该功能</template>
  88. <a-radio-button value="customCreativity" :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" :fieldNames="fieldNames"
  238. placeholder="请选择创意分类" @change="createChange" />
  239. </a-form-item>
  240. </div>
  241. </div>
  242. <div class="row-item">
  243. <div class="hint-item"></div>
  244. <div class="label-item">
  245. <div class="text-item">创意标签</div>
  246. <div class="required-item"></div>
  247. </div>
  248. <div class="input-item">
  249. <a-form-item>
  250. <!-- <a-input v-model="createTip" @keyup.enter="onSubmit"></a-input>
  251. <div v-if="createTipList.length>0">
  252. <template v-for="(tag, index) in createTipList">
  253. <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
  254. <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
  255. {{ `${tag.slice(0, 20)}...` }}
  256. </a-tag>
  257. </a-tooltip>
  258. <a-tag v-else :key="tag" :closable="true" :afterClose="() => handleClose(tag)">
  259. {{ tag }}
  260. </a-tag>
  261. </template>
  262. </div> -->
  263. <a-select mode="tags" style="width: 100%" placeholder="按空格生成标签" v-model="createTipList" :token-separators="[' ']" >
  264. </a-select>
  265. </a-form-item>
  266. </div>
  267. </div>
  268. </div>
  269. </div>
  270. <!-- 监测链接 -->
  271. <div class="moduler">
  272. <div class="moduler-title">监测链接</div>
  273. <div class="ad-range">
  274. <div class="row-item">
  275. <div class="hint-item"></div>
  276. <div class="label-item">
  277. <div class="text-item">展示</div>
  278. <!-- <div class="required-item"></div> -->
  279. </div>
  280. <div class="input-item">
  281. <a-form-item>
  282. <a-input v-decorator="['trackUrl']" />
  283. </a-form-item>
  284. </div>
  285. </div>
  286. <div class="row-item">
  287. <div class="hint-item"></div>
  288. <div class="label-item">
  289. <div class="text-item">点击</div>
  290. <!-- <div class="required-item"></div> -->
  291. </div>
  292. <div class="input-item">
  293. <a-form-item>
  294. <a-input v-decorator="['actionTrackUrl']" />
  295. </a-form-item>
  296. </div>
  297. </div>
  298. <div class="row-item">
  299. <div class="hint-item"></div>
  300. <div class="label-item">
  301. <div class="text-item">视频播放</div>
  302. <!-- <div class="required-item"></div> -->
  303. </div>
  304. <div class="input-item">
  305. <a-form-item>
  306. <a-input v-decorator="['videoPlayTrackUrl']" />
  307. </a-form-item>
  308. </div>
  309. </div>
  310. <div class="row-item">
  311. <div class="hint-item"></div>
  312. <div class="label-item">
  313. <div class="text-item">视频播完</div>
  314. <!-- <div class="required-item"></div> -->
  315. </div>
  316. <div class="input-item">
  317. <a-form-item>
  318. <a-input v-decorator="['videoPlayDoneTrackUrl']" />
  319. </a-form-item>
  320. </div>
  321. </div>
  322. <div class="row-item">
  323. <div class="hint-item"></div>
  324. <div class="label-item">
  325. <div class="text-item">视频有效播放</div>
  326. <!-- <div class="required-item"></div> -->
  327. </div>
  328. <div class="input-item">
  329. <a-form-item>
  330. <a-input v-decorator="['videoPlayEffectiveTrackUrl']" />
  331. </a-form-item>
  332. </div>
  333. </div>
  334. </div>
  335. </div>
  336. <div class="moduler">
  337. <!-- <div class="moduler-title"></div> -->
  338. <div>
  339. 当前账户:
  340. <strong>{{accountInfo.title}}</strong>
  341. </div>
  342. </div>
  343. <!-- 操作 -->
  344. <div class="moduler">
  345. <!-- <div class="moduler-title">计划名称</div> -->
  346. <div class="opt">
  347. <a-button type="default" style="margin-right:15px" @click="goBack">取消</a-button>
  348. <a-button type="primary" style="margin-right:15px" @click="goSave" :loading="loading">立即创建</a-button>
  349. </div>
  350. </div>
  351. </a-form>
  352. <div class="infoModal">
  353. <a-modal v-model="visible" title="提示" @ok="handleOk" :keyboard='false' :maskClosable='false'>
  354. <ul>
  355. <li v-for="(item,index) in errorInfo" :key="index">
  356. <span>第{{index+1}}条:</span>{{item.message}}
  357. </li>
  358. </ul>
  359. <template slot="footer">
  360. <a-button key="back" @click="handleCancel">
  361. 返回本页
  362. </a-button>
  363. <a-button key="submit" type="primary" @click="handleOk">
  364. 返回头条批量页面
  365. </a-button>
  366. </template>
  367. </a-modal>
  368. </div>
  369. </div>
  370. </template>
  371. <script>
  372. import moment from 'moment'
  373. import {
  374. getAction,
  375. postAction,
  376. downFile,
  377. downFilePost
  378. } from '@/api/manage'
  379. import material from './components/material'
  380. import qs from 'qs'
  381. const plainOptions = [{
  382. value: 'INVENTORY_FEED',
  383. label: '今日头条'
  384. },
  385. {
  386. value: 'INVENTORY_VIDEO_FEED',
  387. label: '西瓜视频'
  388. },
  389. {
  390. value: 'INVENTORY_AWEME_FEED',
  391. label: '抖音'
  392. },
  393. {
  394. value: 'INVENTORY_HOTSOON_FEED',
  395. label: '抖音火山版'
  396. },
  397. {
  398. value: 'INVENTORY_UNION_SLOT',
  399. label: '穿山甲'
  400. },
  401. ];
  402. export default {
  403. data() {
  404. return {
  405. planInfo: [],
  406. groupInfo: {},
  407. accountInfo: {},
  408. createTip: "",
  409. createTipList: [],
  410. actionTextList: [],
  411. radioStyle: {
  412. display: 'block',
  413. height: '30px',
  414. lineHeight: '30px',
  415. padding: '0 15px'
  416. },
  417. checkedList: [],
  418. indeterminate: false,
  419. checkAll: false,
  420. plainOptions,
  421. form: this.$form.createForm(this),
  422. positionvalue: undefined,
  423. validationRules: {
  424. url: [
  425. {
  426. required: true,
  427. validator: this.validateURL,
  428. },
  429. ],
  430. name:[{
  431. required: true,
  432. message:'应用名必须填写',
  433. }],
  434. bid:[{
  435. required: true,
  436. message:'出价信息必须填写',
  437. // validator: this.validateBid,
  438. }]
  439. },
  440. createType: undefined, //创意分类的页面
  441. createOptions: [], //创意分类的数组
  442. fieldNames: {
  443. label: 'name',
  444. value: 'id',
  445. children: 'children'
  446. },
  447. thirdIndustryId:undefined,
  448. adposition:'smartInventorys',
  449. sceneInventory:'VIDEO_SCENE',
  450. errorInfo:[],
  451. visible:false,
  452. loading:false,
  453. }
  454. },
  455. components: {
  456. material
  457. },
  458. methods: {
  459. handleChange(){
  460. console.log(this.createTipList)
  461. },
  462. handleOk(e) {
  463. this.visible=false;
  464. this.$router.push('/modules/BatchCreate/TouTiaoBatch')
  465. this.$bus.$emit('remove', '/modules/BatchCreate/newCreate')
  466. localStorage.removeItem('groupInfo')
  467. localStorage.removeItem('planInfo')
  468. localStorage.removeItem('accountInfo')
  469. },
  470. handleCancel(e) {
  471. this.visible = false;
  472. },
  473. handleClose(removedTag) {
  474. const tags = this.createTipList.filter(tag => tag !== removedTag)
  475. this.createTipList = tags
  476. },
  477. onSubmit() {
  478. // this.createTip
  479. if (this.createTip != '') {
  480. console.log(this.createTip.split(/\s+/))
  481. if (this.createTipList.length > 20) {
  482. this.$message.error('最多只能建立20个创意标签')
  483. } else {
  484. this.createTipList.push(...this.createTip.split(/\s+/))
  485. }
  486. this.createTip = ''
  487. }
  488. },
  489. onChange(checkedList) {
  490. this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
  491. this.checkAll = checkedList.length === plainOptions.length;
  492. },
  493. onCheckAllChange(e) {
  494. let valueOption = [];
  495. this.plainOptions.forEach((item) => {
  496. valueOption.push(item.value)
  497. })
  498. Object.assign(this, {
  499. checkedList: e.target.checked ? valueOption : [],
  500. indeterminate: false,
  501. checkAll: e.target.checked,
  502. });
  503. },
  504. // tab切换
  505. tabcallback() {
  506. },
  507. // 添加创意
  508. addCreate() {
  509. },
  510. createChange(value){
  511. console.log(value);
  512. this.thirdIndustryId=value[2]
  513. // this.form.getFieldDecorator('thirdIndustryId')
  514. // this.form.setFieldsValue({
  515. // thirdIndustryId:value[2]
  516. // });
  517. console.log(this.form.getFieldsValue())
  518. },
  519. // //获取表单的某一个属性值
  520. getFormData(className) {
  521. return this.form.getFieldValue(className)
  522. },
  523. // 广告位置选择改变
  524. adPositionChange(val) {
  525. console.log(val)
  526. // if (val.target.value == 'smartInventorys') {
  527. // this.form.setFieldsValue({
  528. // smartInventory: 1,
  529. // inventoryType: [],
  530. // })
  531. // } else if (val.target.value == 'inventoryTypes') {
  532. // this.form.setFieldsValue({
  533. // smartInventory: 0,
  534. // inventoryType: this.checkedList,
  535. // })
  536. // } else if (val.target.value == 'sceneInventorys') {
  537. // this.form.setFieldsValue({
  538. // smartInventory: 0,
  539. // inventoryType: [],
  540. // })
  541. // console.log(this.getFormData('sceneInventory'))
  542. // }
  543. },
  544. // 注册表单的字段
  545. initFormValue() {
  546. // this.form.getFieldDecorator('inventoryType')
  547. // this.form.getFieldDecorator('smartInventory')
  548. // this.form.getFieldDecorator('thirdIndustryId')
  549. // this.form.getFieldDecorator('sceneInventory')
  550. },
  551. // 验证网址
  552. IsURL(res) {
  553. // var strRegex = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/|www\.)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/
  554. var strRegex =
  555. /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+(.+[A-Za-z0-9-~\/])+$/
  556. var re = new RegExp(strRegex)
  557. // console.log(re.test(res))
  558. if (re.test(res)) {
  559. return true
  560. } else {
  561. return false
  562. }
  563. },
  564. validateURL(rule, value, callback) {
  565. // console.log(rule, value, callback);
  566. if (this.IsURL(value)) {
  567. callback()
  568. } else if (value && !this.IsURL(value)) {
  569. callback('链接地址无法访问,请正确输入')
  570. } else {
  571. // callback('下载链接必须填写')
  572. }
  573. },
  574. goBack() {
  575. this.$router.replace('/modules/BatchCreate/TouTiaoBatch')
  576. this.$bus.$emit('remove', '/modules/BatchCreate/newCreate')
  577. },
  578. goSave() {
  579. this.$nextTick(() => {
  580. var dataCreatives = this.$refs.material.HorizontalLargeImageListBig.concat(
  581. this.$refs.material.HorizontalLargeImageListHeng,
  582. this.$refs.material.HorizontalLargeImageListShu,
  583. this.$refs.material.HorizontalLargeImageListZu,
  584. this.$refs.material.HorizontalLargeImageListSmall,
  585. this.$refs.material.HorizontalLargeImageListBigShu
  586. )
  587. console.log(dataCreatives, this.$refs.material.titleData)
  588. this.form.validateFields((err, values) => {
  589. if (!err) {
  590. var params = {
  591. ...values
  592. }
  593. this.loading=true;
  594. // params.thirdIndustryId = params.thirdIndustryId.pop()
  595. var dataCreatives = this.$refs.material.HorizontalLargeImageListBig.concat(
  596. this.$refs.material.HorizontalLargeImageListHeng,
  597. this.$refs.material.HorizontalLargeImageListShu,
  598. this.$refs.material.HorizontalLargeImageListZu,
  599. this.$refs.material.HorizontalLargeImageListSmall,
  600. this.$refs.material.HorizontalLargeImageListBigShu
  601. )
  602. console.log('Received values of form: ', values)
  603. console.log(dataCreatives)
  604. if (this.getFormData('creativeWay') == 'proceduralCreativity') {
  605. // params.titles = this.titleData
  606. params.titles = this.$refs.material.titleData
  607. }
  608. values.thirdIndustryId=this.thirdIndustryId;
  609. if (this.adposition == 'smartInventorys') {
  610. values.smartInventory=1;
  611. } else if (this.adposition == 'inventoryTypes') {
  612. values.inventoryType=this.checkedList
  613. } else if (this.adposition == 'sceneInventorys') {
  614. values.sceneInventory=this.sceneInventory
  615. }
  616. values.adKeywords=this.createTipList;
  617. let adIds=[];
  618. this.planInfo.forEach(item=>{
  619. adIds.push(item.id)
  620. })
  621. postAction('/bytedance/batch/create/creative', {
  622. accountId:this.accountInfo.value,
  623. adIds,
  624. ...values,
  625. creatives: dataCreatives
  626. }).then((res) => {
  627. console.log(res)
  628. if (res.success) {
  629. this.errorInfo=res.data;
  630. this.loading=false;
  631. this.visible=true;
  632. // res.data.forEach((item)=>{
  633. // this.$message.error(item.message)
  634. // })
  635. } else {
  636. this.loading=false;
  637. }
  638. })
  639. } else {
  640. // console.log(err)
  641. this.$message.error('请正确填写必填项目')
  642. }
  643. })
  644. })
  645. },
  646. // 回显数据专用
  647. echoData(){
  648. postAction('',{
  649. }).then(res=>{
  650. console.log(res)
  651. })
  652. },
  653. },
  654. mounted() {
  655. this.initFormValue();
  656. getAction('/bytedance/batch/industry/list').then(res => {
  657. this.createOptions = res.data
  658. })
  659. this.$bus.$emit('remove', '/modules/BatchCreate/newPlan')
  660. let planInfo = localStorage.getItem('planInfo')
  661. if (planInfo) {
  662. this.planInfo = JSON.parse(planInfo)
  663. }
  664. console.log(this.planInfo)
  665. let groupInfo = localStorage.getItem('groupInfo')
  666. if (groupInfo) {
  667. this.groupInfo = JSON.parse(groupInfo)
  668. }
  669. let accountInfo = localStorage.getItem('accountInfo')
  670. if (accountInfo) {
  671. this.accountInfo = JSON.parse(accountInfo)
  672. }
  673. getAction('/bytedance/batch/action/text', {
  674. accountId: "1649600126891015",
  675. landType: "APP"
  676. }).then(res => {
  677. if (res.code == '0') {
  678. this.actionTextList = res.data
  679. } else {
  680. this.actionTextList = []
  681. }
  682. })
  683. },
  684. }
  685. </script>
  686. <style lang="scss">
  687. .newCreate{
  688. .ant-btn-danger {
  689. background-color: #ff4d4f !important;
  690. }
  691. }
  692. .ant-tooltip-inner,
  693. .ant-tooltip,
  694. .ant-tooltip-arrow::before {
  695. background-color: #fff;
  696. color: #333;
  697. }
  698. .ant-tooltip-inner {
  699. span {
  700. display: block;
  701. }
  702. }
  703. .ant-tooltip {
  704. max-width: 450px;
  705. }
  706. .newCreate {
  707. .ant-radio-button-wrapper {
  708. min-width: 80px;
  709. text-align: center;
  710. }
  711. .ant-form-item {
  712. -webkit-box-sizing: border-box;
  713. box-sizing: border-box;
  714. margin: 0;
  715. padding: 0;
  716. color: rgba(0, 0, 0, 0.65);
  717. font-size: 14px;
  718. font-variant: tabular-nums;
  719. line-height: 1.5;
  720. list-style: none;
  721. -webkit-font-feature-settings: 'tnum';
  722. font-feature-settings: 'tnum';
  723. vertical-align: top;
  724. }
  725. .directedBody {
  726. .ant-form-item {
  727. margin-bottom: 20px;
  728. }
  729. }
  730. .ant-checkbox-wrapper,
  731. .ant-checkbox-group-item {
  732. display: block;
  733. padding: 5px 15px;
  734. }
  735. .ant-checkbox-wrapper:first-child {
  736. padding: 0 15px 5px;
  737. }
  738. }
  739. </style>
  740. <style lang="scss" scoped>
  741. .newCreate {
  742. font-family: PingFangSC-Regular, tahoma, arial, 'Hiragino Sans GB', 'Microsoft yahei', sans-serif;
  743. color: #333;
  744. ul,
  745. li {
  746. margin: 0;
  747. padding: 0;
  748. }
  749. .moduler {
  750. background: #fff;
  751. margin-bottom: 16px;
  752. position: relative;
  753. padding: 32px 24px 48px 32px;
  754. border-radius: 4px;
  755. box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
  756. .moduler-title {
  757. display: flex;
  758. align-items: center;
  759. font-size: 22px;
  760. margin-bottom: 20px;
  761. }
  762. .row-item {
  763. display: flex;
  764. justify-content: flex-start;
  765. align-items: center;
  766. margin-bottom: 32px;
  767. }
  768. .row-item:last-of-type {
  769. margin-bottom: 0;
  770. }
  771. .row-item .hint-item {
  772. width: 24px;
  773. min-width: 24px;
  774. align-self: flex-start;
  775. line-height: 20px;
  776. height: 20px;
  777. margin-top: 5px;
  778. }
  779. .row-item .label-item {
  780. position: relative;
  781. align-items: flex-start;
  782. align-self: flex-start;
  783. line-height: 20px;
  784. height: 20px;
  785. margin-top: 7px;
  786. width: 80px;
  787. min-width: 80px;
  788. .text-item {
  789. font-size: 14px;
  790. width: 60px;
  791. }
  792. }
  793. .row-item .required-item {
  794. width: 4px;
  795. height: 4px;
  796. border-radius: 2px;
  797. background: #f45858;
  798. position: absolute;
  799. right: 10px;
  800. top: 50%;
  801. transform: translateY(-50%);
  802. }
  803. .row-item .input-item {
  804. min-width: 480px;
  805. position: relative;
  806. // height: 35px;
  807. .tip {
  808. font-size: 12px;
  809. color: tomato;
  810. }
  811. .inventory-tags-lists-header {
  812. background-color: #F8F9FA;
  813. border: 1px solid #E4E9ED;
  814. height: 36px;
  815. line-height: 33px;
  816. border-radius: 4px 4px 0 0;
  817. font-weight: bold;
  818. display: flex;
  819. }
  820. .inventory-tags-lists-container {
  821. border: 1px solid #E4E9ED;
  822. margin-top: -1px;
  823. height: 100%;
  824. padding: 4px 0px;
  825. border-radius: 0 0 4px 4px;
  826. }
  827. .inventory-tags-lists-item {
  828. width: 100%;
  829. height: 37px;
  830. line-height: 37px;
  831. padding-left: 12px;
  832. padding-right: 12px;
  833. display: flex;
  834. font-size: 14px;
  835. color: #333;
  836. }
  837. }
  838. }
  839. .opt {
  840. text-align: right;
  841. }
  842. .adName{
  843. display: flex;
  844. .nameList{
  845. width: 90%;
  846. }
  847. .item{
  848. display: inline-block;
  849. width: 30%;
  850. margin-left: 15px;
  851. margin-bottom: 10px;
  852. }
  853. }
  854. }
  855. </style>