createLaunch.vue 220 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428
  1. <style scoped lang="scss">
  2. ::v-deep.vue-treeselect__control {
  3. line-height: 20px !important;
  4. }
  5. ::v-deep .table-page-search-wrapper .ant-form-item .ant-form-item-control {
  6. height: auto !important;
  7. line-height: 20px !important;
  8. }
  9. /deep/.display-none-selset {
  10. display: none !important;
  11. }
  12. .step-jump {
  13. /deep/ table tr td {
  14. border-bottom: 0px;
  15. }
  16. }
  17. .bottom-to-one {
  18. /deep/ .ant-form-item {
  19. margin-bottom: 0;
  20. }
  21. }
  22. .target-person-add-button {
  23. margin-left: 15px;
  24. }
  25. .card-person {
  26. width: 300px;
  27. /deep/.ant-card-body {
  28. padding: 0px;
  29. }
  30. /deep/.ant-card-head {
  31. padding: 0px 10px;
  32. }
  33. .card-main-case {
  34. height: 250px;
  35. overflow: auto;
  36. padding: 0 5px;
  37. }
  38. }
  39. .card-person-drawer {
  40. width: 100%;
  41. height: 90%;
  42. overflow: hidden;
  43. padding: 10px 0px;
  44. display: flex;
  45. flex-wrap: wrap;
  46. margin-right: -10px;
  47. justify-content: space-between;
  48. .card-item {
  49. width: calc(33% - 10px);
  50. margin-bottom: 10px;
  51. float: left;
  52. }
  53. .card-item-else {
  54. width: calc(20% - 10px);
  55. margin-bottom: 10px;
  56. float: left;
  57. }
  58. }
  59. .showShare {
  60. position: relative;
  61. }
  62. .share {
  63. display: none;
  64. }
  65. .showShare:hover .share {
  66. display: flex;
  67. justify-content: center;
  68. align-items: center;
  69. }
  70. .chouzhen {
  71. border-style: solid;
  72. border-width: 1px;
  73. border-color: #e4e4e4;
  74. width: calc(20% - 10px);
  75. padding: 10px;
  76. margin-right: 10px;
  77. margin-bottom: 10px;
  78. display: flex;
  79. align-items: center;
  80. background: #fff;
  81. position: relative;
  82. z-index: 99;
  83. float: left;
  84. }
  85. li.chouzhen.first:before {
  86. font-size: 12px;
  87. content: '首帧';
  88. position: absolute;
  89. top: 7px;
  90. left: 5px;
  91. width: 36px;
  92. height: 20px;
  93. color: rgb(255, 255, 255);
  94. line-height: 20px;
  95. text-align: center;
  96. background: rgba(0, 0, 0, 0.5);
  97. border-radius: 2px;
  98. z-index: 1000;
  99. }
  100. .display-none-selset {
  101. display: none !important;
  102. }
  103. .logo {
  104. padding-left: 24px;
  105. img {
  106. height: 32px !important;
  107. }
  108. .name {
  109. font-size: 14px;
  110. font-family: PingFangSC-Medium, PingFang SC;
  111. font-weight: 500;
  112. color: #ced2d9;
  113. // line-height: 22px;
  114. margin-left: 20px;
  115. padding-left: 21px;
  116. position: relative;
  117. }
  118. .name::before {
  119. content: '';
  120. width: 1px;
  121. height: 18px;
  122. background: rgba(255, 255, 255, 0.31);
  123. position: absolute;
  124. left: 0;
  125. top: 50%;
  126. margin-top: -9px;
  127. }
  128. }
  129. .chartBox {
  130. margin-top: 80px;
  131. .chartBody {
  132. display: flex;
  133. justify-content: space-around;
  134. flex-wrap: wrap;
  135. }
  136. .search-box {
  137. margin-bottom: 20px;
  138. }
  139. }
  140. /deep/ .ant-descriptions-item-content {
  141. font-weight: bold;
  142. }
  143. .info-detail {
  144. /deep/ table tr td {
  145. border: 0;
  146. }
  147. /deep/ .ant-descriptions-item-label {
  148. color: darkgray;
  149. // min-width: 30px;
  150. white-space: nowrap;
  151. }
  152. }
  153. .flex-main {
  154. display: flex;
  155. margin-bottom: 10px;
  156. p {
  157. color: black;
  158. font-weight: 600;
  159. overflow: hidden; //超出的文本隐藏
  160. text-overflow: ellipsis; //溢出用省略号显示
  161. white-space: nowrap; //溢出不换行
  162. }
  163. }
  164. </style>
  165. <style lang="scss">
  166. .hide-checkbox .ant-table-thead .ant-table-selection {
  167. display: none;
  168. }
  169. .new-batch .ant-card-head-title {
  170. font-weight: 700;
  171. }
  172. // .new-batch textarea {
  173. // resize: none;
  174. // border: none;
  175. // outline: 0;
  176. // box-shadow: none;
  177. // }
  178. .create-info .ant-form-item {
  179. margin-bottom: 0 !important;
  180. }
  181. .fengmian .ant-checkbox-wrapper:first-child {
  182. margin-left: 8px;
  183. }
  184. @media screen and (max-width: 1200px) {
  185. // 这里写对应要修改的样式如:
  186. .new-batch .el-step__title {
  187. font-size: 12px;
  188. }
  189. }
  190. .line-height-one .ant-form-item-control {
  191. line-height: inherit;
  192. }
  193. .creat-all-info .ant-form-item-control {
  194. width: 60%;
  195. overflow: hidden;
  196. text-overflow: ellipsis;
  197. white-space: nowrap;
  198. }
  199. .config-new-batch {
  200. .display-none-selset {
  201. display: none !important;
  202. }
  203. .ant-btn-danger {
  204. background-color: #ff4d4f !important;
  205. }
  206. }
  207. </style>
  208. <template>
  209. <div ref="questionnaireBox" class="new-batch config-new-batch">
  210. <a-layout-header
  211. class="ant-header-fixedHeader ant-header-side-opened"
  212. :style="{ padding: '0' }"
  213. style="background: #0b2040 !important; position: fixed; top: 0; z-index: 100; width: 100%"
  214. >
  215. <div :class="['top-nav-header-index', theme]">
  216. <div class="header-index-wide">
  217. <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
  218. <div class="logo">
  219. <img src="~@/assets/logoNew1.png" alt="logo" />
  220. <span class="name">有腾投放管家</span>
  221. </div>
  222. </div>
  223. </div>
  224. </div>
  225. </a-layout-header>
  226. <div class="chartBox" style="padding: 0 20px">
  227. <a-row :gutter="20">
  228. <a-col :sm="3" style="margin-bottom: 20px; z-index: 10; position: fixed">
  229. <a-card class="search-box" style="height: 90vh">
  230. <el-steps direction="vertical" finish-status="wait" space="50px" :active="activeStep">
  231. <el-step
  232. v-for="(item, index) in stepsArr"
  233. :key="index"
  234. :title="item.title"
  235. @click.native="jump(index)"
  236. >
  237. </el-step>
  238. </el-steps>
  239. </a-card>
  240. </a-col>
  241. <a-col :sm="21" :push="3" style="margin-bottom: 20px; z-index: 10" id="container">
  242. <a-card class="search-box step-jump" title="选择项目">
  243. <a-form layout="horizontal" v-bind="formItemLayout" :form="formProject">
  244. <a-row :gutter="16">
  245. <a-col :span="16" class=" table-page-search-wrapper">
  246. <a-form-item
  247. label="账户名称"
  248. :labelCol="formItemLayout.labelCol"
  249. class="require-check"
  250. >
  251. <selectTreeAccount
  252. v-decorator="[
  253. 'accountId',
  254. {
  255. rules: [{ required: true, message: '账户名称必选' }],
  256. initialValue: undefined
  257. }
  258. ]"
  259. style="display: inline-block;position: relative;margin-left: 0px;width:100%"
  260. :limit="1"
  261. :disabled="!!$route.query.id"
  262. />
  263. </a-form-item>
  264. </a-col>
  265. </a-row>
  266. <a-row :gutter="16">
  267. <a-col :span="16">
  268. <a-form-item label="营销目标">
  269. <a-radio-group
  270. button-style="solid"
  271. v-decorator="[
  272. 'campaignType',
  273. {
  274. rules: [{ required: true, message: '营销目标必选' }],
  275. initialValue: 2
  276. }
  277. ]"
  278. >
  279. <a-radio-button :value="2">提升应用安装</a-radio-button>
  280. <a-radio-button :value="5" disabled>收集销售线索</a-radio-button>
  281. <a-radio-button :value="7" disabled>提高应用活跃</a-radio-button>
  282. </a-radio-group>
  283. </a-form-item>
  284. </a-col>
  285. </a-row>
  286. <a-row :gutter="16">
  287. <a-col :span="16">
  288. <a-form-item label="基础信息配置">
  289. <a-button type="primary" slot="extra" @click="formInfoShow">基础信息</a-button>
  290. </a-form-item>
  291. </a-col>
  292. </a-row>
  293. </a-form>
  294. </a-card>
  295. <a-card class="search-box step-jump" title="优化目标">
  296. <a-form layout="horizontal" v-bind="formItemLayout" :form="formOptimize">
  297. <a-row :gutter="16">
  298. <a-col :span="16">
  299. <a-form-item label="优化目标">
  300. <a-radio-group
  301. v-decorator="['bidType', { initialValue: 10 }]"
  302. button-style="solid"
  303. >
  304. <a-radio-button :value="10">
  305. 转化数
  306. </a-radio-button>
  307. </a-radio-group>
  308. </a-form-item>
  309. </a-col>
  310. </a-row>
  311. <a-row :gutter="16">
  312. <a-col :span="16">
  313. <a-form-item label="转化目标">
  314. <a-select
  315. style="width:300px"
  316. allowClear
  317. v-decorator="[
  318. 'ocpxActionType',
  319. { rules: [{ required: true, message: '转化目标必选' }] }
  320. ]"
  321. >
  322. <a-select-option :value="2">行为数</a-select-option>
  323. <a-select-option :value="180">激活</a-select-option>
  324. <a-select-option :value="53">表单提交</a-select-option>
  325. <a-select-option :value="394">订单提交</a-select-option>
  326. <a-select-option :value="348">使用有效线索</a-select-option>
  327. <a-select-option :value="383">授信出价</a-select-option>
  328. <a-select-option :value="384">完件出价</a-select-option>
  329. <a-select-option :value="190">付费出价</a-select-option>
  330. <a-select-option :value="191">首日ROI</a-select-option>
  331. <a-select-option :value="396">注册优化目标</a-select-option>
  332. <a-select-option :value="324">唤起应用</a-select-option>
  333. <a-select-option :value="715">微信复制优化目标</a-select-option>
  334. <a-select-option :value="716">多转化事件</a-select-option>
  335. <a-select-option :value="717">广告观看次数</a-select-option>
  336. <a-select-option :value="773">关键行为</a-select-option>
  337. </a-select>
  338. </a-form-item>
  339. </a-col>
  340. </a-row>
  341. <a-row :gutter="16">
  342. <a-col :span="16">
  343. <a-form-item label="计费方式">
  344. <a-radio-group default-value="10" button-style="solid">
  345. <a-radio-button value="10">
  346. 按展示付费(oCPM)
  347. </a-radio-button>
  348. </a-radio-group>
  349. </a-form-item>
  350. </a-col>
  351. </a-row>
  352. <a-row :gutter="16">
  353. <a-col :span="16">
  354. <a-form-item label="深度转化目标">
  355. <a-select
  356. style="width:300px"
  357. size="default"
  358. allowClear
  359. v-decorator="['deepConversionType']"
  360. >
  361. <a-select-option :value="3">
  362. 付费
  363. </a-select-option>
  364. <a-select-option :value="7">
  365. 次日留存
  366. </a-select-option>
  367. <a-select-option :value="10">
  368. 完件
  369. </a-select-option>
  370. <a-select-option :value="11">
  371. 授信
  372. </a-select-option>
  373. <a-select-option :value="13">
  374. 添加购物车
  375. </a-select-option>
  376. <a-select-option :value="14">
  377. 提交订单
  378. </a-select-option>
  379. <a-select-option :value="15">
  380. 购买
  381. </a-select-option>
  382. <a-select-option :value="44">
  383. 有效线索
  384. </a-select-option>
  385. <a-select-option :value="92">
  386. 付费roi
  387. </a-select-option>
  388. </a-select>
  389. </a-form-item>
  390. </a-col>
  391. </a-row>
  392. <a-row :gutter="16">
  393. <a-col :span="16">
  394. <a-form-item label="转化目标出价">
  395. <a-input
  396. style="width:300px"
  397. v-decorator="[
  398. 'cpaBid',
  399. {
  400. rules: [
  401. { required: true, message: ' ' },
  402. { validator: cpaBidValid }
  403. ]
  404. }
  405. ]"
  406. >
  407. </a-input>
  408. <br />
  409. <span style="color:red"
  410. >单出价请输入单数字,阶梯出价请用/隔开 例如10/12,区间出价请用-链接
  411. 例如20-25</span
  412. >
  413. </a-form-item>
  414. </a-col>
  415. </a-row>
  416. <!-- { rules: [{ validator: deepBidValid }] } -->
  417. <a-row :gutter="16">
  418. <a-col :span="16">
  419. <a-form-item label="深度转化出价">
  420. <a-input style="width:300px" v-decorator="['deepConversionBid']"> </a-input>
  421. <br />
  422. <span style="color:red"
  423. >单出价请输入单数字,阶梯出价请用/隔开 例如10/12,区间出价请用-链接
  424. 例如20-25</span
  425. >
  426. </a-form-item>
  427. </a-col>
  428. </a-row>
  429. </a-form>
  430. </a-card>
  431. <a-card class="search-box step-jump" title="目标应用">
  432. <a-button
  433. type="primary"
  434. slot="extra"
  435. @click="targetAppEdit"
  436. :disabled="!getFormData('formProject', 'accountId')"
  437. >编辑</a-button
  438. >
  439. <a-row :gutter="16" class="bottom-to-one">
  440. <a-col :span="16">
  441. <a-form-item label="" v-bind="tailFormItemLayout">
  442. <a-descriptions>
  443. <a-descriptions-item label="系统平台">
  444. {{
  445. appDetail && appDetail.platformOs
  446. ? appDetail.platformOs === 1
  447. ? 'Android'
  448. : 'IOS'
  449. : '-'
  450. }}
  451. </a-descriptions-item>
  452. <a-descriptions-item label="单/多应用">
  453. {{ multipleBidData.length > 1 ? '多应用' : '单应用' }}
  454. </a-descriptions-item>
  455. <a-descriptions-item label="应用数量">
  456. {{ multipleBidData.length }}
  457. </a-descriptions-item>
  458. <a-descriptions-item label="是否使用渠道号">
  459. {{ appDetail && appDetail.useChannel ? '是' : '否' }}
  460. </a-descriptions-item>
  461. <a-descriptions-item
  462. label="渠道号作用纬度"
  463. v-if="
  464. appDetail &&
  465. appDetail.useChannel &&
  466. channelData &&
  467. channelData.channel.usageLevel
  468. "
  469. >
  470. {{
  471. channelData.channel.usageLevel == 'account'
  472. ? '账户'
  473. : channelData.channel.usageLevel == 'plan'
  474. ? '计划'
  475. : '组'
  476. }}
  477. </a-descriptions-item>
  478. <a-descriptions-item
  479. label="是否使用单品"
  480. v-if="
  481. appDetail &&
  482. appDetail.useChannel &&
  483. channelData &&
  484. channelData.channel.isHaveItem
  485. "
  486. >
  487. {{ channelData.channel.isHaveItem == 1 ? '是' : '否' }}
  488. </a-descriptions-item>
  489. <a-descriptions-item label="调起链接">
  490. {{ appDetail && appDetail.schemaUri ? appDetail.schemaUri : '无' }}
  491. </a-descriptions-item>
  492. <a-descriptions-item label="转化跟踪" v-if="convertId && !convert">
  493. {{ convertId.label }}
  494. </a-descriptions-item>
  495. <a-descriptions-item label="优先从系统应用商店下载">
  496. {{ appDetail && appDetail.useAppMarket ? '是' : '否' }}
  497. </a-descriptions-item>
  498. </a-descriptions>
  499. </a-form-item>
  500. </a-col>
  501. </a-row>
  502. <a-row :gutter="16" v-for="(item, index) in multipleBidData" :key="index">
  503. <a-col :span="16" v-if="!appDetail.useChannel">
  504. <a-form-item :label="'应用' + (index + 1)" v-bind="formItemLayout">
  505. <a-collapse expand-icon-position="right">
  506. <a-collapse-panel key="1" :header="item.appName">
  507. <a-descriptions>
  508. <a-descriptions-item label="应用标识" :span="3">
  509. {{ item.appVersion }}
  510. </a-descriptions-item>
  511. <a-descriptions-item label="第三方点击监测链接" :span="3">
  512. {{ !!item.tracUrl ? item.tracUrl : '-' }}
  513. </a-descriptions-item>
  514. <a-descriptions-item label="第三方actionBar监测链接" :span="3">
  515. {{ !!item.actionbarClickUrl ? item.actionbarClickUrl : '-' }}
  516. </a-descriptions-item>
  517. </a-descriptions>
  518. </a-collapse-panel>
  519. </a-collapse>
  520. </a-form-item>
  521. </a-col>
  522. <a-col :span="16" v-else>
  523. <a-form-item :label="'应用' + (index + 1)" v-bind="formItemLayout">
  524. <p style="width:100%;display: flex;justify-content: space-between;">
  525. {{ item.appName }}({{ item.appVersion }})
  526. <a @click="lookChannel(item.appName)">详情</a>
  527. </p>
  528. </a-form-item>
  529. </a-col>
  530. </a-row>
  531. </a-card>
  532. <a-card class="search-box step-jump">
  533. <span slot="title">
  534. 目标人群
  535. <a-tooltip>
  536. <template slot="title">
  537. 定向包支持多选
  538. 将根据人群包匹配情况进行随机匹配。若账户中无此人群包,则进行下一个定向包匹配。若此账户全部匹配不成功则不创建
  539. </template>
  540. <a-icon type="question-circle" />
  541. </a-tooltip>
  542. </span>
  543. <a-row :gutter="16">
  544. <a-col :span="16" style="width:100%; margin-left: -10%;">
  545. <a-form-item label="" v-bind="tailFormItemLayout">
  546. <div class="target-person-add">
  547. <span>已选定向包:{{ showCheckPerson.length }}</span>
  548. <a-button
  549. type="primary"
  550. class="target-person-add-button"
  551. @click="targetPersonCheck"
  552. :disabled="!getFormData('formProject', 'accountId')"
  553. >选择定向包 ></a-button
  554. >
  555. <a-tooltip>
  556. <template slot="title">
  557. 当编辑定向包时,需要重新选择定向包
  558. </template>
  559. <a-icon
  560. type="question-circle"
  561. v-if="$route.query.id"
  562. style="margin-left:20px"
  563. />
  564. </a-tooltip>
  565. </div>
  566. </a-form-item>
  567. <a-form-item label="" v-bind="tailFormItemLayout">
  568. <div
  569. class="card-person-drawer info-detail"
  570. style="justify-content: flex-start;max-height:500px;overflow:auto"
  571. >
  572. <a-card
  573. :title="item.targetName"
  574. class="card-person card-item-else"
  575. style="margin-right:10px"
  576. v-for="(item, index) in showCheckPerson"
  577. :key="index"
  578. >
  579. <div slot="extra">
  580. <a-popconfirm
  581. title="确定要删除这个定向吗?"
  582. ok-text="确定"
  583. cancel-text="取消"
  584. @confirm="removeVideoMaterial(index, item.id)"
  585. @cancel="cancel"
  586. >
  587. <a-icon type="delete" />
  588. </a-popconfirm>
  589. </div>
  590. <div class="card-main-case">
  591. <a-row style="margin-top:10px">
  592. <a-col :xl="24" :md="24" class="flex-main" v-if="item">
  593. <span class="ant-descriptions-item-label"> 人群:</span>
  594. <div v-if="item" style="word-break: break-all;">
  595. <span
  596. v-if="
  597. (!item.population && !item.excludePopulation) ||
  598. (item.population == '[]' &&
  599. item.excludePopulation == '[]')
  600. "
  601. >
  602. 不限
  603. </span>
  604. <span
  605. v-else-if="
  606. item.population &&
  607. (!item.excludePopulation ||
  608. item.excludePopulation == '[]')
  609. "
  610. >
  611. 定向人群:{{ JSON.parse(item.population).join() }}
  612. </span>
  613. <span
  614. v-else-if="
  615. item.excludePopulation &&
  616. (!item.population || item.population == '[]')
  617. "
  618. >
  619. 排除人群:{{
  620. JSON.parse(item.excludePopulation).join()
  621. }}
  622. </span>
  623. <span v-else>
  624. 定向人群:{{ JSON.parse(item.population).join() }}
  625. <br />
  626. 排除人群:{{
  627. JSON.parse(item.excludePopulation).join()
  628. }}
  629. </span>
  630. </div>
  631. <p title="-" v-else>-</p>
  632. </a-col>
  633. </a-row>
  634. <a-row style="margin-top:10px">
  635. <a-col :xl="24" :md="24" class="flex-main">
  636. <span class="ant-descriptions-item-label"> 地区:</span>
  637. <div v-if="item">
  638. <span
  639. v-if="
  640. item.region == '' ||
  641. item.region == null ||
  642. JSON.parse(item.region).length == 0
  643. "
  644. >
  645. 不限
  646. </span>
  647. <div v-else>
  648. {{ item.regionName.join(',') }}
  649. </div>
  650. </div>
  651. <p title="-" v-else>-</p>
  652. </a-col>
  653. </a-row>
  654. <a-row>
  655. <a-col :xl="24" :md="24" class="flex-main">
  656. <span class="ant-descriptions-item-label"> 年龄:</span>
  657. <div v-if="item">
  658. <span
  659. v-if="
  660. (item.agesRange == '[]' ||
  661. item.agesRange == null) &&
  662. (item.min == -1 || item.min == null) &&
  663. (item.max == -1 || item.max == null)
  664. "
  665. >
  666. 不限
  667. </span>
  668. <div v-else>
  669. <span
  670. v-if="
  671. item.agesRange == '[]' || item.agesRange == null
  672. "
  673. >
  674. {{ item.min + '岁~' + item.max + '岁' }}
  675. </span>
  676. <span v-else>
  677. <span
  678. v-for="(items, index) in JSON.parse(
  679. item.agesRange
  680. )"
  681. :key="index"
  682. >
  683. {{ items | kuaishouAge
  684. }}{{
  685. index ==
  686. JSON.parse(item.agesRange).length - 1
  687. ? ''
  688. : ','
  689. }}
  690. </span>
  691. </span>
  692. </div>
  693. </div>
  694. <p title="-" v-else>-</p>
  695. </a-col>
  696. </a-row>
  697. <a-row>
  698. <a-col :xl="24" :md="24" class="flex-main">
  699. <span class="ant-descriptions-item-label"> 性别:</span>
  700. <div v-if="item">
  701. {{
  702. item.gender == 1
  703. ? '女'
  704. : item.gender == 2
  705. ? '男'
  706. : '不限'
  707. }}
  708. </div>
  709. <p title="-" v-else>-</p>
  710. </a-col>
  711. </a-row>
  712. <a-row>
  713. <a-col :xl="24" :md="24" class="flex-main">
  714. <span class="ant-descriptions-item-label"> 最低版本:</span>
  715. <div v-if="item">
  716. {{
  717. item.platformOs == 1
  718. ? 'Android系统(' +
  719. (item.androidOsv == 3
  720. ? '不限)'
  721. : item.androidOsv + 'x+)')
  722. : item.platformOs == 2
  723. ? 'IOS系统(' +
  724. (item.iosOsv == 6 ? '不限)' : item.iosOsv + 'x+)')
  725. : '不限'
  726. }}
  727. </div>
  728. <p title="-" v-else>-</p>
  729. </a-col>
  730. </a-row>
  731. <a-row>
  732. <a-col :xl="24" :md="24" class="flex-main">
  733. <span class="ant-descriptions-item-label"> 设备品牌:</span>
  734. <div v-if="item">
  735. <span
  736. v-if="
  737. item.deviceBrand == '' ||
  738. item.deviceBrand == null ||
  739. JSON.parse(item.deviceBrand).length == 0
  740. "
  741. >
  742. 不限
  743. </span>
  744. <span v-else>
  745. <span
  746. v-for="(items, index) in JSON.parse(
  747. item.deviceBrand
  748. )"
  749. :key="index"
  750. >
  751. {{ items | deviceBrand
  752. }}{{
  753. index == JSON.parse(item.deviceBrand).length - 1
  754. ? ''
  755. : ','
  756. }}
  757. </span>
  758. </span>
  759. </div>
  760. <p title="-" v-else>-</p>
  761. </a-col>
  762. </a-row>
  763. <a-row>
  764. <a-col :xl="24" :md="24" class="flex-main">
  765. <span class="ant-descriptions-item-label"> 设备价格:</span>
  766. <div v-if="item">
  767. <span
  768. v-if="
  769. item.devicePrice == '' ||
  770. item.devicePrice == null ||
  771. JSON.parse(item.devicePrice).length == 0
  772. "
  773. >
  774. 不限
  775. </span>
  776. <span v-else>
  777. <span
  778. v-for="(items, index) in JSON.parse(
  779. item.devicePrice
  780. )"
  781. :key="index"
  782. >
  783. {{ items | kuaishouPrice
  784. }}{{
  785. index == JSON.parse(item.devicePrice).length - 1
  786. ? ''
  787. : ','
  788. }}
  789. </span>
  790. </span>
  791. </div>
  792. <p title="-" v-else>-</p>
  793. </a-col>
  794. </a-row>
  795. <a-row>
  796. <a-col :xl="24" :md="24" class="flex-main">
  797. <span class="ant-descriptions-item-label"> 商业兴趣:</span>
  798. <div>
  799. <span
  800. v-if="
  801. item.businessInterest == '[]' ||
  802. item.businessInterest == null ||
  803. item.businessInterest == ''
  804. "
  805. >
  806. 不限
  807. </span>
  808. <div v-else>
  809. <span
  810. v-for="(items, index) in JSON.parse(
  811. item.businessInterest
  812. )"
  813. :key="index"
  814. >
  815. {{ items | business }}
  816. {{
  817. index ==
  818. JSON.parse(item.businessInterest).length - 1
  819. ? ''
  820. : ','
  821. }}
  822. </span>
  823. </div>
  824. </div>
  825. </a-col>
  826. </a-row>
  827. <a-row>
  828. <a-col :xl="24" :md="24" class="flex-main">
  829. <span class="ant-descriptions-item-label"> 网红粉丝:</span>
  830. <span
  831. v-if="
  832. item.fansStar == '[]' ||
  833. item.fansStar == null ||
  834. item.fansStar == ''
  835. "
  836. >
  837. 不限
  838. </span>
  839. <div v-else>
  840. <span
  841. v-for="(items, index) in JSON.parse(item.fansStar)"
  842. :key="index"
  843. >
  844. {{ items | fansStarLabel }}
  845. {{
  846. index == JSON.parse(item.fansStar).length - 1
  847. ? ''
  848. : ','
  849. }}
  850. </span>
  851. </div>
  852. </a-col>
  853. </a-row>
  854. <a-row v-if="item.platformOs == 1">
  855. <a-col :xl="24" :md="24" class="flex-main">
  856. <span class="ant-descriptions-item-label"> APP行为:</span>
  857. <div v-if="item">
  858. <span
  859. v-if="
  860. (item.appIds == '[]' ||
  861. item.appIds == null ||
  862. item.appIds == '') &&
  863. (item.appInterest == '[]' ||
  864. item.appInterest == null ||
  865. item.appInterest == '')
  866. "
  867. >
  868. 不限
  869. </span>
  870. <div v-else>
  871. <span
  872. v-if="
  873. item.appIds == '[]' ||
  874. item.appIds == null ||
  875. item.appIds == ''
  876. "
  877. >
  878. <span
  879. v-for="(items, index) in JSON.parse(
  880. item.appInterest
  881. )"
  882. :key="index"
  883. >
  884. {{ items | optionsApp
  885. }}{{
  886. index ==
  887. JSON.parse(item.appInterest).length - 1
  888. ? ''
  889. : ','
  890. }}
  891. </span>
  892. </span>
  893. <span v-else>
  894. <span
  895. v-for="(items, index) in JSON.parse(
  896. item.appIds
  897. )"
  898. :key="index"
  899. >
  900. {{ items }}
  901. </span>
  902. </span>
  903. </div>
  904. </div>
  905. <p title="-" v-else>-</p>
  906. </a-col>
  907. </a-row>
  908. <a-row>
  909. <a-col :xl="24" :md="24" class="flex-main">
  910. <span class="ant-descriptions-item-label"> 兴趣视频用户:</span>
  911. <div v-if="item">
  912. <span
  913. v-if="
  914. item.interestVideo == '[]' ||
  915. item.interestVideo == null ||
  916. item.interestVideo == ''
  917. "
  918. >
  919. 不限
  920. </span>
  921. <div v-else>
  922. <span
  923. v-for="(items, index) in JSON.parse(
  924. item.interestVideo
  925. )"
  926. :key="index"
  927. >
  928. {{ items | interestVideo
  929. }}{{
  930. index ==
  931. JSON.parse(item.interestVideo).length - 1
  932. ? ''
  933. : ','
  934. }}
  935. </span>
  936. </div>
  937. </div>
  938. <p title="-" v-else>-</p>
  939. </a-col>
  940. </a-row>
  941. <a-row>
  942. <a-col :xl="24" :md="24" class="flex-main">
  943. <span class="ant-descriptions-item-label"> 网络环境:</span>
  944. <div v-if="item">
  945. {{
  946. item.network == 1
  947. ? 'Wi-Fi'
  948. : item.network == 2
  949. ? '移动网络'
  950. : '不限'
  951. }}
  952. </div>
  953. <p title="-" v-else>-</p>
  954. </a-col>
  955. </a-row>
  956. <a-row>
  957. <a-col :xl="24" :md="24" class="flex-main">
  958. <span class="ant-descriptions-item-label">
  959. 过滤已转换用户:</span
  960. >
  961. <div v-if="item">
  962. {{
  963. item.filterConvertedLevel | kuaishouFilterConvertedLevel
  964. }}
  965. </div>
  966. <p title="-" v-else>-</p>
  967. </a-col>
  968. </a-row>
  969. <a-row>
  970. <a-col :xl="24" :md="24" class="flex-main">
  971. <span class="ant-descriptions-item-label"> 智能扩量:</span>
  972. <div v-if="item">
  973. {{ item.isOpen == 0 ? '关闭' : '开启' }}
  974. </div>
  975. <p title="-" v-else>-</p>
  976. </a-col>
  977. </a-row>
  978. </div>
  979. </a-card>
  980. </div>
  981. </a-form-item>
  982. </a-col>
  983. </a-row>
  984. </a-card>
  985. <a-card class="search-box step-jump" title="创意信息">
  986. <a-button
  987. type="primary"
  988. slot="extra"
  989. @click="originalityEdit"
  990. :disabled="!getFormData('formProject', 'accountId')"
  991. >编辑</a-button
  992. >
  993. <a-form-item v-bind="tailFormItemLayoutElse" style="margin-left:1.15%">
  994. <a-descriptions>
  995. <a-descriptions-item label="创意制作方式">
  996. <span v-if="showCreativeData">
  997. {{ showCreativeData.unitType | unitType }}
  998. </span>
  999. <span v-else>-</span>
  1000. </a-descriptions-item>
  1001. <a-descriptions-item label=" 广告位置">
  1002. <span v-if="showCreativeData && showCreativeData.sceneId">
  1003. <span v-for="(item, index) in showCreativeData.sceneId" :key="index">
  1004. {{ item | kuaishouSceneId
  1005. }}{{ index === showCreativeData.sceneId.length - 1 ? '' : ',' }}
  1006. </span>
  1007. </span>
  1008. <span v-else>-</span>
  1009. </a-descriptions-item>
  1010. <a-descriptions-item label="关联封面数">
  1011. <span v-if="showCreativeData && showCreativeData.imageCnt">
  1012. {{ showCreativeData.imageCnt }}
  1013. </span>
  1014. <span v-else>-</span>
  1015. </a-descriptions-item>
  1016. <a-descriptions-item label="自定义计划数量/组数量">
  1017. <span
  1018. v-if="
  1019. showCreativeData &&
  1020. showCreativeData.customPlanCnt &&
  1021. showCreativeData.customUnitCnt
  1022. "
  1023. >
  1024. {{ showCreativeData.customPlanCnt + '/' + showCreativeData.customUnitCnt }}
  1025. </span>
  1026. <span v-else>-</span>
  1027. </a-descriptions-item>
  1028. <a-descriptions-item label="程序化计划数量/组数量">
  1029. <span
  1030. v-if="
  1031. showCreativeData &&
  1032. showCreativeData.programUnitCnt &&
  1033. showCreativeData.programPlanCnt
  1034. "
  1035. >
  1036. {{ showCreativeData.programPlanCnt + '/' + showCreativeData.programUnitCnt }}
  1037. </span>
  1038. <span v-else>-</span>
  1039. </a-descriptions-item>
  1040. <a-descriptions-item label="素材类型">
  1041. <span v-if="showCreativeData">
  1042. {{ showCreativeData.channelType | channelType }}
  1043. </span>
  1044. <span v-else>-</span>
  1045. </a-descriptions-item>
  1046. <a-descriptions-item label="素材挖掘">
  1047. <span v-if="showCreativeData">
  1048. {{ showCreativeData.assetMining === 0 ? '关闭' : '开启' }}
  1049. </span>
  1050. <span v-else>-</span>
  1051. </a-descriptions-item>
  1052. <a-descriptions-item label="智能抽帧">
  1053. <span v-if="showCreativeData">
  1054. {{ showCreativeData.smartCover === 0 ? '关闭' : '开启' }}
  1055. </span>
  1056. <span v-else>-</span>
  1057. </a-descriptions-item>
  1058. <a-descriptions-item label="素材选取">
  1059. <span v-if="showCreativeData">
  1060. 不限
  1061. </span>
  1062. <span v-else>-</span>
  1063. </a-descriptions-item>
  1064. <a-descriptions-item label="创意分类">
  1065. <span v-if="showCreativeData && showCreativeData.creativeCategory">
  1066. <a-cascader
  1067. :options="createOptions"
  1068. v-model="showCreativeData.creativeCategory"
  1069. disabled
  1070. :fieldNames="fieldNames"
  1071. placeholder="请选择创意分类"
  1072. />
  1073. </span>
  1074. <span v-else>-</span>
  1075. </a-descriptions-item>
  1076. <a-descriptions-item label="行动号召">
  1077. <span v-if="showCreativeData && showCreativeData.actionBarText">
  1078. {{ showCreativeData.actionBarText.join() }}
  1079. </span>
  1080. <span v-else>-</span>
  1081. </a-descriptions-item>
  1082. <a-descriptions-item label="创意标签">
  1083. <span v-if="showCreativeData && showCreativeData.creativeTag">
  1084. {{ showCreativeData.creativeTag.join() }}
  1085. </span>
  1086. <span v-else>-</span>
  1087. </a-descriptions-item>
  1088. <a-descriptions-item label="广告语" :span="3">
  1089. <span v-if="showCreativeData">
  1090. <span v-for="(item, index) in descriptionList" :key="index">
  1091. {{ item.value }}{{ index === descriptionList.length - 1 ? '' : ';' }}
  1092. </span>
  1093. </span>
  1094. <span v-else>-</span>
  1095. </a-descriptions-item>
  1096. </a-descriptions>
  1097. </a-form-item>
  1098. </a-card>
  1099. <a-card class="search-box step-jump" title="素材信息">
  1100. <a-form layout="horizontal" v-bind="formItemLayout" :form="formMaterial">
  1101. <a-row :gutter="16">
  1102. <a-col :span="16">
  1103. <a-form-item>
  1104. <span slot="label">
  1105. <a-tooltip>
  1106. <template slot="title">
  1107. 自动投放自动选取素材,在此处可限制选取素材逻辑。上新素材不可取消勾选,“高质量素材”“遗漏素材”“历史素材打捞”可随意组合使用
  1108. </template>
  1109. <a-icon type="question-circle" />
  1110. </a-tooltip>
  1111. 素材选取
  1112. </span>
  1113. <a-checkbox-group
  1114. v-decorator="[
  1115. 'sourceMaterial',
  1116. {
  1117. rules: [
  1118. {
  1119. required: true,
  1120. message: '转化目标必选'
  1121. }
  1122. ],
  1123. initialValue: [1]
  1124. }
  1125. ]"
  1126. >
  1127. <a-checkbox :value="1" disabled>
  1128. 上新素材
  1129. </a-checkbox>
  1130. <a-checkbox :value="2">
  1131. 高质量素材
  1132. </a-checkbox>
  1133. <a-checkbox :value="3">
  1134. 遗漏素材
  1135. </a-checkbox>
  1136. <a-checkbox :value="4">
  1137. 历史打捞
  1138. </a-checkbox>
  1139. </a-checkbox-group>
  1140. </a-form-item>
  1141. <a-form-item>
  1142. <span slot="label">
  1143. 素材匹配逻辑
  1144. </span>
  1145. <a-radio-group
  1146. v-decorator="[
  1147. 'matchType',
  1148. {
  1149. rules: [
  1150. {
  1151. required: true,
  1152. message: '转化目标必选'
  1153. }
  1154. ],
  1155. initialValue: 1
  1156. }
  1157. ]"
  1158. >
  1159. <a-radio :value="1">
  1160. 定向匹配
  1161. </a-radio>
  1162. <a-radio :value="2">
  1163. 素材匹配
  1164. </a-radio>
  1165. </a-radio-group>
  1166. </a-form-item>
  1167. <a-form-item>
  1168. <span slot="label">
  1169. 素材关键字
  1170. </span>
  1171. <a-textarea
  1172. class="rending"
  1173. placeholder="请输入素材关键字"
  1174. v-decorator="[
  1175. 'materialKeyword',
  1176. {
  1177. rules: [
  1178. {
  1179. required: true,
  1180. message: '素材关键字必填'
  1181. }
  1182. ]
  1183. }
  1184. ]"
  1185. :autosize="{ minRows: 2, maxRows: 6 }"
  1186. ></a-textarea>
  1187. </a-form-item>
  1188. </a-col>
  1189. </a-row>
  1190. </a-form>
  1191. </a-card>
  1192. <div style="display: flex; justify-content: flex-end; margin-bottom: 100px">
  1193. <div>
  1194. <a-button
  1195. type="primary"
  1196. style="margin-right: 15px"
  1197. @click="handleSubmit"
  1198. :loading="sumbitLoading"
  1199. :disabled="disabled"
  1200. >
  1201. 创建
  1202. </a-button>
  1203. <a-button @click="clearAllData"> 取消 </a-button>
  1204. </div>
  1205. </div>
  1206. </a-col>
  1207. </a-row>
  1208. </div>
  1209. <!-- 基本信息编辑 -->
  1210. <a-drawer
  1211. :width="800"
  1212. :visible="formInformationVisible"
  1213. :body-style="{ paddingBottom: '80px' }"
  1214. @close="closeFormInfo"
  1215. >
  1216. <h2 slot="title" style="margin-bottom: 0">设置基本信息</h2>
  1217. <a-form layout="horizontal" v-bind="formDrawerItemLayout" :form="formInformation">
  1218. <a-row :gutter="16">
  1219. <a-col :span="16">
  1220. <a-form-item label="计划命名规范">
  1221. <a-input
  1222. v-decorator="[
  1223. 'campaignName',
  1224. { rules: [{ required: true, message: '请填写计划的命名规则' }] }
  1225. ]"
  1226. allow-clear
  1227. id="campaignName"
  1228. />
  1229. <a-tag color="#2db7f5" @click="getChangeAll('日期', 'formInformation', 'campaignName')"
  1230. >+日期</a-tag
  1231. >
  1232. <!-- <a-tag
  1233. color="#2db7f5"
  1234. @click="getChangeAll('渠道号', 'formInformation', 'campaignName')"
  1235. >+渠道号</a-tag
  1236. >
  1237. <a-tag
  1238. color="#2db7f5"
  1239. @click="getChangeAll('横竖版', 'formInformation', 'campaignName')"
  1240. >+横竖版</a-tag
  1241. > -->
  1242. <a-tag color="#2db7f5" @click="getChangeAll('渠道号', 'formInformation', 'campaignName')"
  1243. >+渠道号</a-tag
  1244. >
  1245. <a-tag
  1246. color="#2db7f5"
  1247. @click="getChangeAll('渠道号名称', 'formInformation', 'campaignName')"
  1248. >+渠道号名称</a-tag
  1249. >
  1250. <a-tag color="#2db7f5" @click="getChangeAll('序号', 'formInformation', 'campaignName')"
  1251. >+序号</a-tag
  1252. >
  1253. </a-form-item>
  1254. </a-col>
  1255. </a-row>
  1256. <a-row :gutter="16">
  1257. <a-col :span="16">
  1258. <a-form-item label="计划单日预算">
  1259. <a-radio-group v-model="budgetType" button-style="solid">
  1260. <a-radio-button value="1">不限</a-radio-button>
  1261. <a-radio-button value="2">统一预算</a-radio-button>
  1262. </a-radio-group>
  1263. <a-input-number
  1264. v-if="budgetType === '2'"
  1265. v-decorator="[
  1266. 'campaignDayBudget',
  1267. {
  1268. rules: [
  1269. {
  1270. required: true,
  1271. message: '不小于500, 不超过100000000,仅支持输入自然数'
  1272. }
  1273. ]
  1274. }
  1275. ]"
  1276. :min="500"
  1277. :precision="0"
  1278. :max="100000000"
  1279. style="width: 100%"
  1280. placeholder="不小于500, 不超过100000000,仅支持输入自然数"
  1281. />
  1282. </a-form-item>
  1283. </a-col>
  1284. </a-row>
  1285. <a-row :gutter="16">
  1286. <a-col :span="16">
  1287. <a-form-item label="组命名规范">
  1288. <a-input
  1289. v-decorator="[
  1290. 'groupName',
  1291. { rules: [{ required: true, message: '请填写组命名规范' }] }
  1292. ]"
  1293. allow-clear
  1294. id="groupName"
  1295. />
  1296. <a-tag color="#2db7f5" @click="getChangeAll('日期', 'formInformation', 'groupName')"
  1297. >+日期</a-tag
  1298. >
  1299. <a-tag color="#2db7f5" @click="getChangeAll('素材名称', 'formInformation', 'groupName')"
  1300. >+素材名称</a-tag
  1301. >
  1302. <a-tag color="#2db7f5" @click="getChangeAll('应用名称', 'formInformation', 'groupName')"
  1303. >+应用名称</a-tag
  1304. >
  1305. <a-tag color="#2db7f5" @click="getChangeAll('应用标记', 'formInformation', 'groupName')"
  1306. >+应用标记</a-tag
  1307. >
  1308. <a-tag color="#2db7f5" @click="getChangeAll('创意制作方式', 'formInformation', 'groupName')"
  1309. >+创意制作方式</a-tag
  1310. >
  1311. <a-tag color="#2db7f5" @click="getChangeAll('广告位置', 'formInformation', 'groupName')"
  1312. >+广告位置</a-tag
  1313. >
  1314. <a-tag color="#2db7f5" @click="getChangeAll('渠道号', 'formInformation', 'groupName')"
  1315. >+渠道号</a-tag
  1316. >
  1317. <a-tag color="#2db7f5" @click="getChangeAll('渠道号名称', 'formInformation', 'groupName')"
  1318. >+渠道号名称</a-tag
  1319. >
  1320. </a-form-item>
  1321. </a-col>
  1322. </a-row>
  1323. <a-row :gutter="16">
  1324. <a-col :span="16">
  1325. <a-form-item label="组单日预算">
  1326. <a-radio-group v-model="dayBudgetType" button-style="solid">
  1327. <a-radio-button value="1">不限</a-radio-button>
  1328. <a-radio-button value="2">统一预算</a-radio-button>
  1329. </a-radio-group>
  1330. <a-input-number
  1331. v-if="dayBudgetType === '2'"
  1332. v-decorator="[
  1333. 'unitDayBudget',
  1334. {
  1335. rules: [
  1336. {
  1337. required: true,
  1338. message: '不小于500, 不超过100000000,仅支持输入自然数'
  1339. }
  1340. ]
  1341. }
  1342. ]"
  1343. style="width: 100%"
  1344. placeholder="不小于500, 不超过100000000,仅支持输入自然数"
  1345. :min="500"
  1346. :precision="0"
  1347. />
  1348. </a-form-item>
  1349. </a-col>
  1350. </a-row>
  1351. <a-row :gutter="16">
  1352. <a-col :span="16">
  1353. <a-form-item label="广告组状态">
  1354. <a-radio-group
  1355. v-decorator="[
  1356. 'unitStatus',
  1357. {
  1358. rules: [
  1359. {
  1360. required: true,
  1361. message: '不小于500, 不超过100000000,仅支持输入自然数'
  1362. }
  1363. ],
  1364. initialValue: '1'
  1365. }
  1366. ]"
  1367. button-style="solid"
  1368. >
  1369. <a-radio-button value="1">投放</a-radio-button>
  1370. <a-radio-button value="2">暂停</a-radio-button>
  1371. </a-radio-group>
  1372. </a-form-item>
  1373. </a-col>
  1374. </a-row>
  1375. </a-form>
  1376. <div
  1377. :style="{
  1378. position: 'absolute',
  1379. right: 0,
  1380. bottom: 0,
  1381. width: '100%',
  1382. borderTop: '1px solid #e9e9e9',
  1383. padding: '10px 16px',
  1384. background: '#fff',
  1385. textAlign: 'right',
  1386. zIndex: 1
  1387. }"
  1388. >
  1389. <a-button :style="{ marginRight: '8px' }" @click="closeFormInfo"> 取消 </a-button>
  1390. <a-button type="primary" @click="submitFormInfo"> 提交 </a-button>
  1391. </div>
  1392. </a-drawer>
  1393. <!-- 目标应用编辑 -->
  1394. <a-drawer :width="800" :visible="targetAppVisible" :body-style="{ paddingBottom: '80px' }" @close="closeUnit">
  1395. <!-- @close="closeUnit('createForm')" -->
  1396. <h2 slot="title" style="margin-bottom: 0">目标应用</h2>
  1397. <!-- class="create-info" -->
  1398. <a-form layout="horizontal" v-bind="formDrawerItemLayout" :form="formTargetApp">
  1399. <a-row :gutter="16">
  1400. <a-col :span="16">
  1401. <a-form-item label="系统平台">
  1402. <a-radio-group
  1403. v-decorator="['platformOs', { initialValue: 2 }]"
  1404. button-style="solid"
  1405. @change="changeType"
  1406. >
  1407. <!-- <a-radio-button :value="0">不限</a-radio-button> -->
  1408. <a-radio-button :value="1">Android</a-radio-button>
  1409. <a-radio-button :value="2">IOS</a-radio-button>
  1410. </a-radio-group>
  1411. </a-form-item>
  1412. </a-col>
  1413. </a-row>
  1414. <a-row :gutter="16">
  1415. <a-col :span="16">
  1416. <a-form-item>
  1417. <span slot="label">
  1418. <a-tooltip>
  1419. <template slot="title">
  1420. 单应用情况下 账户对应一个应用。多应用情况下 账户可对应多个应用
  1421. </template>
  1422. <a-icon type="question-circle" />
  1423. </a-tooltip>
  1424. 单/多应用
  1425. </span>
  1426. <a-radio-group v-decorator="['singleAppid', { initialValue: 1 }]" button-style="solid">
  1427. <a-radio-button :value="1">单应用</a-radio-button>
  1428. <a-radio-button :value="0">多应用</a-radio-button>
  1429. </a-radio-group>
  1430. </a-form-item>
  1431. </a-col>
  1432. </a-row>
  1433. <a-row :gutter="16">
  1434. <a-col :span="16">
  1435. <a-form-item>
  1436. <span slot="label">
  1437. <a-tooltip>
  1438. <template slot="title">
  1439. 调起链接需要加白使用 若多应用的情况下在创建时则一一匹配,若账户未加白
  1440. 则不使用调起链接
  1441. </template>
  1442. <a-icon type="question-circle" />
  1443. </a-tooltip>
  1444. 调起链接
  1445. </span>
  1446. <a-switch default-checked v-model="uriCheck" />
  1447. <span style="color:red"> 需加白使用</span>
  1448. <div v-if="uriCheck">
  1449. <a-input
  1450. placeholder="请填写链接"
  1451. v-decorator="['schemaUri', { rules: [{ message: '链接不能为空' }] }]"
  1452. />
  1453. </div>
  1454. </a-form-item>
  1455. </a-col>
  1456. </a-row>
  1457. <a-row :gutter="16">
  1458. <a-col :span="16">
  1459. <a-form-item label="选择应用">
  1460. <a-select
  1461. v-decorator="['appId', { rules: [{ required: true, message: '请选择目标应用' }] }]"
  1462. showSearch
  1463. allowClear
  1464. placeholder="选择应用目标"
  1465. optionFilterProp="children"
  1466. style="width: 500px"
  1467. :filterOption="filterOption"
  1468. @change="appIdChange"
  1469. :mode="getFormData('formTargetApp', 'singleAppid') == 1 ? 'defalut' : 'multiple'"
  1470. :maxTagCount="1"
  1471. :labelInValue="true"
  1472. >
  1473. <a-select-option v-if="getFormData('formTargetApp', 'singleAppid') == 0" :value="0"
  1474. >选择以下全部</a-select-option
  1475. >
  1476. <a-select-option
  1477. v-for="appModel in appList"
  1478. :key="appModel.appId"
  1479. :value="appModel.appId"
  1480. >
  1481. {{ appModel.platform | platform }}&#12288;&#12288;&#12288;{{
  1482. appModel.appName
  1483. }}&#12288;&nbsp;&#12288; {{ appModel.appVersion }}
  1484. </a-select-option>
  1485. </a-select>
  1486. <!-- <a-button type="primary" @click="addApplication" :loading="tongbuLoading"
  1487. >刷新应用</a-button
  1488. > -->
  1489. </a-form-item>
  1490. </a-col>
  1491. </a-row>
  1492. <a-row :gutter="16">
  1493. <a-col :span="16">
  1494. <a-form-item>
  1495. <span slot="label">
  1496. <a-tooltip>
  1497. <template slot="title">
  1498. 渠道号开启后,会自动识别选中应用所绑定的监测链接、调起链接等,无需运营手动输入
  1499. </template>
  1500. <a-icon type="question-circle" />
  1501. </a-tooltip>
  1502. 使用渠道号
  1503. </span>
  1504. <a-switch default-checked v-model="useChannel" @change="changeChannel" />
  1505. </a-form-item>
  1506. </a-col>
  1507. </a-row>
  1508. <a-row :gutter="16" v-if="channelData && channelData.channel.isHaveItem">
  1509. <a-col :span="16">
  1510. <a-form-item>
  1511. <span slot="label">
  1512. 是否使用单品
  1513. </span>
  1514. <a-radio-group v-model="channelData.channel.isHaveItem" disabled>
  1515. <a-radio-button :value="1">是</a-radio-button>
  1516. <a-radio-button :value="0">否</a-radio-button>
  1517. </a-radio-group>
  1518. </a-form-item>
  1519. </a-col>
  1520. </a-row>
  1521. <a-row :gutter="16" v-if="channelData && channelData.channel.usageLevel">
  1522. <a-col :span="16">
  1523. <a-form-item>
  1524. <span slot="label">
  1525. 渠道号作用维度
  1526. </span>
  1527. <a-radio-group button-style="solid" v-model="channelData.channel.usageLevel" disabled>
  1528. <a-radio-button value="account">账户</a-radio-button>
  1529. <a-radio-button value="plan">计划</a-radio-button>
  1530. <a-radio-button value="group">组</a-radio-button>
  1531. </a-radio-group>
  1532. </a-form-item>
  1533. </a-col>
  1534. </a-row>
  1535. <a-row
  1536. :gutter="16"
  1537. v-if="
  1538. channelData && channelData.channel.usageLevel && channelData.list && channelData.list.length > 0
  1539. "
  1540. >
  1541. <a-col :span="24">
  1542. <a-form-item v-bind="tailFormDrawerItemLayout" style="margin-left:-12%">
  1543. <a-collapse accordion ref="collapse">
  1544. <template v-for="(item, index) in channelData.list">
  1545. <a-collapse-panel
  1546. :forceRender="true"
  1547. :header="item.appName + '(应用标记)'"
  1548. style="background: #f9f9fa;border-radius: 4px;margin-bottom:15px;overflow: hidden;border: 1px solid #d9d9d9;"
  1549. >
  1550. <a-form-item label="渠道号" v-bind="formItemLayout">
  1551. {{ item.channelCode }}
  1552. </a-form-item>
  1553. <a-form-item label="素材关键字" v-bind="formItemLayout">
  1554. {{ item.keyword }}
  1555. </a-form-item>
  1556. </a-collapse-panel>
  1557. </template>
  1558. </a-collapse>
  1559. </a-form-item>
  1560. </a-col>
  1561. </a-row>
  1562. <a-row :gutter="16">
  1563. <a-col :span="18">
  1564. <a-form-item v-bind="formDrawerItemLayout">
  1565. <a-table
  1566. ref="table"
  1567. size="middle"
  1568. bordered
  1569. :dataSource="multipleBidDataDrawer"
  1570. :pagination="false"
  1571. style="width:180%"
  1572. :scroll="!useChannel ? { x: 1200 } : { x: true }"
  1573. >
  1574. <a-table-column
  1575. key="appName"
  1576. :width="!useChannel ? '10%' : true"
  1577. data-index="appName"
  1578. title="应用名称"
  1579. align="center"
  1580. />
  1581. <a-table-column
  1582. :width="!useChannel ? '10%' : true"
  1583. key="appVersion"
  1584. data-index="appVersion"
  1585. title="应用标记"
  1586. align="center"
  1587. />
  1588. <a-table-column
  1589. v-if="!useChannel"
  1590. width="20%"
  1591. key="tracUrl"
  1592. data-index="tracUrl"
  1593. title="第三方点击监测链接"
  1594. align="center"
  1595. :ellipsis="true"
  1596. >
  1597. <template slot-scope="text, record">
  1598. <editable-cell
  1599. :text="text"
  1600. @change="onCellChange(record.id, 'tracUrl', $event)"
  1601. />
  1602. </template>
  1603. </a-table-column>
  1604. <a-table-column
  1605. v-if="!useChannel"
  1606. width="20%"
  1607. key="impressionUrl"
  1608. data-index="impressionUrl"
  1609. title="第三方开始播放监测链接"
  1610. align="center"
  1611. :ellipsis="true"
  1612. >
  1613. <template slot-scope="text, record">
  1614. <editable-cell
  1615. :text="text"
  1616. @change="onCellChange(record.id, 'impressionUrl', $event)"
  1617. />
  1618. </template>
  1619. </a-table-column>
  1620. <a-table-column
  1621. v-if="!useChannel"
  1622. width="20%"
  1623. key="actionbarClickUrl"
  1624. data-index="actionbarClickUrl"
  1625. title="第三方点击按钮监测链接"
  1626. align="center"
  1627. :ellipsis="true"
  1628. >
  1629. <template slot-scope="text, record">
  1630. <editable-cell
  1631. :text="text"
  1632. @change="onCellChange(record.id, 'actionbarClickUrl', $event)"
  1633. />
  1634. </template>
  1635. </a-table-column>
  1636. <a-table-column
  1637. v-if="!useChannel"
  1638. width="20%"
  1639. key="adPhotoPlayedT3sUrl"
  1640. data-index="adPhotoPlayedT3sUrl"
  1641. title="第三方有效播放监测链接"
  1642. align="center"
  1643. :ellipsis="true"
  1644. >
  1645. <template slot-scope="text, record">
  1646. <editable-cell
  1647. :text="text"
  1648. @change="onCellChange(record.id, 'adPhotoPlayedT3sUrl', $event)"
  1649. />
  1650. </template>
  1651. </a-table-column>
  1652. <a-table-column
  1653. v-if="useChannel"
  1654. width="10%"
  1655. key="action"
  1656. data-index="action"
  1657. title="操作"
  1658. align="center"
  1659. :ellipsis="true"
  1660. >
  1661. <template slot-scope="text, record">
  1662. <a @click="lookChannel(record.appName)">详情</a>
  1663. </template>
  1664. </a-table-column>
  1665. </a-table>
  1666. </a-form-item>
  1667. </a-col>
  1668. </a-row>
  1669. <a-row :gutter="16">
  1670. <a-col :span="16">
  1671. <a-form-item label="转化跟踪">
  1672. <span v-if="convertId && !convert" style="display:block;font-size:16px"
  1673. >已选择转化目标: {{ convertId.label }}</span
  1674. >
  1675. <a-button type="primary" @click="showConvert">{{
  1676. convertId ? '更换转化目标' : '选择转化目标'
  1677. }}</a-button>
  1678. </a-form-item>
  1679. </a-col>
  1680. </a-row>
  1681. <a-row :gutter="16" v-if="getFormData('formTargetApp', 'platformOs') != 2">
  1682. <a-col :span="16">
  1683. <a-form-item v-bind="tailFormDrawerItemLayout">
  1684. <a-checkbox
  1685. v-decorator="[
  1686. 'useAppMarket',
  1687. {
  1688. valuePropName: 'checked',
  1689. initialValue: false
  1690. }
  1691. ]"
  1692. >
  1693. 优先从系统应用商店下载
  1694. </a-checkbox>
  1695. </a-form-item>
  1696. </a-col>
  1697. </a-row>
  1698. <a-row
  1699. :gutter="16"
  1700. v-if="
  1701. getFormData('formTargetApp', 'platformOs') != 2 && getFormData('formTargetApp', 'useAppMarket')
  1702. "
  1703. >
  1704. <a-col :span="24">
  1705. <a-form-item v-bind="tailFormDrawerItemLayout" style="margin-left:-12%">
  1706. 请勾选投放应用已上架的应用商店(默认全选)
  1707. <a-checkbox-group
  1708. v-decorator="[
  1709. 'appStore',
  1710. {
  1711. initialValue: []
  1712. }
  1713. ]"
  1714. >
  1715. <a-checkbox value="huawei">华为</a-checkbox>
  1716. <a-checkbox value="oppo">OPPO</a-checkbox>
  1717. <a-checkbox value="vivo">VIVO</a-checkbox>
  1718. <a-checkbox value="xiaomi">小米</a-checkbox>
  1719. <a-checkbox value="meizu">魅族</a-checkbox>
  1720. <a-checkbox value="smartisan">锤子</a-checkbox>
  1721. </a-checkbox-group>
  1722. </a-form-item>
  1723. </a-col>
  1724. </a-row>
  1725. </a-form>
  1726. <div
  1727. :style="{
  1728. position: 'absolute',
  1729. right: 0,
  1730. bottom: 0,
  1731. width: '100%',
  1732. borderTop: '1px solid #e9e9e9',
  1733. padding: '10px 16px',
  1734. background: '#fff',
  1735. textAlign: 'right',
  1736. zIndex: 1
  1737. }"
  1738. >
  1739. <a-button :style="{ marginRight: '8px' }" @click="closeUnit"> 取消 </a-button>
  1740. <a-button type="primary" @click="submitApp"> 提交 </a-button>
  1741. </div>
  1742. </a-drawer>
  1743. <!-- 定向包选择 -->
  1744. <a-drawer
  1745. :width="800"
  1746. :visible="targetPersonVisible"
  1747. :body-style="{ paddingBottom: '80px' }"
  1748. @close="closePerson"
  1749. >
  1750. <!-- @close="closeUnit('createForm')" -->
  1751. <h2 slot="title" style="margin-bottom: 0">定向包选择</h2>
  1752. <div style="display: flex;justify-content:space-between">
  1753. <div>
  1754. <a-input placeholder="输入定向包名称关键词" style="width:50%" v-model="searchTemplate" />
  1755. <a-button
  1756. type="primary"
  1757. :style="{ marginRight: '8px', marginLeft: '8px' }"
  1758. @click="getTargetPerson()"
  1759. >
  1760. 查询
  1761. </a-button>
  1762. <a-button
  1763. @click="
  1764. searchTemplate = null
  1765. ipagination.current = 1
  1766. checkPerson = checkPersonElse
  1767. getTargetPerson()
  1768. "
  1769. >
  1770. 重置
  1771. </a-button>
  1772. </div>
  1773. <div style="display:flex">
  1774. <div style="line-height: 32px;font-weight: 700;margin:0 20px;">已选择({{ sumContent }})</div>
  1775. <a-button type="primary" @click="addNewTemplate">
  1776. 新增定向包
  1777. </a-button>
  1778. </div>
  1779. </div>
  1780. <a-checkbox-group v-model="checkPerson" style="width: 100%;" @change="setVideoData">
  1781. <div class="card-person-drawer info-detail">
  1782. <a-card
  1783. :title="item.targetName"
  1784. class="card-person card-item"
  1785. v-for="(item, index) in personList"
  1786. :key="index"
  1787. >
  1788. <div slot="extra">
  1789. <a-checkbox :value="item.id" @change="setData(item.id)"></a-checkbox>
  1790. </div>
  1791. <template slot="actions" class="ant-card-actions">
  1792. <a-icon key="edit" type="edit" @click="editNewTemplate(item)" />
  1793. <a-icon key="delete" type="delete" @click="deleteNewTemplate(item.id)" />
  1794. </template>
  1795. <div class="card-main-case">
  1796. <a-row style="margin-top:10px">
  1797. <a-col :xl="24" :md="24" class="flex-main">
  1798. <span class="ant-descriptions-item-label"> 人群:</span>
  1799. <div v-if="item" style="word-break: break-all;">
  1800. <span
  1801. v-if="
  1802. (!item.population && !item.excludePopulation) ||
  1803. (item.population == '[]' && item.excludePopulation == '[]')
  1804. "
  1805. >
  1806. 不限
  1807. </span>
  1808. <span
  1809. v-else-if="
  1810. item.population &&
  1811. (!item.excludePopulation || item.excludePopulation == '[]')
  1812. "
  1813. >
  1814. 定向人群:{{ JSON.parse(item.population).join() }}
  1815. </span>
  1816. <span
  1817. v-else-if="
  1818. item.excludePopulation && (!item.population || item.population == '[]')
  1819. "
  1820. >
  1821. 排除人群:{{ JSON.parse(item.excludePopulation).join() }}
  1822. </span>
  1823. <span v-else>
  1824. 定向人群:{{ JSON.parse(item.population).join() }} <br />排除人群:{{
  1825. JSON.parse(item.excludePopulation).join()
  1826. }}</span
  1827. >
  1828. </div>
  1829. <p title="-" v-else>-</p>
  1830. </a-col>
  1831. </a-row>
  1832. <a-row style="margin-top:10px">
  1833. <a-col :xl="24" :md="24" class="flex-main">
  1834. <span class="ant-descriptions-item-label"> 地区:</span>
  1835. <div v-if="item">
  1836. <span
  1837. v-if="
  1838. item.region == '' ||
  1839. item.region == null ||
  1840. JSON.parse(item.region).length == 0
  1841. "
  1842. >
  1843. 不限
  1844. </span>
  1845. <div v-else>
  1846. {{ item.regionName.join(',') }}
  1847. </div>
  1848. </div>
  1849. <p title="-" v-else>-</p>
  1850. </a-col>
  1851. </a-row>
  1852. <a-row>
  1853. <a-col :xl="24" :md="24" class="flex-main">
  1854. <span class="ant-descriptions-item-label"> 年龄:</span>
  1855. <div v-if="item">
  1856. <span
  1857. v-if="
  1858. (item.agesRange == '[]' || item.agesRange == null) &&
  1859. (item.min == -1 || item.min == null) &&
  1860. (item.max == -1 || item.max == null)
  1861. "
  1862. >
  1863. 不限
  1864. </span>
  1865. <div v-else>
  1866. <span v-if="item.agesRange == '[]' || item.agesRange == null">
  1867. {{ item.min + '岁~' + item.max + '岁' }}
  1868. </span>
  1869. <span v-else>
  1870. <span v-for="(items, index) in JSON.parse(item.agesRange)" :key="index">
  1871. {{ items | kuaishouAge
  1872. }}{{ index == JSON.parse(item.agesRange).length - 1 ? '' : ',' }}
  1873. </span>
  1874. </span>
  1875. </div>
  1876. </div>
  1877. <p title="-" v-else>-</p>
  1878. </a-col>
  1879. </a-row>
  1880. <a-row>
  1881. <a-col :xl="24" :md="24" class="flex-main">
  1882. <span class="ant-descriptions-item-label"> 性别:</span>
  1883. <div v-if="item">
  1884. {{ item.gender == 1 ? '女' : item.gender == 2 ? '男' : '不限' }}
  1885. </div>
  1886. <p title="-" v-else>-</p>
  1887. </a-col>
  1888. </a-row>
  1889. <a-row>
  1890. <a-col :xl="24" :md="24" class="flex-main">
  1891. <span class="ant-descriptions-item-label"> 最低版本:</span>
  1892. <div v-if="item">
  1893. {{
  1894. item.platformOs == 1
  1895. ? 'Android系统(' +
  1896. (item.androidOsv == 3 ? '不限)' : item.androidOsv + 'x+)')
  1897. : item.platformOs == 2
  1898. ? 'IOS系统(' + (item.iosOsv == 6 ? '不限)' : item.iosOsv + 'x+)')
  1899. : '不限'
  1900. }}
  1901. </div>
  1902. <p title="-" v-else>-</p>
  1903. </a-col>
  1904. </a-row>
  1905. <a-row>
  1906. <a-col :xl="24" :md="24" class="flex-main">
  1907. <span class="ant-descriptions-item-label"> 设备品牌:</span>
  1908. <div v-if="item">
  1909. <span
  1910. v-if="
  1911. item.deviceBrand == '' ||
  1912. item.deviceBrand == null ||
  1913. JSON.parse(item.deviceBrand).length == 0
  1914. "
  1915. >
  1916. 不限
  1917. </span>
  1918. <span v-else>
  1919. <span v-for="(items, index) in JSON.parse(item.deviceBrand)" :key="index">
  1920. {{ items | deviceBrand
  1921. }}{{ index == JSON.parse(item.deviceBrand).length - 1 ? '' : ',' }}
  1922. </span>
  1923. </span>
  1924. </div>
  1925. <p title="-" v-else>-</p>
  1926. </a-col>
  1927. </a-row>
  1928. <a-row>
  1929. <a-col :xl="24" :md="24" class="flex-main">
  1930. <span class="ant-descriptions-item-label"> 设备价格:</span>
  1931. <div v-if="item">
  1932. <span
  1933. v-if="
  1934. item.devicePrice == '' ||
  1935. item.devicePrice == null ||
  1936. JSON.parse(item.devicePrice).length == 0
  1937. "
  1938. >
  1939. 不限
  1940. </span>
  1941. <span v-else>
  1942. <span v-for="(items, index) in JSON.parse(item.devicePrice)" :key="index">
  1943. {{ items | kuaishouPrice
  1944. }}{{ index == JSON.parse(item.devicePrice).length - 1 ? '' : ',' }}
  1945. </span>
  1946. </span>
  1947. </div>
  1948. <p title="-" v-else>-</p>
  1949. </a-col>
  1950. </a-row>
  1951. <a-row>
  1952. <a-col :xl="24" :md="24" class="flex-main">
  1953. <span class="ant-descriptions-item-label"> 商业兴趣:</span>
  1954. <div>
  1955. <span
  1956. v-if="
  1957. item.businessInterest == '[]' ||
  1958. item.businessInterest == null ||
  1959. item.businessInterest == ''
  1960. "
  1961. >
  1962. 不限
  1963. </span>
  1964. <div v-else>
  1965. <span
  1966. v-for="(items, index) in JSON.parse(item.businessInterest)"
  1967. :key="index"
  1968. >
  1969. {{ items | business }}
  1970. {{ index == JSON.parse(item.businessInterest).length - 1 ? '' : ',' }}
  1971. </span>
  1972. </div>
  1973. </div>
  1974. </a-col>
  1975. </a-row>
  1976. <a-row>
  1977. <a-col :xl="24" :md="24" class="flex-main">
  1978. <span class="ant-descriptions-item-label"> 网红粉丝:</span>
  1979. <span v-if="item.fansStar == '[]' || item.fansStar == null || item.fansStar == ''">
  1980. 不限
  1981. </span>
  1982. <div v-else>
  1983. <span v-for="(items, index) in JSON.parse(item.fansStar)" :key="index">
  1984. {{ items | fansStarLabel }}
  1985. {{ index == JSON.parse(item.fansStar).length - 1 ? '' : ',' }}
  1986. </span>
  1987. </div>
  1988. </a-col>
  1989. </a-row>
  1990. <a-row v-if="item.platformOs == 1">
  1991. <a-col :xl="24" :md="24" class="flex-main">
  1992. <span class="ant-descriptions-item-label"> APP行为:</span>
  1993. <div v-if="item">
  1994. <span
  1995. v-if="
  1996. (item.appIds == '[]' || item.appIds == null || item.appIds == '') &&
  1997. (item.appInterest == '[]' ||
  1998. item.appInterest == null ||
  1999. item.appInterest == '')
  2000. "
  2001. >
  2002. 不限
  2003. </span>
  2004. <div v-else>
  2005. <span
  2006. v-if="item.appIds == '[]' || item.appIds == null || item.appIds == ''"
  2007. >
  2008. <span
  2009. v-for="(items, index) in JSON.parse(item.appInterest)"
  2010. :key="index"
  2011. >
  2012. {{ items | optionsApp
  2013. }}{{ index == JSON.parse(item.appInterest).length - 1 ? '' : ',' }}
  2014. </span>
  2015. </span>
  2016. <span v-else>
  2017. <span v-for="(items, index) in JSON.parse(item.appIds)" :key="index">
  2018. {{ items }}
  2019. </span>
  2020. </span>
  2021. </div>
  2022. </div>
  2023. <p title="-" v-else>-</p>
  2024. </a-col>
  2025. </a-row>
  2026. <a-row>
  2027. <a-col :xl="24" :md="24" class="flex-main">
  2028. <span class="ant-descriptions-item-label"> 兴趣视频用户:</span>
  2029. <div v-if="item">
  2030. <span
  2031. v-if="
  2032. item.interestVideo == '[]' ||
  2033. item.interestVideo == null ||
  2034. item.interestVideo == ''
  2035. "
  2036. >
  2037. 不限
  2038. </span>
  2039. <div v-else>
  2040. <span v-for="(items, index) in JSON.parse(item.interestVideo)" :key="index">
  2041. {{ items | interestVideo
  2042. }}{{ index == JSON.parse(item.interestVideo).length - 1 ? '' : ',' }}
  2043. </span>
  2044. </div>
  2045. </div>
  2046. <p title="-" v-else>-</p>
  2047. </a-col>
  2048. </a-row>
  2049. <a-row>
  2050. <a-col :xl="24" :md="24" class="flex-main">
  2051. <span class="ant-descriptions-item-label"> 网络环境:</span>
  2052. <div v-if="item">
  2053. {{ item.network == 1 ? 'Wi-Fi' : item.network == 2 ? '移动网络' : '不限' }}
  2054. </div>
  2055. <p title="-" v-else>-</p>
  2056. </a-col>
  2057. </a-row>
  2058. <a-row>
  2059. <a-col :xl="24" :md="24" class="flex-main">
  2060. <span class="ant-descriptions-item-label"> 过滤已转换用户:</span>
  2061. <div v-if="item">
  2062. {{ item.filterConvertedLevel | kuaishouFilterConvertedLevel }}
  2063. </div>
  2064. <p title="-" v-else>-</p>
  2065. </a-col>
  2066. </a-row>
  2067. <a-row>
  2068. <a-col :xl="24" :md="24" class="flex-main">
  2069. <span class="ant-descriptions-item-label"> 智能扩量:</span>
  2070. <div v-if="item">
  2071. {{ item.isOpen == 0 ? '关闭' : '开启' }}
  2072. </div>
  2073. <p title="-" v-else>-</p>
  2074. </a-col>
  2075. </a-row>
  2076. </div>
  2077. </a-card>
  2078. </div>
  2079. </a-checkbox-group>
  2080. <a-pagination
  2081. size="small"
  2082. :showTotal="ipagination.showTotal"
  2083. style="float: right"
  2084. v-if="personList.length > 0"
  2085. showQuickJumper
  2086. :pageSize.sync="ipagination.pageSize"
  2087. :total="ipagination.total"
  2088. v-model="ipagination.current"
  2089. @change="getDataSource"
  2090. />
  2091. <div
  2092. :style="{
  2093. position: 'absolute',
  2094. right: 0,
  2095. bottom: 0,
  2096. width: '100%',
  2097. borderTop: '1px solid #e9e9e9',
  2098. padding: '10px 16px',
  2099. background: '#fff',
  2100. textAlign: 'right',
  2101. zIndex: 1
  2102. }"
  2103. >
  2104. <a-button :style="{ marginRight: '8px' }" @click="closePerson"> 取消 </a-button>
  2105. <a-button type="primary" @click="submitPerson" :loading="personLoading"> 提交 </a-button>
  2106. </div>
  2107. </a-drawer>
  2108. <!-- 创意信息编辑 -->
  2109. <a-drawer
  2110. :width="800"
  2111. :visible="optimizeVisible"
  2112. :body-style="{ paddingBottom: '80px' }"
  2113. @close="closeCreative"
  2114. >
  2115. <!-- @close="closeUnit('createForm')" -->
  2116. <h2 slot="title" style="margin-bottom: 0">创意信息</h2>
  2117. <!-- class="create-info" -->
  2118. <a-form layout="horizontal" v-bind="formDrawerItemLayout" :form="formOriginality">
  2119. <a-row :gutter="16">
  2120. <a-col :span="16">
  2121. <a-form-item label="创意制作方式">
  2122. <a-radio-group
  2123. button-style="solid"
  2124. @change="unitTypeCheck"
  2125. v-decorator="[
  2126. 'unitType',
  2127. {
  2128. rules: [
  2129. {
  2130. required: true,
  2131. message: '创意制作方式必选'
  2132. }
  2133. ],
  2134. initialValue: 0
  2135. }
  2136. ]"
  2137. >
  2138. <a-radio-button :value="0">不限</a-radio-button>
  2139. <a-radio-button :value="4">自定义</a-radio-button>
  2140. <a-radio-button :value="7">程序化</a-radio-button>
  2141. </a-radio-group>
  2142. </a-form-item>
  2143. </a-col>
  2144. </a-row>
  2145. <a-row :gutter="16">
  2146. <a-col :span="16" style="width: 110%;margin-left: -11%;">
  2147. <a-form-item label="广告位置">
  2148. <checkBoxGroup
  2149. :options="[
  2150. { label: '优选广告位', value: 1 },
  2151. { label: '上下滑大屏广告', value: 6 },
  2152. { label: '视频播放页广告', value: 3 },
  2153. { label: '激励广告', value: 24 },
  2154. { label: '联盟广告', value: 5 }
  2155. ]"
  2156. v-decorator="[
  2157. 'sceneId',
  2158. {
  2159. rules: [
  2160. {
  2161. required: true,
  2162. message: '转化目标必选'
  2163. }
  2164. ],
  2165. initialValue: [1]
  2166. }
  2167. ]"
  2168. @change="changeData"
  2169. />
  2170. </a-form-item>
  2171. </a-col>
  2172. </a-row>
  2173. <a-row :gutter="16" v-if="getFormData('formOriginality', 'unitType') != 7">
  2174. <a-col :span="16">
  2175. <a-form-item label="自定义计划数量">
  2176. <a-input-number
  2177. style="width:200px"
  2178. :max="600"
  2179. :step="1"
  2180. :min="1"
  2181. v-decorator="[
  2182. 'customPlanCnt',
  2183. { initialValue: 5, rules: [{ required: true, message: '请填写自定义计划数量' }] }
  2184. ]"
  2185. @change="setImageCnt"
  2186. />
  2187. </a-form-item>
  2188. </a-col>
  2189. </a-row>
  2190. <a-row :gutter="16" v-if="getFormData('formOriginality', 'unitType') != 7">
  2191. <a-col :span="16">
  2192. <a-form-item label="自定义组数量">
  2193. <a-input-number
  2194. style="width:200px"
  2195. :max="unitCntMax"
  2196. :step="1"
  2197. :min="1"
  2198. v-decorator="[
  2199. 'customUnitCnt',
  2200. { initialValue: 120, rules: [{ required: true, message: '请填写自定义组数量' }] }
  2201. ]"
  2202. @change="setCreativeCntMax"
  2203. />
  2204. </a-form-item>
  2205. </a-col>
  2206. </a-row>
  2207. <a-row :gutter="16" v-if="getFormData('formOriginality', 'unitType') != 7">
  2208. <a-col :span="16">
  2209. <a-form-item label="自定义创意数量">
  2210. <a-input-number
  2211. style="width:200px"
  2212. :max="creativeCntMax"
  2213. :step="1"
  2214. :min="1"
  2215. v-decorator="[
  2216. 'imageCnt',
  2217. { initialValue: 5, rules: [{ required: true, message: '请填写自定义创意数量' }] }
  2218. ]"
  2219. />
  2220. </a-form-item>
  2221. </a-col>
  2222. </a-row>
  2223. <a-row :gutter="16" v-if="getFormData('formOriginality', 'unitType') != 4">
  2224. <a-col :span="16">
  2225. <a-form-item label="程序化计划数量">
  2226. <a-input-number
  2227. v-decorator="[
  2228. 'programPlanCnt',
  2229. { initialValue: 3, rules: [{ required: true, message: '请填写程序化计划数量' }] }
  2230. ]"
  2231. style="width:200px"
  2232. placeholder="仅支持输入自然数"
  2233. :max="300"
  2234. :precision="0"
  2235. :step="1"
  2236. @change="setProgramUnitCnt"
  2237. />
  2238. </a-form-item>
  2239. </a-col>
  2240. </a-row>
  2241. <a-row :gutter="16" v-if="getFormData('formOriginality', 'unitType') != 4">
  2242. <a-col :span="16">
  2243. <a-form-item label="程序化组数量">
  2244. <a-input-number
  2245. v-decorator="[
  2246. 'programUnitCnt',
  2247. { initialValue: 100, rules: [{ required: true, message: '请填写程序化组数量' }] }
  2248. ]"
  2249. style="width: 200px"
  2250. placeholder="仅支持输入自然数"
  2251. :max="imageCntMax"
  2252. :precision="0"
  2253. />
  2254. </a-form-item>
  2255. </a-col>
  2256. </a-row>
  2257. <a-row :gutter="16">
  2258. <a-col :span="16">
  2259. <a-form-item label="素材类型">
  2260. <a-radio-group
  2261. button-style="solid"
  2262. v-decorator="['channelType', { rules: [{ required: true }], initialValue: 2 }]"
  2263. >
  2264. <a-radio-button :value="2">不限</a-radio-button>
  2265. <a-radio-button :value="0">内部</a-radio-button>
  2266. <a-radio-button :value="1">素造</a-radio-button>
  2267. </a-radio-group>
  2268. </a-form-item>
  2269. </a-col>
  2270. </a-row>
  2271. <a-row :gutter="16">
  2272. <a-col :span="16">
  2273. <a-form-item label="素材挖掘">
  2274. <a-radio-group
  2275. button-style="solid"
  2276. v-decorator="['assetMining', { rules: [{ required: true }], initialValue: 1 }]"
  2277. >
  2278. <a-radio-button :value="1">开启</a-radio-button>
  2279. <a-radio-button :value="0">关闭</a-radio-button>
  2280. </a-radio-group>
  2281. </a-form-item>
  2282. </a-col>
  2283. </a-row>
  2284. <a-row :gutter="16">
  2285. <a-col :span="16">
  2286. <a-form-item label="智能抽帧">
  2287. <a-radio-group
  2288. button-style="solid"
  2289. v-decorator="['smartCover', { rules: [{ required: true }], initialValue: 1 }]"
  2290. >
  2291. <a-radio-button :value="1">开启</a-radio-button>
  2292. <a-radio-button :value="0">关闭</a-radio-button>
  2293. </a-radio-group>
  2294. </a-form-item>
  2295. </a-col>
  2296. </a-row>
  2297. <a-row :gutter="16">
  2298. <a-col :span="16">
  2299. <a-form-item label="行动号召">
  2300. <a-select
  2301. mode="multiple"
  2302. v-decorator="[
  2303. 'actionBarText',
  2304. { rules: [{ required: true, message: '请选择行动号召按钮文案' }] }
  2305. ]"
  2306. showSearch
  2307. allowClear
  2308. placeholder="选择行动号召按钮文案"
  2309. optionFilterProp="children"
  2310. :filterOption="filterOption"
  2311. >
  2312. <a-select-option
  2313. v-for="appModel in actionBarTextList"
  2314. :key="appModel.id"
  2315. :value="appModel.actionBarText"
  2316. >
  2317. {{ appModel.actionBarText }}
  2318. </a-select-option>
  2319. </a-select>
  2320. </a-form-item>
  2321. </a-col>
  2322. </a-row>
  2323. <a-row :gutter="16">
  2324. <a-col :span="16">
  2325. <a-form-item label="广告语">
  2326. <div style="max-height:200px;overflow-y:auto;border:1px solid #f2f2f2;padding:10px 0">
  2327. <div style="position:relative" v-for="(item, index) in descriptionList" :key="index">
  2328. <a-textarea
  2329. class="rending"
  2330. placeholder="请输入广告语"
  2331. @change="descriptionchange(item.value, index)"
  2332. v-model.trim="item.value"
  2333. :autosize="{ minRows: 2, maxRows: 6 }"
  2334. :max-length="30"
  2335. style=" width: 80%;"
  2336. ></a-textarea>
  2337. <p
  2338. style="
  2339. font-size: 12px;
  2340. color: #b6bbc7;
  2341. letter-spacing: 0.3px;
  2342. text-align: right;
  2343. line-height: 30px;
  2344. position: absolute;
  2345. bottom: 0;
  2346. left: 0;
  2347. width: 80%;
  2348. margin-bottom: 0;
  2349. "
  2350. >
  2351. {{ item.value.length }}/30
  2352. <!-- {{ getFormData('description').length }}/30 -->
  2353. </p>
  2354. <div style="position:absolute;right:0;top:-10px">
  2355. <a-icon type="plus" @click="addDescription()" style="margin-right:15px" />
  2356. <a-icon
  2357. type="minus"
  2358. @click="removeDescription(index)"
  2359. v-if="descriptionList.length > 1"
  2360. />
  2361. </div>
  2362. </div>
  2363. </div>
  2364. <div style="display:flex">
  2365. <a style="margin-right:10px" @click="selectDescription">选择广告语</a>
  2366. <a @click="importExcel">导入广告语</a>
  2367. </div>
  2368. </a-form-item>
  2369. </a-col>
  2370. </a-row>
  2371. <a-row :gutter="16">
  2372. <a-col :span="16">
  2373. <a-form-item label="创意分类">
  2374. <a-cascader
  2375. :options="createOptions"
  2376. v-decorator="[
  2377. 'creativeCategory',
  2378. {
  2379. initialValue: []
  2380. }
  2381. ]"
  2382. :fieldNames="fieldNames"
  2383. placeholder="请选择创意分类"
  2384. />
  2385. </a-form-item>
  2386. </a-col>
  2387. </a-row>
  2388. <a-row :gutter="16">
  2389. <a-col :span="16">
  2390. <a-form-item label="创意标签">
  2391. <a-select
  2392. mode="tags"
  2393. style="width: 100%"
  2394. placeholder="按回车生成标签"
  2395. v-decorator="[
  2396. 'creativeTag',
  2397. {
  2398. initialValue: [],
  2399. rules: [
  2400. {
  2401. validator: creativeTagValid
  2402. }
  2403. ]
  2404. }
  2405. ]"
  2406. dropdownClassName="display-none-selset"
  2407. :token-separators="[',', ' ', ',']"
  2408. >
  2409. </a-select>
  2410. </a-form-item>
  2411. </a-col>
  2412. </a-row>
  2413. </a-form>
  2414. <div
  2415. :style="{
  2416. position: 'absolute',
  2417. right: 0,
  2418. bottom: 0,
  2419. width: '100%',
  2420. borderTop: '1px solid #e9e9e9',
  2421. padding: '10px 16px',
  2422. background: '#fff',
  2423. textAlign: 'right',
  2424. zIndex: 1
  2425. }"
  2426. >
  2427. <a-button :style="{ marginRight: '8px' }" @click="closeCreative"> 取消 </a-button>
  2428. <a-button type="primary" @click="submitCreative"> 提交 </a-button>
  2429. </div>
  2430. </a-drawer>
  2431. <a-modal v-model="convert" title="选择转化目标">
  2432. <template slot="footer">
  2433. <a-button key="back" @click="convert = false">取消</a-button>
  2434. <a-button key="submit" type="primary" @click="convertOk">
  2435. 确定
  2436. </a-button>
  2437. </template>
  2438. <a-form-item
  2439. label="追踪方式"
  2440. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  2441. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  2442. >
  2443. <a-radio-group buttonStyle="solid" v-model="convertType" @change="convertChange">
  2444. <a-radio-button
  2445. value="1"
  2446. v-show="
  2447. getFormData('formProject', 'campaignType') == 4 ||
  2448. getFormData('formProject', 'campaignType') == 5
  2449. "
  2450. >JS布玛</a-radio-button
  2451. >
  2452. <a-radio-button
  2453. value="2"
  2454. v-show="
  2455. getFormData('formProject', 'campaignType') == 4 ||
  2456. getFormData('formProject', 'campaignType') == 5
  2457. "
  2458. >Xpath</a-radio-button
  2459. >
  2460. <a-radio-button value="3" v-show="getFormData('formProject', 'campaignType') == 2"
  2461. >应用-SDK
  2462. </a-radio-button>
  2463. <a-radio-button value="7" v-show="getFormData('formProject', 'campaignType') == 2"
  2464. >应用-API</a-radio-button
  2465. >
  2466. </a-radio-group>
  2467. </a-form-item>
  2468. <a-form-item
  2469. label="选择转化"
  2470. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  2471. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  2472. >
  2473. <a-select allowClear labelInValue style="width:100%" v-model="convertId" @focus="getConvertList">
  2474. <a-select-option :value="item.convert_id" v-for="item in convertList" :key="item.convert_id">
  2475. {{ item.convert_name }}</a-select-option
  2476. >
  2477. </a-select>
  2478. </a-form-item>
  2479. </a-modal>
  2480. <a-modal v-model="lookChannelVisible" :footer="null" :width="1000">
  2481. <a-table
  2482. :columns="TTcolumns"
  2483. :dataSource="lookChannelList"
  2484. :pagination="lookChannelIpagination"
  2485. :loading="lookChannelLoading"
  2486. bordered
  2487. size="middle"
  2488. style="word-break: break-all;font-size:16px;font-weight:600"
  2489. id="outTable"
  2490. ref="accountTable"
  2491. rowKey="id"
  2492. :scroll="{ x: 1500 }"
  2493. >
  2494. </a-table>
  2495. </a-modal>
  2496. <a-modal v-model="importExcelVisible" :footer="null" title="导入广告语">
  2497. <a-upload
  2498. name="file"
  2499. :multiple="false"
  2500. :headers="tokenHeader"
  2501. :file-list="fileList"
  2502. :showUploadList="false"
  2503. :beforeUpload="beforeUpload"
  2504. @change="handleChange"
  2505. style="margin-right: 20px"
  2506. class="require-class fileUpload"
  2507. id="fileUpload"
  2508. >
  2509. <a-button :disabled="loadDisabled">
  2510. <a-icon type="upload" />
  2511. {{ loadDisabled ? '上传中,请稍后' : '文件上传' }}
  2512. </a-button>
  2513. </a-upload>
  2514. </a-modal>
  2515. <a-modal v-model="selectDescriptionVisible" title="选择广告语">
  2516. <template slot="footer">
  2517. <a-button
  2518. key="back"
  2519. @click="
  2520. selectDescriptionVisible = false
  2521. selectDescriptionArr = []
  2522. "
  2523. >取消</a-button
  2524. >
  2525. <a-button key="submit" type="primary" @click="okDescription">
  2526. 确定
  2527. </a-button>
  2528. </template>
  2529. <a-checkbox-group v-model="selectDescriptionArr">
  2530. <a-list bordered :data-source="descriptionListCheck">
  2531. <a-list-item slot="renderItem" slot-scope="item, index">
  2532. <a-checkbox :value="item.textCopywriter">
  2533. {{ item.textCopywriter }}
  2534. </a-checkbox>
  2535. </a-list-item>
  2536. </a-list>
  2537. </a-checkbox-group>
  2538. </a-modal>
  2539. <templateModal ref="templateModal" @getData="getTargetPerson" />
  2540. </div>
  2541. </template>
  2542. <script>
  2543. import Vue from 'vue'
  2544. import { ACCESS_TOKEN } from '@/store/mutation-types'
  2545. import $ from 'jquery'
  2546. import Logo from '@/components/tools/Logo.vue'
  2547. import pick from 'lodash.pick'
  2548. import { mixin } from '@/utils/mixin.js'
  2549. import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
  2550. import moment from 'moment'
  2551. import selectCheckAll from '@/components/formComponents/toutiaoTime'
  2552. import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
  2553. import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
  2554. import selectTable from '@/views/modules/Statistics/components/selectPagination.vue'
  2555. import EditableCell from './components/editablCell'
  2556. import selectTreeAccount from '@/components/formComponents/selectAccount.vue'
  2557. import templateModal from './components/templateModal'
  2558. // import lookPreviewVue from './lookPreview.vue'
  2559. function tqFun(qcArr1) {
  2560. var tempArr = []
  2561. function bbFun(qcArr) {
  2562. for (var i = 0; i < qcArr.length; i++) {
  2563. if (qcArr[i] instanceof Array) {
  2564. bbFun(qcArr[i])
  2565. } else {
  2566. tempArr.push(qcArr[i])
  2567. }
  2568. }
  2569. return tempArr
  2570. }
  2571. return bbFun(qcArr1)
  2572. }
  2573. let optionsAppActive = []
  2574. let businessOptions = []
  2575. let fansStarOptions = []
  2576. let interestVideoOptions = []
  2577. let TTcolumns = [
  2578. {
  2579. title: '渠道号名称',
  2580. dataIndex: 'channelName',
  2581. scopedSlots: { customRender: 'channelName' },
  2582. align: 'center',
  2583. key: 'channelName'
  2584. },
  2585. {
  2586. title: '下载链接',
  2587. dataIndex: 'url',
  2588. scopedSlots: { customRender: 'url' },
  2589. align: 'center',
  2590. key: 'url',
  2591. width: 300
  2592. },
  2593. {
  2594. title: '调起链接',
  2595. dataIndex: 'schemaUri',
  2596. scopedSlots: { customRender: 'schemaUri' },
  2597. align: 'center',
  2598. key: 'schemaUri',
  2599. width: 300
  2600. },
  2601. {
  2602. title: '第三方点击监测链接',
  2603. dataIndex: 'clickTrackUrl',
  2604. scopedSlots: { customRender: 'clickTrackUrl' },
  2605. align: 'center',
  2606. key: 'clickTrackUrl',
  2607. width: 300
  2608. },
  2609. {
  2610. title: '第三方actionBar监测链接',
  2611. dataIndex: 'actionbarClickUrl',
  2612. scopedSlots: { customRender: 'actionbarClickUrl' },
  2613. align: 'center',
  2614. key: 'actionbarClickUrl',
  2615. width: 300
  2616. }
  2617. ]
  2618. export default {
  2619. name: 'GlobalHeader',
  2620. components: {
  2621. // UserMenu,
  2622. // SMenu,
  2623. Logo,
  2624. Treeselect,
  2625. selectCheckAll,
  2626. checkBoxGroup,
  2627. selectTable,
  2628. EditableCell,
  2629. selectTreeAccount,
  2630. templateModal
  2631. },
  2632. mixins: [mixin],
  2633. props: {
  2634. mode: {
  2635. type: String,
  2636. // sidemenu, topmenu
  2637. default: 'sidemenu'
  2638. },
  2639. theme: {
  2640. type: String,
  2641. required: false,
  2642. default: 'dark'
  2643. },
  2644. collapsed: {
  2645. type: Boolean,
  2646. required: false,
  2647. default: false
  2648. },
  2649. device: {
  2650. type: String,
  2651. required: false,
  2652. default: 'desktop'
  2653. }
  2654. },
  2655. data() {
  2656. return {
  2657. formProject: this.$form.createForm(this), //选择项目表单
  2658. formInformation: this.$form.createForm(this), //设置基本信息表单
  2659. formTargetApp: this.$form.createForm(this), //目标应用编辑表单
  2660. formOptimize: this.$form.createForm(this), //优化目标表单
  2661. formOriginality: this.$form.createForm(this), //创意表单
  2662. formMaterial: this.$form.createForm(this), //素材表单
  2663. sumbitLoading: false,
  2664. //基本信息参数
  2665. formInformationVisible: false,
  2666. formInformaData: null,
  2667. budgetType: '1',
  2668. dayBudgetType: '1',
  2669. projectId: null,
  2670. projectName: null,
  2671. accountId: null,
  2672. //目标应用参数
  2673. targetAppVisible: false,
  2674. appList: [], //分平台数据,从总数据中筛选,避免多次请求接口
  2675. appListAll: [], //所有的数据,做分平台的元数据
  2676. tongbuLoading: false, //同步app按钮loading
  2677. uriCheck: false, //调起链接,是否开启
  2678. multipleBidDataDrawer: [],
  2679. multipleBidData: [],
  2680. appDetail: null,
  2681. appDetailMiddle: null,
  2682. personLoading: false,
  2683. useChannel: false,
  2684. channelData: null,
  2685. convertId: null,
  2686. convertList: [],
  2687. convertType: '1',
  2688. convert: false,
  2689. TTcolumns,
  2690. lookChannelVisible: false,
  2691. lookChannelAppName: '',
  2692. lookChannelList: [],
  2693. lookChannelLoading: false,
  2694. lookChannelIpagination: {
  2695. current: 1,
  2696. pageSize: 10,
  2697. // pageSizeOptions: ['10', '20', '30'],
  2698. showTotal: (total, range) => {
  2699. return range[0] + '-' + range[1] + ' 共' + total + '条'
  2700. },
  2701. showQuickJumper: true,
  2702. showSizeChanger: false,
  2703. pageSizeOptions: ['10', '30', '50'],
  2704. total: 0,
  2705. onChange: (current, pageSize) => {
  2706. // 切换分页时的回调,
  2707. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  2708. this.lookChannelIpagination.current = current
  2709. this.lookChannelIpagination.pageSize = pageSize
  2710. this.lookChannel(this.lookChannelAppName)
  2711. }
  2712. },
  2713. //目标人群参数
  2714. targetPersonVisible: false,
  2715. personList: [],
  2716. checkPerson: [],
  2717. checkPersonAll: [],
  2718. checkPersonElse: [],
  2719. checkPersonOne: '',
  2720. showCheckPerson: [],
  2721. sumContent: 0,
  2722. searchTemplate: '',
  2723. ipagination: {
  2724. current: 1,
  2725. pageSize: 9,
  2726. // pageSizeOptions: ['10', '20', '30'],
  2727. showTotal: (total, range) => {
  2728. return range[0] + '-' + range[1] + ' 共' + total + '条'
  2729. },
  2730. showQuickJumper: true,
  2731. showSizeChanger: false,
  2732. pageSizeOptions: ['10', '30', '50'],
  2733. total: 0,
  2734. onChange: (current, pageSize) => {
  2735. // 切换分页时的回调,
  2736. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  2737. this.ipagination.current = current
  2738. this.ipagination.pageSize = pageSize
  2739. this.getTargetPerson()
  2740. }
  2741. },
  2742. //优化目标参数
  2743. groupTypeData: {},
  2744. //创意信息参数
  2745. optimizeVisible: false,
  2746. adposition: 1,
  2747. programUnitCnt: 60,
  2748. customUnitCnt: 400,
  2749. customUnitCntMax: 400,
  2750. imageCntMax: 300,
  2751. unitCntMax: 600,
  2752. creativeCntMax: 15,
  2753. actionBarTextList: [],
  2754. descriptionList: [{ value: '' }],
  2755. fieldNames: {
  2756. label: 'category_name',
  2757. value: 'category_id',
  2758. children: 'child'
  2759. },
  2760. createOptions: [],
  2761. showCreativeData: null,
  2762. importExcelVisible: false,
  2763. selectDescriptionVisible: false,
  2764. selectDescriptionArr: [],
  2765. descriptionListCheck: [],
  2766. tokenHeader: { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) },
  2767. fileList: [],
  2768. fileUrl: '',
  2769. loadDisabled: false,
  2770. dataFile: null,
  2771. //公共参数
  2772. activeStep: 0,
  2773. screenWidth: document.body.clientWidth,
  2774. headerBarFixed: false,
  2775. //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
  2776. topMenuStyle: {
  2777. headerIndexLeft: {},
  2778. topNavHeader: {},
  2779. headerIndexRight: {},
  2780. topSmenuStyle: {}
  2781. },
  2782. stepsArr: [
  2783. { title: '选择项目' },
  2784. // { title: '设置基本信息' },
  2785. { title: '优化目标' },
  2786. { title: '目标应用' },
  2787. { title: '目标人群' },
  2788. { title: '创意信息' },
  2789. { title: '素材信息' }
  2790. ],
  2791. formItemLayout: {
  2792. labelCol: { span: 4 },
  2793. wrapperCol: { span: 16 }
  2794. },
  2795. formDrawerItemLayout: {
  2796. labelCol: { span: 6 },
  2797. wrapperCol: { span: 18 }
  2798. },
  2799. tailFormItemLayout: {
  2800. wrapperCol: {
  2801. sm: {
  2802. span: 20,
  2803. offset: 4
  2804. }
  2805. }
  2806. },
  2807. tailFormItemLayoutElse: {
  2808. wrapperCol: {
  2809. sm: {
  2810. span: 20,
  2811. offset: 1
  2812. }
  2813. }
  2814. },
  2815. tailFormDrawerItemLayout: {
  2816. wrapperCol: {
  2817. sm: {
  2818. span: 18,
  2819. offset: 6
  2820. }
  2821. }
  2822. },
  2823. disabled: false
  2824. }
  2825. },
  2826. computed: {},
  2827. watch: {},
  2828. mounted() {
  2829. this.$nextTick(function() {
  2830. // this.accountId = 23212
  2831. this.getDataType('APP_INTEREST', 'optionsAppActive')
  2832. this.getDataType('BUSINESS_INTEREST', 'businessOptions')
  2833. this.getDataType('FANS_STAR', 'fansStarOptions')
  2834. this.getDataType('INTEREST_VIDEO', 'interestVideoOptions')
  2835. this.getActionBarText()
  2836. if (this.$route.query.id) {
  2837. this.getQueryById(this.$route.query.id)
  2838. }
  2839. window.addEventListener('scroll', this.onScroll)
  2840. const that = this
  2841. window.onresize = () => {
  2842. return (() => {
  2843. window.screenWidth = document.body.clientWidth
  2844. that.screenWidth = window.screenWidth
  2845. })()
  2846. }
  2847. })
  2848. },
  2849. filters: {
  2850. unitType(val) {
  2851. let data = {
  2852. 4: '自定义',
  2853. 7: '程序化',
  2854. 0: '不限'
  2855. }
  2856. return data[val]
  2857. },
  2858. channelType(val) {
  2859. let data = {
  2860. 0: '内部',
  2861. 1: '素造',
  2862. 2: '不限'
  2863. }
  2864. return data[val]
  2865. },
  2866. business(theme) {
  2867. let businessInterest = businessOptions.map(item => {
  2868. return {
  2869. tagId: item.tagId,
  2870. tagName: item.tagName
  2871. }
  2872. })
  2873. return businessInterest.filter(item => {
  2874. return item.tagId == theme
  2875. })[0].tagName
  2876. },
  2877. optionsApp(theme) {
  2878. let optionsAppdata = optionsAppActive.map(item => {
  2879. return {
  2880. tagId: item.tagId,
  2881. tagName: item.tagName
  2882. }
  2883. })
  2884. return optionsAppdata.filter(item => {
  2885. return item.tagId == theme
  2886. })[0].tagName
  2887. },
  2888. fansStarLabel(theme) {
  2889. let fansStarOptionsData = fansStarOptions.map(item => {
  2890. return {
  2891. tagId: item.tagId,
  2892. tagName: item.tagName
  2893. }
  2894. })
  2895. return fansStarOptionsData.filter(item => {
  2896. return item.tagId == theme
  2897. })[0].tagName
  2898. },
  2899. interestVideo(theme) {
  2900. let interestVideoOptionsData = interestVideoOptions.map(item => {
  2901. return {
  2902. tagId: item.tagId,
  2903. tagName: item.tagName
  2904. }
  2905. })
  2906. return interestVideoOptionsData.filter(item => {
  2907. return item.tagId == theme
  2908. })[0].tagName
  2909. }
  2910. },
  2911. methods: {
  2912. moment,
  2913. importExcel() {
  2914. this.importExcelVisible = true
  2915. },
  2916. selectDescription() {
  2917. this.selectDescriptionVisible = true
  2918. this.getDescriptionList()
  2919. },
  2920. okDescription() {
  2921. var data = this.selectDescriptionArr.map(item => {
  2922. return { value: item }
  2923. })
  2924. if (this.descriptionList[0].value == '') {
  2925. this.descriptionList = data
  2926. } else {
  2927. this.descriptionList.push(...data)
  2928. }
  2929. },
  2930. getDescriptionList() {
  2931. var params = {}
  2932. params.accountIds = JSON.stringify([this.getFormData('formProject', 'accountId')])
  2933. params.Keywords = null
  2934. params.pageNumber = 1
  2935. params.pageSize = 50
  2936. this.getAction('/document/library/getDocumentList', params).then(res => {
  2937. console.log(res)
  2938. })
  2939. },
  2940. beforeUpload(file) {
  2941. this.dataFile = $('.fileUpload').find('input')[0].files[0]
  2942. console.log(this.dataFile)
  2943. this.loadDisabled = true
  2944. },
  2945. handleChange() {
  2946. let formData = new FormData()
  2947. formData.append('file', this.dataFile)
  2948. this.postDataAction('/document/library/importAdLanguage', formData).then(res => {
  2949. this.loadDisabled = false
  2950. if (res.code === 200) {
  2951. // console.log(res)
  2952. var data = res.result.map(item => {
  2953. return { value: item }
  2954. })
  2955. if (this.descriptionList[0].value == '') {
  2956. this.descriptionList = data
  2957. } else {
  2958. this.descriptionList.push(...data)
  2959. }
  2960. this.importExcelVisible = false
  2961. } else {
  2962. this.$message.error(res.message)
  2963. }
  2964. })
  2965. },
  2966. convertOk() {
  2967. var dataLink = []
  2968. dataLink = this.convertList.filter(item => {
  2969. return item.convert_id == this.convertId.key
  2970. })
  2971. if (dataLink.length > 0) {
  2972. this.convert = false
  2973. } else {
  2974. this.convert = false
  2975. this.convertId = ''
  2976. }
  2977. },
  2978. getPlatForm(appId) {
  2979. if (appId) {
  2980. var data = this.appList.filter(item => {
  2981. return item.appId == appId.key
  2982. })
  2983. return data[0].platform
  2984. }
  2985. },
  2986. showConvert() {
  2987. this.convertChange()
  2988. if (this.getFormData('formProject', 'campaignType') == 2) {
  2989. if (this.getFormData('formTargetApp', 'appId')) {
  2990. this.convert = true
  2991. let appIdvalue = this.getFormData('formTargetApp', 'appId')
  2992. if (
  2993. this.getPlatForm(appIdvalue instanceof Array ? appIdvalue[0] : appIdvalue) == 1 ||
  2994. this.getPlatForm(appIdvalue instanceof Array ? appIdvalue[0] : appIdvalue) == 2
  2995. ) {
  2996. this.convertType = '3'
  2997. } else {
  2998. this.convertType = '7'
  2999. }
  3000. } else {
  3001. this.$message.error('请选择应用')
  3002. }
  3003. } else {
  3004. this.convert = true
  3005. this.convertType = '1'
  3006. }
  3007. this.getConvertList()
  3008. },
  3009. convertChange() {
  3010. this.convertId = ''
  3011. this.getConvertList()
  3012. },
  3013. getConvertList() {
  3014. var params = {}
  3015. params.accountId = this.getFormData('formProject', 'accountId')
  3016. params.type = this.convertType
  3017. this.getAction('/kuaishou/batch/getConvertList', params).then(res => {
  3018. //console.log(res)
  3019. if (res.success) {
  3020. this.convertList = res.result.map(item => {
  3021. return {
  3022. ...item,
  3023. convert_id: item.convert_id + ''
  3024. }
  3025. })
  3026. }
  3027. })
  3028. },
  3029. changeChannel(checked) {
  3030. if (checked) {
  3031. if (!!this.getFormData('formProject', 'accountId')) {
  3032. if (!!this.getFormData('formTargetApp', 'appId')) {
  3033. if (
  3034. this.getFormData('formTargetApp', 'singleAppid') == 0 &&
  3035. this.getFormData('formTargetApp', 'appId').length == 0
  3036. ) {
  3037. this.useChannel = false
  3038. this.$message.error('未选择应用不可开启')
  3039. return
  3040. }
  3041. var paramsData = {}
  3042. paramsData.appIdArray =
  3043. this.getFormData('formTargetApp', 'appId') instanceof Array
  3044. ? this.getFormData('formTargetApp', 'appId').map(item => {
  3045. return item.key
  3046. })
  3047. : [this.getFormData('formTargetApp', 'appId').key]
  3048. this.postDataAction('/kuaishou/kuaiShouAppList/getAppNames', paramsData).then(result => {
  3049. var params = {}
  3050. params.appNameArray = result.result.map(item => {
  3051. return item.appName
  3052. })
  3053. params.accountId = this.getFormData('formProject', 'accountId')
  3054. this.postDataAction('/channel/queryChannelLevel', params).then(res => {
  3055. console.log(res)
  3056. if (res.code === 200) {
  3057. if (res.result) {
  3058. this.channelData = res.result
  3059. } else {
  3060. this.useChannel = false
  3061. this.$message.error(res.message)
  3062. }
  3063. } else {
  3064. this.useChannel = false
  3065. this.$message.error('该账户不能使用渠道号')
  3066. }
  3067. })
  3068. })
  3069. } else {
  3070. this.useChannel = false
  3071. this.$message.error('未选择应用不可开启')
  3072. }
  3073. } else {
  3074. this.useChannel = false
  3075. this.$message.error('未选择账户不可开启')
  3076. }
  3077. } else {
  3078. this.channelData = null
  3079. }
  3080. },
  3081. test() {
  3082. // this.formProject.validateFields((err, values) => {
  3083. // console.log(values)
  3084. // })
  3085. // this.formInformation.validateFields((err, values) => {
  3086. // console.log(values)
  3087. // })
  3088. this.formOptimize.validateFields((err, values) => {
  3089. console.log(values)
  3090. })
  3091. // this.formMaterial.validateFields((err, values) => {
  3092. // console.log(values)
  3093. // })
  3094. // formProject: this.$form.createForm(this), //选择项目表单
  3095. // formInformation: this.$form.createForm(this), //设置基本信息表单
  3096. // formTargetApp: this.$form.createForm(this), //目标应用编辑表单
  3097. // formOptimize: this.$form.createForm(this), //优化目标表单
  3098. // formOriginality: this.$form.createForm(this), //创意表单
  3099. // formMaterial: this.$form.createForm(this), //素材表单
  3100. },
  3101. getQueryById(id) {
  3102. this.getAction('/auto/aiKuaishouAccountAutoStrategy/queryById', { id }).then(res => {
  3103. if (res.success) {
  3104. this.getActionBarText()
  3105. // this.getAction('/ctop/userAllocation/getAccountListByProjectId', {
  3106. // projectId: res.result.projectId
  3107. // }).then(res => {
  3108. // if (res.success) {
  3109. // }
  3110. // })
  3111. this.getAction('/kuaishou/batch/getCreativeCategory', {
  3112. accountId: res.result.accountId
  3113. }).then(result => {
  3114. if (result.success) {
  3115. //console.log(res)
  3116. this.createOptions = result.result
  3117. }
  3118. })
  3119. this.$nextTick(() => {
  3120. let data = res.result
  3121. this.formProject.setFieldsValue(pick(data, 'campaignType', 'accountId'))
  3122. this.formInformaData = {
  3123. budgetType: data.campaignDayBudget ? '2' : '1',
  3124. dayBudgetType: data.unitDayBudget ? '2' : '1',
  3125. campaignName: data.campaignName,
  3126. groupName: data.groupName,
  3127. campaignDayBudget: data.campaignDayBudget ? data.campaignDayBudget / 1000 : undefined,
  3128. unitDayBudget: data.unitDayBudget ? data.unitDayBudget / 1000 : undefined
  3129. }
  3130. if (data.campaignDayBudget && data.campaignDayBudget > 0) {
  3131. this.budgetType = '2'
  3132. data.campaignDayBudget = data.campaignDayBudget / 1000
  3133. setTimeout(() => {
  3134. this.formInformation.setFieldsValue(pick(data, 'campaignDayBudget'))
  3135. }, 100)
  3136. } else {
  3137. this.budgetType = '1'
  3138. }
  3139. if (data.unitDayBudget && data.unitDayBudget > 0) {
  3140. this.dayBudgetType = '2'
  3141. data.unitDayBudget = data.unitDayBudget / 1000
  3142. setTimeout(() => {
  3143. this.formInformation.setFieldsValue(pick(data, 'unitDayBudget'))
  3144. }, 100)
  3145. } else {
  3146. this.dayBudgetType = '1'
  3147. }
  3148. data.deepConversionType =
  3149. data.deepConversionType && data.deepConversionType != ''
  3150. ? data.deepConversionType
  3151. : undefined
  3152. data.deepConversionBid =
  3153. data.deepConversionBid && data.deepConversionBid != '' ? data.deepConversionBid : undefined
  3154. if (data.deepConversionType && data.deepConversionBid && data.deepConversionBid != '') {
  3155. if (res.result.deepConversionBid.includes('/')) {
  3156. let bidArr = res.result.deepConversionBid.split('/')
  3157. for (let index = 0; index < bidArr.length; index++) {
  3158. bidArr[index] = bidArr[index] / 1000
  3159. }
  3160. data.deepConversionBid = bidArr.join('/')
  3161. } else if (res.result.deepConversionBid.includes('-')) {
  3162. let bidArr = res.result.deepConversionBid.split('-')
  3163. for (let index = 0; index < bidArr.length; index++) {
  3164. bidArr[index] = bidArr[index] / 1000
  3165. }
  3166. data.deepConversionBid = bidArr.join('-')
  3167. } else {
  3168. data.deepConversionBid = res.result.deepConversionBid / 1000 + ''
  3169. }
  3170. } else {
  3171. data.deepConversionType = undefined
  3172. data.deepConversionBid = undefined
  3173. }
  3174. if (data.cpaBid.includes('/')) {
  3175. let bidArr = data.cpaBid.split('/')
  3176. for (let index = 0; index < bidArr.length; index++) {
  3177. bidArr[index] = bidArr[index] / 1000
  3178. }
  3179. data.cpaBid = bidArr.join('/')
  3180. } else if (data.cpaBid.includes('-')) {
  3181. let bidArr = data.cpaBid.split('-')
  3182. for (let index = 0; index < bidArr.length; index++) {
  3183. bidArr[index] = bidArr[index] / 1000
  3184. }
  3185. data.cpaBid = bidArr.join('-')
  3186. } else {
  3187. data.cpaBid = data.cpaBid / 1000 + ''
  3188. }
  3189. console.log(data.deepConversionBid, data.deepConversionType)
  3190. this.formOptimize.setFieldsValue(
  3191. pick(data, 'bidType', 'ocpxActionType', 'deepConversionType', 'cpaBid', 'deepConversionBid')
  3192. )
  3193. res.result.sourceMaterial = JSON.parse(res.result.sourceMaterial)
  3194. this.formMaterial.setFieldsValue(pick(data, 'sourceMaterial', 'matchType', 'materialKeyword'))
  3195. if (res.result.creativeCategory) {
  3196. // let arr=[];
  3197. if (res.result.creativeCategory > 10000) {
  3198. res.result.creativeCategory = res.result.creativeCategory
  3199. ? [
  3200. parseInt(res.result.creativeCategory / 10000),
  3201. parseInt(res.result.creativeCategory / 100),
  3202. res.result.creativeCategory
  3203. ]
  3204. : []
  3205. } else if (res.result.creativeCategory > 100) {
  3206. res.result.creativeCategory = res.result.creativeCategory
  3207. ? [parseInt(res.result.creativeCategory / 100), res.result.creativeCategory]
  3208. : []
  3209. } else {
  3210. res.result.creativeCategory = res.result.creativeCategory
  3211. ? [res.result.creativeCategory]
  3212. : []
  3213. }
  3214. }
  3215. res.result.creativeTag = res.result.creativeTag ? JSON.parse(res.result.creativeTag) : []
  3216. this.descriptionList =
  3217. res.result.description.charAt(0) === '['
  3218. ? eval(res.result.description).map(item => {
  3219. return { value: item }
  3220. })
  3221. : [{ value: res.result.description }]
  3222. res.result.sceneId = JSON.parse(res.result.sceneId)
  3223. data.actionBarText = data.actionBarText.split(',')
  3224. this.showCreativeData = pick(
  3225. data,
  3226. 'unitType',
  3227. 'sceneId',
  3228. 'imageCnt',
  3229. 'customPlanCnt',
  3230. 'customUnitCnt',
  3231. 'programPlanCnt',
  3232. 'programUnitCnt',
  3233. 'channelType',
  3234. 'assetMining',
  3235. 'smartCover',
  3236. 'actionBarText',
  3237. 'creativeCategory',
  3238. 'creativeTag'
  3239. )
  3240. // this.appDetail = { platformOs: data.platformOs, singleAppid: 1 }
  3241. this.postDataAction('/kuaishou/kuaiShouAppList/getAppNames', {
  3242. appIdArray: JSON.parse(data.appIdArray)
  3243. }).then(result => {
  3244. if (result.success) {
  3245. this.multipleBidData = result.result
  3246. this.appDetail = {
  3247. platformOs: result.result[0].platform < 3 ? 1 : 2,
  3248. singleAppid: 1,
  3249. appId: { key: result.result[0].appId },
  3250. schemaUri: res.result.schemaUri,
  3251. useChannel: this.useChannel
  3252. }
  3253. }
  3254. })
  3255. this.useChannel = res.result.useChannel ? (res.result.useChannel == 1 ? true : false) : false
  3256. if (this.useChannel) {
  3257. var paramsData = {}
  3258. paramsData.appIdArray = JSON.parse(data.appIdArray)
  3259. this.postDataAction('/kuaishou/kuaiShouAppList/getAppNames', paramsData).then(result => {
  3260. var params = {}
  3261. params.appNameArray = result.result.map(item => {
  3262. return item.appName
  3263. })
  3264. params.accountId = data.accountId
  3265. this.postDataAction('/channel/queryChannelLevel', params).then(res => {
  3266. if (res.code === 200) {
  3267. if (res.result) {
  3268. this.channelData = res.result
  3269. } else {
  3270. this.useChannel = false
  3271. this.$message.error(res.message)
  3272. }
  3273. } else {
  3274. this.useChannel = false
  3275. this.$message.error('该账户不能使用渠道号')
  3276. }
  3277. })
  3278. })
  3279. }
  3280. this.checkPerson = JSON.parse(data.autoTargetArray)
  3281. this.checkPersonElse = JSON.parse(data.autoTargetArray)
  3282. if (data.autoTargetArray) {
  3283. this.postDataAction('/auto/aiKuaishouAccountAutoTarget/getAutoTargetByIds', {
  3284. ids: this.checkPerson
  3285. }).then(res => {
  3286. if (res.success) {
  3287. this.showCheckPerson = res.result.map(item => {
  3288. return {
  3289. ...item,
  3290. regionName: []
  3291. }
  3292. })
  3293. for (let i = 0; i < this.showCheckPerson.length; i++) {
  3294. if (
  3295. this.showCheckPerson[i] &&
  3296. (this.showCheckPerson[i].region == '' ||
  3297. this.showCheckPerson[i].region == null ||
  3298. JSON.parse(this.showCheckPerson[i].region).length == 0)
  3299. ) {
  3300. } else {
  3301. // this.showRegion(this.personList[i].region, this.personList[i].regionName)
  3302. let that = this
  3303. new Promise((resolve, reject) => {
  3304. this.postDataAction('/kuaishou/batch/getRegionDetail', {
  3305. regionArr: that.showCheckPerson[i].region
  3306. }).then(res => {
  3307. if (res.success) {
  3308. // this.populationData.allForm.region = res.result
  3309. that.showCheckPerson[i].regionName = res.result.map(item => {
  3310. return item.label
  3311. })
  3312. }
  3313. })
  3314. })
  3315. }
  3316. }
  3317. }
  3318. })
  3319. }
  3320. })
  3321. }
  3322. })
  3323. },
  3324. handleSubmit() {
  3325. let formProjectData = new Promise((resolve, reject) => {
  3326. this.formProject.validateFields((err, values) => {
  3327. if (!err) {
  3328. resolve({ ...values })
  3329. } else {
  3330. reject('选择项目表单出错')
  3331. }
  3332. })
  3333. })
  3334. let formInformationData = new Promise((resolve, reject) => {
  3335. this.formInformation.validateFields((err, values) => {
  3336. if (!err) {
  3337. resolve({ ...values })
  3338. } else {
  3339. reject('基本信息出错')
  3340. }
  3341. })
  3342. })
  3343. let formOptimizeData = new Promise((resolve, reject) => {
  3344. this.formOptimize.validateFields((err, values) => {
  3345. console.log(values, err)
  3346. if (!err) {
  3347. resolve({ ...values })
  3348. } else {
  3349. reject('优化目标出错')
  3350. }
  3351. })
  3352. })
  3353. let formMaterialData = new Promise((resolve, reject) => {
  3354. this.formMaterial.validateFields((err, values) => {
  3355. if (!err) {
  3356. resolve({ ...values })
  3357. } else {
  3358. reject('出错')
  3359. }
  3360. })
  3361. })
  3362. this.getAction('/auto/aiKuaishouAccountAutoStrategy/checkStrategy', {
  3363. accountId: this.getFormData('formProject', 'accountId'),
  3364. type: 1
  3365. }).then(res => {
  3366. if (res.success) {
  3367. Promise.all([formProjectData, formInformationData, formOptimizeData, formMaterialData])
  3368. .then(res => {
  3369. if (
  3370. !this.showCreativeData ||
  3371. this.showCheckPerson.length === 0 ||
  3372. this.multipleBidData.length === 0
  3373. ) {
  3374. this.$message.error('请填写完整')
  3375. return
  3376. }
  3377. this.sumbitLoading = true
  3378. let params = {
  3379. ...res[0],
  3380. ...res[1],
  3381. ...res[2],
  3382. ...res[3],
  3383. ...this.showCreativeData,
  3384. ...this.formInformaData
  3385. }
  3386. if (this.budgetType === '2') {
  3387. params.campaignDayBudget = params.campaignDayBudget * 1000
  3388. } else {
  3389. params.campaignDayBudget = 0
  3390. }
  3391. if (this.dayBudgetType === '2') {
  3392. params.unitDayBudget = params.unitDayBudget * 1000
  3393. } else {
  3394. params.unitDayBudget = 0
  3395. }
  3396. if (params.cpaBid) {
  3397. if ((params.cpaBid + '').includes('/')) {
  3398. let bidArr = params.cpaBid.split('/')
  3399. for (let index = 0; index < bidArr.length; index++) {
  3400. bidArr[index] = bidArr[index] * 1000
  3401. }
  3402. params.cpaBid = bidArr.join('/')
  3403. } else if ((params.cpaBid + '').includes('-')) {
  3404. let bidArr = params.cpaBid.split('-')
  3405. for (let index = 0; index < bidArr.length; index++) {
  3406. bidArr[index] = bidArr[index] * 1000
  3407. }
  3408. params.cpaBid = bidArr.join('-')
  3409. } else {
  3410. params.cpaBid = params.cpaBid * 1000
  3411. }
  3412. } else {
  3413. params.cpaBid = 0
  3414. }
  3415. if (params.deepConversionBid && params.deepConversionBid != 0) {
  3416. if ((params.deepConversionBid + '').includes('/')) {
  3417. let bidArr = params.deepConversionBid.split('/')
  3418. for (let index = 0; index < bidArr.length; index++) {
  3419. bidArr[index] = bidArr[index] * 1000
  3420. }
  3421. params.deepConversionBid = bidArr.join('/')
  3422. } else if ((params.deepConversionBid + '').includes('-')) {
  3423. let bidArr = params.deepConversionBid.split('-')
  3424. for (let index = 0; index < bidArr.length; index++) {
  3425. bidArr[index] = bidArr[index] * 1000
  3426. }
  3427. params.deepConversionBid = bidArr.join('-')
  3428. } else {
  3429. params.deepConversionBid = params.deepConversionBid * 1000
  3430. }
  3431. } else {
  3432. params.deepConversionBid = 0
  3433. }
  3434. if (params.creativeCategory && params.creativeCategory.length > 0) {
  3435. params.creativeCategory = params.creativeCategory[params.creativeCategory.length - 1]
  3436. } else {
  3437. params.creativeCategory = undefined
  3438. }
  3439. params.creativeTag = params.creativeTag ? JSON.stringify(params.creativeTag) : undefined
  3440. params.appIdArray = JSON.stringify(
  3441. this.multipleBidData.map(res => {
  3442. return res.appId
  3443. })
  3444. )
  3445. params.autoTargetArray = this.showCheckPerson.map(item => {
  3446. return item.id
  3447. })
  3448. params.description = JSON.stringify(
  3449. this.descriptionList.map(item => {
  3450. return item.value
  3451. })
  3452. )
  3453. params.singleAppid = 1
  3454. params.actionBarText = params.actionBarText.join()
  3455. params.deepConversionType = params.deepConversionType ? params.deepConversionType : ''
  3456. params.deepConversionBid = params.deepConversionBid ? params.deepConversionBid : ''
  3457. params.usageLevel =
  3458. this.channelData && this.channelData ? this.channelData.channel.usageLevel : null
  3459. params.useChannel = this.appDetail.useChannel ? 1 : 0
  3460. params.sourceMaterial = JSON.stringify(params.sourceMaterial)
  3461. params.sceneId = JSON.stringify(params.sceneId)
  3462. params.autoTargetArray = JSON.stringify(params.autoTargetArray)
  3463. if (this.$route.query.id) {
  3464. params.id = this.$route.query.id
  3465. this.postDataAction('/auto/aiKuaishouAccountAutoStrategy/edit', params).then(res => {
  3466. if (res.success) {
  3467. this.sumbitLoading = false
  3468. window.close()
  3469. } else {
  3470. this.sumbitLoading = false
  3471. this.$message.error('创建失败')
  3472. }
  3473. })
  3474. } else {
  3475. this.postDataAction('/auto/aiKuaishouAccountAutoStrategy/add', params).then(res => {
  3476. if (res.success) {
  3477. this.sumbitLoading = false
  3478. window.close()
  3479. } else {
  3480. this.sumbitLoading = false
  3481. this.$message.error(res.message)
  3482. }
  3483. })
  3484. }
  3485. // this.getAction('/kuaishouProjectStrategy/checkProjectisOpen', { projectId: params.projectId }).then(
  3486. // res => {
  3487. // if (res.success) {
  3488. // if (res.result === 1) {
  3489. // } else {
  3490. // this.$message.error('此项目有开启的配置,无法新建配置')
  3491. // this.sumbitLoading = false
  3492. // }
  3493. // }
  3494. // }
  3495. // )
  3496. })
  3497. .catch(err => {
  3498. this.$message.error('请填写完整')
  3499. })
  3500. }else{
  3501. this.$message.error(res.message)
  3502. }
  3503. })
  3504. },
  3505. clearAllData() {
  3506. window.close()
  3507. },
  3508. descriptionchange(val, index) {
  3509. let data = val
  3510. this.$nextTick(() => {
  3511. this.descriptionList[index].value = data.replace(/\s/g, '')
  3512. })
  3513. },
  3514. addDescription() {
  3515. this.descriptionList.push({ value: '' })
  3516. },
  3517. removeDescription(index) {
  3518. this.descriptionList.splice(index, 1)
  3519. },
  3520. // 获取行动号召按钮
  3521. getActionBarText() {
  3522. this.actionBarTextList = []
  3523. let that = this
  3524. setTimeout(() => {
  3525. this.getAction('/kuaishou/batch/getActionBarTextByType', {
  3526. type: '2'
  3527. }).then(res => {
  3528. if (res.success) {
  3529. that.actionBarTextList = res.result
  3530. }
  3531. })
  3532. })
  3533. },
  3534. closeCreative() {
  3535. this.optimizeVisible = false
  3536. this.customUnitCntMax = 400
  3537. this.imageCntMax = 300
  3538. this.unitCntMax = 600
  3539. this.creativeCntMax = 15
  3540. this.formOriginality.resetFields()
  3541. },
  3542. submitCreative() {
  3543. this.formOriginality.validateFields((err, values) => {
  3544. if (!err) {
  3545. let isNotComplete = this.descriptionList.findIndex(item => {
  3546. return item.value === ''
  3547. })
  3548. if (isNotComplete > -1) {
  3549. this.$message.error('请正确填写必填项目,广告语未填')
  3550. return
  3551. }
  3552. this.showCreativeData = JSON.parse(JSON.stringify(values))
  3553. console.log(values, this.showCreativeData)
  3554. this.optimizeVisible = false
  3555. // this.closeCreative()
  3556. }
  3557. })
  3558. },
  3559. changeData(data) {
  3560. if (data.length > 1 && data.findIndex(item => item == 1) == 0) {
  3561. data.splice(
  3562. data.findIndex(item => item == 1),
  3563. 1
  3564. )
  3565. } else if (data.length > 1 && data.findIndex(item => item == 1) == data.length - 1) {
  3566. data.splice(0, data.length - 1)
  3567. } else if (data.length == 0) {
  3568. data.push(1)
  3569. } else if (data.length > 1 && data.findIndex(item => item == 5) == 0) {
  3570. data.splice(
  3571. data.findIndex(item => item == 5),
  3572. 1
  3573. )
  3574. } else if (data.length > 1 && data.findIndex(item => item == 5) == data.length - 1) {
  3575. data.splice(0, data.length - 1)
  3576. }
  3577. },
  3578. unitTypeCheck(e) {
  3579. // console.log(e.target.value)
  3580. if (e.target.value === 7) {
  3581. this.imageCntMax = 300
  3582. } else {
  3583. this.unitCntMax = 600
  3584. this.creativeCntMax = 15
  3585. }
  3586. },
  3587. setImageCnt(e) {
  3588. this.unitCntMax = e ? Math.floor(600 / e) : 600
  3589. this.creativeCntMax = e
  3590. ? Math.floor(2000 / (e * this.getFormData('formOriginality', 'customUnitCnt'))) > 15
  3591. ? 15
  3592. : Math.floor(2000 / (e * this.getFormData('formOriginality', 'customUnitCnt')))
  3593. : 15
  3594. },
  3595. setCreativeCntMax(e) {
  3596. // v-if="getFormData('formOriginality', 'unitType') != 7"
  3597. this.creativeCntMax = e
  3598. ? Math.floor(2000 / (e * this.getFormData('formOriginality', 'customPlanCnt'))) > 15
  3599. ? 15
  3600. : Math.floor(2000 / (e * this.getFormData('formOriginality', 'customPlanCnt')))
  3601. : 15
  3602. },
  3603. setProgramUnitCnt(e) {
  3604. this.imageCntMax = e ? Math.floor(300 / e) : 300
  3605. },
  3606. creativeTagValid(rule, value, callback) {
  3607. //console.log(rule, value, callback)
  3608. if (value.length == 0 || value == undefined) {
  3609. // //console.log(1)
  3610. callback()
  3611. } else if (value.length > 10) {
  3612. callback('创意标签最多填写10个,请删减')
  3613. } else {
  3614. // //console.log(2)
  3615. callback()
  3616. }
  3617. },
  3618. cpaBidValid(rule, value, callback) {
  3619. let z = /-/g
  3620. let a = /\//g
  3621. let d = /\./g
  3622. if (value === '' || value === undefined || value === 0 || value === '0') {
  3623. callback('出价必须填写')
  3624. } else if (value.startsWith('.') || value.endsWith('.')) {
  3625. callback('请填写正确出价')
  3626. } else if (value.startsWith('-') || value.endsWith('-')) {
  3627. callback('请填写正确出价')
  3628. } else if (value.match(a) && value.match(z)) {
  3629. callback('不允许出现除"-"和"/"之外的所有字符,并且二者不可同时出现')
  3630. } else if (value.match(/[^0-9+-\/]/g)) {
  3631. callback('请填写正确出价')
  3632. } else {
  3633. callback()
  3634. }
  3635. },
  3636. deepBidValid(rule, value, callback) {
  3637. let z = /-/g
  3638. let a = /\//g
  3639. let d = /\./g
  3640. if (value === '' || value === undefined || value == 0 || value == '0') {
  3641. callback()
  3642. } else if (value.startsWith('.') || value.endsWith('.')) {
  3643. callback('请填写正确出价')
  3644. } else if (value.startsWith('-') || value.endsWith('-')) {
  3645. callback('请填写正确出价')
  3646. } else if (value.match(a) && value.match(z)) {
  3647. callback('不允许出现除"-"和"/"之外的所有字符,并且二者不可同时出现')
  3648. } else if (value.match(/[^0-9+-\/]/g)) {
  3649. callback('请填写正确出价')
  3650. } else {
  3651. callback()
  3652. }
  3653. },
  3654. getDataType(type, dataList) {
  3655. this.getAction('/kuaishou/batch/getTargetList', { tagType: type }).then(res => {
  3656. if (res.success) {
  3657. if (dataList === 'businessOptions') {
  3658. businessOptions = res.result
  3659. } else if (dataList === 'optionsAppActive') {
  3660. optionsAppActive = res.result
  3661. } else if (dataList === 'fansStarOptions') {
  3662. fansStarOptions = res.result
  3663. } else if (dataList === 'interestVideoOptions') {
  3664. interestVideoOptions = res.result
  3665. }
  3666. }
  3667. })
  3668. },
  3669. setData(data) {
  3670. this.checkPersonOne = data
  3671. },
  3672. setVideoData(data) {
  3673. // checkPerson: [],
  3674. // checkPersonAll: [],
  3675. if (data.findIndex(item => item === this.checkPersonOne) > -1) {
  3676. this.checkPersonElse.push(...data)
  3677. this.checkPersonElse = [...new Set(this.checkPersonElse)]
  3678. } else {
  3679. data.findIndex(item => item === this.checkPersonOne) > -1
  3680. this.checkPersonElse.splice(
  3681. this.checkPersonElse.findIndex(item => item === this.checkPersonOne),
  3682. 1
  3683. )
  3684. }
  3685. // for (let i = 0; i < this.ipagination.current; i++) {
  3686. // this.checkPersonAll.push([])
  3687. // }
  3688. // this.checkPersonAll[this.ipagination.current - 1] = data
  3689. // var sum = 0
  3690. // for (let i = 0; i < this.checkPersonAll.length; i++) {
  3691. // sum += this.checkPersonAll[i].length
  3692. // }
  3693. this.sumContent = this.checkPersonElse.length
  3694. var dataCount = 20
  3695. if (this.sumContent > dataCount) {
  3696. this.$message.error('最多选择' + dataCount + '个定向')
  3697. this.checkPerson.pop()
  3698. this.checkPersonElse.splice(
  3699. this.checkPersonElse.findIndex(item => item === this.checkPersonOne),
  3700. 1
  3701. )
  3702. this.sumContent--
  3703. // this.checkPersonAll[this.ipagination.current - 1] = this.checkPerson
  3704. }
  3705. },
  3706. cancel() {},
  3707. removeVideoMaterial(index, id) {
  3708. this.showCheckPerson.splice(index, 1)
  3709. let indexElse = this.checkPerson.findIndex(item => {
  3710. item == id
  3711. })
  3712. this.checkPerson.splice(indexElse, 1)
  3713. // id
  3714. this.checkPersonElse.splice(
  3715. this.checkPersonElse.findIndex(item => {
  3716. item == id
  3717. }),
  3718. 1
  3719. )
  3720. // for (let i = 0; i < this.checkPersonAll.length; i++) {
  3721. // if (this.checkPersonAll[i].length > 0) {
  3722. // for (let j = 0; j < this.checkPersonAll[i].length; j++) {
  3723. // if (this.checkPersonAll[i][j] == id) {
  3724. // this.checkPersonAll[i].splice(j, 1)
  3725. // }
  3726. // }
  3727. // }
  3728. // }
  3729. // this.materialList[index].photoArr.splice(indexMaterial, 1)
  3730. },
  3731. getDataSource(current, pageSize) {
  3732. // 切换分页时的回调,
  3733. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  3734. this.ipagination.current = current
  3735. this.ipagination.pageSize = pageSize
  3736. // this.checkPerson = this.checkPersonAll[current - 1]
  3737. this.checkPerson = this.checkPersonElse
  3738. this.getTargetPerson()
  3739. },
  3740. disabledDate(current) {
  3741. // Can not select days before today and today
  3742. return current && current < moment().subtract(1, 'days')
  3743. },
  3744. disabledDateOne(current) {
  3745. // Can not select days before today and today
  3746. return current && current < moment().subtract(0, 'days')
  3747. },
  3748. filterOption(input, option) {
  3749. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  3750. },
  3751. //目标应用编辑
  3752. targetAppEdit() {
  3753. this.targetAppVisible = true
  3754. if (this.appDetail) {
  3755. if (this.appDetail.schemaUri) {
  3756. this.uriCheck = true
  3757. }
  3758. this.appDetailMiddle = JSON.parse(JSON.stringify(this.appDetail))
  3759. this.$nextTick(() => {
  3760. this.formTargetApp.setFieldsValue({ ...this.appDetailMiddle })
  3761. this.multipleBidDataDrawer = JSON.parse(JSON.stringify(this.multipleBidData))
  3762. })
  3763. }
  3764. this.getAppList()
  3765. },
  3766. submitApp() {
  3767. this.formTargetApp.validateFields((err, values) => {
  3768. //console.log(values)
  3769. if (!err) {
  3770. this.appDetailMiddle = JSON.parse(JSON.stringify({ ...values, useChannel: this.useChannel }))
  3771. this.appDetail = JSON.parse(JSON.stringify(this.appDetailMiddle))
  3772. this.multipleBidData = JSON.parse(JSON.stringify(this.multipleBidDataDrawer))
  3773. this.targetAppVisible = false
  3774. this.multipleBidDataDrawer = []
  3775. this.closeUnit()
  3776. } else {
  3777. }
  3778. })
  3779. },
  3780. closeUnit(form) {
  3781. this.uriCheck = false
  3782. this.targetAppVisible = false
  3783. this.multipleBidDataDrawer = []
  3784. this.appDetailMiddle = null
  3785. this.useChannel = false
  3786. // this.channelData = null
  3787. this.convertId = null
  3788. this.formTargetApp.resetFields()
  3789. },
  3790. formInfoShow() {
  3791. this.$nextTick(() => {
  3792. console.log(this.formInformaData)
  3793. if (this.formInformaData) {
  3794. this.formInformationVisible = true
  3795. this.budgetType = this.formInformaData.budgetType
  3796. this.dayBudgetType = this.formInformaData.dayBudgetType
  3797. setTimeout(() => {
  3798. this.formInformation.setFieldsValue(pick(this.formInformaData, 'campaignName', 'groupName'))
  3799. }, 100)
  3800. if (this.budgetType == '2') {
  3801. setTimeout(() => {
  3802. this.formInformation.setFieldsValue(pick(this.formInformaData, 'campaignDayBudget'))
  3803. }, 100)
  3804. }
  3805. if (this.dayBudgetType == '2') {
  3806. setTimeout(() => {
  3807. this.formInformation.setFieldsValue(pick(this.formInformaData, 'unitDayBudget'))
  3808. }, 100)
  3809. }
  3810. } else {
  3811. this.formInformationVisible = true
  3812. }
  3813. })
  3814. },
  3815. closeFormInfo() {
  3816. this.formInformationVisible = false
  3817. this.budgetType = '1'
  3818. this.dayBudgetType = '1'
  3819. this.formInformation.resetFields()
  3820. },
  3821. submitFormInfo() {
  3822. this.formInformation.validateFields((err, values) => {
  3823. if (!err) {
  3824. var data = { ...values, budgetType: this.budgetType, dayBudgetType: this.dayBudgetType }
  3825. this.formInformaData = JSON.parse(JSON.stringify(data))
  3826. this.formInformationVisible = false
  3827. }
  3828. })
  3829. },
  3830. appIdChange(val) {
  3831. // this.siteList = []
  3832. // this.getPageList(val)
  3833. this.multipleBidDataDrawer = []
  3834. if (this.getFormData('formTargetApp', 'singleAppid') == 0) {
  3835. if (val && val.findIndex(item => item.key === 0) > -1) {
  3836. let appidArr = this.appList.map(item => {
  3837. return {
  3838. key: item.appId,
  3839. label:
  3840. `${
  3841. item.platform === 1
  3842. ? 'Android应用下载'
  3843. : item.platform === 2
  3844. ? 'Android网页游戏'
  3845. : item.platform === 3
  3846. ? 'iOS应用下载'
  3847. : 'iOS网页游戏'
  3848. }` +
  3849. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  3850. item.appName +
  3851. '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
  3852. item.appVersion
  3853. }
  3854. })
  3855. this.$nextTick(() => {
  3856. this.formTargetApp.setFieldsValue({
  3857. appId: appidArr
  3858. })
  3859. this.postDataAction('/kuaishou/kuaiShouAppList/getAppNames', {
  3860. appIdArray: appidArr.map(item => {
  3861. return item.key
  3862. })
  3863. }).then(res => {
  3864. if (res.success) {
  3865. this.multipleBidDataDrawer = res.result
  3866. }
  3867. })
  3868. })
  3869. // this.$nextTick(() => {
  3870. // this.formTargetApp.setFieldsValue({
  3871. // appId: appidArr
  3872. // })
  3873. // this.multipleBidDataDrawer = appidArr.map(item => {
  3874. // return {
  3875. // ...item,
  3876. // cpaBid: null,
  3877. // trackUrl: '',
  3878. // channelCode: '',
  3879. // appId: item.key,
  3880. // deepConversionBid: null
  3881. // }
  3882. // })
  3883. // })
  3884. } else {
  3885. this.$nextTick(() => {
  3886. // this.multipleBidDataDrawer = this.appList.filter(item => {
  3887. // return item.id === val.key
  3888. // })
  3889. this.postDataAction('/kuaishou/kuaiShouAppList/getAppNames', {
  3890. appIdArray: val.map(item => {
  3891. return item.key
  3892. })
  3893. }).then(res => {
  3894. if (res.success) {
  3895. this.multipleBidDataDrawer = res.result
  3896. }
  3897. })
  3898. })
  3899. }
  3900. if (this.multipleBidDataDrawer.length == 0) {
  3901. this.useChannel = false
  3902. this.channelData = null
  3903. }
  3904. } else {
  3905. if (val) {
  3906. this.$nextTick(() => {
  3907. // this.multipleBidDataDrawer = this.appList.filter(item => {
  3908. // return item.id === val.key
  3909. // })
  3910. this.postDataAction('/kuaishou/kuaiShouAppList/getAppNames', { appIdArray: [val.key] }).then(
  3911. res => {
  3912. if (res.success) {
  3913. this.multipleBidDataDrawer = res.result
  3914. }
  3915. }
  3916. )
  3917. })
  3918. } else {
  3919. this.multipleBidDataDrawer = []
  3920. this.useChannel = false
  3921. this.channelData = null
  3922. }
  3923. }
  3924. },
  3925. lookChannel(appName) {
  3926. this.lookChannelVisible = true
  3927. this.lookChannelLoading = true
  3928. this.lookChannelAppName = appName
  3929. var params = {}
  3930. params.accountId = this.getFormData('formProject', 'accountId')
  3931. params.appName = appName
  3932. params.pageNo = this.lookChannelIpagination.current
  3933. params.pageSize = this.lookChannelIpagination.pageSize
  3934. this.getAction('/channel/queryChannelList', params).then(res => {
  3935. this.lookChannelLoading = false
  3936. if (res.success) {
  3937. this.lookChannelList = res.result.list || []
  3938. this.lookChannelIpagination.total = res.result.total || 0
  3939. }
  3940. })
  3941. },
  3942. onCellChange(key, dataIndex, value) {
  3943. const dataSource = [...this.multipleBidDataDrawer]
  3944. const target = dataSource.find(item => item.id === key)
  3945. if (target) {
  3946. target[dataIndex] = value
  3947. this.multipleBidDataDrawer = dataSource
  3948. let params = { id: key }
  3949. if (dataIndex == 'impressionUrl') {
  3950. params.impressionUrl = value
  3951. } else if (dataIndex == 'tracUrl') {
  3952. params.tracUrl = value
  3953. }
  3954. this.postDataAction('/kuaishouAppPackage/edit', params).then(res => {
  3955. if (res.success) {
  3956. console.log(res)
  3957. }
  3958. })
  3959. }
  3960. },
  3961. addApplication() {},
  3962. changeType(e) {
  3963. console.log(e.target.value)
  3964. this.appList = []
  3965. if (e.target.value === 1) {
  3966. this.appList = this.appListAll.filter(item => {
  3967. return item.platform == 1 || item.platform == 2
  3968. })
  3969. this.formTargetApp.setFieldsValue({ appId: undefined })
  3970. this.multipleBidDataDrawer = []
  3971. } else if (e.target.value === 2) {
  3972. this.appList = this.appListAll.filter(item => {
  3973. return item.platform == 3 || item.platform == 4
  3974. })
  3975. this.formTargetApp.setFieldsValue({ appId: undefined })
  3976. this.multipleBidDataDrawer = []
  3977. }
  3978. },
  3979. getAppList() {
  3980. let params = {}
  3981. params.accountId = this.getFormData('formProject', 'accountId')
  3982. this.getAction('/kuaishou/batch/getAppList', params).then(res => {
  3983. if (res.success) {
  3984. this.appListAll = res.result.map((item, index) => {
  3985. return {
  3986. ...item,
  3987. key: item.id
  3988. }
  3989. })
  3990. if (this.getFormData('formTargetApp', 'platformOs') === 1) {
  3991. this.appList = this.appListAll.filter(item => {
  3992. return item.platform == 1 || item.platform == 2
  3993. })
  3994. } else if (this.getFormData('formTargetApp', 'platformOs') === 2) {
  3995. this.appList = this.appListAll.filter(item => {
  3996. return item.platform == 3 || item.platform == 4
  3997. })
  3998. }
  3999. }
  4000. })
  4001. },
  4002. //目标人群选择
  4003. targetPersonCheck() {
  4004. // this.checkPerson = this.checkPersonAll[0]
  4005. this.checkPersonElse = this.showCheckPerson.map(item => {
  4006. return item.id
  4007. })
  4008. this.checkPerson = this.checkPersonElse
  4009. this.ipagination.current = 1
  4010. this.sumContent = this.showCheckPerson.length
  4011. this.targetPersonVisible = true
  4012. this.searchTemplate = ''
  4013. this.getTargetPerson()
  4014. },
  4015. submitPerson() {
  4016. // var dataAll = tqFun(this.checkPersonAll)
  4017. let dataAll = this.checkPersonElse
  4018. this.checkPerson = dataAll
  4019. this.personLoading = true
  4020. if (this.checkPerson.length > 0) {
  4021. this.postDataAction('/auto/aiKuaishouAccountAutoTarget/getAutoTargetByIds', {
  4022. ids: this.checkPerson
  4023. }).then(res => {
  4024. this.personLoading = false
  4025. if (res.success) {
  4026. this.showCheckPerson = res.result.map(item => {
  4027. return {
  4028. ...item,
  4029. regionName: []
  4030. }
  4031. })
  4032. for (let i = 0; i < this.showCheckPerson.length; i++) {
  4033. if (
  4034. this.showCheckPerson[i] &&
  4035. (this.showCheckPerson[i].region == '' ||
  4036. this.showCheckPerson[i].region == null ||
  4037. JSON.parse(this.showCheckPerson[i].region).length == 0)
  4038. ) {
  4039. } else {
  4040. // this.showRegion(this.personList[i].region, this.personList[i].regionName)
  4041. let that = this
  4042. new Promise((resolve, reject) => {
  4043. this.postDataAction('/kuaishou/batch/getRegionDetail', {
  4044. regionArr: that.showCheckPerson[i].region
  4045. }).then(res => {
  4046. if (res.success) {
  4047. // this.populationData.allForm.region = res.result
  4048. that.showCheckPerson[i].regionName = res.result.map(item => {
  4049. return item.label
  4050. })
  4051. }
  4052. })
  4053. })
  4054. }
  4055. }
  4056. this.targetPersonVisible = false
  4057. }
  4058. })
  4059. } else if (this.checkPerson.length > 20) {
  4060. this.personLoading = false
  4061. this.$message.error('最多选择20个定向包')
  4062. } else {
  4063. this.personLoading = false
  4064. this.$message.error('请选择定向包')
  4065. }
  4066. },
  4067. closePerson(form) {
  4068. this.targetPersonVisible = false
  4069. this.sumContent = 0
  4070. if (this.showCheckPerson.lenght > 0) {
  4071. } else {
  4072. this.checkPersonAll = []
  4073. this.checkPersonElse = []
  4074. }
  4075. this.checkPerson = []
  4076. },
  4077. editNewTemplate(item) {
  4078. var params = { ...item }
  4079. params.accountId = this.getFormData('formProject', 'accountId')
  4080. this.$refs.templateModal.handleOk(params, 'edit')
  4081. },
  4082. deleteNewTemplate(id) {
  4083. var params = {}
  4084. params.ids = id
  4085. this.getAction('/auto/aiKuaishouAccountAutoTarget/deleteBatch', params).then(res => {
  4086. if (res.success) {
  4087. this.getTargetPerson()
  4088. } else {
  4089. this.$message.error(res.messsage)
  4090. }
  4091. })
  4092. },
  4093. addNewTemplate() {
  4094. this.$refs.templateModal.create(this.getFormData('formProject', 'accountId'), 'add')
  4095. },
  4096. getTargetPerson() {
  4097. let params = {}
  4098. params.pageSize = this.ipagination.pageSize
  4099. params.pageNo = this.ipagination.current
  4100. params.accountId = this.getFormData('formProject', 'accountId')
  4101. params.targetName = this.searchTemplate == '' ? null : this.searchTemplate
  4102. this.getAction('/auto/aiKuaishouAccountAutoTarget/list', params).then(res => {
  4103. if (res.success) {
  4104. this.personList = res.result.list.map(item => {
  4105. return {
  4106. ...item,
  4107. regionName: []
  4108. }
  4109. })
  4110. for (let i = 0; i < this.personList.length; i++) {
  4111. if (
  4112. this.personList[i] &&
  4113. (this.personList[i].region == '' ||
  4114. this.personList[i].region == null ||
  4115. JSON.parse(this.personList[i].region).length == 0)
  4116. ) {
  4117. } else {
  4118. // this.showRegion(this.personList[i].region, this.personList[i].regionName)
  4119. let that = this
  4120. new Promise((resolve, reject) => {
  4121. this.postDataAction('/kuaishou/batch/getRegionDetail', {
  4122. regionArr: that.personList[i].region
  4123. }).then(res => {
  4124. if (res.success) {
  4125. // this.populationData.allForm.region = res.result
  4126. that.personList[i].regionName = res.result.map(item => {
  4127. return item.label
  4128. })
  4129. }
  4130. })
  4131. })
  4132. }
  4133. }
  4134. this.ipagination.total = res.result.total
  4135. }
  4136. })
  4137. },
  4138. showRegion(data, name) {
  4139. return new Promise((resolve, reject) => {
  4140. this.postDataAction('/kuaishou/batch/getRegionDetail', {
  4141. regionArr: data
  4142. }).then(res => {
  4143. if (res.success) {
  4144. // this.populationData.allForm.region = res.result
  4145. name = res.result.map(item => {
  4146. return item.label
  4147. })
  4148. }
  4149. })
  4150. })
  4151. },
  4152. //创意信息
  4153. originalityEdit() {
  4154. this.optimizeVisible = true
  4155. this.getActionBarText()
  4156. this.getAction('/kuaishou/batch/getCreativeCategory', {
  4157. accountId: this.getFormData('formProject', 'accountId')
  4158. }).then(result => {
  4159. if (result.success) {
  4160. //console.log(res)
  4161. this.createOptions = result.result
  4162. }
  4163. })
  4164. this.$nextTick(() => {
  4165. if (this.showCreativeData) {
  4166. if (this.showCreativeData.unitType === 7) {
  4167. this.imageCntMax = 8
  4168. } else {
  4169. this.imageCntMax = 15
  4170. }
  4171. this.formOriginality.setFieldsValue(this.showCreativeData)
  4172. }
  4173. })
  4174. },
  4175. //设置通配符
  4176. getChangeAll(type, form, field) {
  4177. var node = document.getElementById(field)
  4178. var v = '-{{' + type + '}}-'
  4179. if (document.selection) {
  4180. //IE
  4181. node.focus()
  4182. var sel = document.selection.createRange()
  4183. sel.text = v
  4184. sel.select()
  4185. if (field == 'campaignName') {
  4186. this[form].setFieldsValue({ campaignName: sel.text })
  4187. } else if (field == 'groupName') {
  4188. this[form].setFieldsValue({ groupName: sel.text })
  4189. }
  4190. } else if (node.selectionStart || node.selectionStart == '0') {
  4191. //MOZILLA/GOOGLE
  4192. var startPos = node.selectionStart
  4193. var endPos = node.selectionEnd
  4194. var restoreTop = node.scrollTop
  4195. node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
  4196. if (restoreTop > 0) {
  4197. node.scrollTop = restoreTop
  4198. }
  4199. if (field == 'campaignName') {
  4200. this[form].setFieldsValue({ campaignName: node.value })
  4201. } else if (field == 'groupName') {
  4202. this[form].setFieldsValue({ groupName: node.value })
  4203. }
  4204. node.focus()
  4205. node.selectionStart = startPos + v.length
  4206. node.selectionEnd = startPos + v.length
  4207. // this.campaignName = node.value
  4208. } else {
  4209. //OTHER
  4210. node.value += v
  4211. // console.log(node.value)
  4212. if (field == 'campaignName') {
  4213. this[form].setFieldsValue({ campaignName: node.value })
  4214. } else if (field == 'groupName') {
  4215. this[form].setFieldsValue({ groupName: node.value })
  4216. }
  4217. node.focus()
  4218. // this.campaignName = node.value
  4219. }
  4220. },
  4221. //获取表单的某一个属性值
  4222. getFormData(form, className) {
  4223. return this[form].getFieldValue(className)
  4224. },
  4225. onScroll() {
  4226. // var box = document.getElementById('box')
  4227. // var t = document.documentElement.scrollTop || document.body.scrollTop
  4228. // box.style.top = t + 'px'
  4229. var jump = document.querySelectorAll('.step-jump')
  4230. var distance =
  4231. document.documentElement.scrollTop + 180 || window.pageYOffset + 180 || document.body.scrollTop + 180
  4232. jump.forEach((item, index) => {
  4233. if (distance >= item.offsetTop) {
  4234. this.activeStep = index
  4235. }
  4236. })
  4237. },
  4238. // 锚点点击
  4239. jump(index) {
  4240. // console.log(index)
  4241. this.activeStep = index
  4242. // 用 class=".step-jump" 添加锚点,此时的类名要放在tr上,放在td上不对,
  4243. // 以后做的时候要注意这点,不是表格的时候,如何放置锚点
  4244. let jump = document.querySelectorAll('.step-jump')
  4245. // 通过 offsetTop 获取对象到窗体顶部的距离,然后赋值给 scrollTop,就能实现锚点的功能
  4246. let total = jump[index].offsetTop
  4247. // console.log(total)
  4248. // scrollTop滚动条距离页面的距离
  4249. let distance = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
  4250. // console.log(distance)
  4251. // 平滑滚动,时长500ms,每10ms一跳,共50跳
  4252. let step = total / 50
  4253. if (total > distance) {
  4254. smoothDown()
  4255. } else {
  4256. let newTotal = distance - total
  4257. step = newTotal / 100
  4258. smoothUp()
  4259. }
  4260. function smoothDown() {
  4261. if (distance < total) {
  4262. distance += step
  4263. document.body.scrollTop = distance
  4264. document.documentElement.scrollTop = distance
  4265. window.pageYOffset = distance
  4266. setTimeout(smoothDown, 1)
  4267. } else {
  4268. document.body.scrollTop = total
  4269. document.documentElement.scrollTop = total
  4270. window.pageYOffset = total
  4271. }
  4272. }
  4273. function smoothUp() {
  4274. if (distance > total) {
  4275. distance -= step
  4276. document.body.scrollTop = distance
  4277. document.documentElement.scrollTop = distance
  4278. window.pageYOffset = distance
  4279. setTimeout(smoothUp, 10)
  4280. } else {
  4281. document.body.scrollTop = total
  4282. document.documentElement.scrollTop = total
  4283. window.pageYOffset = total
  4284. }
  4285. }
  4286. },
  4287. getData(className, formName) {
  4288. return this[formName].getFieldValue(className)
  4289. }
  4290. }
  4291. }
  4292. </script>
  4293. <style lang="scss" scoped>
  4294. /* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/
  4295. $height: 59px;
  4296. .layout .header .user-wrapper .action .anticon,
  4297. .layout .top-nav-header-index .user-wrapper .action .anticon {
  4298. color: #999;
  4299. }
  4300. .layout .header .user-wrapper .action .anticon,
  4301. .layout .top-nav-header-index .user-wrapper .action .anticon {
  4302. color: #999;
  4303. }
  4304. .layout {
  4305. .top-nav-header-index {
  4306. .header-index-wide {
  4307. margin-left: 10px;
  4308. .ant-menu.ant-menu-horizontal {
  4309. height: $height;
  4310. line-height: $height;
  4311. }
  4312. }
  4313. .trigger {
  4314. line-height: 48px;
  4315. font-size: 17px;
  4316. &:hover {
  4317. background: rgba(0, 0, 0, 0.05);
  4318. }
  4319. }
  4320. }
  4321. .header {
  4322. z-index: 2;
  4323. color: #999;
  4324. height: $height;
  4325. background-color: #1890ff;
  4326. transition: background 300ms;
  4327. /* dark 样式 */
  4328. &.dark {
  4329. color: #000000;
  4330. box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  4331. background-color: white !important;
  4332. }
  4333. }
  4334. .header,
  4335. .top-nav-header-index {
  4336. &.dark .trigger:hover {
  4337. background: rgba(0, 0, 0, 0.05);
  4338. }
  4339. }
  4340. }
  4341. .ant-layout-header {
  4342. height: $height;
  4343. line-height: $height;
  4344. }
  4345. </style>