newDirectedPackage.vue 82 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947
  1. <style>
  2. .newDirectedPackage .ant-checkbox-group-item{
  3. width: 100%;
  4. display: block ;
  5. padding: 3px 0;
  6. margin-right: 0;
  7. padding: 5px 15px;
  8. }
  9. .newDirectedPackage .ant-checkbox-group-item:hover{
  10. background-color: rgba(0,0,0,.1);
  11. }
  12. </style>
  13. <style lang="scss" scoped>
  14. .newDirectedPackage{
  15. // background-color: #fff;
  16. .title{
  17. width: 100%;
  18. font-size: 20px;
  19. font-weight: 700;
  20. padding: 15px 0;
  21. text-align: center;
  22. border-bottom: 1px solid #eee;
  23. background-color: #fff;
  24. }
  25. .optBOX{
  26. background-color: #fff;
  27. padding: 15px 0;
  28. position: relative;
  29. .optItem{
  30. // margin-bottom: 15px;
  31. .typeName{
  32. width: 130px;
  33. text-align: right;
  34. display: inline-block;
  35. margin-right: 15px;
  36. }
  37. .tishi{
  38. display: block;
  39. color: #999;
  40. .tubiao{
  41. color: red;
  42. margin-right: 5px;
  43. }
  44. }
  45. #btngroup .ant-btn:hover{
  46. border-color: none;
  47. }
  48. .deviceBrand{
  49. // background: rgb(116, 76, 76);
  50. width: 100%;
  51. height: 300px;
  52. }
  53. .selectBox{
  54. display: flex;
  55. .title{
  56. background: #f9f9f9;
  57. font-size: 14px;
  58. font-weight: 700;
  59. padding:0 15px;
  60. border-bottom: 1px solid #ddd;
  61. text-align: left;
  62. position: relative;
  63. .clearAllBtn{
  64. position: absolute;
  65. top: 3px;
  66. right: 0;
  67. }
  68. }
  69. .selectLeft{
  70. width: 40%;
  71. margin-right: 2%;
  72. border: 1px solid #ddd;
  73. border-radius: 5px;
  74. }
  75. .selectRight{
  76. width: 20%;
  77. border: 1px solid #ddd;
  78. border-radius: 5px;
  79. }
  80. .selectBox1{
  81. height: 250px;
  82. overflow: auto;
  83. .selectList{
  84. display: block;
  85. width: 100%;
  86. // padding: 0 15px;
  87. // padding: 3px 0;
  88. }
  89. .selectLists{
  90. display: block;
  91. width: 100%;
  92. padding: 0 15px;
  93. }
  94. .selectLists:hover{
  95. background-color: rgba(0,0,0,.1);
  96. }
  97. .selectListitem{
  98. display: block;
  99. height: 25px;
  100. line-height: 25px;
  101. background-color: #eee;
  102. border-radius: 5px;
  103. padding: 0 10px;
  104. margin: 8px 10px;
  105. position: relative;
  106. #close{
  107. font-size: 12px;
  108. position: absolute;
  109. right: 10px;
  110. top: 5px;
  111. cursor: pointer;
  112. }
  113. }
  114. }
  115. }
  116. .zidingyirenqun{
  117. width: 60%;
  118. }
  119. }
  120. .rightBox{
  121. position: fixed;
  122. top: 22%;
  123. right: 20px;
  124. width: 230px;
  125. // height: 500px;
  126. max-height: 500px;
  127. border: 1px solid #ddd;
  128. border-radius: 10px;
  129. font-size: 12px;
  130. overflow: auto;
  131. .topBox,.bottomBox{
  132. padding: 10px 15px;
  133. background-color: #f9f9f9;
  134. border-bottom: 1px solid #eee;
  135. border-radius: 10px 10px 0 0;
  136. .title{
  137. background-color: #f9f9f9;
  138. font-size: 14px;
  139. text-align: left;
  140. margin: 0 0 10px;
  141. padding: 5px 0;
  142. font-weight: 400;
  143. border-bottom: 0;
  144. // border-radius: 10px;
  145. }
  146. .info p{
  147. margin-bottom: 6px;
  148. color: #999;
  149. }
  150. .info .num{
  151. color: #000;
  152. font-weight: 600;
  153. }
  154. }
  155. .bottomBox{
  156. background-color: #fff;
  157. border-bottom:0;
  158. .title{
  159. background-color: #FFF;
  160. }
  161. }
  162. }
  163. }
  164. }
  165. </style>
  166. <style lang="scss">
  167. .actionBottom{
  168. ul,li{
  169. margin: 0;
  170. padding: 0;
  171. list-style: none;
  172. }
  173. width: 70%;
  174. height: 400px;
  175. display:flex;
  176. margin-top: 20px;
  177. .action_left{
  178. width:60% ;
  179. margin-right: 2%;
  180. border: 1px solid #ccc;
  181. border-radius: 5px;
  182. padding: 10px 2px;
  183. .Taxonomic{
  184. padding: 0 10px;
  185. .Taxonomic_checkbox{
  186. margin-top: 10PX;
  187. height: 220px;
  188. border: 1px solid #ccc;
  189. border-radius: 5px;
  190. }
  191. .Taxonomic_relevant{
  192. font-size: 12px;
  193. margin-top: 10px;
  194. .Taxonomic_relevant_top{
  195. position: relative;
  196. display: block;
  197. height: 20px;
  198. line-height: 20px;
  199. .Taxonomic_relevant_top_more{
  200. position: absolute;
  201. top: 0;
  202. right: 0;
  203. font-size: 12px;
  204. display: block;
  205. height: 20px;
  206. line-height: 20px;
  207. }
  208. }
  209. .Taxonomic_relevant_bottom{
  210. display: block;
  211. height: 20px;
  212. line-height: 20px;
  213. .Taxonomic_relevant_bottom_item{
  214. margin-right: 5px;
  215. }
  216. }
  217. }
  218. }
  219. .keyWords_box_title{
  220. font-size: 16px;
  221. font-weight: 600;
  222. color: #000;
  223. height: 35px;
  224. line-height: 35px;
  225. background-color: rgb(248,249,250);
  226. }
  227. .keyWords_box_list{
  228. height: 185px;
  229. overflow: auto;
  230. li{
  231. height: 30px;
  232. line-height: 30px;
  233. font-size: 14px;
  234. color: #333;
  235. .caozuo{
  236. display: none;
  237. // display: inline-block;
  238. width:50%;
  239. text-align: right;
  240. .delete{
  241. margin-left: 5px;
  242. }
  243. .searchKeyWord{
  244. margin-left: 15px;
  245. }
  246. }
  247. .mingzi{
  248. display: inline-block;
  249. width: 30%;
  250. }
  251. .renshu{
  252. display: inline-block;
  253. width: 15%;
  254. line-height: 30px;
  255. height: 30px;
  256. }
  257. }
  258. }
  259. .keyWords_box_list li:hover .caozuo{
  260. display: inline-block;
  261. }
  262. }
  263. .action_right{
  264. width: 35%;
  265. height: 100%;
  266. border-radius: 5px;
  267. border: 1px solid #ccc;
  268. .action_right_title{
  269. background-color: rgb(248,249,250);
  270. padding: 10px 10px 0;
  271. border-radius: 5px 5px 0 0;
  272. border-bottom: 1px solid #ccc;
  273. position: relative;
  274. }
  275. .action_right_sum{
  276. display: block;
  277. margin-bottom: 5px;
  278. height: 20px;
  279. line-height: 20px;
  280. font-size: 14px;
  281. color: #333;
  282. }
  283. .action_right_info{
  284. display: block;
  285. margin-bottom: 5px;
  286. height: 20px;
  287. line-height: 20px;
  288. font-size: 14px;
  289. color: #999;
  290. }
  291. .action_right_btn{
  292. position: absolute;
  293. top: 0px;
  294. right: -5px;
  295. }
  296. .action_right_bottom{
  297. .action_right_option{
  298. border-bottom: 1px solid #ccc;
  299. }
  300. .ant-select-selection{
  301. border: 0;
  302. }
  303. .coverPeople{
  304. margin-left: 5px;
  305. }
  306. .caozuo{
  307. display: none;
  308. .delete{
  309. margin-left: 5px;
  310. }
  311. .searchKeyWord{
  312. margin-left: 2px;
  313. }
  314. }
  315. .mingzi{
  316. display: inline-block;
  317. width: 70px;
  318. }
  319. .renshu{
  320. display: inline-block;
  321. width: 40px;
  322. line-height: 20px;
  323. height: 20px;
  324. }
  325. .action_right_select_list{
  326. padding: 5px 10px;
  327. height: 250px;
  328. overflow: auto;
  329. }
  330. .action_right_select_list li{
  331. line-height: 20px;
  332. height: 20px;
  333. }
  334. .action_right_select_list li:hover .caozuo{
  335. display: inline-block;
  336. }
  337. .action_right_AISelect{
  338. height: 30px;
  339. line-height: 30px;
  340. font-size: 14px;
  341. padding: 5px 10px;
  342. border-top: 1px solid #ccc;
  343. }
  344. }
  345. }
  346. }
  347. .ant-tooltip-inner,.ant-tooltip,.ant-tooltip-arrow::before{
  348. background-color: #fff;
  349. color: #666;
  350. font-size: 12px;
  351. }
  352. </style>
  353. <style lang="scss">
  354. .region{
  355. width: 70%;
  356. margin-top: 10px;
  357. .region_input{
  358. width: 60%;
  359. }
  360. .ant-tabs-bar{
  361. border: 0;
  362. }
  363. }
  364. </style>
  365. <template>
  366. <div class="newDirectedPackage">
  367. <div class="title" v-if="!isNewPlan">
  368. {{title}}
  369. </div>
  370. <div class="optBOX">
  371. <div class="leftBox">
  372. <a-form :form="form">
  373. <a-form-item label="定向包名称" :label-col="labelCol" :wrapper-col="wrapperCol">
  374. <a-input placeholder="请输入定向包名称,至多20个字符" style="width:40%" v-decorator="['name', { rules: [{ required: true, message: '请输入定向包名称' }] }]" />
  375. </a-form-item>
  376. <a-form-item label="定向包类型" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="!isNewPlan">
  377. <a-radio-group v-decorator="['landingType', { initialValue:'EXTERNAL' }]" @change='landingTypeChange' button-style="solid">
  378. <a-radio-button value="EXTERNAL">落地页</a-radio-button>
  379. <a-radio-button value="APP_ANDROID">应用下载-安卓</a-radio-button>
  380. <a-radio-button value="APP_IOS">应用下载-IOS</a-radio-button>
  381. <!-- <a-radio-button value="AWEME">抖音推广</a-radio-button> -->
  382. </a-radio-group>
  383. </a-form-item>
  384. <a-form-item label="投放范围" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="!isNewPlan">
  385. <a-radio-group v-decorator="['deliveryRange', { initialValue:'DEFAULT' }]" @change='landingTypeChange' button-style="solid">
  386. <a-radio-button value="DEFAULT">默认</a-radio-button>
  387. <a-radio-button value="UNION">穿山甲
  388. <a-tooltip>
  389. <template slot="title">
  390. 基于4亿日活跃用户大数据积累,顶尖AI智能推荐技术,今日头条与最广泛的合作伙伴携手打造全新移动生态联盟
  391. </template>
  392. <a-icon type="question-circle" />
  393. </a-tooltip>
  394. </a-radio-button>
  395. </a-radio-group>
  396. </a-form-item>
  397. <div v-show="showDirectedPackage">
  398. <a-form-item label="媒体" :label-col="labelCol" :wrapper-col="wrapperCol">
  399. <a-radio-group v-decorator="['medialType', { initialValue:1 }]" button-style="solid">
  400. <a-radio-button :value="1">头条</a-radio-button>
  401. </a-radio-group>
  402. </a-form-item>
  403. <a-form-item label="地域" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  404. <a-radio-group button-style="solid" v-model="regionValue">
  405. <a-radio-button value="NONE">不限</a-radio-button>
  406. <a-radio-button value="CITY">按省市</a-radio-button>
  407. <a-radio-button value="COUNTY">按区县</a-radio-button>
  408. <!-- <a-radio-button value="BUSINESS_DISTRICT>按商圈</a-radio-button> -->
  409. </a-radio-group>
  410. <div class="region" v-show="regionValue!='NONE'">
  411. <!-- 省市 -->
  412. <div class="provincyCity" v-if="regionValue=='CITY'">
  413. <div class="region_input">
  414. <!-- <a-input-search placeholder="输入搜索的省市" enter-button /> -->
  415. </div>
  416. <div class="tabChange">
  417. <div class="tabBox">
  418. <a-tabs v-model="cityTab" @change="cityTabChange">
  419. <a-tab-pane key="geography" tab="地理划分">
  420. <linkMultiSelect title='省份' :listArr='[]' :maxLayers='2' :listUrl='regionCityListUrl' @getSelectedArr='getSelectedCityArr'/>
  421. </a-tab-pane>
  422. <!-- <a-tab-pane key="development" tab="发展划分" >
  423. <linkMultiSelect title='等级' :listArr='[]' url='' :maxLayers='3' :listUrl='regionCityListUrl' @getSelectedArr='getSelectedCityArr'/>
  424. </a-tab-pane> -->
  425. </a-tabs>
  426. </div>
  427. </div>
  428. </div>
  429. <!-- 区县 -->
  430. <div class="district" v-else-if="regionValue=='COUNTY'">
  431. <linkMultiSelect title='省份' :listArr='[]' :maxLayers='3' :listUrl='regionCityListUrl' @getSelectedArr='getSelectedCountyArr'/>
  432. </div>
  433. <!-- 商圈 -->
  434. <!-- <div class="businessCircle" v-else>
  435. <div class="tabChange">
  436. <div class="tabBox">
  437. <a-tabs v-model="businessTab" @change="businessTabChange">
  438. <a-tab-pane key="businessCircle" tab="商圈">
  439. <a-cascader :options="businessOptionsArr" change-on-select @change="businessChange" />
  440. <linkMultiSelect :titleArr='["商圈"]' :listArr='[]' @getSelectedArr='getSelectedCityArr'/>
  441. </a-tab-pane>
  442. <a-tab-pane key="addFromMap" tab="从地图添加" >
  443. <a-input-search placeholder="请输入搜索地址" v-model="MapselectValue" @search="MapSearch">
  444. <a-button slot="enterButton">
  445. 搜索
  446. </a-button>
  447. </a-input-search>
  448. </a-tab-pane>
  449. </a-tabs>
  450. </div>
  451. </div>
  452. </div> -->
  453. <div class="region_people">
  454. <a-radio-group v-model="regionPeopleValue" v-decorator="['locationType', { initialValue:'HOME' }]" >
  455. <a-radio value="HOME">居住在该地区的用户</a-radio>
  456. <a-radio value="TRAVEL"> 到该地区旅行的用户</a-radio>
  457. <a-radio value="ALL">该地区内的所有用户</a-radio>
  458. <a-radio value="CURRENT">正在该地区的用户</a-radio>
  459. </a-radio-group>
  460. </div>
  461. </div>
  462. </a-form-item>
  463. <a-form-item label="性别" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  464. <a-radio-group v-decorator="['gender', {initialValue:'NONE' }]" button-style="solid">
  465. <a-radio-button value="NONE">不限</a-radio-button>
  466. <a-radio-button value="GENDER_MALE">男</a-radio-button>
  467. <a-radio-button value="GENDER_FEMALE">女</a-radio-button>
  468. </a-radio-group>
  469. </a-form-item>
  470. <a-form-item label="年龄" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  471. <radioCheck :checkArr='ageArr' @getSonValue='getAgeSelect' />
  472. </a-form-item>
  473. <a-form-item label="精选流量包" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  474. <a-radio-group button-style="solid" v-decorator="['trafficPackage', { initialValue:'NONE'}]">
  475. <a-radio-button value="NONE">不限</a-radio-button>
  476. <a-radio-button value="men" :disabled='getFormData("deliveryRange")!="UNION"'>应用软件精选</a-radio-button>
  477. <a-radio-button value="women" :disabled='getFormData("deliveryRange")!="UNION"'>游戏精选</a-radio-button>
  478. </a-radio-group>
  479. <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />精选流量包仅支持穿山甲、穿山甲-精选游戏广告位</span>
  480. </a-form-item>
  481. <a-form-item label="自定义人群" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="accountInfo.value!=undefined">
  482. <a-radio-group v-model="customCrowd" button-style="solid">
  483. <a-radio-button value="NONE">不限</a-radio-button>
  484. <a-radio-button value="CUSTOMt_CROWED">自定义人群</a-radio-button>
  485. </a-radio-group>
  486. </a-form-item>
  487. <a-form-item label="定向逻辑" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="customCrowd=='CUSTOMt_CROWED'">
  488. <a-radio-group v-model="directLogic" button-style="solid" @change="directLogicChange">
  489. <a-radio-button value="RETARGETING_INCLUDE">定向</a-radio-button>
  490. <a-radio-button value="RETARGETING_EXCLUDE">排除</a-radio-button>
  491. <a-radio-button value="ALL">同时定向排除</a-radio-button>
  492. </a-radio-group>
  493. <div class="zidingyirenqun" v-if="customCrowd=='CUSTOMt_CROWED'">
  494. <!-- <a-input placeholder="请输入人群包名称或者ID" v-model="dxInputValue" v-if="directLogic!='ALL'" style="width:50%;margin:15px 0">
  495. <a-icon type="search" slot="addonAfter"/>
  496. </a-input> -->
  497. <div class="dingxiang" v-if="directLogic=='RETARGETING_INCLUDE'">
  498. <a-table
  499. :columns="retargetColumns"
  500. :row-key="record => record.key"
  501. :data-source="retargetData"
  502. :loading="loading"
  503. style="width:60%;margin:15px 0"
  504. :pagination='false'
  505. @change="retargetTableChange"
  506. bordered
  507. :scroll="{ y: 250 }"
  508. :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
  509. >
  510. <template slot="name" slot-scope="name,records"> {{ name }}({{records.key}}) </template>
  511. </a-table>
  512. </div>
  513. <div class="paichu" v-if="directLogic=='RETARGETING_EXCLUDE'">
  514. <a-table
  515. :columns="retargetColumns"
  516. :row-key="record => record.key"
  517. :data-source="retargetData"
  518. :loading="loading"
  519. style="width:60%;margin:15px 0"
  520. :pagination='false'
  521. @change="retargetTableChange"
  522. :scroll="{ y: 250 }"
  523. :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
  524. bordered
  525. >
  526. <template slot="name" slot-scope="name,records"> {{ name }}({{records.key}}) </template>
  527. </a-table>
  528. </div>
  529. <div class="dingxiang_paichu" v-if="directLogic=='ALL'" style="width:60%">
  530. <a-tabs default-active-key="1" @change="retargetTabChange" >
  531. <a-tab-pane key="1" tab="定向池">
  532. <a-table
  533. :columns="retargetColumns"
  534. :row-key="record => record.key"
  535. :data-source="retargetDataAll"
  536. :loading="loading"
  537. style="width:100%;margin:15px 0"
  538. :pagination='false'
  539. @change="retargetTableChange"
  540. :scroll="{ y: 250 }"
  541. :row-selection="rowSelection"
  542. bordered
  543. >
  544. <template slot="name" slot-scope="name,records"> {{ name }}({{records.key}}) </template>
  545. </a-table>
  546. </a-tab-pane>
  547. <a-tab-pane key="2" tab="排除池" >
  548. <a-table
  549. :columns="retargetColumns"
  550. :row-key="record => record.key"
  551. :data-source="retargetDataAll"
  552. :loading="loading"
  553. style="width:100%;margin:15px 0"
  554. :pagination='false'
  555. @change="retargetTableChange"
  556. :scroll="{ y: 250 }"
  557. :row-selection="rowSelection2"
  558. bordered
  559. >
  560. <template slot="name" slot-scope="name,records"> {{ name }}({{records.key}}) </template>
  561. </a-table>
  562. </a-tab-pane>
  563. </a-tabs>
  564. </div>
  565. </div>
  566. </a-form-item>
  567. <a-form-item label="行为兴趣" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  568. <a-radio-group v-model="interestActionMode" button-style="solid">
  569. <a-radio-button value="UNLIMITED">不限</a-radio-button>
  570. <a-radio-button value="RECOMMEND">
  571. 系统推荐
  572. <a-tooltip>
  573. <template slot="title">
  574. 如与自定义人群包同时使用,系统推荐不生效
  575. </template>
  576. <a-icon type="question-circle" />
  577. </a-tooltip>
  578. </a-radio-button>
  579. <!-- <a-radio-button value="CUSTOM">自定义</a-radio-button> -->
  580. </a-radio-group>
  581. </a-form-item>
  582. <div class="interestActionMode" v-show="interestActionMode=='CUSTOM'">
  583. <a-form-item label="行为" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  584. <div>
  585. <span style="margin-right:5px">在</span>
  586. <a-select
  587. mode="multiple"
  588. label-in-value
  589. style="width: 210px"
  590. placeholder="所有行为场景中"
  591. @change="actionSceneChange"
  592. :maxTagCount='1'
  593. >
  594. <a-select-option value='E-COMMERCE'> 电商互动行为</a-select-option>
  595. <a-select-option value='NEWS'> 咨询互动行为</a-select-option>
  596. <a-select-option value='APP'> APP推广行为</a-select-option>
  597. </a-select>
  598. <span>中,选择用户</span>
  599. <a-select v-model="actionDays" style="width: 90px">
  600. <a-select-option :value='7'>7天 </a-select-option>
  601. <a-select-option :value='15'>15天 </a-select-option>
  602. <a-select-option :value='30'>30天 </a-select-option>
  603. <a-select-option :value='60'>60天 </a-select-option>
  604. <a-select-option :value='90'>90天 </a-select-option>
  605. <a-select-option :value='180'>180天 </a-select-option>
  606. <a-select-option :value='365'>365天 </a-select-option>
  607. </a-select>
  608. <span>内发生的行为:</span>
  609. </div>
  610. <div class="actionBottom">
  611. <div class="action_left">
  612. <a-tabs default-active-key="1" >
  613. <a-tab-pane key="1" tab="添加类目词">
  614. <div class="Taxonomic">
  615. <div class="Taxonomic_search">
  616. <a-input-search placeholder="请输入行为类目词" style="width: 100%" @search="TaxonomicSearch" />
  617. </div>
  618. <div class="Taxonomic_checkbox">
  619. </div>
  620. <div class="Taxonomic_relevant">
  621. <span class="Taxonomic_relevant_top">
  622. <span class="Taxonomic_relevant_top_title">{{}}相关词:</span>
  623. <a-button type='link' class="Taxonomic_relevant_top_more">更多></a-button>
  624. </span>
  625. <span class="Taxonomic_relevant_bottom">
  626. <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+游戏</a>
  627. <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+手游</a>
  628. <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+王者荣耀</a>
  629. <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+吃鸡</a>
  630. </span>
  631. </div>
  632. </div>
  633. </a-tab-pane>
  634. <a-tab-pane key="2" tab="添加关键词" >
  635. <div class="Taxonomic keyWord">
  636. <div class="Taxonomic_search">
  637. <a-input-search placeholder="请输入行为类目词或关键词" style="width: 100%" @search="keyWordSearch" />
  638. </div>
  639. <div class="Taxonomic_checkbox keyWords_box">
  640. <div class="keyWords_box_title">
  641. {{}}
  642. </div>
  643. <ul class="keyWords_box_list">
  644. <li>
  645. <span class="mingzi">游戏</span>
  646. <span class="renshu">21亿</span>
  647. <span class="caozuo" >
  648. <a href="javascript:;" class="addKeywords">添加</a>
  649. <a href="javascript:;" class="searchKeyWord">查关键词</a>
  650. </span>
  651. </li>
  652. </ul>
  653. </div>
  654. <div class="Taxonomic_relevant">
  655. <span class="Taxonomic_relevant_top">
  656. <a href="javascript:;" class="Taxonomic_relevant_bottom_item">添加全部“{{}}”相关词</a>
  657. </span>
  658. </div>
  659. </div>
  660. </a-tab-pane>
  661. </a-tabs>
  662. </div>
  663. <div class="action_right">
  664. <div class="action_right_title">
  665. <span class="action_right_sum">还可以添加行为:{{}}个</span>
  666. <span class="action_right_info">
  667. <span>类目词:{{}}</span>
  668. <span>关键词:{{}}</span>
  669. </span>
  670. <a-button type='link' class="action_right_btn clearAllBtn">清空</a-button>
  671. </div>
  672. <div class="action_right_bottom">
  673. <div class="action_right_option">
  674. <a-select v-model="actOrint" style="width: 80px;" >
  675. <a-select-option value="all">
  676. 全部
  677. </a-select-option>
  678. <a-select-option value="lucy">
  679. 类目词
  680. </a-select-option>
  681. <a-select-option value="disabled" >
  682. 关键词
  683. </a-select-option>
  684. </a-select>
  685. <span class="coverPeople">覆盖人数</span>
  686. </div>
  687. <div class="action_right_select_list">
  688. <ul>
  689. <li>
  690. <span class="mingzi">游戏</span>
  691. <span class="renshu">21亿</span>
  692. <span class="caozuo" >
  693. <a href="javascript:;" class="delete">删除</a>
  694. <a href="javascript:;" class="searchKeyWord">查关键词</a>
  695. </span>
  696. </li>
  697. <li>
  698. <span class="mingzi">游戏</span>
  699. <span class="renshu">21亿</span>
  700. <span class="caozuo" >
  701. <a href="javascript:;" class="delete">删除</a>
  702. <a href="javascript:;" class="searchKeyWord">查关键词</a>
  703. </span>
  704. </li>
  705. </ul>
  706. </div>
  707. <div class="action_right_AISelect">
  708. <a-tooltip class="actionTooltip">
  709. <template slot="title">
  710. 已添加的行为关键词需大于20个,才可以使用自动选词
  711. </template>
  712. <a-button type='link' :disabled='AIselect'>使用自动选词</a-button>
  713. </a-tooltip>
  714. <a-tooltip class="actionTooltip">
  715. <template slot="title">
  716. 系统根据行为定向所有已选结果,自动推荐词包
  717. </template>
  718. <a-icon type="question-circle" />
  719. </a-tooltip>
  720. </div>
  721. </div>
  722. </div>
  723. </div>
  724. </a-form-item>
  725. <a-form-item label="兴趣" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  726. </a-form-item>
  727. </div>
  728. <a-form-item label="平台" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  729. <radioCheck :checkArr='platformArr' @getSonValue='getPlatForm' />
  730. </a-form-item>
  731. <a-form-item label="过滤已安装" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="landingTypeValue=='APP_ANDROID'">
  732. <a-radio-group button-style="solid" v-decorator="['hideIfExists', {initialValue:0 }]" >
  733. <a-radio-button :value='0'>不过滤</a-radio-button>
  734. <a-radio-button :value="1">过滤</a-radio-button>
  735. </a-radio-group>
  736. </a-form-item>
  737. <a-form-item label="安卓版本" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="landingTypeValue=='APP_ANDROID'">
  738. <a-select style="width: 200px" v-decorator="['androidOsv', {initialValue:'0.0' }]" @change="androidOsvChange">
  739. <a-select-option v-for="(item,index) in androidOsvArr" :key="index" :value='item.value'>
  740. {{item.label}}
  741. </a-select-option>
  742. </a-select>
  743. </a-form-item>
  744. <a-form-item label="IOS版本" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="landingTypeValue=='APP_IOS'">
  745. <a-select style="width: 200px" v-decorator="['iosOsv', {initialValue:'0.0' }]" @change="iosOsvChange">
  746. <a-select-option v-for="(item,index) in iosOsvArr" :key="index" :value='item.value'>
  747. {{item.label}}
  748. </a-select-option>
  749. </a-select>
  750. </a-form-item>
  751. <a-form-item label="过滤已转化用户" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  752. <a-radio-group v-decorator="['filterConvertedUsers', {initialValue:'NO_EXCLUDE' }]" button-style="solid">
  753. <a-radio-button value="NO_EXCLUDE">不过滤</a-radio-button>
  754. <a-radio-button value="AD">广告计划</a-radio-button>
  755. <a-radio-button value="CAMPAIGN">广告组</a-radio-button>
  756. <a-radio-button value="ADVERTISER">广告账户</a-radio-button>
  757. </a-radio-group>
  758. <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />过滤已转化不支持投放目标为展示、点击计划,不支持受众预估
  759. </span>
  760. </a-form-item>
  761. <a-form-item label="运营商" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  762. <radioCheck :checkArr='carrierArr' @getSonValue='getCarrier' />
  763. </a-form-item>
  764. <a-form-item label="网络" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  765. <radioCheck :checkArr='networkArr' @getSonValue='getAc' />
  766. </a-form-item>
  767. <a-form-item label="文章类型" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  768. <a-radio-group button-style="solid" v-model="articleType" @change="articleTypeChange">
  769. <a-radio-button value="">不限</a-radio-button>
  770. <a-radio-button value="articleCategory">文章分类</a-radio-button>
  771. </a-radio-group>
  772. <div v-show="articleType=='articleCategory'" class="deviceBrand">
  773. <singleLayersSelecte title='文章类型' :checked='articleChecked' :listArr='articleCategoryOptions' @getCheckedList='getArticleCategory'/>
  774. </div>
  775. </a-form-item>
  776. <a-form-item label="手机品牌" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  777. <a-radio-group v-model="deviceBrandType" button-style="solid" @change="deviceBrandTypeChange">
  778. <a-radio-button value="">不限</a-radio-button>
  779. <a-radio-button value="byBrand">按品牌</a-radio-button>
  780. </a-radio-group>
  781. <div v-if="deviceBrandType=='byBrand'" class="deviceBrand">
  782. <singleLayersSelecte title='手机品牌' :listArr='deviceBrandOptions' :checked='brandChecked' @getCheckedList='getDeviceBrand' />
  783. </div>
  784. </a-form-item>
  785. <a-form-item label="手机价格" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  786. <a-radio-group v-model="launchPrice" button-style="solid">
  787. <a-radio-button value="">不限</a-radio-button>
  788. <a-radio-button value="custom">自定义</a-radio-button>
  789. </a-radio-group>
  790. <span v-if="launchPrice=='custom'">
  791. <a-slider range :marks="marks" v-model='launchPriceArr' :step="null" :min='0' :max='11000' @change="slideChange" />
  792. </span>
  793. <span v-else></span>
  794. </a-form-item>
  795. <a-form-item label="新用户" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  796. <radioCheck :checkArr='newUser' @getSonValue='getNewUser' />
  797. </a-form-item>
  798. <a-form-item label="智能放量" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  799. <a-radio-group v-model="autoExtendEnabled" button-style="solid" @change="zhinengChange" >
  800. <a-radio-button :value="0">不启用</a-radio-button>
  801. <a-radio-button :value="1">启用</a-radio-button>
  802. </a-radio-group>
  803. <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />智能放量不支持受众预估</span>
  804. <div v-if="autoExtendEnabled==1" class="deviceBrand">
  805. <singleLayersSelecte title='可放开定向' :listArr='autoExtendOptions' :checked='autoExtendTargetsChecked' @getCheckedList='getAutoExtendEnabled'/>
  806. </div>
  807. </a-form-item>
  808. </div>
  809. <a-form-item :wrapper-col="{ span: 14, offset: 10 }" :label-col="labelCol" v-show="!isNewPlan">
  810. <a-button style="margin-right: 30px;" @click="cancel">
  811. 取消
  812. </a-button>
  813. <a-button type="primary" @click="applicatiSubmit">
  814. {{title=='新建定向包'? '创建': '修改'}}
  815. </a-button>
  816. </a-form-item>
  817. <a-form-item :wrapper-col="{ span: 14, offset: 10 }" :label-col="labelCol" v-show="isNewPlan">
  818. <a-button style="margin-right: 30px;" @click="tijiaozhi" type='primary'>
  819. {{showDirectedPackage ?' 选择完毕,收起':'展开'}}定向包
  820. </a-button>
  821. </a-form-item>
  822. </a-form>
  823. </div>
  824. <!-- <div class="rightBox">
  825. <div class="topBox">
  826. <p class="title">预估可覆盖</p>
  827. <div class="info">
  828. <p>抖音视频:<span class="num">{{}}</span>万日活跃用户</p>
  829. <p>西瓜视频:<span class="num">{{}}</span>万日活跃用户</p>
  830. <p>火山视频:<span class="num">{{}}</span>万日活跃用户</p>
  831. <p>今日头条:<span class="num">{{}}</span>万日活跃用户</p>
  832. </div>
  833. </div>
  834. <div class="bottomBox">
  835. <p class="title">受众信息</p>
  836. <div class="info">
  837. <p>性别:<span class="num">{{}}</span></p>
  838. <p>年龄:<span class="num">{{}}</span></p>
  839. <p>平台:<span class="num">{{}}</span></p>
  840. <p>网络:<span class="num">{{}}</span></p>
  841. <p>运营商:<span class="num">{{}}</span></p>
  842. <p>新用户:<span class="num">{{}}</span></p>
  843. <p>手机品牌:<span class="num">{{}}</span></p>
  844. </div>
  845. </div>
  846. </div> -->
  847. </div>
  848. </div>
  849. </template>
  850. <script>
  851. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  852. const plainOptions = ['Apple', 'Pear', 'Orange','44','550','9982','5525'];
  853. const defaultCheckedList = ['Apple', 'Orange'];
  854. import radioCheck from './radioCheck';
  855. import linkMultiSelect from './linkMultiSelect'
  856. import singleLayersSelecte from './singleLayerSelecte'
  857. let newUser=[
  858. {
  859. value:'',
  860. title:'不限',
  861. checked:false,
  862. },
  863. {
  864. value:'WITH_IN_A_MONTH',
  865. title:'一月以内',
  866. checked:false,
  867. },
  868. {
  869. value:'ONE_MONTH_2_THREE_MONTH',
  870. title:'一月到三个月',
  871. checked:false,
  872. },
  873. {
  874. value:'THREE_MONTH_EAILIER',
  875. title:'三月以上',
  876. checked:false,
  877. }
  878. ]
  879. let networkArr=[
  880. {
  881. value:'',
  882. title:'不限',
  883. checked:false,
  884. },
  885. {
  886. value:'WIFI',
  887. title:'WIFI',
  888. checked:false,
  889. },
  890. {
  891. value:'2G',
  892. title:'2G',
  893. checked:false,
  894. },
  895. {
  896. value:'3G',
  897. title:'3G',
  898. checked:false,
  899. },
  900. {
  901. value:'4G',
  902. title:'4G',
  903. checked:false,
  904. },
  905. ]
  906. let carrierArr=[
  907. {
  908. value:'',
  909. title:'不限',
  910. checked:false,
  911. },
  912. {
  913. value:'MOBILE',
  914. title:'移动',
  915. checked:false,
  916. },
  917. {
  918. value:'UNICOM',
  919. title:'联通',
  920. checked:false,
  921. },
  922. {
  923. value:'TELCOM',
  924. title:'电信',
  925. checked:false,
  926. },
  927. ]
  928. let platformArr=[
  929. {
  930. value:'',
  931. title:'不限',
  932. disabled:false
  933. },
  934. {
  935. value:'ANDROID',
  936. title:'Android',
  937. disabled:false
  938. },
  939. {
  940. value:'IOS',
  941. title:'iOS',
  942. disabled:false
  943. },
  944. ]
  945. let ageArr=[
  946. {
  947. value:'',
  948. title:'不限',
  949. checked:false,
  950. },
  951. {
  952. value:'AGE_BETWEEN_18_23',
  953. title:' 18-23岁',
  954. checked:false,
  955. },
  956. {
  957. value:'AGE_BETWEEN_24_30',
  958. title:'24-30岁',
  959. checked:false,
  960. },
  961. {
  962. value:'AGE_BETWEEN_31_40',
  963. title:'31-40岁',
  964. checked:false,
  965. },
  966. {
  967. value:'AGE_BETWEEN_41_49',
  968. title:'41-49岁',
  969. checked:false,
  970. },
  971. {
  972. value:'AGE_ABOVE_50',
  973. title:'大于等于50岁',
  974. checked:false,
  975. },
  976. ]
  977. let options=[
  978. {
  979. value: 'zhejiang',
  980. label: 'Zhejiang',
  981. children: [
  982. {
  983. value: 'hangzhou',
  984. label: 'Hangzhou',
  985. children: [
  986. {
  987. value: 'xihu',
  988. label: 'West Lake',
  989. },
  990. ],
  991. },
  992. ],
  993. },
  994. {
  995. value: 'jiangsu',
  996. label: 'Jiangsu',
  997. children: [
  998. {
  999. value: 'nanjing',
  1000. label: 'Nanjing',
  1001. children: [
  1002. {
  1003. value: 'zhonghuamen',
  1004. label: 'Zhong Hua Men',
  1005. },
  1006. ],
  1007. },
  1008. ],
  1009. },
  1010. ];
  1011. let autoExtendOptions=[
  1012. {
  1013. label:'地域',
  1014. value:'REGION',
  1015. },
  1016. {
  1017. label:'性别',
  1018. value:'GENDER',
  1019. },
  1020. {
  1021. label:'年龄',
  1022. value:'AGE',
  1023. },
  1024. {
  1025. label:'行为兴趣',
  1026. value:'INTEREST_ACTION',
  1027. },
  1028. {
  1029. label:'自定义人群',
  1030. value:'CUSTOM_AUDIENCE',
  1031. },
  1032. ]
  1033. let retargetColumns=[
  1034. {
  1035. title: '人群包',
  1036. dataIndex: 'name',
  1037. sorter: true,
  1038. width: '80%',
  1039. scopedSlots: { customRender: 'name' },
  1040. },
  1041. {
  1042. title: '属性',
  1043. dataIndex: 'tag',
  1044. filters: [
  1045. { text: '自定义', value: 'male' },
  1046. { text: '系统推荐', value: 'female' },
  1047. { text: '第三方', value: 'femal' },
  1048. ],
  1049. width: '20%',
  1050. },
  1051. ]
  1052. export default {
  1053. props:{
  1054. isNewPlan:{
  1055. default:false
  1056. },
  1057. id:{
  1058. type:Number
  1059. }
  1060. },
  1061. watch: {
  1062. id(n,o){
  1063. // console.log(n,o)
  1064. if(n!=o){
  1065. this.title='修改定向包';
  1066. this.editId=this.id
  1067. getAction('/ctop/audiencePackage/queryById',{
  1068. id:this.editId
  1069. }).then((res)=>{
  1070. // console.log(res);
  1071. this.form.setFieldsValue({
  1072. name:res.result.name,
  1073. landingType:res.result.landingType,
  1074. deliveryRange:res.result.deliveryRange,
  1075. gender:res.result.gender,
  1076. filterConvertedUsers:res.result.filterConvertedUsers,
  1077. })
  1078. if(res.result.landingType=='APP_ANDROID'){
  1079. this
  1080. }
  1081. this.autoExtendEnabled=res.result.autoExtendEnabled,
  1082. this.interestActionMode=res.result.interestActionMode;
  1083. this.ageArr=[];
  1084. this.ageArr=JSON.parse(JSON.stringify(ageArr))
  1085. // this.platformArr=[];
  1086. // this.platformArr=JSON.parse(JSON.stringify(platformArr))
  1087. this.carrierArr=[];
  1088. this.carrierArr=JSON.parse(JSON.stringify(carrierArr))
  1089. this.newUser=[];
  1090. this.newUser=JSON.parse(JSON.stringify(newUser))
  1091. this.networkArr=[];
  1092. this.networkArr=JSON.parse(JSON.stringify(networkArr))
  1093. res.result.age.forEach((item,index)=>{
  1094. this.ageArr.forEach((ele)=>{
  1095. if(ele.value==item){
  1096. ele.checked=true;
  1097. }
  1098. })
  1099. });
  1100. // res.result.platform.forEach((item,index)=>{
  1101. // this.platformArr.forEach((ele)=>{
  1102. // if(ele.value==item){
  1103. // ele.checked=true;
  1104. // }
  1105. // })
  1106. // });
  1107. if(res.result.landingType=='APP_ANDROID'){
  1108. this.platformArr.forEach((item)=>{
  1109. if(item.value!="ANDROID"){
  1110. item.disabled=true
  1111. }else{
  1112. item.disabled=false
  1113. }
  1114. })
  1115. }else if(res.result.landingType=='APP_IOS'){
  1116. this.platformArr.forEach((item)=>{
  1117. if(item.value!="IOS"){
  1118. item.disabled=true
  1119. }else{
  1120. item.disabled=false
  1121. }
  1122. })
  1123. }else{
  1124. this.platformArr.forEach((item)=>{
  1125. item.disabled=false
  1126. })
  1127. }
  1128. res.result.carrier.forEach((item,index)=>{
  1129. this.carrierArr.forEach((ele)=>{
  1130. if(ele.value==item){
  1131. ele.checked=true;
  1132. }
  1133. })
  1134. });
  1135. res.result.ac.forEach((item,index)=>{
  1136. this.networkArr.forEach((ele)=>{
  1137. if(ele.value==item){
  1138. ele.checked=true;
  1139. }
  1140. })
  1141. });
  1142. res.result.activateType.forEach((item,index)=>{
  1143. this.newUser.forEach((ele)=>{
  1144. if(ele.value==item){
  1145. ele.checked=true;
  1146. }
  1147. })
  1148. });
  1149. if(res.result.articleCategory.length){
  1150. this.articleType='articleCategory';
  1151. this.articleChecked=[];
  1152. this.articleChecked=res.result.articleCategory
  1153. }else{
  1154. this.articleType=''
  1155. }
  1156. if(res.result.deviceBrand.length){
  1157. this.deviceBrandType='byBrand';
  1158. this.brandChecked=res.result.deviceBrand
  1159. }else{
  1160. this.deviceBrandType=''
  1161. }
  1162. if(res.result.autoExtendTargets.length>0){
  1163. this.autoExtendTargetsChecked=res.result.autoExtendTargets
  1164. }else{
  1165. this.autoExtendTargetsChecked=[];
  1166. }
  1167. if(res.result.launchPrice.length>0){
  1168. this.launchPrice='custom';
  1169. this.launchPriceArr=res.result.launchPrice
  1170. }else{
  1171. this.launchPrice=''
  1172. }
  1173. })
  1174. }
  1175. }
  1176. },
  1177. name:'newDirectedPackage',
  1178. components:{
  1179. radioCheck,
  1180. linkMultiSelect,
  1181. singleLayersSelecte
  1182. },
  1183. data() {
  1184. return {
  1185. selectedRowKeys:[],
  1186. incluedSelectedRowKeys:[],
  1187. excludeSelectedRowKeys:[],
  1188. accountInfo:{},//账户信息
  1189. // 自定义人群参数
  1190. retargetColumns,
  1191. retargetData:[],
  1192. retargetDataAll:[],
  1193. loading:false,
  1194. showDirectedPackage:true,
  1195. title:'新建定向包',
  1196. labelCol: { span: 6 },
  1197. wrapperCol: { span: 14 },
  1198. launchPrice:'',//手机价格
  1199. launchPriceArr:[2000, 7000],
  1200. deviceBrandType:'',
  1201. deviceBrand:[],//手机品牌
  1202. deviceBrandOptions:[],
  1203. form: this.$form.createForm(this),
  1204. marks: {
  1205. 0: '0',
  1206. 1000: '',
  1207. 2000: '2000元',
  1208. 2500: '',
  1209. 3000: '',
  1210. 3500: '',
  1211. 4000: '',
  1212. 4500: '',
  1213. 5000: '5000元',
  1214. 5500: '',
  1215. 6000: '',
  1216. 6500: '',
  1217. 7000: '',
  1218. 8000: '',
  1219. 9000: '',
  1220. 10000: '10000元',
  1221. 11000: {
  1222. style: {
  1223. color: '#f50',
  1224. },
  1225. label: <strong>11000元</strong>,
  1226. },
  1227. },
  1228. //选择框
  1229. // checkedList: defaultCheckedList,
  1230. // indeterminate: true,
  1231. // checkAll: false,
  1232. // plainOptions,
  1233. newUser,//新用户的每一项值
  1234. networkArr,//网络
  1235. carrierArr,//运营商
  1236. ageArr,//受众年龄
  1237. platformArr,//受众平台
  1238. //地域下的人群的受众位置分类
  1239. regionPeopleValue:'HOME',
  1240. regionValue:'NONE',//地域的选择项
  1241. cityTab:'geography',//省市下的tab切换
  1242. businessTab:'businessCircle',//商圈的tab值
  1243. businessOptionsArr:[],//商圈的联动数据
  1244. MapselectValue:undefined,//地图的搜索地址
  1245. //行为兴趣选择
  1246. interestActionMode:'UNLIMITED',
  1247. actionScene:[],//行为场景
  1248. actionDays:30,//行为天数
  1249. actOrint:'all',
  1250. TaxonomicValue:undefined,//行为下的类目词
  1251. keyWordValue:undefined,//行为下的关键词
  1252. AIselect:true,//行为下的自动选词是否可用
  1253. regionCityListUrl:'ctop/bytedanceAreaInfo/list',
  1254. regionCountyListUrl:'ctop/bytedanceAreaInfo/list',
  1255. articleType:'',//文章分类
  1256. // flowPacket:true,//默认精选流量包不可修改 只有穿山甲是才可以修改
  1257. autoExtendEnabled:0,//智能放量是否开启
  1258. autoExtendOptions,//智能投放可选定向数组
  1259. autoExtendTargets:[],//智能放量开启后的选择数据----------需传递的参数
  1260. articleCategoryOptions:[],//文章分类
  1261. articleCategory:[],// 文章分类选中的数据-----------传递的参数
  1262. age:[],//选中的年龄段-------需要传递的参数
  1263. carrier:[], //选中的受众运营商----------需要传递的参数
  1264. ac:[], //选中的受众网络类型---------------需要传递的参数
  1265. landingTypeValue:'',//定向包类型的值 用来判断平台的值
  1266. androidOsvArr:[],//受众安卓版本号数组
  1267. iosOsvArr:[],//受众ios版本号数组
  1268. platform:[],//受众平台-------------传递参数
  1269. activateType:[],//用户首次激活时间---------传递参数
  1270. city:[],//选择的商圈数据
  1271. customCrowd:'NONE',//自定义人群 选择的值
  1272. directLogic:'RETARGETING_INCLUDE',//定向逻辑的值
  1273. dxInputValue:undefined,//自定义人群包下面的搜索框(定向/排除)
  1274. // 显示用值
  1275. editId:'',
  1276. ageSelectArr:[],
  1277. articleChecked:[],
  1278. brandChecked:[],
  1279. autoExtendTargetsChecked:[],
  1280. }
  1281. },
  1282. computed: {
  1283. hasSelected() {
  1284. return this.selectedRowKeys.length > 0;
  1285. },
  1286. rowSelection() {
  1287. return {
  1288. // selectedRowKeys: this.incluedSelectedRowKeys,
  1289. onChange: (selectedRowKeys, selectedRows) => {
  1290. // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  1291. this.incluedSelectedRowKeys = selectedRowKeys;
  1292. },
  1293. getCheckboxProps: record => ({
  1294. props: {
  1295. disabled: this.excludeSelectedRowKeys.indexOf(record.key)>-1, // Column configuration not to be checked
  1296. name: record.name,
  1297. },
  1298. }),
  1299. };
  1300. },
  1301. rowSelection2() {
  1302. return {
  1303. // selectedRowKeys: this.excludeSelectedRowKeys,
  1304. onChange: (selectedRowKeys, selectedRows) => {
  1305. // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  1306. // this.selectedRowKeys = selectedRowKeys;
  1307. this.excludeSelectedRowKeys = selectedRowKeys;
  1308. },
  1309. getCheckboxProps: record => ({
  1310. props: {
  1311. disabled: this.incluedSelectedRowKeys.indexOf(record.key)>-1, // Column configuration not to be checked
  1312. name: record.name,
  1313. },
  1314. }),
  1315. };
  1316. },
  1317. },
  1318. methods: {
  1319. //获取表单的某一个属性值
  1320. getFormData(className) {
  1321. return this.form.getFieldValue(className)
  1322. },
  1323. // 自定义人群的--同时定向排除tab切换事件
  1324. retargetTabChange(tabkey){
  1325. // console.log(tabkey)
  1326. this.retargetDataAll=[];
  1327. this.loading=true;
  1328. if(this.accountInfo.value){
  1329. getAction('/ctop/audience/list',{
  1330. accountId:this.accountInfo.value
  1331. }).then((res)=>{
  1332. // console.log(res)
  1333. this.loading=false;
  1334. if(res.success){
  1335. res.data.forEach((item)=>{
  1336. item.key=item.custom_audience_id
  1337. })
  1338. // this.retargetData=res.data;
  1339. this.retargetDataAll=res.data;
  1340. }
  1341. })
  1342. }
  1343. // if(tabkey==1){
  1344. // }
  1345. // }else{
  1346. // }
  1347. },
  1348. onSelectChange(selectedRowKeys) {
  1349. // console.log('selectedRowKeys changed: ', selectedRowKeys);
  1350. this.selectedRowKeys = selectedRowKeys;
  1351. },
  1352. // 自定义人群的改变
  1353. retargetTableChange(pagination, filters, sorter){
  1354. // console.log(pagination);
  1355. },
  1356. // 自定义人群下的 定向排除
  1357. directLogicChange(val){
  1358. this.dxInputValue=undefined;
  1359. this.selectedRowKeys = [];
  1360. },
  1361. // 只能放量改变
  1362. zhinengChange(e){
  1363. // console.log(e.target.value,this.getFormData('autoExtendEnabled'));
  1364. // this.form.setFieldsValue({
  1365. // autoExtendEnabled:e.target.value
  1366. // })
  1367. },
  1368. //文章分类改变
  1369. articleTypeChange(e){
  1370. // console.log(e)
  1371. // if(e.target.value=''){
  1372. // this.articleCategory=[];
  1373. // this.articleChecked=[];
  1374. // }
  1375. },
  1376. // 手机品牌改为不限时
  1377. deviceBrandTypeChange(e){
  1378. if(e.target.value=''){
  1379. this.deviceBrand=[];
  1380. this.brandChecked=[]
  1381. }
  1382. },
  1383. //定向包类型
  1384. landingTypeChange(e){
  1385. // console.log(e.target.value);
  1386. this.landingTypeValue=e.target.value;
  1387. if(e.target.value=='APP_ANDROID'){
  1388. this.platformArr.forEach((item)=>{
  1389. if(item.value!="ANDROID"){
  1390. item.disabled=true
  1391. }else{
  1392. item.disabled=false
  1393. }
  1394. })
  1395. }else if(e.target.value=='APP_IOS'){
  1396. this.platformArr.forEach((item)=>{
  1397. if(item.value!="IOS"){
  1398. item.disabled=true
  1399. }else{
  1400. item.disabled=false
  1401. }
  1402. })
  1403. }else{
  1404. this.platformArr.forEach((item)=>{
  1405. item.disabled=false
  1406. })
  1407. }
  1408. },
  1409. //安卓版本号
  1410. androidOsvChange(val){
  1411. // console.log(val);
  1412. this.form.setFieldsValue({
  1413. androidOsv: val
  1414. });
  1415. // console.log(this.form.getFieldValue('androidOsv'))
  1416. },
  1417. //ios版本号
  1418. iosOsvChange(val){
  1419. // console.log(val);
  1420. this.form.setFieldsValue({
  1421. iosOsv: val
  1422. });
  1423. // console.log(this.form.getFieldValue('androidOsv'))
  1424. },
  1425. //huakuai de shijian
  1426. slideChange(value) {
  1427. // console.log(value)
  1428. this.launchPriceArr=value;
  1429. },
  1430. btnChange(e){
  1431. // console.log(e)
  1432. },
  1433. //获取新用户的选中值
  1434. getNewUser(val){
  1435. // console.log(val);
  1436. if(val.length==1&&val[0]==""){
  1437. this.activateType=[]
  1438. }else{
  1439. this.activateType=val;
  1440. }
  1441. },
  1442. //地域选择里的搜索
  1443. regionOnSearch(value) {
  1444. // console.log(value);
  1445. },
  1446. //地域里的受众人群的位置
  1447. regionPeopleChange(e){
  1448. // console.log(e.target.value,this.regionPeopleValue)
  1449. },
  1450. //获取选中的城市
  1451. getSelectedCityArr(val){
  1452. // console.log(val);
  1453. this.city=[];
  1454. this.city=val;
  1455. },
  1456. // 获取选中的区县
  1457. getSelectedCountyArr(val){
  1458. // console.log(val)
  1459. this.city=[];
  1460. this.city=val;
  1461. },
  1462. //省市的tab切换
  1463. cityTabChange(key){
  1464. // console.log(key)
  1465. },
  1466. //商圈的tab改变
  1467. businessTabChange(key){
  1468. // console.log(key)
  1469. },
  1470. //商圈的联动改变
  1471. businessChange(val){
  1472. // console.log(val)
  1473. },
  1474. //地图的搜索事件
  1475. MapSearch(val){
  1476. // console.log(val)
  1477. },
  1478. //行为场景
  1479. actionSceneChange(value){
  1480. // console.log(value)
  1481. },
  1482. //行为下的 类目搜索框
  1483. TaxonomicSearch(value){
  1484. // console.log(value);
  1485. this.TaxonomicValue=value
  1486. },
  1487. //行为下的 关键词搜索框
  1488. keyWordSearch(value){
  1489. // console.log(value);
  1490. this.keyWordValue=value
  1491. },
  1492. //获取智能放量定向的值
  1493. getAutoExtendEnabled(val){
  1494. // console.log(val)
  1495. this.autoExtendTargets=[];
  1496. this.autoExtendTargets.push(...val)
  1497. },
  1498. //获取手机品牌的值
  1499. getDeviceBrand(val){
  1500. // console.log(val);
  1501. this.deviceBrand=[];
  1502. this.deviceBrand.push(...val)
  1503. },
  1504. //获取文章分类的值
  1505. getArticleCategory(val){
  1506. // console.log(val)
  1507. this.articleCategory=[];
  1508. this.articleCategory.push(...val)
  1509. },
  1510. //获取选中的年龄段
  1511. getAgeSelect(val){
  1512. // console.log(val)
  1513. if(val.length==1&&val[0]==""){
  1514. this.age=[]
  1515. }else{
  1516. this.age=val;
  1517. }
  1518. },
  1519. //获取运行商
  1520. getCarrier(val){
  1521. if(val.length==1&&val[0]==""){
  1522. this.carrier=[]
  1523. }else{
  1524. this.carrier=val;
  1525. }
  1526. },
  1527. //获取受众网络
  1528. getAc(val){
  1529. if(val.length==1&&val[0]==""){
  1530. this.ac=[]
  1531. }else{
  1532. this.ac=val;
  1533. }
  1534. },
  1535. // 获取平台
  1536. getPlatForm(val){
  1537. // console.log(val)
  1538. if(val.length==1&&val[0]==""){
  1539. this.platform=[]
  1540. }else{
  1541. this.platform=val;
  1542. }
  1543. // console.log(this.platform)
  1544. },
  1545. tijiaozhi(){
  1546. this.getValuehandle();
  1547. this.showDirectedPackage=!this.showDirectedPackage;
  1548. },
  1549. //定向包处理事件
  1550. getValuehandle(){
  1551. let formData=this.form.getFieldsValue()
  1552. // console.log(formData)
  1553. if(this.launchPrice=='custom'){
  1554. formData['launchPrice']=this.launchPriceArr
  1555. }
  1556. if(this.directLogic=='RETARGETING_INCLUDE'){
  1557. formData['retargetingTags']=this.selectedRowKeys;
  1558. }else if(this.directLogic=='RETARGETING_EXCLUDE'){
  1559. formData['retargetingTagsExclude']=this.selectedRowKeys;
  1560. }else if(this.directLogic=='ALL'){
  1561. formData['retargetingTags']=this.incluedSelectedRowKeys;
  1562. formData['retargetingTagsExclude']=this.excludeSelectedRowKeys;
  1563. }
  1564. if(!this.regionValue!='NONE'){
  1565. // console.log('需要处理地域的值');
  1566. formData['city']=this.city
  1567. }
  1568. let userinfo=localStorage.getItem('pro__Login_Userinfo')
  1569. if(userinfo){
  1570. let userId=JSON.parse(userinfo).value.id
  1571. formData['userId']=userId
  1572. }
  1573. formData['activateType']=this.activateType
  1574. formData['deviceBrand']=this.deviceBrand
  1575. formData['autoExtendEnabled']=this.autoExtendEnabled
  1576. formData['autoExtendTargets']=this.autoExtendTargets
  1577. formData['articleCategory']=this.articleCategory
  1578. formData['age']=this.age
  1579. formData['carrier']=this.carrier
  1580. formData['platform']=this.platform
  1581. formData['ac']=this.ac
  1582. formData['interestActionMode']=this.interestActionMode;
  1583. this.$emit('getDirectedValue',formData)
  1584. },
  1585. //应用按钮
  1586. applicatiSubmit(){
  1587. // console.log('submit!', this.form);
  1588. if(this.getFormData('name')){
  1589. let formData=this.form.getFieldsValue()
  1590. // console.log(formData)
  1591. if(this.launchPrice=='custom'){
  1592. formData['launchPrice']=this.launchPriceArr
  1593. }
  1594. if(!this.regionValue!='NONE'){
  1595. // console.log('需要处理地域的值');
  1596. formData['city']=this.city
  1597. }
  1598. let userinfo=localStorage.getItem('pro__Login_Userinfo')
  1599. if(userinfo){
  1600. let userId=JSON.parse(userinfo).value.id
  1601. formData['userId']=userId
  1602. }
  1603. formData['activateType']=this.activateType
  1604. formData['deviceBrand']=this.deviceBrand
  1605. formData['autoExtendEnabled']=this.autoExtendEnabled
  1606. formData['autoExtendTargets']=this.autoExtendTargets
  1607. formData['articleCategory']=this.articleCategory
  1608. formData['age']=this.age
  1609. formData['carrier']=this.carrier
  1610. formData['platform']=this.platform
  1611. formData['ac']=this.ac
  1612. formData['interestActionMode']=this.interestActionMode
  1613. // formData['filterConvertedUsers']=this.interestActionMode
  1614. if(this.title=='新建定向包'){
  1615. postAction('/ctop/audiencePackage/add',formData).then((res)=>{
  1616. // console.log(res);
  1617. if(res.success){
  1618. this.$router.push('/modules/BatchCreate/directedPackage')
  1619. }else{
  1620. this.$message.error('定向包创建失败,请稍后重试')
  1621. }
  1622. })
  1623. }else{
  1624. formData['id']=this.editId
  1625. postAction('/ctop/audiencePackage/edit',formData).then((res)=>{
  1626. // console.log(res);
  1627. if(res.success){
  1628. this.$router.push('/modules/BatchCreate/directedPackage')
  1629. }else{
  1630. this.$message.error('定向包修改失败,请稍后重试')
  1631. }
  1632. })
  1633. }
  1634. }else{
  1635. this.$message.error('名称不能为空')
  1636. }
  1637. },
  1638. //取消按钮
  1639. cancel(){
  1640. this.$router.push('/modules/BatchCreate/directedPackage')
  1641. },
  1642. },
  1643. mounted() {
  1644. //手机品牌
  1645. getAction('sys/dictItem/list?_t=1594263117&dictId=7f907c1dab0a65ce6d115e082cd79acf&pageSize=100',{}).then((res)=>{
  1646. // console.log(res);
  1647. if(res.success){
  1648. res.result.records.forEach((item)=>{
  1649. this.deviceBrandOptions.push({
  1650. label:item.itemText,
  1651. value:item.itemValue
  1652. })
  1653. })
  1654. }
  1655. })
  1656. //文章分类
  1657. getAction('sys/dictItem/list?_t=1594263117&dictId=defad85851bf6b1751a49b33d8b13b3b&pageSize=100',{}).then((res)=>{
  1658. // console.log(res)
  1659. if(res.success){
  1660. res.result.records.forEach((item)=>{
  1661. this.articleCategoryOptions.push({
  1662. label:item.itemText,
  1663. value:item.itemValue
  1664. })
  1665. })
  1666. }
  1667. })
  1668. //受众安卓版本号
  1669. getAction('sys/dictItem/list?dictId=bba60d87ced96be177a772102b44d0f2&pageSize=100',{}).then((res)=>{
  1670. // console.log(res)
  1671. if(res.success){
  1672. res.result.records.forEach((item)=>{
  1673. this.androidOsvArr.push({
  1674. label:item.itemText,
  1675. value:item.itemValue
  1676. })
  1677. })
  1678. }
  1679. })
  1680. //受众安卓版本号
  1681. getAction('sys/dictItem/list?dictId=a989bb28cfba9f25b3711dfcd05281e7&pageSize=100',{}).then((res)=>{
  1682. // console.log(res)
  1683. if(res.success){
  1684. res.result.records.forEach((item)=>{
  1685. this.iosOsvArr.push({
  1686. label:item.itemText,
  1687. value:item.itemValue
  1688. })
  1689. })
  1690. }
  1691. })
  1692. let accountInfo = localStorage.getItem('accountInfo')
  1693. // console.log(accountInfo)
  1694. if (accountInfo!=null) {
  1695. this.accountInfo = JSON.parse(accountInfo)
  1696. if(this.accountInfo.value){
  1697. getAction('/ctop/audience/list',{
  1698. accountId:this.accountInfo.value
  1699. }).then((res)=>{
  1700. // console.log(res)
  1701. if(res.success){
  1702. res.data.forEach((item)=>{
  1703. item.key=item.custom_audience_id
  1704. })
  1705. this.retargetData=res.data;
  1706. this.retargetDataAll=res.data;
  1707. }
  1708. })
  1709. }
  1710. }
  1711. // console.log(this.accountInfo)
  1712. this.platformArr=JSON.parse(JSON.stringify(platformArr))
  1713. // this.platformArr = [...platformArr]
  1714. // console.log(this.$route.query,this.id)
  1715. if(this.$route.query.id||this.id){
  1716. this.title='修改定向包';
  1717. this.editId=this.$route.query.id || this.id
  1718. getAction('/ctop/audiencePackage/queryById',{
  1719. id:this.editId
  1720. }).then((res)=>{
  1721. // console.log(res);
  1722. this.form.setFieldsValue({
  1723. name:res.result.name,
  1724. landingType:res.result.landingType,
  1725. deliveryRange:res.result.deliveryRange,
  1726. gender:res.result.gender,
  1727. filterConvertedUsers:res.result.filterConvertedUsers,
  1728. })
  1729. if(res.result.landingType=='APP_ANDROID'){
  1730. this
  1731. }
  1732. this.autoExtendEnabled=res.result.autoExtendEnabled,
  1733. this.interestActionMode=res.result.interestActionMode;
  1734. this.ageArr=[];
  1735. this.ageArr=JSON.parse(JSON.stringify(ageArr))
  1736. // this.platformArr=[];
  1737. // this.platformArr=JSON.parse(JSON.stringify(platformArr))
  1738. this.carrierArr=[];
  1739. this.carrierArr=JSON.parse(JSON.stringify(carrierArr))
  1740. this.newUser=[];
  1741. this.newUser=JSON.parse(JSON.stringify(newUser))
  1742. this.networkArr=[];
  1743. this.networkArr=JSON.parse(JSON.stringify(networkArr))
  1744. res.result.age.forEach((item,index)=>{
  1745. this.ageArr.forEach((ele)=>{
  1746. if(ele.value==item){
  1747. ele.checked=true;
  1748. }
  1749. })
  1750. });
  1751. // res.result.platform.forEach((item,index)=>{
  1752. // this.platformArr.forEach((ele)=>{
  1753. // if(ele.value==item){
  1754. // ele.checked=true;
  1755. // }
  1756. // })
  1757. // });
  1758. if(res.result.landingType=='APP_ANDROID'){
  1759. this.platformArr.forEach((item)=>{
  1760. if(item.value!="ANDROID"){
  1761. item.disabled=true
  1762. }else{
  1763. item.disabled=false
  1764. }
  1765. })
  1766. }else if(res.result.landingType=='APP_IOS'){
  1767. this.platformArr.forEach((item)=>{
  1768. if(item.value!="IOS"){
  1769. item.disabled=true
  1770. }else{
  1771. item.disabled=false
  1772. }
  1773. })
  1774. }else{
  1775. this.platformArr.forEach((item)=>{
  1776. item.disabled=false
  1777. })
  1778. }
  1779. res.result.carrier.forEach((item,index)=>{
  1780. this.carrierArr.forEach((ele)=>{
  1781. if(ele.value==item){
  1782. ele.checked=true;
  1783. }
  1784. })
  1785. });
  1786. res.result.ac.forEach((item,index)=>{
  1787. this.networkArr.forEach((ele)=>{
  1788. if(ele.value==item){
  1789. ele.checked=true;
  1790. }
  1791. })
  1792. });
  1793. res.result.activateType.forEach((item,index)=>{
  1794. this.newUser.forEach((ele)=>{
  1795. if(ele.value==item){
  1796. ele.checked=true;
  1797. }
  1798. })
  1799. });
  1800. if(res.result.articleCategory.length){
  1801. this.articleType='articleCategory';
  1802. this.articleChecked=[];
  1803. this.articleChecked=res.result.articleCategory
  1804. }else{
  1805. this.articleType=''
  1806. }
  1807. if(res.result.deviceBrand.length){
  1808. this.deviceBrandType='byBrand';
  1809. this.brandChecked=res.result.deviceBrand
  1810. }else{
  1811. this.deviceBrandType=''
  1812. }
  1813. if(res.result.autoExtendTargets.length>0){
  1814. this.autoExtendTargetsChecked=res.result.autoExtendTargets
  1815. }else{
  1816. this.autoExtendTargetsChecked=[];
  1817. }
  1818. if(res.result.launchPrice.length>0){
  1819. this.launchPrice='custom';
  1820. this.launchPriceArr=res.result.launchPrice
  1821. }else{
  1822. this.launchPrice=''
  1823. }
  1824. })
  1825. }
  1826. },
  1827. }
  1828. </script>