1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309431043114312431343144315431643174318431943204321432243234324432543264327432843294330433143324333433443354336433743384339434043414342434343444345434643474348434943504351435243534354435543564357435843594360436143624363436443654366436743684369437043714372437343744375437643774378437943804381438243834384438543864387438843894390439143924393439443954396439743984399440044014402440344044405440644074408440944104411441244134414441544164417441844194420442144224423442444254426442744284429443044314432443344344435443644374438443944404441444244434444444544464447444844494450445144524453445444554456445744584459446044614462446344644465446644674468446944704471447244734474447544764477447844794480448144824483448444854486448744884489449044914492449344944495449644974498449945004501450245034504450545064507450845094510451145124513451445154516451745184519452045214522452345244525452645274528452945304531453245334534453545364537453845394540454145424543454445454546454745484549455045514552455345544555455645574558455945604561456245634564456545664567456845694570457145724573457445754576457745784579458045814582458345844585458645874588458945904591459245934594459545964597459845994600460146024603460446054606460746084609461046114612461346144615461646174618461946204621462246234624462546264627462846294630463146324633463446354636463746384639464046414642464346444645464646474648464946504651465246534654465546564657465846594660466146624663466446654666466746684669467046714672467346744675467646774678467946804681468246834684468546864687468846894690469146924693469446954696469746984699470047014702470347044705470647074708470947104711471247134714471547164717471847194720472147224723472447254726472747284729473047314732473347344735473647374738473947404741474247434744474547464747474847494750475147524753475447554756475747584759476047614762476347644765476647674768476947704771477247734774477547764777477847794780478147824783478447854786478747884789479047914792479347944795479647974798479948004801480248034804480548064807480848094810481148124813481448154816481748184819482048214822482348244825482648274828482948304831483248334834483548364837483848394840484148424843484448454846484748484849485048514852485348544855485648574858485948604861486248634864 |
- <style scoped lang="scss">
- .showShare {
- position: relative;
- }
- .share {
- display: none;
- }
- .showShare:hover .share {
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .chouzhen {
- border-style: solid;
- border-width: 1px;
- border-color: #e4e4e4;
- width: calc(20% - 10px);
- padding: 10px;
- margin-right: 10px;
- margin-bottom: 10px;
- display: flex;
- align-items: center;
- background: #fff;
- position: relative;
- z-index: 99;
- float: left;
- }
- li.chouzhen.first:before {
- font-size: 12px;
- content: '首帧';
- position: absolute;
- top: 7px;
- left: 5px;
- width: 36px;
- height: 20px;
- color: rgb(255, 255, 255);
- line-height: 20px;
- text-align: center;
- background: rgba(0, 0, 0, 0.5);
- border-radius: 2px;
- z-index: 1000;
- }
- .display-none-selset {
- display: none !important;
- }
- .logo {
- padding-left: 24px;
- img {
- height: 32px !important;
- }
- .name {
- font-size: 14px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: #CED2D9;
- // line-height: 22px;
- margin-left: 20px;
- padding-left: 21px;
- position: relative;
- }
- .name::before {
- content: '';
- width: 1px;
- height: 18px;
- background: rgba(255, 255, 255, 0.31);
- position: absolute;
- left: 0;
- top: 50%;
- margin-top: -9px;
- }
- }
- .chartBox {
- margin-top: 80px;
- .chartBody {
- display: flex;
- justify-content: space-around;
- flex-wrap: wrap;
- }
- .search-box {
- margin-bottom: 20px;
- }
- }
- </style>
- <style lang="scss">
- .hide-checkbox .ant-table-thead .ant-table-selection {
- display: none;
- }
- .new-batch .ant-card-head-title {
- font-weight: 700;
- }
- // .new-batch textarea {
- // resize: none;
- // border: none;
- // outline: 0;
- // box-shadow: none;
- // }
- .create-info .ant-form-item {
- margin-bottom: 0 !important;
- }
- .fengmian .ant-checkbox-wrapper:first-child {
- margin-left: 8px;
- }
- @media screen and (max-width: 1200px) {
- // 这里写对应要修改的样式如:
- .new-batch .el-step__title {
- font-size: 12px;
- }
- }
- .line-height-one .ant-form-item-control {
- line-height: inherit;
- }
- .creat-all-info .ant-form-item-control {
- width: 60%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .display-none-selset {
- display: none !important;
- }
- </style>
- <template>
- <div ref="questionnaireBox" class="new-batch">
- <a-layout-header
- class="ant-header-fixedHeader ant-header-side-opened"
- :style="{ padding: '0' }"
- style="background: #0b2040 !important; position: fixed; top: 0; z-index: 100; width: 100%"
- >
- <div :class="['top-nav-header-index', theme]">
- <div class="header-index-wide">
- <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
- <div class="logo">
- <img src="~@/assets/logoNew1.png" alt="logo" />
- <span class="name">有腾投放管家</span>
- </div>
- </div>
- </div>
- </div>
- </a-layout-header>
- <div class="chartBox" style="padding: 0 20px">
- <a-row :gutter="20">
- <a-col :sm="3" style="margin-bottom: 20px; z-index: 10; position: fixed">
- <a-card class="search-box" style="height: 90vh">
- <el-steps direction="vertical" finish-status="wait" space="50px" :active="activeStep">
- <el-step v-for="(item, index) in stepsArr" :key="index" :title="item.title" @click.native="jump(index)">
- </el-step>
- </el-steps>
- </a-card>
- </a-col>
- <a-col :sm="21" :push="3" style="margin-bottom: 20px; z-index: 10" id="container">
- <a-form :form="form" @submit="handleSubmit" layout="horizontal" v-bind="formItemLayout">
- <a-spin :spinning="spinning">
- <a-card class="search-box step-jump" title="创建规则">
- <a-row class="line-height-one">
- <a-col :xl="14" :md="24">
- <a-form-item label="选择广告账户">
- <Treeselect
- :appId.sync="accountId"
- :multiple="false"
- request="2,4"
- ref="treeSelect"
- :disabled="$route.query.batchId != undefined"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="14" :md="24">
- <a-form-item label="营销目标">
- <a-radio-group
- @change="typeChange"
- v-decorator="[
- 'campaignType',
- { rules: [{ required: true, message: '营销目标必选' }], initialValue: 2 },
- ]"
- >
- <a-radio-button :value="2">提升应用安装</a-radio-button>
- <a-radio-button :value="3" disabled>获取电商下单</a-radio-button>
- <a-radio-button :value="4" disabled>推广品牌活动</a-radio-button>
- <a-radio-button :value="5">收集销售线索</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row v-show="getData('campaignType', 'form') == 2">
- <a-col :xl="14" :md="24">
- <a-form-item label="推广平台">
- <a-radio-group
- @change="systemChange"
- v-decorator="['systemType', { rules: [{ required: true, message: '' }], initialValue: 'iOS' }]"
- >
- <a-radio-button value="iOS">iOS</a-radio-button>
- <a-radio-button value="Android">Android</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="14" :md="24">
- <a-form-item label="是否新建计划">
- <a-radio-group
- v-decorator="['newClick', { rules: [{ required: true, message: '' }], initialValue: '1' }]"
- >
- <a-radio-button value="1">是</a-radio-button>
- <a-radio-button value="2">否</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row v-if="!getData('newClick', 'form') || getData('newClick', 'form') == '1'">
- <a-col :xl="14" :md="24">
- <a-form-item label="规则配置">
- <a-button type="primary" @click="ruleConfigShow"> 规则配置 </a-button>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row v-else-if="getData('newClick', 'form') == '2'">
- <a-col :xl="14" :md="24">
- <a-form-item label="选择广告计划" selfUpdate>
- <a-select
- v-model="campaignId"
- showSearch
- allowClear
- placeholder="请选择广告计划"
- optionFilterProp="children"
- :filterOption="filterOption"
- >
- <a-select-option
- v-for="appModel in campaignList"
- :key="appModel.campaignId"
- :value="appModel.campaignId"
- >{{ appModel.campaignName }}</a-select-option
- >
- </a-select>
- <span v-if="showCount" style="margin-top: 15px">当前计划下还可创建{{ groupCount }}个广告组</span>
- </a-form-item>
- </a-col>
- </a-row>
- </a-card>
- <a-card class="search-box step-jump create-info creat-all-info">
- <div slot="title">
- 广告组基本信息 <a-button type="primary" style="float: right" @click="showDrawer"> 编辑 </a-button>
- </div>
- <a-row>
- <a-col :xl="14" :md="24">
- <a-form-item label="投放范围">{{ allianceAccount == '1' ? '默认' : '联盟' }} </a-form-item>
- </a-col>
- <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
- <a-form-item label="计费方式">
- {{ groupTemplateId ? (unitInfo.bidType == 2 ? '点击计费' : '展示计费(oCPM)') : '无' }}
- </a-form-item>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="14" :md="24">
- <a-form-item label="单日预算">
- {{
- groupTemplateId
- ? unitInfo.dayBudget && unitInfo.dayBudget > 0
- ? unitInfo.dayBudget + '元'
- : '不限'
- : '无'
- }}</a-form-item
- >
- </a-col>
- <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
- <a-form-item :label="unitInfo.bidType == 2 ? '出价' : '转化目标出价'">
- {{
- groupTemplateId &&
- ((unitInfo.bid && unitInfo.bid > 0) ||
- (unitInfo.cpaBid && unitInfo.cpaBid > 0) ||
- (unitInfo.bidMin && unitInfo.bidMax))
- ? unitInfo.bidType == 2
- ? unitInfo.bid && unitInfo.bid > 0
- ? unitInfo.bid + '元'
- : unitInfo.bidMin + '~' + unitInfo.bidMax + '元'
- : unitInfo.cpaBid && unitInfo.cpaBid > 0
- ? unitInfo.cpaBid + '元'
- : unitInfo.bidMin + '~' + unitInfo.bidMax + '元'
- : '无'
- }}
- </a-form-item>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="14" :md="24">
- <a-form-item label="投放时段">
- <div v-if="groupTemplateId == null">无</div>
- <div v-else-if="scheduleTime == '1'">不限</div>
- <!-- <div > -->
- <a-popover v-else title="投放时段" :overlayStyle="{ width: '400px' }" placement="left">
- <template slot="content">
- <span v-for="(item, index) in unitInfo.scheduleTime.split('')" :key="index" v-if="item == 1">
- {{
- setItemDate(index, item) +
- (index == unitInfo.scheduleTime.split('').length - 1 ? '' : ',')
- }}
- </span>
- </template>
- <span v-for="(item, index) in unitInfo.scheduleTime.split('')" :key="index">
- {{ setItemDate(index, item) }}
- </span>
- </a-popover>
- <!-- <span v-for="(item, index) in unitInfo.scheduleTime.split('')" :key="index">
- {{ setItemDate(index, item) }}
- </span>
- </div> -->
- </a-form-item>
- </a-col>
- <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
- <a-form-item label="场景广告位">
- <div v-if="groupTemplateId == null">无</div>
- <div v-else>
- <span v-for="(item, index) in unitInfo.sceneId" :key="index">
- {{ item | kuaishouSceneId }}{{ index == unitInfo.sceneId.length - 1 ? '' : ',' }}
- </span>
- </div>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="14" :md="24">
- <a-form-item label="排期">
- <div v-if="groupTemplateId == null">无</div>
- <div v-else-if="unitTime == '1'">
- 从今天开始长期投放({{ moment(unitInfo.timeRange[0]).format('YYYY-MM-DD') }}起)
- </div>
- <div v-else>
- {{ moment(unitInfo.timeRange[0]).format('YYYY-MM-DD') }}~{{
- moment(unitInfo.timeRange[1]).format('YYYY-MM-DD')
- }}
- </div>
- </a-form-item>
- </a-col>
- <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0" v-if="unitInfo.deepConversionType">
- <a-form-item label="深度转化目标">
- <div v-if="groupTemplateId == null">无</div>
- <div v-else>
- {{ setDeepConversionType(unitInfo.deepConversionType) }}
- </div>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="14" :md="24">
- <a-form-item label="优化目标">
- {{ groupTemplateId ? (unitInfo.bidType == 2 ? '封面点击数' : '转化数') : '无' }}
- </a-form-item>
- </a-col>
- <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0" v-if="unitInfo.deepConversionBid">
- <a-form-item label="深度转化出价">
- <div v-if="groupTemplateId == null">无</div>
- <div v-else>
- {{ unitInfo.deepConversionBid }}
- </div>
- </a-form-item>
- </a-col>
- </a-row>
- </a-card>
- <a-card class="search-box step-jump" title="定向包">
- <p>
- 已选定向包: {{ checkDirectionalList.length }}/20
- <a-button
- style="margin: 0 15px"
- @click="addTemplate(null)"
- :disabled="this.accountId == undefined || accountId == '' || accountId == null"
- >
- 新增定向包 </a-button
- ><a-button
- type="primary"
- @click="
- directionalVisible = true
- getTemplateList()
- "
- >
- 选择定向包
- </a-button>
- </p>
- <a-table
- v-if="checkDirectionalList.length > 0"
- :columns="columns"
- :data-source="checkDirectionalList"
- bordered
- :pagination="false"
- >
- <!-- @visibleChange="changeTag(items.code)" -->
- <span slot="action" slot-scope="text, record">
- <a @click="changeTag(record.templateId)">预览</a>
- <a-divider type="vertical" />
- <a @click="removeTarget(record.templateId)">删除</a>
- </span>
- </a-table>
- </a-card>
- <a-card class="search-box step-jump create-info creat-all-info">
- <div slot="title">
- 创意基本信息
- <a-tooltip
- placement="left"
- title="请填写广告组信息"
- autoAdjustOverflow
- v-if="groupTemplateId == null && !campaignData.campaignName"
- >
- <a-button
- type="primary"
- style="float: right"
- :disabled="groupTemplateId == null && !campaignData.campaignName"
- >
- 编辑
- </a-button>
- </a-tooltip>
- <a-button
- v-else
- type="primary"
- style="float: right"
- @click="showDrawerCreate"
- :disabled="groupTemplateId == null && !campaignData.campaignName"
- >
- 编辑
- </a-button>
- </div>
- <a-row>
- <a-col :xl="14" :md="24">
- <a-form-item label="制作方式"> <!-- {{}} -->自定义 </a-form-item>
- </a-col>
- <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
- <a-form-item label="自动发送礼包码"> <!--按展示付费(oCPM)-->关闭 </a-form-item>
- </a-col>
- </a-row>
- <!-- v-if="creativeCategorySwitch" -->
- <a-row>
- <a-col :xl="14" :md="24">
- <a-form-item label="创意分类">
- <!-- {{creativeInfo.creativeCategory}} -->
- <a-cascader
- v-if="createTiveTemplateId"
- :options="createOptions"
- v-model="creativeInfo.creativeCategory"
- :fieldNames="fieldNames"
- placeholder="请选择创意分类"
- disabled
- />
- <span v-else>无</span>
- </a-form-item>
- <!-- creativeInfo.creativeCategory -->
- </a-col>
- <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
- <a-form-item label="封面贴纸">
- <a-popover
- title="封面贴纸"
- :overlayStyle="{ width: '400px' }"
- placement="left"
- v-if="createTiveTemplateId && creativeInfo.overlayType[0]"
- >
- <template slot="content">
- <img :src="showImgUrl(creativeInfo.overlayType[0])" alt="" style="width: 100%" />
- </template>
- <!-- {{ creativeInfo.overlayType[0] }} -->
- 1张
- </a-popover>
- <span v-else>无</span>
- </a-form-item>
- <!-- creativeInfo.overlayType -->
- </a-col>
- </a-row>
- <!-- v-if="creativeCategorySwitch" -->
- <a-row>
- <a-col :xl="14" :md="24">
- <a-form-item label="创意标签">
- {{ createTiveTemplateId && creativeInfo.creativeTag ? creativeInfo.creativeTag.join() : '无' }}
- </a-form-item>
- <!-- creativeInfo.creativeTag -->
- </a-col>
- <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
- <a-form-item label="行动号召">
- {{ createTiveTemplateId ? creativeInfo.actionBarText : '无' }}
- </a-form-item>
- <!-- creativeInfo.actionBarText -->
- </a-col>
- </a-row>
- </a-card>
- <a-card class="search-box step-jump" title="创意素材">
- <p>
- 已选素材:{{ videoMaterialShow ? materialCount : 0 }}/200
- <a-button
- type="primary"
- @click="materialVisible = true"
- style="margin: 0 15px"
- :disabled="this.accountId == undefined || accountId == '' || accountId == null"
- >
- 选择素材
- </a-button>
- </p>
- <div
- v-if="videoMaterialShow && materialCount > 0"
- style="
- width: 100%;
- height: 400px;
- overflow: auto;
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- background: #f2f2f2;
- padding: 30px;
- "
- >
- <div v-for="(item, index) in materialList" :key="index" style="width: 100%; display: contents">
- <template v-for="(items, indexMaterial) in item.photoArr">
- <div
- style="
- width: 45%;
- height: 250px;
- display: flex;
- background: white;
- justify-content: space-between;
- margin: 20px;
- padding: 10px;
- "
- >
- <div style="width: 45%; height: 100%; text-align: center" class="showShare">
- <img :src="items.photoId.coverUrl" style="width: auto; height: 100%" alt="" srcset="" />
- <div
- style="
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.5);
- position: absolute;
- top: 0;
- "
- class="share"
- >
- <a-button
- @click="
- visibleVideo = true
- videoUrlShow = items.photoId.url
- "
- >
- 查看视频
- </a-button>
- </div>
- </div>
- <div style="width: 45%; height: 100%; text-align: center">
- <img
- v-if="items.image.url"
- :src="items.image.url"
- style="width: auto; height: 100%"
- alt=""
- srcset=""
- />
- <img
- v-else
- :src="items.photoId.coverUrl"
- style="width: auto; height: 100%"
- alt=""
- srcset=""
- />
- </div>
- <a-popconfirm
- title="确定要删除这个素材吗?"
- ok-text="确定"
- cancel-text="取消"
- @confirm="removeVideoMaterial(index, indexMaterial)"
- @cancel="cancel"
- >
- <a-icon type="close-circle" style="cursor: pointer" />
- </a-popconfirm>
- </div>
- </template>
- </div>
- </div>
- <div style="margin-top: 20px" v-if="materialInfo.matchingMethod != 1 && videoMaterialShow">
- <a-list bordered :data-source="descriptionList">
- <a-list-item slot="renderItem" slot-scope="item, index">
- <p v-if="!item.edit" style="margin-bottom: 0; width: 100%">
- {{ item.value }}
- </p>
- <p v-else style="margin-bottom: 0; width: 100%">
- <a-input
- id="error"
- placeholder="请输入广告语"
- v-model.trim="item.value"
- :max-length="30"
- style="width: 50%"
- />
- </p>
- <div slot="actions">
- <a @click="editDescription(item)">{{ item.edit ? '确定' : '编辑' }}</a>
- <a-divider type="vertical" />
- <a @click="removeDescription(index)">删除</a>
- </div>
- </a-list-item>
- <div slot="header">
- <a-button
- type="primary"
- style="margin-right: 20px"
- @click="addDescription"
- :disabled="
- descriptionList.length >=
- (materialInfo.matchingMethod == 2 ? materialCount : materialInfo.materialList.length)
- "
- >
- 选择广告语
- </a-button>
- <a-button
- type="primary"
- style="margin-right: 20px"
- @click="addOne"
- :disabled="
- descriptionList.length >=
- (materialInfo.matchingMethod == 2 ? materialCount : materialInfo.materialList.length)
- "
- >
- 添加广告语
- </a-button>
- {{ descriptionList.length }}/{{
- materialInfo.matchingMethod == 2 ? materialCount : materialInfo.materialList.length
- }}
- <a style="margin-left: 20px" @click="descriptionList = []">清空 </a>
- </div>
- </a-list>
- </div>
- </a-card>
- <div style="display: flex; justify-content: space-between; margin-bottom: 100px">
- <a-button type="primary" @click="checkAppIds"> 预览应用/链接 </a-button>
- <div>
- <a-button type="primary" style="margin-right: 15px" @click="handleSubmit" :loading="sumbitLoading">
- 预览广告组
- </a-button>
- <a-button @click="clearAllData"> 清空配置 </a-button>
- </div>
- </div>
- </a-spin>
- </a-form>
- </a-col>
- </a-row>
- </div>
- <!-- 规则配置 -->
- <a-modal
- title="规则配置"
- v-model="ruleConfigVisible"
- :width="1000"
- @ok="ruleConfigFormOk"
- @cancel="ruleConfigFormCancel"
- v-dialog-drag
- >
- <a-form :form="ruleConfigForm" layout="horizontal" hide-required-mark v-bind="formItemLayout">
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="广告分组规则">
- <a-radio-group v-decorator="['groupRule', { rules: [{ required: true, message: '' }], initialValue: 1 }]">
- <a-radio-button :value="1">按定向包分组</a-radio-button>
- <a-radio-button :value="2">按创意组分组</a-radio-button>
- <a-radio-button :value="3" disabled>按落地页分组</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="广告计划单日预算">
- <a-radio-group
- v-decorator="['budgetType', { rules: [{ required: true, message: '' }], initialValue: '1' }]"
- >
- <a-radio-button value="1">不限</a-radio-button>
- <a-radio-button value="2">统一预算</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="getData('budgetType', 'ruleConfigForm') == '2'">
- <a-col :span="16">
- <a-form-item label="" v-bind="tailFormItemLayout" selfUpdate>
- <a-input-number
- v-decorator="[
- 'dayBudget',
- {
- rules: [{ required: true, message: ' ' }, { validator: handleConfirmValue }],
- },
- ]"
- :min="500"
- :precision="0"
- :max="100000000"
- style="width: 100%"
- placeholder="不小于500, 不超过100000000,仅支持输入自然数"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="计划默认状态">
- <a-radio-group
- v-decorator="['campaignStatus', { rules: [{ required: true, message: '' }], initialValue: 2 }]"
- >
- <a-radio-button :value="1">开启</a-radio-button>
- <a-radio-button :value="2">关闭</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="getData('campaignStatus', 'ruleConfigForm') == 2">
- <a-col :span="16">
- <a-form-item label="是否定时开始计划">
- <a-radio-group v-decorator="['isTime', { rules: [{ required: true, message: '' }], initialValue: '2' }]">
- <a-radio-button value="1">是</a-radio-button>
- <a-radio-button value="2">否</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- <a-col :span="8" :pull="6" v-if="getData('isTime', 'ruleConfigForm') == '1'">
- <a-form-item label="选择时间">
- <a-date-picker
- v-decorator="['timeStart', { rules: [{ required: true, message: '定时开始计划时,开启时间必填' }] }]"
- show-time
- placeholder="选择开启时间"
- @change="onChange"
- @ok="onOk"
- :disabled-date="disabledDateOne"
- :showToday="false"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="广告组默认状态">
- <a-radio-group
- v-decorator="['unitStatus', { rules: [{ required: true, message: '' }], initialValue: 1 }]"
- >
- <a-radio-button :value="1">开启</a-radio-button>
- <a-radio-button :value="2">关闭</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="广告计划名称">
- <a-input
- id="campaignName"
- v-decorator="[
- 'campaignName',
- {
- rules: [{ required: true, message: '广告计划名称必填' }],
- },
- ]"
- style="width: 100%"
- placeholder="请输入"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="" v-bind="tailFormItemLayout">
- <a-tag color="#2db7f5" @click="getChangeAll('应用名称', 'ruleConfigForm', 'campaignName')"
- >+应用名称</a-tag
- >
- <a-tag color="#2db7f5" @click="getChangeAll('定向包', 'ruleConfigForm', 'campaignName')">+定向包</a-tag>
- <a-tag color="#2db7f5" @click="getChangeAll('日期', 'ruleConfigForm', 'campaignName')">+日期</a-tag>
- <a-tag color="#2db7f5" @click="getChangeAll('渠道号', 'ruleConfigForm', 'campaignName')"
- >+渠道号(应用标记)</a-tag
- >
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="" v-bind="tailFormItemLayout">
- <!-- <a-checkbox v-decorator="['keep']"> 存为预设 </a-checkbox> -->
- <!-- <a-checkbox-group v-decorator="['keep']"> -->
- <a-checkbox v-model="campaignKeep"> 存为预设 </a-checkbox>
- <!-- </a-checkbox-group> -->
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- </a-modal>
- <!-- 规则配置结束 -->
- <!-- 广告组基本信息预设 -->
- <a-drawer :width="800" :visible="visible" :body-style="{ paddingBottom: '80px' }" @close="closeUnit('ruleForm')">
- <h2 slot="title" style="margin-bottom: 0">广告组基本信息</h2>
- <!-- class="create-info" -->
- <a-form-model ref="ruleForm" :model="unitInfo" v-bind="formItemLayout" :rules="rules" :hideRequiredMark="true">
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-model-item label="投放范围">
- <a-radio-group v-model="allianceAccount" @change="LOLchange">
- <a-radio-button value="1">默认</a-radio-button>
- <a-radio-button value="2">快手广告联盟</a-radio-button>
- </a-radio-group>
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="getData('systemType', 'form') == 'Android'">
- <a-col :span="16">
- <a-form-model-item label="" v-bind="tailFormItemLayout">
- <a-checkbox v-model="unitInfo.useAppMarket" @change="appStoreCheck"> 优先从系统应用商店下载 </a-checkbox>
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="getData('systemType', 'form') == 'Android'">
- <a-col :span="16">
- <a-form-model-item label="" :wrapperCol="{ span: 24, offset: 5 }" v-if="unitInfo.useAppMarket">
- <a-checkbox-group v-model="unitInfo.appStore">
- <a-checkbox value="huawei">华为</a-checkbox>
- <a-checkbox value="oppo">OPPO</a-checkbox>
- <a-checkbox value="vivo">VIVO</a-checkbox>
- <a-checkbox value="xiaomi">小米</a-checkbox>
- <a-checkbox value="meizu">魅族</a-checkbox>
- <a-checkbox value="smartisan">锤子</a-checkbox>
- </a-checkbox-group>
- <br />
- 请勾选投放应用已上架的应用商店(默认全选)
- </a-form-model-item>
- </a-col>
- </a-row>
- <!-- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-model-item label="转化目标">
- <a-button type="primary" style="margin-right: 15px"> 选择转化目标 </a-button>
- </a-form-model-item>
- </a-col>
- </a-row> -->
- <h2 style="margin: 20px 0 10px 0">预算与出价</h2>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-model-item label="单日预算">
- <a-radio-group v-model="dayBudgetType" @change="unitInfo.dayBudget = null">
- <a-radio-button value="1">不限</a-radio-button>
- <a-radio-button value="2">统一预算</a-radio-button>
- </a-radio-group>
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="dayBudgetType == '2'">
- <a-col :span="16">
- <a-form-model-item label="" :wrapperCol="{ span: 24, offset: 5 }" prop="dayBudget">
- <a-input-number
- v-model="unitInfo.dayBudget"
- style="width: 100%"
- placeholder="不小于500, 不超过100000000,仅支持输入自然数"
- :min="500"
- :precision="0"
- />
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-model-item label="投放方式" prop="speed">
- <a-radio-group v-model="unitInfo.speed">
- <a-radio-button value="1">快速投放</a-radio-button>
- <a-radio-button value="2">平滑投放</a-radio-button>
- <a-radio-button value="3">优先低成本</a-radio-button>
- </a-radio-group>
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-model-item label="排期">
- <a-radio-group v-model="unitTime" @change="setTime">
- <a-radio-button value="1">从今天开始长期投放</a-radio-button>
- <a-radio-button value="2">设置开始和结束日期</a-radio-button>
- </a-radio-group>
- <br />
- <a-range-picker
- v-if="unitTime == '2'"
- v-model="unitInfo.timeRange"
- format="YYYY-MM-DD"
- :allowClear="false"
- :disabled-date="disabledDate"
- />
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-model-item label="投放时段">
- <a-radio-group v-model="scheduleTime" @change="setTimeAll">
- <a-radio-button value="1">全天</a-radio-button>
- <a-radio-button value="2">特定时间</a-radio-button>
- </a-radio-group>
- <br />
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="scheduleTime == '2'">
- <a-col :span="24">
- <a-form-model-item label="" :wrapperCol="{ span: 24 }">
- <selectCheckAll style="width: 100%" :scheduleTime.sync="unitInfo.scheduleTime" ref="selectCheck" />
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-model-item label="创意展现方式">
- <a-radio-group v-model="unitInfo.showMode">
- <a-radio-button value="2">智能优选</a-radio-button>
- <a-radio-button value="1">随机轮播</a-radio-button>
- </a-radio-group>
- <br />
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="allianceAccount == '1'">
- <a-col :span="24" :pull="2" style="margin-left: 15px">
- <a-form-model-item
- label="场景广告位"
- :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
- :wrapperCol="{ lg: { span: 19 }, sm: { span: 19 } }"
- >
- <checkBoxGroup
- :options="[
- { label: '优选广告位', value: 1 },
- { label: '信息流广告', value: 7 },
- { label: '上下滑大屏广告', value: 6 },
- { label: '视频播放页广告', value: 3 },
- ]"
- v-model="unitInfo.sceneId"
- @change="changeData"
- />
- </a-form-model-item>
- </a-col>
- </a-row>
- <h2 style="margin: 20px 0 10px 0">优化目标和计费</h2>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-model-item label="优化目标">
- <a-radio-group v-model="unitInfo.bidType" @change="bidTypeChange">
- <a-radio-button :value="2">封面点击数</a-radio-button>
- <a-radio-button :value="10">转化数</a-radio-button>
- </a-radio-group>
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="unitInfo.bidType == 10 && groupTypeData">
- <a-col :span="16">
- <a-form-model-item label="转化目标">
- <a-select v-model="unitInfo.ocpxActionType">
- <a-select-option :value="2">行为数</a-select-option>
- <a-select-option :value="180" v-if="groupTypeData.isActivate == '1'">激活</a-select-option>
- <a-select-option :value="53" v-if="groupTypeData.isFormSubmit == '1'">表单提交</a-select-option>
- <a-select-option :value="394" v-if="groupTypeData.isOrderSubmit == '1'">订单提交</a-select-option>
- <a-select-option :value="348" v-if="groupTypeData.isValidClue == '1'">使用有效线索</a-select-option>
- <a-select-option :value="383" v-if="groupTypeData.isCreditGrant == '1'">授信出价</a-select-option>
- <a-select-option :value="384" v-if="groupTypeData.isWanJian == '1'">完件出价</a-select-option>
- <a-select-option :value="190" v-if="groupTypeData.isPurchase == '1'">付费出价</a-select-option>
- <a-select-option :value="191" v-if="groupTypeData.isFirstdayRoi == '1'">首日ROI</a-select-option>
- <a-select-option :value="396" v-if="groupTypeData.isRegister == '1'">注册优化目标</a-select-option>
- </a-select>
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row
- :gutter="16"
- v-if="
- groupTypeData &&
- (unitInfo.ocpxActionType == 180 || unitInfo.ocpxActionType == 53) &&
- groupTypeData.deepConversionTypes.length > 0
- "
- >
- <a-col :span="16">
- <a-form-model-item label="深度转化目标">
- <a-select v-model="unitInfo.deepConversionType" allowClear>
- <a-select-option
- :value="items.deepConversionType"
- v-for="(items, index) of groupTypeData.deepConversionTypes"
- :key="index"
- >
- {{ items.desc }}</a-select-option
- >
- </a-select>
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-model-item label="计费方式">
- <a-radio default-checked>{{ unitInfo.bidType == 2 ? '点击计费' : '展示计费(oCPM)' }}</a-radio>
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-model-item label="出价方式">
- <a-radio-group
- v-model="unitInfo.templateBidType"
- @change="
- unitInfo.bidMin = null
- unitInfo.bidMax = null
- unitInfo.cpaBid = null
- unitInfo.bid = null
- "
- >
- <a-radio-button :value="1">固定出价</a-radio-button>
- <a-radio-button :value="2">随机出价</a-radio-button>
- </a-radio-group>
- </a-form-model-item>
- </a-col>
- </a-row>
- <div v-if="unitInfo.bidType == 10">
- <div v-if="unitInfo.templateBidType == 1">
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-model-item label="转化目标出价" prop="cpaBid">
- <a-input-number
- v-model="unitInfo.cpaBid"
- style="width: 90%"
- :min="0"
- :precision="2"
- :max="unitInfo.dayBudget ? unitInfo.dayBudget : 999999"
- />元
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row
- :gutter="16"
- v-if="
- groupTypeData &&
- (unitInfo.ocpxActionType == 180 || unitInfo.ocpxActionType == 53) &&
- groupTypeData.deepConversionTypes.length > 0
- "
- >
- <a-col :span="16">
- <a-form-model-item label="深度转化出价">
- <a-input-number
- v-model="unitInfo.deepConversionBid"
- style="width: 90%"
- :min="unitInfo.cpaBid ? unitInfo.cpaBid : 0"
- :precision="2"
- />元
- <br />
- <span v-if="unitInfo.deepConversionBid && (unitInfo.cpaBid || unitInfo.cpaBid > 0)"
- >按照两个出价得到的期望目标深度转化率为{{
- ((unitInfo.cpaBid / unitInfo.deepConversionBid) * 100).toFixed(2)
- }}%</span
- >
- </a-form-model-item>
- </a-col>
- </a-row>
- </div>
- <div v-else>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-model-item
- label="出价范围"
- prop="bidMin"
- :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
- :wrapperCol="{ lg: { span: 6 }, sm: { span: 6 } }"
- >
- <a-input-number
- v-model="unitInfo.bidMin"
- style="width: 60%"
- @change="changeBidMin"
- :min="1"
- :precision="2"
- :max="unitInfo.dayBudget ? unitInfo.dayBudget>3000?3000:unitInfo.dayBudget : 3000"
- />
- </a-form-model-item>
- </a-col>
- <a-col :span="2" :pull="10" style="position: relative; right: 312px; top: 8px">~</a-col>
- <a-col :span="6" :pull="11">
- <a-form-model-item label="" prop="bidMax">
- <a-input-number
- v-model="unitInfo.bidMax"
- style="width: 53.3%"
- @change="changeBidMax"
- :min="1"
- :precision="2"
- :max="unitInfo.dayBudget ? unitInfo.dayBudget>3000?3000:unitInfo.dayBudget : 3000"
- />
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row
- :gutter="16"
- v-if="
- groupTypeData &&
- (unitInfo.ocpxActionType == 180 || unitInfo.ocpxActionType == 53) &&
- groupTypeData.deepConversionTypes.length > 0
- "
- >
- <a-col :span="16">
- <a-form-model-item label="深度转化出价">
- <a-input-number
- v-model="unitInfo.deepConversionBid"
- style="width: 90%"
- :min="unitInfo.bidMax ? unitInfo.bidMax : 0"
- :precision="2"
- />元
- <br />
- <span
- v-if="
- unitInfo.deepConversionBid &&
- (unitInfo.bidMin || unitInfo.bidMin > 0) &&
- (unitInfo.bidMax || unitInfo.bidMax > 0)
- "
- >按照两个出价得到的期望目标深度转化率为{{
- ((unitInfo.bidMin / unitInfo.deepConversionBid) * 100).toFixed(2)
- }}%~{{ ((unitInfo.bidMax / unitInfo.deepConversionBid) * 100).toFixed(2) }}%</span
- >
- </a-form-model-item>
- </a-col>
- </a-row>
- </div>
- </div>
- <div v-else-if="unitInfo.bidType == 2">
- <div v-if="unitInfo.templateBidType == 1">
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-model-item label="出价" prop="bid">
- <a-input-number
- v-model="unitInfo.bid"
- style="width: 90%"
- :min="0.2"
- :precision="2"
- :max="unitInfo.dayBudget ? (unitInfo.dayBudget > 100 ? 100 : unitInfo.dayBudget) : 100"
- />元
- </a-form-model-item>
- </a-col>
- </a-row>
- </div>
- <div v-else>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-model-item
- label="出价范围"
- prop="bidMin"
- :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
- :wrapperCol="{ lg: { span: 6 }, sm: { span: 6 } }"
- >
- <a-input-number
- v-model="unitInfo.bidMin"
- style="width: 60%"
- @change="changeBidMin"
- :min="0.2"
- :precision="2"
- :max="unitInfo.dayBudget ? (unitInfo.dayBudget > 100 ? 100 : unitInfo.dayBudget) : 100"
- />
- </a-form-model-item>
- </a-col>
- <a-col :span="2" :pull="10" style="position: relative; right: 280px; top: 8px">~</a-col>
- <a-col :span="6" :pull="11">
- <a-form-model-item label="" prop="bidMax">
- <a-input-number
- v-model="unitInfo.bidMax"
- style="width: 53.3%"
- @change="changeBidMax"
- :min="0.2"
- :precision="2"
- :max="unitInfo.dayBudget ? (unitInfo.dayBudget > 100 ? 100 : unitInfo.dayBudget) : 100"
- />
- </a-form-model-item>
- </a-col>
- </a-row>
- </div>
- </div>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-model-item label="广告组名称" prop="unitName">
- <a-input v-model="unitInfo.unitName" style="width: 90%" id="unitName" />
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="" v-bind="tailFormItemLayout">
- <a-tag color="#2db7f5" @click="getChangeAll('应用名称', 'unitInfo', 'unitName')">+应用名称</a-tag>
- <a-tag color="#2db7f5" @click="getChangeAll('定向包', 'unitInfo', 'unitName')">+定向包</a-tag>
- <a-tag color="#2db7f5" @click="getChangeAll('日期', 'unitInfo', 'unitName')">+日期</a-tag>
- <a-tag color="#2db7f5" @click="getChangeAll('渠道号', 'unitInfo', 'unitName')">+渠道号(应用标记)</a-tag>
- <a-tag color="#2db7f5" @click="getChangeAll('创意制作方式', 'unitInfo', 'unitName')">+创意制作方式</a-tag>
- <a-tag color="#2db7f5" @click="getChangeAll('广告位置', 'unitInfo', 'unitName')">+广告位置</a-tag>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="" v-bind="tailFormItemLayout">
- <a-checkbox v-model="keep"> 存为预设 </a-checkbox>
- </a-form-item>
- </a-col>
- </a-row>
- </a-form-model>
- <div
- :style="{
- position: 'absolute',
- right: 0,
- bottom: 0,
- width: '100%',
- borderTop: '1px solid #e9e9e9',
- padding: '10px 16px',
- background: '#fff',
- textAlign: 'right',
- zIndex: 1,
- }"
- >
- <a-button :style="{ marginRight: '8px' }" @click="closeUnit('ruleForm')"> 取消 </a-button>
- <a-button type="primary" @click="onClose"> 提交 </a-button>
- </div>
- </a-drawer>
- <!-- 广告组基本信息预设结束 -->
- <!-- 广告创意基本信息预设 -->
- <a-drawer
- :width="800"
- :visible="creativeVisible"
- :body-style="{ paddingBottom: '80px' }"
- @close="closeUnit('createForm')"
- >
- <h2 slot="title" style="margin-bottom: 0">广告创意基本信息</h2>
- <!-- class="create-info" -->
- <a-form-model
- ref="createForm"
- :model="creativeInfo"
- v-bind="formItemLayout"
- :rules="creativeRules"
- :hideRequiredMark="true"
- >
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-model-item label="创意制作方式">
- <a-radio-group v-model="creativeInfo.unitType">
- <a-radio-button :value="4">自定义</a-radio-button>
- <a-radio-button :value="7" disabled>程序化</a-radio-button>
- </a-radio-group>
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-model-item label="行动号召" prop="actionBarText">
- <a-select
- v-model="creativeInfo.actionBarText"
- showSearch
- allowClear
- placeholder="选择行动号召按钮文案"
- optionFilterProp="children"
- :filterOption="filterOption"
- >
- <a-select-option
- v-for="appModel in actionBarTextList"
- :key="appModel.id"
- :value="appModel.actionBarText"
- >{{ appModel.actionBarText }}</a-select-option
- >
- </a-select>
- </a-form-model-item>
- </a-col>
- </a-row>
- <!-- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-model-item label="发送礼包码">
- <a-radio-group v-model="creativeInfo.targetActionType">
- <a-radio-button :value="1">关闭</a-radio-button>
- <a-radio-button :value="2">开启</a-radio-button>
- </a-radio-group>
- </a-form-model-item>
- </a-col>
- </a-row> -->
- <a-row :gutter="16" v-if="stickerStyles.length > 0" class="fengmian">
- <a-col :span="16">
- <a-form-model-item label="封面贴纸">
- <a-checkbox-group v-model="creativeInfo.overlayType">
- <a-checkbox
- v-for="(item, index) in stickerStyles"
- :key="index"
- :value="item.id"
- :disabled="
- creativeInfo.overlayType.filter((i) => i == item.id).length == 0 &&
- creativeInfo.overlayType.length >= 1
- "
- >
- <img :src="item.url" alt="" style="width: 50px; margin: 10px; opacity: 0.5" />
- </a-checkbox>
- </a-checkbox-group>
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="creativeInfo.overlayType.length > 0">
- <a-col :span="16">
- <a-form-model-item label="封面广告语标题" prop="stickerTitle">
- <a-input v-model="creativeInfo.stickerTitle" style="width: 100%" placeholder="请输入" />
- </a-form-model-item>
- </a-col>
- </a-row>
- <h2 style="margin: 20px 0 10px 0" v-if="creativeCategorySwitch">创意分类和标签</h2>
- <a-row :gutter="16" v-if="creativeCategorySwitch">
- <a-col :span="16">
- <a-form-model-item label="创意分类">
- <a-cascader
- :options="createOptions"
- v-model="creativeInfo.creativeCategory"
- :fieldNames="fieldNames"
- placeholder="请选择创意分类"
- />
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="creativeCategorySwitch">
- <a-col :span="16">
- <a-form-model-item label="创意标签" prop="creativeTag">
- <a-select
- mode="tags"
- style="width: 100%"
- placeholder="按回车生成标签"
- v-model="creativeTag"
- dropdownClassName="display-none-selset"
- :token-separators="[',', ' ', ',']"
- @change="setData"
- >
- </a-select>
- <div style="width: 100%; height: 200px; border: 1px solid #f2f2f2; padding: 0 10px; margin-top: 20px">
- <h4 style="margin-bottom: 0">已填标签</h4>
- <template v-for="(tag, index) in creativeInfo.creativeTag">
- <a-tooltip v-if="tag.length > 10" :key="tag" :title="tag">
- <a-tag :key="tag" :closable="true" @close="() => handleClose(tag)">
- {{ `${tag.slice(0, 10)}...` }}
- </a-tag>
- </a-tooltip>
- <a-tag v-else :key="tag" :closable="true" @close="() => handleClose(tag)">
- {{ tag }}
- </a-tag>
- </template>
- </div>
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="" v-bind="tailFormItemLayout">
- <a-checkbox value="1" v-model="creativeInfo.keep"> 存为预设 </a-checkbox>
- </a-form-item>
- </a-col>
- </a-row>
- </a-form-model>
- <div
- :style="{
- position: 'absolute',
- right: 0,
- bottom: 0,
- width: '100%',
- borderTop: '1px solid #e9e9e9',
- padding: '10px 16px',
- background: '#fff',
- textAlign: 'right',
- zIndex: 1,
- }"
- >
- <a-button :style="{ marginRight: '8px' }" @click="closeUnit('createForm')"> 取消 </a-button>
- <a-button type="primary" @click="submitCreative"> 提交 </a-button>
- </div>
- </a-drawer>
- <!-- 广告创意基本信息预设结束 -->
- <!-- 定向包选择开始 -->
- <a-modal
- title="我的定向包"
- v-model="directionalVisible"
- :width="1000"
- @ok="directionalOk"
- @cancel="directionalCancel"
- >
- <div style="margin-bottom: 15px; display: flex">
- <a-input-search
- placeholder="请输入定向包名称"
- enter-button
- @search="onSearch"
- v-model="templateName"
- style="width: 200px; margin-right: 10px"
- />
- <a-button type="primary" @click="getTemplate()" :loading="templateLoading"> 刷新模板</a-button>
- </div>
- <a-table
- rowKey="templateId"
- :loading="loading"
- :columns="columns"
- :data-source="templateList"
- bordered
- :pagination="false"
- :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
- >
- <!-- @visibleChange="changeTag(items.code)" -->
- <span slot="action" slot-scope="text, record">
- <a @click="changeTag(record.templateId)">预览</a>
- <a-divider type="vertical" />
- <a @click="lookTemplate(null, record.templateId)">编辑</a>
- </span>
- </a-table>
- </a-modal>
- <!-- 定向包选择结束 -->
- <!--定向预览-->
- <a-modal title="我的定向包" v-model="previewVisible" :width="1000" :footer="null">
- <a-form
- layout="horizontal"
- hide-required-mark
- v-bind="formItemLayout"
- v-if="templateData.templateName"
- class="create-info"
- >
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="定向包">
- {{ templateData.templateName }}
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="定向人群包">
- <span v-if="templateData.population == '' || templateData.population == null"> 不限 </span>
- <div v-else>
- <span v-for="(item, index) in JSON.parse(templateData.population)" :key="item">
- {{ showPeopleName(item) }}{{ index == JSON.parse(templateData.population).length - 1 ? '' : ',' }}
- </span>
- </div>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="24" :pull="1" style="margin-left: -26px">
- <a-form-item label="区域">
- <span v-if="templateData.region == '' || templateData.region == null"> 不限 </span>
- <div v-else>
- {{ region.join(',') }}
- </div>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="年龄">
- <span
- v-if="
- (templateData.agesRange == '' || templateData.agesRange == null) &&
- (templateData.min == '' || templateData.min == null) &&
- (templateData.max == '' || templateData.max == null)
- "
- >
- 不限
- </span>
- <div v-else>
- <span v-if="templateData.agesRange == '' || templateData.agesRange == null">
- {{ templateData.min + '岁~' + templateData.max + '岁' }}
- </span>
- <span v-else>
- <span v-for="(item, index) in JSON.parse(templateData.agesRange)" :key="index">
- {{ item | kuaishouAge }}{{ index == JSON.parse(templateData.agesRange).length - 1 ? '' : ',' }}
- </span>
- </span>
- </div>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="性别">
- {{ templateData.gender == 1 ? '女' : templateData.gender == 2 ? '男' : '不限' }}
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="平台">
- {{ templateData.platformOs == 1 ? 'Android系统' : templateData.platformOs == 2 ? 'IOS系统' : '不限' }}
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="手机价格">
- <span v-if="templateData.devicePrice == '' || templateData.devicePrice == null"> 不限 </span>
- <div v-else>
- <span v-for="(item, index) in JSON.parse(templateData.devicePrice)" :key="index">
- {{ item | kuaishouPrice }}{{ index == JSON.parse(templateData.devicePrice).length - 1 ? '' : ',' }}
- </span>
- </div>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="网络环境">
- {{ templateData.network == 1 ? 'Wi-Fi' : templateData.network == 2 ? '移动网络' : '不限' }}
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="过滤已转化人群">
- {{ templateData.filterConvertedLevel | kuaishouFilterConvertedLevel }}
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- </a-modal>
- <!-- 定向预览结束 -->
- <!-- 创意素材选择 -->
- <a-modal title="创意素材" v-model="materialVisible" :width="1000" @ok="handleOkVideo" @cancel="cancelVideo">
- <a-form-model
- ref="materialForm"
- :model="materialInfo"
- v-bind="formItemLayout"
- :rules="materialRules"
- :hideRequiredMark="true"
- >
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-model-item label="自动生成封面">
- <a-radio-group v-model="materialInfo.isMakeCover">
- <a-radio-button :value="1">不开启</a-radio-button>
- <a-radio-button :value="2">开启</a-radio-button>
- </a-radio-group>
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="materialInfo.isMakeCover == 2">
- <a-col :span="16">
- <a-form-model-item label="设置封面数量" prop="coverNumber">
- <a-input-number
- v-model="materialInfo.coverNumber"
- style="width: 100%"
- placeholder="请输入1~8之间的封面数量"
- :min="1"
- :max="8"
- :precision="0"
- />
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-model-item label="广告语匹配方式">
- <a-radio-group v-model="materialInfo.matchingMethod">
- <a-radio-button :value="1">自定义</a-radio-button>
- <a-radio-button :value="2">按创意匹配</a-radio-button>
- <a-radio-button :value="3">按创意组匹配</a-radio-button>
- </a-radio-group>
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-model-item label="是否设置创意数量">
- <a-radio-group v-model="materialInfo.groupCreativity">
- <a-radio-button :value="1">是</a-radio-button>
- <a-radio-button :value="2">否</a-radio-button>
- </a-radio-group>
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="materialInfo.groupCreativity == 1">
- <a-col :span="16">
- <a-form-model-item label="设置创意数量" prop="creativityNumber">
- <a-input-number
- v-model="materialInfo.creativityNumber"
- style="width: 100%"
- placeholder="请输入1~15之间的创意数量"
- :min="1"
- :max="15"
- :precision="0"
- />
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="24">
- <div
- style="
- width: 100%;
- height: 50px;
- border: 1px solid #f2f2f2;
- padding: 0 20px;
- line-height: 50px;
- position: relative;
- "
- >
- <span style="color: black; margin-right: 20px; font-weight: 700">创意制作</span>
- <span style="margin-right: 20px">创意组数量: {{ materialInfo.materialList.length }} 组</span>
- <span style="margin-right: 20px">视频数量: {{ materialCount }} 个</span>
- <a
- style="margin-right: 20px"
- @click="
- materialInfo.materialList = []
- checkVideo = []
- checkVideoAll = []
- checkVideoWai = []
- sumContent = 0
- "
- >清空</a
- >
- <a-button type="primary" style="position: absolute; right: 20px; top: 8px" @click="checkVideoFun()">
- 批量选择视频
- </a-button>
- </div>
- </a-col>
- </a-row>
- <a-row :gutter="16" style="margin-top: 20px">
- <a-col :span="24">
- <a-collapse accordion :defaultActiveKey="0">
- <a-collapse-panel
- :header="item.name"
- v-for="(item, indexList) in materialInfo.materialList"
- :key="indexList"
- >
- <a-tabs type="editable-card" hideAdd v-model="item.active" @edit="remove">
- <a-tab-pane
- forceRender
- :tab="'创意' + (indexMater + 1)"
- v-for="(items, indexMater) in item.photoArr"
- :key="indexMater + '@' + indexList"
- >
- <div
- style="
- width: 100%;
- height: 308px;
- border: 1px solid #f2f2f2;
- padding: 10px;
- display: flex;
- justify-content: space-between;
- "
- >
- <div
- style="width: 40%; height: 100%; display: flex; justify-content: space-between"
- v-if="items.creativeName"
- >
- <div style="width: 45%; height: 100%" class="showShare">
- <img
- :src="items.photoId.coverUrl"
- style="width: 100%; height: auto"
- alt=""
- srcset=""
- v-if="items.photoId.coverUrl"
- />
- <div
- style="
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.5);
- position: absolute;
- top: 0;
- "
- class="share"
- >
- <a-button
- @click="
- visibleVideo = true
- videoUrlShow = items.photoId.url
- "
- >
- 查看视频
- </a-button>
- </div>
- </div>
- <div style="width: 45%; height: 100%">
- <img
- v-if="items.image.url"
- :src="items.image.url"
- style="width: 100%; height: auto"
- alt=""
- srcset=""
- />
- <uploadFile
- v-else
- :value.sync="items.image"
- :checkFile="fileWater"
- @overUpload="overUploadImage"
- @removeUpload="deleteImage"
- :fileCount="1"
- uploadType="image"
- :multiple="false"
- />
- </div>
- </div>
- <div style="width: 55%; height: 100%; line-height: 1">
- <a-form-model-item
- ref="description"
- :label="'广告语'"
- :prop="'materialList.' + indexList + '.photoArr.' + indexMater + '.description'"
- :rules="{
- required: true,
- message: '广告语必填',
- trigger: 'blur',
- }"
- style="margin-top: 60px"
- v-if="materialInfo.matchingMethod == 1"
- >
- <a-textarea
- class="rending"
- placeholder="请输入广告语"
- v-model.trim="items.description"
- :autosize="{ minRows: 2, maxRows: 6 }"
- :max-length="30"
- ></a-textarea>
- <p
- style="
- font-size: 12px;
- color: #b6bbc7;
- letter-spacing: 0.3px;
- text-align: right;
- line-height: 20px;
- position: absolute;
- bottom: 0;
- right: 6px;
- width: 100%;
- margin-bottom: 0;
- "
- >
- {{ items.description.length + '/30' }}
- </p>
- </a-form-model-item>
- <a-form-model-item
- ref="creativeName"
- :label="'创意名称'"
- :prop="'materialList.' + indexList + '.photoArr.' + indexMater + '.creativeName'"
- :rules="{
- required: true,
- message: '创意名称必填',
- trigger: 'blur',
- }"
- ><a-input
- v-model="items.creativeName"
- placeholder="请输入创意名称"
- style="margin-right: 8px"
- />
- </a-form-model-item>
- </div>
- </div>
- </a-tab-pane>
- <!-- <a-button
- slot="tabBarExtraContent"
- type="primary"
- :disabled="
- materialInfo.groupCreativity == 1
- ? item.photoArr.length >= materialInfo.creativityNumber
- : item.photoArr.length >= 15
- "
- @click="addMaterialOne(indexList)"
- >
- 添加素材
- </a-button> -->
- </a-tabs>
- </a-collapse-panel>
- <!-- <a-collapse-panel key="2" header="创意组2" :disabled="false">
- <p>{{ materialVisible }}</p>
- </a-collapse-panel>
- <a-collapse-panel key="3" header="创意组3">
- <p>{{ materialVisible }}</p>
- </a-collapse-panel> -->
- </a-collapse>
- </a-col>
- </a-row>
- </a-form-model>
- </a-modal>
- <!-- 创意素材选择结束 -->
- <!-- 选择素材相关 -->
- <a-modal
- :maskClosable="false"
- title="选择素材"
- v-model="checkMatemalVisible"
- @ok="handleOkShow"
- @cancel="cancelAll"
- :width="1000"
- >
- <a-tabs type="card" @change="callback" v-model="activeTwo" class="check-video">
- <div slot="tabBarExtraContent">
- 当前选择数量 {{ sumContent }}/{{ Math.floor(200 / this.materialInfo.coverNumber) }}
- <a-button type="primary" @click="tongbu()" :loading="tongbuLoading" style="margin-left: 10px">
- 刷新素材</a-button
- >
- </div>
- <a-tab-pane :tab="item.label" v-for="item of tab" :key="item.value">
- <a-row :gutter="24">
- <a-col :span="12">
- <a-form-item
- label="日期选择"
- :labelCol="{
- lg: {
- span: 6,
- },
- sm: {
- span: 6,
- },
- xs: {
- span: 6,
- },
- md: {
- span: 6,
- },
- }"
- :wrapperCol="{
- lg: {
- span: 18,
- },
- sm: {
- span: 18,
- },
- xs: {
- span: 14,
- },
- md: {
- span: 14,
- },
- }"
- >
- <a-range-picker name="buildTime" v-model="time" />
- </a-form-item>
- </a-col>
- <a-col :span="12">
- <a-button style="position: relative; top: 4px" @click="selectAllVideo"> 全选 </a-button>
- </a-col>
- </a-row>
- <ul v-if="dataSource.length > 0" style="overflow: auto; padding-left: 0; height: 400px">
- <!-- :value="item.photoId" -->
- <a-checkbox-group v-model="checkVideo" style="width: 100%" @change="setVideoData">
- <li v-for="(item, index) of dataSource" :key="index" class="chouzhen" style="height: 400px">
- <a-checkbox
- :value="item.photoId"
- style="width: 100%; position: absolute; z-index: 100; right: 0; top: 0"
- >
- <img :src="item.coverUrl" alt="" style="width: 90%; margin-bottom: 30px" />
- <div style="width: 100%; text-align: center">
- {{ item.statDate ? '时间:' + item.statDate.split(' ')[0] : '消耗:' + item.charge }}
- </div>
- </a-checkbox>
- </li>
- </a-checkbox-group>
- </ul>
- <div v-else style="width: 100%; height: 400px; display: flex; justify-content: center; align-items: center">
- <img src="@/assets/nodata.png" alt="" v-if="!loadingVideoList" />
- <img v-else src="@/views/modules/material/loading.gif" style="width: 50%" />
- </div>
- </a-tab-pane>
- </a-tabs>
- <div style="text-align: right">
- <a-pagination
- size="small"
- :showTotal="ipagination.showTotal"
- style="float: right"
- v-if="dataSource.length > 0"
- showQuickJumper
- :pageSize.sync="ipagination.pageSize"
- :total="ipagination.total"
- v-model="ipagination.current"
- @change="getDataSource"
- />
- </div>
- </a-modal>
- <!-- 选择素材相关结束 -->
- <!-- 推荐广告语开始 -->
- <a-modal
- title="推荐标题"
- v-model="titleVisible"
- :width="1000"
- @ok="okTitle"
- @cancel="
- dataOne = []
- value = ''
- title = []
- titleVisible = false
- checkTitle = []
- "
- >
- <a-row :gutter="10">
- <a-col :sm="10" style="margin-bottom: 20px; z-index: 10">
- <a-card class="search-box" style="min-height: 500px">
- <div style="margin-bottom: 30px">
- <span style="display: inline-block; width: 80px">行业</span>
- <a-cascader
- style="margin-top: 1rem; width: 300px"
- v-model="dataOne"
- :options="options"
- :showSearch="{ filter }"
- expandTrigger="hover"
- @change="onChangeTitle"
- placeholder="请选择行业"
- >
- <a-icon type="smile" slot="suffixIcon" class="test" />
- </a-cascader>
- </div>
- <div style="margin-bottom: 30px">
- <span style="display: inline-block; width: 80px">关键词</span>
- <a-input placeholder="请输入关键词" v-model="value" style="width: 300px" />
- </div>
- <span style="display: inline-block; width: 80px; float: left"></span>
- <a-button type="primary" @click="searchQuery" :disabled="value == ''">生成</a-button>
- </a-card>
- </a-col>
- <a-col :sm="14" style="margin-bottom: 20px; z-index: 10">
- <a-card class="search-box" style="over-flow: auto">
- <a-checkbox-group v-model="checkTitle" style="width: 100%">
- <a-list size="large" bordered :dataSource="title">
- <a-list-item slot="renderItem" slot-scope="item">
- <a-checkbox :value="item"> {{ item }} </a-checkbox>
- <!-- <a slot="actions" @click="okTitle(item)">选择</a> -->
- </a-list-item>
- </a-list>
- </a-checkbox-group>
- </a-card>
- </a-col>
- </a-row>
- </a-modal>
- <!-- 推荐广告语结束 -->
- <!-- 预览应用/链接 -->
- <a-modal
- :title="getData('campaignType', 'form') == 5 ? '填写链接' : '预览应用'"
- v-model="appIdVisible"
- :width="1000"
- @ok="appIdOk"
- @cancel="appIdVisible = false"
- >
- <a-row :gutter="10" class="hide-checkbox">
- <a-col :sm="24" style="margin-bottom: 20px; z-index: 10">
- <a-card class="search-box" style="min-height: 500px">
- <div style="margin-bottom: 30px">
- <span style="display: inline-block; width: 140px">应用分配方式</span>
- <a-radio-group v-model="appList.appAllocation">
- <a-radio-button :value="1">按账户分配</a-radio-button>
- <a-radio-button :value="2">按广告计划分配</a-radio-button>
- <a-radio-button :value="3">按广告组分配</a-radio-button>
- </a-radio-group>
- </div>
- <div style="margin-bottom: 30px">
- <span style="display: inline-block; width: 140px">选择应用</span>
- 广告账户:1 广告计划:{{ campaignCount }} 广告组数量:{{
- checkDirectionalList.length * materialInfo.materialList.length
- }}
- <a-card style="min-height: 300px; margin-top: 15px" v-if="appIdVisible">
- <a-transfer
- :data-source="appListArr"
- :target-keys="targetKeys"
- :disabled="disabled"
- :show-search="true"
- :filter-option="(inputValue, item) => item.appVersion.indexOf(inputValue) !== -1"
- :show-select-all="true"
- @change="onChangeTransFer"
- >
- <template
- slot="children"
- slot-scope="{
- props: { direction, filteredItems, selectedKeys, disabled: listDisabled },
- on: { itemSelectAll, itemSelect },
- }"
- >
- <a-table
- :row-selection="
- getRowSelection({ disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect })
- "
- :columns="direction === 'left' ? leftColumns : rightColumns"
- :data-source="filteredItems"
- size="small"
- :style="{ pointerEvents: listDisabled ? 'none' : null }"
- :custom-row="
- ({ key, disabled: itemDisabled }) => ({
- on: {
- click: () => {
- if (itemDisabled || listDisabled) return
- itemSelect(key, !selectedKeys.includes(key))
- },
- },
- })
- "
- >
- <!-- platform -->
- <div slot="platform" slot-scope="text, records" @click.stop>
- {{ text | platform }}
- </div>
- <div slot="action" slot-scope="text, records" @click.stop>
- <!-- {{ records.siteId }} -->
- <a-select v-model="records.siteId" style="width: 100%" @focus="getSiteList(records)" allowClear>
- <a-select-option
- v-for="appModel in records.siteList"
- :key="appModel.siteId"
- :value="appModel.siteId"
- >
- {{ appModel.name }}
- </a-select-option>
- </a-select>
- </div>
- </a-table>
- </template>
- </a-transfer>
- </a-card>
- </div>
- <div style="margin-bottom: 30px">
- <span style="display: inline-block; width: 140px">链接分配方式</span>
- <a-radio-group v-model="appList.linkAllocation" @change="setCount">
- <a-radio-button :value="1">按账户分配</a-radio-button>
- <a-radio-button :value="2">按广告计划分配</a-radio-button>
- <a-radio-button :value="3">按广告组分配</a-radio-button>
- </a-radio-group>
- </div>
- <!-- linkAllocation: 1,
- clickUrlList: [],
- clickUrlActionList: [], -->
- <div style="margin-bottom: 30px">
- <span style="display: inline-block; width: 140px">第三方监测链接</span>
- <a-input
- v-model="item.value"
- placeholder="请输入第三方检测链接"
- style="width: 60%; margin-bottom: 10px"
- v-for="(item, index) in appList.clickUrlList"
- :style="{ marginLeft: index != 0 ? '140px' : '0px' }"
- :key="index"
- >
- </a-input>
- </div>
- <div style="margin-bottom: 30px" v-if="actionbarClickUrlSwitch">
- <span style="display: inline-block; width: 140px">第三方点击监测链接</span>
- <a-input
- v-model="item.value"
- placeholder="请输入第三方点击检测链接"
- style="width: 60%; margin-bottom: 10px"
- v-for="(item, index) in appList.clickUrlActionList"
- :style="{ marginLeft: index != 0 ? '140px' : '0px' }"
- :key="index"
- >
- </a-input>
- </div>
- </a-card>
- </a-col>
- </a-row>
- </a-modal>
- <templateModal ref="templateModal" @getData="getTemplate" />
- <!-- 预览应用/链接结束 -->
- <a-modal
- :title="getData('campaignType', 'form') == 5 ? '填写链接' : '预览应用'"
- v-model="urlVisible"
- :width="1000"
- @ok="urlOk"
- @cancel="urlVisible = false"
- >
- <a-row :gutter="10" class="hide-checkbox">
- <a-col :sm="24" style="margin-bottom: 20px; z-index: 10">
- <a-card class="search-box" style="min-height: 500px">
- <div style="margin-bottom: 30px">
- <span style="display: inline-block; width: 140px">应用分配方式</span>
- <a-radio-group v-model="appList.appAllocation" @change="setCountUrl">
- <a-radio-button :value="1">按账户分配</a-radio-button>
- <a-radio-button :value="2">按广告计划分配</a-radio-button>
- <a-radio-button :value="3">按广告组分配</a-radio-button>
- </a-radio-group>
- </div>
- <div style="margin-bottom: 30px">
- <span style="display: inline-block; width: 140px">填写链接</span>
- 广告账户:1 广告计划:{{ campaignCount }} 广告组数量:{{
- checkDirectionalList.length * materialInfo.materialList.length
- }}
- <a-input
- v-model="item.value"
- placeholder="请输入链接"
- style="width: 60%; margin-bottom: 10px; margin-top: 10px"
- v-for="(item, index) in appList.urlArr"
- :key="index"
- :style="{ marginLeft: '140px' }"
- >
- </a-input>
- </div>
- <div style="margin-bottom: 30px">
- <span style="display: inline-block; width: 140px">监测链接分配方式</span>
- <a-radio-group v-model="appList.linkAllocation" @change="setCount">
- <a-radio-button :value="1">按账户分配</a-radio-button>
- <a-radio-button :value="2">按广告计划分配</a-radio-button>
- <a-radio-button :value="3">按广告组分配</a-radio-button>
- </a-radio-group>
- </div>
- <!-- linkAllocation: 1,
- clickUrlList: [],
- clickUrlActionList: [], -->
- <div style="margin-bottom: 30px">
- <span style="display: inline-block; width: 140px">第三方监测链接</span>
- <a-input
- v-model="item.value"
- placeholder="请输入第三方检测链接"
- style="width: 60%; margin-bottom: 10px"
- v-for="(item, index) in appList.clickUrlList"
- :style="{ marginLeft: index != 0 ? '140px' : '0px' }"
- :key="index"
- >
- </a-input>
- </div>
- <div style="margin-bottom: 30px" v-if="actionbarClickUrlSwitch">
- <span style="display: inline-block; width: 140px">第三方点击监测链接</span>
- <a-input
- v-model="item.value"
- placeholder="请输入第三方点击检测链接"
- style="width: 60%; margin-bottom: 10px"
- v-for="(item, index) in appList.clickUrlActionList"
- :style="{ marginLeft: index != 0 ? '140px' : '0px' }"
- :key="index"
- >
- </a-input>
- </div>
- </a-card>
- </a-col>
- </a-row>
- </a-modal>
- <a-modal title="查看视频" v-model="visibleVideo" :width="400" :footer="null">
- <video class="video" :src="videoUrlShow" controls="controls" style="width: 100%">
- 您的浏览器不支持 video 标签。
- </video>
- </a-modal>
- </div>
- </template>
- <script>
- // import UserMenu from '../tools/UserMenu'
- // import SMenu from '../menu/'
- import Logo from '@/components/tools/Logo.vue'
- import pick from 'lodash.pick'
- import { mixin } from '@/utils/mixin.js'
- import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
- import moment from 'moment'
- import selectCheckAll from '@/components/formComponents/toutiaoTime'
- import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
- import uploadFile from '@/components/uploadFileMd5Push.vue'
- import BMF from 'browser-md5-file'
- import templateModal from '@/views/modules/kuaishouapp/crossAccount/templateModal'
- import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
- import lookPreviewVue from './lookPreview.vue'
- function tqFun(qcArr1) {
- var tempArr = []
- function bbFun(qcArr) {
- for (var i = 0; i < qcArr.length; i++) {
- if (qcArr[i] instanceof Array) {
- bbFun(qcArr[i])
- } else {
- tempArr.push(qcArr[i])
- }
- }
- return tempArr
- }
- return bbFun(qcArr1)
- }
- const mockData = []
- const originTargetKeys = mockData.filter((item) => +item.key % 3 > 1).map((item) => item.key)
- const leftTableColumns = [
- {
- dataIndex: 'appVersion',
- title: '应用标记',
- },
- {
- dataIndex: 'appId',
- title: '应用Id',
- },
- {
- dataIndex: 'platform',
- title: '应用类型',
- scopedSlots: { customRender: 'platform' },
- },
- ]
- const rightTableColumns = [
- {
- dataIndex: 'appName',
- title: '应用名称',
- },
- {
- dataIndex: 'action',
- title: '选择应用下载详情',
- scopedSlots: { customRender: 'action' },
- },
- ]
- export default {
- name: 'GlobalHeader',
- components: {
- // UserMenu,
- // SMenu,
- Logo,
- Treeselect,
- selectCheckAll,
- checkBoxGroup,
- uploadFile,
- templateModal,
- },
- mixins: [mixin],
- props: {
- mode: {
- type: String,
- // sidemenu, topmenu
- default: 'sidemenu',
- },
- theme: {
- type: String,
- required: false,
- default: 'dark',
- },
- collapsed: {
- type: Boolean,
- required: false,
- default: false,
- },
- device: {
- type: String,
- required: false,
- default: 'desktop',
- },
- },
- data() {
- return {
- spinning: true,
- removeActive: null,
- visibleVideo: false,
- videoUrlShow: '',
- disabled: false,
- showSearch: false,
- targetKeys: [],
- leftColumns: leftTableColumns,
- rightColumns: rightTableColumns,
- active: 0,
- previewVisible: false,
- targetIds: [],
- accountId: '',
- directionalVisible: false, //定向包选择模态框
- templateList: [], //定向包模板列表
- templateListAll: [],
- selectedRowKeys: [],
- selectionRows: [],
- checkDirectionalList: [], //选择的定向包
- populationList: [],
- videoVisibleChange: '',
- templateData: {},
- loading: false,
- region: [],
- columns: [
- {
- title: '定向包名称',
- dataIndex: 'templateName',
- width: '33%',
- align: 'center',
- scopedSlots: { customRender: 'templateName' },
- },
- {
- title: '关联广告组',
- dataIndex: 'unitCount',
- width: '33%',
- align: 'center',
- scopedSlots: { customRender: 'unitCount' },
- },
- {
- title: '操作',
- dataIndex: 'action',
- align: 'center',
- scopedSlots: { customRender: 'action' },
- },
- ],
- ruleConfigVisible: false, //规则配置的模态框
- ruleConfigForm: this.$form.createForm(this),
- visible: false, //广告组信息配置右侧抽屉
- screenWidth: document.body.clientWidth,
- form: this.$form.createForm(this),
- formUnit: this.$form.createForm(this),
- headerBarFixed: false,
- //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
- topMenuStyle: {
- headerIndexLeft: {},
- topNavHeader: {},
- headerIndexRight: {},
- topSmenuStyle: {},
- },
- activeStep: 0,
- campaignData: {},
- //组相关
- unitInfo: {
- useAppMarket: false,
- appStore: [],
- dayBudget: null,
- speed: '1',
- timeRange: [moment().startOf('day'), moment().add(1, 'months')],
- scheduleTime: '',
- showMode: '2',
- sceneId: [1],
- bidType: 10,
- ocpxActionType: 2,
- deepConversionType: null,
- templateBidType: 1,
- cpaBid: null,
- bid: null,
- deepConversionBid: null,
- bidMax: null,
- bidMin: null,
- unitName: '',
- // 'huawei', 'oppo', 'vivo', 'xiaomi', 'meizu', 'smartisan'
- },
- allianceAccount: '1',
- dayBudgetType: '1',
- unitTime: '1',
- scheduleTime: '1',
- rules: {
- dayBudget: [{ required: true, trigger: 'change', validator: this.handleConfirmValue }],
- unitName: [{ required: true, message: '广告组名称必填', trigger: 'change' }],
- cpaBid: [{ required: true, trigger: 'change', validator: this.cpaBidValue }],
- bid: [{ required: true, trigger: 'change', validator: this.bidValue }],
- bidMax: [{ required: true, trigger: 'change', validator: this.maxValue }],
- bidMin: [{ required: true, trigger: 'change', validator: this.minValue }],
- },
- groupTypeData: null, //加白
- keep: false,
- campaignKeep: false,
- //组相关结束
- //创意相关
- creativeVisible: false,
- creativeInfo: {
- unitType: 4,
- // targetActionType: 1,
- overlayType: [],
- creativeCategory: [],
- creativeTag: [],
- stickerTitle: '',
- actionBarText: '',
- keep: false,
- },
- creativeTag: [],
- creativeRules: {
- actionBarText: [{ required: true, message: '行动号召按钮必选', trigger: 'change' }],
- creativeTag: [{ required: true, message: '创意标签最多十个', trigger: 'change', validator: this.creativeMany }],
- stickerTitle: [{ required: true, trigger: 'change', validator: this.stickerCheck }],
- },
- stickerStyles: [], //贴纸信息
- actionBarTextList: [],
- createOptions: [], //创意分类
- fieldNames: {
- label: 'category_name',
- value: 'category_id',
- children: 'child',
- },
- //创意相关结束
- //素材相关
- materialVisible: false,
- videoMaterialShow: false,
- materialInfo: {
- isMakeCover: 2, //是否自动生成封面 1不开启,2开启
- coverNumber: 1, //设置封面数量
- matchingMethod: 2, //广告语匹配方式 1自定义,2按创意,3按创意组
- groupCreativity: 2, //是否设置组中创意数量 1是,2否
- creativityNumber: 1,
- materialList: [
- // {
- // name: '创意组1',
- // photoArr: [{ photoId: '', image: {}, creativeName: '', description: '' }],
- // },
- ],
- },
- materialRules: {
- coverNumber: [{ required: true, message: '封面数量必填', trigger: 'blur' }],
- creativityNumber: [{ required: true, message: '创意数量必填', trigger: 'blur' }],
- },
- checkMatemalVisible: false, //素材模态框展示
- dataSource: [], //素材列表
- checkVideo: [],
- checkVideoAll: [],
- checkVideoWai: [],
- tongbuLoading: false,
- loadingVideoList: false,
- videoList: [],
- ipagination: {
- current: 1,
- pageSize: 50,
- // pageSizeOptions: ['10', '20', '30'],
- showTotal: (total, range) => {
- return range[0] + '-' + range[1] + ' 共' + total + '条'
- },
- showQuickJumper: true,
- // showSizeChanger: true,
- total: 0,
- onChange: (current) => {
- // 切换分页时的回调,
- // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
- this.ipagination.current = current
- },
- },
- time: [],
- channelType: 0,
- activeTwo: 0,
- tab: [
- // {
- // value: 2,
- // label: '全部',
- // },
- {
- value: 0,
- label: '内部',
- },
- {
- value: 1,
- label: '外部',
- },
- ],
- //自定义
- materialList: [],
- //按创意和按创意组匹配
- descriptionList: [],
- titleVisible: false,
- options: [],
- value: '',
- dataOne: [],
- title: [],
- checkTitle: [],
- //素材相关结束
- //配置应用/链接
- appList: {
- checkType: 'app',
- appAllocation: 1, //1按账户,2按广告计划,3按广告组
- appArr: [], //{ appId: '', siteId: 123123 }
- urlArr: [{ value: '' }],
- linkAllocation: 1,
- clickUrlList: [{ value: '' }],
- clickUrlActionList: [{ value: '' }],
- },
- // appAllocation: 1, //1按账户,2按广告计划,3按广告组
- // appIds: [],
- // linkAllocation: 1,
- // clickUrlList: [],
- appIdVisible: false,
- urlVisible: false,
- appListArr: [],
- //配置应用/链接结束
- stepsArr: [
- { title: '创建规则' },
- { title: '广告组基本信息' },
- { title: '定向包' },
- { title: '创意基本信息' },
- { title: '创意素材' },
- // { title: '转化跟踪' },
- // { title: '预览提交' },
- ],
- formItemLayout: {
- labelCol: { span: 5 },
- wrapperCol: { span: 19 },
- },
- tailFormItemLayout: {
- wrapperCol: {
- sm: {
- span: 16,
- offset: 5,
- },
- },
- },
- campaignTemplateId: null,
- groupTemplateId: null,
- createTiveTemplateId: null,
- creativeCategorySwitch: false,
- actionbarClickUrlSwitch: false,
- campaignList: [],
- campaignId: '',
- sumContent: 0,
- templateLoading: false,
- templateName: '',
- groupCount: 0,
- showCount: false,
- sumbitLoading: false,
- }
- },
- computed: {
- allPhotoIdArr() {
- var data = []
- for (let i = 0; i < this.materialInfo.materialList.length; i++) {
- for (let j = 0; j < this.materialInfo.materialList[i].photoArr.length; j++) {
- data.push(this.materialInfo.materialList[i].photoArr[j].photoId.photoId)
- }
- }
- data = [...new Set(data)]
- return data
- },
- showTip() {
- if (this.groupTemplateId == null && !this.campaignData.campaignName) {
- return true
- } else {
- return false
- }
- },
- materialCount() {
- var count = 0
- for (let i = 0; i < this.materialInfo.materialList.length; i++) {
- if (this.materialInfo.materialList.length > 0) {
- for (let j = 0; j < this.materialInfo.materialList[i].photoArr.length; j++) {
- count++
- }
- }
- }
- return count
- },
- campaignCount() {
- return this.campaignData.groupRule
- ? this.campaignData.groupRule == 1
- ? this.checkDirectionalList.length
- : this.campaignData.groupRule == 2
- ? this.materialInfo.materialList.length
- : 0
- : this.checkDirectionalList.length
- },
- },
- watch: {
- campaignId(n, o) {
- this.showCount = false
- if (n != null && n != '') {
- this.getCount()
- }
- },
- visibleVideo(n, o) {
- if (!n) {
- closeAllVideoFun()
- }
- },
- accountId: function (n, o) {
- if (this.$route.query.batchId) {
- } else {
- if (n != '') {
- this.spinning = true
- this.getCampaignTemplate(n)
- this.getGroupTemplate(n)
- this.getCreativeTemplate(n)
- this.getCampaignList(n)
- this.clearAllData()
- this.getAction('/kuaishou/batch/getCreativeCategory', {
- accountId: n,
- }).then((res) => {
- if (res.success) {
- this.createOptions = res.result
- }
- })
- this.getAction('/kuaishou/batch/getIsActivate', {
- accountId: n,
- }).then((res) => {
- if (res.success) {
- this.groupTypeData = res.result
- }
- })
- this.getAction('/kuaishou/batch/getCreativeWordStyles', {
- accountId: n,
- }).then((res) => {
- this.stickerStyles = []
- if (res.success) {
- if (res.result) {
- // this.stickerStyles = res.result.map((item) => {
- // return {
- // id: item.sticker_style_id,
- // url: item.sticker_styles[0],
- // }
- // })
- var data = res.result.map((item) => {
- return item.sticker_styles
- })
- data.map((item) => {
- item.map((i) => {
- this.stickerStyles.push({
- id: i.overlay_type,
- url: i.overlay_preview_url,
- })
- })
- })
- } else {
- this.stickerStyles = []
- }
- } else {
- this.stickerStyles = []
- }
- })
- this.getAction('/kuaishou/batch/getWhiteList', {
- accountId: n,
- }).then((res) => {
- if (res.success) {
- // console.log(res)
- if (res.result) {
- this.creativeCategorySwitch = res.result.creative_category_switch == 1 ? true : false
- this.actionbarClickUrlSwitch = res.result.actionbar_click_url_switch == 1 ? true : false
- // if (res.result.alliance_account == 1) {
- // this.allianceAccount = true
- // } else {
- // this.allianceAccount = false
- // }
- } else {
- this.creativeCategorySwitch = false
- this.actionbarClickUrlSwitch = false
- }
- }
- })
- this.spinning = false
- } else {
- this.spinning = false
- }
- }
- },
- checkMatemalVisible(n, o) {
- if (n) {
- var params = {}
- params.accountId = this.accountId
- params.materialType = 1
- params.pageSize = this.ipagination.pageSize
- params.pageNo = 1
- params.status = 0
- params.channelType = this.channelType
- params.orderBy = 'time'
- this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
- }
- },
- time(n, o) {
- if (n.length > 0) {
- var params = {}
- params.accountId = this.accountId
- params.materialType = 1
- params.pageSize = this.ipagination.pageSize
- params.pageNo = 1
- params.status = 0
- params.channelType = this.channelType
- params.startDate = moment(n[0]).format('YYYY-MM-DD') + ' 00:00:00'
- params.endDate = moment(n[1]).format('YYYY-MM-DD') + ' 23:59:59'
- params.orderBy = 'time'
- this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
- } else {
- var params = {}
- params.accountId = this.accountId
- params.materialType = '1'
- params.pageSize = this.ipagination.pageSize
- params.pageNo = 1
- params.status = 0
- params.channelType = this.channelType
- params.orderBy = 'time'
- this.ipagination.current = 1
- this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
- }
- },
- },
- mounted() {
- if (this.$route.query.accountId && this.$route.query.batchId != undefined) {
- this.spinning = false
- this.getAction('/kuaishou/batch/getCreativeCategory', {
- accountId: this.$route.query.accountId,
- }).then((res) => {
- if (res.success) {
- this.createOptions = res.result
- }
- })
- this.getAction('/kuaishou/batch/getIsActivate', {
- accountId: this.$route.query.accountId,
- }).then((res) => {
- if (res.success) {
- this.groupTypeData = res.result
- }
- })
- this.getAction('/kuaishou/batch/getCreativeWordStyles', {
- accountId: this.$route.query.accountId,
- }).then((res) => {
- this.stickerStyles = []
- if (res.success) {
- if (res.result) {
- // this.stickerStyles = res.result.map((item) => {
- // return {
- // id: item.sticker_style_id,
- // url: item.sticker_styles[0],
- // }
- // })
- var data = res.result.map((item) => {
- return item.sticker_styles
- })
- data.map((item) => {
- item.map((i) => {
- this.stickerStyles.push({
- id: i.overlay_type,
- url: i.overlay_preview_url,
- })
- })
- })
- } else {
- this.stickerStyles = []
- }
- } else {
- this.stickerStyles = []
- }
- })
- this.getAction('/kuaishou/batch/getWhiteList', {
- accountId: this.$route.query.accountId,
- }).then((res) => {
- if (res.success) {
- // console.log(res)
- if (res.result) {
- this.creativeCategorySwitch = res.result.creative_category_switch == 1 ? true : false
- this.actionbarClickUrlSwitch = res.result.actionbar_click_url_switch == 1 ? true : false
- // if (res.result.alliance_account == 1) {
- // this.allianceAccount = true
- // } else {
- // this.allianceAccount = false
- // }
- } else {
- this.creativeCategorySwitch = false
- this.actionbarClickUrlSwitch = false
- }
- }
- })
- var str = ''
- for (let i = 0; i < 7 * 24; i++) {
- str += '0'
- }
- this.accountId = this.$route.query.accountId
- var dataJson = JSON.parse(localStorage.getItem('lookPreview'))
- this.getTemplateList()
- let params = {}
- params.accountId = this.accountId
- this.getAction('/kuaishou/batch/getAppList', params).then((res) => {
- if (res.success) {
- var dataOne = res.result.filter((item, index) => {
- return this.getData('systemType', 'form') == 'Android'
- ? item.platform == 1 || item.platform == 2
- : item.platform == 3 || item.platform == 4
- })
- this.appListArr = dataOne.map((item, index) => {
- return {
- ...item,
- key: item.appId + '',
- title: item.appName,
- siteId: null,
- siteList: [],
- }
- })
- }
- })
- this.$nextTick(() => {
- if (!dataJson.campaignJson.campaignId) {
- this.form.setFieldsValue({ systemType: dataJson.campaignJson.systemType })
- this.form.setFieldsValue({ campaignType: dataJson.campaignJson.campaignType })
- } else {
- this.form.setFieldsValue({ systemType: dataJson.campaignJson.systemType })
- this.form.setFieldsValue({ campaignType: dataJson.campaignJson.campaignType })
- this.form.setFieldsValue({ newClick: '2' })
- this.campaignId = dataJson.campaignJson.campaignId
- }
- this.getCampaignList(this.$route.query.accountId)
- this.campaignTemplateId = 'edit'
- this.campaignData = { ...dataJson.campaignJson }
- this.groupTemplateId = 'edit'
- this.unitInfo.useAppMarket = dataJson.unitJson.useAppMarket == 1 ? true : false
- this.unitInfo.appStore = dataJson.unitJson.appStore ? JSON.parse(dataJson.unitJson.appStore) : []
- this.dayBudgetType = dataJson.unitJson.dayBudget && dataJson.unitJson.dayBudget > 0 ? '2' : '1'
- this.unitInfo.dayBudget =
- dataJson.unitJson.dayBudget && dataJson.unitJson.dayBudget > 0 ? dataJson.unitJson.dayBudget / 1000 : null
- this.unitInfo.speed = dataJson.unitJson.speed + ''
- this.unitTime = dataJson.unitJson.endTime && dataJson.unitJson.endTime != '' ? '2' : '1'
- this.unitInfo.timeRange =
- dataJson.unitJson.endTime && dataJson.unitJson.endTime != ''
- ? [moment().startOf('day'), moment().add(1, 'months')]
- : [moment().startOf('day'), moment().add(1, 'months')]
- this.scheduleTime = dataJson.unitJson.scheduleTime == null || dataJson.unitJson.scheduleTime == str ? '1' : '2'
- this.unitInfo.scheduleTime =
- dataJson.unitJson.scheduleTime == null || dataJson.unitJson.scheduleTime == str
- ? str
- : dataJson.unitJson.scheduleTime
- this.unitInfo.showMode = dataJson.unitJson.showMode + ''
- this.unitInfo.sceneId =
- JSON.parse(dataJson.unitJson.sceneId)[0] == 5 ? [1] : JSON.parse(dataJson.unitJson.sceneId)
- this.allianceAccount = JSON.parse(dataJson.unitJson.sceneId)[0] == 5 ? '2' : '1'
- this.unitInfo.bidType = dataJson.unitJson.bidType
- this.unitInfo.ocpxActionType = dataJson.unitJson.ocpxActionType ? dataJson.unitJson.ocpxActionType : 2
- this.unitInfo.deepConversionType = dataJson.unitJson.deepConversionType
- this.unitInfo.templateBidType = dataJson.unitJson.templateBidType
- this.unitInfo.cpaBid =
- dataJson.unitJson.cpaBid && dataJson.unitJson.cpaBid > 0 ? dataJson.unitJson.cpaBid / 1000 : null
- this.unitInfo.bid = dataJson.unitJson.bid && dataJson.unitJson.bid > 0 ? dataJson.unitJson.bid / 1000 : null
- this.unitInfo.deepConversionBid =
- dataJson.unitJson.deepConversionBid && dataJson.unitJson.deepConversionBid > 0
- ? dataJson.unitJson.deepConversionBid / 1000
- : null
- this.unitInfo.bidMax =
- dataJson.unitJson.bidMax && dataJson.unitJson.bidMax > 0 ? dataJson.unitJson.bidMax / 1000 : null
- this.unitInfo.bidMin =
- dataJson.unitJson.bidMin && dataJson.unitJson.bidMin > 0 ? dataJson.unitJson.bidMin / 1000 : null
- this.unitInfo.unitName = dataJson.unitJson.unitName
- this.createTiveTemplateId = 'edit'
- this.creativeInfo.overlayType = dataJson.creativeJson.overlayType ? [dataJson.creativeJson.overlayType] : []
- this.creativeInfo.creativeCategory =
- dataJson.creativeJson.creativeCategory > 10000
- ? [
- parseInt(dataJson.creativeJson.creativeCategory / 10000),
- parseInt(dataJson.creativeJson.creativeCategory / 100),
- dataJson.creativeJson.creativeCategory,
- ]
- : dataJson.creativeJson.creativeCategory > 100
- ? [parseInt(dataJson.creativeJson.creativeCategory / 100), dataJson.creativeJson.creativeCategory]
- : []
- this.creativeInfo.creativeTag = dataJson.creativeJson.creativeTag
- ? JSON.parse(dataJson.creativeJson.creativeTag)
- : []
- this.creativeInfo.actionBarText = dataJson.creativeJson.actionBarText
- this.creativeInfo.stickerTitle = dataJson.creativeJson.stickerTitle
- if (this.campaignData.timeStart != '') {
- this.campaignData.timeStart = moment(this.campaignData.timeStart)
- }
- if (this.campaignData.dayBudget > 0) {
- this.campaignData.budgetType = '2'
- this.campaignData.dayBudget = this.campaignData.dayBudget / 1000
- } else {
- this.campaignData.budgetType = '1'
- this.campaignData.dayBudget = null
- }
- var that = this
- this.checkDirectionalList = JSON.parse(dataJson.checkDirectionalList)
- this.selectedRowKeys = JSON.parse(dataJson.checkDirectionalList).map((item) => {
- return item.templateId
- })
- this.materialList = dataJson.materialArray.materialInfo.materialList
- this.materialInfo = { ...dataJson.materialArray.materialInfo }
- this.descriptionList = dataJson.materialArray.descriptionList.map((item) => {
- return { value: item }
- })
- this.videoMaterialShow = true
- this.targetKeys =
- dataJson.appList.appArr && dataJson.appList.appArr.length > 0
- ? dataJson.appList.appArr.map((item) => {
- return item.appId
- })
- : []
- this.appList = {
- checkType: dataJson.appList.checkType,
- appAllocation: dataJson.appList.appAllocation,
- appArr: dataJson.appList.appArr,
- urlArr: dataJson.appList.urlArr
- ? dataJson.appList.urlArr.map((item) => {
- return { value: item }
- })
- : [{ value: '' }],
- linkAllocation: dataJson.appList.linkAllocation,
- clickUrlList: dataJson.appList.clickUrlList
- ? dataJson.appList.clickUrlList.map((item) => {
- return { value: item }
- })
- : [{ value: '' }],
- clickUrlActionList: dataJson.appList.clickUrlList
- ? dataJson.appList.clickUrlList.map((item) => {
- return { value: item }
- })
- : [{ value: '' }],
- }
- this.appIdVisible = true
- this.appIdVisible = false
- this.urlVisible = true
- this.urlVisible = false
- })
- } else if (this.$route.query.accountId) {
- this.accountId = this.$route.query.accountId
- } else {
- this.spinning = false
- }
- this.$nextTick(function () {
- // this.accountId = 23212
- window.addEventListener('scroll', this.onScroll)
- const that = this
- window.onresize = () => {
- return (() => {
- window.screenWidth = document.body.clientWidth
- that.screenWidth = window.screenWidth
- })()
- }
- })
- },
- methods: {
- setDeepConversionType(typeChange) {
- // groupTypeData.deepConversionTypes
- var data = this.groupTypeData.deepConversionTypes.filter((item) => {
- return item.deepConversionType == typeChange
- })
- return data[0].desc
- },
- checkVideoFun() {
- this.ipagination.current = 1
- this.checkMatemalVisible = true
- this.checkVideo = this.allPhotoIdArr
- this.sumContent = this.checkVideo.length
- this.checkVideoAll = this.allPhotoIdArr.length > 0 ? this.checkVideoAll : []
- this.checkVideoWai = this.allPhotoIdArr.length > 0 ? this.checkVideoWai : []
- },
- getCount() {
- this.getAction('/kuaishou/kuaiShouGroup/queryToDayBuiltCount', { accountId: this.accountId }).then((res) => {
- if (res.success) {
- this.groupCount = res.result
- this.showCount = true
- } else {
- this.showCount = false
- }
- })
- },
- //编辑模板
- lookTemplate(accountId, templateId) {
- this.$refs.templateModal.handleOk(this.accountId, templateId, 'look')
- },
- //新增定向模板
- addTemplate(accountId) {
- this.$refs.templateModal.create(this.accountId, 'add')
- },
- onSearch() {
- this.templateList = this.templateListAll.filter((item) => {
- return item.templateName.toLowerCase().indexOf(this.templateName.toLowerCase()) > -1
- })
- },
- getTemplate() {
- this.templateLoading = true
- this.getAction('/batch/kuaishouTemplate/getTemplateByAccountId', {
- accountId: this.accountId,
- }).then((res) => {
- if (res.success) {
- this.getTemplateList()
- this.templateLoading = false
- }
- })
- },
- addMaterialOne(indexList) {
- this.checkMatemalVisible = true
- },
- overUploadVideo(urlAll) {
- // console.log(urlAll)
- },
- overUploadImage(urlAll) {
- var that = this
- // console.log(urlAll)
- },
- deleteImage() {},
- fileWater(file) {
- var bmf = new BMF()
- var that = this
- return new Promise(function (resolve, reject) {
- bmf.md5(file, (err, md5) => {
- resolve({ md5: md5, accountId: that.accountId })
- })
- })
- },
- okAppId() {},
- setCountUrl(e) {
- this.appList.urlArr = []
- if (e.target.value == 1) {
- this.appList.urlArr = [{ value: '' }]
- } else if (e.target.value == 2) {
- for (let i = 0; i < this.campaignCount; i++) {
- this.appList.urlArr.push({ value: '' })
- }
- } else if (e.target.value == 3) {
- var count = this.checkDirectionalList.length * this.materialInfo.materialList.length
- for (let i = 0; i < count; i++) {
- this.appList.urlArr.push({ value: '' })
- }
- }
- },
- setCount(e) {
- this.appList.clickUrlList = []
- this.appList.clickUrlActionList = []
- if (e.target.value == 1) {
- this.appList.clickUrlList = [{ value: '' }]
- this.appList.clickUrlActionList = [{ value: '' }]
- } else if (e.target.value == 2) {
- for (let i = 0; i < this.campaignCount; i++) {
- this.appList.clickUrlList.push({ value: '' })
- this.appList.clickUrlActionList.push({ value: '' })
- }
- } else if (e.target.value == 3) {
- var count = this.checkDirectionalList.length * this.materialInfo.materialList.length
- for (let i = 0; i < count; i++) {
- this.appList.clickUrlList.push({ value: '' })
- this.appList.clickUrlActionList.push({ value: '' })
- }
- }
- },
- getAllData() {
- var data = []
- this.appListArr.filter((co, i) => {
- let temp = this.targetKeys.indexOf(co.key)
- if (temp >= 0) {
- data.push(co)
- }
- })
- return data
- },
- urlOk() {
- var count = this.appList.urlArr.filter((item) => {
- return item.value != ''
- })
- if (this.appList.appAllocation == 1) {
- if (count.length != 1) {
- this.$message.error('按账户分配必须填写1个链接')
- return
- }
- } else if (this.appList.appAllocation == 2) {
- if (count.length != this.campaignCount) {
- this.$message.error('按广告计划分配必须填写' + this.campaignCount + '个链接')
- return
- }
- } else if (this.appList.appAllocation == 3) {
- if (count.length != this.checkDirectionalList.length * this.materialInfo.materialList.length) {
- this.$message.error(
- '按广告组分配必须填写' + this.checkDirectionalList.length * this.materialInfo.materialList.length + '个链接'
- )
- return
- }
- }
- var dataArr = []
- for (let i = 0; i < this.appList.clickUrlList.length; i++) {
- if (
- /(http|https):\/\/([\w.]+\/?)\S*/.test(this.appList.clickUrlList[i].value) &&
- this.appList.clickUrlList[i].value.length < 10000
- ) {
- } else {
- dataArr.push(false)
- }
- }
- for (let i = 0; i < this.appList.urlArr.length; i++) {
- if (
- /(http|https):\/\/([\w.]+\/?)\S*/.test(this.appList.urlArr[i].value) &&
- this.appList.urlArr[i].value.length < 10000
- ) {
- } else {
- dataArr.push(false)
- }
- }
- if (dataArr.length > 0) {
- this.$message.error('请检查链接是否填写正确')
- return
- }
- this.urlVisible = false
- },
- handleConfirmValue(rule, value, callback) {
- if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value.length < 10000) {
- callback()
- } else {
- callback('链接不能为空且开头为http://或https://,并且长度小于10000')
- }
- },
- appIdOk() {
- if (this.appList.appAllocation == 1) {
- if (this.targetKeys.length != 1) {
- this.$message.error('按账户分配只可以选择一个应用')
- return
- }
- } else if (this.appList.appAllocation == 2) {
- if (this.targetKeys.length != this.campaignCount) {
- this.$message.error('按广告计划分配必须选择' + this.campaignCount + '个应用')
- return
- }
- } else if (this.appList.appAllocation == 3) {
- if (this.targetKeys.length != this.checkDirectionalList.length * this.materialInfo.materialList.length) {
- this.$message.error(
- '按广告组分配必须选择' + this.checkDirectionalList.length * this.materialInfo.materialList.length + '个应用'
- )
- return
- }
- }
- var dataArr = []
- for (let i = 0; i < this.appList.clickUrlList.length; i++) {
- if (
- /(http|https):\/\/([\w.]+\/?)\S*/.test(this.appList.clickUrlList[i].value) &&
- this.appList.clickUrlList[i].value.length < 10000
- ) {
- } else {
- dataArr.push(false)
- }
- }
- if (dataArr.length > 0) {
- this.$message.error('请检查链接是否填写正确')
- return
- }
- this.appIdVisible = false
- },
- onChangeTransFer(nextTargetKeys, direction, moveKeys) {
- this.targetKeys = nextTargetKeys
- },
- getSiteList(item) {
- this.getAction('/kuaishou/batch/getPageList', {
- accountId: this.accountId,
- appId: item.appId,
- viewComp: 7,
- }).then((res) => {
- if (res.success) {
- // console.log(item)
- item.siteList = res.result
- } else {
- this.showSite = false
- }
- })
- },
- getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
- return {
- getCheckboxProps: (item) => ({ props: { disabled: disabled || item.disabled } }),
- onSelectAll(selected, selectedRows) {
- itemSelectAll(selected)
- },
- onSelect({ key }, selected) {
- itemSelect(key, selected)
- },
- selectedRowKeys: selectedKeys,
- }
- },
- checkAppIds() {
- if (this.campaignCount == 0 || this.checkDirectionalList.length * this.materialInfo.materialList.length == 0) {
- this.$message.error('请先完成以上操作,再进行此步骤')
- return
- } else {
- if (this.getData('campaignType', 'form') == 2) {
- this.appIdVisible = true
- let params = {}
- params.accountId = this.accountId
- this.getAction('/kuaishou/batch/getAppList', params).then((res) => {
- if (res.success) {
- var dataOne = res.result.filter((item, index) => {
- return this.getData('systemType', 'form') == 'Android'
- ? item.platform == 1 || item.platform == 2
- : item.platform == 3 || item.platform == 4
- })
- this.appListArr = dataOne.map((item, index) => {
- return {
- ...item,
- key: item.appId + '',
- title: item.appName,
- siteId: null,
- siteList: [],
- }
- })
- }
- })
- } else {
- this.urlVisible = true
- }
- }
- },
- moment,
- setItemDate(sum, item) {
- let i = sum
- if (item == 1) {
- if (i < 24) {
- return '周一' + i + ':00~' + (i + 1) + ':00'
- } else if (i < 48 && i >= 24) {
- return '周二' + (i - 24) + ':00~' + (i - 23) + ':00'
- } else if (i < 72 && i >= 48) {
- return '周三' + (i - 48) + ':00~' + (i - 47) + ':00'
- } else if (i < 96 && i >= 72) {
- return '周四' + (i - 72) + ':00~' + (i - 71) + ':00'
- } else if (i < 120 && i >= 96) {
- return '周五' + (i - 96) + ':00~' + (i - 95) + ':00'
- } else if (i < 144 && i >= 120) {
- return '周六' + (i - 120) + ':00~' + (i - 119) + ':00'
- } else {
- return '周日' + (i - 144) + ':00~' + (i - 143) + ':00'
- }
- }
- },
- editDescription(item) {
- // console.log(item)
- item.edit = !item.edit
- },
- removeDescription(index) {
- this.descriptionList.splice(index, 1)
- },
- okTitle() {
- // console.log(this.checkTitle)
- var count = this.materialInfo.matchingMethod == 2 ? this.materialCount : this.materialInfo.materialList.length
- if (this.descriptionList.length + this.checkTitle.length > count) {
- this.$message.error('选择广告语超过可选的上限,请去掉一部分后确定')
- return
- }
- if (this.checkTitle.length > 0) {
- for (let i = 0; i < this.checkTitle.length; i++) {
- this.descriptionList.push({ value: this.checkTitle[i], edit: false })
- }
- } else {
- this.$message.error('请选择广告语')
- return
- }
- this.titleVisible = false
- this.dataOne = []
- this.value = ''
- this.title = []
- this.checkTitle = []
- },
- onChangeTitle(value, selectedOptions) {
- this.dataOne = value
- this.value = ''
- this.title = []
- },
- searchQuery() {
- this.getAction('/ctop/creativeTitle/titleSearch', {
- firstCategory: this.dataOne[0],
- secondCategory: this.dataOne[1],
- keywords: this.value,
- }).then((res) => {
- // console.log(res)
- this.title = res.result ? res.result : []
- })
- },
- addDescription() {
- this.titleVisible = true
- this.getHangye()
- },
- addOne() {
- this.descriptionList.push({ value: '', edit: true })
- },
- getHangye() {
- this.getAction('/ctop/creativeTitle/getTitleLabel', '').then((res) => {
- if (res.success) {
- this.options = res.result.map((item) => {
- return {
- label: item.label,
- value: item.value,
- children:
- item.children.length > 0
- ? [
- {
- label: '不限',
- value: 0,
- },
- ].concat(item.children)
- : [
- {
- label: '不限',
- value: 0,
- },
- ],
- }
- })
- this.options = [
- {
- label: '不限',
- value: 0,
- },
- ].concat(this.options)
- if (this.dataOne.length > 0) {
- return
- } else {
- this.dataOne = [0]
- }
- }
- })
- },
- remove(targetKey, action) {
- var keyArr = targetKey.split('@')
- var photoId = this.materialInfo.materialList[keyArr[1]].photoArr[keyArr[0]].photoId.photoId
- this.materialInfo.materialList[keyArr[1]].photoArr.splice(keyArr[0], 1)
- var lastIndex
- this.materialInfo.materialList[keyArr[1]].photoArr.forEach((pane, i) => {
- console.log(i, keyArr[0])
- if (i == +keyArr[0]) {
- lastIndex = i - 1
- }
- })
- if (this.materialInfo.materialList[keyArr[1]].photoArr.length > 0) {
- if (lastIndex >= 0) {
- this.materialInfo.materialList[keyArr[1]].active = lastIndex + '@' + keyArr[1]
- } else {
- this.materialInfo.materialList[keyArr[1]].active = '0@' + keyArr[1]
- }
- } else {
- this.materialInfo.materialList.splice(keyArr[1], 1)
- if (this.materialInfo.materialList.length == 0) {
- } else {
- this.materialInfo.materialList[keyArr[1]].active = '0@0'
- }
- }
- if (this.allPhotoIdArr.indexOf(photoId) > -1) {
- } else {
- for (let i = 0; i < this.checkVideoAll.length; i++) {
- if (this.checkVideoAll[i].length > 0) {
- for (let j = 0; j < this.checkVideoAll[i].length; j++) {
- if (this.checkVideoAll[i][j] == photoId) {
- this.checkVideoAll[i].splice(j, 1)
- }
- }
- }
- }
- for (let i = 0; i < this.checkVideoWai.length; i++) {
- if (this.checkVideoWai[i].length > 0) {
- for (let j = 0; j < this.checkVideoWai[i].length; j++) {
- if (this.checkVideoWai[i][j] == photoId) {
- this.checkVideoWai[i].splice(j, 1)
- }
- }
- }
- }
- }
- },
- handleOkVideo() {
- this.$refs.materialForm.validate((valid) => {
- if (valid) {
- this.materialVisible = false
- this.videoMaterialShow = true
- this.checkMatchingMethod()
- } else {
- this.$message.error('广告语匹配方式为自定义时,有未填写的广告语,请检查')
- return
- }
- })
- },
- checkMatchingMethod() {
- if (this.materialInfo.matchingMethod == 2) {
- if (this.descriptionList.length > this.materialCount) {
- this.$message.error('当前广告语匹配方式最多能填' + this.materialCount + '个广告语')
- return
- }
- } else {
- if (this.descriptionList.length > this.materialInfo.materialList.length) {
- this.$message.error('当前广告语匹配方式最多能填' + this.materialInfo.materialList.length + '个广告语')
- return
- }
- }
- },
- cancelVideo() {
- // this.materialInfo.isMakeCover = 2
- // this.materialInfo.coverNumber = 1
- // this.materialInfo.matchingMethod = 1
- // this.materialInfo.groupCreativity = 2
- // this.materialInfo.creativityNumber = 1
- // this.materialInfo.materialList = []
- this.materialVisible = false
- // this.materialInfo.materialList = []
- },
- removeVideoMaterial(index, indexMaterial) {
- var photoId = this.materialInfo.materialList[index].photoArr[indexMaterial].photoId.photoId
- this.materialInfo.materialList[index].photoArr.splice(indexMaterial, 1)
- if (this.allPhotoIdArr.indexOf(photoId) > -1) {
- } else {
- for (let i = 0; i < this.checkVideoAll.length; i++) {
- if (this.checkVideoAll[i].length > 0) {
- for (let j = 0; j < this.checkVideoAll[i].length; j++) {
- if (this.checkVideoAll[i][j] == photoId) {
- this.checkVideoAll[i].splice(j, 1)
- }
- }
- }
- }
- for (let i = 0; i < this.checkVideoWai.length; i++) {
- if (this.checkVideoWai[i].length > 0) {
- for (let j = 0; j < this.checkVideoWai[i].length; j++) {
- if (this.checkVideoWai[i][j] == photoId) {
- this.checkVideoWai[i].splice(j, 1)
- }
- }
- }
- }
- }
- // this.materialList[index].photoArr.splice(indexMaterial, 1)
- },
- cancel() {},
- //选择素材相关
- handleOkShow() {
- if (this.sumContent > Math.floor(200 / this.materialInfo.coverNumber)) {
- this.$message.error('根据设置封面数量计算,已选择视频超过创意上限,请勾除!!!')
- return
- }
- var dataAll = tqFun(this.checkVideoAll).concat(tqFun(this.checkVideoWai))
- this.checkVideo = dataAll
- var arrPhotoId = []
- var count = this.materialInfo.groupCreativity == 2 ? 15 : this.materialInfo.creativityNumber
- for (let i = 0; i < this.materialInfo.coverNumber; i++) {
- var data = this.checkVideo
- arrPhotoId = arrPhotoId.concat(data)
- }
- arrPhotoId.sort()
- var arr = []
- for (let i = 0; i < arrPhotoId.length; i++) {
- arr.push({
- photoId: arrPhotoId[i],
- image: {},
- creativeName: '创意组' + `${Math.ceil((i + 1) / count)}` + '-创意',
- description: '',
- })
- }
- // +
- // `${i > count ? (i % count == 0 ? count : i % count) : i + 1}`,
- var spArray = function (n, arr) {
- var newArr = [],
- i
- for (i = 0; i < arr.length; ) {
- newArr.push(arr.slice(i, (i += n)))
- }
- return newArr
- }
- var arrAll = spArray(count, arr)
- var dataCount = Math.ceil((this.materialInfo.coverNumber * this.checkVideo.length) / count)
- this.materialInfo.materialList = []
- this.materialList = []
- for (let i = 0; i < dataCount; i++) {
- var dataArr = arrAll[i]
- this.materialInfo.materialList.push({
- name: '创意组' + (i + 1),
- photoArr: dataArr,
- active: 0 + '@' + i,
- })
- this.materialList.push({
- name: '创意组' + (i + 1),
- photoArr: dataArr,
- active: 0 + '@' + i,
- })
- }
- for (let i = 0; i < this.materialInfo.materialList.length; i++) {
- for (let j = 0; j < this.materialInfo.materialList[i].photoArr.length; j++) {
- this.setVideUrl(this.materialInfo.materialList[i].photoArr[j].photoId).then((res) => {
- this.materialInfo.materialList[i].photoArr[j].photoId = res
- this.materialList[i].photoArr[j].photoId = res
- })
- if (this.materialInfo.isMakeCover == 2) {
- this.getImageCover(this.materialInfo.materialList[i].photoArr[j].photoId).then((res) => {
- setTimeout(() => {
- if (res.length > 0) {
- this.materialInfo.materialList[i].photoArr[j].image =
- res[i % 2 == 0 ? j % this.materialInfo.coverNumber : 7 - (j % this.materialInfo.coverNumber)]
- this.materialList[i].photoArr[j].image =
- res[i % 2 == 0 ? j % this.materialInfo.coverNumber : 7 - (j % this.materialInfo.coverNumber)]
- }
- this.checkMatemalVisible = false
- }, 100)
- })
- } else {
- this.checkMatemalVisible = false
- }
- }
- }
- },
- setVideUrl(photoId) {
- this.videoList = []
- return new Promise((resolve, reject) => {
- this.getAction('/batch/kuaiShouGroupTemplate/getUrlByPhotoId', { photoId: photoId }).then((res) => {
- if (res.success) {
- resolve({ ...res.result, photoId: photoId })
- }
- })
- })
- // this.getAction('/batch/kuaiShouGroupTemplate/getUrlByPhotoId', { photoId: photoId }).then((res) => {
- // if (res.success) {
- // this.videoList.push({ url: res.result.url, photoId: photoId, coverUrl: res.result.coverUrl })
- // return res.result.url
- // } else {
- // }
- // })
- },
- getImageCover(photoId) {
- var params = {
- photoId: photoId,
- pageSize: 20,
- pageNo: 1,
- }
- return new Promise((resolve, reject) => {
- this.getAction('/cutFrame/material/queryByPhotoId', params).then((res) => {
- if (res.success) {
- resolve(res.result)
- }
- })
- })
- },
- cancelAll() {},
- callback(key) {
- this.channelType = key
- this.checkVideo = []
- // this.allPhotoIdArr
- this.ipagination.current = 1
- this.time = []
- if (key == 0 && this.checkVideoAll.length > 0) {
- this.checkVideo = this.checkVideoAll[this.ipagination.current - 1]
- } else if (key == 1 && this.checkVideoWai.length > 0) {
- this.checkVideo = this.checkVideoWai[this.ipagination.current - 1]
- }
- },
- selectAllVideo() {
- this.checkVideo = this.dataSource.map((item) => {
- return item.photoId
- })
- // console.log(this.checkVideo)
- if (this.activeTwo == 0) {
- for (let i = 0; i < this.ipagination.current; i++) {
- this.checkVideoAll.push([])
- }
- this.checkVideoAll[this.ipagination.current - 1] = this.checkVideo
- } else if (this.activeTwo == 1) {
- for (let i = 0; i < this.ipagination.current; i++) {
- this.checkVideoWai.push([])
- }
- this.checkVideoWai[this.ipagination.current - 1] = this.checkVideo
- }
- var sum = 0
- for (let i = 0; i < this.checkVideoAll.length; i++) {
- sum += this.checkVideoAll[i].length
- }
- for (let i = 0; i < this.checkVideoWai.length; i++) {
- sum += this.checkVideoWai[i].length
- }
- this.sumContent = sum
- var dataCount = Math.floor(200 / this.materialInfo.coverNumber)
- if (sum > dataCount) {
- this.$message.error('最多选择' + dataCount + '个素材')
- this.checkVideo = []
- this.sumContent = this.sumContent - this.dataSource.length
- if (this.activeTwo == 0) {
- this.checkVideoAll[this.ipagination.current - 1] = this.checkVideo
- } else if (this.activeTwo == 1) {
- this.checkVideoWai[this.ipagination.current - 1] = this.checkVideo
- }
- }
- },
- setVideoData(data) {
- if (this.activeTwo == 0) {
- for (let i = 0; i < this.ipagination.current; i++) {
- this.checkVideoAll.push([])
- }
- this.checkVideoAll[this.ipagination.current - 1] = data
- } else if (this.activeTwo == 1) {
- for (let i = 0; i < this.ipagination.current; i++) {
- this.checkVideoWai.push([])
- }
- this.checkVideoWai[this.ipagination.current - 1] = data
- }
- var sum = 0
- for (let i = 0; i < this.checkVideoAll.length; i++) {
- sum += this.checkVideoAll[i].length
- }
- for (let i = 0; i < this.checkVideoWai.length; i++) {
- sum += this.checkVideoWai[i].length
- }
- this.sumContent = sum
- var dataCount = Math.floor(200 / this.materialInfo.coverNumber)
- if (sum > dataCount) {
- this.$message.error('最多选择' + dataCount + '个素材')
- this.checkVideo.pop()
- this.sumContent--
- if (this.activeTwo == 0) {
- this.checkVideoAll[this.ipagination.current - 1] = this.checkVideo
- } else if (this.activeTwo == 1) {
- this.checkVideoWai[this.ipagination.current - 1] = this.checkVideo
- }
- }
- },
- tongbu() {
- this.tongbuLoading = true
- this.getAction('/kuaishou/batch/syncVideo', {
- accountId: this.accountId,
- }).then((res) => {
- if (res.success) {
- this.$message.success(res.message)
- this.tongbuLoading = false
- var params = {}
- params.accountId = this.accountId
- params.materialType = 1
- params.pageSize = this.ipagination.pageSize
- params.pageNo = 1
- params.status = 0
- params.channelType = this.channelType
- params.orderBy = 'time'
- if (this.time.length > 0) {
- // params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
- // params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
- params.startDate = moment(this.time[0]).format('YYYY-MM-DD') + ' 00:00:00'
- params.endDate = moment(this.time[1]).format('YYYY-MM-DD') + ' 23:59:59'
- }
- this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
- } else {
- this.$message.error(res.message)
- this.tongbuLoading = false
- }
- })
- },
- getDataSource(page, pageSize) {
- if (this.activeTwo == 0) {
- this.checkVideo = this.checkVideoAll[page - 1]
- } else if (this.activeTwo == 1) {
- this.checkVideo = this.checkVideoWai[page - 1]
- }
- this.ipagination.current = page
- var params = {}
- params.accountId = this.accountId
- params.materialType = '1'
- params.pageSize = this.ipagination.pageSize
- params.pageNo = page
- params.channelType = this.channelType
- params.status = 0
- params.orderBy = 'time'
- if (this.time.length > 0) {
- // params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
- // params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
- params.startDate = moment(this.time[0]).format('YYYY-MM-DD') + ' 00:00:00'
- params.endDate = moment(this.time[1]).format('YYYY-MM-DD') + ' 23:59:59'
- }
- this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
- },
- showVideoList(url, params) {
- this.dataSource = []
- this.loadingVideoList = true
- this.getAction(url, params).then((res) => {
- // console.log(res)
- this.loadingVideoList = false
- if (res.success) {
- this.dataSource = res.result.list
- this.ipagination.total = res.result.total
- }
- })
- },
- removeTarget(templateId) {
- var index = this.checkDirectionalList.findIndex((item) => item.templateId == templateId)
- var indexTwo = this.selectionRows.findIndex((item) => item.templateId == templateId)
- var indexThree = this.selectionRows.findIndex((item) => item.templateId == templateId)
- this.checkDirectionalList.splice(index, 1)
- // this.selectionRows.splice(indexTwo, 1)
- this.selectedRowKeys.splice(indexThree, 1)
- },
- directionalOk() {
- if (this.selectionRows.length > 20) {
- this.$message.error('最多选择20个定向包')
- return
- } else if (this.selectionRows.length == 0) {
- this.$message.error('请选择定向包')
- return
- }
- this.checkDirectionalList = this.selectionRows
- this.directionalVisible = false
- // this.selectedRowKeys = []
- // this.selectionRows = []
- },
- directionalCancel() {
- this.directionalVisible = false
- if (this.checkDirectionalList.length > 0) {
- } else {
- this.selectedRowKeys = []
- }
- },
- onSelectChange(selectedRowKeys, selectionRows) {
- this.selectedRowKeys = selectedRowKeys
- this.selectionRows = selectionRows
- },
- getTemplateList() {
- this.loading = true
- this.templateList = []
- var params = {}
- params.accountId = this.accountId
- if (this.getData('campaignType', 'form') == 2) {
- params.platformOs = this.getData('systemType', 'form') == 'Android' ? 1 : 2
- }
- this.getAction('/batch/kuaishouTemplate/list', params).then((res) => {
- this.loading = false
- if (res.success) {
- this.templateList = res.result
- this.templateListAll = JSON.parse(JSON.stringify(this.templateList))
- } else {
- this.templateList = []
- }
- })
- },
- changeTag(visible) {
- this.videoVisibleChange = visible
- this.templateData = {}
- var params = {}
- params.templateId = visible
- this.getAction('/batch/kuaishouTemplateTarget/getDetailByTemplateId', params).then((res) => {
- if (res.success) {
- var dataJson = {
- ...res.result.base,
- ...res.result.detail,
- }
- this.getPeople().then((item) => {
- this.templateData = dataJson
- if (dataJson.region == '' || dataJson.region == null) {
- } else {
- this.showRegion(dataJson.region)
- }
- this.previewVisible = true
- })
- }
- })
- },
- showPeopleName(id) {
- return this.populationList.filter((item) => item.orientationId == id)[0].orientationName
- },
- showRegion(data) {
- return new Promise((resolve, reject) => {
- this.postDataAction('/kuaishou/batch/getRegionDetail', {
- regionArr: data,
- }).then((res) => {
- if (res.success) {
- // this.populationData.allForm.region = res.result
- this.region = res.result.map((item) => {
- return item.label
- })
- }
- })
- })
- },
- getPeople() {
- return new Promise((resolve, reject) => {
- this.getAction('/kuaishou/batch/getPopulationList', { accountId: this.accountId }).then((res) => {
- if (res.success) {
- if (res.result) {
- this.populationList = res.result.map((item, index) => {
- return {
- ...item,
- key: index,
- }
- })
- resolve(res.result)
- }
- }
- })
- })
- },
- setData(value) {
- // console.log(value)
- this.creativeInfo.creativeTag.push(...value)
- this.creativeInfo.creativeTag = [...new Set(this.creativeInfo.creativeTag)]
- for (let i = 0; i < this.creativeInfo.creativeTag.length; i++) {
- if (this.creativeInfo.creativeTag[i].length > 10) {
- this.creativeInfo.creativeTag.splice(i, 1)
- this.$message.error('创意标签最多只能十个字符,超过的已清除')
- }
- }
- this.creativeTag = []
- },
- handleClose(removedTag) {
- const tags = this.creativeInfo.creativeTag.filter((tag) => tag !== removedTag)
- // console.log(tags)
- this.creativeInfo.creativeTag = tags
- this.$refs.createForm.validateField('creativeTag')
- },
- filterOption(input, option) {
- return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
- },
- filter(inputValue, path) {
- return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
- },
- checkAccountId() {
- if (this.accountId == undefined || this.accountId == '' || this.accountId == null) {
- this.$message.warning('请先选择广告投放账号')
- return false
- } else {
- return true
- }
- },
- //rules
- handleConfirmValue(rule, value, callback) {
- if (value == '' || value < 500 || value >= 100000000) {
- callback('不小于500, 不超过100000000,仅支持输入自然数')
- }
- callback()
- },
- creativeMany(rule, value, callback) {
- if (value.length > 10) {
- callback('标签最多十个,每个标签不超过10个字')
- }
- callback()
- },
- stickerCheck(rule, value, callback) {
- if (this.creativeInfo.overlayType.length > 0 && value == '') {
- callback('封面广告语标题必填')
- } else if (value.length > 14) {
- callback('封面广告语标题最多为14个字符')
- }
- callback()
- },
- cpaBidValue(rule, value, callback) {
- if (this.unitInfo.ocpxActionType == 53) {
- if (value == '' || value == null) {
- callback('请输入转化目标出价')
- } else if (value < 5 || value > 3000) {
- callback('转化目标为表单数,出价不能低于5元,不能高于3000元,请正确输入')
- } else {
- callback()
- }
- } else {
- if (value == '' || value == null) {
- callback('请输入转化目标出价')
- } else if (value < 1 || value > 3000) {
- callback('转化目标出价不能低于1元,不能高于3000元,请正确输入')
- } else {
- callback()
- }
- }
- },
- bidValue(rule, value, callback) {
- if (value == '' || value == null) {
- callback('请输入出价')
- } else if (value < 0.2 || value > 100) {
- callback('不得低于0.2元,不得高于100元,不得高于组预算')
- } else {
- callback()
- }
- },
- maxValue(rule, value, callback) {
- if (value == '' || value == null) {
- callback('请输入最高出价')
- } else if (this.unitInfo.bidMin && value < this.unitInfo.bidMin) {
- callback('最高出价不能小于最低出价')
- } else {
- callback()
- }
- },
- minValue(rule, value, callback) {
- if (value == '' || value == null) {
- callback('请输入最低出价')
- } else if (this.unitInfo.bidMax && value > this.unitInfo.bidMax) {
- callback('最低出价不能大于最高出价')
- } else {
- callback()
- }
- },
- changeBidMin() {
- if (this.unitInfo.bidMax != '' && this.unitInfo.bidMax != null) {
- this.$refs.ruleForm.validateField('bidMax')
- }
- },
- changeBidMax() {
- if (this.unitInfo.bidMin != '' && this.unitInfo.bidMin != null) {
- this.$refs.ruleForm.validateField('bidMin')
- }
- },
- clearAllData() {
- this.videoMaterialShow = false
- this.materialList = []
- this.checkVideoAll = []
- this.checkVideoWai = []
- this.checkVideo = []
- this.descriptionList = []
- this.materialInfo.isMakeCover = 2
- this.materialInfo.coverNumber = 1
- this.materialInfo.groupCreativity = 2
- this.materialInfo.creativityNumber = 1
- this.materialInfo.matchingMethod = 2
- this.materialInfo.materialList = []
- this.checkDirectionalList = []
- this.selectionRows = []
- this.selectedRowKeys = []
- this.appList.appAllocation = 1
- this.appList.appArr = []
- this.appList.urlArr = [{ value: '' }]
- this.appList.linkAllocation = 1
- this.appList.clickUrlList = [{ value: '' }]
- this.appList.clickUrlActionList = [{ value: '' }]
- this.targetKeys = []
- },
- getCampaignList(accountId) {
- this.getAction('/kuaishou/batch/getCampaignList', {
- accountId: accountId,
- pageSize: 2000,
- pageNo: 1,
- campaignType: this.getData('campaignType', 'form'),
- }).then((res) => {
- if (res.success) {
- this.campaignList = res.result.records
- }
- })
- },
- handleSubmit(e) {
- e.preventDefault()
- this.form.validateFields((err, values) => {
- if (!err) {
- var params = {}
- params.batchId = new Date().getTime()
- if (this.getData('newClick', 'form') == '2') {
- params.campaignJson = {
- accountId: this.accountId,
- campaignId: this.campaignId,
- systemType: this.getData('systemType', 'form'),
- campaignType: this.getData('campaignType', 'form'),
- }
- } else {
- if (this.campaignData.campaignName) {
- params.campaignJson = {
- ...this.campaignData,
- accountId: this.accountId,
- systemType: this.getData('systemType', 'form'),
- campaignType: this.getData('campaignType', 'form'),
- dayBudget: this.campaignData.dayBudget ? this.campaignData.dayBudget * 1000 : null,
- timeStart: this.campaignData.timeStart
- ? moment(this.campaignData.timeStart).format('YYYY-MM-DD hh:mm:ss')
- : null,
- }
- } else {
- this.$message.error('请填写规则的内容')
- this.sumbitLoading = false
- return
- }
- }
- if (this.unitInfo.unitName) {
- var str = ''
- for (let i = 0; i < 7 * 24; i++) {
- str += '0'
- }
- params.unitJson = {
- ...this.unitInfo,
- unitType: 4,
- accountId: this.accountId,
- sceneId: this.allianceAccount == '1' ? JSON.stringify(this.unitInfo.sceneId) : JSON.stringify([5]),
- dayBudget: this.dayBudgetType == '1' ? 0 : this.unitInfo.dayBudget * 1000,
- beginTime: moment(this.unitInfo.timeRange[0]).format('YYYY-MM-DD'),
- endTime: this.unitTime == '2' ? moment(this.unitInfo.timeRange[1]).format('YYYY-MM-DD') : null,
- scheduleTime: this.scheduleTime == '2' ? this.unitInfo.scheduleTime : str,
- useAppMarket: this.unitInfo.useAppMarket ? 1 : 0,
- appStore: this.unitInfo.useAppMarket ? JSON.stringify(this.unitInfo.appStore) : null,
- cpaBid: this.unitInfo.cpaBid ? this.unitInfo.cpaBid * 1000 : null,
- bid: this.unitInfo.bid ? this.unitInfo.bid * 1000 : null,
- bidMax: this.unitInfo.bidMax ? this.unitInfo.bidMax * 1000 : null,
- bidMin: this.unitInfo.bidMin ? this.unitInfo.bidMin * 1000 : null,
- deepConversionBid: this.unitInfo.deepConversionBid ? this.unitInfo.deepConversionBid * 1000 : null,
- }
- } else {
- this.$message.error('请填写组内容')
- this.sumbitLoading = false
- return
- }
- if (this.checkDirectionalList.length > 0) {
- params.targetIds = JSON.stringify(
- this.checkDirectionalList.map((item) => {
- return item.templateId
- })
- )
- params.checkDirectionalList = JSON.stringify(this.checkDirectionalList)
- } else {
- this.$message.error('请选择定向包')
- this.sumbitLoading = false
- return
- }
- params.creativeJson = {
- ...this.creativeInfo,
- accountId: this.accountId,
- overlayType: this.creativeInfo.overlayType.length > 0 ? this.creativeInfo.overlayType[0] : null,
- creativeCategory: this.creativeCategorySwitch
- ? this.creativeInfo.creativeCategory[this.creativeInfo.creativeCategory.length - 1]
- : null,
- creativeTag: this.creativeCategorySwitch ? JSON.stringify(this.creativeInfo.creativeTag) : [],
- actionBarText: this.creativeInfo.actionBarText,
- stickerTitle: this.creativeInfo.overlayType.length > 0 ? this.creativeInfo.stickerTitle : null,
- }
- if (this.materialList.length > 0) {
- if (this.materialInfo.matchingMethod != 1 && this.descriptionList.length == 0) {
- this.$message.error('请填写广告语')
- this.sumbitLoading = false
- return
- }
- this.checkMatchingMethod()
- params.materialArray = {
- materialInfo: { ...this.materialInfo },
- materialList: this.materialList.map((item) => {
- return {
- ...item,
- photoArr: item.photoArr.map((t) => {
- return { ...t, photoId: t.photoId.photoId }
- }),
- }
- }),
- descriptionList:
- this.materialInfo.matchingMethod != 1
- ? this.descriptionList.map((item) => {
- return item.value
- })
- : null,
- }
- } else {
- this.$message.error('请选择素材')
- this.sumbitLoading = false
- return
- }
- var dataArr = this.getAllData()
- if (this.getData('campaignType', 'form') == 2) {
- if (dataArr.length > 0) {
- params.appList = {
- checkType: this.getData('campaignType', 'form') == 2 ? 'app' : 'url',
- appAllocation: this.appList.appAllocation, //1按账户,2按广告计划,3按广告组
- appArr: dataArr.map((item) => {
- return { appId: item.key, siteId: item.siteId ? +item.siteId : null }
- }),
- urlArr: null,
- linkAllocation: this.appList.linkAllocation,
- clickUrlList: this.appList.clickUrlList.map((item) => {
- return item.value
- }),
- clickUrlActionList: this.actionbarClickUrlSwitch
- ? this.appList.clickUrlActionList.map((item) => {
- return item.value
- })
- : [],
- }
- } else {
- this.$message.error('请选择应用')
- this.sumbitLoading = false
- return
- }
- } else {
- params.appList = {
- checkType: this.getData('campaignType', 'form') == 2 ? 'app' : 'url',
- appAllocation: this.appList.appAllocation, //1按账户,2按广告计划,3按广告组
- appArr: null,
- urlArr:
- this.getData('campaignType', 'form') == 2
- ? null
- : this.appList.urlArr.map((item) => {
- return item.value
- }),
- linkAllocation: this.appList.linkAllocation,
- clickUrlList: this.appList.clickUrlList.map((item) => {
- return item.value
- }),
- clickUrlActionList: this.actionbarClickUrlSwitch
- ? this.appList.clickUrlActionList.map((item) => {
- return item.value
- })
- : [],
- }
- }
- this.sumbitLoading = true
- this.postDataAction('/kuaishouBatch/campaignPreview/addPreviewData', params).then((res) => {
- if (res.success) {
- this.sumbitLoading = false
- // window.close()
- localStorage.setItem('lookPreview', JSON.stringify(params))
- window.open('/user/lookPreview?accountId=' + this.accountId + '&batchId=' + params.batchId, '_self')
- }
- })
- }
- })
- },
- systemChange(e) {
- if (
- this.checkDirectionalList.length > 0 ||
- this.materialCount > 0 ||
- this.appList.urlArr[0].value != '' ||
- this.targetKeys.length > 0
- ) {
- setTimeout(() => {
- //
- if (e.target.value == 'iOS') {
- this.form.setFieldsValue({ systemType: 'Android' })
- } else {
- this.form.setFieldsValue({ systemType: 'iOS' })
- }
- })
- var that = this
- this.$confirm({
- title: '警告',
- content: '切换推广平台会清空定向包、素材、以及选择的应用及链接,是否继续?',
- okText: '确认',
- cancelText: '取消',
- onOk: function () {
- setTimeout(() => {
- if (e.target.value == 'iOS') {
- that.form.setFieldsValue({ systemType: 'iOS' })
- } else {
- that.form.setFieldsValue({ systemType: 'Android' })
- }
- })
- that.clearAllData()
- },
- })
- }
- // if()
- },
- typeChange(e) {
- this.campaignList = []
- if (
- this.checkDirectionalList.length > 0 ||
- this.materialCount > 0 ||
- this.appList.urlArr[0].value != '' ||
- this.targetKeys.length > 0
- ) {
- setTimeout(() => {
- //
- if (e.target.value == 2) {
- this.form.setFieldsValue({ campaignType: 5 })
- } else {
- this.form.setFieldsValue({ campaignType: 2 })
- }
- })
- var that = this
- this.$confirm({
- title: '警告',
- content: '切换营销策略会清空定向包、素材、以及选择的应用及链接,是否继续?',
- okText: '确认',
- cancelText: '取消',
- onOk: function () {
- setTimeout(() => {
- if (e.target.value == 2) {
- that.form.setFieldsValue({ campaignType: 2 })
- } else {
- that.form.setFieldsValue({ campaignType: 5 })
- }
- that.getCampaignList(that.accountId)
- that.campaignId = ''
- })
- that.clearAllData()
- },
- })
- } else {
- setTimeout(() => {
- this.form.setFieldsValue({ campaignType: e.target.value })
- this.getCampaignList(this.accountId)
- this.campaignId = ''
- })
- }
- // if()
- },
- onChange(link) {
- // console.log('Anchor:OnChange', link)
- },
- showDrawer() {
- if (this.checkAccountId()) {
- this.visible = true
- this.getAction('/kuaishou/batch/getIsActivate', {
- accountId: this.accountId,
- }).then((res) => {
- if (res.success) {
- this.groupTypeData = res.result
- }
- })
- if (this.groupTemplateId) {
- } else {
- this.$nextTick(() => {
- // this.closeUnit('ruleForm')
- this.$refs.ruleForm.resetFields()
- this.allianceAccount = '1'
- this.dayBudgetType = '1'
- this.unitTime = '1'
- this.scheduleTime = '1'
- this.unitInfo.sceneId = [1]
- this.unitInfo.useAppMarket = false
- this.unitInfo.appStore = []
- this.unitInfo.dayBudget = null
- this.unitInfo.speed = '1'
- this.unitInfo.timeRange = [moment().startOf('day'), moment().add(1, 'months')]
- this.unitInfo.scheduleTime = ''
- this.unitInfo.showMode = '2'
- this.unitInfo.bidType = 10
- this.unitInfo.ocpxActionType = 2
- this.unitInfo.deepConversionType = null
- this.unitInfo.templateBidType = 1
- this.unitInfo.cpaBid = null
- this.unitInfo.bid = null
- this.unitInfo.deepConversionBid = null
- this.unitInfo.bidMax = null
- this.unitInfo.bidMin = null
- this.unitInfo.unitName = ''
- })
- }
- }
- },
- showImgUrl(id) {
- var data = this.stickerStyles.filter((item) => item.id == id)[0]
- if (data && data.url) {
- return data.url
- }
- },
- showDrawerCreate() {
- if (this.checkAccountId()) {
- this.creativeVisible = true
- if (this.createTiveTemplateId) {
- } else {
- this.$nextTick(() => {
- this.$refs.createForm.resetFields()
- this.creativeInfo.unitType = 4
- this.creativeInfo.overlayType = []
- this.creativeInfo.creativeCategory = []
- this.creativeInfo.creativeTag = []
- this.creativeInfo.stickerTitle = ''
- this.creativeInfo.actionBarText = ''
- this.creativeInfo.keep = false
- })
- }
- this.getAction('/kuaishou/batch/getCreativeWordStyles', {
- accountId: this.accountId,
- }).then((res) => {
- this.stickerStyles = []
- if (res.success) {
- if (res.result) {
- var data = res.result.map((item) => {
- return item.sticker_styles
- })
- data.map((item) => {
- item.map((i) => {
- this.stickerStyles.push({
- id: i.overlay_type,
- url: i.overlay_preview_url,
- })
- })
- })
- } else {
- this.stickerStyles = []
- }
- } else {
- this.stickerStyles = []
- }
- })
- this.getAction('/kuaishou/batch/getActionBarTextByType', {
- type: this.getData('campaignType', 'form'),
- }).then((res) => {
- if (res.success) {
- this.actionBarTextList = res.result
- }
- })
- this.getAction('/kuaishou/batch/getCreativeCategory', {
- accountId: this.accountId,
- }).then((res) => {
- if (res.success) {
- this.createOptions = res.result
- }
- })
- }
- },
- closeUnit(form) {
- // console.log(form)
- // this.$nextTick(() => {
- // this.$refs[form].resetFields()
- // })
- if (form == 'ruleForm') {
- this.visible = false
- this.allianceAccount = '1'
- this.dayBudgetType = '1'
- this.unitTime = '1'
- this.scheduleTime = '1'
- } else if (form == 'createForm') {
- this.creativeVisible = false
- }
- },
- onClose() {
- this.$refs.ruleForm.validate((valid) => {
- if (valid) {
- // console.log(this.unitInfo)
- var str = ''
- for (let i = 0; i < 7 * 24; i++) {
- str += '0'
- }
- var params = { ...this.unitInfo }
- params.id = this.groupTemplateId ? (this.groupTemplateId == 'edit' ? null : this.groupTemplateId) : null
- params.unitType = 4
- params.accountId = this.accountId
- params.sceneId = this.allianceAccount == '1' ? JSON.stringify(this.unitInfo.sceneId) : JSON.stringify([5])
- params.dayBudget = this.dayBudgetType == '1' ? 0 : this.unitInfo.dayBudget * 1000
- params.beginTime = moment(this.unitInfo.timeRange[0]).format('YYYY-MM-DD')
- params.endTime = this.unitTime == '2' ? moment(this.unitInfo.timeRange[1]).format('YYYY-MM-DD') : null
- params.scheduleTime = this.scheduleTime == '2' ? this.unitInfo.scheduleTime : str
- params.useAppMarket = this.unitInfo.useAppMarket ? 1 : 0
- params.appStore = this.unitInfo.useAppMarket ? JSON.stringify(this.unitInfo.appStore) : null
- params.cpaBid = this.unitInfo.cpaBid ? this.unitInfo.cpaBid * 1000 : 0
- params.bid = this.unitInfo.bid ? this.unitInfo.bid * 1000 : 0
- params.bidMax = this.unitInfo.bidMax ? this.unitInfo.bidMax * 1000 : 0
- params.bidMin = this.unitInfo.bidMin ? this.unitInfo.bidMin * 1000 : 0
- params.deepConversionBid = this.unitInfo.deepConversionBid ? this.unitInfo.deepConversionBid * 1000 : 0
- // allianceAccount: '1',
- // dayBudgetType: '1',
- // unitTime: '1',
- // scheduleTime: '1',
- if (this.keep) {
- this.postDataAction('/template/kuaiShouBatchGroupTemplate/saveOrUpdate', params).then((res) => {
- this.visible = false
- if (res.success) {
- this.groupTemplateId = res.result ? res.result : 'edit'
- this.$message.success(res.message)
- this.keep = false
- } else {
- this.$message.error(res.message)
- }
- })
- } else {
- if (this.groupTemplateId) {
- } else {
- this.groupTemplateId = 'edit'
- }
- this.visible = false
- }
- } else {
- console.log('error submit!!')
- return false
- }
- })
- },
- submitCreative() {
- this.$refs.createForm.validate((valid) => {
- if (valid) {
- var params = { ...this.creativeInfo }
- params.id = this.createTiveTemplateId
- ? this.createTiveTemplateId == 'edit'
- ? null
- : this.createTiveTemplateId
- : null
- params.accountId = this.accountId
- params.overlayType = this.creativeInfo.overlayType.length > 0 ? this.creativeInfo.overlayType[0] : null
- params.creativeCategory = this.creativeCategorySwitch
- ? this.creativeInfo.creativeCategory[this.creativeInfo.creativeCategory.length - 1]
- : null
- params.creativeTag = this.creativeCategorySwitch ? JSON.stringify(this.creativeInfo.creativeTag) : []
- params.actionBarText = this.creativeInfo.actionBarText
- params.stickerTitle = this.creativeInfo.overlayType.length > 0 ? this.creativeInfo.stickerTitle : null
- // allianceAccount: '1',
- // dayBudgetType: '1',
- // unitTime: '1',
- // scheduleTime: '1',
- if (this.creativeInfo.keep) {
- this.creativeVisible = false
- this.postDataAction('/template/kuaiShouBatchCreativeTemplate/saveOrUpdate', params).then((res) => {
- if (res.success) {
- this.createTiveTemplateId = res.result ? res.result : 'edit'
- this.$message.success(res.message)
- this.creativeInfo.keep = false
- } else {
- this.$message.error(res.message)
- }
- })
- } else {
- if (this.createTiveTemplateId) {
- } else {
- this.createTiveTemplateId = 'edit'
- }
- this.creativeVisible = false
- }
- } else {
- console.log('error submit!!')
- return false
- }
- })
- },
- onChange(value, dateString) {
- console.log('Selected Time: ', value)
- console.log('Formatted Selected Time: ', dateString)
- },
- onOk(value) {
- console.log('onOk: ', value)
- },
- getCreativeTemplate(accountId) {
- this.getAction('/template/kuaiShouBatchCreativeTemplate/getCreativeTemplate', {
- accountId: accountId,
- }).then((res) => {
- if (res.success) {
- if (res.result) {
- var data = res.result
- // params.id = this.createTiveTemplateId
- // params.accountId = this.accountId
- // params.overlayType = this.creativeInfo.overlayType.length > 0 ? this.creativeInfo.overlayType[0] : null
- // params.creativeCategory = this.creativeInfo.creativeCategory[this.creativeInfo.creativeCategory.length - 1]
- // params.creativeTag = JSON.stringify(this.creativeTag)
- // params.actionBarText = this.creativeInfo.actionBarText
- // params.stickerTitle = this.creativeInfo.overlayType.length > 0 ? this.creativeInfo.stickerTitle : null
- this.createTiveTemplateId = data.id
- this.creativeInfo.overlayType = data.overlayType ? [data.overlayType] : []
- this.creativeInfo.creativeCategory =
- data.creativeCategory > 10000
- ? [
- parseInt(data.creativeCategory / 10000),
- parseInt(data.creativeCategory / 100),
- data.creativeCategory,
- ]
- : data.creativeCategory > 100
- ? [parseInt(data.creativeCategory / 100), data.creativeCategory]
- : []
- this.creativeInfo.creativeTag = data.creativeTag ? JSON.parse(data.creativeTag) : []
- this.creativeInfo.actionBarText = data.actionBarText
- this.creativeInfo.stickerTitle = data.stickerTitle
- // allianceAccount: '1',
- // dayBudgetType: '1',
- // unitTime: '1',
- // scheduleTime: '1',
- } else {
- this.createTiveTemplateId = null
- // this.closeUnit('createForm')
- }
- }
- })
- },
- getGroupTemplate(accountId) {
- this.getAction('/template/kuaiShouBatchGroupTemplate/getGroupTemplate', {
- accountId: accountId,
- }).then((res) => {
- if (res.success) {
- if (res.result) {
- var str = ''
- for (let i = 0; i < 7 * 24; i++) {
- str += '0'
- }
- var data = res.result
- this.groupTemplateId = data.id
- this.unitInfo.useAppMarket = data.useAppMarket == 1 ? true : false
- this.unitInfo.appStore = data.appStore ? JSON.parse(data.appStore) : []
- this.dayBudgetType = data.dayBudget && data.dayBudget > 0 ? '2' : '1'
- this.unitInfo.dayBudget = data.dayBudget && data.dayBudget > 0 ? data.dayBudget / 1000 : null
- this.unitInfo.speed = data.speed + ''
- this.unitTime = data.endTime && data.endTime != '' ? '2' : '1'
- this.unitInfo.timeRange =
- data.endTime && data.endTime != ''
- ? [moment().startOf('day'), moment().add(1, 'months')]
- : [moment().startOf('day'), moment().add(1, 'months')]
- this.scheduleTime = data.scheduleTime == null || data.scheduleTime == str ? '1' : '2'
- this.unitInfo.scheduleTime = data.scheduleTime == null || data.scheduleTime == str ? str : data.scheduleTime
- this.unitInfo.showMode = data.showMode + ''
- this.unitInfo.sceneId = JSON.parse(data.sceneId)[0] == 5 ? [1] : JSON.parse(data.sceneId)
- this.allianceAccount = JSON.parse(data.sceneId)[0] == 5 ? '2' : '1'
- this.unitInfo.bidType = data.bidType
- this.unitInfo.ocpxActionType = data.ocpxActionType ? data.ocpxActionType : 2
- this.unitInfo.deepConversionType = data.deepConversionType
- this.unitInfo.templateBidType = data.templateBidType
- this.unitInfo.cpaBid = data.cpaBid && data.cpaBid > 0 ? data.cpaBid / 1000 : null
- this.unitInfo.bid = data.bid && data.bid > 0 ? data.bid / 1000 : null
- this.unitInfo.deepConversionBid =
- data.deepConversionBid && data.deepConversionBid > 0 ? data.deepConversionBid / 1000 : null
- this.unitInfo.bidMax = data.bidMax && data.bidMax > 0 ? data.bidMax / 1000 : null
- this.unitInfo.bidMin = data.bidMin && data.bidMin > 0 ? data.bidMin / 1000 : null
- this.unitInfo.unitName = data.unitName
- } else {
- this.groupTemplateId = null
- this.allianceAccount = '1'
- // this.closeUnit('ruleForm')
- }
- }
- })
- },
- getCampaignTemplate(accountId) {
- this.getAction('/template/kuaiShouBatchCampaignTemplate/getCampaignTemplate', {
- accountId: accountId,
- }).then((res) => {
- if (res.success) {
- if (res.result) {
- this.campaignTemplateId = res.result.id
- this.campaignData = res.result
- if (this.campaignData.timeStart != '') {
- this.campaignData.timeStart = moment(this.campaignData.timeStart)
- }
- if (this.campaignData.dayBudget > 0) {
- this.campaignData.budgetType = '2'
- this.campaignData.dayBudget = res.result.dayBudget / 1000
- } else {
- this.campaignData.budgetType = '1'
- this.campaignData.dayBudget = null
- }
- var that = this
- // setTimeout(() => {
- // var mdl = Object.assign({}, that.campaignData)
- // that.$nextTick(() => {
- // that.form.setFieldsValue(pick(mdl, ['campaignType']))
- // })
- // })
- } else {
- this.campaignTemplateId = null
- this.campaignData = {}
- // this.form.resetFields()
- }
- }
- })
- },
- ruleConfigFormOk(e) {
- this.ruleConfigForm.validateFields((err, values) => {
- if (!err) {
- // console.log('Received values of form: ', values)
- var params = { ...values }
- params.id = this.campaignTemplateId
- ? this.campaignTemplateId == 'edit'
- ? null
- : this.campaignTemplateId
- : null
- params.accountId = this.accountId
- params.systemType = this.getData('systemType', 'form')
- params.campaignType = this.getData('campaignType', 'form')
- params.dayBudget = values.dayBudget ? values.dayBudget * 1000 : 0
- params.timeStart = values.timeStart ? moment(values.timeStart).format('YYYY-MM-DD hh:mm:ss') : ''
- this.campaignData = { ...params, dayBudget: values.dayBudget }
- if (this.campaignKeep) {
- this.postDataAction('/template/kuaiShouBatchCampaignTemplate/saveOrUpdate', params).then((res) => {
- this.campaignTemplateId = res.result ? res.result : 'edit'
- this.ruleConfigFormCancel()
- this.ruleConfigForm.resetFields()
- this.campaignKeep = false
- if (res.success) {
- this.$message.success(res.message)
- } else {
- this.$message.error(res.message)
- }
- })
- } else {
- if (this.campaignTemplateId) {
- } else {
- this.campaignTemplateId = 'edit'
- }
- }
- this.ruleConfigVisible = false
- }
- })
- },
- ruleConfigShow() {
- if (this.checkAccountId()) {
- this.ruleConfigVisible = true
- var that = this
- if (that.campaignTemplateId) {
- setTimeout(() => {
- if (that.campaignData.campaignName) {
- var mdl = Object.assign({}, that.campaignData)
- that.ruleConfigForm.setFieldsValue({ keep: [] })
- that.$nextTick(() => {
- that.ruleConfigForm.setFieldsValue(
- pick(mdl, [
- 'budgetType',
- 'campaignName',
- 'campaignStatus',
- 'groupRule',
- 'isTime',
- 'keep',
- 'unitStatus',
- ])
- )
- setTimeout(() => {
- if (that.campaignData.isTime == '1') {
- that.ruleConfigForm.setFieldsValue(pick(mdl, 'timeStart'))
- }
- if (that.campaignData.budgetType == '2') {
- that.ruleConfigForm.setFieldsValue(pick(mdl, 'dayBudget'))
- }
- }, 100)
- })
- }
- })
- } else {
- this.$nextTick(() => {
- this.ruleConfigForm.resetFields()
- this.ruleConfigForm.setFieldsValue({ keep: [] })
- this.campaignData = {}
- })
- }
- }
- },
- ruleConfigFormCancel() {
- this.ruleConfigVisible = false
- },
- getChangeAll(type, form, field) {
- var node = document.getElementById(field)
- if (this.getData('groupRule', 'ruleConfigForm') == 2 && form == 'ruleConfigForm' && type == '定向包') {
- this.$message.error('只有按定向包分组时,才可拼接定向包')
- return
- }
- var v = '{{' + type + '}}-'
- if (document.selection) {
- //IE
- node.focus()
- var sel = document.selection.createRange()
- sel.text = v
- sel.select()
- if (field == 'campaignName') {
- this[form].setFieldsValue({ campaignName: sel.text })
- } else if (field == 'unitName') {
- this.unitInfo.unitName = sel.text
- this.$refs.ruleForm.validateField('unitName')
- }
- } else if (node.selectionStart || node.selectionStart == '0') {
- //MOZILLA/GOOGLE
- var startPos = node.selectionStart
- var endPos = node.selectionEnd
- var restoreTop = node.scrollTop
- node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
- if (restoreTop > 0) {
- node.scrollTop = restoreTop
- }
- if (field == 'campaignName') {
- this[form].setFieldsValue({ campaignName: node.value })
- } else if (field == 'unitName') {
- this.unitInfo.unitName = node.value
- this.$refs.ruleForm.validateField('unitName')
- }
- node.focus()
- node.selectionStart = startPos + v.length
- node.selectionEnd = startPos + v.length
- // this.campaignName = node.value
- } else {
- //OTHER
- node.value += v
- // console.log(node.value)
- if (field == 'campaignName') {
- this[form].setFieldsValue({ campaignName: node.value })
- } else if (field == 'unitName') {
- this.unitInfo.unitName = node.value
- this.$refs.ruleForm.validateField('unitName')
- }
- node.focus()
- // this.campaignName = node.value
- }
- },
- appStoreCheck(value) {
- // console.log(value.target.checked)
- if (value.target.checked) {
- this.unitInfo.appStore = ['huawei', 'oppo', 'vivo', 'xiaomi', 'meizu', 'smartisan']
- } else {
- this.unitInfo.appStore = []
- }
- },
- LOLchange(value) {
- if (value.target.value == '2') {
- this.unitInfo.sceneId = [5]
- } else {
- this.unitInfo.sceneId = [1]
- }
- },
- bidTypeChange(value) {
- if (value.target.value == 10) {
- this.unitInfo.ocpxActionType = 2
- this.unitInfo.bid = null
- } else {
- this.unitInfo.ocpxActionType = null
- this.unitInfo.cpaBid = null
- this.unitInfo.deepConversionBid = null
- }
- },
- setTime(e) {
- if (e.target.value == '2') {
- this.unitInfo.timeRange[0] = moment().startOf('day')
- this.unitInfo.timeRange[1] = moment().add(1, 'months')
- }
- },
- setTimeAll(e) {
- // console.log(moment('2019-12-27'))
- if (e.target.value == '2') {
- this.$nextTick(() => {
- this.$refs.selectCheck.init()
- })
- } else {
- }
- },
- changeData(data) {
- if (data.length > 1 && data.findIndex((item) => item == 1) == 0) {
- data.splice(
- data.findIndex((item) => item == 1),
- 1
- )
- } else if (data.length > 1 && data.findIndex((item) => item == 1) == data.length - 1) {
- data.splice(0, data.length - 1)
- } else if (data.length == 0) {
- data.push(1)
- }
- },
- disabledDate(current) {
- // Can not select days before today and today
- return current && current < moment().subtract(1, 'days')
- },
- disabledDateOne(current) {
- // Can not select days before today and today
- return current && current < moment().subtract(0, 'days')
- },
- onScroll() {
- // var box = document.getElementById('box')
- // var t = document.documentElement.scrollTop || document.body.scrollTop
- // box.style.top = t + 'px'
- var jump = document.querySelectorAll('.step-jump')
- var distance =
- document.documentElement.scrollTop + 180 || window.pageYOffset + 180 || document.body.scrollTop + 180
- jump.forEach((item, index) => {
- if (distance >= item.offsetTop) {
- this.activeStep = index
- }
- })
- },
- // 锚点点击
- jump(index) {
- // console.log(index)
- this.activeStep = index
- // 用 class=".step-jump" 添加锚点,此时的类名要放在tr上,放在td上不对,
- // 以后做的时候要注意这点,不是表格的时候,如何放置锚点
- let jump = document.querySelectorAll('.step-jump')
- // 通过 offsetTop 获取对象到窗体顶部的距离,然后赋值给 scrollTop,就能实现锚点的功能
- let total = jump[index].offsetTop
- // console.log(total)
- // scrollTop滚动条距离页面的距离
- let distance = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
- // console.log(distance)
- // 平滑滚动,时长500ms,每10ms一跳,共50跳
- let step = total / 50
- if (total > distance) {
- smoothDown()
- } else {
- let newTotal = distance - total
- step = newTotal / 50
- smoothUp()
- }
- function smoothDown() {
- if (distance < total) {
- distance += step
- document.body.scrollTop = distance
- document.documentElement.scrollTop = distance
- window.pageYOffset = distance
- setTimeout(smoothDown, 5)
- } else {
- document.body.scrollTop = total
- document.documentElement.scrollTop = total
- window.pageYOffset = total
- }
- }
- function smoothUp() {
- if (distance > total) {
- distance -= step
- document.body.scrollTop = distance
- document.documentElement.scrollTop = distance
- window.pageYOffset = distance
- setTimeout(smoothUp, 10)
- } else {
- document.body.scrollTop = total
- document.documentElement.scrollTop = total
- window.pageYOffset = total
- }
- }
- },
- getData(className, formName) {
- return this[formName].getFieldValue(className)
- },
- },
- }
- </script>
- <style lang="scss" scoped>
- /* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/
- $height: 59px;
- .layout .header .user-wrapper .action .anticon,
- .layout .top-nav-header-index .user-wrapper .action .anticon {
- color: #999;
- }
- .layout .header .user-wrapper .action .anticon,
- .layout .top-nav-header-index .user-wrapper .action .anticon {
- color: #999;
- }
- .layout {
- .top-nav-header-index {
- .header-index-wide {
- margin-left: 10px;
- .ant-menu.ant-menu-horizontal {
- height: $height;
- line-height: $height;
- }
- }
- .trigger {
- line-height: 48px;
- font-size: 17px;
- &:hover {
- background: rgba(0, 0, 0, 0.05);
- }
- }
- }
- .header {
- z-index: 2;
- color: #999;
- height: $height;
- background-color: #1890ff;
- transition: background 300ms;
- /* dark 样式 */
- &.dark {
- color: #000000;
- box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
- background-color: white !important;
- }
- }
- .header,
- .top-nav-header-index {
- &.dark .trigger:hover {
- background: rgba(0, 0, 0, 0.05);
- }
- }
- }
- .ant-layout-header {
- height: $height;
- line-height: $height;
- }
- /* update_end author:scott date:20190220 for: 缩小首页布局顶部的高度*/
- </style>
|