newPlan.vue 56 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447
  1. <template>
  2. <div class="newPlan">
  3. <a-form :form="form">
  4. <div class="moduler">
  5. <div class="moduler-title">所属广告组</div>
  6. <div>
  7. 广告组名称:
  8. <strong>{{groupInfo.campaignName||groupInfo.name}}</strong>
  9. </div>
  10. </div>
  11. <!-- 投放范围 -->
  12. <div class="moduler">
  13. <div class="moduler-title">投放范围</div>
  14. <div class="ad-range">
  15. <div class="row-item">
  16. <div class="hint-item"></div>
  17. <div class="label-item">
  18. <div class="text-item">投放范围</div>
  19. <div class="required-item"></div>
  20. </div>
  21. <div class="input-item">
  22. <a-form-item>
  23. <a-radio-group v-decorator="['deliveryRange', { initialValue:'DEFAULT' }]">
  24. <a-radio-button value="DEFAULT">默认</a-radio-button>
  25. <a-radio-button value="UNION">
  26. 穿山甲
  27. <a-tooltip>
  28. <template slot="title">基于4亿日活跃用户大数据积累,顶尖AI智能推荐技术,今日头条与最广泛的合作伙伴携手打造全新移动生态联盟</template>
  29. <a-icon type="question-circle" />
  30. </a-tooltip>
  31. </a-radio-button>
  32. </a-radio-group>
  33. </a-form-item>
  34. </div>
  35. </div>
  36. <div class="row-item" v-if="getFormData('deliveryRange')=='UNION'">
  37. <div class="hint-item"></div>
  38. <div class="label-item">
  39. <div class="text-item">投放形式</div>
  40. <div class="required-item"></div>
  41. </div>
  42. <div class="input-item">
  43. <a-form-item>
  44. <a-radio-group v-decorator="['unionVideoType', { initialValue:'REWARDED_VIDEO' }]">
  45. <a-radio-button value="REWARDED_VIDEO">
  46. 激励视频
  47. <a-tooltip>
  48. <template slot="title">特定场景下用户通过观看视频广告以换取游戏/应用内虚拟奖励的广告</template>
  49. <a-icon type="question-circle" />
  50. </a-tooltip>
  51. </a-radio-button>
  52. <a-radio-button value="ORIGINAL_VIDEO">原生</a-radio-button>
  53. <a-radio-button value="SPLASH_VIDEO">开屏</a-radio-button>
  54. </a-radio-group>
  55. </a-form-item>
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. <!-- 投放目标 -->
  61. <div class="moduler">
  62. <div class="moduler-title">投放目标</div>
  63. <div class="ad-range">
  64. <div class="row-item">
  65. <div class="hint-item">
  66. <a-tooltip>
  67. <template slot="title">
  68. <span>选择投放目标后,系统会向最有可能发生该目标行为的用户展示你的广告。</span>
  69. <span>转化量:将广告投放给转化意愿高的用户</span>
  70. <span>点击量:将广告投放给点击意愿高的用户</span>
  71. <span>展示量:让更多的用户看见广告</span>
  72. </template>
  73. <a-icon type="question-circle" />
  74. </a-tooltip>
  75. </div>
  76. <div class="label-item">
  77. <div class="text-item">投放目标</div>
  78. <div class="required-item"></div>
  79. </div>
  80. <div class="input-item">
  81. <a-form-item>
  82. <a-radio-group v-decorator="['launchTarget', { initialValue:'CONVERT_AMOUNT' }]" @change="launchTargetChange">
  83. <a-radio-button value="CONVERT_AMOUNT">转化量</a-radio-button>
  84. <a-radio-button value="CLICK_AMOUNT">点击量</a-radio-button>
  85. <a-radio-button value="SHOW_AMOUNT">展示量</a-radio-button>
  86. </a-radio-group>
  87. </a-form-item>
  88. </div>
  89. </div>
  90. <div class="row-item">
  91. <div class="hint-item"></div>
  92. <div class="label-item">
  93. <div class="text-item">应用类型</div>
  94. <div class="required-item"></div>
  95. </div>
  96. <div class="input-item">
  97. <a-form-item>
  98. <a-radio-group v-decorator="['appType', { initialValue:'APP_ANDROID' }]">
  99. <a-radio-button value="APP_ANDROID">安卓</a-radio-button>
  100. <a-radio-button value="APP_IOS">IOS</a-radio-button>
  101. </a-radio-group>
  102. </a-form-item>
  103. </div>
  104. </div>
  105. <div class="row-item">
  106. <div class="hint-item"></div>
  107. <div class="label-item">
  108. <div class="text-item" v-if="groupInfo.landingType=='APP'">下载方式</div>
  109. <div class="text-item" v-if="groupInfo.landingType=='LINK'">投放内容</div>
  110. <div class="required-item"></div>
  111. </div>
  112. <div class="input-item">
  113. <a-form-item>
  114. <a-radio-group
  115. v-decorator="['downloadType',{ initialValue:'DOWNLOAD_URL' }]"
  116. @change="downloadTypeChange"
  117. v-show="groupInfo.landingType=='APP'"
  118. >
  119. <a-radio-button value="DOWNLOAD_URL">下载链接</a-radio-button>
  120. <a-radio-button value="EXTERNAL_URL">落地页</a-radio-button>
  121. </a-radio-group>
  122. <a-radio-group
  123. v-decorator="['promotionContent',{ initialValue:'EXTERNAL_URL' }]"
  124. @change="downloadTypeChange"
  125. v-show="groupInfo.landingType=='LINK'"
  126. >
  127. <a-radio-button value="EXTERNAL_URL">落地页</a-radio-button>
  128. <!-- <a-radio-button value="MICRO_APP">小程序</a-radio-button> -->
  129. </a-radio-group>
  130. </a-form-item>
  131. </div>
  132. </div>
  133. <!-- <div class="row-item" v-if="groupInfo.landingType=='LINK'">
  134. <div class="hint-item"></div>
  135. <div class="label-item">
  136. <div class="text-item">投放内容</div>
  137. <div class="required-item"></div>
  138. </div>
  139. <div class="input-item">
  140. <a-form-item>
  141. <a-radio-group v-decorator="['downloadType', { initialValue:'EXTERNAL_URL' }]">
  142. <a-radio-button value="EXTERNAL_URL">落地页</a-radio-button>
  143. <a-radio-button value="MICRO_APP">小程序</a-radio-button>
  144. </a-radio-group>
  145. </a-form-item>
  146. </div>
  147. </div>-->
  148. <!-- {{getFormData('downloadType')}} -->
  149. <!-- {{IsURL(getFormData('downloadUrl'))}} -->
  150. <div class="row-item" v-if="getFormData('downloadType')=='DOWNLOAD_URL'">
  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. <!-- , {rules:validationRules.url} -->
  158. <a-form-item>
  159. <!-- <a-input v-decorator="['downloadUrl']" autocomplete="off"/> -->
  160. <a-input v-decorator="['downloadUrl', {rules:validationRules.url}]" />
  161. </a-form-item>
  162. <span style="display:inline-block;margin-top:15px">
  163. <a-checkbox
  164. @change="downloadModeChange"
  165. value="APP_STORE_DELIVERY"
  166. v-if="getFormData('appType')=='APP_ANDROID'"
  167. >优先从系统应用商店下载(请确保应用已在应用商店内上架)</a-checkbox>
  168. </span>
  169. </div>
  170. </div>
  171. <div class="row-item" v-if="getFormData('downloadType')=='EXTERNAL_URL'">
  172. <div class="hint-item"></div>
  173. <div class="label-item">
  174. <div class="text-item">落地页链接</div>
  175. <div class="required-item"></div>
  176. </div>
  177. <div class="input-item">
  178. <a-form-item>
  179. <a-input v-decorator="['externalUrl', {rules:validationRules.url}]" />
  180. </a-form-item>
  181. </div>
  182. </div>
  183. <div class="row-item" v-if="getFormData('downloadType')=='QUICK_APP_URL'">
  184. <div class="hint-item"></div>
  185. <div class="label-item">
  186. <div class="text-item">小程序链接</div>
  187. <div class="required-item"></div>
  188. </div>
  189. <div class="input-item">
  190. <a-form-item>
  191. <a-input v-decorator="['appSchema', {rules:validationRules.url}]" />
  192. </a-form-item>
  193. </div>
  194. </div>
  195. <div class="row-item" v-if="getFormData('downloadType')=='QUICK_APP_URL'">
  196. <div class="hint-item"></div>
  197. <div class="label-item">
  198. <div class="text-item">备用网页链接</div>
  199. <div class="required-item"></div>
  200. </div>
  201. <div class="input-item">
  202. <a-form-item>
  203. <a-input v-decorator="['downloadUrl', {rules:validationRules.url}]" />
  204. </a-form-item>
  205. </div>
  206. </div>
  207. <div class="row-item" v-show="getFormData('launchTarget')=='CONVERT_AMOUNT'">
  208. <div class="hint-item">
  209. <a-tooltip>
  210. <template slot="title">
  211. <span>转化用于追踪广告投放效果,当用户完成广告主设定的转化事件时会记录一次转化,您可以在“资产-转化跟踪”创建和查看转化相关数据。</span>
  212. </template>
  213. <a-icon type="question-circle" />
  214. </a-tooltip>
  215. </div>
  216. <div class="label-item">
  217. <div class="text-item">转化目标</div>
  218. <div class="required-item"></div>
  219. </div>
  220. <div class="input-item">
  221. <a-form-item>
  222. <a-radio-group v-decorator="['convertTarget', { initialValue: 1}]">
  223. <a-radio-button
  224. value="SelectConversionTarget"
  225. v-if="getFormData('downloadType')=='DOWNLOAD_URL'"
  226. @click="SelectConversionTarget"
  227. :disabled="!IsURL(getFormData('downloadUrl'))"
  228. >选择转化目标</a-radio-button>
  229. <a-radio-button
  230. value="SelectConversionTarget"
  231. v-if="getFormData('downloadType')=='EXTERNAL_URL'"
  232. @click="SelectConversionTarget"
  233. :disabled="!IsURL(getFormData('externalUrl'))"
  234. >选择转化目标</a-radio-button>
  235. </a-radio-group>
  236. </a-form-item>
  237. <div >
  238. </div>
  239. </div>
  240. </div>
  241. <!-- 应用推广下的转化目标 -->
  242. <div class="row-item" v-if="isShowConversionTarget&&groupInfo.landingType=='APP'&&getFormData('launchTarget')=='CONVERT_AMOUNT'">
  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-radio-group v-model="convertType" @change="convertTypeChange">
  251. <a-radio-button v-for="item in convertList" :key="item.convert_type" v-show="item.external_actions.length>0" :value='item.convert_type' >
  252. {{item.name}}</a-radio-button>
  253. </a-radio-group>
  254. </a-form-item>
  255. </div>
  256. </div>
  257. <div class="row-item" v-if="isShowConversionTarget&&groupInfo.landingType=='APP'&&convertType&&getFormData('launchTarget')=='CONVERT_AMOUNT'">
  258. <div class="hint-item"></div>
  259. <div class="label-item">
  260. <div class="text-item">选择转化目标</div>
  261. <div class="required-item"></div>
  262. </div>
  263. <div class="input-item">
  264. <a-form-item>
  265. <a-radio-group
  266. v-if="convertType=='AD_CONVERT_SOURCE_TYPE_NORMAL_APP_DOWNLOAD'"
  267. @change="externalActionsChange"
  268. >
  269. <a-radio-button v-for="item in currentConvertType.external_actions" :key="item.external_action" :value="item.external_action">
  270. {{item.external_name}}</a-radio-button>
  271. </a-radio-group>
  272. <a-select style="width: 335px" v-if="convertType=='AD_CONVERT_SOURCE_TYPE_APP_DOWNLOAD'" @change="APIChange">
  273. <a-select-option v-for="item in currentConvertType.external_actions" :key="item.convert_id" :value='item.convert_id'>
  274. {{item.external_name}}
  275. </a-select-option>
  276. </a-select>
  277. </a-form-item>
  278. </div>
  279. </div>
  280. <!-- 线索收集下的转化目标 -->
  281. <div class="row-item" v-if="isShowConversionTarget&&groupInfo.landingType=='LINK'&&getFormData('launchTarget')=='CONVERT_AMOUNT'">
  282. <div class="hint-item"></div>
  283. <div class="label-item">
  284. <div class="text-item">转化跟踪方式</div>
  285. <div class="required-item"></div>
  286. </div>
  287. <div class="input-item">
  288. <a-form-item>
  289. <a-radio-group v-model="convertType" @change="convertTypeChange">
  290. <a-radio-button v-for="item in convertList" :key="item.convert_type" :value='item.convert_type' >
  291. {{item.name}}</a-radio-button>
  292. </a-radio-group>
  293. </a-form-item>
  294. </div>
  295. </div>
  296. <div class="row-item" v-if="isShowConversionTarget&&groupInfo.landingType=='LINK'&&convertType&&getFormData('launchTarget')=='CONVERT_AMOUNT'">
  297. <div class="hint-item"></div>
  298. <div class="label-item">
  299. <div class="text-item">选择转化目标</div>
  300. <div class="required-item"></div>
  301. </div>
  302. <div class="input-item">
  303. <a-form-item>
  304. <!-- <a-radio-group
  305. v-show="convertType=='AD_CONVERT_SOURCE_TYPE_NORMAL_APP_DOWNLOAD'"
  306. @change="externalActionsChange"
  307. >
  308. <a-radio-button v-for="item in currentConvertType.external_a
  309. ctions" :key="item.external_action" :value="item.external_action">
  310. {{item.external_name}}</a-radio-button>
  311. </a-radio-group> -->
  312. <a-select style="width: 335px" v-if="convertType=='AD_CONVERT_SOURCE_TYPE_INTERNAL'&&currentConvertType.external_actions.length>0" @change="APIChange" placeholder="请选择转化目标">
  313. <a-select-option v-for="item in currentConvertType.external_actions" :key="item.convert_id" :value='item.convert_id'>
  314. {{item.external_name}}
  315. </a-select-option>
  316. </a-select>
  317. <span v-show="currentConvertType.external_actions.length==0">暂无数据,可去后台新建</span>
  318. </a-form-item>
  319. </div>
  320. </div>
  321. <div class="row-item" v-if="getFormData('downloadType')=='DOWNLOAD_URL'">
  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="['toutiaoPackage', {rules:validationRules.name}]" />
  330. </a-form-item>
  331. </div>
  332. </div>
  333. <div class="row-item" v-show="getFormData('downloadType')!='DOWNLOAD_URL'">
  334. <div class="hint-item"></div>
  335. <div class="label-item">
  336. <div class="text-item">直达链接</div>
  337. <div class="required-item"></div>
  338. </div>
  339. <div class="input-item">
  340. <a-form-item>
  341. <a-radio-group v-decorator="['useOpenUrl', { initialValue:'NO' }]" @change="useOpenUrlChange">
  342. <a-radio-button value="NO">不启用</a-radio-button>
  343. <a-radio-button value="YES">启用</a-radio-button>
  344. </a-radio-group>
  345. </a-form-item>
  346. </div>
  347. </div>
  348. <div class="row-item" v-show="getFormData('downloadType')!='DOWNLOAD_URL'&&getFormData('useOpenUrl')=='YES'">
  349. <div class="hint-item"></div>
  350. <div class="label-item">
  351. <div class="text-item">跳转APP链接</div>
  352. <div class="required-item"></div>
  353. </div>
  354. <div class="input-item">
  355. <a-form-item>
  356. <a-input v-decorator="['openUrl']" />
  357. </a-form-item>
  358. </div>
  359. </div>
  360. </div>
  361. </div>
  362. <!-- 用户定向 -->
  363. <div class="moduler">
  364. <div class="moduler-title">用户定向</div>
  365. <div>
  366. <a-button type="link" style="margin-right:15px" @click="createNewDirecte">新建定向模板</a-button>
  367. <a-button type="link" @click="selectedExist">选择已有定向</a-button>
  368. </div>
  369. <div class="ad-range">
  370. <div class="row-item" v-if="isSelectedExist">
  371. <div class="hint-item"></div>
  372. <div class="label-item">
  373. <div class="text-item">选择定向</div>
  374. <div class="required-item"></div>
  375. </div>
  376. <div class="input-item">
  377. <a-form-item>
  378. <a-select style="width: 200px" @change="directeChange">
  379. <a-select-option
  380. v-for="(item,index) in directeArr"
  381. :key="index"
  382. :value="item.id"
  383. >{{item.name}}</a-select-option>
  384. </a-select>
  385. </a-form-item>
  386. </div>
  387. </div>
  388. </div>
  389. <div v-if="visible" class="directedBody">
  390. <newDirectedPackage :isNewPlan="true" :id="selectedId" ref="directedPackage" @getDirectedValue='getDirectedValue' />
  391. </div>
  392. <!-- <div v-if="visible">
  393. <a-button type="link" @click="()=>visible=false" >收起定向内容</a-button>
  394. <a-button type="link" @click="()=>visible=true" >展开定向内容</a-button>
  395. </div> -->
  396. </div>
  397. <!-- 预算与出价 -->
  398. <div class="moduler">
  399. <div class="moduler-title">预算与出价</div>
  400. <div class="ad-range">
  401. <div class="row-item">
  402. <div class="hint-item"></div>
  403. <div class="label-item">
  404. <div class="text-item">出价方式</div>
  405. <div class="required-item"></div>
  406. </div>
  407. <div class="input-item">
  408. <a-form-item>
  409. <a-radio-group
  410. v-decorator="['smartBidType', { initialValue:'SMART_BID_CUSTOM' }]"
  411. @change="smartBidTypeChange"
  412. >
  413. <a-radio-button value="SMART_BID_CUSTOM">手动</a-radio-button>
  414. <a-tooltip>
  415. <template slot="title">
  416. <span>自动出价暂不支持点击、展示投放目标</span>
  417. </template>
  418. <a-radio-button
  419. value="SMART_BID_CONSERVATIVE"
  420. :disabled="getFormData('launchTarget')!='CONVERT_AMOUNT'"
  421. >自动</a-radio-button>
  422. </a-tooltip>
  423. </a-radio-group>
  424. </a-form-item>
  425. </div>
  426. </div>
  427. <div class="row-item">
  428. <div class="hint-item">
  429. <a-tooltip>
  430. <template slot="title">
  431. <span>计划投放初期可能有一定的波动性,在积累适当转化数后效果将会逐渐稳定。</span>
  432. </template>
  433. <a-icon type="question-circle" />
  434. </a-tooltip>
  435. </div>
  436. <div class="label-item">
  437. <div class="text-item">投放方式</div>
  438. <div class="required-item"></div>
  439. </div>
  440. <div class="input-item">
  441. <a-form-item>
  442. <a-radio-group
  443. v-decorator="['flowControlMode', { initialValue:'FLOW_CONTROL_MODE_FAST' }]"
  444. >
  445. <a-radio-button
  446. value="FLOW_CONTROL_MODE_FAST"
  447. v-if="getFormData('launchTarget')=='CONVERT_AMOUNT'"
  448. >优先跑量</a-radio-button>
  449. <a-radio-button
  450. value="FLOW_CONTROL_MODE_BALANCE"
  451. v-if="getFormData('launchTarget')=='CONVERT_AMOUNT'"
  452. >均衡投放</a-radio-button>
  453. <a-radio-button
  454. value="FLOW_CONTROL_MODE_SMOOTH"
  455. v-if="getFormData('launchTarget')=='CONVERT_AMOUNT'"
  456. >优先低成本</a-radio-button>
  457. <a-radio-button
  458. value="FLOW_CONTROL_MODE_FAST"
  459. v-if="getFormData('launchTarget')!='CONVERT_AMOUNT'"
  460. >标准投放(推荐)</a-radio-button>
  461. <a-radio-button
  462. value="FLOW_CONTROL_MODE_BALANCE"
  463. v-if="getFormData('launchTarget')!='CONVERT_AMOUNT'"
  464. >加速投放</a-radio-button>
  465. </a-radio-group>
  466. </a-form-item>
  467. </div>
  468. </div>
  469. <div class="row-item">
  470. <div class="hint-item">
  471. <a-tooltip>
  472. <template slot="title">
  473. <span>单次预算修改幅度不小于100元,日修改预算不超过20次。如果是总预算广告,且设了起始日期,将要求您预算设置需要大于或等于[投放天数 * 100],即满足每日最低预算300的要求</span>
  474. </template>
  475. <a-icon type="question-circle" />
  476. </a-tooltip>
  477. </div>
  478. <div class="label-item">
  479. <div class="text-item">预算</div>
  480. <div class="required-item"></div>
  481. </div>
  482. <div class="input-item">
  483. <a-form-item>
  484. <a-input-group compact>
  485. <a-select v-decorator="['budgetMode', { initialValue:'BUDGET_MODE_DAY' }]">
  486. <a-select-option value="BUDGET_MODE_DAY">日预算</a-select-option>
  487. <a-select-option
  488. value="BUDGET_MODE_TOTAL"
  489. v-if="getFormData('smartBidType')=='SMART_BID_CUSTOM'"
  490. >总预算</a-select-option>
  491. </a-select>
  492. <a-input style="width: 50%" v-decorator="['budget', { initialValue:300 }]" />
  493. </a-input-group>
  494. <span class="tip" v-if="getFormData('budget')<300">请输入预算,不少于300元,不超过9999999.99元</span>
  495. </a-form-item>
  496. </div>
  497. </div>
  498. <div class="row-item" v-if="getFormData('smartBidType')=='SMART_BID_CUSTOM'">
  499. <div class="hint-item"></div>
  500. <div class="label-item">
  501. <div class="text-item">投放时间</div>
  502. <!-- <div class="required-item"></div> -->
  503. </div>
  504. <div class="input-item">
  505. <a-form-item>
  506. <a-radio-group v-decorator="['scheduleType', { initialValue:'SCHEDULE_FROM_NOW' }]">
  507. <a-radio-button value="SCHEDULE_FROM_NOW">从今天起长期投放</a-radio-button>
  508. <a-radio-button value="SCHEDULE_START_END">设置开始和结束时间</a-radio-button>
  509. </a-radio-group>
  510. <p style="margin-top:15px">
  511. <a-range-picker
  512. @change="dateChange"
  513. v-model="dateRange"
  514. v-if="getFormData('scheduleType')=='SCHEDULE_START_END'"
  515. />
  516. </p>
  517. </a-form-item>
  518. </div>
  519. </div>
  520. <div class="row-item">
  521. <div class="hint-item"></div>
  522. <div class="label-item">
  523. <div class="text-item">投放时段</div>
  524. <!-- <div class="required-item"></div> -->
  525. </div>
  526. <div class="input-item">
  527. <a-form-item>
  528. <a-radio-group v-decorator="['scheduleTime', { initialValue:'' }]">
  529. <a-radio-button value=''>不限</a-radio-button>
  530. <a-radio-button value="SpecifiedTImePeriod">指定时间段</a-radio-button>
  531. </a-radio-group>
  532. <div
  533. v-show="getFormData('scheduleTime')=='SpecifiedTImePeriod'"
  534. style="margin-top:15px"
  535. >
  536. <selectCheckAll
  537. style="width:100%"
  538. :scheduleTime.sync="scheduleTimeData"
  539. ref="selectCheck"
  540. />
  541. </div>
  542. </a-form-item>
  543. </div>
  544. </div>
  545. <div class="row-item" v-show="getFormData('smartBidType')=='SMART_BID_CUSTOM'">
  546. <div class="hint-item"></div>
  547. <div class="label-item">
  548. <div class="text-item">付费方式</div>
  549. <div class="required-item"></div>
  550. </div>
  551. <div class="input-item">
  552. <a-form-item>
  553. <a-radio-group v-decorator="['pricing', { initialValue:'PRICING_OCPM' }]">
  554. <a-radio-button value="PRICING_OCPM" v-if="getFormData('launchTarget')=='CONVERT_AMOUNT'">按展示付费(oCPM)</a-radio-button>
  555. <a-radio-button value="PRICING_CPC" v-if="getFormData('launchTarget')=='CLICK_AMOUNT'">按点击付费(CPC)</a-radio-button>
  556. <a-radio-button value="PRICING_CPM" v-if="getFormData('launchTarget')=='SHOW_AMOUNT'">按展示付费(CPM)</a-radio-button>
  557. <a-radio-button
  558. value="PRICING_CPA"
  559. v-if="groupInfo.landingType=='LINK'&&getFormData('launchTarget')=='CONVERT_AMOUNT'"
  560. >按转化付费(CPA)</a-radio-button>
  561. <a-radio-button
  562. value="PRICING_OCPC"
  563. v-if="getFormData('deliveryRange')=='UNION'"
  564. >按点击付费(oCPC)</a-radio-button>
  565. </a-radio-group>
  566. </a-form-item>
  567. </div>
  568. </div>
  569. <div class="row-item" v-if="getFormData('smartBidType')=='SMART_BID_CUSTOM'&&getFormData('launchTarget')=='CONVERT_AMOUNT'">
  570. <div class="hint-item"> </div>
  571. <div class="label-item">
  572. <div class="text-item">目标转化出价</div>
  573. <div class="required-item"></div>
  574. </div>
  575. <div class="input-item">
  576. <a-form-item>
  577. <a-input-number
  578. style="width:200px"
  579. :max="1500"
  580. :step="0.1"
  581. v-decorator="['cpaBid', {rules:validationRules.bid} ]"
  582. />
  583. <span style="margin-left:5px">元</span>
  584. <!-- <span style="margin-left:20px">请填入必填字段,获取建议出价</span> -->
  585. <!-- <a-tooltip>
  586. <template slot="title">
  587. <span style="font-weight:600">建议出价获取方式:</span>
  588. <span>请填入本页面所有必填信息(除出价外),即可查看建议出价</span>
  589. </template>
  590. <a-icon type="question-circle" />
  591. </a-tooltip> -->
  592. </a-form-item>
  593. <span
  594. class="tip"
  595. v-if="getFormData('pricing')=='PRICING_CPA'&&getFormData('cpaBid')<1"
  596. >请输入目标转化出价,不少于1元,不超过1500元</span>
  597. <span
  598. class="tip"
  599. v-if="getFormData('pricing')!='PRICING_CPA'&&getFormData('cpaBid')<0.1"
  600. >请输入目标转化出价,不少于0.1元,不超过10000元</span>
  601. </div>
  602. </div>
  603. <div class="row-item" v-if="getFormData('smartBidType')=='SMART_BID_CUSTOM'&&getFormData('launchTarget')=='SHOW_AMOUNT'">
  604. <div class="hint-item"></div>
  605. <div class="label-item">
  606. <div class="text-item">展示出价</div>
  607. <div class="required-item"></div>
  608. </div>
  609. <div class="input-item">
  610. <a-form-item>
  611. <a-input-number :min='4' :max="10000" :step="0.1" v-decorator="['bid', ]" style="width:200px"/>
  612. <span style="margin-left:5px">元</span>
  613. <!-- <span style="margin-left:20px">请填入必填字段,获取建议出价</span> -->
  614. <a-tooltip>
  615. <template slot="title">
  616. <span style="font-weight:600">建议出价获取方式:</span>
  617. <span>请填入本页面所有必填信息(除出价外),即可查看建议出价</span>
  618. </template>
  619. <a-icon type="question-circle" />
  620. </a-tooltip>
  621. </a-form-item>
  622. <span
  623. class="tip"
  624. v-if="getFormData('pricing')=='PRICING_CPM'&&getFormData('bid')<4"
  625. >请输入出价,不少于4元,不超过100元</span>
  626. </div>
  627. </div>
  628. <div class="row-item" v-if="getFormData('smartBidType')=='SMART_BID_CUSTOM'&&getFormData('launchTarget')=='CLICK_AMOUNT'">
  629. <div class="hint-item"> </div>
  630. <div class="label-item">
  631. <div class="text-item">点击出价</div>
  632. <div class="required-item"></div>
  633. </div>
  634. <div class="input-item">
  635. <a-form-item>
  636. <a-input-number :min='4' :max="10000" :step="0.1" v-decorator="['bid', ]" style="width:200px" />
  637. <span style="margin-left:5px">元</span>
  638. <!-- <span style="margin-left:20px">请填入必填字段,获取建议出价</span> -->
  639. <a-tooltip>
  640. <template slot="title">
  641. <span style="font-weight:600">建议出价获取方式:</span>
  642. <span>请填入本页面所有必填信息(除出价外),即可查看建议出价</span>
  643. </template>
  644. <a-icon type="question-circle" />
  645. </a-tooltip>
  646. </a-form-item>
  647. <span
  648. class="tip"
  649. v-if="getFormData('pricing')=='PRICING_CPM'&&getFormData('bid')<4"
  650. >请输入出价,不少于4元,不超过100元</span>
  651. </div>
  652. </div>
  653. <div class="row-item" v-if="getFormData('smartBidType')=='SMART_BID_CONSERVATIVE'">
  654. <div class="hint-item">
  655. <a-tooltip>
  656. <template slot="title">
  657. <span>请填入您当前预算下,每个转化事件的真实预期成本,预期成本过低可能影响模型的优化能力。此成本仅作为投放参考,实际扣费仍以后台展示为准。</span>
  658. </template>
  659. <a-icon type="question-circle" />
  660. </a-tooltip>
  661. </div>
  662. <div class="label-item">
  663. <div class="text-item">预期成本</div>
  664. <div class="required-item"></div>
  665. </div>
  666. <div class="input-item">
  667. <a-form-item>
  668. <a-input-number
  669. style="width:200px"
  670. :max="1500"
  671. :step="0.1"
  672. v-decorator="['cpaBid', ]"
  673. v-if="getFormData('pricing')=='PRICING_CPA'"
  674. />
  675. <a-input-number :max="10000" :step="0.1" v-decorator="['cpaBid', ]" v-else />
  676. <span style="margin-left:5px">元</span>
  677. <!-- <span style="margin-left:20px">请填入必填字段,获取建议出价</span> -->
  678. <a-tooltip>
  679. <template slot="title">
  680. <span style="font-weight:600">建议出价获取方式:</span>
  681. <span>请填入本页面所有必填信息(除出价外),即可查看建议出价</span>
  682. </template>
  683. <a-icon type="question-circle" />
  684. </a-tooltip>
  685. </a-form-item>
  686. <span
  687. class="tip"
  688. v-if="getFormData('pricing')=='PRICING_CPA'&&getFormData('cpaBid')<1"
  689. >请输入目标转化出价,不少于1元,不超过1500元</span>
  690. <span
  691. class="tip"
  692. v-if="getFormData('pricing')!='PRICING_CPA'&&getFormData('cpaBid')<0.1"
  693. >请输入目标转化出价,不少于0.1元,不超过10000元</span>
  694. </div>
  695. </div>
  696. <div class="row-item" v-if="externalAction=='AD_CONVERT_TYPE_ACTIVE'">
  697. <div class="hint-item"> </div>
  698. <div class="label-item">
  699. <div class="text-item">深度优化方式</div>
  700. <div class="required-item"></div>
  701. </div>
  702. <div class="input-item">
  703. <a-form-item>
  704. <a-radio-group
  705. v-decorator="['deepBidType', { initialValue:'DEEP_BID_PACING' }]"
  706. >
  707. <a-radio-button value="DEEP_BID_PACING" v-if="currentDeepConvert.deep_external_action=='AD_CONVERT_TYPE_NEXT_DAY_OPEN'">自动优化</a-radio-button>
  708. <a-radio-button value="DEEP_BID_MIN" v-if="currentDeepConvert.deep_external_action=='AD_CONVERT_TYPE_NEXT_DAY_OPEN'">自定义双出价</a-radio-button>
  709. <a-radio-button value="ROI_COEFFICIENT" v-if="currentDeepConvert.deep_external_action=='AD_CONVERT_TYPE_LT_ROI'">ROI系数</a-radio-button>
  710. </a-radio-group>
  711. </a-form-item>
  712. </div>
  713. </div>
  714. <!-- {{currentDeepConvert}} -->
  715. <div class="row-item" v-if="getFormData('smartBidType')=='SMART_BID_CUSTOM'&&getFormData('deepBidType')=='DEEP_BID_MIN'">
  716. <div class="hint-item"> </div>
  717. <div class="label-item">
  718. <div class="text-item">深度转化出价</div>
  719. <div class="required-item"></div>
  720. </div>
  721. <div class="input-item">
  722. <a-form-item>
  723. <a-input-number
  724. style="width:200px"
  725. :max="10000"
  726. :step="0.1"
  727. :min='0.1'
  728. v-decorator="['deepCpabid', {rules:validationRules.bid} ]"
  729. />
  730. <span style="margin-left:5px">元</span>
  731. </a-form-item>
  732. <span
  733. class="tip"
  734. v-if="getFormData('pricing')!='PRICING_CPA'&&getFormData('deepCpabid')<0.1"
  735. >请输入深度转化出价,不少于0.1元,不超过10000元</span>
  736. </div>
  737. </div>
  738. <div class="row-item" v-if="getFormData('smartBidType')=='SMART_BID_CUSTOM'&&getFormData('deepBidType')=='ROI_COEFFICIENT'">
  739. <div class="hint-item"> </div>
  740. <div class="label-item">
  741. <div class="text-item">ROI系数</div>
  742. <div class="required-item"></div>
  743. </div>
  744. <div class="input-item">
  745. <a-form-item>
  746. <a-input-number
  747. style="width:200px"
  748. :max="5"
  749. :min='0.001'
  750. v-decorator="['roiGoal', {rules:validationRules.roi} ]"
  751. />
  752. <span style="margin-left:5px">元</span>
  753. </a-form-item>
  754. <span
  755. class="tip"
  756. v-if="getFormData('pricing')!='PRICING_CPA'&&(getFormData('roiGoal')<0 || getFormData('roiGoal')>5)"
  757. >请输入ROI系数,ROI系数不大于5,保留小数点后四位</span>
  758. </div>
  759. </div>
  760. </div>
  761. </div>
  762. <!-- 计划名称 -->
  763. <div class="moduler">
  764. <div class="moduler-title">计划名称</div>
  765. <div class="ad-range">
  766. <div class="row-item">
  767. <div class="hint-item"></div>
  768. <div class="label-item">
  769. <div class="text-item">计划个数</div>
  770. <div class="required-item"></div>
  771. </div>
  772. <div class="input-item">
  773. <a-form-item>
  774. <a-input-number :min="1" :max="10" v-model="plansNum" @change="plansNumChange" />
  775. </a-form-item>
  776. </div>
  777. </div>
  778. <div class="row-item">
  779. <div class="hint-item"></div>
  780. <div class="label-item">
  781. <div class="text-item">计划名称</div>
  782. <div class="required-item"></div>
  783. </div>
  784. <div class="input-item">
  785. <a-form-item>
  786. <div v-for="(item,index) in plansNum" :key="index">
  787. <a-input v-model="names[index]" allow-clear />
  788. </div>
  789. </a-form-item>
  790. </div>
  791. </div>
  792. </div>
  793. </div>
  794. <!-- 操作 -->
  795. <div class="moduler">
  796. <!-- <div class="moduler-title">计划名称</div> -->
  797. <div class="opt">
  798. <a-button type="default" style="margin-right:15px" @click="goBack">取消</a-button>
  799. <a-button type="danger" style="margin-right:15px" @click="goPlanShow" :loading="goPlanShowloading">保存并关闭</a-button>
  800. <a-button type="primary" @click="goNext" :loading="goNextloading">保存并新建创意</a-button>
  801. </div>
  802. </div>
  803. </a-form>
  804. </div>
  805. </template>
  806. <script>
  807. import moment from 'moment'
  808. import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
  809. import qs from 'qs'
  810. import selectCheckAll from './toutiaoTime'
  811. import newDirectedPackage from './newDirectedPackage'
  812. var str = ""
  813. for (let i = 0; i < 7*48; i++) {
  814. str+='0'
  815. }
  816. export default {
  817. components: {
  818. selectCheckAll,
  819. newDirectedPackage,
  820. },
  821. data() {
  822. return {
  823. goNextloading:false,
  824. goPlanShowloading:false,
  825. groupInfo: {},
  826. accountInfo:{},
  827. form: this.$form.createForm(this),
  828. dateRange: [moment(), moment()],
  829. scheduleTime: '',
  830. scheduleTimeData:str,
  831. plansNum: 1,
  832. names: [],
  833. isSelectedExist: false,
  834. validationRules: {
  835. url: [
  836. {
  837. required: true,
  838. validator: this.validateURL,
  839. },
  840. ],
  841. name:[{
  842. required: true,
  843. validator: this.validateName,
  844. }],
  845. bid:[{
  846. required: true,
  847. message:'出价信息必须填写',
  848. // validator: this.validateBid,
  849. }],
  850. roi:[{
  851. required: true,
  852. message:'ROI系数必须填写',
  853. // validator: this.validateBid,
  854. }],
  855. },
  856. isShowConversionTarget: false,
  857. downloadMode: '',
  858. directeArr: [], //定向包的数组
  859. directPackageValue:{},//从定向包里获取的定向包的值
  860. visible: false,
  861. selectedId: undefined,
  862. currentDirectId: null,
  863. convertList:[],
  864. convertType:'',
  865. currentConvertType:{},
  866. convertId:undefined,
  867. currentDeepConvert:{},
  868. externalAction:'',
  869. }
  870. },
  871. watch: {
  872. currentDirectId(n, o) {
  873. console.log(n != o)
  874. this.selectedId = n
  875. this.visible = true
  876. },
  877. },
  878. methods: {
  879. //
  880. // 直达链接是否启用
  881. useOpenUrlChange(){
  882. this.form.setFieldsValue({
  883. openUrl:''
  884. })
  885. },
  886. //
  887. launchTargetChange(val){
  888. console.log(val)
  889. if(val.target.value=='CLICK_AMOUNT'){
  890. this.form.setFieldsValue({
  891. pricing:'PRICING_CPC'
  892. })
  893. }else if(val.target.value=='SHOW_AMOUNT'){
  894. this.form.setFieldsValue({
  895. pricing:'PRICING_CPM'
  896. })
  897. }else if(val.target.value=='CONVERT_AMOUNT'){
  898. this.form.setFieldsValue({
  899. pricing:'PRICING_OCPM'
  900. })
  901. }
  902. },
  903. //普通下载
  904. externalActionsChange(val){
  905. console.log(val,this.currentConvertType);
  906. this.currentConvertType.external_actions.forEach(item=>{
  907. if(item.external_action==val.target.value){
  908. this.convertId=item.convert_id
  909. }
  910. });
  911. this.externalAction=val.target.value
  912. },
  913. // 转化目标类型
  914. convertTypeChange(e){
  915. // console.log(e.target.value,);
  916. this.convertList.forEach((item)=>{
  917. if(item.convert_type==e.target.value){
  918. this.currentConvertType=item
  919. }
  920. })
  921. },
  922. // 应用下载API
  923. APIChange(val){
  924. console.log(val,this.currentConvertType);
  925. this.convertId=val
  926. this.currentConvertType.external_actions.forEach(item=>{
  927. if(item.convert_id==val){
  928. console.log(item)
  929. this.externalAction=item.external_action;
  930. this.currentDeepConvert=item.deep_external_actions[0];
  931. if(item.deep_external_actions[0].deep_external_action=='AD_CONVERT_TYPE_LT_ROI'){
  932. this.form.getFieldDecorator('deepBidType')
  933. this.form.setFieldsValue({
  934. deepBidType:'ROI_COEFFICIENT'
  935. })
  936. }else if(item.deep_external_actions[0].deep_external_action=='AD_CONVERT_TYPE_NEXT_DAY_OPEN'){
  937. this.form.getFieldDecorator('deepBidType')
  938. this.form.setFieldsValue({
  939. deepBidType:'DEEP_BID_PACING'
  940. })
  941. }
  942. }
  943. })
  944. },
  945. // 转化目标显示
  946. SelectConversionTarget() {
  947. // console.log(this.groupInfo)
  948. let downloadType=this.getFormData('downloadType');
  949. let downloadUrl=this.getFormData('downloadUrl');
  950. let externalUrl=this.getFormData('externalUrl');
  951. let toutiaoPackage=this.getFormData('toutiaoPackage');
  952. let appType=this.getFormData('appType')
  953. if(toutiaoPackage || externalUrl){
  954. postAction('/ctop/queryTool/queryConvert',qs.stringify({
  955. accountId:this.groupInfo.accountId,
  956. landingType:this.groupInfo.landingType,
  957. downloadType,
  958. downloadUrl,
  959. externalUrl,
  960. toutiaoPackage,
  961. appType,
  962. })).then(res=>{
  963. // console.log(res)
  964. if(res.success){
  965. this.convertList=[];
  966. this.convertList=res.result.data.list;
  967. this.isShowConversionTarget = true
  968. }
  969. })
  970. }else{
  971. this.$message.error('请先输入应用包名称!')
  972. }
  973. },
  974. // 深度转化方式改变
  975. deepBidTypeChange(e){
  976. console.log(e)
  977. },
  978. //获取表单的某一个属性值
  979. getFormData(className) {
  980. return this.form.getFieldValue(className)
  981. },
  982. dateChange(date, dateString) {
  983. // console.log(date,dateString)
  984. this.form.getFieldDecorator('startTime')
  985. this.form.getFieldDecorator('endTime')
  986. this.form.setFieldsValue({
  987. startTime: date[0].format('YYYY-MM-DD HH:mm'),
  988. endTime: date[1].format('YYYY-MM-DD HH:mm'),
  989. })
  990. },
  991. smartBidTypeChange() {
  992. this.form.setFieldsValue({
  993. budgetMode: 'BUDGET_MODE_DAY',
  994. })
  995. },
  996. // 点击获取定向
  997. selectedExist() {
  998. this.isSelectedExist = true;
  999. this.visible=false
  1000. let userId = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id
  1001. getAction('/ctop/audiencePackage/list?pageNo=1&pageSize=100', {
  1002. userId,
  1003. }).then((res) => {
  1004. // console.log(res)
  1005. if (res.success) {
  1006. this.directeArr = res.result.records
  1007. }
  1008. })
  1009. },
  1010. // 定向包改变
  1011. directeChange(val) {
  1012. // console.log(val)
  1013. // let currentDirect=this.directeArr.filter((item)=>{
  1014. // return item.id==val
  1015. // });
  1016. // console.log(currentDirect)
  1017. this.currentDirectId = val
  1018. },
  1019. // 新建定向包
  1020. createNewDirecte() {
  1021. this.visible = false;
  1022. this.isSelectedExist=false;
  1023. setTimeout(() => {
  1024. this.visible = true
  1025. this.selectedId = null
  1026. }, 1)
  1027. },
  1028. handleOk(e) {
  1029. // console.log(e)
  1030. this.visible = false
  1031. },
  1032. // 验证网址
  1033. IsURL(res) {
  1034. // var strRegex = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/|www\.)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/
  1035. var strRegex = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+(.+[A-Za-z0-9-~\/])+$/
  1036. var re = new RegExp(strRegex)
  1037. // console.log(re.test(res))
  1038. if (re.test(res)) {
  1039. return true
  1040. } else {
  1041. return false
  1042. }
  1043. },
  1044. validateURL(rule, value, callback) {
  1045. // console.log(rule, value, callback);
  1046. if (this.IsURL(value)) {
  1047. callback()
  1048. } else if (value && !this.IsURL(value)) {
  1049. callback('链接地址无法访问,请正确输入')
  1050. } else {
  1051. callback('链接必须填写')
  1052. }
  1053. },
  1054. validateName(rule, value, callback){
  1055. // console.log(rule, value, callback);
  1056. if (value) {
  1057. callback()
  1058. } else {
  1059. callback('应用包名称必须填写')
  1060. }
  1061. },
  1062. validateBid(rule, value, callback){
  1063. // console.log(rule, value, callback);
  1064. if (value) {
  1065. callback()
  1066. } else {
  1067. callback('出价必须填写')
  1068. }
  1069. },
  1070. downloadTypeChange() {
  1071. this.isShowConversionTarget = false
  1072. },
  1073. plansNumChange(e) {
  1074. let namePart = this.getFormData('pricing')
  1075. this.names = []
  1076. for (let index = 0; index < this.plansNum; index++) {
  1077. this.names[index] = namePart + moment().format('MM_DD_hh:mm') + '_' + (index + 1)
  1078. }
  1079. },
  1080. downloadModeChange(e) {
  1081. console.log(e)
  1082. if (e.target.checked) {
  1083. this.form.getFieldDecorator('downloadMode')
  1084. this.form.setFieldsValue({
  1085. downloadMode: e.target.value,
  1086. })
  1087. // console.log(this.form.getFieldsValue())
  1088. }
  1089. },
  1090. goBack() {
  1091. this.$router.replace('/modules/BatchCreate/TouTiaoBatch')
  1092. this.$bus.$emit('remove', '/modules/BatchCreate/newPlan')
  1093. },
  1094. // 保存并关闭
  1095. goPlanShow() {
  1096. this.$nextTick(()=>{
  1097. console.log(this.$refs.directedPackage)
  1098. if(this.visible){
  1099. this.$refs.directedPackage.getValuehandle()
  1100. }
  1101. if (this.validatorName()) {
  1102. this.form.validateFields((err, values) => {
  1103. if (!err) {
  1104. this.goPlanShowloading=true;
  1105. console.log('Received values of form: ', values)
  1106. // console.log(this.names)
  1107. values.accountId = this.groupInfo.accountId
  1108. values.campaignId = this.groupInfo.id;
  1109. values.convertId = this.convertId;
  1110. values.appType=this.getFormData('appType')
  1111. values.externalAction=this.externalAction
  1112. values.startTime=this.dateRange[0].format('YYYY-MM-DD HH:mm');
  1113. values.endTime= this.dateRange[1].format('YYYY-MM-DD HH:mm');
  1114. if(this.getFormData('launchTarget')=='CLICK_AMOUNT'){
  1115. values.pricing='PRICING_CPC'
  1116. }else if(this.getFormData('launchTarget')=='SHOW_AMOUNT'){
  1117. values.pricing='PRICING_CPM'
  1118. }else if(this.getFormData('launchTarget')=='CONVERT_AMOUNT'){
  1119. values.pricing='PRICING_OCPM'
  1120. }
  1121. postAction('/ctop/byteDanceAdvertisePlan/add', {
  1122. names: this.names,
  1123. landingType: this.groupInfo.landingType,
  1124. ...values,
  1125. ...this.directPackageValue
  1126. }).then((res) => {
  1127. console.log(res)
  1128. if (res.success) {
  1129. this.goPlanShowloading=false;
  1130. if(res.code==0){
  1131. this.$message.success('广告计划创建成功,2s后将跳转到头条批量页面')
  1132. let planInfo=JSON.stringify({...values,...this.directPackageValue,names:this.names,landingType: this.groupInfo.landingType,})
  1133. localStorage.setItem('planInfo',planInfo) ;
  1134. setTimeout(()=>{
  1135. this.$router.replace(`/modules/BatchCreate/TouTiaoBatch`)
  1136. },2000)
  1137. }else{
  1138. if(res.message=='convert_id is required'){
  1139. this.$message.error('转化方式必须选择!')
  1140. }else{
  1141. this.$message.error(res.message)
  1142. }
  1143. }
  1144. } else {
  1145. this.goPlanShowloading=false;
  1146. this.$message.error('网络开小差了,等会再试试')
  1147. }
  1148. })
  1149. }else{
  1150. // console.log(err)
  1151. this.$message.error('请正确填写必填项目')
  1152. }
  1153. })
  1154. }
  1155. })
  1156. },
  1157. // 保存并新建创意
  1158. goNext() {
  1159. this.$nextTick(()=>{
  1160. if(this.visible){
  1161. this.$refs.directedPackage.getValuehandle()
  1162. console.log(this.$refs.directedPackage)
  1163. }
  1164. if (this.validatorName()) {
  1165. this.form.validateFields((err, values) => {
  1166. if (!err) {
  1167. console.log('Received values of form: ', values)
  1168. // console.log(this.names)
  1169. this.goNextloading=true;
  1170. values.accountId = this.groupInfo.accountId
  1171. values.campaignId = this.groupInfo.id;
  1172. values.convertId = this.convertId;
  1173. values.appType=this.getFormData('appType')
  1174. values.externalAction=this.externalAction
  1175. values.startTime=this.dateRange[0].format('YYYY-MM-DD HH:mm');
  1176. values.endTime= this.dateRange[1].format('YYYY-MM-DD HH:mm');
  1177. if(this.getFormData('scheduleTime')!=''){
  1178. values.scheduleTime=this.scheduleTimeData
  1179. }
  1180. if(this.getFormData('launchTarget')=='CLICK_AMOUNT'){
  1181. values.pricing='PRICING_CPC'
  1182. }else if(this.getFormData('launchTarget')=='SHOW_AMOUNT'){
  1183. values.pricing='PRICING_CPM'
  1184. }else if(this.getFormData('launchTarget')=='CONVERT_AMOUNT'){
  1185. values.pricing='PRICING_OCPM'
  1186. }
  1187. postAction('/ctop/byteDanceAdvertisePlan/add', {
  1188. names: this.names,
  1189. landingType: this.groupInfo.landingType,
  1190. ...values,
  1191. ...this.directPackageValue
  1192. }).then((res) => {
  1193. console.log(res)
  1194. if (res.success) {
  1195. this.goNextloading=false;
  1196. if(res.code==0){
  1197. this.$message.success('广告计划创建成功,2s后将跳转到新建创意页面')
  1198. let planInfo=JSON.stringify(res.result)
  1199. localStorage.setItem('planInfo',planInfo);
  1200. setTimeout(()=>{
  1201. this.$router.replace(`/modules/BatchCreate/newCreate`)
  1202. },2000)
  1203. }else{
  1204. if(res.message=='convert_id is required'){
  1205. this.$message.error('转化方式必须选择!')
  1206. }else{
  1207. this.$message.error(res.message)
  1208. }
  1209. }
  1210. } else {
  1211. this.goNextloading=false;
  1212. this.$message.error('网络开小差了,等会再试试')
  1213. }
  1214. })
  1215. }else{
  1216. // console.log(err)
  1217. // this.$message.error(err)
  1218. this.$message.error('请正确填写必填项目')
  1219. }
  1220. })
  1221. }
  1222. })
  1223. },
  1224. // 验证名字是否有只
  1225. validatorName() {
  1226. if (this.names.length) {
  1227. this.names.forEach((item) => {
  1228. if (!item) {
  1229. return false
  1230. }
  1231. })
  1232. return true
  1233. }
  1234. },
  1235. // h获取定向包的值
  1236. getDirectedValue(val){
  1237. console.log(val);
  1238. this.directPackageValue={};
  1239. this.directPackageValue=val;
  1240. },
  1241. },
  1242. created() {},
  1243. beforeMount() {},
  1244. mounted() {
  1245. this.$bus.$emit('remove', '/modules/BatchCreate/newGroup')
  1246. let groupInfo = localStorage.getItem('groupInfo')
  1247. console.log(groupInfo)
  1248. if (groupInfo) {
  1249. this.groupInfo = JSON.parse(groupInfo)
  1250. }
  1251. let accountInfo = localStorage.getItem('accountInfo')
  1252. // console.log(groupInfo)
  1253. if (accountInfo) {
  1254. this.accountInfo = JSON.parse(accountInfo)
  1255. }
  1256. console.log(this.accountInfo)
  1257. console.log(this.form.getFieldsValue())
  1258. if (this.groupInfo.landingType == 'LINK') {
  1259. this.form.setFieldsValue({
  1260. downloadType: 'EXTERNAL_URL',
  1261. })
  1262. } else if (this.groupInfo.landingType == 'APP') {
  1263. this.form.setFieldsValue({
  1264. downloadType: 'DOWNLOAD_URL',
  1265. })
  1266. }
  1267. let namePart = this.getFormData('pricing')
  1268. // console.log(this.getFormData('pricing'))
  1269. this.names[0] = namePart + moment().format('MM_DD_hh:mm') + '_' + 1;
  1270. },
  1271. }
  1272. </script>
  1273. <style lang="scss">
  1274. .newPlan{
  1275. .ant-btn-danger {
  1276. background-color: #ff4d4f !important;
  1277. }
  1278. }
  1279. .ant-tooltip-inner,
  1280. .ant-tooltip,
  1281. .ant-tooltip-arrow::before {
  1282. background-color: #fff;
  1283. color: #333;
  1284. }
  1285. .ant-tooltip-inner {
  1286. span {
  1287. display: block;
  1288. }
  1289. }
  1290. .ant-tooltip {
  1291. max-width: 450px;
  1292. }
  1293. .newPlan {
  1294. .ant-radio-button-wrapper {
  1295. min-width: 80px;
  1296. text-align: center;
  1297. }
  1298. .ant-form-item {
  1299. -webkit-box-sizing: border-box;
  1300. box-sizing: border-box;
  1301. margin: 0;
  1302. padding: 0;
  1303. color: rgba(0, 0, 0, 0.65);
  1304. font-size: 14px;
  1305. font-variant: tabular-nums;
  1306. line-height: 1.5;
  1307. list-style: none;
  1308. -webkit-font-feature-settings: 'tnum';
  1309. font-feature-settings: 'tnum';
  1310. vertical-align: top;
  1311. }
  1312. .directedBody {
  1313. .ant-form-item {
  1314. margin-bottom: 20px;
  1315. }
  1316. }
  1317. }
  1318. </style>
  1319. <style lang="scss" scoped>
  1320. .newPlan {
  1321. font-family: PingFangSC-Regular, tahoma, arial, 'Hiragino Sans GB', 'Microsoft yahei', sans-serif;
  1322. color: #333;
  1323. ul,
  1324. li {
  1325. margin: 0;
  1326. padding: 0;
  1327. }
  1328. .moduler {
  1329. background: #fff;
  1330. margin-bottom: 16px;
  1331. position: relative;
  1332. padding: 32px 24px 48px 32px;
  1333. border-radius: 4px;
  1334. box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
  1335. .moduler-title {
  1336. display: flex;
  1337. align-items: center;
  1338. font-size: 22px;
  1339. margin-bottom: 20px;
  1340. }
  1341. .row-item {
  1342. display: flex;
  1343. justify-content: flex-start;
  1344. align-items: center;
  1345. margin-bottom: 32px;
  1346. }
  1347. .row-item:last-of-type {
  1348. margin-bottom: 0;
  1349. }
  1350. .row-item .hint-item {
  1351. width: 24px;
  1352. min-width: 24px;
  1353. align-self: flex-start;
  1354. line-height: 20px;
  1355. height: 20px;
  1356. margin-top: 5px;
  1357. }
  1358. .row-item .label-item {
  1359. position: relative;
  1360. align-items: flex-start;
  1361. align-self: flex-start;
  1362. line-height: 20px;
  1363. height: 20px;
  1364. margin-top: 7px;
  1365. width: 80px;
  1366. min-width: 80px;
  1367. .text-item {
  1368. font-size: 14px;
  1369. width: 60px;
  1370. }
  1371. }
  1372. .row-item .required-item {
  1373. width: 4px;
  1374. height: 4px;
  1375. border-radius: 2px;
  1376. background: #f45858;
  1377. position: absolute;
  1378. right: 10px;
  1379. top: 50%;
  1380. transform: translateY(-50%);
  1381. }
  1382. .row-item .input-item {
  1383. min-width: 480px;
  1384. position: relative;
  1385. // height: 35px;
  1386. .tip {
  1387. font-size: 12px;
  1388. color: tomato;
  1389. }
  1390. }
  1391. }
  1392. .opt {
  1393. text-align: right;
  1394. }
  1395. }
  1396. </style>