newDirectedPackage.vue 45 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103
  1. <template>
  2. <div class="newDirectedPackage">
  3. <div class="title">
  4. 新建定向包
  5. </div>
  6. <div class="optBOX">
  7. <div class="leftBox">
  8. <a-form :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
  9. <a-form-item label="定向包名称">
  10. <a-input placeholder="请输入定向包名称,至多20个字符" style="width:40%" />
  11. </a-form-item>
  12. <a-form-item label="媒体:">
  13. <a-radio-group default-value="toutiao" v-model="form.medialType" button-style="solid">
  14. <a-radio-button :value="1">头条</a-radio-button>
  15. </a-radio-group>
  16. </a-form-item>
  17. <a-form-item label="地域:" class="optItem" >
  18. <a-radio-group default-value="" button-style="solid" v-model="regionValue">
  19. <a-radio-button value="">不限</a-radio-button>
  20. <a-radio-button value="REGION_LEVEL_PROVINCE">按省市</a-radio-button>
  21. <a-radio-button value="REGION_LEVEL_DISTRICT">按区县</a-radio-button>
  22. <a-radio-button value="REGION_LEVEL_BUSINESS_DISTRICT">按商圈</a-radio-button>
  23. </a-radio-group>
  24. <div class="region" v-show="regionValue!=''">
  25. <!-- 省市 -->
  26. <div class="provincyCity" v-if="regionValue=='REGION_LEVEL_PROVINCE'">
  27. <div class="region_input">
  28. <a-input-search placeholder="输入搜索的省市" enter-button />
  29. </div>
  30. <div class="tabChange">
  31. <div class="tabBox">
  32. <a-tabs v-model="cityTab" @change="cityTabChange">
  33. <a-tab-pane key="geography" tab="地理划分">
  34. <linkMultiSelect title='省份' :listArr='shengshiArr' @getSelectedArr='getSelectedCityArr'/>
  35. </a-tab-pane>
  36. <a-tab-pane key="development" tab="发展划分" >
  37. <linkMultiSelect title='等级' :listArr='[]' @getSelectedArr='getSelectedCityArr'/>
  38. </a-tab-pane>
  39. </a-tabs>
  40. </div>
  41. </div>
  42. </div>
  43. <!-- 区县 -->
  44. <div class="district" v-else-if="regionValue=='REGION_LEVEL_DISTRICT'">
  45. <linkMultiSelect title='省份' :listArr='[]' @getSelectedArr='getSelectedCityArr'/>
  46. </div>
  47. <!-- 商圈 -->
  48. <div class="businessCircle" v-else>
  49. <div class="tabChange">
  50. <div class="tabBox">
  51. <a-tabs v-model="businessTab" @change="businessTabChange">
  52. <a-tab-pane key="businessCircle" tab="商圈">
  53. <a-cascader :options="businessOptionsArr" change-on-select @change="businessChange" />
  54. <linkMultiSelect :titleArr='["商圈"]' :listArr='[]' @getSelectedArr='getSelectedCityArr'/>
  55. </a-tab-pane>
  56. <a-tab-pane key="addFromMap" tab="从地图添加" >
  57. <a-input-search placeholder="请输入搜索地址" v-model="MapselectValue" @search="MapSearch">
  58. <a-button slot="enterButton">
  59. 搜索
  60. </a-button>
  61. </a-input-search>
  62. </a-tab-pane>
  63. </a-tabs>
  64. </div>
  65. </div>
  66. </div>
  67. <div class="region_people">
  68. <a-radio-group v-model="regionPeopleValue" @change="regionPeopleChange">
  69. <a-radio value="HOME">居住在该地区的用户</a-radio>
  70. <a-radio value="TRAVEL"> 到该地区旅行的用户</a-radio>
  71. <a-radio value="ALL">该地区内的所有用户</a-radio>
  72. <a-radio value="CURRENT">正在该地区的用户</a-radio>
  73. </a-radio-group>
  74. </div>
  75. </div>
  76. </a-form-item>
  77. <a-form-item label="性别:" class="optItem">
  78. <a-radio-group default-value="" v-model="form.sex" button-style="solid">
  79. <a-radio-button value="">不限</a-radio-button>
  80. <a-radio-button value="men">男</a-radio-button>
  81. <a-radio-button value="women">女</a-radio-button>
  82. </a-radio-group>
  83. </a-form-item>
  84. <a-form-item label="年龄:" class="optItem">
  85. <radioCheck :checkArr='ageArr' @getSonValue='getNewUser' />
  86. </a-form-item>
  87. <a-form-item label="精选流量包:" class="optItem">
  88. <a-radio-group default-value="" button-style="solid">
  89. <a-radio-button value="">不限</a-radio-button>
  90. <a-radio-button value="men">应用软件精选</a-radio-button>
  91. <a-radio-button value="women">游戏精选</a-radio-button>
  92. </a-radio-group>
  93. <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />精选流量包仅支持穿山甲、穿山甲-精选游戏广告位</span>
  94. </a-form-item>
  95. <a-form-item label="行为兴趣:" class="optItem">
  96. <a-radio-group v-model="interestActionMode" button-style="solid">
  97. <a-radio-button value="">不限</a-radio-button>
  98. <a-radio-button value="RECOMMEND">
  99. 系统推荐
  100. <a-tooltip>
  101. <template slot="title">
  102. 如与自定义人群包同时使用,系统推荐不生效
  103. </template>
  104. <a-icon type="question-circle" />
  105. </a-tooltip>
  106. </a-radio-button>
  107. <a-radio-button value="CUSTOM">自定义</a-radio-button>
  108. </a-radio-group>
  109. </a-form-item>
  110. <div class="interestActionMode" v-show="interestActionMode=='CUSTOM'">
  111. <a-form-item label="行为:" class="optItem">
  112. <div>
  113. <span style="margin-right:5px">在</span>
  114. <a-select
  115. mode="multiple"
  116. label-in-value
  117. style="width: 210px"
  118. placeholder="所有行为场景中"
  119. @change="actionSceneChange"
  120. :maxTagCount='1'
  121. >
  122. <a-select-option value='E-COMMERCE'> 电商互动行为</a-select-option>
  123. <a-select-option value='NEWS'> 咨询互动行为</a-select-option>
  124. <a-select-option value='APP'> APP推广行为</a-select-option>
  125. </a-select>
  126. <span>中,选择用户</span>
  127. <a-select v-model="actionDays" style="width: 90px">
  128. <a-select-option :value='7'>7天 </a-select-option>
  129. <a-select-option :value='15'>15天 </a-select-option>
  130. <a-select-option :value='30'>30天 </a-select-option>
  131. <a-select-option :value='60'>60天 </a-select-option>
  132. <a-select-option :value='90'>90天 </a-select-option>
  133. <a-select-option :value='180'>180天 </a-select-option>
  134. <a-select-option :value='365'>365天 </a-select-option>
  135. </a-select>
  136. <span>内发生的行为:</span>
  137. </div>
  138. <div class="actionBottom">
  139. <div class="action_left">
  140. <a-tabs default-active-key="1" >
  141. <a-tab-pane key="1" tab="添加类目词">
  142. <div class="Taxonomic">
  143. <div class="Taxonomic_search">
  144. <a-input-search placeholder="请输入行为类目词" style="width: 100%" @search="TaxonomicSearch" />
  145. </div>
  146. <div class="Taxonomic_checkbox">
  147. </div>
  148. <div class="Taxonomic_relevant">
  149. <span class="Taxonomic_relevant_top">
  150. <span class="Taxonomic_relevant_top_title">{{}}相关词:</span>
  151. <a-button type='link' class="Taxonomic_relevant_top_more">更多></a-button>
  152. </span>
  153. <span class="Taxonomic_relevant_bottom">
  154. <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+游戏</a>
  155. <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+手游</a>
  156. <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+王者荣耀</a>
  157. <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+吃鸡</a>
  158. </span>
  159. </div>
  160. </div>
  161. </a-tab-pane>
  162. <a-tab-pane key="2" tab="添加关键词" >
  163. <div class="Taxonomic keyWord">
  164. <div class="Taxonomic_search">
  165. <a-input-search placeholder="请输入行为类目词或关键词" style="width: 100%" @search="keyWordSearch" />
  166. </div>
  167. <div class="Taxonomic_checkbox keyWords_box">
  168. <div class="keyWords_box_title">
  169. {{}}
  170. </div>
  171. <ul class="keyWords_box_list">
  172. <li>
  173. <span class="mingzi">游戏</span>
  174. <span class="renshu">21亿</span>
  175. <span class="caozuo" >
  176. <a href="javascript:;" class="addKeywords">添加</a>
  177. <a href="javascript:;" class="searchKeyWord">查关键词</a>
  178. </span>
  179. </li>
  180. </ul>
  181. </div>
  182. <div class="Taxonomic_relevant">
  183. <span class="Taxonomic_relevant_top">
  184. <a href="javascript:;" class="Taxonomic_relevant_bottom_item">添加全部“{{}}”相关词</a>
  185. </span>
  186. </div>
  187. </div>
  188. </a-tab-pane>
  189. </a-tabs>
  190. </div>
  191. <div class="action_right">
  192. <div class="action_right_title">
  193. <span class="action_right_sum">还可以添加行为:{{}}个</span>
  194. <span class="action_right_info">
  195. <span>类目词:{{}}</span>
  196. <span>关键词:{{}}</span>
  197. </span>
  198. <a-button type='link' class="action_right_btn">清空</a-button>
  199. </div>
  200. <div class="action_right_bottom">
  201. <div class="action_right_option">
  202. <a-select v-model="actOrint" style="width: 80px;" >
  203. <a-select-option value="all">
  204. 全部
  205. </a-select-option>
  206. <a-select-option value="lucy">
  207. 类目词
  208. </a-select-option>
  209. <a-select-option value="disabled" >
  210. 关键词
  211. </a-select-option>
  212. </a-select>
  213. <span class="coverPeople">覆盖人数</span>
  214. </div>
  215. <div class="action_right_select_list">
  216. <ul>
  217. <li>
  218. <span class="mingzi">游戏</span>
  219. <span class="renshu">21亿</span>
  220. <span class="caozuo" >
  221. <a href="javascript:;" class="delete">删除</a>
  222. <a href="javascript:;" class="searchKeyWord">查关键词</a>
  223. </span>
  224. </li>
  225. <li>
  226. <span class="mingzi">游戏</span>
  227. <span class="renshu">21亿</span>
  228. <span class="caozuo" >
  229. <a href="javascript:;" class="delete">删除</a>
  230. <a href="javascript:;" class="searchKeyWord">查关键词</a>
  231. </span>
  232. </li>
  233. </ul>
  234. </div>
  235. <div class="action_right_AISelect">
  236. <a-tooltip class="actionTooltip">
  237. <template slot="title">
  238. 已添加的行为关键词需大于20个,才可以使用自动选词
  239. </template>
  240. <a-button type='link' :disabled='AIselect'>使用自动选词</a-button>
  241. </a-tooltip>
  242. <a-tooltip class="actionTooltip">
  243. <template slot="title">
  244. 系统根据行为定向所有已选结果,自动推荐词包
  245. </template>
  246. <a-icon type="question-circle" />
  247. </a-tooltip>
  248. </div>
  249. </div>
  250. </div>
  251. </div>
  252. </a-form-item>
  253. <a-form-item label="兴趣:" class="optItem">
  254. </a-form-item>
  255. </div>
  256. <a-form-item label="平台:" class="optItem">
  257. <radioCheck :checkArr='platformArr' @getSonValue='getNewUser' />
  258. </a-form-item>
  259. <a-form-item label="过滤已安装:" class="optItem">
  260. <a-radio-group default-value="" button-style="solid">
  261. <a-radio-button value="">不过滤</a-radio-button>
  262. <a-radio-button value="filter">过滤</a-radio-button>
  263. </a-radio-group>
  264. </a-form-item>
  265. <a-form-item label="运营商:" class="optItem">
  266. <radioCheck :checkArr='carrierArr' @getSonValue='getNewUser' />
  267. </a-form-item>
  268. <a-form-item label="网络:" class="optItem">
  269. <radioCheck :checkArr='networkArr' @getSonValue='getNewUser' />
  270. </a-form-item>
  271. <!-- <a-form-item label="设备类型:" class="optItem">
  272. <a-radio-group default-value="" button-style="solid">
  273. <a-radio-button value="">不限</a-radio-button>
  274. <a-radio-button value="wifi">智能手机</a-radio-button>
  275. <a-radio-button value="2G">平板</a-radio-button>
  276. </a-radio-group>
  277. </a-form-item> -->
  278. <a-form-item label="手机品牌:" class="optItem">
  279. <a-radio-group default-value="" v-model="deviceBrand" button-style="solid">
  280. <a-radio-button value="">不限</a-radio-button>
  281. <a-radio-button value="byBrand">按品牌</a-radio-button>
  282. </a-radio-group>
  283. <div v-if="deviceBrand=='byBrand'" class="deviceBrand">
  284. <div class="selectBox">
  285. <div class="selectLeft">
  286. <div class="title">手机品牌</div>
  287. <div class="selectBox1">
  288. <span class="selectLists"><a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" > 全选 </a-checkbox></span>
  289. <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="checkGroupChange" class="selectList" ></a-checkbox-group>
  290. </div>
  291. </div>
  292. <div class="selectRight">
  293. <div class="title">已选<a-button class="clear" type="link" @click="clearAll">清空</a-button></div>
  294. <div class="selectBox1">
  295. <span class="selectListitem" v-for="(item,index) in checkedList" :key='index'>{{item}}<a-icon type="close" id="close" @click="deleteItem(item)" /></span>
  296. </div>
  297. </div>
  298. </div>
  299. </div>
  300. </a-form-item>
  301. <a-form-item label="手机价格:" class="optItem">
  302. <a-radio-group default-value="" v-model="launchPrice" button-style="solid">
  303. <a-radio-button value="">不限</a-radio-button>
  304. <a-radio-button value="custom">自定义</a-radio-button>
  305. </a-radio-group>
  306. <span v-if="launchPrice=='custom'">
  307. <a-slider range :marks="marks" :default-value="[2000, 7000]" :step="null" :min='0' :max='11000' @change="slideChange" />
  308. </span>
  309. <span v-else></span>
  310. </a-form-item>
  311. <a-form-item label="新用户:" class="optItem">
  312. <radioCheck :checkArr='newUser' @getSonValue='getNewUser' />
  313. </a-form-item>
  314. <a-form-item label="智能放量:" class="optItem">
  315. <a-radio-group default-value="" button-style="solid">
  316. <a-radio-button value="">不启用</a-radio-button>
  317. <a-radio-button value="open">启用</a-radio-button>
  318. </a-radio-group>
  319. <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />智能放量不支持受众预估</span>
  320. </a-form-item>
  321. <a-form-item label="保存为模板:" class="optItem">
  322. <a-radio-group default-value="no" button-style="solid">
  323. <a-radio value="yes">是</a-radio>
  324. <a-radio value="no">否</a-radio>
  325. </a-radio-group>
  326. </a-form-item>
  327. <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
  328. <a-button type="primary" @click="applicatiSubmit">
  329. 应用
  330. </a-button>
  331. <a-button style="margin-left: 10px;" @click="cancel">
  332. 取消
  333. </a-button>
  334. </a-form-item>
  335. </a-form>
  336. </div>
  337. <div class="rightBox">
  338. <div class="topBox">
  339. <p class="title">预估可覆盖</p>
  340. <div class="info">
  341. <p>抖音视频:<span class="num">{{}}</span>万日活跃用户</p>
  342. <p>西瓜视频:<span class="num">{{}}</span>万日活跃用户</p>
  343. <p>火山视频:<span class="num">{{}}</span>万日活跃用户</p>
  344. <p>今日头条:<span class="num">{{}}</span>万日活跃用户</p>
  345. </div>
  346. </div>
  347. <div class="bottomBox">
  348. <p class="title">受众信息</p>
  349. <div class="info">
  350. <p>性别:<span class="num">{{}}</span></p>
  351. <p>年龄:<span class="num">{{}}</span></p>
  352. <p>平台:<span class="num">{{}}</span></p>
  353. <p>网络:<span class="num">{{}}</span></p>
  354. <p>运营商:<span class="num">{{}}</span></p>
  355. <p>新用户:<span class="num">{{}}</span></p>
  356. <p>手机品牌:<span class="num">{{}}</span></p>
  357. </div>
  358. </div>
  359. </div>
  360. </div>
  361. </div>
  362. </template>
  363. <script>
  364. const plainOptions = ['Apple', 'Pear', 'Orange','44','550','9982','5525'];
  365. const defaultCheckedList = ['Apple', 'Orange'];
  366. import radioCheck from './radioCheck';
  367. import linkMultiSelect from './linkMultiSelect'
  368. let newUser=[
  369. {
  370. value:'',
  371. title:'不限'
  372. },
  373. {
  374. value:'oneMonth',
  375. title:'一月以内'
  376. },
  377. {
  378. value:'twoMonth',
  379. title:'一月到三个月'
  380. },
  381. {
  382. value:'treeMonth',
  383. title:'三月以上'
  384. }
  385. ]
  386. let networkArr=[
  387. {
  388. value:'',
  389. title:'不限'
  390. },
  391. {
  392. value:'WIFI',
  393. title:'WIFI'
  394. },
  395. {
  396. value:'2G',
  397. title:'2G'
  398. },
  399. {
  400. value:'3G',
  401. title:'3G'
  402. },
  403. {
  404. value:'4G',
  405. title:'4G'
  406. },
  407. ]
  408. let carrierArr=[
  409. {
  410. value:'',
  411. title:'不限'
  412. },
  413. {
  414. value:'MOBILE',
  415. title:'移动'
  416. },
  417. {
  418. value:'UNICOM',
  419. title:'联通'
  420. },
  421. {
  422. value:'TELCOM',
  423. title:'电信'
  424. },
  425. ]
  426. let platformArr=[
  427. {
  428. value:'',
  429. title:'不限'
  430. },
  431. {
  432. value:'ANDROID',
  433. title:'Android'
  434. },
  435. {
  436. value:'IOS',
  437. title:'iOS'
  438. },
  439. ]
  440. let ageArr=[
  441. {
  442. value:'',
  443. title:'不限'
  444. },
  445. {
  446. value:'AGE_BETWEEN_18_23',
  447. title:' 18-23岁'
  448. },
  449. {
  450. value:'AGE_BETWEEN_24_30',
  451. title:'24-30岁'
  452. },
  453. {
  454. value:'AGE_BETWEEN_31_40',
  455. title:'31-40岁'
  456. },
  457. {
  458. value:'AGE_BETWEEN_41_49',
  459. title:'41-49岁'
  460. },
  461. {
  462. value:'AGE_ABOVE_50',
  463. title:'大于等于50岁'
  464. },
  465. ]
  466. let options=[
  467. {
  468. value: 'zhejiang',
  469. label: 'Zhejiang',
  470. children: [
  471. {
  472. value: 'hangzhou',
  473. label: 'Hangzhou',
  474. children: [
  475. {
  476. value: 'xihu',
  477. label: 'West Lake',
  478. },
  479. ],
  480. },
  481. ],
  482. },
  483. {
  484. value: 'jiangsu',
  485. label: 'Jiangsu',
  486. children: [
  487. {
  488. value: 'nanjing',
  489. label: 'Nanjing',
  490. children: [
  491. {
  492. value: 'zhonghuamen',
  493. label: 'Zhong Hua Men',
  494. },
  495. ],
  496. },
  497. ],
  498. },
  499. ];
  500. let shengshiArr=[
  501. {name:'北京',value:'beijing'},
  502. {name:'天津',value:'tianjin'},
  503. {name:'上海',value:'shanghai'},
  504. {name:'重庆',value:'chongqing'},
  505. {
  506. name:'山西',
  507. value:'shanxi',
  508. children:[
  509. {
  510. name:'太原',
  511. value:'taiyuan',
  512. },
  513. {
  514. name:'阳泉',
  515. value:'yangquan',
  516. children:[
  517. {
  518. name:'盂县',
  519. value:'yuxian',
  520. children:[
  521. {
  522. name:'上社镇',
  523. value:'shangshezhen'
  524. }
  525. ]
  526. }
  527. ]
  528. }
  529. ]
  530. },
  531. ]
  532. export default {
  533. components:{
  534. radioCheck,
  535. linkMultiSelect
  536. },
  537. data() {
  538. return {
  539. labelCol: { span: 4 },
  540. wrapperCol: { span: 14 },
  541. launchPrice:'',//手机价格
  542. deviceBrand:'',//手机品牌
  543. form:{
  544. medialType:1,
  545. sex:'',
  546. launchPrice:[],//手机价格
  547. },
  548. marks: {
  549. 0: '0',
  550. 1000: '',
  551. 2000: '2000元',
  552. 2500: '',
  553. 3000: '',
  554. 3500: '',
  555. 4000: '',
  556. 4500: '',
  557. 5000: '5000元',
  558. 5500: '',
  559. 6000: '',
  560. 6500: '',
  561. 7000: '',
  562. 8000: '',
  563. 9000: '',
  564. 10000: '10000元',
  565. 11000: {
  566. style: {
  567. color: '#f50',
  568. },
  569. label: <strong>11000元</strong>,
  570. },
  571. },
  572. //选择框
  573. checkedList: defaultCheckedList,
  574. indeterminate: true,
  575. checkAll: false,
  576. plainOptions,
  577. newUser,//新用户的每一项值
  578. networkArr,//网络
  579. carrierArr,//运营商
  580. ageArr,//受众年龄
  581. platformArr,//受众平台
  582. //地域下的人群的受众位置分类
  583. regionPeopleValue:'HOME',
  584. regionValue:'',//地域的选择项
  585. cityTab:'geography',//省市下的tab切换
  586. businessTab:'businessCircle',//商圈的tab值
  587. businessOptionsArr:[],//商圈的联动数据
  588. MapselectValue:undefined,//地图的搜索地址
  589. //行为兴趣选择
  590. interestActionMode:'',
  591. actionScene:[],//行为场景
  592. actionDays:30,//行为天数
  593. actOrint:'all',
  594. TaxonomicValue:undefined,//行为下的类目词
  595. keyWordValue:undefined,//行为下的关键词
  596. AIselect:true,//行为下的自动选词是否可用
  597. shengshiArr,
  598. }
  599. },
  600. methods: {
  601. //应用按钮
  602. applicatiSubmit(){
  603. console.log('submit!', this.form);
  604. this.$router.push('/modules/BatchCreate/directionalPackage')
  605. },
  606. //取消按钮
  607. cancel(){
  608. this.$router.push('/modules/BatchCreate/directionalPackage')
  609. },
  610. //huakuai de shijian
  611. slideChange(value) {
  612. this.form.launchPrice=value;
  613. },
  614. btnChange(e){
  615. console.log(e)
  616. },
  617. //多选的事件
  618. checkGroupChange(checkedList) {
  619. this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
  620. this.checkAll = checkedList.length === plainOptions.length;
  621. },
  622. onCheckAllChange(e) {
  623. Object.assign(this, {
  624. checkedList: e.target.checked ? plainOptions : [],
  625. indeterminate: false,
  626. checkAll: e.target.checked,
  627. });
  628. },
  629. deleteItem(item){
  630. console.log(item);
  631. this.checkedList=this.checkedList.filter((element,index) => {
  632. return element!=item
  633. });
  634. if(this.checkedList.length==0){
  635. this.indeterminate=false
  636. this.checkAll=false
  637. }
  638. },
  639. clearAll(){
  640. this.checkedList=[];
  641. this.indeterminate=false;
  642. this.checkAll=false
  643. },
  644. //获取新用户的选中值
  645. getNewUser(val){
  646. console.log(val);
  647. },
  648. //地域选择里的搜索
  649. regionOnSearch(value) {
  650. console.log(value);
  651. },
  652. //地域里的受众人群的位置
  653. regionPeopleChange(e){
  654. console.log(e.target.value,this.regionPeopleValue)
  655. },
  656. //获取选中的城市
  657. getSelectedCityArr(val){
  658. console.log(val)
  659. },
  660. //省市的tab切换
  661. cityTabChange(key){
  662. console.log(key)
  663. },
  664. //商圈的tab改变
  665. businessTabChange(key){
  666. console.log(key)
  667. },
  668. //商圈的联动改变
  669. businessChange(val){
  670. console.log(val)
  671. },
  672. //地图的搜索事件
  673. MapSearch(val){
  674. console.log(val)
  675. },
  676. //行为场景
  677. actionSceneChange(value){
  678. console.log(value)
  679. },
  680. //行为下的 类目搜索框
  681. TaxonomicSearch(value){
  682. console.log(value);
  683. this.TaxonomicValue=value
  684. },
  685. //行为下的 关键词搜索框
  686. keyWordSearch(value){
  687. console.log(value);
  688. this.keyWordValue=value
  689. },
  690. },
  691. }
  692. </script>
  693. <style lang="scss">
  694. .newDirectedPackage .ant-checkbox-group-item{
  695. // width: 100%;
  696. display: block ;
  697. padding: 3px 0;
  698. margin-right: 0;
  699. padding: 5px 15px;
  700. }
  701. .newDirectedPackage .ant-checkbox-group-item:hover{
  702. background-color: rgba(0,0,0,.1);
  703. }
  704. </style>
  705. <style lang="scss" scoped>
  706. .newDirectedPackage{
  707. // background-color: #fff;
  708. .title{
  709. width: 100%;
  710. font-size: 20px;
  711. font-weight: 700;
  712. padding: 15px 0;
  713. text-align: center;
  714. border-bottom: 1px solid #eee;
  715. background-color: #fff;
  716. }
  717. .optBOX{
  718. background-color: #fff;
  719. padding: 15px 0;
  720. position: relative;
  721. .optItem{
  722. // margin-bottom: 15px;
  723. .typeName{
  724. width: 130px;
  725. text-align: right;
  726. display: inline-block;
  727. margin-right: 15px;
  728. }
  729. .tishi{
  730. display: block;
  731. color: #999;
  732. .tubiao{
  733. color: red;
  734. margin-right: 5px;
  735. }
  736. }
  737. #btngroup .ant-btn:hover{
  738. border-color: none;
  739. }
  740. .deviceBrand{
  741. // background: rgb(116, 76, 76);
  742. width: 100%;
  743. height: 300px;
  744. }
  745. .selectBox{
  746. display: flex;
  747. .title{
  748. background: #f9f9f9;
  749. font-size: 14px;
  750. font-weight: 700;
  751. padding:0 15px;
  752. border-bottom: 1px solid #ddd;
  753. text-align: left;
  754. position: relative;
  755. .clear{
  756. position: absolute;
  757. top: 5px;
  758. right: 0;
  759. }
  760. }
  761. .selectLeft{
  762. width: 40%;
  763. margin-right: 2%;
  764. border: 1px solid #ddd;
  765. border-radius: 5px;
  766. }
  767. .selectRight{
  768. width: 20%;
  769. border: 1px solid #ddd;
  770. border-radius: 5px;
  771. }
  772. .selectBox1{
  773. height: 250px;
  774. overflow: auto;
  775. .selectList{
  776. display: block;
  777. width: 100%;
  778. // padding: 0 15px;
  779. // padding: 3px 0;
  780. }
  781. .selectLists{
  782. display: block;
  783. width: 100%;
  784. padding: 0 15px;
  785. }
  786. .selectLists:hover{
  787. background-color: rgba(0,0,0,.1);
  788. }
  789. .selectListitem{
  790. display: block;
  791. height: 25px;
  792. line-height: 25px;
  793. background-color: #eee;
  794. border-radius: 5px;
  795. padding: 0 10px;
  796. margin: 8px 10px;
  797. position: relative;
  798. #close{
  799. font-size: 12px;
  800. position: absolute;
  801. right: 10px;
  802. top: 5px;
  803. cursor: pointer;
  804. }
  805. }
  806. }
  807. }
  808. }
  809. .rightBox{
  810. position: fixed;
  811. top: 22%;
  812. right: 20px;
  813. width: 230px;
  814. // height: 500px;
  815. max-height: 500px;
  816. border: 1px solid #ddd;
  817. border-radius: 10px;
  818. font-size: 12px;
  819. overflow: auto;
  820. .topBox,.bottomBox{
  821. padding: 10px 15px;
  822. background-color: #f9f9f9;
  823. border-bottom: 1px solid #eee;
  824. border-radius: 10px 10px 0 0;
  825. .title{
  826. background-color: #f9f9f9;
  827. font-size: 14px;
  828. text-align: left;
  829. margin: 0 0 10px;
  830. padding: 5px 0;
  831. font-weight: 400;
  832. border-bottom: 0;
  833. // border-radius: 10px;
  834. }
  835. .info p{
  836. margin-bottom: 6px;
  837. color: #999;
  838. }
  839. .info .num{
  840. color: #000;
  841. font-weight: 600;
  842. }
  843. }
  844. .bottomBox{
  845. background-color: #fff;
  846. border-bottom:0;
  847. .title{
  848. background-color: #FFF;
  849. }
  850. }
  851. }
  852. }
  853. }
  854. </style>
  855. <style lang="scss">
  856. .actionBottom{
  857. ul,li{
  858. margin: 0;
  859. padding: 0;
  860. list-style: none;
  861. }
  862. width: 70%;
  863. height: 400px;
  864. display:flex;
  865. margin-top: 20px;
  866. .action_left{
  867. width:60% ;
  868. margin-right: 2%;
  869. border: 1px solid #ccc;
  870. border-radius: 5px;
  871. padding: 10px 2px;
  872. .Taxonomic{
  873. padding: 0 10px;
  874. .Taxonomic_checkbox{
  875. margin-top: 10PX;
  876. height: 220px;
  877. border: 1px solid #ccc;
  878. border-radius: 5px;
  879. }
  880. .Taxonomic_relevant{
  881. font-size: 12px;
  882. margin-top: 10px;
  883. .Taxonomic_relevant_top{
  884. position: relative;
  885. display: block;
  886. height: 20px;
  887. line-height: 20px;
  888. .Taxonomic_relevant_top_title{
  889. }
  890. .Taxonomic_relevant_top_more{
  891. position: absolute;
  892. top: 0;
  893. right: 0;
  894. font-size: 12px;
  895. display: block;
  896. height: 20px;
  897. line-height: 20px;
  898. }
  899. }
  900. .Taxonomic_relevant_bottom{
  901. display: block;
  902. height: 20px;
  903. line-height: 20px;
  904. .Taxonomic_relevant_bottom_item{
  905. margin-right: 5px;
  906. }
  907. }
  908. }
  909. }
  910. .keyWords_box_title{
  911. font-size: 16px;
  912. font-weight: 600;
  913. color: #000;
  914. height: 35px;
  915. line-height: 35px;
  916. background-color: rgb(248,249,250);
  917. }
  918. .keyWords_box_list{
  919. height: 185px;
  920. overflow: auto;
  921. li{
  922. height: 30px;
  923. line-height: 30px;
  924. font-size: 14px;
  925. color: #333;
  926. .caozuo{
  927. display: none;
  928. // display: inline-block;
  929. width:50%;
  930. text-align: right;
  931. .delete{
  932. margin-left: 5px;
  933. }
  934. .searchKeyWord{
  935. margin-left: 15px;
  936. }
  937. }
  938. .mingzi{
  939. display: inline-block;
  940. width: 30%;
  941. }
  942. .renshu{
  943. display: inline-block;
  944. width: 15%;
  945. line-height: 30px;
  946. height: 30px;
  947. }
  948. }
  949. }
  950. .keyWords_box_list li:hover .caozuo{
  951. display: inline-block;
  952. }
  953. }
  954. .action_right{
  955. width: 35%;
  956. height: 100%;
  957. border-radius: 5px;
  958. border: 1px solid #ccc;
  959. .action_right_title{
  960. background-color: rgb(248,249,250);
  961. padding: 10px 10px 0;
  962. border-radius: 5px 5px 0 0;
  963. border-bottom: 1px solid #ccc;
  964. position: relative;
  965. }
  966. .action_right_sum{
  967. display: block;
  968. margin-bottom: 5px;
  969. height: 20px;
  970. line-height: 20px;
  971. font-size: 14px;
  972. color: #333;
  973. }
  974. .action_right_info{
  975. display: block;
  976. margin-bottom: 5px;
  977. height: 20px;
  978. line-height: 20px;
  979. font-size: 14px;
  980. color: #999;
  981. }
  982. .action_right_btn{
  983. position: absolute;
  984. top: 0px;
  985. right: -5px;
  986. }
  987. .action_right_bottom{
  988. .action_right_option{
  989. border-bottom: 1px solid #ccc;
  990. }
  991. .ant-select-selection{
  992. border: 0;
  993. }
  994. .coverPeople{
  995. margin-left: 5px;
  996. }
  997. .caozuo{
  998. display: none;
  999. .delete{
  1000. margin-left: 5px;
  1001. }
  1002. .searchKeyWord{
  1003. margin-left: 2px;
  1004. }
  1005. }
  1006. .mingzi{
  1007. display: inline-block;
  1008. width: 70px;
  1009. }
  1010. .renshu{
  1011. display: inline-block;
  1012. width: 40px;
  1013. line-height: 20px;
  1014. height: 20px;
  1015. }
  1016. .action_right_select_list{
  1017. padding: 5px 10px;
  1018. height: 250px;
  1019. overflow: auto;
  1020. }
  1021. .action_right_select_list li{
  1022. line-height: 20px;
  1023. height: 20px;
  1024. }
  1025. .action_right_select_list li:hover .caozuo{
  1026. display: inline-block;
  1027. }
  1028. .action_right_AISelect{
  1029. height: 30px;
  1030. line-height: 30px;
  1031. font-size: 14px;
  1032. padding: 5px 10px;
  1033. border-top: 1px solid #ccc;
  1034. }
  1035. }
  1036. }
  1037. }
  1038. .ant-tooltip-inner,.ant-tooltip,.ant-tooltip-arrow::before{
  1039. background-color: #fff;
  1040. color: #666;
  1041. font-size: 12px;
  1042. }
  1043. </style>
  1044. <style lang="scss">
  1045. .region{
  1046. width: 70%;
  1047. margin-top: 10px;
  1048. .region_input{
  1049. width: 60%;
  1050. }
  1051. .tabChange{
  1052. }
  1053. .ant-tabs-bar{
  1054. border: 0;
  1055. }
  1056. }
  1057. </style>