newDirectedPackage.vue 60 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384
  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. .clear{
  64. position: absolute;
  65. top: 5px;
  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. }
  117. .rightBox{
  118. position: fixed;
  119. top: 22%;
  120. right: 20px;
  121. width: 230px;
  122. // height: 500px;
  123. max-height: 500px;
  124. border: 1px solid #ddd;
  125. border-radius: 10px;
  126. font-size: 12px;
  127. overflow: auto;
  128. .topBox,.bottomBox{
  129. padding: 10px 15px;
  130. background-color: #f9f9f9;
  131. border-bottom: 1px solid #eee;
  132. border-radius: 10px 10px 0 0;
  133. .title{
  134. background-color: #f9f9f9;
  135. font-size: 14px;
  136. text-align: left;
  137. margin: 0 0 10px;
  138. padding: 5px 0;
  139. font-weight: 400;
  140. border-bottom: 0;
  141. // border-radius: 10px;
  142. }
  143. .info p{
  144. margin-bottom: 6px;
  145. color: #999;
  146. }
  147. .info .num{
  148. color: #000;
  149. font-weight: 600;
  150. }
  151. }
  152. .bottomBox{
  153. background-color: #fff;
  154. border-bottom:0;
  155. .title{
  156. background-color: #FFF;
  157. }
  158. }
  159. }
  160. }
  161. }
  162. </style>
  163. <style lang="scss">
  164. .actionBottom{
  165. ul,li{
  166. margin: 0;
  167. padding: 0;
  168. list-style: none;
  169. }
  170. width: 70%;
  171. height: 400px;
  172. display:flex;
  173. margin-top: 20px;
  174. .action_left{
  175. width:60% ;
  176. margin-right: 2%;
  177. border: 1px solid #ccc;
  178. border-radius: 5px;
  179. padding: 10px 2px;
  180. .Taxonomic{
  181. padding: 0 10px;
  182. .Taxonomic_checkbox{
  183. margin-top: 10PX;
  184. height: 220px;
  185. border: 1px solid #ccc;
  186. border-radius: 5px;
  187. }
  188. .Taxonomic_relevant{
  189. font-size: 12px;
  190. margin-top: 10px;
  191. .Taxonomic_relevant_top{
  192. position: relative;
  193. display: block;
  194. height: 20px;
  195. line-height: 20px;
  196. .Taxonomic_relevant_top_more{
  197. position: absolute;
  198. top: 0;
  199. right: 0;
  200. font-size: 12px;
  201. display: block;
  202. height: 20px;
  203. line-height: 20px;
  204. }
  205. }
  206. .Taxonomic_relevant_bottom{
  207. display: block;
  208. height: 20px;
  209. line-height: 20px;
  210. .Taxonomic_relevant_bottom_item{
  211. margin-right: 5px;
  212. }
  213. }
  214. }
  215. }
  216. .keyWords_box_title{
  217. font-size: 16px;
  218. font-weight: 600;
  219. color: #000;
  220. height: 35px;
  221. line-height: 35px;
  222. background-color: rgb(248,249,250);
  223. }
  224. .keyWords_box_list{
  225. height: 185px;
  226. overflow: auto;
  227. li{
  228. height: 30px;
  229. line-height: 30px;
  230. font-size: 14px;
  231. color: #333;
  232. .caozuo{
  233. display: none;
  234. // display: inline-block;
  235. width:50%;
  236. text-align: right;
  237. .delete{
  238. margin-left: 5px;
  239. }
  240. .searchKeyWord{
  241. margin-left: 15px;
  242. }
  243. }
  244. .mingzi{
  245. display: inline-block;
  246. width: 30%;
  247. }
  248. .renshu{
  249. display: inline-block;
  250. width: 15%;
  251. line-height: 30px;
  252. height: 30px;
  253. }
  254. }
  255. }
  256. .keyWords_box_list li:hover .caozuo{
  257. display: inline-block;
  258. }
  259. }
  260. .action_right{
  261. width: 35%;
  262. height: 100%;
  263. border-radius: 5px;
  264. border: 1px solid #ccc;
  265. .action_right_title{
  266. background-color: rgb(248,249,250);
  267. padding: 10px 10px 0;
  268. border-radius: 5px 5px 0 0;
  269. border-bottom: 1px solid #ccc;
  270. position: relative;
  271. }
  272. .action_right_sum{
  273. display: block;
  274. margin-bottom: 5px;
  275. height: 20px;
  276. line-height: 20px;
  277. font-size: 14px;
  278. color: #333;
  279. }
  280. .action_right_info{
  281. display: block;
  282. margin-bottom: 5px;
  283. height: 20px;
  284. line-height: 20px;
  285. font-size: 14px;
  286. color: #999;
  287. }
  288. .action_right_btn{
  289. position: absolute;
  290. top: 0px;
  291. right: -5px;
  292. }
  293. .action_right_bottom{
  294. .action_right_option{
  295. border-bottom: 1px solid #ccc;
  296. }
  297. .ant-select-selection{
  298. border: 0;
  299. }
  300. .coverPeople{
  301. margin-left: 5px;
  302. }
  303. .caozuo{
  304. display: none;
  305. .delete{
  306. margin-left: 5px;
  307. }
  308. .searchKeyWord{
  309. margin-left: 2px;
  310. }
  311. }
  312. .mingzi{
  313. display: inline-block;
  314. width: 70px;
  315. }
  316. .renshu{
  317. display: inline-block;
  318. width: 40px;
  319. line-height: 20px;
  320. height: 20px;
  321. }
  322. .action_right_select_list{
  323. padding: 5px 10px;
  324. height: 250px;
  325. overflow: auto;
  326. }
  327. .action_right_select_list li{
  328. line-height: 20px;
  329. height: 20px;
  330. }
  331. .action_right_select_list li:hover .caozuo{
  332. display: inline-block;
  333. }
  334. .action_right_AISelect{
  335. height: 30px;
  336. line-height: 30px;
  337. font-size: 14px;
  338. padding: 5px 10px;
  339. border-top: 1px solid #ccc;
  340. }
  341. }
  342. }
  343. }
  344. .ant-tooltip-inner,.ant-tooltip,.ant-tooltip-arrow::before{
  345. background-color: #fff;
  346. color: #666;
  347. font-size: 12px;
  348. }
  349. </style>
  350. <style lang="scss">
  351. .region{
  352. width: 70%;
  353. margin-top: 10px;
  354. .region_input{
  355. width: 60%;
  356. }
  357. .ant-tabs-bar{
  358. border: 0;
  359. }
  360. }
  361. </style>
  362. <template>
  363. <div class="newDirectedPackage">
  364. <div class="title">
  365. 新建定向包
  366. </div>
  367. <div class="optBOX">
  368. <div class="leftBox">
  369. <a-form :form="form">
  370. <a-form-item label="定向包名称" :label-col="labelCol" :wrapper-col="wrapperCol">
  371. <a-input placeholder="请输入定向包名称,至多20个字符" style="width:40%" v-decorator="['name', { rules: [{ required: true, message: '请输入定向包名称' }] }]" />
  372. </a-form-item>
  373. <a-form-item label="定向包类型" :label-col="labelCol" :wrapper-col="wrapperCol">
  374. <a-radio-group v-decorator="['landingType', { initialValue:'EXTERNAL' }]" @change='landingTypeChange' button-style="solid">
  375. <a-radio-button value="EXTERNAL">落地页</a-radio-button>
  376. <a-radio-button value="APP_ANDROID">应用下载-安卓</a-radio-button>
  377. <a-radio-button value="APP_IOS">应用下载-IOS</a-radio-button>
  378. <a-radio-button value="AWEME">抖音推广</a-radio-button>
  379. </a-radio-group>
  380. </a-form-item>
  381. <a-form-item label="投放范围" :label-col="labelCol" :wrapper-col="wrapperCol">
  382. <a-radio-group v-decorator="['deliveryRange', { initialValue:'DEFAULT' }]" @change='landingTypeChange' button-style="solid">
  383. <a-radio-button value="DEFAULT">默认</a-radio-button>
  384. <a-radio-button value="UNION">穿山甲
  385. <a-tooltip>
  386. <template slot="title">
  387. 基于4亿日活跃用户大数据积累,顶尖AI智能推荐技术,今日头条与最广泛的合作伙伴携手打造全新移动生态联盟
  388. </template>
  389. <a-icon type="question-circle" />
  390. </a-tooltip>
  391. </a-radio-button>
  392. </a-radio-group>
  393. </a-form-item>
  394. <a-form-item label="媒体" :label-col="labelCol" :wrapper-col="wrapperCol">
  395. <a-radio-group v-decorator="['medialType', { initialValue:1 }]" button-style="solid">
  396. <a-radio-button :value="1">头条</a-radio-button>
  397. </a-radio-group>
  398. </a-form-item>
  399. <a-form-item label="地域" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  400. <a-radio-group button-style="solid" v-model="regionValue">
  401. <a-radio-button value="">不限</a-radio-button>
  402. <a-radio-button value="REGION_LEVEL_PROVINCE">按省市</a-radio-button>
  403. <a-radio-button value="REGION_LEVEL_DISTRICT">按区县</a-radio-button>
  404. <a-radio-button value="REGION_LEVEL_BUSINESS_DISTRICT">按商圈</a-radio-button>
  405. </a-radio-group>
  406. <div class="region" v-show="regionValue!=''">
  407. <!-- 省市 -->
  408. <div class="provincyCity" v-if="regionValue=='REGION_LEVEL_PROVINCE'">
  409. <div class="region_input">
  410. <a-input-search placeholder="输入搜索的省市" enter-button />
  411. </div>
  412. <div class="tabChange">
  413. <div class="tabBox">
  414. <a-tabs v-model="cityTab" @change="cityTabChange">
  415. <a-tab-pane key="geography" tab="地理划分">
  416. <linkMultiSelect title='省份' :listArr='[]' :maxLayers='2' :listUrl='regionCityListUrl' @getSelectedArr='getSelectedCityArr'/>
  417. </a-tab-pane>
  418. <a-tab-pane key="development" tab="发展划分" >
  419. <linkMultiSelect title='等级' :listArr='[]' url='' :maxLayers='3' :listUrl='regionCityListUrl' @getSelectedArr='getSelectedCityArr'/>
  420. </a-tab-pane>
  421. </a-tabs>
  422. </div>
  423. </div>
  424. </div>
  425. <!-- 区县 -->
  426. <div class="district" v-else-if="regionValue=='REGION_LEVEL_DISTRICT'">
  427. <linkMultiSelect title='省份' :listArr='[]' :maxLayers='3' :listUrl='regionCityListUrl' @getSelectedArr='getSelectedCityArr'/>
  428. </div>
  429. <!-- 商圈 -->
  430. <!-- <div class="businessCircle" v-else>
  431. <div class="tabChange">
  432. <div class="tabBox">
  433. <a-tabs v-model="businessTab" @change="businessTabChange">
  434. <a-tab-pane key="businessCircle" tab="商圈">
  435. <a-cascader :options="businessOptionsArr" change-on-select @change="businessChange" />
  436. <linkMultiSelect :titleArr='["商圈"]' :listArr='[]' @getSelectedArr='getSelectedCityArr'/>
  437. </a-tab-pane>
  438. <a-tab-pane key="addFromMap" tab="从地图添加" >
  439. <a-input-search placeholder="请输入搜索地址" v-model="MapselectValue" @search="MapSearch">
  440. <a-button slot="enterButton">
  441. 搜索
  442. </a-button>
  443. </a-input-search>
  444. </a-tab-pane>
  445. </a-tabs>
  446. </div>
  447. </div>
  448. </div> -->
  449. <div class="region_people">
  450. <a-radio-group v-model="regionPeopleValue" @change="regionPeopleChange">
  451. <a-radio value="HOME">居住在该地区的用户</a-radio>
  452. <a-radio value="TRAVEL"> 到该地区旅行的用户</a-radio>
  453. <a-radio value="ALL">该地区内的所有用户</a-radio>
  454. <a-radio value="CURRENT">正在该地区的用户</a-radio>
  455. </a-radio-group>
  456. </div>
  457. </div>
  458. </a-form-item>
  459. <a-form-item label="性别" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  460. <a-radio-group v-decorator="['gender', {initialValue:'NONE' }]" button-style="solid">
  461. <a-radio-button value="NONE">不限</a-radio-button>
  462. <a-radio-button value="GENDER_MALE">男</a-radio-button>
  463. <a-radio-button value="GENDER_FEMALE">女</a-radio-button>
  464. </a-radio-group>
  465. </a-form-item>
  466. <a-form-item label="年龄" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  467. <radioCheck :checkArr='ageArr' @getSonValue='getAgeSelect' />
  468. </a-form-item>
  469. <a-form-item label="精选流量包" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  470. <a-radio-group button-style="solid" v-decorator="['medialType', { initialValue:''}]">
  471. <a-radio-button value="">不限</a-radio-button>
  472. <a-radio-button value="men" :disabled='getFormData("deliveryRange")!="UNION"'>应用软件精选</a-radio-button>
  473. <a-radio-button value="women" :disabled='getFormData("deliveryRange")!="UNION"'>游戏精选</a-radio-button>
  474. </a-radio-group>
  475. <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />精选流量包仅支持穿山甲、穿山甲-精选游戏广告位</span>
  476. </a-form-item>
  477. <a-form-item label="自定义人群" :label-col="labelCol" :wrapper-col="wrapperCol">
  478. <a-radio-group v-model="customCrowd" button-style="solid">
  479. <a-radio-button value="NONE">不限</a-radio-button>
  480. <a-radio-button value="CUSTOMt_CROWED">自定义人群</a-radio-button>
  481. </a-radio-group>
  482. </a-form-item>
  483. <a-form-item label="定向逻辑" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="customCrowd=='CUSTOMt_CROWED'">
  484. <a-radio-group v-model="directLogic" button-style="solid" @change="directLogicChange">
  485. <a-radio-button value="RETARGETING_INCLUDE">定向</a-radio-button>
  486. <a-radio-button value="RETARGETING_EXCLUDE">排除</a-radio-button>
  487. <a-radio-button value="ALL">同时定向排除</a-radio-button>
  488. </a-radio-group>
  489. </a-form-item>
  490. <div class="zidingyirenqun" v-if="customCrowd=='CUSTOMt_CROWED'">
  491. <a-form-item class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  492. <a-input placeholder="请输入人群包名称或者ID" v-model="dxInputValue" v-if="directLogic!='ALL'" style="width:50%">
  493. <a-icon type="search" slot="addonAfter"/>
  494. </a-input>
  495. <div class="dingxiang" v-if="directLogic=='RETARGETING_INCLUDE'">
  496. </div>
  497. <div class="paichu" v-if="directLogic=='RETARGETING_EXCLUDE'">
  498. </div>
  499. <div class="dingxiang_paichu" v-if="directLogic=='ALL'">
  500. </div>
  501. </a-form-item>
  502. </div>
  503. <a-form-item label="行为兴趣" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  504. <a-radio-group v-model="interestActionMode" button-style="solid">
  505. <a-radio-button value="UNLIMITED">不限</a-radio-button>
  506. <a-radio-button value="RECOMMEND">
  507. 系统推荐
  508. <a-tooltip>
  509. <template slot="title">
  510. 如与自定义人群包同时使用,系统推荐不生效
  511. </template>
  512. <a-icon type="question-circle" />
  513. </a-tooltip>
  514. </a-radio-button>
  515. <a-radio-button value="CUSTOM">自定义</a-radio-button>
  516. </a-radio-group>
  517. </a-form-item>
  518. <div class="interestActionMode" v-show="interestActionMode=='CUSTOM'">
  519. <a-form-item label="行为" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  520. <div>
  521. <span style="margin-right:5px">在</span>
  522. <a-select
  523. mode="multiple"
  524. label-in-value
  525. style="width: 210px"
  526. placeholder="所有行为场景中"
  527. @change="actionSceneChange"
  528. :maxTagCount='1'
  529. >
  530. <a-select-option value='E-COMMERCE'> 电商互动行为</a-select-option>
  531. <a-select-option value='NEWS'> 咨询互动行为</a-select-option>
  532. <a-select-option value='APP'> APP推广行为</a-select-option>
  533. </a-select>
  534. <span>中,选择用户</span>
  535. <a-select v-model="actionDays" style="width: 90px">
  536. <a-select-option :value='7'>7天 </a-select-option>
  537. <a-select-option :value='15'>15天 </a-select-option>
  538. <a-select-option :value='30'>30天 </a-select-option>
  539. <a-select-option :value='60'>60天 </a-select-option>
  540. <a-select-option :value='90'>90天 </a-select-option>
  541. <a-select-option :value='180'>180天 </a-select-option>
  542. <a-select-option :value='365'>365天 </a-select-option>
  543. </a-select>
  544. <span>内发生的行为:</span>
  545. </div>
  546. <div class="actionBottom">
  547. <div class="action_left">
  548. <a-tabs default-active-key="1" >
  549. <a-tab-pane key="1" tab="添加类目词">
  550. <div class="Taxonomic">
  551. <div class="Taxonomic_search">
  552. <a-input-search placeholder="请输入行为类目词" style="width: 100%" @search="TaxonomicSearch" />
  553. </div>
  554. <div class="Taxonomic_checkbox">
  555. </div>
  556. <div class="Taxonomic_relevant">
  557. <span class="Taxonomic_relevant_top">
  558. <span class="Taxonomic_relevant_top_title">{{}}相关词:</span>
  559. <a-button type='link' class="Taxonomic_relevant_top_more">更多></a-button>
  560. </span>
  561. <span class="Taxonomic_relevant_bottom">
  562. <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+游戏</a>
  563. <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+手游</a>
  564. <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+王者荣耀</a>
  565. <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+吃鸡</a>
  566. </span>
  567. </div>
  568. </div>
  569. </a-tab-pane>
  570. <a-tab-pane key="2" tab="添加关键词" >
  571. <div class="Taxonomic keyWord">
  572. <div class="Taxonomic_search">
  573. <a-input-search placeholder="请输入行为类目词或关键词" style="width: 100%" @search="keyWordSearch" />
  574. </div>
  575. <div class="Taxonomic_checkbox keyWords_box">
  576. <div class="keyWords_box_title">
  577. {{}}
  578. </div>
  579. <ul class="keyWords_box_list">
  580. <li>
  581. <span class="mingzi">游戏</span>
  582. <span class="renshu">21亿</span>
  583. <span class="caozuo" >
  584. <a href="javascript:;" class="addKeywords">添加</a>
  585. <a href="javascript:;" class="searchKeyWord">查关键词</a>
  586. </span>
  587. </li>
  588. </ul>
  589. </div>
  590. <div class="Taxonomic_relevant">
  591. <span class="Taxonomic_relevant_top">
  592. <a href="javascript:;" class="Taxonomic_relevant_bottom_item">添加全部“{{}}”相关词</a>
  593. </span>
  594. </div>
  595. </div>
  596. </a-tab-pane>
  597. </a-tabs>
  598. </div>
  599. <div class="action_right">
  600. <div class="action_right_title">
  601. <span class="action_right_sum">还可以添加行为:{{}}个</span>
  602. <span class="action_right_info">
  603. <span>类目词:{{}}</span>
  604. <span>关键词:{{}}</span>
  605. </span>
  606. <a-button type='link' class="action_right_btn">清空</a-button>
  607. </div>
  608. <div class="action_right_bottom">
  609. <div class="action_right_option">
  610. <a-select v-model="actOrint" style="width: 80px;" >
  611. <a-select-option value="all">
  612. 全部
  613. </a-select-option>
  614. <a-select-option value="lucy">
  615. 类目词
  616. </a-select-option>
  617. <a-select-option value="disabled" >
  618. 关键词
  619. </a-select-option>
  620. </a-select>
  621. <span class="coverPeople">覆盖人数</span>
  622. </div>
  623. <div class="action_right_select_list">
  624. <ul>
  625. <li>
  626. <span class="mingzi">游戏</span>
  627. <span class="renshu">21亿</span>
  628. <span class="caozuo" >
  629. <a href="javascript:;" class="delete">删除</a>
  630. <a href="javascript:;" class="searchKeyWord">查关键词</a>
  631. </span>
  632. </li>
  633. <li>
  634. <span class="mingzi">游戏</span>
  635. <span class="renshu">21亿</span>
  636. <span class="caozuo" >
  637. <a href="javascript:;" class="delete">删除</a>
  638. <a href="javascript:;" class="searchKeyWord">查关键词</a>
  639. </span>
  640. </li>
  641. </ul>
  642. </div>
  643. <div class="action_right_AISelect">
  644. <a-tooltip class="actionTooltip">
  645. <template slot="title">
  646. 已添加的行为关键词需大于20个,才可以使用自动选词
  647. </template>
  648. <a-button type='link' :disabled='AIselect'>使用自动选词</a-button>
  649. </a-tooltip>
  650. <a-tooltip class="actionTooltip">
  651. <template slot="title">
  652. 系统根据行为定向所有已选结果,自动推荐词包
  653. </template>
  654. <a-icon type="question-circle" />
  655. </a-tooltip>
  656. </div>
  657. </div>
  658. </div>
  659. </div>
  660. </a-form-item>
  661. <a-form-item label="兴趣" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  662. </a-form-item>
  663. </div>
  664. <a-form-item label="平台" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  665. <radioCheck :checkArr='platformArr' @getSonValue='getPlatForm' />
  666. </a-form-item>
  667. <a-form-item label="过滤已安装" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="landingTypeValue=='APP_ANDROID'">
  668. <a-radio-group button-style="solid" v-decorator="['hideIfExists', {initialValue:0 }]" >
  669. <a-radio-button :value='0'>不过滤</a-radio-button>
  670. <a-radio-button :value="1">过滤</a-radio-button>
  671. </a-radio-group>
  672. </a-form-item>
  673. <a-form-item label="安卓版本" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="landingTypeValue=='APP_ANDROID'">
  674. <a-select style="width: 200px" v-decorator="['androidOsv', {initialValue:'0.0' }]" @change="androidOsvChange">
  675. <a-select-option v-for="(item,index) in androidOsvArr" :key="index" :value='item.value'>
  676. {{item.label}}
  677. </a-select-option>
  678. </a-select>
  679. </a-form-item>
  680. <a-form-item label="IOS版本" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="landingTypeValue=='APP_IOS'">
  681. <a-select style="width: 200px" v-decorator="['iosOsv', {initialValue:'0.0' }]" @change="iosOsvChange">
  682. <a-select-option v-for="(item,index) in iosOsvArr" :key="index" :value='item.value'>
  683. {{item.label}}
  684. </a-select-option>
  685. </a-select>
  686. </a-form-item>
  687. <a-form-item label="过滤已转化用户" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  688. <a-radio-group v-decorator="['filterConvertedUsers', {initialValue:'NO_EXCLUDE' }]" button-style="solid">
  689. <a-radio-button value="NO_EXCLUDE">不过滤</a-radio-button>
  690. <a-radio-button value="AD">广告计划</a-radio-button>
  691. <a-radio-button value="CAMPAIGN">广告组</a-radio-button>
  692. <a-radio-button value="ADVERTISER">广告账户</a-radio-button>
  693. </a-radio-group>
  694. <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />过滤已转化不支持投放目标为展示、点击计划,不支持受众预估
  695. </span>
  696. </a-form-item>
  697. <a-form-item label="运营商" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  698. <radioCheck :checkArr='carrierArr' @getSonValue='getCarrier' />
  699. </a-form-item>
  700. <a-form-item label="网络" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  701. <radioCheck :checkArr='networkArr' @getSonValue='getAc' />
  702. </a-form-item>
  703. <a-form-item label="文章类型" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  704. <a-radio-group button-style="solid" v-model="articleType">
  705. <a-radio-button value="">不限</a-radio-button>
  706. <a-radio-button value="articleCategory">文章分类</a-radio-button>
  707. </a-radio-group>
  708. <div v-if="articleType=='articleCategory'" class="deviceBrand">
  709. <!-- <div class="selectBox">
  710. <div class="selectLeft">
  711. <div class="title">文章分类</div>
  712. <div class="selectBox1">
  713. <span class="selectLists"><a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" > 全选 </a-checkbox></span>
  714. <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="checkGroupChange" class="selectList" ></a-checkbox-group>
  715. </div>
  716. </div>
  717. <div class="selectRight">
  718. <div class="title">已选<a-button class="clear" type="link" @click="clearAll">清空</a-button></div>
  719. <div class="selectBox1">
  720. <span class="selectListitem" v-for="(item,index) in checkedList" :key='index'>{{item}}<a-icon type="close" id="close" @click="deleteItem(item)" /></span>
  721. </div>
  722. </div>
  723. </div> -->
  724. <singleLayersSelecte title='文章类型' :listArr='articleCategoryOptions' @getCheckedList='getArticleCategory'/>
  725. </div>
  726. </a-form-item>
  727. <a-form-item label="手机品牌" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  728. <a-radio-group v-model="deviceBrandType" button-style="solid">
  729. <a-radio-button value="">不限</a-radio-button>
  730. <a-radio-button value="byBrand">按品牌</a-radio-button>
  731. </a-radio-group>
  732. <div v-if="deviceBrandType=='byBrand'" class="deviceBrand">
  733. <!-- <div class="selectBox">
  734. <div class="selectLeft">
  735. <div class="title">手机品牌</div>
  736. <div class="selectBox1">
  737. <span class="selectLists"><a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" > 全选 </a-checkbox></span>
  738. <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="checkGroupChange" class="selectList" ></a-checkbox-group>
  739. </div>
  740. </div>
  741. <div class="selectRight">
  742. <div class="title">已选<a-button class="clear" type="link" @click="clearAll">清空</a-button></div>
  743. <div class="selectBox1">
  744. <span class="selectListitem" v-for="(item,index) in checkedList" :key='index'>{{item}}<a-icon type="close" id="close" @click="deleteItem(item)" /></span>
  745. </div>
  746. </div>
  747. </div> -->
  748. <singleLayersSelecte title='手机品牌' :listArr='deviceBrandOptions' @getCheckedList='getDeviceBrand' />
  749. </div>
  750. </a-form-item>
  751. <a-form-item label="手机价格" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  752. <a-radio-group v-model="launchPrice" button-style="solid">
  753. <a-radio-button value="">不限</a-radio-button>
  754. <a-radio-button value="custom">自定义</a-radio-button>
  755. </a-radio-group>
  756. <span v-if="launchPrice=='custom'">
  757. <a-slider range :marks="marks" :default-value="[2000, 7000]" :step="null" :min='0' :max='11000' @change="slideChange" />
  758. </span>
  759. <span v-else></span>
  760. </a-form-item>
  761. <a-form-item label="新用户" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  762. <radioCheck :checkArr='newUser' @getSonValue='getNewUser' />
  763. </a-form-item>
  764. <a-form-item label="智能放量" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  765. <a-radio-group v-decorator="['autoExtendEnabled', { initialValue:0 }]" button-style="solid">
  766. <a-radio-button :value="0">不启用</a-radio-button>
  767. <a-radio-button :value="1">启用</a-radio-button>
  768. </a-radio-group>
  769. <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />智能放量不支持受众预估</span>
  770. <div v-if="getFormData('autoExtendEnabled')==1" class="deviceBrand">
  771. <singleLayersSelecte title='可放开定向' :listArr='autoExtendOptions' @getCheckedList='getAutoExtendEnabled'/>
  772. </div>
  773. </a-form-item>
  774. <a-form-item label="保存为模板" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
  775. <a-radio-group default-value="no" button-style="solid">
  776. <a-radio value="yes">是</a-radio>
  777. <a-radio value="no">否</a-radio>
  778. </a-radio-group>
  779. </a-form-item>
  780. <a-form-item :wrapper-col="{ span: 14, offset: 10 }" :label-col="labelCol">
  781. <a-button style="margin-right: 30px;" @click="cancel">
  782. 取消
  783. </a-button>
  784. <a-button type="primary" @click="applicatiSubmit">
  785. 应用
  786. </a-button>
  787. </a-form-item>
  788. </a-form>
  789. </div>
  790. <div class="rightBox">
  791. <div class="topBox">
  792. <p class="title">预估可覆盖</p>
  793. <div class="info">
  794. <p>抖音视频:<span class="num">{{}}</span>万日活跃用户</p>
  795. <p>西瓜视频:<span class="num">{{}}</span>万日活跃用户</p>
  796. <p>火山视频:<span class="num">{{}}</span>万日活跃用户</p>
  797. <p>今日头条:<span class="num">{{}}</span>万日活跃用户</p>
  798. </div>
  799. </div>
  800. <div class="bottomBox">
  801. <p class="title">受众信息</p>
  802. <div class="info">
  803. <p>性别:<span class="num">{{}}</span></p>
  804. <p>年龄:<span class="num">{{}}</span></p>
  805. <p>平台:<span class="num">{{}}</span></p>
  806. <p>网络:<span class="num">{{}}</span></p>
  807. <p>运营商:<span class="num">{{}}</span></p>
  808. <p>新用户:<span class="num">{{}}</span></p>
  809. <p>手机品牌:<span class="num">{{}}</span></p>
  810. </div>
  811. </div>
  812. </div>
  813. </div>
  814. </div>
  815. </template>
  816. <script>
  817. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  818. const plainOptions = ['Apple', 'Pear', 'Orange','44','550','9982','5525'];
  819. const defaultCheckedList = ['Apple', 'Orange'];
  820. import radioCheck from './radioCheck';
  821. import linkMultiSelect from './linkMultiSelect'
  822. import singleLayersSelecte from './singleLayerSelecte'
  823. let newUser=[
  824. {
  825. value:'',
  826. title:'不限'
  827. },
  828. {
  829. value:'oneMonth',
  830. title:'一月以内'
  831. },
  832. {
  833. value:'twoMonth',
  834. title:'一月到三个月'
  835. },
  836. {
  837. value:'treeMonth',
  838. title:'三月以上'
  839. }
  840. ]
  841. let networkArr=[
  842. {
  843. value:'',
  844. title:'不限'
  845. },
  846. {
  847. value:'WIFI',
  848. title:'WIFI'
  849. },
  850. {
  851. value:'2G',
  852. title:'2G'
  853. },
  854. {
  855. value:'3G',
  856. title:'3G'
  857. },
  858. {
  859. value:'4G',
  860. title:'4G'
  861. },
  862. ]
  863. let carrierArr=[
  864. {
  865. value:'',
  866. title:'不限'
  867. },
  868. {
  869. value:'MOBILE',
  870. title:'移动'
  871. },
  872. {
  873. value:'UNICOM',
  874. title:'联通'
  875. },
  876. {
  877. value:'TELCOM',
  878. title:'电信'
  879. },
  880. ]
  881. let platformArr=[
  882. {
  883. value:'',
  884. title:'不限',
  885. disabled:false
  886. },
  887. {
  888. value:'ANDROID',
  889. title:'Android',
  890. disabled:false
  891. },
  892. {
  893. value:'IOS',
  894. title:'iOS',
  895. disabled:false
  896. },
  897. ]
  898. let ageArr=[
  899. {
  900. value:'',
  901. title:'不限'
  902. },
  903. {
  904. value:'AGE_BETWEEN_18_23',
  905. title:' 18-23岁'
  906. },
  907. {
  908. value:'AGE_BETWEEN_24_30',
  909. title:'24-30岁'
  910. },
  911. {
  912. value:'AGE_BETWEEN_31_40',
  913. title:'31-40岁'
  914. },
  915. {
  916. value:'AGE_BETWEEN_41_49',
  917. title:'41-49岁'
  918. },
  919. {
  920. value:'AGE_ABOVE_50',
  921. title:'大于等于50岁'
  922. },
  923. ]
  924. let options=[
  925. {
  926. value: 'zhejiang',
  927. label: 'Zhejiang',
  928. children: [
  929. {
  930. value: 'hangzhou',
  931. label: 'Hangzhou',
  932. children: [
  933. {
  934. value: 'xihu',
  935. label: 'West Lake',
  936. },
  937. ],
  938. },
  939. ],
  940. },
  941. {
  942. value: 'jiangsu',
  943. label: 'Jiangsu',
  944. children: [
  945. {
  946. value: 'nanjing',
  947. label: 'Nanjing',
  948. children: [
  949. {
  950. value: 'zhonghuamen',
  951. label: 'Zhong Hua Men',
  952. },
  953. ],
  954. },
  955. ],
  956. },
  957. ];
  958. let autoExtendOptions=[
  959. {
  960. label:'地域',
  961. value:'REGION'
  962. },
  963. {
  964. label:'性别',
  965. value:'GENDER'
  966. },
  967. {
  968. label:'年龄',
  969. value:'AGE'
  970. },
  971. {
  972. label:'行为兴趣',
  973. value:'INTEREST_ACTION'
  974. },
  975. {
  976. label:'自定义人群',
  977. value:'CUSTOM_AUDIENCE'
  978. },
  979. ]
  980. export default {
  981. components:{
  982. radioCheck,
  983. linkMultiSelect,
  984. singleLayersSelecte
  985. },
  986. data() {
  987. return {
  988. labelCol: { span: 4 },
  989. wrapperCol: { span: 14 },
  990. launchPrice:'',//手机价格
  991. launchPriceArr:[2000, 7000],
  992. deviceBrandType:'',
  993. deviceBrand:[],//手机品牌
  994. deviceBrandOptions:[],
  995. form: this.$form.createForm(this),
  996. marks: {
  997. 0: '0',
  998. 1000: '',
  999. 2000: '2000元',
  1000. 2500: '',
  1001. 3000: '',
  1002. 3500: '',
  1003. 4000: '',
  1004. 4500: '',
  1005. 5000: '5000元',
  1006. 5500: '',
  1007. 6000: '',
  1008. 6500: '',
  1009. 7000: '',
  1010. 8000: '',
  1011. 9000: '',
  1012. 10000: '10000元',
  1013. 11000: {
  1014. style: {
  1015. color: '#f50',
  1016. },
  1017. label: <strong>11000元</strong>,
  1018. },
  1019. },
  1020. //选择框
  1021. // checkedList: defaultCheckedList,
  1022. // indeterminate: true,
  1023. // checkAll: false,
  1024. // plainOptions,
  1025. newUser,//新用户的每一项值
  1026. networkArr,//网络
  1027. carrierArr,//运营商
  1028. ageArr,//受众年龄
  1029. platformArr,//受众平台
  1030. //地域下的人群的受众位置分类
  1031. regionPeopleValue:'HOME',
  1032. regionValue:'',//地域的选择项
  1033. cityTab:'geography',//省市下的tab切换
  1034. businessTab:'businessCircle',//商圈的tab值
  1035. businessOptionsArr:[],//商圈的联动数据
  1036. MapselectValue:undefined,//地图的搜索地址
  1037. //行为兴趣选择
  1038. interestActionMode:'UNLIMITED',
  1039. actionScene:[],//行为场景
  1040. actionDays:30,//行为天数
  1041. actOrint:'all',
  1042. TaxonomicValue:undefined,//行为下的类目词
  1043. keyWordValue:undefined,//行为下的关键词
  1044. AIselect:true,//行为下的自动选词是否可用
  1045. regionCityListUrl:'ctop/bytedanceAreaInfo/list',
  1046. regionCountyListUrl:'ctop/bytedanceAreaInfo/list',
  1047. articleType:'',//文章分类
  1048. // flowPacket:true,//默认精选流量包不可修改 只有穿山甲是才可以修改
  1049. autoExtendEnabled:0,//智能放量是否开启
  1050. autoExtendOptions,//智能投放可选定向数组
  1051. autoExtendTargets:[],//智能放量开启后的选择数据----------需传递的参数
  1052. articleCategoryOptions:[],//文章分类
  1053. articleCategory:[],// 文章分类选中的数据-----------传递的参数
  1054. age:[],//选中的年龄段-------需要传递的参数
  1055. carrier:[], //选中的受众运营商----------需要传递的参数
  1056. ac:[], //选中的受众网络类型---------------需要传递的参数
  1057. landingTypeValue:'',//定向包类型的值 用来判断平台的值
  1058. androidOsvArr:[],//受众安卓版本号数组
  1059. iosOsvArr:[],//受众ios版本号数组
  1060. platform:[],//受众平台-------------传递参数
  1061. activateType:[],//用户首次激活时间---------传递参数
  1062. customCrowd:'NONE',//自定义人群 选择的值
  1063. directLogic:'RETARGETING_INCLUDE',//定向逻辑的值
  1064. dxInputValue:undefined,//自定义人群包下面的搜索框(定向/排除)
  1065. }
  1066. },
  1067. methods: {
  1068. //获取表单的某一个属性值
  1069. getFormData(className) {
  1070. return this.form.getFieldValue(className)
  1071. },
  1072. //定向包类型
  1073. landingTypeChange(e){
  1074. console.log(e.target.value);
  1075. this.landingTypeValue=e.target.value;
  1076. if(e.target.value=='APP_ANDROID'){
  1077. this.platformArr.forEach((item)=>{
  1078. if(item.value!="ANDROID"){
  1079. item.disabled=true
  1080. }else{
  1081. item.disabled=false
  1082. }
  1083. })
  1084. }else if(e.target.value=='APP_IOS'){
  1085. this.platformArr.forEach((item)=>{
  1086. if(item.value!="IOS"){
  1087. item.disabled=true
  1088. }else{
  1089. item.disabled=false
  1090. }
  1091. })
  1092. }else{
  1093. this.platformArr.forEach((item)=>{
  1094. item.disabled=false
  1095. })
  1096. }
  1097. },
  1098. //安卓版本号
  1099. androidOsvChange(val){
  1100. // console.log(val);
  1101. this.form.setFieldsValue({
  1102. androidOsv: val
  1103. });
  1104. // console.log(this.form.getFieldValue('androidOsv'))
  1105. },
  1106. //ios版本号
  1107. iosOsvChange(val){
  1108. // console.log(val);
  1109. this.form.setFieldsValue({
  1110. iosOsv: val
  1111. });
  1112. // console.log(this.form.getFieldValue('androidOsv'))
  1113. },
  1114. //应用按钮
  1115. applicatiSubmit(){
  1116. console.log('submit!', this.form);
  1117. let formData=this.form.getFieldsValue()
  1118. console.log(formData)
  1119. if(this.launchPrice=='custom'){
  1120. formData['launchPrice']=this.launchPriceArr
  1121. }
  1122. if(!this.regionValue==''){
  1123. console.log('需要处理地域的值')
  1124. }
  1125. let userinfo=localStorage.getItem('pro__Login_Userinfo')
  1126. if(userinfo){
  1127. let userId=JSON.parse(userinfo).value.id
  1128. formData['userId']=userId
  1129. }
  1130. formData['activateType']=this.activateType
  1131. formData['deviceBrand']=this.deviceBrand
  1132. formData['autoExtendEnabled']=this.autoExtendEnabled
  1133. formData['autoExtendTargets']=this.autoExtendTargets
  1134. formData['articleCategory']=this.articleCategory
  1135. formData['age']=this.age
  1136. formData['carrier']=this.carrier
  1137. formData['ac']=this.ac
  1138. formData['interestActionMode']=this.interestActionMode
  1139. postAction('/ctop/audiencePackage/add',formData).then((res)=>{
  1140. console.log(res)
  1141. })
  1142. // formData['launchPrice']=this.
  1143. // this.$router.push('/modules/BatchCreate/directionalPackage')
  1144. },
  1145. //取消按钮
  1146. cancel(){
  1147. this.$router.push('/modules/BatchCreate/directionalPackage')
  1148. },
  1149. //huakuai de shijian
  1150. slideChange(value) {
  1151. console.log(value)
  1152. this.launchPriceArr=value;
  1153. },
  1154. btnChange(e){
  1155. console.log(e)
  1156. },
  1157. //获取新用户的选中值
  1158. getNewUser(val){
  1159. console.log(val);
  1160. if(val.length==1&&val[0]==""){
  1161. this.activateType=[]
  1162. }else{
  1163. this.activateType=val;
  1164. }
  1165. },
  1166. //地域选择里的搜索
  1167. regionOnSearch(value) {
  1168. console.log(value);
  1169. },
  1170. //地域里的受众人群的位置
  1171. regionPeopleChange(e){
  1172. console.log(e.target.value,this.regionPeopleValue)
  1173. },
  1174. //获取选中的城市
  1175. getSelectedCityArr(val){
  1176. console.log(val)
  1177. },
  1178. //省市的tab切换
  1179. cityTabChange(key){
  1180. console.log(key)
  1181. },
  1182. //商圈的tab改变
  1183. businessTabChange(key){
  1184. console.log(key)
  1185. },
  1186. //商圈的联动改变
  1187. businessChange(val){
  1188. console.log(val)
  1189. },
  1190. //地图的搜索事件
  1191. MapSearch(val){
  1192. console.log(val)
  1193. },
  1194. //行为场景
  1195. actionSceneChange(value){
  1196. console.log(value)
  1197. },
  1198. //行为下的 类目搜索框
  1199. TaxonomicSearch(value){
  1200. console.log(value);
  1201. this.TaxonomicValue=value
  1202. },
  1203. //行为下的 关键词搜索框
  1204. keyWordSearch(value){
  1205. console.log(value);
  1206. this.keyWordValue=value
  1207. },
  1208. //获取智能放量定向的值
  1209. getAutoExtendEnabled(val){
  1210. console.log(val)
  1211. this.autoExtendTargets=[];
  1212. this.autoExtendTargets.push(...val)
  1213. },
  1214. //获取手机品牌的值
  1215. getDeviceBrand(val){
  1216. console.log(val);
  1217. this.deviceBrand=[];
  1218. this.deviceBrand.push(...val)
  1219. },
  1220. //获取文章分类的值
  1221. getArticleCategory(val){
  1222. console.log(val)
  1223. this.articleCategory=[];
  1224. this.articleCategory.push(...val)
  1225. },
  1226. //获取选中的年龄段
  1227. getAgeSelect(val){
  1228. console.log(val)
  1229. if(val.length==1&&val[0]==""){
  1230. this.age=[]
  1231. }else{
  1232. this.age=val;
  1233. }
  1234. },
  1235. //获取运行商
  1236. getCarrier(val){
  1237. if(val.length==1&&val[0]==""){
  1238. this.carrier=[]
  1239. }else{
  1240. this.carrier=val;
  1241. }
  1242. },
  1243. //获取受众网络
  1244. getAc(val){
  1245. if(val.length==1&&val[0]==""){
  1246. this.ac=[]
  1247. }else{
  1248. this.ac=val;
  1249. }
  1250. },
  1251. // 获取平台
  1252. getPlatForm(val){
  1253. console.log(val)
  1254. if(val.length==1&&val[0]==""){
  1255. this.platform=[]
  1256. }else{
  1257. this.platform=val;
  1258. }
  1259. },
  1260. // 自定义人群下的 定向排除
  1261. directLogicChange(val){
  1262. this.dxInputValue=undefined
  1263. },
  1264. },
  1265. mounted() {
  1266. //手机品牌
  1267. getAction('sys/dictItem/list?_t=1594263117&dictId=7f907c1dab0a65ce6d115e082cd79acf&pageSize=100',{}).then((res)=>{
  1268. console.log(res);
  1269. if(res.success){
  1270. res.result.records.forEach((item)=>{
  1271. this.deviceBrandOptions.push({
  1272. label:item.itemText,
  1273. value:item.itemValue
  1274. })
  1275. })
  1276. }
  1277. })
  1278. //文章分类
  1279. getAction('sys/dictItem/list?_t=1594263117&dictId=defad85851bf6b1751a49b33d8b13b3b&pageSize=100',{}).then((res)=>{
  1280. console.log(res)
  1281. if(res.success){
  1282. res.result.records.forEach((item)=>{
  1283. this.articleCategoryOptions.push({
  1284. label:item.itemText,
  1285. value:item.itemValue
  1286. })
  1287. })
  1288. }
  1289. })
  1290. //受众安卓版本号
  1291. getAction('sys/dictItem/list?dictId=bba60d87ced96be177a772102b44d0f2&pageSize=100',{}).then((res)=>{
  1292. console.log(res)
  1293. if(res.success){
  1294. res.result.records.forEach((item)=>{
  1295. this.androidOsvArr.push({
  1296. label:item.itemText,
  1297. value:item.itemValue
  1298. })
  1299. })
  1300. }
  1301. })
  1302. //受众安卓版本号
  1303. getAction('sys/dictItem/list?dictId=a989bb28cfba9f25b3711dfcd05281e7&pageSize=100',{}).then((res)=>{
  1304. console.log(res)
  1305. if(res.success){
  1306. res.result.records.forEach((item)=>{
  1307. this.iosOsvArr.push({
  1308. label:item.itemText,
  1309. value:item.itemValue
  1310. })
  1311. })
  1312. }
  1313. })
  1314. },
  1315. }
  1316. </script>