index.vue 180 KB

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