1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397 |
- <style scoped lang="scss">
- /deep/.display-none-selset {
- display: none !important;
- }
- .step-jump {
- /deep/ table tr td {
- border-bottom: 0px;
- }
- }
- .bottom-to-one {
- /deep/ .ant-form-item {
- margin-bottom: 0;
- }
- }
- .target-person-add-button {
- margin-left: 15px;
- }
- .card-person {
- width: 300px;
- /deep/.ant-card-body {
- padding: 0px;
- }
- /deep/.ant-card-head {
- padding: 0px 10px;
- }
- .card-main-case {
- height: 250px;
- overflow: auto;
- padding: 0 5px;
- }
- }
- .card-person-drawer {
- width: 100%;
- height: 90%;
- overflow: hidden;
- padding: 10px 0px;
- display: flex;
- flex-wrap: wrap;
- margin-right: -10px;
- justify-content: space-between;
- .card-item {
- width: calc(33% - 10px);
- margin-bottom: 10px;
- float: left;
- }
- .card-item-else {
- width: calc(20% - 10px);
- margin-bottom: 10px;
- float: left;
- }
- }
- .showShare {
- position: relative;
- }
- .share {
- display: none;
- }
- .showShare:hover .share {
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .chouzhen {
- border-style: solid;
- border-width: 1px;
- border-color: #e4e4e4;
- width: calc(20% - 10px);
- padding: 10px;
- margin-right: 10px;
- margin-bottom: 10px;
- display: flex;
- align-items: center;
- background: #fff;
- position: relative;
- z-index: 99;
- float: left;
- }
- li.chouzhen.first:before {
- font-size: 12px;
- content: '首帧';
- position: absolute;
- top: 7px;
- left: 5px;
- width: 36px;
- height: 20px;
- color: rgb(255, 255, 255);
- line-height: 20px;
- text-align: center;
- background: rgba(0, 0, 0, 0.5);
- border-radius: 2px;
- z-index: 1000;
- }
- .display-none-selset {
- display: none !important;
- }
- .logo {
- padding-left: 24px;
- img {
- height: 32px !important;
- }
- .name {
- font-size: 14px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: #ced2d9;
- // line-height: 22px;
- margin-left: 20px;
- padding-left: 21px;
- position: relative;
- }
- .name::before {
- content: '';
- width: 1px;
- height: 18px;
- background: rgba(255, 255, 255, 0.31);
- position: absolute;
- left: 0;
- top: 50%;
- margin-top: -9px;
- }
- }
- .chartBox {
- margin-top: 80px;
- .chartBody {
- display: flex;
- justify-content: space-around;
- flex-wrap: wrap;
- }
- .search-box {
- margin-bottom: 20px;
- }
- }
- /deep/ .ant-descriptions-item-content {
- font-weight: bold;
- }
- .info-detail {
- /deep/ table tr td {
- border: 0;
- }
- /deep/ .ant-descriptions-item-label {
- color: darkgray;
- // min-width: 30px;
- white-space: nowrap;
- }
- }
- .flex-main {
- display: flex;
- margin-bottom: 10px;
- p {
- color: black;
- font-weight: 600;
- overflow: hidden; //超出的文本隐藏
- text-overflow: ellipsis; //溢出用省略号显示
- white-space: nowrap; //溢出不换行
- }
- }
- </style>
- <style lang="scss">
- .hide-checkbox .ant-table-thead .ant-table-selection {
- display: none;
- }
- .new-batch .ant-card-head-title {
- font-weight: 700;
- }
- // .new-batch textarea {
- // resize: none;
- // border: none;
- // outline: 0;
- // box-shadow: none;
- // }
- .create-info .ant-form-item {
- margin-bottom: 0 !important;
- }
- .fengmian .ant-checkbox-wrapper:first-child {
- margin-left: 8px;
- }
- @media screen and (max-width: 1200px) {
- // 这里写对应要修改的样式如:
- .new-batch .el-step__title {
- font-size: 12px;
- }
- }
- .line-height-one .ant-form-item-control {
- line-height: inherit;
- }
- .creat-all-info .ant-form-item-control {
- width: 60%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .config-new-batch {
- .display-none-selset {
- display: none !important;
- }
- .ant-btn-danger {
- background-color: #ff4d4f !important;
- }
- }
- </style>
- <template>
- <div ref="questionnaireBox" class="new-batch config-new-batch">
- <a-layout-header
- class="ant-header-fixedHeader ant-header-side-opened"
- :style="{ padding: '0' }"
- style="background: #0b2040 !important; position: fixed; top: 0; z-index: 100; width: 100%"
- >
- <div :class="['top-nav-header-index', theme]">
- <div class="header-index-wide">
- <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
- <div class="logo">
- <img src="~@/assets/logoNew1.png" alt="logo" />
- <span class="name">有腾投放管家</span>
- </div>
- </div>
- </div>
- </div>
- </a-layout-header>
- <div class="chartBox" style="padding: 0 20px">
- <a-row :gutter="20">
- <a-col :sm="3" style="margin-bottom: 20px; z-index: 10; position: fixed">
- <a-card class="search-box" style="height: 90vh">
- <el-steps direction="vertical" finish-status="wait" space="50px" :active="activeStep">
- <el-step
- v-for="(item, index) in stepsArr"
- :key="index"
- :title="item.title"
- @click.native="jump(index)"
- >
- </el-step>
- </el-steps>
- </a-card>
- </a-col>
- <a-col :sm="21" :push="3" style="margin-bottom: 20px; z-index: 10" id="container">
- <a-card class="search-box step-jump" title="选择项目">
- <a-form layout="horizontal" v-bind="formItemLayout" :form="formProject" hide-required-mark>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item
- label="项目名称"
- :labelCol="formItemLayout.labelCol"
- class="require-check"
- v-if="$route.query.id"
- >
- <a-input v-model="projectName" disabled></a-input>
- </a-form-item>
- <selectTable
- v-else
- :labelCol="formItemLayout.labelCol"
- :projectId.sync="projectId"
- ref="selectTable"
- :requireCheck="true"
- ></selectTable>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="营销目标">
- <a-radio-group
- button-style="solid"
- 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" disabled>收集销售线索</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- </a-card>
- <a-card class="search-box step-jump" title="设置基本信息">
- <a-form layout="horizontal" v-bind="formItemLayout" :form="formInformation">
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="计划命名规范">
- <a-input
- v-decorator="[
- 'campaignName',
- { rules: [{ required: true, message: '请填写计划的命名规则' }] }
- ]"
- allow-clear
- id="campaignName"
- />
- <a-tag
- color="#2db7f5"
- @click="getChangeAll('日期', 'formInformation', 'campaignName')"
- >+日期</a-tag
- >
- <a-tag
- color="#2db7f5"
- @click="getChangeAll('渠道号', 'formInformation', 'campaignName')"
- >+渠道号</a-tag
- >
- <a-tag
- color="#2db7f5"
- @click="getChangeAll('横竖版', 'formInformation', 'campaignName')"
- >+横竖版</a-tag
- >
- <a-tag
- color="#2db7f5"
- @click="getChangeAll('时分', 'formInformation', 'campaignName')"
- >+时分</a-tag
- >
- <a-tag
- color="#2db7f5"
- @click="getChangeAll('广告位置', 'formInformation', 'campaignName')"
- >+广告位置</a-tag
- >
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="计划单日预算">
- <a-radio-group v-model="budgetType" button-style="solid">
- <a-radio-button value="1">不限</a-radio-button>
- <a-radio-button value="2">统一预算</a-radio-button>
- </a-radio-group>
- <a-input-number
- v-if="budgetType === '2'"
- v-decorator="[
- 'campaignDayBudget',
- {
- rules: [
- {
- required: true,
- message: '不小于500, 不超过100000000,仅支持输入自然数'
- }
- ]
- }
- ]"
- :min="500"
- :precision="0"
- :max="100000000"
- style="width: 100%"
- placeholder="不小于500, 不超过100000000,仅支持输入自然数"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="组命名规范">
- <a-input
- v-decorator="[
- 'groupName',
- { rules: [{ required: true, message: '请填写组命名规范' }] }
- ]"
- allow-clear
- id="groupName"
- />
- <a-tag
- color="#2db7f5"
- @click="getChangeAll('日期', 'formInformation', 'groupName')"
- >+日期</a-tag
- >
- <a-tag
- color="#2db7f5"
- @click="getChangeAll('素材名称', 'formInformation', 'groupName')"
- >+素材名称</a-tag
- >
- <a-tag
- color="#2db7f5"
- @click="getChangeAll('应用包名', 'formInformation', 'groupName')"
- >+应用包名</a-tag
- >
- <a-tag
- color="#2db7f5"
- @click="getChangeAll('创意制作方式', 'formInformation', 'groupName')"
- >+创意制作方式</a-tag
- >
- <a-tag
- color="#2db7f5"
- @click="getChangeAll('广告位置', 'formInformation', 'groupName')"
- >+广告位置</a-tag
- >
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="组单日预算">
- <a-radio-group v-model="dayBudgetType" button-style="solid">
- <a-radio-button value="1">不限</a-radio-button>
- <a-radio-button value="2">统一预算</a-radio-button>
- </a-radio-group>
- <a-input-number
- v-if="dayBudgetType === '2'"
- v-decorator="[
- 'unitDayBudget',
- {
- rules: [
- {
- required: true,
- message: '不小于500, 不超过100000000,仅支持输入自然数'
- }
- ]
- }
- ]"
- style="width: 100%"
- placeholder="不小于500, 不超过100000000,仅支持输入自然数"
- :min="500"
- :precision="0"
- />
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- </a-card>
- <a-card class="search-box step-jump" title="目标应用">
- <a-button type="primary" slot="extra" @click="targetAppEdit" :disabled="!projectId"
- >编辑</a-button
- >
- <a-row :gutter="16" class="bottom-to-one">
- <a-col :span="16">
- <a-form-item label="" v-bind="tailFormItemLayout">
- <a-descriptions>
- <a-descriptions-item label="系统平台">
- {{
- appDetail && appDetail.platformOs
- ? appDetail.platformOs === 1
- ? 'Android'
- : 'IOS'
- : '-'
- }}
- </a-descriptions-item>
- <a-descriptions-item label="单/多应用">
- 单应用
- </a-descriptions-item>
- <a-descriptions-item label="应用数量">
- {{ multipleBidData.length }}
- </a-descriptions-item>
- </a-descriptions>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-for="(item, index) in multipleBidData" :key="index">
- <a-col :span="16">
- <a-form-item :label="'应用' + (index + 1)" v-bind="formItemLayout">
- <a-collapse expand-icon-position="right">
- <a-collapse-panel key="1" :header="item.appName">
- <a-descriptions>
- <a-descriptions-item label="应用标识" :span="2">
- {{ item.appVersion }}
- </a-descriptions-item>
- <a-descriptions-item label="覆盖账户">
- {{ item.count }}
- </a-descriptions-item>
- <a-descriptions-item label="投放系统" :span="3">
- {{ item.platform | platform }}
- </a-descriptions-item>
- <a-descriptions-item label="调起链接" :span="3">
- {{ appDetail.schemaUri ? appDetail.schemaUri : '无' }}
- </a-descriptions-item>
- </a-descriptions>
- </a-collapse-panel>
- </a-collapse>
- </a-form-item>
- </a-col>
- </a-row>
- </a-card>
- <a-card class="search-box step-jump">
- <span slot="title">
- 目标人群
- <a-tooltip>
- <template slot="title">
- 定向包支持多选
- 将根据人群包匹配情况进行随机匹配。若账户中无此人群包,则进行下一个定向包匹配。若此账户全部匹配不成功则不创建
- </template>
- <a-icon type="question-circle" />
- </a-tooltip>
- </span>
- <a-row :gutter="16">
- <a-col :span="16" style="width:100%; margin-left: -10%;">
- <a-form-item label="" v-bind="tailFormItemLayout">
- <div class="target-person-add">
- <span>已选定向包:{{ showCheckPerson.length }}</span>
- <a-button
- type="primary"
- class="target-person-add-button"
- @click="targetPersonCheck"
- :disabled="!projectId"
- >选择定向包 ></a-button
- >
- <p v-if="$route.query.id" style="margin:0">重新选择定向包将会重新选取</p>
- </div>
- </a-form-item>
- <a-form-item label="" v-bind="tailFormItemLayout">
- <div
- class="card-person-drawer info-detail"
- style="justify-content: flex-start;max-height:500px;overflow:auto"
- >
- <a-card
- :title="item.templateName"
- class="card-person card-item-else"
- style="margin-right:10px"
- v-for="(item, index) in showCheckPerson"
- :key="index"
- >
- <div slot="extra">
- <a-popconfirm
- title="确定要删除这个定向吗?"
- ok-text="确定"
- cancel-text="取消"
- @confirm="removeVideoMaterial(index, item.id)"
- @cancel="cancel"
- >
- <a-icon type="delete" />
- </a-popconfirm>
- </div>
- <div class="card-main-case">
- <a-row style="margin-top:10px">
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 地区:</span>
- <div v-if="item">
- <span
- v-if="
- item.region == '' ||
- item.region == null ||
- JSON.parse(item.region).length == 0
- "
- >
- 不限
- </span>
- <div v-else>
- {{ item.regionName.join(',') }}
- </div>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 年龄:</span>
- <div v-if="item">
- <span
- v-if="
- (item.agesRange == '[]' ||
- item.agesRange == null) &&
- (item.min == -1 || item.min == null) &&
- (item.max == -1 || item.max == null)
- "
- >
- 不限
- </span>
- <div v-else>
- <span
- v-if="
- item.agesRange == '[]' || item.agesRange == null
- "
- >
- {{ item.min + '岁~' + item.max + '岁' }}
- </span>
- <span v-else>
- <span
- v-for="(items, index) in JSON.parse(
- item.agesRange
- )"
- :key="index"
- >
- {{ items | kuaishouAge
- }}{{
- index ==
- JSON.parse(item.agesRange).length - 1
- ? ''
- : ','
- }}
- </span>
- </span>
- </div>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 性别:</span>
- <div v-if="item">
- {{
- item.gender == 1
- ? '女'
- : item.gender == 2
- ? '男'
- : '不限'
- }}
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 最低版本:</span>
- <div v-if="item">
- {{
- item.platformOs == 1
- ? 'Android系统(' +
- (item.androidOsv == 3
- ? '不限)'
- : item.androidOsv + 'x+)')
- : item.platformOs == 2
- ? 'IOS系统(' +
- (item.iosOsv == 6 ? '不限)' : item.iosOsv + 'x+)')
- : '不限'
- }}
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 设备品牌:</span>
- <div v-if="item">
- <span
- v-if="
- item.deviceBrand == '' ||
- item.deviceBrand == null ||
- JSON.parse(item.deviceBrand).length == 0
- "
- >
- 不限
- </span>
- <span v-else>
- <span
- v-for="(items, index) in JSON.parse(
- item.deviceBrand
- )"
- :key="index"
- >
- {{ items | deviceBrand
- }}{{
- index == JSON.parse(item.deviceBrand).length - 1
- ? ''
- : ','
- }}
- </span>
- </span>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 设备价格:</span>
- <div v-if="item">
- <span
- v-if="
- item.devicePrice == '' ||
- item.devicePrice == null ||
- JSON.parse(item.devicePrice).length == 0
- "
- >
- 不限
- </span>
- <span v-else>
- <span
- v-for="(items, index) in JSON.parse(
- item.devicePrice
- )"
- :key="index"
- >
- {{ items | kuaishouPrice
- }}{{
- index == JSON.parse(item.devicePrice).length - 1
- ? ''
- : ','
- }}
- </span>
- </span>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 商业兴趣:</span>
- <div>
- <span
- v-if="
- item.businessInterest == '[]' ||
- item.businessInterest == null ||
- item.businessInterest == ''
- "
- >
- 不限
- </span>
- <div v-else>
- <span
- v-for="(items, index) in JSON.parse(
- item.businessInterest
- )"
- :key="index"
- >
- {{ items | business }}
- {{
- index ==
- JSON.parse(item.businessInterest).length - 1
- ? ''
- : ','
- }}
- </span>
- </div>
- </div>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 网红粉丝:</span>
- <span
- v-if="
- item.fansStar == '[]' ||
- item.fansStar == null ||
- item.fansStar == ''
- "
- >
- 不限
- </span>
- <div v-else>
- <span
- v-for="(items, index) in JSON.parse(item.fansStar)"
- :key="index"
- >
- {{ items | fansStarLabel }}
- {{
- index == JSON.parse(item.fansStar).length - 1
- ? ''
- : ','
- }}
- </span>
- </div>
- </a-col>
- </a-row>
- <a-row v-if="item.platformOs == 1">
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> APP行为:</span>
- <div v-if="item">
- <span
- v-if="
- (item.appIds == '[]' ||
- item.appIds == null ||
- item.appIds == '') &&
- (item.appInterest == '[]' ||
- item.appInterest == null ||
- item.appInterest == '')
- "
- >
- 不限
- </span>
- <div v-else>
- <span
- v-if="
- item.appIds == '[]' ||
- item.appIds == null ||
- item.appIds == ''
- "
- >
- <span
- v-for="(items, index) in JSON.parse(
- item.appInterest
- )"
- :key="index"
- >
- {{ items | optionsApp
- }}{{
- index ==
- JSON.parse(item.appInterest).length - 1
- ? ''
- : ','
- }}
- </span>
- </span>
- <span v-else>
- <span
- v-for="(items, index) in JSON.parse(
- item.appIds
- )"
- :key="index"
- >
- {{ items }}
- </span>
- </span>
- </div>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 兴趣视频用户:</span>
- <div v-if="item">
- <span
- v-if="
- item.interestVideo == '[]' ||
- item.interestVideo == null ||
- item.interestVideo == ''
- "
- >
- 不限
- </span>
- <div v-else>
- <span
- v-for="(items, index) in JSON.parse(
- item.interestVideo
- )"
- :key="index"
- >
- {{ items | interestVideo
- }}{{
- index ==
- JSON.parse(item.interestVideo).length - 1
- ? ''
- : ','
- }}
- </span>
- </div>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 网络环境:</span>
- <div v-if="item">
- {{
- item.network == 1
- ? 'Wi-Fi'
- : item.network == 2
- ? '移动网络'
- : '不限'
- }}
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label">
- 过滤已转换用户:</span
- >
- <div v-if="item">
- {{
- item.filterConvertedLevel | kuaishouFilterConvertedLevel
- }}
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 智能扩量:</span>
- <div v-if="item">
- {{ item.isOpen == 0 ? '关闭' : '开启' }}
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- </div>
- </a-card>
- </div>
- </a-form-item>
- </a-col>
- </a-row>
- </a-card>
- <a-card class="search-box step-jump" title="优化目标">
- <a-form layout="horizontal" v-bind="formItemLayout" :form="formOptimize">
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="优化目标">
- <a-radio-group
- v-decorator="['bidType', { initialValue: 10 }]"
- button-style="solid"
- >
- <a-radio-button :value="10">
- 转化数
- </a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="转化目标">
- <a-select
- style="width:300px"
- allowClear
- v-decorator="[
- 'ocpxActionType',
- { rules: [{ required: true, message: '转化目标必选' }] }
- ]"
- >
- <a-select-option :value="2">行为数</a-select-option>
- <a-select-option :value="180">激活</a-select-option>
- <a-select-option :value="53">表单提交</a-select-option>
- <a-select-option :value="394">订单提交</a-select-option>
- <a-select-option :value="348">使用有效线索</a-select-option>
- <a-select-option :value="383">授信出价</a-select-option>
- <a-select-option :value="384">完件出价</a-select-option>
- <a-select-option :value="190">付费出价</a-select-option>
- <a-select-option :value="191">首日ROI</a-select-option>
- <a-select-option :value="396">注册优化目标</a-select-option>
- <a-select-option :value="324">唤起应用</a-select-option>
- <a-select-option :value="715">微信复制优化目标</a-select-option>
- <a-select-option :value="716">多转化事件</a-select-option>
- <a-select-option :value="717">广告观看次数</a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="计费方式">
- <a-radio-group default-value="10" button-style="solid">
- <a-radio-button value="10">
- 按展示付费(oCPM)
- </a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="深度转化目标">
- <a-select
- style="width:300px"
- size="default"
- allowClear
- v-decorator="['deepConversionType']"
- >
- <a-select-option :value="3">
- 付费
- </a-select-option>
- <a-select-option :value="7">
- 次日留存
- </a-select-option>
- <a-select-option :value="10">
- 完件
- </a-select-option>
- <a-select-option :value="11">
- 授信
- </a-select-option>
- <a-select-option :value="13">
- 添加购物车
- </a-select-option>
- <a-select-option :value="14">
- 提交订单
- </a-select-option>
- <a-select-option :value="15">
- 购买
- </a-select-option>
- <a-select-option :value="44">
- 有效线索
- </a-select-option>
- <a-select-option :value="92">
- 付费roi
- </a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="转化目标出价">
- <a-input
- style="width:300px"
- v-decorator="[
- 'cpaBid',
- {
- rules: [
- { required: true, message: ' ' },
- { validator: cpaBidValid }
- ]
- }
- ]"
- >
- </a-input>
- <br>
- <span style="color:red"
- >单出价请输入单数字,阶梯出价请用/隔开 例如10/12,区间出价请用-链接
- 例如20-25</span
- >
- </a-form-item>
- </a-col>
- </a-row>
- <!-- { rules: [{ validator: deepBidValid }] } -->
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="深度转化出价">
- <a-input style="width:300px" v-decorator="['deepConversionBid']"> </a-input>
- <br>
- <span style="color:red"
- >单出价请输入单数字,阶梯出价请用/隔开 例如10/12,区间出价请用-链接
- 例如20-25</span
- >
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- </a-card>
- <a-card class="search-box step-jump" title="创意信息">
- <a-button type="primary" slot="extra" @click="originalityEdit" :disabled="!projectId"
- >编辑</a-button
- >
- <a-form-item v-bind="tailFormItemLayoutElse" style="margin-left:1.15%">
- <a-descriptions>
- <a-descriptions-item label="创意制作方式">
- <span v-if="showCreativeData">
- {{ showCreativeData.unitType | unitType }}
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <a-descriptions-item label=" 广告位置">
- <span v-if="showCreativeData && showCreativeData.sceneId">
- <span v-for="(item, index) in showCreativeData.sceneId" :key="index">
- {{ item | kuaishouSceneId
- }}{{ index === showCreativeData.sceneId.length - 1 ? '' : ',' }}
- </span>
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <a-descriptions-item label="关联封面数">
- <span v-if="showCreativeData && showCreativeData.imageCnt">
- {{ showCreativeData.imageCnt }}
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <a-descriptions-item label="自定义组上限">
- <span v-if="showCreativeData && showCreativeData.customUnitCnt">
- {{ showCreativeData.customUnitCnt }}
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <a-descriptions-item label="程序化组上限">
- <span v-if="showCreativeData && showCreativeData.programUnitCnt">
- {{ showCreativeData.programUnitCnt }}
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <a-descriptions-item label="素材类型">
- <span v-if="showCreativeData">
- {{ showCreativeData.channelType | channelType }}
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <a-descriptions-item label="素材挖掘">
- <span v-if="showCreativeData">
- {{ showCreativeData.assetMining === 0 ? '关闭' : '开启' }}
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <a-descriptions-item label="智能抽帧">
- <span v-if="showCreativeData">
- {{ showCreativeData.smartCover === 0 ? '关闭' : '开启' }}
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <a-descriptions-item label="素材选取">
- <span v-if="showCreativeData">
- 不限
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <a-descriptions-item label="创意分类">
- <span v-if="showCreativeData && showCreativeData.creativeCategory">
- <a-cascader
- :options="createOptions"
- v-model="showCreativeData.creativeCategory"
- disabled
- :fieldNames="fieldNames"
- placeholder="请选择创意分类"
- />
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <a-descriptions-item label="行动号召">
- <span v-if="showCreativeData && showCreativeData.actionBarText">
- {{ showCreativeData.actionBarText.join() }}
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <a-descriptions-item label="创意标签">
- <span v-if="showCreativeData && showCreativeData.creativeTag">
- {{ showCreativeData.creativeTag.join() }}
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- <a-descriptions-item label="广告语" :span="3">
- <span v-if="showCreativeData">
- <span v-for="(item, index) in descriptionList" :key="index">
- {{ item.value }}{{ index === descriptionList.length - 1 ? '' : ';' }}
- </span>
- </span>
- <span v-else>-</span>
- </a-descriptions-item>
- </a-descriptions>
- </a-form-item>
- </a-card>
- <a-card class="search-box step-jump" title="素材信息">
- <a-form layout="horizontal" v-bind="formItemLayout" :form="formMaterial">
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item>
- <span slot="label">
- <a-tooltip>
- <template slot="title">
- 自动投放自动选取素材,在此处可限制选取素材逻辑。上新素材不可取消勾选,“高质量素材”“遗漏素材”“历史素材打捞”可随意组合使用
- </template>
- <a-icon type="question-circle" />
- </a-tooltip>
- 素材选取
- </span>
- <a-checkbox-group
- v-decorator="[
- 'sourceMaterial',
- {
- rules: [
- {
- required: true,
- message: '转化目标必选'
- }
- ],
- initialValue: [1]
- }
- ]"
- >
- <a-checkbox :value="1" disabled>
- 上新素材
- </a-checkbox>
- <a-checkbox :value="2">
- 高质量素材
- </a-checkbox>
- <a-checkbox :value="3">
- 遗漏素材
- </a-checkbox>
- <a-checkbox :value="4">
- 历史打捞
- </a-checkbox>
- </a-checkbox-group>
- </a-form-item>
- <a-form-item>
- <span slot="label">
- 素材匹配逻辑
- </span>
- <a-radio-group
- v-decorator="[
- 'matchingLogic',
- {
- rules: [
- {
- required: true,
- message: '转化目标必选'
- }
- ],
- initialValue: 1
- }
- ]"
- >
- <a-radio :value="1">
- 多定向
- </a-radio>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- </a-card>
- <div style="display: flex; justify-content: flex-end; margin-bottom: 100px">
- <div>
- <a-button
- type="primary"
- style="margin-right: 15px"
- @click="handleSubmit"
- :loading="sumbitLoading"
- :disabled="disabled"
- >
- 创建
- </a-button>
- <a-button @click="clearAllData"> 取消 </a-button>
- </div>
- </div>
- </a-col>
- </a-row>
- </div>
- <!-- 目标应用编辑 -->
- <a-drawer :width="800" :visible="targetAppVisible" :body-style="{ paddingBottom: '80px' }" @close="closeUnit">
- <!-- @close="closeUnit('createForm')" -->
- <h2 slot="title" style="margin-bottom: 0">目标应用</h2>
- <!-- class="create-info" -->
- <a-form layout="horizontal" v-bind="formDrawerItemLayout" :form="formTargetApp">
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="系统平台">
- <a-radio-group
- v-decorator="['platformOs', { initialValue: 2 }]"
- button-style="solid"
- @change="changeType"
- >
- <!-- <a-radio-button :value="0">不限</a-radio-button> -->
- <a-radio-button :value="1">Android</a-radio-button>
- <a-radio-button :value="2">IOS</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item>
- <span slot="label">
- <a-tooltip>
- <template slot="title">
- 单应用情况下 账户对应一个应用。多应用情况下 账户可对应多个应用
- </template>
- <a-icon type="question-circle" />
- </a-tooltip>
- 单/多应用
- </span>
- <a-radio-group v-decorator="['singleAppid', { initialValue: 1 }]" button-style="solid">
- <a-radio-button :value="1">单应用</a-radio-button>
- <a-radio-button :value="0" disabled>多应用</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="选择应用">
- <a-select
- v-decorator="['appId', { rules: [{ required: true, message: '请选择目标应用' }] }]"
- showSearch
- allowClear
- placeholder="选择应用目标"
- optionFilterProp="children"
- style="width: 500px"
- :filterOption="filterOption"
- @change="appIdChange"
- :mode="getFormData('formTargetApp', 'singleAppid') == 1 ? 'defalut' : 'multiple'"
- :maxTagCount="1"
- :labelInValue="true"
- >
- <a-select-option v-if="getFormData('formTargetApp', 'singleAppid') == 0" :value="0"
- >选择以下全部</a-select-option
- >
- <a-select-option v-for="appModel in appList" :key="appModel.id" :value="appModel.id">
- {{ appModel.platform | platform }}   {{
- appModel.appName
- }}    {{ appModel.appVersion }}
- </a-select-option>
- </a-select>
- <!-- <a-button type="primary" @click="addApplication" :loading="tongbuLoading"
- >刷新应用</a-button
- > -->
- </a-form-item>
- <a-form-item v-bind="formDrawerItemLayout">
- <a-table
- ref="table"
- size="middle"
- bordered
- :dataSource="multipleBidDataDrawer"
- :pagination="false"
- style="width:180%"
- :scroll="{ x: 1200 }"
- >
- <a-table-column
- key="appName"
- width="10%"
- data-index="appName"
- title="应用名称"
- align="center"
- />
- <a-table-column
- width="10%"
- key="appVersion"
- data-index="appVersion"
- title="应用标记"
- align="center"
- />
- <a-table-column
- width="10%"
- key="platform"
- data-index="platform"
- :scopedSlots="{ customRender: 'platform' }"
- ,
- title="系统平台"
- align="center"
- >
- <span slot-scope="text, record">
- {{ text === 1 ? 'Android' : 'iOS' }}
- </span>
- </a-table-column>
- <a-table-column
- width="10%"
- key="count"
- data-index="count"
- title="覆盖账户"
- align="center"
- >
- </a-table-column>
- <a-table-column
- width="20%"
- key="tracUrl"
- data-index="tracUrl"
- title="第三方点击监测链接"
- align="center"
- :ellipsis="true"
- >
- <template slot-scope="text, record">
- <editable-cell
- :text="text"
- @change="onCellChange(record.id, 'tracUrl', $event)"
- />
- </template>
- </a-table-column>
- <a-table-column
- width="20%"
- key="impressionUrl"
- data-index="impressionUrl"
- title="第三方开始播放监测链接"
- align="center"
- :ellipsis="true"
- >
- <template slot-scope="text, record">
- <editable-cell
- :text="text"
- @change="onCellChange(record.id, 'impressionUrl', $event)"
- />
- </template>
- </a-table-column>
- <a-table-column
- width="20%"
- key="actionbarClickUrl"
- data-index="actionbarClickUrl"
- title="第三方点击按钮监测链接"
- align="center"
- :ellipsis="true"
- >
- <template slot-scope="text, record">
- <editable-cell
- :text="text"
- @change="onCellChange(record.id, 'actionbarClickUrl', $event)"
- />
- </template>
- </a-table-column>
- <a-table-column
- width="20%"
- key="adPhotoPlayedT3sUrl"
- data-index="adPhotoPlayedT3sUrl"
- title="第三方有效播放监测链接"
- align="center"
- :ellipsis="true"
- >
- <template slot-scope="text, record">
- <editable-cell
- :text="text"
- @change="onCellChange(record.id, 'adPhotoPlayedT3sUrl', $event)"
- />
- </template>
- </a-table-column>
- </a-table>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item>
- <span slot="label">
- <a-tooltip>
- <template slot="title">
- 调起应用需要加白使用 若多应用的情况下在创建时则一一匹配,若账户未加白
- 则不使用调起链接
- </template>
- <a-icon type="question-circle" />
- </a-tooltip>
- 调起应用
- </span>
- <a-switch default-checked v-model="uriCheck" />
- <span style="color:red"> 需加白使用</span>
- <div v-if="uriCheck">
- <a-input
- placeholder="请填写链接"
- v-decorator="['schemaUri', { rules: [{ message: '链接不能为空' }] }]"
- />
- </div>
- </a-form-item>
- </a-col>
- </a-row>
- <!-- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="转化跟踪">
- <span v-if="convertId && !convert" style="display:block;font-size:16px"
- >已选择转化目标: {{ convertId.label }}</span
- >
- <a-button type="primary" @click="showConvert">{{
- convertId ? '更换转化目标' : '选择转化目标'
- }}</a-button>
- </a-form-item>
- </a-col>
- </a-row> -->
- </a-form>
- <div
- :style="{
- position: 'absolute',
- right: 0,
- bottom: 0,
- width: '100%',
- borderTop: '1px solid #e9e9e9',
- padding: '10px 16px',
- background: '#fff',
- textAlign: 'right',
- zIndex: 1
- }"
- >
- <a-button :style="{ marginRight: '8px' }" @click="closeUnit"> 取消 </a-button>
- <a-button type="primary" @click="submitApp"> 提交 </a-button>
- </div>
- </a-drawer>
- <!-- 定向包选择 -->
- <a-drawer
- :width="800"
- :visible="targetPersonVisible"
- :body-style="{ paddingBottom: '80px' }"
- @close="closePerson"
- >
- <!-- @close="closeUnit('createForm')" -->
- <h2 slot="title" style="margin-bottom: 0">定向包选择</h2>
- <div style="display: flex">
- <a-input placeholder="输入定向包名称关键词" style="width:60%" v-model="searchTemplate" />
- <a-button type="primary" :style="{ marginRight: '8px', marginLeft: '8px' }" @click="getTargetPerson()">
- 搜索
- </a-button>
- <a-button
- @click="
- searchTemplate = null
- ipagination.current = 1
- getTargetPerson()
- "
- >
- 重置
- </a-button>
- <div style="line-height: 32px;font-weight: 700;margin-left: 50px;">已选择({{ sumContent }})</div>
- </div>
- <a-checkbox-group v-model="checkPerson" style="width: 100%;" @change="setVideoData">
- <div class="card-person-drawer info-detail">
- <a-card
- :title="item.templateName"
- class="card-person card-item"
- v-for="(item, index) in personList"
- :key="index"
- >
- <div slot="extra">
- <a-checkbox :value="item.id"></a-checkbox>
- </div>
- <div class="card-main-case">
- <a-row style="margin-top:10px">
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 地区:</span>
- <div v-if="item">
- <span
- v-if="
- item.region == '' ||
- item.region == null ||
- JSON.parse(item.region).length == 0
- "
- >
- 不限
- </span>
- <div v-else>
- {{ item.regionName.join(',') }}
- </div>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 年龄:</span>
- <div v-if="item">
- <span
- v-if="
- (item.agesRange == '[]' || item.agesRange == null) &&
- (item.min == -1 || item.min == null) &&
- (item.max == -1 || item.max == null)
- "
- >
- 不限
- </span>
- <div v-else>
- <span v-if="item.agesRange == '[]' || item.agesRange == null">
- {{ item.min + '岁~' + item.max + '岁' }}
- </span>
- <span v-else>
- <span v-for="(items, index) in JSON.parse(item.agesRange)" :key="index">
- {{ items | kuaishouAge
- }}{{ index == JSON.parse(item.agesRange).length - 1 ? '' : ',' }}
- </span>
- </span>
- </div>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 性别:</span>
- <div v-if="item">
- {{ item.gender == 1 ? '女' : item.gender == 2 ? '男' : '不限' }}
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 最低版本:</span>
- <div v-if="item">
- {{
- item.platformOs == 1
- ? 'Android系统(' +
- (item.androidOsv == 3 ? '不限)' : item.androidOsv + 'x+)')
- : item.platformOs == 2
- ? 'IOS系统(' + (item.iosOsv == 6 ? '不限)' : item.iosOsv + 'x+)')
- : '不限'
- }}
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 设备品牌:</span>
- <div v-if="item">
- <span
- v-if="
- item.deviceBrand == '' ||
- item.deviceBrand == null ||
- JSON.parse(item.deviceBrand).length == 0
- "
- >
- 不限
- </span>
- <span v-else>
- <span v-for="(items, index) in JSON.parse(item.deviceBrand)" :key="index">
- {{ items | deviceBrand
- }}{{ index == JSON.parse(item.deviceBrand).length - 1 ? '' : ',' }}
- </span>
- </span>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 设备价格:</span>
- <div v-if="item">
- <span
- v-if="
- item.devicePrice == '' ||
- item.devicePrice == null ||
- JSON.parse(item.devicePrice).length == 0
- "
- >
- 不限
- </span>
- <span v-else>
- <span v-for="(items, index) in JSON.parse(item.devicePrice)" :key="index">
- {{ items | kuaishouPrice
- }}{{ index == JSON.parse(item.devicePrice).length - 1 ? '' : ',' }}
- </span>
- </span>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 商业兴趣:</span>
- <div>
- <span
- v-if="
- item.businessInterest == '[]' ||
- item.businessInterest == null ||
- item.businessInterest == ''
- "
- >
- 不限
- </span>
- <div v-else>
- <span
- v-for="(items, index) in JSON.parse(item.businessInterest)"
- :key="index"
- >
- {{ items | business }}
- {{ index == JSON.parse(item.businessInterest).length - 1 ? '' : ',' }}
- </span>
- </div>
- </div>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 网红粉丝:</span>
- <span v-if="item.fansStar == '[]' || item.fansStar == null || item.fansStar == ''">
- 不限
- </span>
- <div v-else>
- <span v-for="(items, index) in JSON.parse(item.fansStar)" :key="index">
- {{ items | fansStarLabel }}
- {{ index == JSON.parse(item.fansStar).length - 1 ? '' : ',' }}
- </span>
- </div>
- </a-col>
- </a-row>
- <a-row v-if="item.platformOs == 1">
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> APP行为:</span>
- <div v-if="item">
- <span
- v-if="
- (item.appIds == '[]' || item.appIds == null || item.appIds == '') &&
- (item.appInterest == '[]' ||
- item.appInterest == null ||
- item.appInterest == '')
- "
- >
- 不限
- </span>
- <div v-else>
- <span
- v-if="item.appIds == '[]' || item.appIds == null || item.appIds == ''"
- >
- <span
- v-for="(items, index) in JSON.parse(item.appInterest)"
- :key="index"
- >
- {{ items | optionsApp
- }}{{ index == JSON.parse(item.appInterest).length - 1 ? '' : ',' }}
- </span>
- </span>
- <span v-else>
- <span v-for="(items, index) in JSON.parse(item.appIds)" :key="index">
- {{ items }}
- </span>
- </span>
- </div>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 兴趣视频用户:</span>
- <div v-if="item">
- <span
- v-if="
- item.interestVideo == '[]' ||
- item.interestVideo == null ||
- item.interestVideo == ''
- "
- >
- 不限
- </span>
- <div v-else>
- <span v-for="(items, index) in JSON.parse(item.interestVideo)" :key="index">
- {{ items | interestVideo
- }}{{ index == JSON.parse(item.interestVideo).length - 1 ? '' : ',' }}
- </span>
- </div>
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 网络环境:</span>
- <div v-if="item">
- {{ item.network == 1 ? 'Wi-Fi' : item.network == 2 ? '移动网络' : '不限' }}
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 过滤已转换用户:</span>
- <div v-if="item">
- {{ item.filterConvertedLevel | kuaishouFilterConvertedLevel }}
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- <a-row>
- <a-col :xl="24" :md="24" class="flex-main">
- <span class="ant-descriptions-item-label"> 智能扩量:</span>
- <div v-if="item">
- {{ item.isOpen == 0 ? '关闭' : '开启' }}
- </div>
- <p title="-" v-else>-</p>
- </a-col>
- </a-row>
- </div>
- </a-card>
- </div>
- </a-checkbox-group>
- <a-pagination
- size="small"
- :showTotal="ipagination.showTotal"
- style="float: right"
- v-if="personList.length > 0"
- showQuickJumper
- :pageSize.sync="ipagination.pageSize"
- :total="ipagination.total"
- v-model="ipagination.current"
- @change="getDataSource"
- />
- <div
- :style="{
- position: 'absolute',
- right: 0,
- bottom: 0,
- width: '100%',
- borderTop: '1px solid #e9e9e9',
- padding: '10px 16px',
- background: '#fff',
- textAlign: 'right',
- zIndex: 1
- }"
- >
- <a-button :style="{ marginRight: '8px' }" @click="closePerson"> 取消 </a-button>
- <a-button type="primary" @click="submitPerson" :loading="personLoading"> 提交 </a-button>
- </div>
- </a-drawer>
- <!-- 创意信息编辑 -->
- <a-drawer
- :width="800"
- :visible="optimizeVisible"
- :body-style="{ paddingBottom: '80px' }"
- @close="closeCreative"
- >
- <!-- @close="closeUnit('createForm')" -->
- <h2 slot="title" style="margin-bottom: 0">创意信息</h2>
- <!-- class="create-info" -->
- <a-form layout="horizontal" v-bind="formDrawerItemLayout" :form="formOriginality">
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="创意制作方式">
- <a-radio-group
- button-style="solid"
- @change="unitTypeCheck"
- v-decorator="[
- 'unitType',
- {
- rules: [
- {
- required: true,
- message: '创意制作方式必选'
- }
- ],
- initialValue: 0
- }
- ]"
- >
- <a-radio-button :value="0">不限</a-radio-button>
- <a-radio-button :value="4">自定义</a-radio-button>
- <a-radio-button :value="7">程序化</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16" style="width: 110%;margin-left: -9%;">
- <a-form-item label="广告位置">
- <checkBoxGroup
- :options="[
- { label: '优选广告位', value: 1 },
- { label: '上下滑大屏广告', value: 6 },
- { label: '视频播放页广告', value: 3 },
- { label: '联盟广告', value: 5 }
- ]"
- v-decorator="[
- 'sceneId',
- {
- rules: [
- {
- required: true,
- message: '转化目标必选'
- }
- ],
- initialValue: [1]
- }
- ]"
- @change="changeData"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="关联封面数">
- <a-input-number
- style="width:200px"
- :max="imageCntMax"
- :step="1"
- :min="1"
- v-decorator="[
- 'imageCnt',
- { initialValue: 5, rules: [{ required: true, message: '请填写关联封面数' }] }
- ]"
- @change="setImageCnt"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="getFormData('formOriginality', 'unitType') != 7">
- <a-col :span="16">
- <a-form-item label="自定义组上限">
- <a-input-number
- v-decorator="[
- 'customUnitCnt',
- { initialValue: 400, rules: [{ required: true, message: '请填写自定义组上限' }] }
- ]"
- style="width: 100%"
- placeholder="仅支持输入自然数"
- :max="customUnitCntMax"
- :precision="0"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16" v-if="getFormData('formOriginality', 'unitType') != 4">
- <a-col :span="16">
- <a-form-item label="程序化组上限">
- <a-input-number
- v-decorator="[
- 'programUnitCnt',
- { initialValue: 60, rules: [{ required: true, message: '请填写程序化组上限' }] }
- ]"
- style="width: 100%"
- placeholder="仅支持输入自然数"
- :max="60"
- :precision="0"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="素材类型">
- <a-radio-group
- button-style="solid"
- v-decorator="['channelType', { rules: [{ required: true }], initialValue: 2 }]"
- >
- <a-radio-button :value="2">不限</a-radio-button>
- <a-radio-button :value="0">内部</a-radio-button>
- <a-radio-button :value="1">素造</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="素材挖掘">
- <a-radio-group
- button-style="solid"
- v-decorator="['assetMining', { rules: [{ required: true }], initialValue: 1 }]"
- >
- <a-radio-button :value="1">开启</a-radio-button>
- <a-radio-button :value="0">关闭</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="智能抽帧">
- <a-radio-group
- button-style="solid"
- v-decorator="['smartCover', { rules: [{ required: true }], initialValue: 1 }]"
- >
- <a-radio-button :value="1">开启</a-radio-button>
- <a-radio-button :value="0">关闭</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="行动号召">
- <a-select
- mode="multiple"
- v-decorator="[
- 'actionBarText',
- { rules: [{ required: true, message: '请选择行动号召按钮文案' }] }
- ]"
- showSearch
- allowClear
- placeholder="选择行动号召按钮文案"
- optionFilterProp="children"
- :filterOption="filterOption"
- >
- <a-select-option
- v-for="appModel in actionBarTextList"
- :key="appModel.id"
- :value="appModel.actionBarText"
- >
- {{ appModel.actionBarText }}
- </a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="广告语">
- <div style="position:relative" v-for="(item, index) in descriptionList" :key="index">
- <a-textarea
- class="rending"
- placeholder="请输入广告语"
- @change="descriptionchange(item.value, index)"
- v-model.trim="item.value"
- :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: 30px;
- position: absolute;
- bottom: 0;
- right: 6px;
- width: 100%;
- margin-bottom: 0;
- "
- >
- {{ item.value.length }}/30
- <!-- {{ getFormData('description').length }}/30 -->
- </p>
- <div style="position:absolute;right:-50px;top:-10px">
- <a-icon type="plus" @click="addDescription()" style="margin-right:15px" />
- <a-icon
- type="minus"
- @click="removeDescription(index)"
- v-if="descriptionList.length > 1"
- />
- </div>
- </div>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="创意分类">
- <a-cascader
- :options="createOptions"
- v-decorator="[
- 'creativeCategory',
- {
- initialValue: []
- }
- ]"
- :fieldNames="fieldNames"
- placeholder="请选择创意分类"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="创意标签">
- <a-select
- mode="tags"
- style="width: 100%"
- placeholder="按回车生成标签"
- v-decorator="[
- 'creativeTag',
- {
- initialValue: [],
- rules: [
- {
- validator: creativeTagValid
- }
- ]
- }
- ]"
- dropdownClassName="display-none-selset"
- :token-separators="[',', ' ', ',']"
- >
- </a-select>
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- <div
- :style="{
- position: 'absolute',
- right: 0,
- bottom: 0,
- width: '100%',
- borderTop: '1px solid #e9e9e9',
- padding: '10px 16px',
- background: '#fff',
- textAlign: 'right',
- zIndex: 1
- }"
- >
- <a-button :style="{ marginRight: '8px' }" @click="closeCreative"> 取消 </a-button>
- <a-button type="primary" @click="submitCreative"> 提交 </a-button>
- </div>
- </a-drawer>
- </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 { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
- import selectTable from '@/views/modules/Statistics/components/selectPagination.vue'
- import EditableCell from './editablCell'
- // import lookPreviewVue from './lookPreview.vue'
- function tqFun(qcArr1) {
- var tempArr = []
- function bbFun(qcArr) {
- for (var i = 0; i < qcArr.length; i++) {
- if (qcArr[i] instanceof Array) {
- bbFun(qcArr[i])
- } else {
- tempArr.push(qcArr[i])
- }
- }
- return tempArr
- }
- return bbFun(qcArr1)
- }
- let optionsAppActive = []
- let businessOptions = []
- let fansStarOptions = []
- let interestVideoOptions = []
- export default {
- name: 'GlobalHeader',
- components: {
- // UserMenu,
- // SMenu,
- Logo,
- Treeselect,
- selectCheckAll,
- checkBoxGroup,
- uploadFile,
- selectTable,
- EditableCell
- },
- mixins: [mixin],
- props: {
- mode: {
- type: String,
- // sidemenu, topmenu
- default: 'sidemenu'
- },
- theme: {
- type: String,
- required: false,
- default: 'dark'
- },
- collapsed: {
- type: Boolean,
- required: false,
- default: false
- },
- device: {
- type: String,
- required: false,
- default: 'desktop'
- }
- },
- data() {
- return {
- formProject: this.$form.createForm(this), //选择项目表单
- formInformation: this.$form.createForm(this), //设置基本信息表单
- formTargetApp: this.$form.createForm(this), //目标应用编辑表单
- formOptimize: this.$form.createForm(this), //优化目标表单
- formOriginality: this.$form.createForm(this), //创意表单
- formMaterial: this.$form.createForm(this), //素材表单
- sumbitLoading: false,
- //基本信息参数
- budgetType: '1',
- dayBudgetType: '1',
- projectId: null,
- projectName: null,
- //目标应用参数
- targetAppVisible: false,
- appList: [], //分平台数据,从总数据中筛选,避免多次请求接口
- appListAll: [], //所有的数据,做分平台的元数据
- tongbuLoading: false, //同步app按钮loading
- uriCheck: false, //调起链接,是否开启
- multipleBidDataDrawer: [],
- multipleBidData: [],
- appDetail: null,
- personLoading: false,
- // convertId: null,
- // convertList: [],
- // convertType: '1',
- //目标人群参数
- targetPersonVisible: false,
- personList: [],
- checkPerson: [],
- checkPersonAll: [],
- showCheckPerson: [],
- sumContent: 0,
- searchTemplate: '',
- ipagination: {
- current: 1,
- pageSize: 9,
- // pageSizeOptions: ['10', '20', '30'],
- showTotal: (total, range) => {
- return range[0] + '-' + range[1] + ' 共' + total + '条'
- },
- showQuickJumper: true,
- showSizeChanger: false,
- pageSizeOptions: ['10', '30', '50'],
- total: 0,
- onChange: (current, pageSize) => {
- // 切换分页时的回调,
- // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
- this.ipagination.current = current
- this.ipagination.pageSize = pageSize
- this.getTargetPerson()
- }
- },
- //优化目标参数
- groupTypeData: {},
- //创意信息参数
- optimizeVisible: false,
- adposition: 1,
- programUnitCnt: 60,
- customUnitCnt: 400,
- customUnitCntMax: 400,
- imageCntMax: 15,
- actionBarTextList: [],
- descriptionList: [{ value: '' }],
- fieldNames: {
- label: 'category_name',
- value: 'category_id',
- children: 'child'
- },
- createOptions: [],
- showCreativeData: null,
- //公共参数
- activeStep: 0,
- screenWidth: document.body.clientWidth,
- headerBarFixed: false,
- //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
- topMenuStyle: {
- headerIndexLeft: {},
- topNavHeader: {},
- headerIndexRight: {},
- topSmenuStyle: {}
- },
- stepsArr: [
- { title: '选择项目' },
- { title: '设置基本信息' },
- { title: '目标应用' },
- { title: '目标人群' },
- { title: '优化目标' },
- { title: '创意信息' },
- { title: '素材信息' }
- ],
- formItemLayout: {
- labelCol: { span: 4 },
- wrapperCol: { span: 16 }
- },
- formDrawerItemLayout: {
- labelCol: { span: 5 },
- wrapperCol: { span: 19 }
- },
- tailFormItemLayout: {
- wrapperCol: {
- sm: {
- span: 20,
- offset: 4
- }
- }
- },
- tailFormItemLayoutElse: {
- wrapperCol: {
- sm: {
- span: 20,
- offset: 1
- }
- }
- },
- tailFormDrawerItemLayout: {
- wrapperCol: {
- sm: {
- span: 19,
- offset: 5
- }
- }
- },
- disabled: false
- }
- },
- computed: {},
- watch: {
- projectId: function(n, o) {
- if (this.$route.query.id) {
- return
- } else {
- if (n) {
- this.getAction('/kuaishouProjectStrategy/checkProjectisOpen', { projectId: n }).then(res => {
- console.log(res)
- if (res.success) {
- if (res.result === 1) {
- this.disabled = false
- } else {
- this.$message.error('此项目有开启的配置,无法新建配置')
- this.disabled = true
- }
- }
- })
- this.formProject.resetFields()
- this.formInformation.resetFields()
- this.formOptimize.resetFields()
- this.formMaterial.resetFields()
- this.multipleBidData = []
- this.appDetail = {}
- this.showCheckPerson = []
- this.checkPerson = []
- this.checkPersonAll = []
- this.showCreativeData = null
- this.description = [{ value: '' }]
- }
- }
- }
- },
- mounted() {
- this.$nextTick(function() {
- // this.accountId = 23212
- this.getDataType('APP_INTEREST', 'optionsAppActive')
- this.getDataType('BUSINESS_INTEREST', 'businessOptions')
- this.getDataType('FANS_STAR', 'fansStarOptions')
- this.getDataType('INTEREST_VIDEO', 'interestVideoOptions')
- this.getActionBarText()
- if (this.$route.query.id) {
- this.getQueryById(this.$route.query.id)
- }
- window.addEventListener('scroll', this.onScroll)
- const that = this
- window.onresize = () => {
- return (() => {
- window.screenWidth = document.body.clientWidth
- that.screenWidth = window.screenWidth
- })()
- }
- })
- },
- filters: {
- unitType(val) {
- let data = {
- 4: '自定义',
- 7: '程序化',
- 0: '不限'
- }
- return data[val]
- },
- channelType(val) {
- let data = {
- 0: '内部',
- 1: '素造',
- 2: '不限'
- }
- return data[val]
- },
- business(theme) {
- let businessInterest = businessOptions.map(item => {
- return {
- tagId: item.tagId,
- tagName: item.tagName
- }
- })
- return businessInterest.filter(item => {
- return item.tagId == theme
- })[0].tagName
- },
- optionsApp(theme) {
- let optionsAppdata = optionsAppActive.map(item => {
- return {
- tagId: item.tagId,
- tagName: item.tagName
- }
- })
- return optionsAppdata.filter(item => {
- return item.tagId == theme
- })[0].tagName
- },
- fansStarLabel(theme) {
- let fansStarOptionsData = fansStarOptions.map(item => {
- return {
- tagId: item.tagId,
- tagName: item.tagName
- }
- })
- return fansStarOptionsData.filter(item => {
- return item.tagId == theme
- })[0].tagName
- },
- interestVideo(theme) {
- let interestVideoOptionsData = interestVideoOptions.map(item => {
- return {
- tagId: item.tagId,
- tagName: item.tagName
- }
- })
- return interestVideoOptionsData.filter(item => {
- return item.tagId == theme
- })[0].tagName
- }
- },
- methods: {
- moment,
- test() {
- // this.formProject.validateFields((err, values) => {
- // console.log(values)
- // })
- // this.formInformation.validateFields((err, values) => {
- // console.log(values)
- // })
- this.formOptimize.validateFields((err, values) => {
- console.log(values)
- })
- // this.formMaterial.validateFields((err, values) => {
- // console.log(values)
- // })
- // formProject: this.$form.createForm(this), //选择项目表单
- // formInformation: this.$form.createForm(this), //设置基本信息表单
- // formTargetApp: this.$form.createForm(this), //目标应用编辑表单
- // formOptimize: this.$form.createForm(this), //优化目标表单
- // formOriginality: this.$form.createForm(this), //创意表单
- // formMaterial: this.$form.createForm(this), //素材表单
- },
- getQueryById(id) {
- this.getAction('/kuaishouProjectStrategy/queryById', { id }).then(res => {
- if (res.success) {
- this.getActionBarText()
- this.getAction('/ctop/userAllocation/getAccountListByProjectId', {
- projectId: res.result.projectId
- }).then(res => {
- if (res.success) {
- this.getAction('/kuaishou/batch/getCreativeCategory', {
- accountId: res.result[0].accountId
- }).then(result => {
- if (result.success) {
- //console.log(res)
- this.createOptions = result.result
- }
- })
- }
- })
- this.$nextTick(() => {
- let data = res.result
- this.projectName = data.projectName
- this.projectId = data.projectId
- this.formProject.setFieldsValue(pick(data, 'campaignType'))
- this.formInformation.setFieldsValue(pick(data, 'campaignName', 'groupName'))
- if (data.campaignDayBudget && data.campaignDayBudget > 0) {
- this.budgetType = '2'
- data.campaignDayBudget = data.campaignDayBudget / 1000
- setTimeout(() => {
- this.formInformation.setFieldsValue(pick(data, 'campaignDayBudget'))
- }, 100)
- } else {
- this.budgetType = '1'
- }
- if (data.unitDayBudget && data.unitDayBudget > 0) {
- this.dayBudgetType = '2'
- data.unitDayBudget = data.unitDayBudget / 1000
- setTimeout(() => {
- this.formInformation.setFieldsValue(pick(data, 'unitDayBudget'))
- }, 100)
- } else {
- this.dayBudgetType = '1'
- }
- if (data.deepConversionType && data.deepConversionBid && data.deepConversionBid == '0') {
- if (res.result.deepConversionBid.includes('/')) {
- let bidArr = res.result.deepConversionBid.split('/')
- for (let index = 0; index < bidArr.length; index++) {
- bidArr[index] = bidArr[index] / 1000
- }
- data.deepConversionBid = bidArr.join('/')
- } else if (res.result.deepConversionBid.includes('-')) {
- let bidArr = res.result.deepConversionBid.split('-')
- for (let index = 0; index < bidArr.length; index++) {
- bidArr[index] = bidArr[index] / 1000
- }
- data.deepConversionBid = bidArr.join('-')
- } else {
- data.deepConversionBid = res.result.deepConversionBid / 1000 + ''
- }
- } else {
- data.deepConversionType = undefined
- data.deepConversionBid = undefined
- }
- if (data.cpaBid.includes('/')) {
- let bidArr = data.cpaBid.split('/')
- for (let index = 0; index < bidArr.length; index++) {
- bidArr[index] = bidArr[index] / 1000
- }
- data.cpaBid = bidArr.join('/')
- } else if (data.cpaBid.includes('-')) {
- let bidArr = data.cpaBid.split('-')
- for (let index = 0; index < bidArr.length; index++) {
- bidArr[index] = bidArr[index] / 1000
- }
- data.cpaBid = bidArr.join('-')
- } else {
- data.cpaBid = data.cpaBid / 1000 + ''
- }
- this.formOptimize.setFieldsValue(
- pick(data, 'bidType', 'ocpxActionType', 'deepConversionType', 'cpaBid', 'deepConversionBid')
- )
- res.result.sourceMaterial = JSON.parse(res.result.sourceMaterial)
- this.formMaterial.setFieldsValue(pick(data, 'sourceMaterial', 'matchingLogic'))
- if (res.result.creativeCategory) {
- // let arr=[];
- if (res.result.creativeCategory > 10000) {
- res.result.creativeCategory = res.result.creativeCategory
- ? [
- parseInt(res.result.creativeCategory / 10000),
- parseInt(res.result.creativeCategory / 100),
- res.result.creativeCategory
- ]
- : []
- } else if (res.result.creativeCategory > 100) {
- res.result.creativeCategory = res.result.creativeCategory
- ? [parseInt(res.result.creativeCategory / 100), res.result.creativeCategory]
- : []
- } else {
- res.result.creativeCategory = res.result.creativeCategory
- ? [res.result.creativeCategory]
- : []
- }
- }
- res.result.creativeTag = res.result.creativeTag ? JSON.parse(res.result.creativeTag) : []
- this.descriptionList =
- res.result.description.charAt(0) === '['
- ? eval(res.result.description).map(item => {
- return { value: item }
- })
- : [{ value: res.result.description }]
- res.result.sceneId = JSON.parse(res.result.sceneId)
- data.actionBarText = data.actionBarText.split(',')
- this.showCreativeData = pick(
- data,
- 'unitType',
- 'sceneId',
- 'imageCnt',
- 'customUnitCnt',
- 'programUnitCnt',
- 'channelType',
- 'assetMining',
- 'smartCover',
- 'actionBarText',
- 'creativeCategory',
- 'creativeTag'
- )
- // this.appDetail = { platformOs: data.platformOs, singleAppid: 1 }
- this.postDataAction('/kuaishouAppPackage/getAppsDetail', {
- apptemIds: JSON.parse(data.appIdArray)
- }).then(result => {
- if (result.success) {
- this.multipleBidData = result.result
- this.appDetail = {
- platformOs: result.result[0].platform < 3 ? 1 : 2,
- singleAppid: 1,
- appId: { key: result.result[0].apptemId },
- schemaUri: res.result.schemaUri
- }
- }
- })
- this.checkPerson = JSON.parse(data.templateIdArray)
- this.checkPersonAll = [JSON.parse(data.templateIdArray)]
- this.postDataAction('/kuaishouDirectionalPackage/getProjectTargetByIds', {
- ids: this.checkPerson
- }).then(res => {
- if (res.success) {
- this.showCheckPerson = res.result.map(item => {
- return {
- ...item,
- regionName: []
- }
- })
- for (let i = 0; i < this.showCheckPerson.length; i++) {
- if (
- this.showCheckPerson[i] &&
- (this.showCheckPerson[i].region == '' ||
- this.showCheckPerson[i].region == null ||
- JSON.parse(this.showCheckPerson[i].region).length == 0)
- ) {
- } else {
- // this.showRegion(this.personList[i].region, this.personList[i].regionName)
- let that = this
- new Promise((resolve, reject) => {
- this.postDataAction('/kuaishou/batch/getRegionDetail', {
- regionArr: that.showCheckPerson[i].region
- }).then(res => {
- if (res.success) {
- // this.populationData.allForm.region = res.result
- that.showCheckPerson[i].regionName = res.result.map(item => {
- return item.label
- })
- }
- })
- })
- }
- }
- }
- })
- })
- }
- })
- },
- handleSubmit() {
- let formProjectData = new Promise((resolve, reject) => {
- this.formProject.validateFields((err, values) => {
- if (!err) {
- if (this.projectId) {
- resolve({ ...values, projectId: this.projectId })
- }
- } else {
- reject('选择项目表单出错')
- }
- })
- })
- let formInformationData = new Promise((resolve, reject) => {
- this.formInformation.validateFields((err, values) => {
- if (!err) {
- resolve({ ...values })
- } else {
- reject('基本信息出错')
- }
- })
- })
- let formOptimizeData = new Promise((resolve, reject) => {
- this.formOptimize.validateFields((err, values) => {
- console.log(values, err)
- if (!err) {
- resolve({ ...values })
- } else {
- reject('优化目标出错')
- }
- })
- })
- let formMaterialData = new Promise((resolve, reject) => {
- this.formMaterial.validateFields((err, values) => {
- if (!err) {
- resolve({ ...values })
- } else {
- reject('出错')
- }
- })
- })
- Promise.all([formProjectData, formInformationData, formOptimizeData, formMaterialData])
- .then(res => {
- if (!this.showCreativeData || this.checkPerson.length === 0 || this.multipleBidData.length === 0) {
- this.$message.error('请填写完整')
- return
- }
- this.sumbitLoading = true
- let params = { ...res[0], ...res[1], ...res[2], ...res[3], ...this.showCreativeData }
- if (this.budgetType === '2') {
- params.campaignDayBudget = params.campaignDayBudget * 1000
- } else {
- params.campaignDayBudget = 0
- }
- if (this.dayBudgetType === '2') {
- params.unitDayBudget = params.unitDayBudget * 1000
- } else {
- params.unitDayBudget = 0
- }
- if (params.cpaBid) {
- if ((params.cpaBid + '').includes('/')) {
- let bidArr = params.cpaBid.split('/')
- for (let index = 0; index < bidArr.length; index++) {
- bidArr[index] = bidArr[index] * 1000
- }
- params.cpaBid = bidArr.join('/')
- } else if ((params.cpaBid + '').includes('-')) {
- let bidArr = params.cpaBid.split('-')
- for (let index = 0; index < bidArr.length; index++) {
- bidArr[index] = bidArr[index] * 1000
- }
- params.cpaBid = bidArr.join('-')
- } else {
- params.cpaBid = params.cpaBid * 1000
- }
- } else {
- params.cpaBid = 0
- }
- if (params.deepConversionBid && params.deepConversionBid != 0) {
- if ((params.deepConversionBid + '').includes('/')) {
- let bidArr = params.deepConversionBid.split('/')
- for (let index = 0; index < bidArr.length; index++) {
- bidArr[index] = bidArr[index] * 1000
- }
- params.deepConversionBid = bidArr.join('/')
- } else if ((params.deepConversionBid + '').includes('-')) {
- let bidArr = params.deepConversionBid.split('-')
- for (let index = 0; index < bidArr.length; index++) {
- bidArr[index] = bidArr[index] * 1000
- }
- params.deepConversionBid = bidArr.join('-')
- } else {
- params.deepConversionBid = params.deepConversionBid * 1000
- }
- } else {
- params.deepConversionBid = 0
- }
- if (params.creativeCategory && params.creativeCategory.length > 0) {
- params.creativeCategory = params.creativeCategory[params.creativeCategory.length - 1]
- } else {
- params.creativeCategory = undefined
- }
- params.creativeTag = params.creativeTag ? JSON.stringify(params.creativeTag) : undefined
- params.appIdArray = this.multipleBidData.map(res => {
- return res.apptemId
- })
- params.templateIdArray = this.checkPerson
- params.description = JSON.stringify(
- this.descriptionList.map(item => {
- return item.value
- })
- )
- params.singleAppid = 1
- params.actionBarText = params.actionBarText.join()
- if (this.$route.query.id) {
- params.id = this.$route.query.id
- }
- this.postDataAction('/kuaishouProjectStrategy/createProjectStrategy', params).then(res => {
- if (res.success) {
- this.sumbitLoading = false
- window.close()
- }
- })
- })
- .catch(err => {
- this.$message.error('请填写完整')
- })
- },
- clearAllData() {
- window.close()
- },
- descriptionchange(val, index) {
- let data = val
- this.$nextTick(() => {
- this.descriptionList[index].value = data.replace(/\s/g, '')
- })
- },
- addDescription() {
- this.descriptionList.push({ value: '' })
- },
- removeDescription(index) {
- this.descriptionList.splice(index, 1)
- },
- // 获取行动号召按钮
- getActionBarText() {
- this.actionBarTextList = []
- let that = this
- setTimeout(() => {
- this.getAction('/kuaishou/batch/getActionBarTextByType', {
- type: '2'
- }).then(res => {
- if (res.success) {
- that.actionBarTextList = res.result
- }
- })
- })
- },
- closeCreative() {
- this.optimizeVisible = false
- this.customUnitCntMax = 400
- this.imageCntMax = 15
- this.formOriginality.resetFields()
- },
- submitCreative() {
- this.formOriginality.validateFields((err, values) => {
- if (!err) {
- let isNotComplete = this.descriptionList.findIndex(item => {
- return item.value === ''
- })
- if (isNotComplete > -1) {
- this.$message.error('请正确填写必填项目,广告语未填')
- return
- }
- this.showCreativeData = JSON.parse(JSON.stringify(values))
- console.log(values, this.showCreativeData)
- this.optimizeVisible = false
- // this.closeCreative()
- }
- })
- },
- changeData(data) {
- if (data.length > 1 && data.findIndex(item => item == 1) == 0) {
- data.splice(
- data.findIndex(item => item == 1),
- 1
- )
- } else if (data.length > 1 && data.findIndex(item => item == 1) == data.length - 1) {
- data.splice(0, data.length - 1)
- } else if (data.length == 0) {
- data.push(1)
- } else if (data.length > 1 && data.findIndex(item => item == 5) == 0) {
- data.splice(
- data.findIndex(item => item == 5),
- 1
- )
- } else if (data.length > 1 && data.findIndex(item => item == 5) == data.length - 1) {
- data.splice(0, data.length - 1)
- }
- },
- unitTypeCheck(e) {
- console.log(e.target.value)
- if (e.target.value === 1) {
- this.imageCntMax = 8
- } else {
- this.imageCntMax = 15
- }
- },
- setImageCnt(e) {
- this.customUnitCntMax = e ? Math.floor(2000 / e) : 2000
- },
- creativeTagValid(rule, value, callback) {
- //console.log(rule, value, callback)
- if (value.length == 0 || value == undefined) {
- // //console.log(1)
- callback()
- } else if (value.length > 10) {
- callback('创意标签最多填写10个,请删减')
- } else {
- // //console.log(2)
- callback()
- }
- },
- cpaBidValid(rule, value, callback) {
- let z = /-/g
- let a = /\//g
- let d = /\./g
- if (value === '' || value === undefined || value === 0 || value === '0') {
- callback('出价必须填写')
- } else if (value.startsWith('.') || value.endsWith('.')) {
- callback('请填写正确出价')
- } else if (value.startsWith('-') || value.endsWith('-')) {
- callback('请填写正确出价')
- } else if (value.match(a) && value.match(z)) {
- callback('不允许出现除"-"和"/"之外的所有字符,并且二者不可同时出现')
- } else if (value.match(/[^0-9+-\/]/g)) {
- callback('请填写正确出价')
- } else {
- callback()
- }
- },
- deepBidValid(rule, value, callback) {
- let z = /-/g
- let a = /\//g
- let d = /\./g
- if (value === '' || value === undefined || value == 0 || value == '0') {
- callback()
- } else if (value.startsWith('.') || value.endsWith('.')) {
- callback('请填写正确出价')
- } else if (value.startsWith('-') || value.endsWith('-')) {
- callback('请填写正确出价')
- } else if (value.match(a) && value.match(z)) {
- callback('不允许出现除"-"和"/"之外的所有字符,并且二者不可同时出现')
- } else if (value.match(/[^0-9+-\/]/g)) {
- callback('请填写正确出价')
- } else {
- callback()
- }
- },
- getDataType(type, dataList) {
- this.getAction('/kuaishou/batch/getTargetList', { tagType: type }).then(res => {
- if (res.success) {
- if (dataList === 'businessOptions') {
- businessOptions = res.result
- } else if (dataList === 'optionsAppActive') {
- optionsAppActive = res.result
- } else if (dataList === 'fansStarOptions') {
- fansStarOptions = res.result
- } else if (dataList === 'interestVideoOptions') {
- interestVideoOptions = res.result
- }
- }
- })
- },
- setVideoData(data) {
- // checkPerson: [],
- // checkPersonAll: [],
- for (let i = 0; i < this.ipagination.current; i++) {
- this.checkPersonAll.push([])
- }
- this.checkPersonAll[this.ipagination.current - 1] = data
- var sum = 0
- for (let i = 0; i < this.checkPersonAll.length; i++) {
- sum += this.checkPersonAll[i].length
- }
- this.sumContent = sum
- var dataCount = 20
- if (sum > dataCount) {
- this.$message.error('最多选择' + dataCount + '个定向')
- this.checkPerson.pop()
- this.sumContent--
- this.checkPersonAll[this.ipagination.current - 1] = this.checkPerson
- }
- },
- cancel() {},
- removeVideoMaterial(index, id) {
- this.showCheckPerson.splice(index, 1)
- // id
- for (let i = 0; i < this.checkPersonAll.length; i++) {
- if (this.checkPersonAll[i].length > 0) {
- for (let j = 0; j < this.checkPersonAll[i].length; j++) {
- if (this.checkPersonAll[i][j] == id) {
- this.checkPersonAll[i].splice(j, 1)
- }
- }
- }
- }
- // this.materialList[index].photoArr.splice(indexMaterial, 1)
- },
- getDataSource(current, pageSize) {
- // 切换分页时的回调,
- // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
- this.ipagination.current = current
- this.ipagination.pageSize = pageSize
- this.checkPerson = this.checkPersonAll[current - 1]
- this.getTargetPerson()
- },
- disabledDate(current) {
- // Can not select days before today and today
- return current && current < moment().subtract(1, 'days')
- },
- disabledDateOne(current) {
- // Can not select days before today and today
- return current && current < moment().subtract(0, 'days')
- },
- filterOption(input, option) {
- return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
- },
- //目标应用编辑
- targetAppEdit() {
- this.targetAppVisible = true
- if (this.appDetail) {
- if (this.appDetail.schemaUri) {
- this.uriCheck = true
- }
- this.$nextTick(() => {
- this.formTargetApp.setFieldsValue({ ...this.appDetail })
- this.multipleBidDataDrawer = JSON.parse(JSON.stringify(this.multipleBidData))
- })
- }
- this.getAppList()
- },
- submitApp() {
- this.formTargetApp.validateFields((err, values) => {
- //console.log(values)
- if (!err) {
- this.appDetail = values
- this.multipleBidData = JSON.parse(JSON.stringify(this.multipleBidDataDrawer))
- this.targetAppVisible = false
- this.multipleBidDataDrawer = []
- this.closeUnit()
- } else {
- }
- })
- },
- closeUnit(form) {
- this.uriCheck = false
- this.targetAppVisible = false
- this.multipleBidDataDrawer = []
- this.formTargetApp.resetFields()
- },
- appIdChange(val) {
- // this.siteList = []
- // this.getPageList(val)
- this.multipleBidDataDrawer = []
- if (this.getFormData('formTargetApp', 'singleAppid') == 0) {
- if (val && val.findIndex(item => item.key === 0) > -1) {
- let appidArr = this.appList.map(item => {
- return {
- key: item.id,
- label:
- `${
- item.platform === 1
- ? 'Android应用下载'
- : item.platform === 2
- ? 'Android网页游戏'
- : item.platform === 3
- ? 'iOS应用下载'
- : 'iOS网页游戏'
- }` +
- '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
- item.appName +
- '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
- item.appVersion
- }
- })
- this.$nextTick(() => {
- this.formTargetApp.setFieldsValue({
- appId: appidArr
- })
- this.multipleBidDataDrawer = appidArr.map(item => {
- return {
- ...item,
- cpaBid: null,
- trackUrl: '',
- channelCode: '',
- appId: item.key,
- deepConversionBid: null
- }
- })
- })
- } else {
- this.$nextTick(() => {
- this.multipleBidDataDrawer = val.map(item => {
- return {
- ...item,
- cpaBid: null,
- trackUrl: '',
- channelCode: '',
- appId: item.key,
- deepConversionBid: null
- }
- })
- })
- }
- } else {
- if (val) {
- this.$nextTick(() => {
- // this.multipleBidDataDrawer = this.appList.filter(item => {
- // return item.id === val.key
- // })
- this.postDataAction('/kuaishouAppPackage/getAppsDetail', { apptemIds: [val.key] }).then(res => {
- if (res.success) {
- this.multipleBidDataDrawer = res.result
- }
- })
- })
- } else {
- this.multipleBidDataDrawer = []
- }
- }
- },
- onCellChange(key, dataIndex, value) {
- const dataSource = [...this.multipleBidDataDrawer]
- const target = dataSource.find(item => item.id === key)
- if (target) {
- target[dataIndex] = value
- this.multipleBidDataDrawer = dataSource
- let params = { id: key }
- if (dataIndex == 'impressionUrl') {
- params.impressionUrl = value
- } else if (dataIndex == 'tracUrl') {
- params.tracUrl = value
- }
- this.postDataAction('/kuaishouAppPackage/edit', params).then(res => {
- if (res.success) {
- console.log(res)
- }
- })
- }
- },
- addApplication() {},
- changeType(e) {
- console.log(e.target.value)
- this.appList = []
- if (e.target.value === 1) {
- this.appList = this.appListAll.filter(item => {
- return item.platform == 1 || item.platform == 2
- })
- this.formTargetApp.setFieldsValue({ appId: undefined })
- this.multipleBidDataDrawer = []
- } else if (e.target.value === 2) {
- this.appList = this.appListAll.filter(item => {
- return item.platform == 3 || item.platform == 4
- })
- this.formTargetApp.setFieldsValue({ appId: undefined })
- this.multipleBidDataDrawer = []
- }
- },
- getAppList() {
- let params = {}
- params.projectId = this.projectId
- this.getAction('/kuaishouAppPackage/getProjectAppList', params).then(res => {
- if (res.success) {
- this.appListAll = res.result.map((item, index) => {
- return {
- ...item,
- key: item.id
- }
- })
- if (this.getFormData('formTargetApp', 'platformOs') === 1) {
- this.appList = this.appListAll.filter(item => {
- return item.platform == 1 || item.platform == 2
- })
- } else if (this.getFormData('formTargetApp', 'platformOs') === 2) {
- this.appList = this.appListAll.filter(item => {
- return item.platform == 3 || item.platform == 4
- })
- }
- }
- })
- },
- //目标人群选择
- targetPersonCheck() {
- this.checkPerson = this.checkPersonAll[0]
- this.ipagination.current = 1
- this.sumContent = this.showCheckPerson.length
- this.targetPersonVisible = true
- this.getTargetPerson()
- },
- submitPerson() {
- var dataAll = tqFun(this.checkPersonAll)
- this.checkPerson = dataAll
- this.personLoading = true
- if (this.checkPerson.length > 0) {
- this.postDataAction('/kuaishouDirectionalPackage/getProjectTargetByIds', {
- ids: this.checkPerson
- }).then(res => {
- this.personLoading = false
- if (res.success) {
- this.showCheckPerson = res.result.map(item => {
- return {
- ...item,
- regionName: []
- }
- })
- for (let i = 0; i < this.showCheckPerson.length; i++) {
- if (
- this.showCheckPerson[i] &&
- (this.showCheckPerson[i].region == '' ||
- this.showCheckPerson[i].region == null ||
- JSON.parse(this.showCheckPerson[i].region).length == 0)
- ) {
- } else {
- // this.showRegion(this.personList[i].region, this.personList[i].regionName)
- let that = this
- new Promise((resolve, reject) => {
- this.postDataAction('/kuaishou/batch/getRegionDetail', {
- regionArr: that.showCheckPerson[i].region
- }).then(res => {
- if (res.success) {
- // this.populationData.allForm.region = res.result
- that.showCheckPerson[i].regionName = res.result.map(item => {
- return item.label
- })
- }
- })
- })
- }
- }
- this.targetPersonVisible = false
- }
- })
- } else if (this.checkPerson.length > 20) {
- this.personLoading = false
- this.$message.error('最多选择20个定向包')
- } else {
- this.personLoading = false
- this.$message.error('请选择定向包')
- }
- },
- closePerson(form) {
- this.targetPersonVisible = false
- this.checkPerson = []
- },
- getTargetPerson() {
- let params = {}
- params.pageSize = this.ipagination.pageSize
- params.pageNo = this.ipagination.current
- params.projectId = this.projectId
- params.templateName = this.searchTemplate
- this.getAction('/kuaishouDirectionalPackage/getProjectTarget', params).then(res => {
- if (res.success) {
- this.personList = res.result.list.map(item => {
- return {
- ...item,
- regionName: []
- }
- })
- for (let i = 0; i < this.personList.length; i++) {
- if (
- this.personList[i] &&
- (this.personList[i].region == '' ||
- this.personList[i].region == null ||
- JSON.parse(this.personList[i].region).length == 0)
- ) {
- } else {
- // this.showRegion(this.personList[i].region, this.personList[i].regionName)
- let that = this
- new Promise((resolve, reject) => {
- this.postDataAction('/kuaishou/batch/getRegionDetail', {
- regionArr: that.personList[i].region
- }).then(res => {
- if (res.success) {
- // this.populationData.allForm.region = res.result
- that.personList[i].regionName = res.result.map(item => {
- return item.label
- })
- }
- })
- })
- }
- }
- this.ipagination.total = res.result.total
- }
- })
- },
- showRegion(data, name) {
- return new Promise((resolve, reject) => {
- this.postDataAction('/kuaishou/batch/getRegionDetail', {
- regionArr: data
- }).then(res => {
- if (res.success) {
- // this.populationData.allForm.region = res.result
- name = res.result.map(item => {
- return item.label
- })
- }
- })
- })
- },
- //创意信息
- originalityEdit() {
- this.optimizeVisible = true
- this.getActionBarText()
- this.getAction('/ctop/userAllocation/getAccountListByProjectId', { projectId: this.projectId }).then(
- res => {
- if (res.success) {
- this.getAction('/kuaishou/batch/getCreativeCategory', {
- accountId: res.result[0].accountId
- }).then(result => {
- if (result.success) {
- //console.log(res)
- this.createOptions = result.result
- }
- })
- }
- }
- )
- this.$nextTick(() => {
- if (this.showCreativeData.unitType === 1) {
- this.imageCntMax = 8
- } else {
- this.imageCntMax = 15
- }
- this.formOriginality.setFieldsValue(this.showCreativeData)
- })
- },
- //设置通配符
- getChangeAll(type, form, field) {
- var node = document.getElementById(field)
- var v = '-{{' + type + '}}-'
- if (document.selection) {
- //IE
- node.focus()
- var sel = document.selection.createRange()
- sel.text = v
- sel.select()
- if (field == 'campaignName') {
- this[form].setFieldsValue({ campaignName: sel.text })
- } else if (field == 'groupName') {
- this[form].setFieldsValue({ groupName: sel.text })
- }
- } else if (node.selectionStart || node.selectionStart == '0') {
- //MOZILLA/GOOGLE
- var startPos = node.selectionStart
- var endPos = node.selectionEnd
- var restoreTop = node.scrollTop
- node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
- if (restoreTop > 0) {
- node.scrollTop = restoreTop
- }
- if (field == 'campaignName') {
- this[form].setFieldsValue({ campaignName: node.value })
- } else if (field == 'groupName') {
- this[form].setFieldsValue({ groupName: node.value })
- }
- node.focus()
- node.selectionStart = startPos + v.length
- node.selectionEnd = startPos + v.length
- // this.campaignName = node.value
- } else {
- //OTHER
- node.value += v
- // console.log(node.value)
- if (field == 'campaignName') {
- this[form].setFieldsValue({ campaignName: node.value })
- } else if (field == 'groupName') {
- this[form].setFieldsValue({ groupName: node.value })
- }
- node.focus()
- // this.campaignName = node.value
- }
- },
- //获取表单的某一个属性值
- getFormData(form, className) {
- return this[form].getFieldValue(className)
- },
- onScroll() {
- // var box = document.getElementById('box')
- // var t = document.documentElement.scrollTop || document.body.scrollTop
- // box.style.top = t + 'px'
- var jump = document.querySelectorAll('.step-jump')
- var distance =
- document.documentElement.scrollTop + 180 || window.pageYOffset + 180 || document.body.scrollTop + 180
- jump.forEach((item, index) => {
- if (distance >= item.offsetTop) {
- this.activeStep = index
- }
- })
- },
- // 锚点点击
- jump(index) {
- // console.log(index)
- this.activeStep = index
- // 用 class=".step-jump" 添加锚点,此时的类名要放在tr上,放在td上不对,
- // 以后做的时候要注意这点,不是表格的时候,如何放置锚点
- let jump = document.querySelectorAll('.step-jump')
- // 通过 offsetTop 获取对象到窗体顶部的距离,然后赋值给 scrollTop,就能实现锚点的功能
- let total = jump[index].offsetTop
- // console.log(total)
- // scrollTop滚动条距离页面的距离
- let distance = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
- // console.log(distance)
- // 平滑滚动,时长500ms,每10ms一跳,共50跳
- let step = total / 50
- if (total > distance) {
- smoothDown()
- } else {
- let newTotal = distance - total
- step = newTotal / 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;
- }
- </style>
|