createLaunch.vue 239 KB

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