newPlan.vue 52 KB

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