| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887388838893890389138923893389438953896389738983899390039013902390339043905390639073908390939103911391239133914391539163917391839193920392139223923392439253926392739283929393039313932393339343935393639373938393939403941394239433944394539463947394839493950395139523953395439553956395739583959396039613962396339643965396639673968396939703971397239733974397539763977397839793980398139823983398439853986398739883989399039913992399339943995399639973998399940004001400240034004400540064007400840094010401140124013401440154016401740184019402040214022402340244025402640274028402940304031403240334034403540364037403840394040404140424043404440454046404740484049405040514052405340544055405640574058405940604061406240634064406540664067406840694070407140724073407440754076407740784079408040814082408340844085408640874088408940904091409240934094409540964097409840994100410141024103410441054106410741084109411041114112411341144115411641174118411941204121412241234124412541264127412841294130413141324133413441354136413741384139414041414142414341444145414641474148414941504151415241534154415541564157415841594160416141624163416441654166416741684169417041714172417341744175417641774178417941804181418241834184418541864187418841894190419141924193419441954196419741984199420042014202420342044205420642074208420942104211421242134214421542164217421842194220422142224223422442254226422742284229423042314232423342344235423642374238423942404241424242434244424542464247424842494250425142524253425442554256425742584259426042614262426342644265426642674268426942704271427242734274427542764277427842794280428142824283428442854286428742884289429042914292429342944295429642974298429943004301430243034304430543064307430843094310431143124313431443154316431743184319432043214322432343244325432643274328432943304331433243334334433543364337433843394340434143424343434443454346434743484349435043514352435343544355435643574358435943604361436243634364436543664367436843694370437143724373437443754376437743784379438043814382438343844385438643874388438943904391439243934394439543964397439843994400440144024403440444054406440744084409441044114412441344144415441644174418441944204421442244234424442544264427442844294430443144324433443444354436443744384439444044414442444344444445444644474448444944504451445244534454445544564457445844594460446144624463446444654466446744684469447044714472447344744475447644774478447944804481448244834484448544864487448844894490449144924493449444954496449744984499450045014502450345044505450645074508450945104511451245134514451545164517451845194520452145224523452445254526452745284529453045314532453345344535453645374538453945404541454245434544454545464547454845494550455145524553455445554556455745584559456045614562456345644565456645674568456945704571457245734574457545764577457845794580458145824583458445854586458745884589459045914592459345944595459645974598459946004601460246034604460546064607460846094610461146124613461446154616461746184619462046214622462346244625462646274628462946304631463246334634463546364637463846394640464146424643464446454646464746484649465046514652465346544655465646574658465946604661466246634664466546664667466846694670467146724673467446754676467746784679468046814682468346844685468646874688468946904691469246934694469546964697469846994700470147024703470447054706470747084709471047114712471347144715471647174718471947204721472247234724472547264727472847294730473147324733473447354736473747384739474047414742474347444745474647474748474947504751475247534754475547564757475847594760476147624763476447654766476747684769477047714772477347744775477647774778477947804781478247834784478547864787478847894790479147924793479447954796479747984799480048014802 |
- <style scoped lang="scss">
- ::v-deep.import-padding-top .ant-modal-body {
- padding-top: 10px;
- }
- ::v-deep.vue-treeselect__control {
- line-height: 20px !important;
- }
- ::v-deep .table-page-search-wrapper .ant-form-item .ant-form-item-control {
- height: auto !important;
- line-height: 20px !important;
- }
- ::v-deep .white-space-other .ant-descriptions-item-content {
- font-weight: bold;
- max-width: 290px;
- white-space: nowrap;
- text-overflow: ellipsis !important;
- overflow: hidden;
- position: relative;
- top: 5px;
- }
- ::v-deep .white-space-collapse .ant-descriptions-item-content {
- font-weight: bold;
- max-width: 100%;
- white-space: nowrap;
- text-overflow: ellipsis !important;
- overflow: hidden;
- position: relative;
- top: 5px;
- }
- /deep/.display-none-selset {
- display: none !important;
- }
- .step-jump {
- /deep/ table tr td {
- border-bottom: 0px;
- }
- }
- .bottom-to-one {
- /deep/ .ant-form-item {
- margin-bottom: 0;
- }
- }
- .target-person-add-button {
- margin-left: 15px;
- }
- .card-person {
- width: 300px;
- margin-right: 10px;
- /deep/.ant-card-body {
- padding: 0px;
- }
- /deep/.ant-card-head {
- padding: 0px 10px;
- }
- .card-main-case {
- height: 250px;
- overflow: auto;
- padding: 0 5px;
- }
- }
- .card-person-drawer {
- width: 100%;
- height: 90%;
- overflow: hidden;
- padding: 10px 0px;
- display: flex;
- flex-wrap: wrap;
- margin-right: -10px;
- justify-content: flex-start;
- .card-item {
- width: calc(33% - 10px);
- margin-bottom: 10px;
- float: left;
- }
- .card-item-else {
- width: calc(20% - 10px);
- margin-bottom: 10px;
- float: left;
- }
- }
- .showShare {
- position: relative;
- }
- .share {
- display: none;
- }
- .showShare:hover .share {
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .chouzhen {
- border-style: solid;
- border-width: 1px;
- border-color: #e4e4e4;
- width: calc(20% - 10px);
- padding: 10px;
- margin-right: 10px;
- margin-bottom: 10px;
- display: flex;
- align-items: center;
- background: #fff;
- position: relative;
- z-index: 99;
- float: left;
- }
- li.chouzhen.first:before {
- font-size: 12px;
- content: '首帧';
- position: absolute;
- top: 7px;
- left: 5px;
- width: 36px;
- height: 20px;
- color: rgb(255, 255, 255);
- line-height: 20px;
- text-align: center;
- background: rgba(0, 0, 0, 0.5);
- border-radius: 2px;
- z-index: 1000;
- }
- .display-none-selset {
- display: none !important;
- }
- .logo {
- padding-left: 24px;
- img {
- height: 32px !important;
- }
- .name {
- font-size: 14px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: #ced2d9;
- // line-height: 22px;
- margin-left: 20px;
- padding-left: 21px;
- position: relative;
- }
- .name::before {
- content: '';
- width: 1px;
- height: 18px;
- background: rgba(255, 255, 255, 0.31);
- position: absolute;
- left: 0;
- top: 50%;
- margin-top: -9px;
- }
- }
- .chartBox {
- margin-top: 80px;
- .chartBody {
- display: flex;
- justify-content: space-around;
- flex-wrap: wrap;
- }
- .search-box {
- margin-bottom: 20px;
- }
- }
- /deep/ .ant-descriptions-item-content {
- font-weight: bold;
- }
- .info-detail {
- /deep/ table tr td {
- border: 0;
- }
- /deep/ .ant-descriptions-item-label {
- color: darkgray;
- // min-width: 30px;
- white-space: nowrap;
- }
- }
- .flex-main {
- display: flex;
- margin-bottom: 10px;
- p {
- color: black;
- font-weight: 600;
- overflow: hidden; //超出的文本隐藏
- text-overflow: ellipsis; //溢出用省略号显示
- white-space: nowrap; //溢出不换行
- }
- }
- </style>
- <style lang="scss">
- .hide-checkbox .ant-table-thead .ant-table-selection {
- display: none;
- }
- .new-batch .ant-card-head-title {
- font-weight: 700;
- }
- // .new-batch textarea {
- // resize: none;
- // border: none;
- // outline: 0;
- // box-shadow: none;
- // }
- .create-info .ant-form-item {
- margin-bottom: 0 !important;
- }
- .fengmian .ant-checkbox-wrapper:first-child {
- margin-left: 8px;
- }
- @media screen and (max-width: 1200px) {
- // 这里写对应要修改的样式如:
- .new-batch .el-step__title {
- font-size: 12px;
- }
- }
- .line-height-one .ant-form-item-control {
- line-height: inherit;
- }
- .creat-all-info .ant-form-item-control {
- width: 60%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .config-new-batch {
- .display-none-selset {
- display: none !important;
- }
- .ant-btn-danger {
- background-color: #ff4d4f !important;
- }
- }
- </style>
- <template>
- <div ref="questionnaireBox" class="new-batch config-new-batch">
- <a-layout-header
- class="ant-header-fixedHeader ant-header-side-opened"
- :style="{ padding: '0' }"
- style="background: #0b2040 !important; position: fixed; top: 0; z-index: 100; width: 100%"
- >
- <div :class="['top-nav-header-index', theme]">
- <div class="header-index-wide">
- <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
- <div class="logo">
- <img src="~@/assets/logoNew1.png" alt="logo" />
- <span class="name">有腾投放管家</span>
- </div>
- </div>
- </div>
- </div>
- </a-layout-header>
- <div class="chartBox" style="padding: 0 20px">
- <a-row :gutter="20">
- <a-col :sm="3" style="margin-bottom: 20px; z-index: 10; position: fixed">
- <a-card class="search-box" style="height: 90vh">
- <el-steps direction="vertical" finish-status="wait" space="50px" :active="activeStep">
- <el-step
- v-for="(item, index) in stepsArr"
- :key="index"
- :title="item.title"
- @click.native="jump(index)"
- >
- </el-step>
- </el-steps>
- </a-card>
- </a-col>
- <a-col :sm="21" :push="3" style="margin-bottom: 20px; z-index: 10" id="container">
- <a-card class="search-box step-jump" title="选择项目">
- <a-form layout="horizontal" v-bind="formItemLayout" :form="formProject">
- <a-row :gutter="16">
- <a-col :span="16" class=" table-page-search-wrapper">
- <a-form-item
- label="账户名称"
- :labelCol="formItemLayout.labelCol"
- class="require-check"
- >
- <selectTreeAccount
- v-decorator="[
- 'accountId',
- {
- rules: [{ required: true, message: '账户名称必选' }],
- initialValue: undefined
- }
- ]"
- style="display: inline-block;position: relative;margin-left: 0px;width:100%"
- :limit="1"
- :disabled="!!$route.query.id"
- @change="changeAccount"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="营销目标">
- <a-radio-group
- :disabled="!!$route.query.id"
- button-style="solid"
- v-decorator="[
- 'campaignType',
- {
- rules: [{ required: true, message: '营销目标必选' }],
- initialValue: 2
- }
- ]"
- @change="changeCampaignType"
- >
- <a-radio-button :value="2">提升应用安装</a-radio-button>
- <a-radio-button :value="5" disabled>收集销售线索</a-radio-button>
- <a-radio-button :value="7">提高应用活跃</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
-
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="基础信息配置">
- <a-button type="primary" slot="extra" @click="formInfoShow">基础信息</a-button>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="行为意向">
- <a-radio-group
- button-style="solid"
- v-decorator="[
- 'intentionTarget',
- {
- rules: [{ required: true, message: '行为意向必选' }],
- initialValue: 0
- }
- ]"
- >
- <a-radio-button :value="0">不限</a-radio-button>
- <a-radio-button :value="1">系统优选</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- </a-card>
- <a-card class="search-box step-jump" title="优化目标">
- <a-form layout="horizontal" v-bind="formItemLayout" :form="formOptimize">
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="优化目标">
- <a-radio-group
- v-decorator="['bidType', { initialValue: 10 }]"
- button-style="solid"
- >
- <a-radio-button :value="10">
- 转化数
- </a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="转化目标">
- <a-select
- style="width:300px"
- allowClear
- v-decorator="[
- 'ocpxActionType',
- { rules: [{ required: true, message: '转化目标必选' }] }
- ]"
- >
- <a-select-option :value="2">行为数</a-select-option>
- <a-select-option :value="180">激活</a-select-option>
- <a-select-option :value="53">表单提交</a-select-option>
- <a-select-option :value="394">订单提交</a-select-option>
- <a-select-option :value="348">使用有效线索</a-select-option>
- <a-select-option :value="383">授信出价</a-select-option>
- <a-select-option :value="384">完件出价</a-select-option>
- <a-select-option :value="190">付费出价</a-select-option>
- <a-select-option :value="191">首日ROI</a-select-option>
- <a-select-option :value="396">注册优化目标</a-select-option>
- <a-select-option :value="324">唤起应用</a-select-option>
- <a-select-option :value="715">微信复制优化目标</a-select-option>
- <a-select-option :value="716">多转化事件</a-select-option>
- <a-select-option :value="717">广告观看次数</a-select-option>
- <a-select-option :value="773">关键行为</a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="计费方式">
- <a-radio-group default-value="10" button-style="solid">
- <a-radio-button value="10">
- 按展示付费(oCPM)
- </a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="深度转化目标">
- <a-select
- style="width:300px"
- size="default"
- allowClear
- v-decorator="['deepConversionType']"
- >
- <a-select-option :value="3">
- 付费
- </a-select-option>
- <a-select-option :value="7">
- 次日留存
- </a-select-option>
- <a-select-option :value="10">
- 完件
- </a-select-option>
- <a-select-option :value="11">
- 授信
- </a-select-option>
- <a-select-option :value="13">
- 添加购物车
- </a-select-option>
- <a-select-option :value="14">
- 提交订单
- </a-select-option>
- <a-select-option :value="15">
- 购买
- </a-select-option>
- <a-select-option :value="44">
- 有效线索
- </a-select-option>
- <a-select-option :value="92">
- 付费roi
- </a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="转化目标出价">
- <a-input
- style="width:300px"
- v-decorator="[
- 'cpaBid',
- {
- rules: [
- { required: true, message: ' ' },
- { validator: cpaBidValid }
- ]
- }
- ]"
- >
- </a-input>
- <br />
- <span style="color:red"
- >单出价请输入单数字,阶梯出价请用/隔开 例如10/12,区间出价请用-链接
- 例如20-25</span
- >
- </a-form-item>
- </a-col>
- </a-row>
- <!-- { rules: [{ validator: deepBidValid }] } -->
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="深度转化出价">
- <a-input style="width:300px" v-decorator="['deepConversionBid']"> </a-input>
- <br />
- <span style="color:red"
- >单出价请输入单数字,阶梯出价请用/隔开 例如10/12,区间出价请用-链接
- 例如20-25</span
- >
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- </a-card>
- <a-card class="search-box step-jump" title="目标应用">
- <a-button
- type="primary"
- slot="extra"
- @click="targetAppEdit"
- :disabled="!getFormData('formProject', 'accountId')"
- >编辑</a-button
- >
- <a-row :gutter="16" class="bottom-to-one">
- <a-col :span="16">
- <a-form-item label="" v-bind="tailFormItemLayout">
- <a-descriptions class="white-space-other">
- <a-descriptions-item label="系统平台">
- {{
- appDetail && appDetail.platformOs
- ? appDetail.platformOs === 1
- ? 'Android'
- : 'IOS'
- : '-'
- }}
- </a-descriptions-item>
- <a-descriptions-item label="单/多应用">
- {{ multipleBidData.length > 1 ? '多应用' : '单应用' }}
- </a-descriptions-item>
- <a-descriptions-item label="应用数量">
- {{ multipleBidData.length }}
- </a-descriptions-item>
- <a-descriptions-item label="是否使用渠道号">
- {{ appDetail && appDetail.useChannel ? '是' : '否' }}
- </a-descriptions-item>
- <a-descriptions-item
- label="渠道号作用纬度"
- v-if="
- appDetail &&
- appDetail.useChannel &&
- channelData &&
- channelData.channel.usageLevel
- "
- >
- {{
- channelData.channel.usageLevel == 'account'
- ? '账户'
- : channelData.channel.usageLevel == 'plan'
- ? '计划'
- : '组'
- }}
- </a-descriptions-item>
- <a-descriptions-item
- label="是否使用单品"
- v-if="
- appDetail &&
- appDetail.useChannel &&
- channelData &&
- channelData.channel.isHaveItem
- "
- >
- {{ channelData.channel.isHaveItem == 1 ? '是' : '否' }}
- </a-descriptions-item>
- <a-descriptions-item label="转化跟踪" v-if="convertId && !convert">
- {{ convertId.label }}
- </a-descriptions-item>
- <a-descriptions-item label="优先从系统应用商店下载">
- {{ appDetail && appDetail.useAppMarket ? '是' : '否' }}
- </a-descriptions-item>
- <a-descriptions-item label="调起链接">
- <a-tooltip placement="topLeft">
- <template slot="title">
- {{ appDetail && appDetail.schemaUri ? appDetail.schemaUri : '无' }}
- </template>
- {{ appDetail && appDetail.schemaUri ? appDetail.schemaUri : '无' }}
- </a-tooltip>
- </a-descriptions-item>
- </a-descriptions>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-for="(item, index) in multipleBidData" :key="index">
- <a-col :span="16" v-if="!appDetail.useChannel">
- <a-form-item
- :label="'应用' + (index + 1)"
- :labelCol="{ span: 4 }"
- :wrapperCol="{ span: 20 }"
- >
- <a-collapse expand-icon-position="right">
- <a-collapse-panel key="1" :header="item.appName">
- <a-descriptions class="white-space-collapse">
- <a-descriptions-item label="应用标识" :span="3">
- {{ item.appVersion }}
- </a-descriptions-item>
- <a-descriptions-item label="第三方点击监测链接" :span="3">
- <a-tooltip placement="topLeft">
- <template slot="title">
- {{ !!item.clickTrackUrl ? item.clickTrackUrl : '-' }}
- </template>
- {{ !!item.clickTrackUrl ? item.clickTrackUrl : '-' }}
- </a-tooltip>
- </a-descriptions-item>
- <a-descriptions-item label="第三方actionBar监测链接" :span="3">
- <a-tooltip placement="topLeft">
- <template slot="title">
- {{
- !!item.actionbarClickUrl ? item.actionbarClickUrl : '-'
- }}
- </template>
- {{ !!item.actionbarClickUrl ? item.actionbarClickUrl : '-' }}
- </a-tooltip>
- </a-descriptions-item>
- </a-descriptions>
- </a-collapse-panel>
- </a-collapse>
- </a-form-item>
- </a-col>
- <a-col :span="16" v-else>
- <a-form-item
- :label="'应用' + (index + 1)"
- :labelCol="{ span: 4 }"
- :wrapperCol="{ span: 20 }"
- >
- <p style="width:100%;display: flex;justify-content: space-between;">
- {{ item.appName }}({{ item.appVersion }})
- <a @click="lookChannel(item.appName)">详情</a>
- </p>
- </a-form-item>
- </a-col>
- </a-row>
- </a-card>
- <a-card class="search-box step-jump">
- <span slot="title">
- 目标人群
- <a-tooltip>
- <template slot="title">
- 定向包支持多选,
- 将根据人群包匹配情况进行随机匹配。若账户中无此人群包,则进行下一个定向包匹配。若此账户全部匹配不成功则不创建
- </template>
- <a-icon type="question-circle" />
- </a-tooltip>
- </span>
- <a-row :gutter="16">
- <a-col :span="16" style="width:100%; margin-left: -10%;">
- <a-form-item label="" v-bind="tailFormItemLayout">
- <div class="target-person-add">
- <span>已选定向包:{{ showCheckPerson.length }}</span>
- <a-button
- type="primary"
- class="target-person-add-button"
- @click="targetPersonCheck"
- :disabled="!getFormData('formProject', 'accountId')"
- >选择定向包 ></a-button
- >
- <a-tooltip>
- <template slot="title">
- 当编辑定向包时,需要重新选择定向包
- </template>
- <a-icon
- type="question-circle"
- v-if="$route.query.id"
- style="margin-left:20px"
- />
- </a-tooltip>
- </div>
- </a-form-item>
- <a-form-item label="" v-bind="tailFormItemLayout">
- <div
- class="card-person-drawer info-detail"
- style="justify-content: flex-start;max-height:500px;overflow:auto"
- >
- <a-card
- :title="item.targetName"
- class="card-person card-item-else"
- style="margin-right:10px"
- v-for="(item, index) in showCheckPerson"
- :key="index"
- >
- <div slot="extra">
- <a-popconfirm
- title="确定要删除这个定向吗?"
- ok-text="确定"
- cancel-text="取消"
- @confirm="removeVideoMaterial(index, item.id)"
- @cancel="cancel"
- >
- <a-icon type="delete" />
- </a-popconfirm>
- </div>
- <div class="card-main-case">
- <a-row style="margin-top:10px">
- <a-col :xl="24" :md="24" class="flex-main" v-if="item">
- <span class="ant-descriptions-item-label"> 人群:</span>
- <div v-if="item" style="word-break: break-all;">
- <span
- v-if="
- (!item.population && !item.excludePopulation) ||
- (item.population == '[]' &&
- item.excludePopulation == '[]')
- "
- >
- 不限
- </span>
- <span
- v-else-if="
- item.population &&
- (!item.excludePopulation ||
- item.excludePopulation == '[]')
- "
- >
- 定向人群:{{ JSON.parse(item.population).join() }}
- </span>
- <span
- v-else-if="
- item.excludePopulation &&
- (!item.population || item.population == '[]')
- "
- >
- 排除人群:{{
- JSON.parse(item.excludePopulation).join()
- }}
- </span>
- <span v-else>
- 定向人群:{{ JSON.parse(item.population).join() }}
- <br />
- 排除人群:{{
- JSON.parse(item.excludePopulation).join()
- }}
- </span>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row style="margin-top:10px">
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 地区:</span>
- <div v-if="item">
- <span
- v-if="
- item.region == '' ||
- item.region == null ||
- JSON.parse(item.region).length == 0
- "
- >
- 不限
- </span>
- <div v-else>
- {{ item.regionName.join(',') }}
- </div>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 年龄:</span>
- <div v-if="item">
- <span
- v-if="
- (item.agesRange == '[]' ||
- item.agesRange == null) &&
- (item.min == -1 || item.min == null) &&
- (item.max == -1 || item.max == null)
- "
- >
- 不限
- </span>
- <div v-else>
- <span
- v-if="
- item.agesRange == '[]' || item.agesRange == null
- "
- >
- {{ item.min + '岁~' + item.max + '岁' }}
- </span>
- <span v-else>
- <span
- v-for="(items, index) in JSON.parse(
- item.agesRange
- )"
- :key="index"
- >
- {{ items | kuaishouAge
- }}{{
- index ==
- JSON.parse(item.agesRange).length - 1
- ? ''
- : ','
- }}
- </span>
- </span>
- </div>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 性别:</span>
- <div v-if="item">
- {{
- item.gender == 1
- ? '女'
- : item.gender == 2
- ? '男'
- : '不限'
- }}
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 最低版本:</span>
- <div v-if="item">
- {{
- item.platformOs == 1
- ? 'Android系统(' +
- (item.androidOsv == 3
- ? '不限)'
- : item.androidOsv + 'x+)')
- : item.platformOs == 2
- ? 'IOS系统(' +
- (item.iosOsv == 6 ? '不限)' : item.iosOsv + 'x+)')
- : '不限'
- }}
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 设备品牌:</span>
- <div v-if="item">
- <span
- v-if="
- item.deviceBrand == '' ||
- item.deviceBrand == null ||
- JSON.parse(item.deviceBrand).length == 0
- "
- >
- 不限
- </span>
- <span v-else>
- <span
- v-for="(items, index) in JSON.parse(
- item.deviceBrand
- )"
- :key="index"
- >
- {{ items | deviceBrand
- }}{{
- index == JSON.parse(item.deviceBrand).length - 1
- ? ''
- : ','
- }}
- </span>
- </span>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 设备价格:</span>
- <div v-if="item">
- <span
- v-if="
- item.devicePrice == '' ||
- item.devicePrice == null ||
- JSON.parse(item.devicePrice).length == 0
- "
- >
- 不限
- </span>
- <span v-else>
- <span
- v-for="(items, index) in JSON.parse(
- item.devicePrice
- )"
- :key="index"
- >
- {{ items | kuaishouPrice
- }}{{
- index == JSON.parse(item.devicePrice).length - 1
- ? ''
- : ','
- }}
- </span>
- </span>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 商业兴趣:</span>
- <div>
- <span
- v-if="
- item.businessInterest == '[]' ||
- item.businessInterest == null ||
- item.businessInterest == ''
- "
- >
- 不限
- </span>
- <div v-else>
- <span
- v-for="(items, index) in JSON.parse(
- item.businessInterest
- )"
- :key="index"
- >
- {{ items | business }}
- {{
- index ==
- JSON.parse(item.businessInterest).length - 1
- ? ''
- : ','
- }}
- </span>
- </div>
- </div>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 网红粉丝:</span>
- <span
- v-if="
- item.fansStar == '[]' ||
- item.fansStar == null ||
- item.fansStar == ''
- "
- >
- 不限
- </span>
- <div v-else>
- <span
- v-for="(items, index) in JSON.parse(item.fansStar)"
- :key="index"
- >
- {{ items | fansStarLabel }}
- {{
- index == JSON.parse(item.fansStar).length - 1
- ? ''
- : ','
- }}
- </span>
- </div>
- </a-col>
- </a-row>
- <a-row v-if="item.platformOs == 1">
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> APP行为:</span>
- <div v-if="item">
- <span
- v-if="
- (item.appIds == '[]' ||
- item.appIds == null ||
- item.appIds == '') &&
- (item.appInterest == '[]' ||
- item.appInterest == null ||
- item.appInterest == '')
- "
- >
- 不限
- </span>
- <div v-else>
- <span
- v-if="
- item.appIds == '[]' ||
- item.appIds == null ||
- item.appIds == ''
- "
- >
- <span
- v-for="(items, index) in JSON.parse(
- item.appInterest
- )"
- :key="index"
- >
- {{ items | optionsApp
- }}{{
- index ==
- JSON.parse(item.appInterest).length - 1
- ? ''
- : ','
- }}
- </span>
- </span>
- <span v-else>
- <span
- v-for="(items, index) in JSON.parse(
- item.appIds
- )"
- :key="index"
- >
- {{ items }}
- </span>
- </span>
- </div>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 兴趣视频用户:</span>
- <div v-if="item">
- <span
- v-if="
- item.interestVideo == '[]' ||
- item.interestVideo == null ||
- item.interestVideo == ''
- "
- >
- 不限
- </span>
- <div v-else>
- <span
- v-for="(items, index) in JSON.parse(
- item.interestVideo
- )"
- :key="index"
- >
- {{ items | interestVideo
- }}{{
- index ==
- JSON.parse(item.interestVideo).length - 1
- ? ''
- : ','
- }}
- </span>
- </div>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 网络环境:</span>
- <div v-if="item">
- {{
- item.network == 1
- ? 'Wi-Fi'
- : item.network == 2
- ? '移动网络'
- : '不限'
- }}
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label">
- 过滤已转换用户:</span
- >
- <div v-if="item">
- {{
- item.filterConvertedLevel | kuaishouFilterConvertedLevel
- }}
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 智能扩量:</span>
- <div v-if="item">
- {{ item.isOpen == 0 ? '关闭' : '开启' }}
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- </div>
- </a-card>
- </div>
- </a-form-item>
- </a-col>
- </a-row>
- </a-card>
- <a-card class="search-box step-jump" title="创意信息">
- <a-button
- type="primary"
- slot="extra"
- @click="originalityEdit"
- :disabled="!getFormData('formProject', 'accountId')"
- >编辑</a-button
- >
- <a-form-item v-bind="tailFormItemLayoutElse" style="margin-left:1.15%">
- <a-descriptions>
- <a-descriptions-item label="创意制作方式">
- <span v-if="showCreativeData">
- {{ showCreativeData.unitType | unitType }}
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <a-descriptions-item label=" 广告位置">
- <span v-if="showCreativeData && showCreativeData.sceneId">
- <span v-for="(item, index) in showCreativeData.sceneId" :key="index">
- {{ item | kuaishouSceneId
- }}{{ index === showCreativeData.sceneId.length - 1 ? '' : ',' }}
- </span>
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <a-descriptions-item label="关联封面数">
- <span v-if="showCreativeData && showCreativeData.imageCnt">
- {{ showCreativeData.imageCnt }}
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <a-descriptions-item label="自定义计划数量/组数量">
- <span
- v-if="
- showCreativeData &&
- showCreativeData.customPlanCnt &&
- showCreativeData.customUnitCnt &&
- showCreativeData.unitType != 7
- "
- >
- {{ showCreativeData.customPlanCnt + '/' + showCreativeData.customUnitCnt }}
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <a-descriptions-item label="程序化计划数量/组数量">
- <span
- v-if="
- showCreativeData &&
- showCreativeData.programUnitCnt &&
- showCreativeData.programPlanCnt &&
- showCreativeData.unitType != 4
- "
- >
- {{ showCreativeData.programPlanCnt + '/' + showCreativeData.programUnitCnt }}
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <a-descriptions-item label="素材类型">
- <span v-if="showCreativeData">
- {{ showCreativeData.channelType | channelType }}
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <a-descriptions-item label="素材挖掘">
- <span v-if="showCreativeData">
- {{ showCreativeData.assetMining === 0 ? '关闭' : '开启' }}
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <a-descriptions-item label="智能抽帧">
- <span v-if="showCreativeData">
- {{ showCreativeData.smartCover === 0 ? '关闭' : '开启' }}
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <!-- <a-descriptions-item label="素材选取">
- <span v-if="showCreativeData">
- 不限
- </span>
- <span v-else>-</span>
- </a-descriptions-item> -->
- <a-descriptions-item label="创意分类">
- <span v-if="showCreativeData && showCreativeData.creativeCategory">
- <a-cascader
- :options="createOptions"
- v-model="showCreativeData.creativeCategory"
- disabled
- :fieldNames="fieldNames"
- placeholder="请选择创意分类"
- />
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <a-descriptions-item label="行动号召">
- <span v-if="showCreativeData && showCreativeData.actionBarText">
- {{ showCreativeData.actionBarText.join() }}
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <a-descriptions-item label="创意标签" :span="2">
- <span
- v-if="
- showCreativeData &&
- showCreativeData.creativeTag &&
- showCreativeData.creativeTag.length > 0
- "
- >
- {{ showCreativeData.creativeTag.join() }}
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <a-descriptions-item label="广告语" :span="3">
- <span v-if="showCreativeData">
- <span v-for="(item, index) in descriptionList" :key="index">
- {{ item.value }}{{ index === descriptionList.length - 1 ? '' : ';' }}
- </span>
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- </a-descriptions>
- </a-form-item>
- </a-card>
- <a-card class="search-box step-jump" title="素材信息">
- <a-form layout="horizontal" v-bind="formItemLayout" :form="formMaterial">
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item>
- <span slot="label">
- <a-tooltip>
- <template slot="title">
- 自动投放自动选取素材,在此处可限制选取素材逻辑。上新素材不可取消勾选,“高质量素材”“遗漏素材”“历史素材打捞”可随意组合使用
- </template>
- <a-icon type="question-circle" />
- </a-tooltip>
- 素材选取
- </span>
- <a-checkbox-group
- v-decorator="[
- 'sourceMaterial',
- {
- rules: [
- {
- required: true,
- message: '转化目标必选'
- }
- ],
- initialValue: [1]
- }
- ]"
- >
- <a-checkbox :value="1" disabled>
- 上新素材
- </a-checkbox>
- <a-checkbox :value="2">
- 高质量素材
- </a-checkbox>
- <a-checkbox :value="3">
- 遗漏素材
- </a-checkbox>
- <a-checkbox :value="4">
- 历史打捞
- </a-checkbox>
- </a-checkbox-group>
- </a-form-item>
- <a-form-item>
- <span slot="label">
- 素材匹配逻辑
- </span>
- <a-radio-group
- :disabled="!!$route.query.id"
- v-decorator="[
- 'matchType',
- {
- rules: [
- {
- required: true,
- message: '转化目标必选'
- }
- ],
- initialValue: 1
- }
- ]"
- >
- <a-radio :value="1">
- 定向匹配
- </a-radio>
- <a-radio :value="2">
- 素材匹配
- </a-radio>
- </a-radio-group>
- </a-form-item>
- <a-form-item v-if="appDetail && !appDetail.useChannel">
- <span slot="label">
- <a-tooltip>
- <template slot="title">
- 若有多个关键字,请用"-"隔开
- </template>
- <a-icon type="question-circle" />
- </a-tooltip>
- 素材关键字
- </span>
- <a-textarea
- class="rending"
- placeholder="请输入素材关键字"
- v-decorator="['materialKeyword']"
- :autosize="{ minRows: 2, maxRows: 6 }"
- ></a-textarea>
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- </a-card>
- <div style="display: flex; justify-content: flex-end; margin-bottom: 100px">
- <div>
- <a-button
- type="primary"
- style="margin-right: 15px"
- @click="handleSubmit"
- :loading="sumbitLoading"
- :disabled="disabled"
- >
- 创建
- </a-button>
- <a-button @click="clearAllData"> 取消 </a-button>
- </div>
- </div>
- </a-col>
- </a-row>
- </div>
- <!-- 基本信息编辑 -->
- <a-drawer
- :width="800"
- :visible="formInformationVisible"
- :body-style="{ paddingBottom: '80px' }"
- @close="closeFormInfo"
- >
- <h2 slot="title" style="margin-bottom: 0">设置基本信息</h2>
- <a-form layout="horizontal" v-bind="formDrawerItemLayout" :form="formInformation">
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="计划命名规范">
- <a-input
- v-decorator="[
- 'campaignName',
- { rules: [{ required: true, message: '请填写计划的命名规则' }] }
- ]"
- allow-clear
- id="campaignName"
- />
- <a-tag color="#2db7f5" @click="getChangeAll('日期', 'formInformation', 'campaignName')"
- >+日期</a-tag
- >
- <!-- <a-tag
- color="#2db7f5"
- @click="getChangeAll('渠道号', 'formInformation', 'campaignName')"
- >+渠道号</a-tag
- >
- <a-tag
- color="#2db7f5"
- @click="getChangeAll('横竖版', 'formInformation', 'campaignName')"
- >+横竖版</a-tag
- > -->
- <a-tag color="#2db7f5" @click="getChangeAll('渠道号', 'formInformation', 'campaignName')"
- >+渠道号</a-tag
- >
- <a-tag
- color="#2db7f5"
- @click="getChangeAll('渠道号名称', 'formInformation', 'campaignName')"
- >+渠道号名称</a-tag
- >
- <a-tag color="#2db7f5" @click="getChangeAll('序号', 'formInformation', 'campaignName')"
- >+序号</a-tag
- >
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="计划单日预算">
- <a-radio-group v-model="budgetType" button-style="solid">
- <a-radio-button value="1">不限</a-radio-button>
- <a-radio-button value="2">统一预算</a-radio-button>
- </a-radio-group>
- <a-input-number
- v-if="budgetType === '2'"
- v-decorator="[
- 'campaignDayBudget',
- {
- rules: [
- {
- required: true,
- message: '不小于500, 不超过100000000,仅支持输入自然数'
- }
- ]
- }
- ]"
- :min="500"
- :precision="0"
- :max="100000000"
- style="width: 100%"
- placeholder="不小于500, 不超过100000000,仅支持输入自然数"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="广告计划状态">
- <a-radio-group
- v-decorator="[
- 'campaignStatus',
- {
- rules: [
- {
- required: true
- }
- ],
- initialValue: 1
- }
- ]"
- button-style="solid"
- >
- <a-radio-button :value="1">投放</a-radio-button>
- <a-radio-button :value="2">暂停</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="组命名规范">
- <a-input
- v-decorator="[
- 'groupName',
- { rules: [{ required: true, message: '请填写组命名规范' }] }
- ]"
- allow-clear
- id="groupName"
- />
- <a-tag color="#2db7f5" @click="getChangeAll('日期', 'formInformation', 'groupName')"
- >+日期</a-tag
- >
- <a-tag color="#2db7f5" @click="getChangeAll('素材名称', 'formInformation', 'groupName')"
- >+素材名称</a-tag
- >
- <a-tag color="#2db7f5" @click="getChangeAll('应用包名', 'formInformation', 'groupName')"
- >+应用包名</a-tag
- >
- <a-tag color="#2db7f5" @click="getChangeAll('定向包名', 'formInformation', 'groupName')"
- >+定向包名</a-tag
- >
- <!-- <a-tag color="#2db7f5" @click="getChangeAll('序号', 'formInformation', 'groupName')"
- >+序号</a-tag
- > -->
- <a-tag color="#2db7f5" @click="getChangeAll('创意制作方式', 'formInformation', 'groupName')"
- >+创意制作方式</a-tag
- >
- <a-tag color="#2db7f5" @click="getChangeAll('广告位置', 'formInformation', 'groupName')"
- >+广告位置</a-tag
- >
- <a-tag color="#2db7f5" @click="getChangeAll('渠道号', 'formInformation', 'groupName')"
- >+渠道号</a-tag
- >
- <a-tag color="#2db7f5" @click="getChangeAll('渠道号名称', 'formInformation', 'groupName')"
- >+渠道号名称</a-tag
- >
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="组单日预算">
- <a-radio-group v-model="dayBudgetType" button-style="solid">
- <a-radio-button value="1">不限</a-radio-button>
- <a-radio-button value="2">统一预算</a-radio-button>
- </a-radio-group>
- <a-input-number
- v-if="dayBudgetType === '2'"
- v-decorator="[
- 'unitDayBudget',
- {
- rules: [
- {
- required: true,
- message: '不小于100, 不超过100000000,仅支持输入自然数'
- }
- ]
- }
- ]"
- style="width: 100%"
- placeholder="不小于100, 不超过100000000,仅支持输入自然数"
- :min="100"
- :precision="0"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="广告组状态">
- <a-radio-group
- v-decorator="[
- 'groupStatus',
- {
- rules: [
- {
- required: true,
- message: '不小于500, 不超过100000000,仅支持输入自然数'
- }
- ],
- initialValue: 1
- }
- ]"
- button-style="solid"
- >
- <a-radio-button :value="1">投放</a-radio-button>
- <a-radio-button :value="2">暂停</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- <div
- :style="{
- position: 'absolute',
- right: 0,
- bottom: 0,
- width: '100%',
- borderTop: '1px solid #e9e9e9',
- padding: '10px 16px',
- background: '#fff',
- textAlign: 'right',
- zIndex: 1
- }"
- >
- <a-button :style="{ marginRight: '8px' }" @click="closeFormInfo"> 取消 </a-button>
- <a-button type="primary" @click="submitFormInfo"> 提交 </a-button>
- </div>
- </a-drawer>
- <!-- 目标应用编辑 -->
- <a-drawer :width="800" :visible="targetAppVisible" :body-style="{ paddingBottom: '80px' }" @close="closeUnit">
- <!-- @close="closeUnit('createForm')" -->
- <h2 slot="title" style="margin-bottom: 0">目标应用</h2>
- <!-- class="create-info" -->
- <a-form layout="horizontal" v-bind="formDrawerItemLayout" :form="formTargetApp">
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="系统平台">
- <a-radio-group
- v-decorator="['platformOs', { initialValue: 1 }]"
- button-style="solid"
- @change="changeType"
- >
- <!-- <a-radio-button :value="0">不限</a-radio-button> -->
- <a-radio-button :value="1">Android</a-radio-button>
- <a-radio-button :value="2">IOS</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item>
- <span slot="label">
- <a-tooltip>
- <template slot="title">
- 单应用情况下 账户对应一个应用。多应用情况下 账户可对应多个应用
- </template>
- <a-icon type="question-circle" />
- </a-tooltip>
- 单/多应用
- </span>
- <a-radio-group
- v-decorator="['singleAppid', { initialValue: 1 }]"
- button-style="solid"
- @change="clearAppId"
- >
- <a-radio-button :value="1">单应用</a-radio-button>
- <a-radio-button :value="0" disabled>多应用</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item>
- <span slot="label">
- <a-tooltip>
- <template slot="title">
- 调起链接需要加白使用 若多应用的情况下在创建时则一一匹配,若账户未加白
- 则不使用调起链接
- </template>
- <a-icon type="question-circle" />
- </a-tooltip>
- 调起链接
- </span>
- <a-switch
- default-checked
- v-model="uriCheck"
- :disabled="getFormData('formProject', 'campaignType') == 7"
- />
- <span style="color:red" v-if="getFormData('formProject', 'campaignType') != 7">
- 需加白使用</span
- >
- <div v-if="uriCheck">
- <a-input
- placeholder="请填写链接"
- v-decorator="[
- 'schemaUri',
- {
- rules: [
- {
- required:
- uriCheck && getFormData('formProject', 'campaignType') == 7,
- message: '链接不能为空'
- }
- ]
- }
- ]"
- />
- </div>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="getFormData('formProject', 'campaignType') == 7">
- <a-col :span="16">
- <a-form-item>
- <span slot="label">
- H5链接
- </span>
- <a-input
- placeholder="请填写链接"
- v-decorator="['url', { rules: [{ required: true, message: '链接不能为空' }] }]"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="选择应用">
- <a-select
- v-decorator="['appId', { rules: [{ required: true, message: '请选择目标应用' }] }]"
- showSearch
- allowClear
- placeholder="选择应用目标"
- optionFilterProp="children"
- style="width: 500px"
- :filterOption="filterOption"
- @change="appIdChange"
- :mode="getFormData('formTargetApp', 'singleAppid') == 1 ? 'defalut' : 'multiple'"
- :maxTagCount="1"
- :labelInValue="true"
- >
- <a-select-option v-if="getFormData('formTargetApp', 'singleAppid') == 0" :value="0"
- >选择以下全部</a-select-option
- >
- <a-select-option
- v-for="appModel in appList"
- :key="appModel.appId"
- :value="appModel.appId"
- >
- {{ appModel.platform | platform }}   {{
- appModel.appName
- }}    {{ appModel.appVersion }}
- </a-select-option>
- </a-select>
- <a-button type="primary" @click="addApplication" :loading="tongbuLoading"
- >刷新应用</a-button
- >
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item>
- <span slot="label">
- <a-tooltip>
- <template slot="title">
- 渠道号开启后,会自动识别选中应用所绑定的监测链接、调起链接等,无需运营手动输入
- </template>
- <a-icon type="question-circle" />
- </a-tooltip>
- 使用渠道号
- </span>
- <a-switch default-checked v-model="useChannel" @change="changeChannel" />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="channelData && channelData.channel.isHaveItem>-1">
- <a-col :span="16">
- <a-form-item>
- <span slot="label">
- 是否使用单品
- </span>
- <a-radio-group v-model="channelData.channel.isHaveItem" disabled>
- <a-radio-button :value="1">是</a-radio-button>
- <a-radio-button :value="0">否</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="channelData && channelData.channel.usageLevel">
- <a-col :span="16">
- <a-form-item>
- <span slot="label">
- 渠道号作用维度
- </span>
- <a-radio-group button-style="solid" v-model="channelData.channel.usageLevel" disabled>
- <a-radio-button value="account">账户</a-radio-button>
- <a-radio-button value="plan">计划</a-radio-button>
- <a-radio-button value="group">组</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row
- :gutter="16"
- v-if="
- channelData && channelData.channel.usageLevel && channelData.list && channelData.list.length > 0
- "
- >
- <a-col :span="24">
- <a-form-item v-bind="tailFormDrawerItemLayout" style="margin-left:-12%">
- <a-collapse accordion ref="collapse">
- <template v-for="(item, index) in channelData.list">
- <a-collapse-panel
- :forceRender="true"
- :header="item.appName + '(应用标记)'"
- style="background: #f9f9fa;border-radius: 4px;margin-bottom:15px;overflow: hidden;border: 1px solid #d9d9d9;"
- >
- <a-form-item label="渠道号" v-bind="formItemLayout">
- {{ item.channelCode }}
- </a-form-item>
- <a-form-item label="素材关键字" v-bind="formItemLayout">
- {{ item.keyword }}
- </a-form-item>
- </a-collapse-panel>
- </template>
- </a-collapse>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="18">
- <a-form-item v-bind="formDrawerItemLayout">
- <a-table
- ref="table"
- size="middle"
- bordered
- :dataSource="multipleBidDataDrawer"
- :pagination="false"
- style="width:180%"
- :scroll="!useChannel ? { x: 1200 } : { x: true }"
- >
- <a-table-column
- key="appName"
- :width="!useChannel ? '10%' : true"
- data-index="appName"
- title="应用名称"
- align="center"
- />
- <a-table-column
- :width="!useChannel ? '10%' : true"
- key="appVersion"
- data-index="appVersion"
- title="应用标记"
- align="center"
- />
- <a-table-column
- v-if="!useChannel"
- width="20%"
- key="clickTrackUrl"
- data-index="clickTrackUrl"
- title="第三方点击监测链接"
- align="center"
- :ellipsis="true"
- >
- <template slot-scope="text, record">
- <editable-cell
- :text="text"
- @change="onCellChange(record.id, 'clickTrackUrl', $event)"
- />
- </template>
- </a-table-column>
- <!-- <a-table-column
- v-if="!useChannel"
- width="20%"
- key="impressionUrl"
- data-index="impressionUrl"
- title="第三方开始播放监测链接"
- align="center"
- :ellipsis="true"
- >
- <template slot-scope="text, record">
- <editable-cell
- :text="text"
- @change="onCellChange(record.id, 'impressionUrl', $event)"
- />
- </template>
- </a-table-column> -->
- <a-table-column
- v-if="!useChannel"
- width="20%"
- key="actionbarClickUrl"
- data-index="actionbarClickUrl"
- title="第三方点击按钮监测链接"
- align="center"
- :ellipsis="true"
- >
- <template slot-scope="text, record">
- <editable-cell
- :text="text"
- @change="onCellChange(record.id, 'actionbarClickUrl', $event)"
- />
- </template>
- </a-table-column>
- <!-- <a-table-column
- v-if="!useChannel"
- width="20%"
- key="adPhotoPlayedT3sUrl"
- data-index="adPhotoPlayedT3sUrl"
- title="第三方有效播放监测链接"
- align="center"
- :ellipsis="true"
- >
- <template slot-scope="text, record">
- <editable-cell
- :text="text"
- @change="onCellChange(record.id, 'adPhotoPlayedT3sUrl', $event)"
- />
- </template>
- </a-table-column> -->
- <a-table-column
- v-if="useChannel"
- width="10%"
- key="action"
- data-index="action"
- title="操作"
- align="center"
- :ellipsis="true"
- >
- <template slot-scope="text, record">
- <a @click="lookChannel(record.appName)">详情</a>
- </template>
- </a-table-column>
- </a-table>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="转化跟踪">
- <span v-if="convertId && !convert" style="display:block;font-size:16px"
- >已选择转化目标: {{ convertId.label }}</span
- >
- <a-button type="primary" @click="showConvert">{{
- convertId ? '更换转化目标' : '选择转化目标'
- }}</a-button>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="getFormData('formTargetApp', 'platformOs') != 2">
- <a-col :span="16">
- <a-form-item v-bind="tailFormDrawerItemLayout">
- <a-checkbox
- v-decorator="[
- 'useAppMarket',
- {
- valuePropName: 'checked',
- initialValue: false
- }
- ]"
- >
- 优先从系统应用商店下载
- </a-checkbox>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row
- :gutter="16"
- v-if="
- getFormData('formTargetApp', 'platformOs') != 2 && getFormData('formTargetApp', 'useAppMarket')
- "
- >
- <a-col :span="24">
- <a-form-item v-bind="tailFormDrawerItemLayout" style="margin-left:-12%">
- 请勾选投放应用已上架的应用商店(默认全选)
- <a-checkbox-group
- v-decorator="[
- 'appStore',
- {
- initialValue: []
- }
- ]"
- >
- <a-checkbox value="huawei">华为</a-checkbox>
- <a-checkbox value="oppo">OPPO</a-checkbox>
- <a-checkbox value="vivo">VIVO</a-checkbox>
- <a-checkbox value="xiaomi">小米</a-checkbox>
- <a-checkbox value="meizu">魅族</a-checkbox>
- <a-checkbox value="smartisan">锤子</a-checkbox>
- </a-checkbox-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="应用下载详情页">
- <a-select
- v-decorator="['siteId']"
- showSearch
- allowClear
- placeholder="选择应用下载详情页"
- optionFilterProp="children"
- :filterOption="filterOption"
- style="width:400px"
- >
- <a-select-option
- v-for="appModel in siteList"
- :key="appModel.siteId"
- :value="appModel.siteId"
- >
- {{ appModel.name }}
- </a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- <div
- :style="{
- position: 'absolute',
- right: 0,
- bottom: 0,
- width: '100%',
- borderTop: '1px solid #e9e9e9',
- padding: '10px 16px',
- background: '#fff',
- textAlign: 'right',
- zIndex: 1
- }"
- >
- <a-button :style="{ marginRight: '8px' }" @click="closeUnit"> 取消 </a-button>
- <a-button type="primary" @click="submitApp"> 提交 </a-button>
- </div>
- </a-drawer>
- <!-- 定向包选择 -->
- <a-drawer
- :width="800"
- :visible="targetPersonVisible"
- :body-style="{ paddingBottom: '80px' }"
- @close="closePerson"
- >
- <!-- @close="closeUnit('createForm')" -->
- <h2 slot="title" style="margin-bottom: 0">定向包选择</h2>
- <span style="color:red;">该页面仅展示与目标应用所选系统相同或包含目标应用系统的定向包</span>
- <div style="display: flex;justify-content:space-between;margin-top:10px">
- <div>
- <a-input placeholder="输入定向包名称关键词" style="width:50%" v-model="searchTemplate" />
- <a-button
- type="primary"
- :style="{ marginRight: '8px', marginLeft: '8px' }"
- @click="
- ipagination.current = 1
- getTargetPerson()
- "
- >
- 查询
- </a-button>
- <a-button
- @click="
- searchTemplate = null
- ipagination.current = 1
- checkPerson = checkPersonElse
- getTargetPerson()
- "
- >
- 重置
- </a-button>
- </div>
- <div style="display:flex">
- <div style="line-height: 32px;font-weight: 700;margin:0 20px;">已选择({{ sumContent }})</div>
- <a-button type="primary" @click="addNewTemplate">
- 新增定向包
- </a-button>
- </div>
- </div>
- <a-checkbox-group v-model="checkPerson" style="width: 100%;" @change="setVideoData">
- <div class="card-person-drawer info-detail">
- <a-card
- :title="item.targetName"
- class="card-person card-item"
- v-for="(item, index) in personList"
- :key="item.id"
- >
- <div slot="extra">
- <a-checkbox :value="item.id" @change="setData(item.id)"></a-checkbox>
- </div>
- <template slot="actions" class="ant-card-actions">
- <a-icon key="edit" type="edit" @click="editNewTemplate(item)" />
- <a-icon key="delete" type="delete" @click="deleteNewTemplate(item.id)" />
- </template>
- <div class="card-main-case">
- <a-row style="margin-top:10px">
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 人群:</span>
- <div v-if="item" style="word-break: break-all;">
- <span
- v-if="
- (!item.population && !item.excludePopulation) ||
- (item.population == '[]' && item.excludePopulation == '[]')
- "
- >
- 不限
- </span>
- <span
- v-else-if="
- item.population &&
- (!item.excludePopulation || item.excludePopulation == '[]')
- "
- >
- 定向人群:{{ JSON.parse(item.population).join() }}
- </span>
- <span
- v-else-if="
- item.excludePopulation && (!item.population || item.population == '[]')
- "
- >
- 排除人群:{{ JSON.parse(item.excludePopulation).join() }}
- </span>
- <span v-else>
- 定向人群:{{ JSON.parse(item.population).join() }} <br />排除人群:{{
- JSON.parse(item.excludePopulation).join()
- }}</span
- >
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row style="margin-top:10px">
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 地区:</span>
- <div v-if="item">
- <span
- v-if="
- item.region == '' ||
- item.region == null ||
- JSON.parse(item.region).length == 0
- "
- >
- 不限
- </span>
- <div v-else>
- {{ item.regionName.join(',') }}
- </div>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 年龄:</span>
- <div v-if="item">
- <span
- v-if="
- (item.agesRange == '[]' || item.agesRange == null) &&
- (item.min == -1 || item.min == null) &&
- (item.max == -1 || item.max == null)
- "
- >
- 不限
- </span>
- <div v-else>
- <span v-if="item.agesRange == '[]' || item.agesRange == null">
- {{ item.min + '岁~' + item.max + '岁' }}
- </span>
- <span v-else>
- <span v-for="(items, index) in JSON.parse(item.agesRange)" :key="index">
- {{ items | kuaishouAge
- }}{{ index == JSON.parse(item.agesRange).length - 1 ? '' : ',' }}
- </span>
- </span>
- </div>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 性别:</span>
- <div v-if="item">
- {{ item.gender == 1 ? '女' : item.gender == 2 ? '男' : '不限' }}
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 最低版本:</span>
- <div v-if="item">
- {{
- item.platformOs == 1
- ? 'Android系统(' +
- (item.androidOsv == 3 ? '不限)' : item.androidOsv + 'x+)')
- : item.platformOs == 2
- ? 'IOS系统(' + (item.iosOsv == 6 ? '不限)' : item.iosOsv + 'x+)')
- : '不限'
- }}
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 设备品牌:</span>
- <div v-if="item">
- <span
- v-if="
- item.deviceBrand == '' ||
- item.deviceBrand == null ||
- JSON.parse(item.deviceBrand).length == 0
- "
- >
- 不限
- </span>
- <span v-else>
- <span v-for="(items, index) in JSON.parse(item.deviceBrand)" :key="index">
- {{ items | deviceBrand
- }}{{ index == JSON.parse(item.deviceBrand).length - 1 ? '' : ',' }}
- </span>
- </span>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 设备价格:</span>
- <div v-if="item">
- <span
- v-if="
- item.devicePrice == '' ||
- item.devicePrice == null ||
- JSON.parse(item.devicePrice).length == 0
- "
- >
- 不限
- </span>
- <span v-else>
- <span v-for="(items, index) in JSON.parse(item.devicePrice)" :key="index">
- {{ items | kuaishouPrice
- }}{{ index == JSON.parse(item.devicePrice).length - 1 ? '' : ',' }}
- </span>
- </span>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 商业兴趣:</span>
- <div>
- <span
- v-if="
- item.businessInterest == '[]' ||
- item.businessInterest == null ||
- item.businessInterest == ''
- "
- >
- 不限
- </span>
- <div v-else>
- <span
- v-for="(items, index) in JSON.parse(item.businessInterest)"
- :key="index"
- >
- {{ items | business }}
- {{ index == JSON.parse(item.businessInterest).length - 1 ? '' : ',' }}
- </span>
- </div>
- </div>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 网红粉丝:</span>
- <span v-if="item.fansStar == '[]' || item.fansStar == null || item.fansStar == ''">
- 不限
- </span>
- <div v-else>
- <span v-for="(items, index) in JSON.parse(item.fansStar)" :key="index">
- {{ items | fansStarLabel }}
- {{ index == JSON.parse(item.fansStar).length - 1 ? '' : ',' }}
- </span>
- </div>
- </a-col>
- </a-row>
- <a-row v-if="item.platformOs == 1">
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> APP行为:</span>
- <div v-if="item">
- <span
- v-if="
- (item.appIds == '[]' || item.appIds == null || item.appIds == '') &&
- (item.appInterest == '[]' ||
- item.appInterest == null ||
- item.appInterest == '')
- "
- >
- 不限
- </span>
- <div v-else>
- <span
- v-if="item.appIds == '[]' || item.appIds == null || item.appIds == ''"
- >
- <span
- v-for="(items, index) in JSON.parse(item.appInterest)"
- :key="index"
- >
- {{ items | optionsApp
- }}{{ index == JSON.parse(item.appInterest).length - 1 ? '' : ',' }}
- </span>
- </span>
- <span v-else>
- <span v-for="(items, index) in JSON.parse(item.appIds)" :key="index">
- {{ items }}
- </span>
- </span>
- </div>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 兴趣视频用户:</span>
- <div v-if="item">
- <span
- v-if="
- item.interestVideo == '[]' ||
- item.interestVideo == null ||
- item.interestVideo == ''
- "
- >
- 不限
- </span>
- <div v-else>
- <span v-for="(items, index) in JSON.parse(item.interestVideo)" :key="index">
- {{ items | interestVideo
- }}{{ index == JSON.parse(item.interestVideo).length - 1 ? '' : ',' }}
- </span>
- </div>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 网络环境:</span>
- <div v-if="item">
- {{ item.network == 1 ? 'Wi-Fi' : item.network == 2 ? '移动网络' : '不限' }}
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 过滤已转换用户:</span>
- <div v-if="item">
- {{ item.filterConvertedLevel | kuaishouFilterConvertedLevel }}
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 智能扩量:</span>
- <div v-if="item">
- {{ item.isOpen == 0 ? '关闭' : '开启' }}
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- </div>
- </a-card>
- </div>
- </a-checkbox-group>
- <a-pagination
- size="small"
- :showTotal="ipagination.showTotal"
- style="float: right"
- v-if="personList.length > 0"
- showQuickJumper
- :pageSize.sync="ipagination.pageSize"
- :total="ipagination.total"
- v-model="ipagination.current"
- @change="getDataSource"
- />
- <div
- :style="{
- position: 'absolute',
- right: 0,
- bottom: 0,
- width: '100%',
- borderTop: '1px solid #e9e9e9',
- padding: '10px 16px',
- background: '#fff',
- textAlign: 'right',
- zIndex: 1
- }"
- >
- <a-button :style="{ marginRight: '8px' }" @click="closePerson"> 取消 </a-button>
- <a-button type="primary" @click="submitPerson" :loading="personLoading"> 提交 </a-button>
- </div>
- </a-drawer>
- <!-- 创意信息编辑 -->
- <a-drawer
- :width="900"
- :visible="optimizeVisible"
- :body-style="{ paddingBottom: '80px' }"
- @close="closeCreative"
- >
- <!-- @close="closeUnit('createForm')" -->
- <h2 slot="title" style="margin-bottom: 0">创意信息</h2>
- <!-- class="create-info" -->
- <a-form layout="horizontal" v-bind="formDrawerItemLayout" :form="formOriginality">
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="创意制作方式">
- <a-radio-group
- button-style="solid"
- @change="unitTypeCheck"
- v-decorator="[
- 'unitType',
- {
- rules: [
- {
- required: true,
- message: '创意制作方式必选'
- }
- ],
- initialValue: 0
- }
- ]"
- >
- <a-radio-button :value="0">不限</a-radio-button>
- <a-radio-button :value="4">自定义</a-radio-button>
- <a-radio-button :value="7">程序化</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16" style="width: 110%;margin-left: -11%;">
- <a-form-item label="广告位置">
- <!-- { label: '视频播放页广告', value: 3 }, -->
- <checkBoxGroup
- :options="[
- { label: '优选广告位', value: 1 },
- { label: '上下滑大屏广告', value: 6 },
- { label: '激励视频广告', value: 24 },
- { label: '联盟广告', value: 5 }
- ]"
- v-decorator="[
- 'sceneId',
- {
- rules: [
- {
- required: true,
- message: '转化目标必选'
- }
- ],
- initialValue: [1]
- }
- ]"
- @change="changeData"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="getFormData('formOriginality', 'unitType') != 7">
- <a-col :span="16">
- <a-form-item label="自定义计划数量">
- <a-input-number
- style="width:200px"
- :max="600"
- :step="1"
- :min="1"
- v-decorator="[
- 'customPlanCnt',
- { initialValue: 3, rules: [{ required: true, message: '请填写自定义计划数量' }] }
- ]"
- @change="setImageCnt"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="getFormData('formOriginality', 'unitType') != 7">
- <a-col :span="16">
- <a-form-item>
- <span slot="label">
- <a-tooltip>
- <template slot="title">
- 每日创建组数量为广告计划数量*广告组,自定义创意组每日最多600
- </template>
- <a-icon type="question-circle" />
- </a-tooltip>
- 自定义组数量
- </span>
- <a-input-number
- style="width:200px"
- :max="unitCntMax"
- :step="1"
- :min="1"
- v-decorator="[
- 'customUnitCnt',
- { initialValue: 120, rules: [{ required: true, message: '请填写自定义组数量' }] }
- ]"
- @change="setCreativeCntMax"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="getFormData('formOriginality', 'unitType') != 7">
- <a-col :span="16">
- <a-form-item label="自定义创意数量">
- <a-input-number
- style="width:200px"
- :max="creativeCntMax"
- :step="1"
- :min="1"
- v-decorator="[
- 'imageCnt',
- { initialValue: 5, rules: [{ required: true, message: '请填写自定义创意数量' }] }
- ]"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="getFormData('formOriginality', 'unitType') != 4">
- <a-col :span="16">
- <a-form-item label="程序化计划数量">
- <a-input-number
- v-decorator="[
- 'programPlanCnt',
- { initialValue: 3, rules: [{ required: true, message: '请填写程序化计划数量' }] }
- ]"
- style="width:200px"
- placeholder="仅支持输入自然数"
- :max="300"
- :precision="0"
- :step="1"
- @change="setProgramUnitCnt"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="getFormData('formOriginality', 'unitType') != 4">
- <a-col :span="16">
- <a-form-item>
- <span slot="label">
- <a-tooltip>
- <template slot="title">
- 每日创建组数量为广告计划数量*广告组,程序化创意组最多300
- </template>
- <a-icon type="question-circle" />
- </a-tooltip>
- 程序化组数量
- </span>
- <a-input-number
- v-decorator="[
- 'programUnitCnt',
- { initialValue: 100, rules: [{ required: true, message: '请填写程序化组数量' }] }
- ]"
- style="width: 200px"
- placeholder="仅支持输入自然数"
- :max="imageCntMax"
- :precision="0"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="素材类型">
- <a-radio-group
- button-style="solid"
- v-decorator="['channelType', { rules: [{ required: true }], initialValue: 2 }]"
- >
- <a-radio-button :value="2">不限</a-radio-button>
- <a-radio-button :value="0">内部</a-radio-button>
- <a-radio-button :value="1">素造</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="素材挖掘">
- <a-radio-group
- button-style="solid"
- v-decorator="['assetMining', { rules: [{ required: true }], initialValue: 1 }]"
- >
- <a-radio-button :value="1">开启</a-radio-button>
- <a-radio-button :value="0">关闭</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="智能抽帧">
- <a-radio-group
- button-style="solid"
- v-decorator="['smartCover', { rules: [{ required: true }], initialValue: 1 }]"
- >
- <a-radio-button :value="1">开启</a-radio-button>
- <a-radio-button :value="0">关闭</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="行动号召">
- <a-select
- mode="multiple"
- v-decorator="[
- 'actionBarText',
- { rules: [{ required: true, message: '请选择行动号召按钮文案' }] }
- ]"
- showSearch
- allowClear
- placeholder="选择行动号召按钮文案"
- optionFilterProp="children"
- :filterOption="filterOption"
- >
- <a-select-option
- v-for="appModel in actionBarTextList"
- :key="appModel.id"
- :value="appModel.actionBarText"
- >
- {{ appModel.actionBarText }}
- </a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="广告语">
- <span style="color:red">
- 广告语最多30条,超过30条的部分将被截取;
- <br />
- 每条广告语最多30字,超过30字将截取
- </span>
- <div style="max-height:200px;overflow-y:auto;border:1px solid #f2f2f2;padding:10px 0">
- <div style="position:relative" v-for="(item, index) in descriptionList" :key="index">
- <a-textarea
- class="rending"
- placeholder="请输入广告语"
- @change="descriptionchange(item.value, index)"
- v-model="item.value"
- :autosize="{ minRows: 2, maxRows: 6 }"
- :max-length="30"
- style=" width: 80%;"
- ></a-textarea>
- <p
- style="
- font-size: 12px;
- color: #b6bbc7;
- letter-spacing: 0.3px;
- text-align: right;
- line-height: 30px;
- position: absolute;
- bottom: 0;
- left: 0;
- width: 80%;
- margin-bottom: 0;
- "
- >
- {{ item.value.length }}/30
- <!-- {{ getFormData('description').length }}/30 -->
- </p>
- <div style="position:absolute;right:0;top:-10px">
- <a-icon
- type="plus"
- @click="addDescription()"
- style="margin-right:15px"
- v-if="descriptionList.length < 30"
- />
- <a-icon
- type="minus"
- @click="removeDescription(index)"
- v-if="descriptionList.length > 1"
- />
- </div>
- </div>
- </div>
- <div style="display:flex">
- <a style="margin-right:10px" @click="selectDescription">选择广告语</a>
- <a @click="importExcel">导入广告语</a>
- </div>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="创意分类">
- <a-cascader
- :options="createOptions"
- v-decorator="[
- 'creativeCategory',
- {
- initialValue: []
- }
- ]"
- :fieldNames="fieldNames"
- placeholder="请选择创意分类"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="创意标签">
- <a-select
- mode="tags"
- style="width: 100%"
- placeholder="按回车生成标签"
- v-decorator="[
- 'creativeTag',
- {
- initialValue: [],
- rules: [
- {
- validator: creativeTagValid
- }
- ]
- }
- ]"
- dropdownClassName="display-none-selset"
- :token-separators="[',', ' ', ',']"
- >
- </a-select>
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- <div
- :style="{
- position: 'absolute',
- right: 0,
- bottom: 0,
- width: '100%',
- borderTop: '1px solid #e9e9e9',
- padding: '10px 16px',
- background: '#fff',
- textAlign: 'right',
- zIndex: 1
- }"
- >
- <a-button :style="{ marginRight: '8px' }" @click="closeCreative"> 取消 </a-button>
- <a-button type="primary" @click="submitCreative"> 提交 </a-button>
- </div>
- </a-drawer>
- <a-modal v-model="convert" title="选择转化目标">
- <template slot="footer">
- <a-button key="back" @click="convert = false">取消</a-button>
- <a-button key="submit" type="primary" @click="convertOk">
- 确定
- </a-button>
- </template>
- <a-form-item
- label="追踪方式"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- >
- <a-radio-group buttonStyle="solid" v-model="convertType" @change="convertChange">
- <a-radio-button
- value="1"
- v-show="
- getFormData('formProject', 'campaignType') == 4 ||
- getFormData('formProject', 'campaignType') == 5
- "
- >JS布玛</a-radio-button
- >
- <a-radio-button
- value="2"
- v-show="
- getFormData('formProject', 'campaignType') == 4 ||
- getFormData('formProject', 'campaignType') == 5
- "
- >Xpath</a-radio-button
- >
- <a-radio-button value="3" v-show="getFormData('formProject', 'campaignType') == 2"
- >应用-SDK
- </a-radio-button>
- <a-radio-button value="7" v-show="getFormData('formProject', 'campaignType') == 2"
- >应用-API</a-radio-button
- >
- </a-radio-group>
- </a-form-item>
- <a-form-item
- label="选择转化"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- >
- <a-select allowClear labelInValue style="width:100%" v-model="convertId" @focus="getConvertList">
- <a-select-option :value="item.convert_id" v-for="item in convertList" :key="item.convert_id">
- {{ item.convert_name }}</a-select-option
- >
- </a-select>
- </a-form-item>
- </a-modal>
- <a-modal v-model="lookChannelVisible" :footer="null" :width="1000" :zIndex="1000000">
- <a-table
- :columns="TTcolumns"
- :dataSource="lookChannelList"
- :pagination="lookChannelIpagination"
- :loading="lookChannelLoading"
- bordered
- size="middle"
- style="word-break: break-all;font-size:16px;font-weight:600;margin-top: 20px;"
- id="outTable"
- ref="accountTable"
- rowKey="id"
- :scroll="{x:1400}"
- >
- </a-table>
- </a-modal>
- <a-modal v-model="importExcelVisible" :footer="null" title="导入广告语" class="import-padding-top">
- <span style="color:red;display:flex"
- >最多只能输入30条广告语,从excel文档第一行开始,每行为一条,每条不能超过30字,超过后该条文案不予上传</span
- >
- <br />
- <a-upload
- name="file"
- :multiple="false"
- :headers="tokenHeader"
- :file-list="fileList"
- :showUploadList="false"
- :beforeUpload="beforeUpload"
- @change="handleChange"
- style="margin-right: 20px"
- class="require-class fileUpload"
- id="fileUpload"
- >
- <a-button :disabled="loadDisabled">
- <a-icon type="upload" />
- {{ loadDisabled ? '上传中,请稍后' : '文件上传' }}
- </a-button>
- </a-upload>
- </a-modal>
- <a-modal v-model="selectDescriptionVisible" title="选择广告语">
- <template slot="footer">
- <a-button
- key="back"
- @click="
- selectDescriptionVisible = false
- selectDescriptionArr = []
- "
- >取消</a-button
- >
- <a-button key="submit" type="primary" @click="okDescription">
- 确定
- </a-button>
- </template>
- 已选广告语:{{ selectDescriptionArr.length }}
- <a-checkbox-group v-model="selectDescriptionArr" style="width:100%;margin-top:10px">
- <a-list bordered :data-source="descriptionListCheck" style="width:100%;max-height: 450px;overflow:auto">
- <a-list-item slot="renderItem" slot-scope="item, index">
- <a-checkbox :value="item.copy_writer">
- {{ item.copy_writer }}
- </a-checkbox>
- </a-list-item>
- </a-list>
- </a-checkbox-group>
- </a-modal>
- <templateModal ref="templateModal" @getData="getTargetPerson" />
- </div>
- </template>
- <script>
- import Vue from 'vue'
- import { ACCESS_TOKEN } from '@/store/mutation-types'
- import $ from 'jquery'
- import Logo from '@/components/tools/Logo.vue'
- import pick from 'lodash.pick'
- import { mixin } from '@/utils/mixin.js'
- import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
- import moment from 'moment'
- import selectCheckAll from '@/components/formComponents/toutiaoTime'
- import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
- import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
- import selectTable from '@/views/modules/Statistics/components/selectPagination.vue'
- import EditableCell from './components/editablCell'
- import selectTreeAccount from '@/components/formComponents/selectAccount.vue'
- import templateModal from './components/templateModal'
- // import lookPreviewVue from './lookPreview.vue'
- function tqFun(qcArr1) {
- var tempArr = []
- function bbFun(qcArr) {
- for (var i = 0; i < qcArr.length; i++) {
- if (qcArr[i] instanceof Array) {
- bbFun(qcArr[i])
- } else {
- tempArr.push(qcArr[i])
- }
- }
- return tempArr
- }
- return bbFun(qcArr1)
- }
- let optionsAppActive = []
- let businessOptions = []
- let fansStarOptions = []
- let interestVideoOptions = []
- let TTcolumns = [
- {
- title: '渠道号',
- dataIndex: 'channelCode',
- scopedSlots: { customRender: 'channelCode' },
- align: 'center',
- key: 'channelCode'
- },
- {
- title: '渠道号名称',
- dataIndex: 'channelName',
- scopedSlots: { customRender: 'channelName' },
- align: 'center',
- key: 'channelName'
- },
- {
- title: '下载链接',
- dataIndex: 'url',
- scopedSlots: { customRender: 'url' },
- align: 'center',
- key: 'url',
- width: 300
- },
- {
- title: '调起链接',
- dataIndex: 'schemaUri',
- scopedSlots: { customRender: 'schemaUri' },
- align: 'center',
- key: 'schemaUri',
- width: 300
- },
- {
- title: '第三方点击监测链接',
- dataIndex: 'clickTrackUrl',
- scopedSlots: { customRender: 'clickTrackUrl' },
- align: 'center',
- key: 'clickTrackUrl',
- width: 300
- },
- {
- title: '第三方actionBar监测链接',
- dataIndex: 'actionbarClickUrl',
- scopedSlots: { customRender: 'actionbarClickUrl' },
- align: 'center',
- key: 'actionbarClickUrl',
- width: 300
- }
- ]
- export default {
- name: 'GlobalHeader',
- components: {
- // UserMenu,
- // SMenu,
- Logo,
- Treeselect,
- selectCheckAll,
- checkBoxGroup,
- selectTable,
- EditableCell,
- selectTreeAccount,
- templateModal
- },
- mixins: [mixin],
- props: {
- mode: {
- type: String,
- // sidemenu, topmenu
- default: 'sidemenu'
- },
- theme: {
- type: String,
- required: false,
- default: 'dark'
- },
- collapsed: {
- type: Boolean,
- required: false,
- default: false
- },
- device: {
- type: String,
- required: false,
- default: 'desktop'
- }
- },
- data() {
- return {
- formProject: this.$form.createForm(this), //选择项目表单
- formInformation: this.$form.createForm(this), //设置基本信息表单
- formTargetApp: this.$form.createForm(this), //目标应用编辑表单
- formOptimize: this.$form.createForm(this), //优化目标表单
- formOriginality: this.$form.createForm(this), //创意表单
- formMaterial: this.$form.createForm(this), //素材表单
- sumbitLoading: false,
- siteList: [],
- //基本信息参数
- formInformationVisible: false,
- formInformaData: null,
- budgetType: '1',
- dayBudgetType: '1',
- projectId: null,
- projectName: null,
- accountId: null,
- //目标应用参数
- targetAppVisible: false,
- appList: [], //分平台数据,从总数据中筛选,避免多次请求接口
- appListAll: [], //所有的数据,做分平台的元数据
- tongbuLoading: false, //同步app按钮loading
- uriCheck: false, //调起链接,是否开启
- multipleBidDataDrawer: [],
- multipleBidData: [],
- appDetail: { useChannel: false },
- appDetailMiddle: null,
- personLoading: false,
- useChannel: false,
- channelData: null,
- convertId: null,
- convertList: [],
- convertType: '1',
- convert: false,
- TTcolumns,
- lookChannelVisible: false,
- lookChannelAppName: '',
- lookChannelList: [],
- lookChannelLoading: false,
- lookChannelIpagination: {
- current: 1,
- pageSize: 10,
- // pageSizeOptions: ['10', '20', '30'],
- showTotal: (total, range) => {
- return range[0] + '-' + range[1] + ' 共' + total + '条'
- },
- showQuickJumper: true,
- showSizeChanger: false,
- pageSizeOptions: ['10', '30', '50'],
- total: 0,
- onChange: (current, pageSize) => {
- // 切换分页时的回调,
- // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
- this.lookChannelIpagination.current = current
- this.lookChannelIpagination.pageSize = pageSize
- this.lookChannel(this.lookChannelAppName)
- }
- },
- //目标人群参数
- targetPersonVisible: false,
- personList: [],
- checkPerson: [],
- checkPersonAll: [],
- checkPersonElse: [],
- checkPersonOne: '',
- showCheckPerson: [],
- sumContent: 0,
- searchTemplate: '',
- ipagination: {
- current: 1,
- pageSize: 9,
- // pageSizeOptions: ['10', '20', '30'],
- showTotal: (total, range) => {
- return range[0] + '-' + range[1] + ' 共' + total + '条'
- },
- showQuickJumper: true,
- showSizeChanger: false,
- pageSizeOptions: ['10', '30', '50'],
- total: 0,
- onChange: (current, pageSize) => {
- // 切换分页时的回调,
- // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
- this.ipagination.current = current
- this.ipagination.pageSize = pageSize
- this.getTargetPerson()
- }
- },
- //优化目标参数
- groupTypeData: {},
- //创意信息参数
- optimizeVisible: false,
- adposition: 1,
- programUnitCnt: 60,
- customUnitCnt: 400,
- customUnitCntMax: 400,
- imageCntMax: 300,
- unitCntMax: 600,
- creativeCntMax: 15,
- actionBarTextList: [],
- descriptionList: [{ value: '' }],
- fieldNames: {
- label: 'category_name',
- value: 'category_id',
- children: 'child'
- },
- createOptions: [],
- showCreativeData: null,
- importExcelVisible: false,
- selectDescriptionVisible: false,
- selectDescriptionArr: [],
- descriptionListCheck: [],
- tokenHeader: { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) },
- fileList: [],
- fileUrl: '',
- loadDisabled: false,
- dataFile: null,
- //公共参数
- activeStep: 0,
- screenWidth: document.body.clientWidth,
- headerBarFixed: false,
- //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
- topMenuStyle: {
- headerIndexLeft: {},
- topNavHeader: {},
- headerIndexRight: {},
- topSmenuStyle: {}
- },
- stepsArr: [
- { title: '选择项目' },
- // { title: '设置基本信息' },
- { title: '优化目标' },
- { title: '目标应用' },
- { title: '目标人群' },
- { title: '创意信息' },
- { title: '素材信息' }
- ],
- formItemLayout: {
- labelCol: { span: 4 },
- wrapperCol: { span: 16 }
- },
- formDrawerItemLayout: {
- labelCol: { span: 6 },
- wrapperCol: { span: 18 }
- },
- tailFormItemLayout: {
- wrapperCol: {
- sm: {
- span: 20,
- offset: 4
- }
- }
- },
- tailFormItemLayoutElse: {
- wrapperCol: {
- sm: {
- span: 20,
- offset: 1
- }
- }
- },
- tailFormDrawerItemLayout: {
- wrapperCol: {
- sm: {
- span: 18,
- offset: 6
- }
- }
- },
- disabled: false
- }
- },
- computed: {},
- watch: {},
- mounted() {
- this.$nextTick(function() {
- // this.accountId = 23212
- this.getDataType('APP_INTEREST', 'optionsAppActive')
- this.getDataType('BUSINESS_INTEREST', 'businessOptions')
- this.getDataType('FANS_STAR', 'fansStarOptions')
- this.getDataType('INTEREST_VIDEO', 'interestVideoOptions')
- this.getActionBarText()
- if (this.$route.query.id) {
- this.getQueryById(this.$route.query.id)
- }
- window.addEventListener('scroll', this.onScroll)
- const that = this
- window.onresize = () => {
- return (() => {
- window.screenWidth = document.body.clientWidth
- that.screenWidth = window.screenWidth
- })()
- }
- })
- },
- filters: {
- unitType(val) {
- let data = {
- 4: '自定义',
- 7: '程序化',
- 0: '不限'
- }
- return data[val]
- },
- channelType(val) {
- let data = {
- 0: '内部',
- 1: '素造',
- 2: '不限'
- }
- return data[val]
- },
- business(theme) {
- let businessInterest = businessOptions.map(item => {
- return {
- tagId: item.tagId,
- tagName: item.tagName
- }
- })
- return businessInterest.filter(item => {
- return item.tagId == theme
- })[0].tagName
- },
- optionsApp(theme) {
- let optionsAppdata = optionsAppActive.map(item => {
- return {
- tagId: item.tagId,
- tagName: item.tagName
- }
- })
- return optionsAppdata.filter(item => {
- return item.tagId == theme
- })[0].tagName
- },
- fansStarLabel(theme) {
- let fansStarOptionsData = fansStarOptions.map(item => {
- return {
- tagId: item.tagId,
- tagName: item.tagName
- }
- })
- return fansStarOptionsData.filter(item => {
- return item.tagId == theme
- })[0].tagName
- },
- interestVideo(theme) {
- let interestVideoOptionsData = interestVideoOptions.map(item => {
- return {
- tagId: item.tagId,
- tagName: item.tagName
- }
- })
- return interestVideoOptionsData.filter(item => {
- return item.tagId == theme
- })[0].tagName
- }
- },
- methods: {
- moment,
- changeCampaignType(e) {
- if (e.target.value == 7) {
- this.uriCheck = true
- }else {
- this.uriCheck = false
- }
- },
- changeAccount() {
- // formProject: this.$form.createForm(this), //选择项目表单
- // formInformation: this.$form.createForm(this), //设置基本信息表单
- // formTargetApp: this.$form.createForm(this), //目标应用编辑表单
- // formOptimize: this.$form.createForm(this), //优化目标表单
- // formOriginality: this.$form.createForm(this), //创意表单
- // formMaterial: this.$form.createForm(this), //素材表单
- if (this.$route.query.id) {
- } else {
- this.formProject.resetFields()
- this.formOptimize.resetFields()
- this.formMaterial.resetFields()
- this.formInformation.resetFields()
- this.formOriginality.resetFields()
- this.formInformaData = null
- this.appDetail = { useChannel: false }
- this.multipleBidDataDrawer = []
- this.multipleBidData = []
- this.checkPerson = []
- this.checkPersonAll = []
- this.checkPersonElse = []
- this.checkPersonOne = ''
- this.showCheckPerson = []
- this.budgetType = '1'
- this.dayBudgetType = '1'
- this.useChannel = false
- this.channelData = null
- this.showCreativeData = null
- this.formInformaData = null
- this.descriptionList = [{ value: '' }]
- }
- },
- importExcel() {
- this.importExcelVisible = true
- },
- selectDescription() {
- this.selectDescriptionVisible = true
- this.selectDescriptionArr = []
- this.getDescriptionList()
- },
- okDescription() {
- if (this.selectDescriptionArr.length > 0) {
- var data = this.selectDescriptionArr.map(item => {
- return { value: item }
- })
- if (this.descriptionList[0].value == '') {
- this.descriptionList = data
- } else {
- for (let index = 0; index < this.descriptionList.length; index++) {
- if (this.descriptionList[index].value == '') {
- this.descriptionList.splice(index, 1)
- }
- }
- this.descriptionList.push(...data)
- }
- this.descriptionList.splice(30)
- this.selectDescriptionVisible = false
- } else {
- this.$message.error('请选择广告语')
- }
- },
- getDescriptionList() {
- var params = {}
- params.accountIds = this.getFormData('formProject', 'accountId')
- params.Keywords = null
- params.pageNumber = 1
- params.pageSize = 1000
- this.getAction('/document/library/getDocumentList', params).then(res => {
- if (res.success) {
- this.descriptionListCheck = res.result.list || []
- }
- })
- },
- beforeUpload(file) {
- this.dataFile = $('.fileUpload').find('input')[0].files[0]
- console.log(this.dataFile)
- this.loadDisabled = true
- },
- handleChange() {
- let formData = new FormData()
- formData.append('file', this.dataFile)
- this.postDataAction('/document/library/importAdLanguage', formData).then(res => {
- this.loadDisabled = false
- if (res.code === 200) {
- // console.log(res)
- var data = res.result.map(item => {
- return {
- value: item
- .replace(/\s*/g, '')
- .trim()
- .substring(0, 30)
- }
- })
- if (this.descriptionList[0].value == '') {
- this.descriptionList = data
- } else {
- for (let index = 0; index < this.descriptionList.length; index++) {
- if (this.descriptionList[index].value == '') {
- this.descriptionList.splice(index, 1)
- }
- }
- this.descriptionList.push(...data)
- }
- this.descriptionList.splice(30)
- this.importExcelVisible = false
- } else {
- this.$message.error(res.message)
- }
- })
- },
- convertOk() {
- var dataLink = []
- dataLink = this.convertList.filter(item => {
- return item.convert_id == this.convertId.key
- })
- if (dataLink.length > 0) {
- this.convert = false
- } else {
- this.convert = false
- this.convertId = ''
- }
- },
- getPageList(appId) {
- this.getAction('/kuaishou/batch/getPageList', {
- accountId: this.getFormData('formProject', 'accountId'),
- appId: appId,
- viewComp: 7
- }).then(res => {
- if (res.success) {
- this.siteList = res.result
- }
- })
- },
- getPlatForm(appId) {
- if (appId) {
- var data = this.appList.filter(item => {
- return item.appId == appId.key
- })
- return data[0].platform
- }
- },
- showConvert() {
- this.convertChange()
- if (this.getFormData('formProject', 'campaignType') == 2) {
- if (this.getFormData('formTargetApp', 'appId')) {
- this.convert = true
- let appIdvalue = this.getFormData('formTargetApp', 'appId')
- if (
- this.getPlatForm(appIdvalue instanceof Array ? appIdvalue[0] : appIdvalue) == 1 ||
- this.getPlatForm(appIdvalue instanceof Array ? appIdvalue[0] : appIdvalue) == 2
- ) {
- this.convertType = '3'
- } else {
- this.convertType = '7'
- }
- } else {
- this.$message.error('请选择应用')
- }
- } else {
- this.convert = true
- this.convertType = '1'
- }
- this.getConvertList()
- },
- convertChange() {
- this.convertId = ''
- this.getConvertList()
- },
- getConvertList() {
- var params = {}
- params.accountId = this.getFormData('formProject', 'accountId')
- params.type = this.convertType
- this.getAction('/kuaishou/batch/getConvertList', params).then(res => {
- //console.log(res)
- if (res.success) {
- this.convertList = res.result.map(item => {
- return {
- ...item,
- convert_id: item.convert_id + ''
- }
- })
- }
- })
- },
- changeChannel(checked) {
- if (checked) {
- if (!!this.getFormData('formProject', 'accountId')) {
- if (!!this.getFormData('formTargetApp', 'appId')) {
- if (
- this.getFormData('formTargetApp', 'singleAppid') == 0 &&
- this.getFormData('formTargetApp', 'appId').length == 0
- ) {
- this.useChannel = false
- this.$message.error('未选择应用不可开启')
- return
- }
- var paramsData = {}
- paramsData.appIdArray =
- this.getFormData('formTargetApp', 'appId') instanceof Array
- ? this.getFormData('formTargetApp', 'appId').map(item => {
- return item.key
- })
- : [this.getFormData('formTargetApp', 'appId').key]
- this.postDataAction('/kuaishou/kuaiShouAppList/getAppNames', paramsData).then(result => {
- var params = {}
- params.appNameArray = result.result.map(item => {
- return item.appName
- })
- params.accountId = this.getFormData('formProject', 'accountId')
- this.postDataAction('/channel/queryChannelLevel', params).then(res => {
- console.log(res)
- if (res.code === 200) {
- if (res.result) {
- this.channelData = res.result
- } else {
- this.useChannel = false
- this.$message.error(res.message)
- }
- } else {
- this.useChannel = false
- this.$message.error('该账户不能使用渠道号')
- }
- })
- })
- } else {
- this.useChannel = false
- this.$message.error('未选择应用不可开启')
- }
- } else {
- this.useChannel = false
- this.$message.error('未选择账户不可开启')
- }
- } else {
- this.channelData = null
- }
- },
- getQueryById(id) {
- this.getAction('/auto/aiKuaishouAccountAutoStrategy/queryById', { id }).then(res => {
- if (res.success) {
- this.getActionBarText()
- // this.getAction('/ctop/userAllocation/getAccountListByProjectId', {
- // projectId: res.result.projectId
- // }).then(res => {
- // if (res.success) {
- // }
- // })
- this.getAction('/kuaishou/batch/getCreativeCategory', {
- accountId: res.result.accountId
- }).then(result => {
- if (result.success) {
- //console.log(res)
- this.createOptions = result.result
- }
- })
- this.$nextTick(() => {
- let data = res.result
- this.formProject.setFieldsValue(pick(data, 'campaignType', 'accountId','intentionTarget'))
- this.formInformaData = {
- budgetType: data.campaignDayBudget ? '2' : '1',
- dayBudgetType: data.unitDayBudget ? '2' : '1',
- campaignName: data.campaignName,
- groupName: data.groupName,
- campaignDayBudget: data.campaignDayBudget ? data.campaignDayBudget / 1000 : undefined,
- unitDayBudget: data.unitDayBudget ? data.unitDayBudget / 1000 : undefined,
- groupStatus: data.groupStatus > -1 ? data.groupStatus : 1,
- campaignStatus: data.campaignStatus ? data.campaignStatus : 1
- }
- if (data.campaignDayBudget && data.campaignDayBudget > 0) {
- this.budgetType = '2'
- data.campaignDayBudget = data.campaignDayBudget / 1000
- setTimeout(() => {
- this.formInformation.setFieldsValue(pick(data, 'campaignDayBudget'))
- }, 100)
- } else {
- this.budgetType = '1'
- }
- if (data.unitDayBudget && data.unitDayBudget > 0) {
- this.dayBudgetType = '2'
- data.unitDayBudget = data.unitDayBudget / 1000
- setTimeout(() => {
- this.formInformation.setFieldsValue(pick(data, 'unitDayBudget'))
- }, 100)
- } else {
- this.dayBudgetType = '1'
- }
- data.deepConversionType =
- data.deepConversionType && data.deepConversionType != ''
- ? data.deepConversionType
- : undefined
- data.deepConversionBid =
- data.deepConversionBid && data.deepConversionBid != '' ? data.deepConversionBid : undefined
- if (data.deepConversionType && data.deepConversionBid && data.deepConversionBid != '') {
- if (res.result.deepConversionBid.includes('/')) {
- let bidArr = res.result.deepConversionBid.split('/')
- for (let index = 0; index < bidArr.length; index++) {
- bidArr[index] = bidArr[index] / 1000
- }
- data.deepConversionBid = bidArr.join('/')
- } else if (res.result.deepConversionBid.includes('-')) {
- let bidArr = res.result.deepConversionBid.split('-')
- for (let index = 0; index < bidArr.length; index++) {
- bidArr[index] = bidArr[index] / 1000
- }
- data.deepConversionBid = bidArr.join('-')
- } else {
- data.deepConversionBid = res.result.deepConversionBid / 1000 + ''
- }
- } else {
- data.deepConversionType = undefined
- data.deepConversionBid = undefined
- }
- if (data.cpaBid.includes('/')) {
- let bidArr = data.cpaBid.split('/')
- for (let index = 0; index < bidArr.length; index++) {
- bidArr[index] = bidArr[index] / 1000
- }
- data.cpaBid = bidArr.join('/')
- } else if (data.cpaBid.includes('-')) {
- let bidArr = data.cpaBid.split('-')
- for (let index = 0; index < bidArr.length; index++) {
- bidArr[index] = bidArr[index] / 1000
- }
- data.cpaBid = bidArr.join('-')
- } else {
- data.cpaBid = data.cpaBid / 1000 + ''
- }
- console.log(data.deepConversionBid, data.deepConversionType)
- this.formOptimize.setFieldsValue(
- pick(data, 'bidType', 'ocpxActionType', 'deepConversionType', 'cpaBid', 'deepConversionBid')
- )
- res.result.sourceMaterial = JSON.parse(res.result.sourceMaterial)
- this.formMaterial.setFieldsValue(pick(data, 'sourceMaterial', 'matchType', 'materialKeyword'))
- if (res.result.creativeCategory) {
- // let arr=[];
- if (res.result.creativeCategory > 10000) {
- res.result.creativeCategory = res.result.creativeCategory
- ? [
- parseInt(res.result.creativeCategory / 10000),
- parseInt(res.result.creativeCategory / 100),
- res.result.creativeCategory
- ]
- : []
- } else if (res.result.creativeCategory > 100) {
- res.result.creativeCategory = res.result.creativeCategory
- ? [parseInt(res.result.creativeCategory / 100), res.result.creativeCategory]
- : []
- } else {
- res.result.creativeCategory = res.result.creativeCategory
- ? [res.result.creativeCategory]
- : []
- }
- }
- res.result.creativeTag = res.result.creativeTag ? JSON.parse(res.result.creativeTag) : []
- this.descriptionList =
- res.result.description.charAt(0) === '['
- ? eval(res.result.description).map(item => {
- return { value: item }
- })
- : [{ value: res.result.description }]
- res.result.sceneId = JSON.parse(res.result.sceneId)
- data.actionBarText = data.actionBarText.split(',')
- this.showCreativeData = pick(
- data,
- 'unitType',
- 'sceneId',
- 'imageCnt',
- 'customPlanCnt',
- 'customUnitCnt',
- 'programPlanCnt',
- 'programUnitCnt',
- 'channelType',
- 'assetMining',
- 'smartCover',
- 'actionBarText',
- 'creativeCategory',
- 'creativeTag'
- )
- // this.appDetail = { platformOs: data.platformOs, singleAppid: 1 }
- this.useChannel = res.result.useChannel ? (res.result.useChannel == 1 ? true : false) : false
- if (data.campaignType == 7) {
- this.uriCheck = true
- } else {
- this.uriCheck = data.schemaUri && data.schemaUri != '' ? true : false
- }
- this.postDataAction('/kuaishou/kuaiShouAppList/getAppNames', {
- appIdArray: JSON.parse(data.appIdArray)
- }).then(result => {
- if (result.success) {
- this.multipleBidData = result.result.map(item => {
- return {
- ...item,
- impressionUrl: data.impressionUrl,
- clickTrackUrl: data.clickTrackUrl,
- actionbarClickUrl: data.actionbarClickUrl,
- adPhotoPlayedT3sUrl: data.adPhotoPlayedT3sUrl
- }
- })
- this.appDetail = {
- platformOs: result.result[0].platform < 3 ? 1 : 2,
- singleAppid: 1,
- appId: { key: result.result[0].appId },
- schemaUri: data.schemaUri,
- useChannel: this.useChannel,
- siteId: data.siteId,
- url: data.url,
- useAppMarket: data.useAppMarket ? (data.useAppMarket == 1 ? true : false) : false,
- appStore: data.appStore ? JSON.parse(data.appStore) : []
- }
- }
- })
- if (this.useChannel) {
- var paramsData = {}
- paramsData.appIdArray = JSON.parse(data.appIdArray)
- this.postDataAction('/kuaishou/kuaiShouAppList/getAppNames', paramsData).then(result => {
- var params = {}
- params.appNameArray = result.result.map(item => {
- return item.appName
- })
- params.accountId = data.accountId
- this.postDataAction('/channel/queryChannelLevel', params).then(res => {
- if (res.code === 200) {
- if (res.result) {
- this.channelData = res.result
- } else {
- this.useChannel = false
- this.$message.error(res.message)
- }
- } else {
- this.useChannel = false
- this.$message.error('该账户不能使用渠道号')
- }
- })
- })
- }
- this.getPageList(data.appId)
- this.checkPerson = JSON.parse(data.autoTargetArray)
- this.checkPersonElse = JSON.parse(data.autoTargetArray)
- if (data.autoTargetArray) {
- this.postDataAction('/auto/aiKuaishouAccountAutoTarget/getAutoTargetByIds', {
- ids: this.checkPerson
- }).then(res => {
- if (res.success) {
- this.showCheckPerson = res.result.map(item => {
- return {
- ...item,
- regionName: []
- }
- })
- for (let i = 0; i < this.showCheckPerson.length; i++) {
- if (
- this.showCheckPerson[i] &&
- (this.showCheckPerson[i].region == '' ||
- this.showCheckPerson[i].region == null ||
- JSON.parse(this.showCheckPerson[i].region).length == 0)
- ) {
- } else {
- // this.showRegion(this.personList[i].region, this.personList[i].regionName)
- let that = this
- new Promise((resolve, reject) => {
- this.postDataAction('/kuaishou/batch/getRegionDetail', {
- regionArr: that.showCheckPerson[i].region
- }).then(res => {
- if (res.success) {
- // this.populationData.allForm.region = res.result
- that.showCheckPerson[i].regionName = res.result.map(item => {
- return item.label
- })
- }
- })
- })
- }
- }
- }
- })
- }
- })
- }
- })
- },
- handleSubmit() {
- let formProjectData = new Promise((resolve, reject) => {
- this.formProject.validateFields((err, values) => {
- if (!err) {
- resolve({ ...values })
- } else {
- reject('选择项目表单出错')
- }
- })
- })
- let formInformationData = new Promise((resolve, reject) => {
- this.formInformation.validateFields((err, values) => {
- if (!err) {
- resolve({ ...values })
- } else {
- reject('基本信息出错')
- }
- })
- })
- let formOptimizeData = new Promise((resolve, reject) => {
- this.formOptimize.validateFields((err, values) => {
- console.log(values, err)
- if (!err) {
- resolve({ ...values })
- } else {
- reject('优化目标出错')
- }
- })
- })
- let formMaterialData = new Promise((resolve, reject) => {
- this.formMaterial.validateFields((err, values) => {
- if (!err) {
- resolve({ ...values })
- } else {
- reject('出错')
- }
- })
- })
- this.getAction('/auto/aiKuaishouAccountAutoStrategy/checkStrategy', {
- accountId: this.getFormData('formProject', 'accountId'),
- type: 1
- }).then(res => {
- if (res.success) {
- Promise.all([formProjectData, formOptimizeData, formMaterialData])
- .then(res => {
- console.log(res, this.formInformaData)
- if (
- !this.showCreativeData ||
- this.showCheckPerson.length === 0 ||
- this.multipleBidData.length === 0 ||
- !this.formInformaData.campaignName ||
- !this.formInformaData.groupName
- ) {
- this.$message.error('请填写完整')
- return
- }
- this.sumbitLoading = true
- let params = {
- ...res[0],
- ...res[1],
- ...res[2],
- ...this.showCreativeData,
- ...this.formInformaData,
- appStore: this.appDetail.appStore ? JSON.stringify(this.appDetail.appStore) : '[]',
- useAppMarket: this.appDetail.useAppMarket,
- schemaUri: this.appDetail.schemaUri ? this.appDetail.schemaUri : '',
- siteId: this.appDetail.siteId ? this.appDetail.siteId : '',
- url: this.appDetail.url ? this.appDetail.url : ''
- }
- if (this.budgetType === '2') {
- params.campaignDayBudget = params.campaignDayBudget * 1000
- } else {
- params.campaignDayBudget = 0
- }
- if (this.dayBudgetType === '2') {
- params.unitDayBudget = params.unitDayBudget * 1000
- } else {
- params.unitDayBudget = 0
- }
- if (params.cpaBid) {
- if ((params.cpaBid + '').includes('/')) {
- let bidArr = params.cpaBid.split('/')
- for (let index = 0; index < bidArr.length; index++) {
- bidArr[index] = bidArr[index] * 1000
- }
- params.cpaBid = bidArr.join('/')
- } else if ((params.cpaBid + '').includes('-')) {
- let bidArr = params.cpaBid.split('-')
- for (let index = 0; index < bidArr.length; index++) {
- bidArr[index] = bidArr[index] * 1000
- }
- params.cpaBid = bidArr.join('-')
- } else {
- params.cpaBid = params.cpaBid * 1000
- }
- } else {
- params.cpaBid = 0
- }
- if (params.deepConversionBid && params.deepConversionBid != 0) {
- if ((params.deepConversionBid + '').includes('/')) {
- let bidArr = params.deepConversionBid.split('/')
- for (let index = 0; index < bidArr.length; index++) {
- bidArr[index] = bidArr[index] * 1000
- }
- params.deepConversionBid = bidArr.join('/')
- } else if ((params.deepConversionBid + '').includes('-')) {
- let bidArr = params.deepConversionBid.split('-')
- for (let index = 0; index < bidArr.length; index++) {
- bidArr[index] = bidArr[index] * 1000
- }
- params.deepConversionBid = bidArr.join('-')
- } else {
- params.deepConversionBid = params.deepConversionBid * 1000
- }
- } else {
- params.deepConversionBid = 0
- }
- if (params.creativeCategory && params.creativeCategory.length > 0) {
- params.creativeCategory = params.creativeCategory[params.creativeCategory.length - 1]
- } else {
- params.creativeCategory = undefined
- }
- params.creativeTag = params.creativeTag ? JSON.stringify(params.creativeTag) : undefined
- params.appIdArray = JSON.stringify(
- this.multipleBidData.map(res => {
- return res.appId
- })
- )
- params.autoTargetArray = this.showCheckPerson.map(item => {
- return item.id
- })
- params.description = JSON.stringify(
- this.descriptionList.map(item => {
- return item.value
- })
- )
- params.singleAppid = 1
- params.actionBarText = params.actionBarText.join()
- params.deepConversionType = params.deepConversionType ? params.deepConversionType : ''
- params.deepConversionBid = params.deepConversionBid ? params.deepConversionBid : ''
- params.usageLevel =
- this.channelData && this.channelData ? this.channelData.channel.usageLevel : null
- params.useChannel = this.appDetail.useChannel ? 1 : 0
- params.sourceMaterial = JSON.stringify(params.sourceMaterial)
- params.sceneId = JSON.stringify(params.sceneId)
- params.autoTargetArray = JSON.stringify(params.autoTargetArray)
- params.useAppMarket = params.useAppMarket ? 1 : 0
- params.clickTrackUrl = this.multipleBidData[0].clickTrackUrl
- params.actionbarClickUrl = this.multipleBidData[0].actionbarClickUrl
- if (this.$route.query.id) {
- params.id = this.$route.query.id
- this.postDataAction('/auto/aiKuaishouAccountAutoStrategy/edit', params).then(res => {
- if (res.success) {
- this.sumbitLoading = false
- localStorage.removeItem('createLaunch')
- window.close()
- } else {
- this.sumbitLoading = false
- this.$message.error('创建失败')
- }
- })
- } else {
- this.postDataAction('/auto/aiKuaishouAccountAutoStrategy/add', params).then(res => {
- if (res.success) {
- this.sumbitLoading = false
- localStorage.removeItem('createLaunch')
- window.close()
- } else {
- this.sumbitLoading = false
- this.$message.error(res.message)
- }
- })
- }
- // this.getAction('/kuaishouProjectStrategy/checkProjectisOpen', { projectId: params.projectId }).then(
- // res => {
- // if (res.success) {
- // if (res.result === 1) {
- // } else {
- // this.$message.error('此项目有开启的配置,无法新建配置')
- // this.sumbitLoading = false
- // }
- // }
- // }
- // )
- })
- .catch(err => {
- this.$message.error('请填写完整')
- })
- } else {
- this.$message.error(res.message)
- }
- })
- },
- clearAllData() {
- window.close()
- },
- descriptionchange(val, index) {
- console.log(val)
- this.$nextTick(() => {
- this.descriptionList[index].value = val.replace(/\s*/g, '').trim()
- })
- },
- addDescription() {
- this.descriptionList.push({ value: '' })
- },
- removeDescription(index) {
- this.descriptionList.splice(index, 1)
- },
- // 获取行动号召按钮
- getActionBarText() {
- this.actionBarTextList = []
- let that = this
- setTimeout(() => {
- this.getAction('/kuaishou/batch/getActionBarTextByType', {
- type: that.getFormData('formProject','campaignType')
-
- }).then(res => {
- if (res.success) {
- that.actionBarTextList = res.result
- }
- })
- })
- },
- closeCreative() {
- this.optimizeVisible = false
- this.customUnitCntMax = 400
- this.imageCntMax = 300
- this.unitCntMax = 600
- this.creativeCntMax = 15
- this.formOriginality.resetFields()
- },
- submitCreative() {
- this.formOriginality.validateFields((err, values) => {
- if (!err) {
- let isNotComplete = this.descriptionList.findIndex(item => {
- return item.value === ''
- })
- if (isNotComplete > -1) {
- this.$message.error('请正确填写必填项目,广告语未填')
- return
- }
- this.showCreativeData = JSON.parse(JSON.stringify(values))
- this.optimizeVisible = false
- this.formOriginality.resetFields()
- // this.closeCreative()
- }
- })
- },
- changeData(data) {
- if (data.length > 1 && data.findIndex(item => item == 1) == 0) {
- data.splice(
- data.findIndex(item => item == 1),
- 1
- )
- } else if (data.length > 1 && data.findIndex(item => item == 1) == data.length - 1) {
- data.splice(0, data.length - 1)
- } else if (data.length == 0) {
- data.push(1)
- } else if (data.length > 1 && data.findIndex(item => item == 5) == 0) {
- data.splice(
- data.findIndex(item => item == 5),
- 1
- )
- } else if (data.length > 1 && data.findIndex(item => item == 5) == data.length - 1) {
- data.splice(0, data.length - 1)
- }
- },
- unitTypeCheck(e) {
- // console.log(e.target.value)
- if (e.target.value === 7) {
- this.imageCntMax = 300
- } else {
- this.unitCntMax = 600
- this.creativeCntMax = 15
- }
- },
- setImageCnt(e) {
- this.unitCntMax = e ? Math.floor(600 / e) : 600
- this.creativeCntMax = e
- ? Math.floor(2000 / (e * this.getFormData('formOriginality', 'customUnitCnt'))) > 15
- ? 15
- : Math.floor(2000 / (e * this.getFormData('formOriginality', 'customUnitCnt')))
- : 15
- },
- setCreativeCntMax(e) {
- // v-if="getFormData('formOriginality', 'unitType') != 7"
- this.creativeCntMax = e
- ? Math.floor(2000 / (e * this.getFormData('formOriginality', 'customPlanCnt'))) > 15
- ? 15
- : Math.floor(2000 / (e * this.getFormData('formOriginality', 'customPlanCnt')))
- : 15
- },
- setProgramUnitCnt(e) {
- this.imageCntMax = e ? Math.floor(300 / e) : 300
- },
- creativeTagValid(rule, value, callback) {
- //console.log(rule, value, callback)
- if (value.length == 0 || value == undefined) {
- // //console.log(1)
- callback()
- } else if (value.length > 10) {
- callback('创意标签最多填写10个,请删减')
- } else {
- // //console.log(2)
- callback()
- }
- },
- cpaBidValid(rule, value, callback) {
- let z = /-/g
- let a = /\//g
- let d = /\./g
- if (value === '' || value === undefined || value === 0 || value === '0') {
- callback('出价必须填写')
- } else if (value.startsWith('.') || value.endsWith('.')) {
- callback('请填写正确出价')
- } else if (value.startsWith('-') || value.endsWith('-')) {
- callback('请填写正确出价')
- } else if (value.match(a) && value.match(z)) {
- callback('不允许出现除"-"和"/"之外的所有字符,并且二者不可同时出现')
- } else if (value.match(/[^0-9+-\/]/g)) {
- callback('请填写正确出价')
- } else {
- callback()
- }
- },
- deepBidValid(rule, value, callback) {
- let z = /-/g
- let a = /\//g
- let d = /\./g
- if (value === '' || value === undefined || value == 0 || value == '0') {
- callback()
- } else if (value.startsWith('.') || value.endsWith('.')) {
- callback('请填写正确出价')
- } else if (value.startsWith('-') || value.endsWith('-')) {
- callback('请填写正确出价')
- } else if (value.match(a) && value.match(z)) {
- callback('不允许出现除"-"和"/"之外的所有字符,并且二者不可同时出现')
- } else if (value.match(/[^0-9+-\/]/g)) {
- callback('请填写正确出价')
- } else {
- callback()
- }
- },
- getDataType(type, dataList) {
- this.getAction('/kuaishou/batch/getTargetList', { tagType: type }).then(res => {
- if (res.success) {
- if (dataList === 'businessOptions') {
- businessOptions = res.result
- } else if (dataList === 'optionsAppActive') {
- optionsAppActive = res.result
- } else if (dataList === 'fansStarOptions') {
- fansStarOptions = res.result
- } else if (dataList === 'interestVideoOptions') {
- interestVideoOptions = res.result
- }
- }
- })
- },
- setData(data) {
- this.checkPersonOne = data
- },
- setVideoData(data) {
- // checkPerson: [],
- // checkPersonAll: [],
- if (data.findIndex(item => item === this.checkPersonOne) > -1) {
- this.checkPersonElse.push(...data)
- this.checkPersonElse = [...new Set(this.checkPersonElse)]
- } else {
- if (this.checkPersonElse.findIndex(item => item === this.checkPersonOne) > -1) {
- this.checkPersonElse.splice(
- this.checkPersonElse.findIndex(item => item === this.checkPersonOne),
- 1
- )
- }
- }
- console.log(data, this.checkPersonOne, this.checkPersonElse)
- this.sumContent = this.checkPersonElse.length
- var dataCount = 10
- if (this.sumContent > dataCount) {
- this.$message.error('最多选择' + dataCount + '个定向')
- this.checkPerson.pop()
- this.checkPersonElse.splice(
- this.checkPersonElse.findIndex(item => item === this.checkPersonOne),
- 1
- )
- this.sumContent--
- // this.checkPersonAll[this.ipagination.current - 1] = this.checkPerson
- }
- },
- cancel() {},
- removeVideoMaterial(index, id) {
- this.showCheckPerson.splice(index, 1)
- let indexElse = this.checkPerson.findIndex(item => {
- item == id
- })
- this.checkPerson.splice(indexElse, 1)
- // id
- this.checkPersonElse.splice(
- this.checkPersonElse.findIndex(item => {
- item == id
- }),
- 1
- )
- // for (let i = 0; i < this.checkPersonAll.length; i++) {
- // if (this.checkPersonAll[i].length > 0) {
- // for (let j = 0; j < this.checkPersonAll[i].length; j++) {
- // if (this.checkPersonAll[i][j] == id) {
- // this.checkPersonAll[i].splice(j, 1)
- // }
- // }
- // }
- // }
- // this.materialList[index].photoArr.splice(indexMaterial, 1)
- },
- getDataSource(current, pageSize) {
- // 切换分页时的回调,
- // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
- this.ipagination.current = current
- this.ipagination.pageSize = pageSize
- // this.checkPerson = this.checkPersonAll[current - 1]
- this.checkPerson = this.checkPersonElse
- this.getTargetPerson()
- },
- disabledDate(current) {
- // Can not select days before today and today
- return current && current < moment().subtract(1, 'days')
- },
- disabledDateOne(current) {
- // Can not select days before today and today
- return current && current < moment().subtract(0, 'days')
- },
- filterOption(input, option) {
- return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
- },
- //目标应用编辑
- targetAppEdit() {
- this.targetAppVisible = true
- if (this.appDetail) {
- if (this.appDetail.schemaUri) {
- this.uriCheck = true
- }
- if (this.channelData && this.channelData.channel.isHaveItem>-1) {
- this.useChannel = true
- }
- this.appDetailMiddle = JSON.parse(JSON.stringify(this.appDetail))
- this.$nextTick(() => {
- this.formTargetApp.setFieldsValue({ ...this.appDetailMiddle })
- this.multipleBidDataDrawer = JSON.parse(JSON.stringify(this.multipleBidData))
- setTimeout(() => {
- this.formTargetApp.setFieldsValue({ useAppMarket: this.appDetailMiddle.useAppMarket })
- }, 100)
- setTimeout(() => {
- this.formTargetApp.setFieldsValue({ appStore: this.appDetailMiddle.appStore })
- }, 200)
- })
- }
- this.getAppList()
- },
- submitApp() {
- this.formTargetApp.validateFields((err, values) => {
- //console.log(values)
- if (!err) {
- this.appDetailMiddle = JSON.parse(JSON.stringify({ ...values, useChannel: this.useChannel }))
- this.appDetail = JSON.parse(JSON.stringify(this.appDetailMiddle))
- this.multipleBidData = JSON.parse(JSON.stringify(this.multipleBidDataDrawer))
- this.targetAppVisible = false
- this.multipleBidDataDrawer = []
- this.checkPersonElse = []
- this.checkPerson = []
- this.showCheckPerson = []
- this.closeUnit()
- } else {
- }
- })
- },
- closeUnit(form) {
- if (this.getFormData('formProject', 'campaignType') == 7) {
- this.uriCheck = true
- } else {
- this.uriCheck = false
- }
- this.targetAppVisible = false
- this.multipleBidDataDrawer = []
- this.appDetailMiddle = null
- this.useChannel = false
- // this.channelData = null
- this.convertId = null
- this.formTargetApp.resetFields()
- },
- formInfoShow() {
- this.$nextTick(() => {
- console.log(this.formInformaData)
- if (this.formInformaData) {
- this.formInformationVisible = true
- this.budgetType = this.formInformaData.budgetType
- this.dayBudgetType = this.formInformaData.dayBudgetType
- setTimeout(() => {
- this.formInformation.setFieldsValue(
- pick(this.formInformaData, 'campaignName', 'groupName', 'campaignStatus', 'groupStatus')
- )
- }, 100)
- if (this.budgetType == '2') {
- setTimeout(() => {
- this.formInformation.setFieldsValue(pick(this.formInformaData, 'campaignDayBudget'))
- }, 100)
- }
- if (this.dayBudgetType == '2') {
- setTimeout(() => {
- this.formInformation.setFieldsValue(pick(this.formInformaData, 'unitDayBudget'))
- }, 100)
- }
- } else {
- this.formInformationVisible = true
- }
- })
- },
- closeFormInfo() {
- this.formInformationVisible = false
- this.budgetType = '1'
- this.dayBudgetType = '1'
- this.formInformation.resetFields()
- },
- submitFormInfo() {
- this.formInformation.validateFields((err, values) => {
- if (!err) {
- var data = { ...values, budgetType: this.budgetType, dayBudgetType: this.dayBudgetType }
- this.formInformaData = JSON.parse(JSON.stringify(data))
- this.formInformationVisible = false
- this.formInformation.resetFields()
- }
- })
- },
- clearAppId() {
- // this.formTargetApp.setFieldsValue({
- // appId: undefined
- // })
- },
- appIdChange(val) {
- if (this.getFormData('formTargetApp', 'singleAppid') == 0) {
- if (val && val.findIndex(item => item.key === 0) > -1) {
- let appidArr = this.appList.map(item => {
- return {
- key: item.appId,
- label:
- `${
- item.platform === 1
- ? 'Android应用下载'
- : item.platform === 2
- ? 'Android网页游戏'
- : item.platform === 3
- ? 'iOS应用下载'
- : 'iOS网页游戏'
- }` +
- '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
- item.appName +
- '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
- item.appVersion
- }
- })
- this.$nextTick(() => {
- this.formTargetApp.setFieldsValue({
- appId: appidArr
- })
- this.postDataAction('/kuaishou/kuaiShouAppList/getAppNames', {
- appIdArray: appidArr.map(item => {
- return item.key
- })
- }).then(res => {
- if (res.success) {
- this.multipleBidDataDrawer = res.result
- }
- })
- })
- // this.$nextTick(() => {
- // this.formTargetApp.setFieldsValue({
- // appId: appidArr
- // })
- // this.multipleBidDataDrawer = appidArr.map(item => {
- // return {
- // ...item,
- // cpaBid: null,
- // trackUrl: '',
- // channelCode: '',
- // appId: item.key,
- // deepConversionBid: null
- // }
- // })
- // })
- } else {
- this.$nextTick(() => {
- // this.multipleBidDataDrawer = this.appList.filter(item => {
- // return item.id === val.key
- // })
- this.postDataAction('/kuaishou/kuaiShouAppList/getAppNames', {
- appIdArray: val.map(item => {
- return item.key
- })
- }).then(res => {
- if (res.success) {
- this.multipleBidDataDrawer = res.result
- }
- })
- })
- }
- if (this.multipleBidDataDrawer.length == 0) {
- this.useChannel = false
- this.channelData = null
- }
- } else {
- if (val) {
- this.$nextTick(() => {
- this.siteList = []
- this.getPageList(val.key)
- this.multipleBidDataDrawer = []
- // this.multipleBidDataDrawer = this.appList.filter(item => {
- // return item.id === val.key
- // })
- this.postDataAction('/kuaishou/kuaiShouAppList/getAppNames', { appIdArray: [val.key] }).then(
- res => {
- if (res.success) {
- this.multipleBidDataDrawer = res.result
- }
- }
- )
- })
- } else {
- this.multipleBidDataDrawer = []
- this.useChannel = false
- this.channelData = null
- }
- }
- },
- lookChannel(appName) {
- this.lookChannelVisible = true
- this.lookChannelLoading = true
- this.lookChannelAppName = appName
- var params = {}
- params.accountId = this.getFormData('formProject', 'accountId')
- params.appName = appName
- params.pageNo = this.lookChannelIpagination.current
- params.pageSize = this.lookChannelIpagination.pageSize
- this.getAction('/channel/queryChannelList', params).then(res => {
- this.lookChannelLoading = false
- if (res.success) {
- this.lookChannelList = res.result.list || []
- this.lookChannelIpagination.total = res.result.total || 0
- }
- })
- },
- onCellChange(key, dataIndex, value) {
- const dataSource = [...this.multipleBidDataDrawer]
- const target = dataSource.find(item => item.id === key)
- if (target) {
- target[dataIndex] = value
- this.multipleBidDataDrawer = dataSource
- let params = { accountId: this.getFormData('formProject', 'accountId') }
- if (dataIndex == 'impressionUrl') {
- params.impressionUrl = value
- } else if (dataIndex == 'clickTrackUrl') {
- params.clickTrackUrl = value
- } else if (dataIndex == 'actionbarClickUrl') {
- params.actionbarClickUrl = value
- } else if (dataIndex == 'adPhotoPlayedT3sUrl') {
- params.adPhotoPlayedT3sUrl = value
- }
- this.postDataAction('/auto/aiKuaishouAccountAutoStrategy/updateAppUrl', params).then(res => {
- if (res.success) {
- console.log(res)
- }
- })
- }
- },
- addApplication() {
- if (this.getFormData('formProject', 'accountId')) {
- this.tongbuLoading = true
- // this.$refs.application.showApplication()
- this.getAction('/kuaishou/batch/syncAppList', {
- accountId: this.getFormData('formProject', 'accountId')
- }).then(res => {
- if (res.success) {
- this.tongbuLoading = false
- this.$message.success(res.message)
- this.getAppList()
- } else {
- this.tongbuLoading = false
- this.$message.error(res.message)
- }
- })
- } else {
- this.$message.error('请先选择账户')
- }
- },
- changeType(e) {
- this.appList = []
- if (e.target.value === 1) {
- this.appList = this.appListAll.filter(item => {
- return item.platform == 1 || item.platform == 2
- })
- this.formTargetApp.setFieldsValue({ appId: undefined })
- this.multipleBidDataDrawer = []
- } else if (e.target.value === 2) {
- this.appList = this.appListAll.filter(item => {
- return item.platform == 3 || item.platform == 4
- })
- this.formTargetApp.setFieldsValue({ appId: undefined })
- this.multipleBidDataDrawer = []
- }
- },
- getAppList() {
- let params = {}
- params.accountId = this.getFormData('formProject', 'accountId')
- this.getAction('/kuaishou/batch/getAppList', params).then(res => {
- if (res.success) {
- this.appListAll = res.result.map((item, index) => {
- return {
- ...item,
- key: item.id
- }
- })
- if (this.getFormData('formTargetApp', 'platformOs') === 1) {
- this.appList = this.appListAll.filter(item => {
- return item.platform == 1 || item.platform == 2
- })
- } else if (this.getFormData('formTargetApp', 'platformOs') === 2) {
- this.appList = this.appListAll.filter(item => {
- return item.platform == 3 || item.platform == 4
- })
- }
- }
- })
- },
- //目标人群选择
- targetPersonCheck() {
- // this.checkPerson = this.checkPersonAll[0]
- this.checkPersonElse = this.showCheckPerson.map(item => {
- return item.id
- })
- this.checkPerson = this.checkPersonElse
- this.ipagination.current = 1
- this.sumContent = this.showCheckPerson.length
- this.targetPersonVisible = true
- this.searchTemplate = ''
- this.getTargetPerson()
- },
- submitPerson() {
- // var dataAll = tqFun(this.checkPersonAll)
- let dataAll = this.checkPersonElse
- this.checkPerson = dataAll
- this.personLoading = true
- if (this.checkPerson.length > 0) {
- this.postDataAction('/auto/aiKuaishouAccountAutoTarget/getAutoTargetByIds', {
- ids: this.checkPerson
- }).then(res => {
- this.personLoading = false
- if (res.success) {
- this.showCheckPerson = res.result.map(item => {
- return {
- ...item,
- regionName: []
- }
- })
- for (let i = 0; i < this.showCheckPerson.length; i++) {
- if (
- this.showCheckPerson[i] &&
- (this.showCheckPerson[i].region == '' ||
- this.showCheckPerson[i].region == null ||
- JSON.parse(this.showCheckPerson[i].region).length == 0)
- ) {
- } else {
- // this.showRegion(this.personList[i].region, this.personList[i].regionName)
- let that = this
- new Promise((resolve, reject) => {
- this.postDataAction('/kuaishou/batch/getRegionDetail', {
- regionArr: that.showCheckPerson[i].region
- }).then(res => {
- if (res.success) {
- // this.populationData.allForm.region = res.result
- that.showCheckPerson[i].regionName = res.result.map(item => {
- return item.label
- })
- }
- })
- })
- }
- }
- this.targetPersonVisible = false
- }
- })
- } else if (this.checkPerson.length > 20) {
- this.personLoading = false
- this.$message.error('最多选择20个定向包')
- } else {
- this.personLoading = false
- this.$message.error('请选择定向包')
- }
- },
- closePerson(form) {
- this.targetPersonVisible = false
- this.sumContent = 0
- if (this.showCheckPerson.length > 0) {
- } else {
- this.checkPersonAll = []
- this.checkPersonElse = []
- }
- this.checkPerson = []
- },
- editNewTemplate(item) {
- var params = { ...item }
- params.accountId = this.getFormData('formProject', 'accountId')
- this.$refs.templateModal.handleOk(params, 'edit')
- },
- deleteNewTemplate(id) {
- var that = this
- this.$confirm({
- title: '是否删除此定向包?',
- onOk() {
- var params = {}
- params.ids = id
- that.getAction('/auto/aiKuaishouAccountAutoTarget/deleteBatch', params).then(res => {
- if (res.success) {
- var index = that.checkPerson.findIndex(item => item == id)
- var indexAll = that.checkPersonElse.findIndex(item => item == id)
- var indexShow = that.showCheckPerson.findIndex(item => item.id == id)
- if (index > -1) {
- that.checkPerson.splice(index, 1)
- }
- if (indexAll > -1) {
- that.checkPersonElse.splice(index, 1)
- }
- if (indexShow > -1) {
- that.showCheckPerson.splice(index, 1)
- }
- that.$nextTick(() => {
- that.checkPerson = that.checkPersonElse
- that.sumContent = that.checkPersonElse.length
- that.getTargetPerson()
- })
- } else {
- that.$message.error(res.messsage)
- }
- })
- },
- onCancel() {}
- })
- },
- addNewTemplate() {
- this.$refs.templateModal.create(this.getFormData('formProject', 'accountId'), 'add')
- },
- getTargetPerson() {
- if (this.appDetail.platformOs) {
- let params = {}
- params.pageSize = this.ipagination.pageSize
- params.pageNo = this.ipagination.current
- params.accountId = this.getFormData('formProject', 'accountId')
- params.targetName = this.searchTemplate == '' ? null : this.searchTemplate
- params.platformOs = this.appDetail ? this.appDetail.platformOs : '1'
- this.getAction('/auto/aiKuaishouAccountAutoTarget/list', params).then(res => {
- if (res.success) {
- this.personList = res.result.list.map(item => {
- return {
- ...item,
- regionName: []
- }
- })
- for (let i = 0; i < this.personList.length; i++) {
- if (
- this.personList[i] &&
- (this.personList[i].region == '' ||
- this.personList[i].region == null ||
- JSON.parse(this.personList[i].region).length == 0)
- ) {
- } else {
- // this.showRegion(this.personList[i].region, this.personList[i].regionName)
- let that = this
- new Promise((resolve, reject) => {
- this.postDataAction('/kuaishou/batch/getRegionDetail', {
- regionArr: that.personList[i].region
- }).then(res => {
- if (res.success) {
- // this.populationData.allForm.region = res.result
- that.personList[i].regionName = res.result.map(item => {
- return item.label
- })
- }
- })
- })
- }
- }
- this.ipagination.total = res.result.total
- }
- })
- } else {
- this.$message.error('请先选择应用')
- }
- },
- showRegion(data, name) {
- return new Promise((resolve, reject) => {
- this.postDataAction('/kuaishou/batch/getRegionDetail', {
- regionArr: data
- }).then(res => {
- if (res.success) {
- // this.populationData.allForm.region = res.result
- name = res.result.map(item => {
- return item.label
- })
- }
- })
- })
- },
- //创意信息
- originalityEdit() {
- this.optimizeVisible = true
- this.getActionBarText()
- this.getAction('/kuaishou/batch/getCreativeCategory', {
- accountId: this.getFormData('formProject', 'accountId')
- }).then(result => {
- if (result.success) {
- //console.log(res)
- this.createOptions = result.result
- }
- })
- this.$nextTick(() => {
- if (this.showCreativeData) {
- // if (this.showCreativeData.unitType === 7) {
- // this.imageCntMax = 8
- // } else {
- // this.imageCntMax = 15
- // }
- this.customUnitCntMax = 400
- this.imageCntMax = 300
- this.unitCntMax = 600
- this.creativeCntMax = 15
- this.formOriginality.setFieldsValue(this.showCreativeData)
- }
- })
- },
- //设置通配符
- getChangeAll(type, form, field) {
- var node = document.getElementById(field)
- var v = '-{{' + type + '}}-'
- if (document.selection) {
- //IE
- node.focus()
- var sel = document.selection.createRange()
- sel.text = v
- sel.select()
- if (field == 'campaignName') {
- this[form].setFieldsValue({ campaignName: sel.text })
- } else if (field == 'groupName') {
- this[form].setFieldsValue({ groupName: sel.text })
- }
- } else if (node.selectionStart || node.selectionStart == '0') {
- //MOZILLA/GOOGLE
- var startPos = node.selectionStart
- var endPos = node.selectionEnd
- var restoreTop = node.scrollTop
- node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
- if (restoreTop > 0) {
- node.scrollTop = restoreTop
- }
- if (field == 'campaignName') {
- this[form].setFieldsValue({ campaignName: node.value })
- } else if (field == 'groupName') {
- this[form].setFieldsValue({ groupName: node.value })
- }
- node.focus()
- node.selectionStart = startPos + v.length
- node.selectionEnd = startPos + v.length
- // this.campaignName = node.value
- } else {
- //OTHER
- node.value += v
- // console.log(node.value)
- if (field == 'campaignName') {
- this[form].setFieldsValue({ campaignName: node.value })
- } else if (field == 'groupName') {
- this[form].setFieldsValue({ groupName: node.value })
- }
- node.focus()
- // this.campaignName = node.value
- }
- },
- //获取表单的某一个属性值
- getFormData(form, className) {
- return this[form].getFieldValue(className)
- },
- onScroll() {
- // var box = document.getElementById('box')
- // var t = document.documentElement.scrollTop || document.body.scrollTop
- // box.style.top = t + 'px'
- var jump = document.querySelectorAll('.step-jump')
- var distance =
- document.documentElement.scrollTop + 180 || window.pageYOffset + 180 || document.body.scrollTop + 180
- jump.forEach((item, index) => {
- if (distance >= item.offsetTop) {
- this.activeStep = index
- }
- })
- },
- // 锚点点击
- jump(index) {
- // console.log(index)
- this.activeStep = index
- // 用 class=".step-jump" 添加锚点,此时的类名要放在tr上,放在td上不对,
- // 以后做的时候要注意这点,不是表格的时候,如何放置锚点
- let jump = document.querySelectorAll('.step-jump')
- // 通过 offsetTop 获取对象到窗体顶部的距离,然后赋值给 scrollTop,就能实现锚点的功能
- let total = jump[index].offsetTop
- // console.log(total)
- // scrollTop滚动条距离页面的距离
- let distance = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
- // console.log(distance)
- // 平滑滚动,时长500ms,每10ms一跳,共50跳
- let step = total / 50
- if (total > distance) {
- smoothDown()
- } else {
- let newTotal = distance - total
- step = newTotal / 100
- smoothUp()
- }
- function smoothDown() {
- if (distance < total) {
- distance += step
- document.body.scrollTop = distance
- document.documentElement.scrollTop = distance
- window.pageYOffset = distance
- setTimeout(smoothDown, 1)
- } else {
- document.body.scrollTop = total
- document.documentElement.scrollTop = total
- window.pageYOffset = total
- }
- }
- function smoothUp() {
- if (distance > total) {
- distance -= step
- document.body.scrollTop = distance
- document.documentElement.scrollTop = distance
- window.pageYOffset = distance
- setTimeout(smoothUp, 10)
- } else {
- document.body.scrollTop = total
- document.documentElement.scrollTop = total
- window.pageYOffset = total
- }
- }
- },
- getData(className, formName) {
- return this[formName].getFieldValue(className)
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- /* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/
- $height: 59px;
- .layout .header .user-wrapper .action .anticon,
- .layout .top-nav-header-index .user-wrapper .action .anticon {
- color: #999;
- }
- .layout .header .user-wrapper .action .anticon,
- .layout .top-nav-header-index .user-wrapper .action .anticon {
- color: #999;
- }
- .layout {
- .top-nav-header-index {
- .header-index-wide {
- margin-left: 10px;
- .ant-menu.ant-menu-horizontal {
- height: $height;
- line-height: $height;
- }
- }
- .trigger {
- line-height: 48px;
- font-size: 17px;
- &:hover {
- background: rgba(0, 0, 0, 0.05);
- }
- }
- }
- .header {
- z-index: 2;
- color: #999;
- height: $height;
- background-color: #1890ff;
- transition: background 300ms;
- /* dark 样式 */
- &.dark {
- color: #000000;
- box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
- background-color: white !important;
- }
- }
- .header,
- .top-nav-header-index {
- &.dark .trigger:hover {
- background: rgba(0, 0, 0, 0.05);
- }
- }
- }
- .ant-layout-header {
- height: $height;
- line-height: $height;
- }
- </style>
|