123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947 |
- <style>
- .newDirectedPackage .ant-checkbox-group-item{
- width: 100%;
- display: block ;
- padding: 3px 0;
- margin-right: 0;
- padding: 5px 15px;
- }
- .newDirectedPackage .ant-checkbox-group-item:hover{
- background-color: rgba(0,0,0,.1);
- }
-
- </style>
- <style lang="scss" scoped>
- .newDirectedPackage{
- // background-color: #fff;
- .title{
- width: 100%;
- font-size: 20px;
- font-weight: 700;
- padding: 15px 0;
- text-align: center;
- border-bottom: 1px solid #eee;
- background-color: #fff;
- }
- .optBOX{
- background-color: #fff;
- padding: 15px 0;
- position: relative;
- .optItem{
- // margin-bottom: 15px;
- .typeName{
- width: 130px;
- text-align: right;
- display: inline-block;
- margin-right: 15px;
- }
- .tishi{
- display: block;
-
- color: #999;
- .tubiao{
- color: red;
- margin-right: 5px;
- }
- }
- #btngroup .ant-btn:hover{
- border-color: none;
- }
- .deviceBrand{
- // background: rgb(116, 76, 76);
- width: 100%;
- height: 300px;
- }
- .selectBox{
- display: flex;
- .title{
- background: #f9f9f9;
- font-size: 14px;
- font-weight: 700;
- padding:0 15px;
- border-bottom: 1px solid #ddd;
- text-align: left;
- position: relative;
-
- .clearAllBtn{
- position: absolute;
- top: 3px;
- right: 0;
- }
- }
- .selectLeft{
- width: 40%;
- margin-right: 2%;
- border: 1px solid #ddd;
- border-radius: 5px;
- }
- .selectRight{
- width: 20%;
- border: 1px solid #ddd;
- border-radius: 5px;
- }
- .selectBox1{
- height: 250px;
- overflow: auto;
-
- .selectList{
- display: block;
- width: 100%;
- // padding: 0 15px;
- // padding: 3px 0;
- }
- .selectLists{
- display: block;
- width: 100%;
- padding: 0 15px;
- }
- .selectLists:hover{
- background-color: rgba(0,0,0,.1);
- }
- .selectListitem{
- display: block;
- height: 25px;
- line-height: 25px;
- background-color: #eee;
- border-radius: 5px;
- padding: 0 10px;
- margin: 8px 10px;
- position: relative;
- #close{
- font-size: 12px;
- position: absolute;
- right: 10px;
- top: 5px;
- cursor: pointer;
- }
- }
- }
- }
- .zidingyirenqun{
- width: 60%;
- }
- }
- .rightBox{
- position: fixed;
- top: 22%;
- right: 20px;
- width: 230px;
- // height: 500px;
- max-height: 500px;
- border: 1px solid #ddd;
- border-radius: 10px;
- font-size: 12px;
- overflow: auto;
- .topBox,.bottomBox{
- padding: 10px 15px;
- background-color: #f9f9f9;
- border-bottom: 1px solid #eee;
- border-radius: 10px 10px 0 0;
- .title{
- background-color: #f9f9f9;
- font-size: 14px;
- text-align: left;
- margin: 0 0 10px;
- padding: 5px 0;
- font-weight: 400;
- border-bottom: 0;
- // border-radius: 10px;
- }
- .info p{
- margin-bottom: 6px;
- color: #999;
- }
- .info .num{
- color: #000;
- font-weight: 600;
- }
- }
- .bottomBox{
- background-color: #fff;
- border-bottom:0;
- .title{
- background-color: #FFF;
- }
- }
- }
-
- }
-
- }
- </style>
- <style lang="scss">
- .actionBottom{
- ul,li{
- margin: 0;
- padding: 0;
- list-style: none;
- }
- width: 70%;
- height: 400px;
- display:flex;
- margin-top: 20px;
- .action_left{
- width:60% ;
- margin-right: 2%;
- border: 1px solid #ccc;
- border-radius: 5px;
- padding: 10px 2px;
- .Taxonomic{
- padding: 0 10px;
- .Taxonomic_checkbox{
- margin-top: 10PX;
- height: 220px;
- border: 1px solid #ccc;
- border-radius: 5px;
- }
-
- .Taxonomic_relevant{
- font-size: 12px;
- margin-top: 10px;
- .Taxonomic_relevant_top{
- position: relative;
- display: block;
- height: 20px;
- line-height: 20px;
- .Taxonomic_relevant_top_more{
- position: absolute;
- top: 0;
- right: 0;
- font-size: 12px;
- display: block;
- height: 20px;
- line-height: 20px;
- }
- }
- .Taxonomic_relevant_bottom{
- display: block;
- height: 20px;
- line-height: 20px;
- .Taxonomic_relevant_bottom_item{
- margin-right: 5px;
- }
- }
- }
- }
- .keyWords_box_title{
- font-size: 16px;
- font-weight: 600;
- color: #000;
- height: 35px;
- line-height: 35px;
- background-color: rgb(248,249,250);
- }
- .keyWords_box_list{
- height: 185px;
- overflow: auto;
- li{
- height: 30px;
- line-height: 30px;
- font-size: 14px;
- color: #333;
- .caozuo{
- display: none;
- // display: inline-block;
- width:50%;
- text-align: right;
- .delete{
- margin-left: 5px;
- }
- .searchKeyWord{
- margin-left: 15px;
- }
- }
- .mingzi{
- display: inline-block;
- width: 30%;
-
- }
- .renshu{
- display: inline-block;
- width: 15%;
- line-height: 30px;
- height: 30px;
- }
- }
- }
- .keyWords_box_list li:hover .caozuo{
- display: inline-block;
- }
- }
- .action_right{
- width: 35%;
- height: 100%;
- border-radius: 5px;
- border: 1px solid #ccc;
- .action_right_title{
- background-color: rgb(248,249,250);
- padding: 10px 10px 0;
- border-radius: 5px 5px 0 0;
- border-bottom: 1px solid #ccc;
- position: relative;
- }
- .action_right_sum{
- display: block;
- margin-bottom: 5px;
- height: 20px;
- line-height: 20px;
- font-size: 14px;
- color: #333;
- }
- .action_right_info{
- display: block;
- margin-bottom: 5px;
- height: 20px;
- line-height: 20px;
- font-size: 14px;
- color: #999;
- }
- .action_right_btn{
- position: absolute;
- top: 0px;
- right: -5px;
- }
- .action_right_bottom{
-
- .action_right_option{
-
- border-bottom: 1px solid #ccc;
- }
- .ant-select-selection{
- border: 0;
- }
- .coverPeople{
- margin-left: 5px;
- }
- .caozuo{
- display: none;
- .delete{
- margin-left: 5px;
- }
- .searchKeyWord{
- margin-left: 2px;
- }
- }
- .mingzi{
- display: inline-block;
- width: 70px;
-
- }
- .renshu{
- display: inline-block;
- width: 40px;
- line-height: 20px;
- height: 20px;
- }
- .action_right_select_list{
- padding: 5px 10px;
- height: 250px;
- overflow: auto;
- }
- .action_right_select_list li{
- line-height: 20px;
- height: 20px;
- }
- .action_right_select_list li:hover .caozuo{
- display: inline-block;
- }
- .action_right_AISelect{
- height: 30px;
- line-height: 30px;
- font-size: 14px;
- padding: 5px 10px;
- border-top: 1px solid #ccc;
- }
- }
- }
- }
- .ant-tooltip-inner,.ant-tooltip,.ant-tooltip-arrow::before{
- background-color: #fff;
- color: #666;
- font-size: 12px;
- }
- </style>
- <style lang="scss">
- .region{
- width: 70%;
- margin-top: 10px;
- .region_input{
- width: 60%;
- }
- .ant-tabs-bar{
- border: 0;
- }
- }
- </style>
- <template>
- <div class="newDirectedPackage">
- <div class="title" v-if="!isNewPlan">
- {{title}}
- </div>
- <div class="optBOX">
- <div class="leftBox">
- <a-form :form="form">
- <a-form-item label="定向包名称" :label-col="labelCol" :wrapper-col="wrapperCol">
- <a-input placeholder="请输入定向包名称,至多20个字符" style="width:40%" v-decorator="['name', { rules: [{ required: true, message: '请输入定向包名称' }] }]" />
- </a-form-item>
- <a-form-item label="定向包类型" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="!isNewPlan">
- <a-radio-group v-decorator="['landingType', { initialValue:'EXTERNAL' }]" @change='landingTypeChange' button-style="solid">
- <a-radio-button value="EXTERNAL">落地页</a-radio-button>
- <a-radio-button value="APP_ANDROID">应用下载-安卓</a-radio-button>
- <a-radio-button value="APP_IOS">应用下载-IOS</a-radio-button>
- <!-- <a-radio-button value="AWEME">抖音推广</a-radio-button> -->
- </a-radio-group>
- </a-form-item>
- <a-form-item label="投放范围" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="!isNewPlan">
- <a-radio-group v-decorator="['deliveryRange', { initialValue:'DEFAULT' }]" @change='landingTypeChange' button-style="solid">
- <a-radio-button value="DEFAULT">默认</a-radio-button>
- <a-radio-button value="UNION">穿山甲
- <a-tooltip>
- <template slot="title">
- 基于4亿日活跃用户大数据积累,顶尖AI智能推荐技术,今日头条与最广泛的合作伙伴携手打造全新移动生态联盟
- </template>
- <a-icon type="question-circle" />
- </a-tooltip>
- </a-radio-button>
-
- </a-radio-group>
- </a-form-item>
- <div v-show="showDirectedPackage">
- <a-form-item label="媒体" :label-col="labelCol" :wrapper-col="wrapperCol">
- <a-radio-group v-decorator="['medialType', { initialValue:1 }]" button-style="solid">
- <a-radio-button :value="1">头条</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item label="地域" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
- <a-radio-group button-style="solid" v-model="regionValue">
- <a-radio-button value="NONE">不限</a-radio-button>
- <a-radio-button value="CITY">按省市</a-radio-button>
- <a-radio-button value="COUNTY">按区县</a-radio-button>
- <!-- <a-radio-button value="BUSINESS_DISTRICT>按商圈</a-radio-button> -->
- </a-radio-group>
- <div class="region" v-show="regionValue!='NONE'">
- <!-- 省市 -->
- <div class="provincyCity" v-if="regionValue=='CITY'">
- <div class="region_input">
- <!-- <a-input-search placeholder="输入搜索的省市" enter-button /> -->
- </div>
- <div class="tabChange">
- <div class="tabBox">
- <a-tabs v-model="cityTab" @change="cityTabChange">
- <a-tab-pane key="geography" tab="地理划分">
- <linkMultiSelect title='省份' :listArr='[]' :maxLayers='2' :listUrl='regionCityListUrl' @getSelectedArr='getSelectedCityArr'/>
- </a-tab-pane>
- <!-- <a-tab-pane key="development" tab="发展划分" >
- <linkMultiSelect title='等级' :listArr='[]' url='' :maxLayers='3' :listUrl='regionCityListUrl' @getSelectedArr='getSelectedCityArr'/>
- </a-tab-pane> -->
- </a-tabs>
- </div>
- </div>
- </div>
- <!-- 区县 -->
- <div class="district" v-else-if="regionValue=='COUNTY'">
- <linkMultiSelect title='省份' :listArr='[]' :maxLayers='3' :listUrl='regionCityListUrl' @getSelectedArr='getSelectedCountyArr'/>
- </div>
- <!-- 商圈 -->
- <!-- <div class="businessCircle" v-else>
- <div class="tabChange">
- <div class="tabBox">
- <a-tabs v-model="businessTab" @change="businessTabChange">
- <a-tab-pane key="businessCircle" tab="商圈">
- <a-cascader :options="businessOptionsArr" change-on-select @change="businessChange" />
- <linkMultiSelect :titleArr='["商圈"]' :listArr='[]' @getSelectedArr='getSelectedCityArr'/>
- </a-tab-pane>
- <a-tab-pane key="addFromMap" tab="从地图添加" >
- <a-input-search placeholder="请输入搜索地址" v-model="MapselectValue" @search="MapSearch">
- <a-button slot="enterButton">
- 搜索
- </a-button>
- </a-input-search>
- </a-tab-pane>
- </a-tabs>
- </div>
- </div>
- </div> -->
- <div class="region_people">
- <a-radio-group v-model="regionPeopleValue" v-decorator="['locationType', { initialValue:'HOME' }]" >
- <a-radio value="HOME">居住在该地区的用户</a-radio>
- <a-radio value="TRAVEL"> 到该地区旅行的用户</a-radio>
- <a-radio value="ALL">该地区内的所有用户</a-radio>
- <a-radio value="CURRENT">正在该地区的用户</a-radio>
- </a-radio-group>
- </div>
- </div>
- </a-form-item>
- <a-form-item label="性别" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
- <a-radio-group v-decorator="['gender', {initialValue:'NONE' }]" button-style="solid">
- <a-radio-button value="NONE">不限</a-radio-button>
- <a-radio-button value="GENDER_MALE">男</a-radio-button>
- <a-radio-button value="GENDER_FEMALE">女</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item label="年龄" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
- <radioCheck :checkArr='ageArr' @getSonValue='getAgeSelect' />
- </a-form-item>
- <a-form-item label="精选流量包" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
- <a-radio-group button-style="solid" v-decorator="['trafficPackage', { initialValue:'NONE'}]">
- <a-radio-button value="NONE">不限</a-radio-button>
- <a-radio-button value="men" :disabled='getFormData("deliveryRange")!="UNION"'>应用软件精选</a-radio-button>
- <a-radio-button value="women" :disabled='getFormData("deliveryRange")!="UNION"'>游戏精选</a-radio-button>
- </a-radio-group>
- <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />精选流量包仅支持穿山甲、穿山甲-精选游戏广告位</span>
- </a-form-item>
- <a-form-item label="自定义人群" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="accountInfo.value!=undefined">
- <a-radio-group v-model="customCrowd" button-style="solid">
- <a-radio-button value="NONE">不限</a-radio-button>
- <a-radio-button value="CUSTOMt_CROWED">自定义人群</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item label="定向逻辑" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="customCrowd=='CUSTOMt_CROWED'">
- <a-radio-group v-model="directLogic" button-style="solid" @change="directLogicChange">
- <a-radio-button value="RETARGETING_INCLUDE">定向</a-radio-button>
- <a-radio-button value="RETARGETING_EXCLUDE">排除</a-radio-button>
- <a-radio-button value="ALL">同时定向排除</a-radio-button>
- </a-radio-group>
- <div class="zidingyirenqun" v-if="customCrowd=='CUSTOMt_CROWED'">
- <!-- <a-input placeholder="请输入人群包名称或者ID" v-model="dxInputValue" v-if="directLogic!='ALL'" style="width:50%;margin:15px 0">
- <a-icon type="search" slot="addonAfter"/>
- </a-input> -->
- <div class="dingxiang" v-if="directLogic=='RETARGETING_INCLUDE'">
- <a-table
- :columns="retargetColumns"
- :row-key="record => record.key"
- :data-source="retargetData"
- :loading="loading"
- style="width:60%;margin:15px 0"
- :pagination='false'
- @change="retargetTableChange"
- bordered
- :scroll="{ y: 250 }"
- :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
- >
- <template slot="name" slot-scope="name,records"> {{ name }}({{records.key}}) </template>
- </a-table>
- </div>
- <div class="paichu" v-if="directLogic=='RETARGETING_EXCLUDE'">
- <a-table
- :columns="retargetColumns"
- :row-key="record => record.key"
- :data-source="retargetData"
- :loading="loading"
- style="width:60%;margin:15px 0"
- :pagination='false'
- @change="retargetTableChange"
- :scroll="{ y: 250 }"
- :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
- bordered
- >
- <template slot="name" slot-scope="name,records"> {{ name }}({{records.key}}) </template>
- </a-table>
- </div>
- <div class="dingxiang_paichu" v-if="directLogic=='ALL'" style="width:60%">
- <a-tabs default-active-key="1" @change="retargetTabChange" >
- <a-tab-pane key="1" tab="定向池">
- <a-table
- :columns="retargetColumns"
- :row-key="record => record.key"
- :data-source="retargetDataAll"
- :loading="loading"
- style="width:100%;margin:15px 0"
- :pagination='false'
- @change="retargetTableChange"
- :scroll="{ y: 250 }"
- :row-selection="rowSelection"
- bordered
- >
- <template slot="name" slot-scope="name,records"> {{ name }}({{records.key}}) </template>
- </a-table>
- </a-tab-pane>
- <a-tab-pane key="2" tab="排除池" >
- <a-table
- :columns="retargetColumns"
- :row-key="record => record.key"
- :data-source="retargetDataAll"
- :loading="loading"
- style="width:100%;margin:15px 0"
- :pagination='false'
- @change="retargetTableChange"
- :scroll="{ y: 250 }"
- :row-selection="rowSelection2"
- bordered
- >
- <template slot="name" slot-scope="name,records"> {{ name }}({{records.key}}) </template>
- </a-table>
- </a-tab-pane>
-
- </a-tabs>
-
- </div>
- </div>
- </a-form-item>
-
- <a-form-item label="行为兴趣" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
- <a-radio-group v-model="interestActionMode" button-style="solid">
- <a-radio-button value="UNLIMITED">不限</a-radio-button>
- <a-radio-button value="RECOMMEND">
- 系统推荐
- <a-tooltip>
- <template slot="title">
- 如与自定义人群包同时使用,系统推荐不生效
- </template>
- <a-icon type="question-circle" />
- </a-tooltip>
- </a-radio-button>
- <!-- <a-radio-button value="CUSTOM">自定义</a-radio-button> -->
- </a-radio-group>
-
- </a-form-item>
- <div class="interestActionMode" v-show="interestActionMode=='CUSTOM'">
- <a-form-item label="行为" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
- <div>
- <span style="margin-right:5px">在</span>
- <a-select
- mode="multiple"
- label-in-value
- style="width: 210px"
- placeholder="所有行为场景中"
- @change="actionSceneChange"
- :maxTagCount='1'
- >
- <a-select-option value='E-COMMERCE'> 电商互动行为</a-select-option>
- <a-select-option value='NEWS'> 咨询互动行为</a-select-option>
- <a-select-option value='APP'> APP推广行为</a-select-option>
- </a-select>
- <span>中,选择用户</span>
- <a-select v-model="actionDays" style="width: 90px">
- <a-select-option :value='7'>7天 </a-select-option>
- <a-select-option :value='15'>15天 </a-select-option>
- <a-select-option :value='30'>30天 </a-select-option>
- <a-select-option :value='60'>60天 </a-select-option>
- <a-select-option :value='90'>90天 </a-select-option>
- <a-select-option :value='180'>180天 </a-select-option>
- <a-select-option :value='365'>365天 </a-select-option>
- </a-select>
- <span>内发生的行为:</span>
- </div>
- <div class="actionBottom">
- <div class="action_left">
- <a-tabs default-active-key="1" >
- <a-tab-pane key="1" tab="添加类目词">
- <div class="Taxonomic">
- <div class="Taxonomic_search">
- <a-input-search placeholder="请输入行为类目词" style="width: 100%" @search="TaxonomicSearch" />
- </div>
- <div class="Taxonomic_checkbox">
- </div>
- <div class="Taxonomic_relevant">
- <span class="Taxonomic_relevant_top">
- <span class="Taxonomic_relevant_top_title">{{}}相关词:</span>
- <a-button type='link' class="Taxonomic_relevant_top_more">更多></a-button>
- </span>
-
- <span class="Taxonomic_relevant_bottom">
- <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+游戏</a>
- <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+手游</a>
- <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+王者荣耀</a>
- <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+吃鸡</a>
- </span>
- </div>
- </div>
- </a-tab-pane>
- <a-tab-pane key="2" tab="添加关键词" >
- <div class="Taxonomic keyWord">
- <div class="Taxonomic_search">
- <a-input-search placeholder="请输入行为类目词或关键词" style="width: 100%" @search="keyWordSearch" />
- </div>
- <div class="Taxonomic_checkbox keyWords_box">
- <div class="keyWords_box_title">
- {{}}
- </div>
- <ul class="keyWords_box_list">
- <li>
- <span class="mingzi">游戏</span>
- <span class="renshu">21亿</span>
- <span class="caozuo" >
- <a href="javascript:;" class="addKeywords">添加</a>
- <a href="javascript:;" class="searchKeyWord">查关键词</a>
- </span>
- </li>
- </ul>
- </div>
- <div class="Taxonomic_relevant">
- <span class="Taxonomic_relevant_top">
- <a href="javascript:;" class="Taxonomic_relevant_bottom_item">添加全部“{{}}”相关词</a>
- </span>
- </div>
- </div>
- </a-tab-pane>
- </a-tabs>
- </div>
- <div class="action_right">
- <div class="action_right_title">
- <span class="action_right_sum">还可以添加行为:{{}}个</span>
- <span class="action_right_info">
- <span>类目词:{{}}</span>
- <span>关键词:{{}}</span>
- </span>
- <a-button type='link' class="action_right_btn clearAllBtn">清空</a-button>
- </div>
- <div class="action_right_bottom">
- <div class="action_right_option">
- <a-select v-model="actOrint" style="width: 80px;" >
- <a-select-option value="all">
- 全部
- </a-select-option>
- <a-select-option value="lucy">
- 类目词
- </a-select-option>
- <a-select-option value="disabled" >
- 关键词
- </a-select-option>
- </a-select>
- <span class="coverPeople">覆盖人数</span>
- </div>
- <div class="action_right_select_list">
- <ul>
- <li>
- <span class="mingzi">游戏</span>
- <span class="renshu">21亿</span>
- <span class="caozuo" >
- <a href="javascript:;" class="delete">删除</a>
- <a href="javascript:;" class="searchKeyWord">查关键词</a>
- </span>
- </li>
- <li>
- <span class="mingzi">游戏</span>
- <span class="renshu">21亿</span>
- <span class="caozuo" >
- <a href="javascript:;" class="delete">删除</a>
- <a href="javascript:;" class="searchKeyWord">查关键词</a>
- </span>
- </li>
- </ul>
- </div>
- <div class="action_right_AISelect">
- <a-tooltip class="actionTooltip">
- <template slot="title">
- 已添加的行为关键词需大于20个,才可以使用自动选词
- </template>
- <a-button type='link' :disabled='AIselect'>使用自动选词</a-button>
-
- </a-tooltip>
- <a-tooltip class="actionTooltip">
- <template slot="title">
- 系统根据行为定向所有已选结果,自动推荐词包
- </template>
- <a-icon type="question-circle" />
- </a-tooltip>
- </div>
- </div>
- </div>
- </div>
- </a-form-item>
- <a-form-item label="兴趣" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
- </a-form-item>
- </div>
- <a-form-item label="平台" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
- <radioCheck :checkArr='platformArr' @getSonValue='getPlatForm' />
- </a-form-item>
- <a-form-item label="过滤已安装" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="landingTypeValue=='APP_ANDROID'">
- <a-radio-group button-style="solid" v-decorator="['hideIfExists', {initialValue:0 }]" >
- <a-radio-button :value='0'>不过滤</a-radio-button>
- <a-radio-button :value="1">过滤</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item label="安卓版本" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="landingTypeValue=='APP_ANDROID'">
- <a-select style="width: 200px" v-decorator="['androidOsv', {initialValue:'0.0' }]" @change="androidOsvChange">
- <a-select-option v-for="(item,index) in androidOsvArr" :key="index" :value='item.value'>
- {{item.label}}
- </a-select-option>
- </a-select>
- </a-form-item>
- <a-form-item label="IOS版本" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="landingTypeValue=='APP_IOS'">
- <a-select style="width: 200px" v-decorator="['iosOsv', {initialValue:'0.0' }]" @change="iosOsvChange">
- <a-select-option v-for="(item,index) in iosOsvArr" :key="index" :value='item.value'>
- {{item.label}}
- </a-select-option>
- </a-select>
- </a-form-item>
- <a-form-item label="过滤已转化用户" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
- <a-radio-group v-decorator="['filterConvertedUsers', {initialValue:'NO_EXCLUDE' }]" button-style="solid">
- <a-radio-button value="NO_EXCLUDE">不过滤</a-radio-button>
- <a-radio-button value="AD">广告计划</a-radio-button>
- <a-radio-button value="CAMPAIGN">广告组</a-radio-button>
- <a-radio-button value="ADVERTISER">广告账户</a-radio-button>
- </a-radio-group>
- <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />过滤已转化不支持投放目标为展示、点击计划,不支持受众预估
- </span>
- </a-form-item>
- <a-form-item label="运营商" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
- <radioCheck :checkArr='carrierArr' @getSonValue='getCarrier' />
- </a-form-item>
- <a-form-item label="网络" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
- <radioCheck :checkArr='networkArr' @getSonValue='getAc' />
- </a-form-item>
- <a-form-item label="文章类型" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
- <a-radio-group button-style="solid" v-model="articleType" @change="articleTypeChange">
- <a-radio-button value="">不限</a-radio-button>
- <a-radio-button value="articleCategory">文章分类</a-radio-button>
- </a-radio-group>
- <div v-show="articleType=='articleCategory'" class="deviceBrand">
- <singleLayersSelecte title='文章类型' :checked='articleChecked' :listArr='articleCategoryOptions' @getCheckedList='getArticleCategory'/>
- </div>
- </a-form-item>
- <a-form-item label="手机品牌" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
- <a-radio-group v-model="deviceBrandType" button-style="solid" @change="deviceBrandTypeChange">
- <a-radio-button value="">不限</a-radio-button>
- <a-radio-button value="byBrand">按品牌</a-radio-button>
- </a-radio-group>
- <div v-if="deviceBrandType=='byBrand'" class="deviceBrand">
- <singleLayersSelecte title='手机品牌' :listArr='deviceBrandOptions' :checked='brandChecked' @getCheckedList='getDeviceBrand' />
- </div>
- </a-form-item>
- <a-form-item label="手机价格" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
- <a-radio-group v-model="launchPrice" button-style="solid">
- <a-radio-button value="">不限</a-radio-button>
- <a-radio-button value="custom">自定义</a-radio-button>
- </a-radio-group>
- <span v-if="launchPrice=='custom'">
- <a-slider range :marks="marks" v-model='launchPriceArr' :step="null" :min='0' :max='11000' @change="slideChange" />
- </span>
- <span v-else></span>
- </a-form-item>
- <a-form-item label="新用户" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
- <radioCheck :checkArr='newUser' @getSonValue='getNewUser' />
- </a-form-item>
- <a-form-item label="智能放量" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
- <a-radio-group v-model="autoExtendEnabled" button-style="solid" @change="zhinengChange" >
- <a-radio-button :value="0">不启用</a-radio-button>
- <a-radio-button :value="1">启用</a-radio-button>
- </a-radio-group>
- <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />智能放量不支持受众预估</span>
- <div v-if="autoExtendEnabled==1" class="deviceBrand">
- <singleLayersSelecte title='可放开定向' :listArr='autoExtendOptions' :checked='autoExtendTargetsChecked' @getCheckedList='getAutoExtendEnabled'/>
- </div>
- </a-form-item>
-
- </div>
- <a-form-item :wrapper-col="{ span: 14, offset: 10 }" :label-col="labelCol" v-show="!isNewPlan">
-
- <a-button style="margin-right: 30px;" @click="cancel">
- 取消
- </a-button>
- <a-button type="primary" @click="applicatiSubmit">
- {{title=='新建定向包'? '创建': '修改'}}
- </a-button>
- </a-form-item>
- <a-form-item :wrapper-col="{ span: 14, offset: 10 }" :label-col="labelCol" v-show="isNewPlan">
- <a-button style="margin-right: 30px;" @click="tijiaozhi" type='primary'>
- {{showDirectedPackage ?' 选择完毕,收起':'展开'}}定向包
- </a-button>
- </a-form-item>
-
- </a-form>
- </div>
- <!-- <div class="rightBox">
- <div class="topBox">
- <p class="title">预估可覆盖</p>
- <div class="info">
- <p>抖音视频:<span class="num">{{}}</span>万日活跃用户</p>
- <p>西瓜视频:<span class="num">{{}}</span>万日活跃用户</p>
- <p>火山视频:<span class="num">{{}}</span>万日活跃用户</p>
- <p>今日头条:<span class="num">{{}}</span>万日活跃用户</p>
- </div>
- </div>
- <div class="bottomBox">
- <p class="title">受众信息</p>
- <div class="info">
- <p>性别:<span class="num">{{}}</span></p>
- <p>年龄:<span class="num">{{}}</span></p>
- <p>平台:<span class="num">{{}}</span></p>
- <p>网络:<span class="num">{{}}</span></p>
- <p>运营商:<span class="num">{{}}</span></p>
- <p>新用户:<span class="num">{{}}</span></p>
- <p>手机品牌:<span class="num">{{}}</span></p>
- </div>
- </div>
- </div> -->
- </div>
- </div>
- </template>
- <script>
- import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
- const plainOptions = ['Apple', 'Pear', 'Orange','44','550','9982','5525'];
- const defaultCheckedList = ['Apple', 'Orange'];
- import radioCheck from './radioCheck';
- import linkMultiSelect from './linkMultiSelect'
- import singleLayersSelecte from './singleLayerSelecte'
- let newUser=[
- {
- value:'',
- title:'不限',
- checked:false,
- },
- {
- value:'WITH_IN_A_MONTH',
- title:'一月以内',
- checked:false,
- },
- {
- value:'ONE_MONTH_2_THREE_MONTH',
- title:'一月到三个月',
- checked:false,
- },
- {
- value:'THREE_MONTH_EAILIER',
- title:'三月以上',
- checked:false,
- }
- ]
- let networkArr=[
- {
- value:'',
- title:'不限',
- checked:false,
- },
- {
- value:'WIFI',
- title:'WIFI',
- checked:false,
- },
- {
- value:'2G',
- title:'2G',
- checked:false,
- },
- {
- value:'3G',
- title:'3G',
- checked:false,
- },
- {
- value:'4G',
- title:'4G',
- checked:false,
- },
- ]
- let carrierArr=[
- {
- value:'',
- title:'不限',
- checked:false,
- },
- {
- value:'MOBILE',
- title:'移动',
- checked:false,
- },
- {
- value:'UNICOM',
- title:'联通',
- checked:false,
- },
- {
- value:'TELCOM',
- title:'电信',
- checked:false,
- },
- ]
- let platformArr=[
- {
- value:'',
- title:'不限',
- disabled:false
- },
- {
- value:'ANDROID',
- title:'Android',
- disabled:false
- },
- {
- value:'IOS',
- title:'iOS',
- disabled:false
- },
-
- ]
- let ageArr=[
- {
- value:'',
- title:'不限',
- checked:false,
-
- },
- {
- value:'AGE_BETWEEN_18_23',
- title:' 18-23岁',
- checked:false,
- },
- {
- value:'AGE_BETWEEN_24_30',
- title:'24-30岁',
- checked:false,
- },
- {
- value:'AGE_BETWEEN_31_40',
- title:'31-40岁',
- checked:false,
- },
- {
- value:'AGE_BETWEEN_41_49',
- title:'41-49岁',
- checked:false,
- },
- {
- value:'AGE_ABOVE_50',
- title:'大于等于50岁',
- checked:false,
- },
- ]
- let options=[
- {
- value: 'zhejiang',
- label: 'Zhejiang',
- children: [
- {
- value: 'hangzhou',
- label: 'Hangzhou',
- children: [
- {
- value: 'xihu',
- label: 'West Lake',
- },
- ],
- },
- ],
- },
- {
- value: 'jiangsu',
- label: 'Jiangsu',
- children: [
- {
- value: 'nanjing',
- label: 'Nanjing',
- children: [
- {
- value: 'zhonghuamen',
- label: 'Zhong Hua Men',
- },
- ],
- },
- ],
- },
- ];
- let autoExtendOptions=[
- {
- label:'地域',
- value:'REGION',
-
- },
- {
- label:'性别',
- value:'GENDER',
-
- },
- {
- label:'年龄',
- value:'AGE',
-
- },
- {
- label:'行为兴趣',
- value:'INTEREST_ACTION',
-
- },
- {
- label:'自定义人群',
- value:'CUSTOM_AUDIENCE',
-
- },
- ]
- let retargetColumns=[
- {
- title: '人群包',
- dataIndex: 'name',
- sorter: true,
- width: '80%',
- scopedSlots: { customRender: 'name' },
- },
- {
- title: '属性',
- dataIndex: 'tag',
- filters: [
- { text: '自定义', value: 'male' },
- { text: '系统推荐', value: 'female' },
- { text: '第三方', value: 'femal' },
- ],
- width: '20%',
- },
-
- ]
- export default {
- props:{
- isNewPlan:{
- default:false
- },
- id:{
- type:Number
- }
- },
- watch: {
- id(n,o){
- // console.log(n,o)
- if(n!=o){
- this.title='修改定向包';
- this.editId=this.id
- getAction('/ctop/audiencePackage/queryById',{
- id:this.editId
- }).then((res)=>{
- // console.log(res);
- this.form.setFieldsValue({
- name:res.result.name,
- landingType:res.result.landingType,
- deliveryRange:res.result.deliveryRange,
- gender:res.result.gender,
-
- filterConvertedUsers:res.result.filterConvertedUsers,
- })
- if(res.result.landingType=='APP_ANDROID'){
- this
- }
- this.autoExtendEnabled=res.result.autoExtendEnabled,
- this.interestActionMode=res.result.interestActionMode;
- this.ageArr=[];
- this.ageArr=JSON.parse(JSON.stringify(ageArr))
- // this.platformArr=[];
- // this.platformArr=JSON.parse(JSON.stringify(platformArr))
- this.carrierArr=[];
- this.carrierArr=JSON.parse(JSON.stringify(carrierArr))
- this.newUser=[];
- this.newUser=JSON.parse(JSON.stringify(newUser))
- this.networkArr=[];
- this.networkArr=JSON.parse(JSON.stringify(networkArr))
- res.result.age.forEach((item,index)=>{
- this.ageArr.forEach((ele)=>{
- if(ele.value==item){
- ele.checked=true;
- }
- })
- });
- // res.result.platform.forEach((item,index)=>{
- // this.platformArr.forEach((ele)=>{
- // if(ele.value==item){
- // ele.checked=true;
- // }
- // })
- // });
- if(res.result.landingType=='APP_ANDROID'){
- this.platformArr.forEach((item)=>{
- if(item.value!="ANDROID"){
- item.disabled=true
- }else{
- item.disabled=false
- }
- })
- }else if(res.result.landingType=='APP_IOS'){
- this.platformArr.forEach((item)=>{
- if(item.value!="IOS"){
- item.disabled=true
- }else{
- item.disabled=false
- }
- })
- }else{
- this.platformArr.forEach((item)=>{
- item.disabled=false
-
- })
- }
-
- res.result.carrier.forEach((item,index)=>{
- this.carrierArr.forEach((ele)=>{
- if(ele.value==item){
- ele.checked=true;
- }
- })
- });
- res.result.ac.forEach((item,index)=>{
- this.networkArr.forEach((ele)=>{
- if(ele.value==item){
- ele.checked=true;
- }
- })
- });
- res.result.activateType.forEach((item,index)=>{
- this.newUser.forEach((ele)=>{
- if(ele.value==item){
- ele.checked=true;
- }
- })
- });
- if(res.result.articleCategory.length){
- this.articleType='articleCategory';
- this.articleChecked=[];
- this.articleChecked=res.result.articleCategory
- }else{
- this.articleType=''
- }
- if(res.result.deviceBrand.length){
- this.deviceBrandType='byBrand';
- this.brandChecked=res.result.deviceBrand
- }else{
- this.deviceBrandType=''
- }
- if(res.result.autoExtendTargets.length>0){
- this.autoExtendTargetsChecked=res.result.autoExtendTargets
- }else{
- this.autoExtendTargetsChecked=[];
- }
-
- if(res.result.launchPrice.length>0){
- this.launchPrice='custom';
- this.launchPriceArr=res.result.launchPrice
- }else{
- this.launchPrice=''
- }
- })
- }
- }
- },
- name:'newDirectedPackage',
- components:{
- radioCheck,
- linkMultiSelect,
- singleLayersSelecte
- },
- data() {
- return {
- selectedRowKeys:[],
- incluedSelectedRowKeys:[],
- excludeSelectedRowKeys:[],
- accountInfo:{},//账户信息
- // 自定义人群参数
- retargetColumns,
- retargetData:[],
- retargetDataAll:[],
- loading:false,
- showDirectedPackage:true,
- title:'新建定向包',
- labelCol: { span: 6 },
- wrapperCol: { span: 14 },
- launchPrice:'',//手机价格
- launchPriceArr:[2000, 7000],
- deviceBrandType:'',
- deviceBrand:[],//手机品牌
- deviceBrandOptions:[],
- form: this.$form.createForm(this),
-
- marks: {
- 0: '0',
- 1000: '',
- 2000: '2000元',
- 2500: '',
- 3000: '',
- 3500: '',
- 4000: '',
- 4500: '',
- 5000: '5000元',
- 5500: '',
- 6000: '',
- 6500: '',
- 7000: '',
- 8000: '',
- 9000: '',
- 10000: '10000元',
- 11000: {
- style: {
- color: '#f50',
- },
- label: <strong>11000元</strong>,
- },
- },
- //选择框
- // checkedList: defaultCheckedList,
- // indeterminate: true,
- // checkAll: false,
- // plainOptions,
- newUser,//新用户的每一项值
- networkArr,//网络
- carrierArr,//运营商
- ageArr,//受众年龄
- platformArr,//受众平台
- //地域下的人群的受众位置分类
- regionPeopleValue:'HOME',
- regionValue:'NONE',//地域的选择项
- cityTab:'geography',//省市下的tab切换
- businessTab:'businessCircle',//商圈的tab值
- businessOptionsArr:[],//商圈的联动数据
- MapselectValue:undefined,//地图的搜索地址
- //行为兴趣选择
- interestActionMode:'UNLIMITED',
- actionScene:[],//行为场景
- actionDays:30,//行为天数
- actOrint:'all',
- TaxonomicValue:undefined,//行为下的类目词
- keyWordValue:undefined,//行为下的关键词
- AIselect:true,//行为下的自动选词是否可用
- regionCityListUrl:'ctop/bytedanceAreaInfo/list',
- regionCountyListUrl:'ctop/bytedanceAreaInfo/list',
- articleType:'',//文章分类
- // flowPacket:true,//默认精选流量包不可修改 只有穿山甲是才可以修改
- autoExtendEnabled:0,//智能放量是否开启
- autoExtendOptions,//智能投放可选定向数组
- autoExtendTargets:[],//智能放量开启后的选择数据----------需传递的参数
- articleCategoryOptions:[],//文章分类
- articleCategory:[],// 文章分类选中的数据-----------传递的参数
- age:[],//选中的年龄段-------需要传递的参数
- carrier:[], //选中的受众运营商----------需要传递的参数
- ac:[], //选中的受众网络类型---------------需要传递的参数
- landingTypeValue:'',//定向包类型的值 用来判断平台的值
- androidOsvArr:[],//受众安卓版本号数组
- iosOsvArr:[],//受众ios版本号数组
- platform:[],//受众平台-------------传递参数
- activateType:[],//用户首次激活时间---------传递参数
- city:[],//选择的商圈数据
- customCrowd:'NONE',//自定义人群 选择的值
- directLogic:'RETARGETING_INCLUDE',//定向逻辑的值
- dxInputValue:undefined,//自定义人群包下面的搜索框(定向/排除)
- // 显示用值
- editId:'',
- ageSelectArr:[],
- articleChecked:[],
- brandChecked:[],
- autoExtendTargetsChecked:[],
- }
- },
- computed: {
- hasSelected() {
- return this.selectedRowKeys.length > 0;
- },
- rowSelection() {
- return {
- // selectedRowKeys: this.incluedSelectedRowKeys,
- onChange: (selectedRowKeys, selectedRows) => {
- // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
- this.incluedSelectedRowKeys = selectedRowKeys;
-
- },
- getCheckboxProps: record => ({
- props: {
- disabled: this.excludeSelectedRowKeys.indexOf(record.key)>-1, // Column configuration not to be checked
- name: record.name,
- },
- }),
- };
- },
- rowSelection2() {
- return {
- // selectedRowKeys: this.excludeSelectedRowKeys,
- onChange: (selectedRowKeys, selectedRows) => {
- // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
- // this.selectedRowKeys = selectedRowKeys;
- this.excludeSelectedRowKeys = selectedRowKeys;
- },
- getCheckboxProps: record => ({
- props: {
- disabled: this.incluedSelectedRowKeys.indexOf(record.key)>-1, // Column configuration not to be checked
- name: record.name,
- },
- }),
- };
- },
- },
- methods: {
- //获取表单的某一个属性值
- getFormData(className) {
- return this.form.getFieldValue(className)
- },
- // 自定义人群的--同时定向排除tab切换事件
- retargetTabChange(tabkey){
- // console.log(tabkey)
- this.retargetDataAll=[];
- this.loading=true;
- if(this.accountInfo.value){
- getAction('/ctop/audience/list',{
- accountId:this.accountInfo.value
- }).then((res)=>{
- // console.log(res)
- this.loading=false;
- if(res.success){
- res.data.forEach((item)=>{
- item.key=item.custom_audience_id
- })
- // this.retargetData=res.data;
- this.retargetDataAll=res.data;
-
- }
- })
- }
- // if(tabkey==1){
-
- // }
- // }else{
-
- // }
- },
- onSelectChange(selectedRowKeys) {
- // console.log('selectedRowKeys changed: ', selectedRowKeys);
- this.selectedRowKeys = selectedRowKeys;
- },
- // 自定义人群的改变
- retargetTableChange(pagination, filters, sorter){
- // console.log(pagination);
- },
- // 自定义人群下的 定向排除
- directLogicChange(val){
- this.dxInputValue=undefined;
- this.selectedRowKeys = [];
- },
-
- // 只能放量改变
- zhinengChange(e){
- // console.log(e.target.value,this.getFormData('autoExtendEnabled'));
- // this.form.setFieldsValue({
- // autoExtendEnabled:e.target.value
- // })
- },
- //文章分类改变
- articleTypeChange(e){
- // console.log(e)
- // if(e.target.value=''){
- // this.articleCategory=[];
- // this.articleChecked=[];
- // }
- },
- // 手机品牌改为不限时
- deviceBrandTypeChange(e){
- if(e.target.value=''){
- this.deviceBrand=[];
- this.brandChecked=[]
- }
- },
- //定向包类型
- landingTypeChange(e){
- // console.log(e.target.value);
- this.landingTypeValue=e.target.value;
- if(e.target.value=='APP_ANDROID'){
- this.platformArr.forEach((item)=>{
- if(item.value!="ANDROID"){
- item.disabled=true
- }else{
- item.disabled=false
- }
- })
- }else if(e.target.value=='APP_IOS'){
- this.platformArr.forEach((item)=>{
- if(item.value!="IOS"){
- item.disabled=true
- }else{
- item.disabled=false
- }
- })
- }else{
- this.platformArr.forEach((item)=>{
- item.disabled=false
-
- })
- }
- },
- //安卓版本号
- androidOsvChange(val){
- // console.log(val);
- this.form.setFieldsValue({
- androidOsv: val
- });
- // console.log(this.form.getFieldValue('androidOsv'))
- },
- //ios版本号
- iosOsvChange(val){
- // console.log(val);
- this.form.setFieldsValue({
- iosOsv: val
- });
- // console.log(this.form.getFieldValue('androidOsv'))
- },
-
- //huakuai de shijian
- slideChange(value) {
- // console.log(value)
- this.launchPriceArr=value;
- },
- btnChange(e){
- // console.log(e)
- },
-
- //获取新用户的选中值
- getNewUser(val){
- // console.log(val);
- if(val.length==1&&val[0]==""){
- this.activateType=[]
- }else{
- this.activateType=val;
- }
-
- },
- //地域选择里的搜索
- regionOnSearch(value) {
- // console.log(value);
- },
- //地域里的受众人群的位置
- regionPeopleChange(e){
- // console.log(e.target.value,this.regionPeopleValue)
- },
- //获取选中的城市
- getSelectedCityArr(val){
- // console.log(val);
- this.city=[];
- this.city=val;
- },
- // 获取选中的区县
- getSelectedCountyArr(val){
- // console.log(val)
- this.city=[];
- this.city=val;
- },
- //省市的tab切换
- cityTabChange(key){
- // console.log(key)
- },
- //商圈的tab改变
- businessTabChange(key){
- // console.log(key)
- },
- //商圈的联动改变
- businessChange(val){
- // console.log(val)
- },
- //地图的搜索事件
- MapSearch(val){
- // console.log(val)
- },
- //行为场景
- actionSceneChange(value){
- // console.log(value)
- },
- //行为下的 类目搜索框
- TaxonomicSearch(value){
- // console.log(value);
- this.TaxonomicValue=value
- },
- //行为下的 关键词搜索框
- keyWordSearch(value){
- // console.log(value);
- this.keyWordValue=value
- },
- //获取智能放量定向的值
- getAutoExtendEnabled(val){
- // console.log(val)
- this.autoExtendTargets=[];
- this.autoExtendTargets.push(...val)
- },
- //获取手机品牌的值
- getDeviceBrand(val){
- // console.log(val);
- this.deviceBrand=[];
- this.deviceBrand.push(...val)
- },
- //获取文章分类的值
- getArticleCategory(val){
- // console.log(val)
- this.articleCategory=[];
- this.articleCategory.push(...val)
- },
- //获取选中的年龄段
- getAgeSelect(val){
- // console.log(val)
- if(val.length==1&&val[0]==""){
- this.age=[]
- }else{
- this.age=val;
- }
-
- },
- //获取运行商
- getCarrier(val){
- if(val.length==1&&val[0]==""){
- this.carrier=[]
- }else{
- this.carrier=val;
- }
- },
- //获取受众网络
- getAc(val){
- if(val.length==1&&val[0]==""){
- this.ac=[]
- }else{
- this.ac=val;
- }
- },
- // 获取平台
- getPlatForm(val){
- // console.log(val)
- if(val.length==1&&val[0]==""){
- this.platform=[]
- }else{
- this.platform=val;
- }
- // console.log(this.platform)
- },
-
- tijiaozhi(){
- this.getValuehandle();
- this.showDirectedPackage=!this.showDirectedPackage;
- },
- //定向包处理事件
- getValuehandle(){
- let formData=this.form.getFieldsValue()
- // console.log(formData)
- if(this.launchPrice=='custom'){
- formData['launchPrice']=this.launchPriceArr
- }
- if(this.directLogic=='RETARGETING_INCLUDE'){
- formData['retargetingTags']=this.selectedRowKeys;
- }else if(this.directLogic=='RETARGETING_EXCLUDE'){
- formData['retargetingTagsExclude']=this.selectedRowKeys;
- }else if(this.directLogic=='ALL'){
- formData['retargetingTags']=this.incluedSelectedRowKeys;
- formData['retargetingTagsExclude']=this.excludeSelectedRowKeys;
- }
- if(!this.regionValue!='NONE'){
- // console.log('需要处理地域的值');
- formData['city']=this.city
- }
- let userinfo=localStorage.getItem('pro__Login_Userinfo')
-
- if(userinfo){
- let userId=JSON.parse(userinfo).value.id
- formData['userId']=userId
- }
- formData['activateType']=this.activateType
- formData['deviceBrand']=this.deviceBrand
- formData['autoExtendEnabled']=this.autoExtendEnabled
- formData['autoExtendTargets']=this.autoExtendTargets
- formData['articleCategory']=this.articleCategory
- formData['age']=this.age
- formData['carrier']=this.carrier
- formData['platform']=this.platform
- formData['ac']=this.ac
- formData['interestActionMode']=this.interestActionMode;
- this.$emit('getDirectedValue',formData)
- },
- //应用按钮
- applicatiSubmit(){
- // console.log('submit!', this.form);
- if(this.getFormData('name')){
- let formData=this.form.getFieldsValue()
- // console.log(formData)
- if(this.launchPrice=='custom'){
- formData['launchPrice']=this.launchPriceArr
- }
- if(!this.regionValue!='NONE'){
- // console.log('需要处理地域的值');
- formData['city']=this.city
- }
- let userinfo=localStorage.getItem('pro__Login_Userinfo')
-
- if(userinfo){
- let userId=JSON.parse(userinfo).value.id
- formData['userId']=userId
- }
- formData['activateType']=this.activateType
- formData['deviceBrand']=this.deviceBrand
- formData['autoExtendEnabled']=this.autoExtendEnabled
- formData['autoExtendTargets']=this.autoExtendTargets
- formData['articleCategory']=this.articleCategory
- formData['age']=this.age
- formData['carrier']=this.carrier
- formData['platform']=this.platform
- formData['ac']=this.ac
- formData['interestActionMode']=this.interestActionMode
- // formData['filterConvertedUsers']=this.interestActionMode
-
- if(this.title=='新建定向包'){
- postAction('/ctop/audiencePackage/add',formData).then((res)=>{
- // console.log(res);
- if(res.success){
- this.$router.push('/modules/BatchCreate/directedPackage')
- }else{
- this.$message.error('定向包创建失败,请稍后重试')
- }
- })
- }else{
- formData['id']=this.editId
- postAction('/ctop/audiencePackage/edit',formData).then((res)=>{
- // console.log(res);
- if(res.success){
- this.$router.push('/modules/BatchCreate/directedPackage')
- }else{
- this.$message.error('定向包修改失败,请稍后重试')
- }
- })
- }
-
- }else{
- this.$message.error('名称不能为空')
- }
-
- },
- //取消按钮
- cancel(){
- this.$router.push('/modules/BatchCreate/directedPackage')
- },
- },
- mounted() {
- //手机品牌
- getAction('sys/dictItem/list?_t=1594263117&dictId=7f907c1dab0a65ce6d115e082cd79acf&pageSize=100',{}).then((res)=>{
- // console.log(res);
- if(res.success){
- res.result.records.forEach((item)=>{
- this.deviceBrandOptions.push({
- label:item.itemText,
- value:item.itemValue
- })
- })
- }
- })
- //文章分类
- getAction('sys/dictItem/list?_t=1594263117&dictId=defad85851bf6b1751a49b33d8b13b3b&pageSize=100',{}).then((res)=>{
- // console.log(res)
- if(res.success){
- res.result.records.forEach((item)=>{
- this.articleCategoryOptions.push({
- label:item.itemText,
- value:item.itemValue
- })
- })
- }
- })
- //受众安卓版本号
- getAction('sys/dictItem/list?dictId=bba60d87ced96be177a772102b44d0f2&pageSize=100',{}).then((res)=>{
- // console.log(res)
- if(res.success){
- res.result.records.forEach((item)=>{
- this.androidOsvArr.push({
- label:item.itemText,
- value:item.itemValue
- })
- })
- }
- })
- //受众安卓版本号
- getAction('sys/dictItem/list?dictId=a989bb28cfba9f25b3711dfcd05281e7&pageSize=100',{}).then((res)=>{
- // console.log(res)
- if(res.success){
- res.result.records.forEach((item)=>{
- this.iosOsvArr.push({
- label:item.itemText,
- value:item.itemValue
- })
- })
- }
- })
- let accountInfo = localStorage.getItem('accountInfo')
- // console.log(accountInfo)
- if (accountInfo!=null) {
- this.accountInfo = JSON.parse(accountInfo)
- if(this.accountInfo.value){
- getAction('/ctop/audience/list',{
- accountId:this.accountInfo.value
- }).then((res)=>{
- // console.log(res)
- if(res.success){
- res.data.forEach((item)=>{
- item.key=item.custom_audience_id
- })
- this.retargetData=res.data;
- this.retargetDataAll=res.data;
-
- }
- })
- }
- }
- // console.log(this.accountInfo)
- this.platformArr=JSON.parse(JSON.stringify(platformArr))
- // this.platformArr = [...platformArr]
- // console.log(this.$route.query,this.id)
- if(this.$route.query.id||this.id){
- this.title='修改定向包';
- this.editId=this.$route.query.id || this.id
- getAction('/ctop/audiencePackage/queryById',{
- id:this.editId
- }).then((res)=>{
- // console.log(res);
- this.form.setFieldsValue({
- name:res.result.name,
- landingType:res.result.landingType,
- deliveryRange:res.result.deliveryRange,
- gender:res.result.gender,
-
- filterConvertedUsers:res.result.filterConvertedUsers,
- })
- if(res.result.landingType=='APP_ANDROID'){
- this
- }
- this.autoExtendEnabled=res.result.autoExtendEnabled,
- this.interestActionMode=res.result.interestActionMode;
- this.ageArr=[];
- this.ageArr=JSON.parse(JSON.stringify(ageArr))
- // this.platformArr=[];
- // this.platformArr=JSON.parse(JSON.stringify(platformArr))
- this.carrierArr=[];
- this.carrierArr=JSON.parse(JSON.stringify(carrierArr))
- this.newUser=[];
- this.newUser=JSON.parse(JSON.stringify(newUser))
- this.networkArr=[];
- this.networkArr=JSON.parse(JSON.stringify(networkArr))
- res.result.age.forEach((item,index)=>{
- this.ageArr.forEach((ele)=>{
- if(ele.value==item){
- ele.checked=true;
- }
- })
- });
- // res.result.platform.forEach((item,index)=>{
- // this.platformArr.forEach((ele)=>{
- // if(ele.value==item){
- // ele.checked=true;
- // }
- // })
- // });
- if(res.result.landingType=='APP_ANDROID'){
- this.platformArr.forEach((item)=>{
- if(item.value!="ANDROID"){
- item.disabled=true
- }else{
- item.disabled=false
- }
- })
- }else if(res.result.landingType=='APP_IOS'){
- this.platformArr.forEach((item)=>{
- if(item.value!="IOS"){
- item.disabled=true
- }else{
- item.disabled=false
- }
- })
- }else{
- this.platformArr.forEach((item)=>{
- item.disabled=false
-
- })
- }
-
- res.result.carrier.forEach((item,index)=>{
- this.carrierArr.forEach((ele)=>{
- if(ele.value==item){
- ele.checked=true;
- }
- })
- });
- res.result.ac.forEach((item,index)=>{
- this.networkArr.forEach((ele)=>{
- if(ele.value==item){
- ele.checked=true;
- }
- })
- });
- res.result.activateType.forEach((item,index)=>{
- this.newUser.forEach((ele)=>{
- if(ele.value==item){
- ele.checked=true;
- }
- })
- });
- if(res.result.articleCategory.length){
- this.articleType='articleCategory';
- this.articleChecked=[];
- this.articleChecked=res.result.articleCategory
- }else{
- this.articleType=''
- }
- if(res.result.deviceBrand.length){
- this.deviceBrandType='byBrand';
- this.brandChecked=res.result.deviceBrand
- }else{
- this.deviceBrandType=''
- }
- if(res.result.autoExtendTargets.length>0){
- this.autoExtendTargetsChecked=res.result.autoExtendTargets
- }else{
- this.autoExtendTargetsChecked=[];
- }
-
- if(res.result.launchPrice.length>0){
- this.launchPrice='custom';
- this.launchPriceArr=res.result.launchPrice
- }else{
- this.launchPrice=''
- }
- })
- }
- },
- }
- </script>
|