newPlan.vue 54 KB

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