newDirectedPackage.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549
  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 :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
  9. <a-form-model-item label="定向包名称">
  10. <a-input placeholder="请输入定向包名称,至多20个字符" style="width:40%" />
  11. </a-form-model-item>
  12. <a-form-model-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-model-item>
  17. <a-form-model-item label="地域:" class="optItem">
  18. <a-radio-group default-value="" button-style="solid">
  19. <a-radio-button value="">不限</a-radio-button>
  20. <a-radio-button value="b">按省市</a-radio-button>
  21. <a-radio-button value="c">按区县</a-radio-button>
  22. </a-radio-group>
  23. <span class=""></span>
  24. </a-form-model-item>
  25. <a-form-model-item label="性别:" class="optItem">
  26. <a-radio-group default-value="" v-model="form.sex" button-style="solid">
  27. <a-radio-button value="">不限</a-radio-button>
  28. <a-radio-button value="men">男</a-radio-button>
  29. <a-radio-button value="women">女</a-radio-button>
  30. </a-radio-group>
  31. </a-form-model-item>
  32. <a-form-model-item label="年龄:" class="optItem">
  33. <radioCheck :checkArr='ageArr' @getSonValue='getNewUser' />
  34. </a-form-model-item>
  35. <a-form-model-item label="精选流量包:" class="optItem">
  36. <a-radio-group default-value="" button-style="solid">
  37. <a-radio-button value="">不限</a-radio-button>
  38. <a-radio-button value="men">应用软件精选</a-radio-button>
  39. <a-radio-button value="women">游戏精选</a-radio-button>
  40. </a-radio-group>
  41. <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />精选流量包仅支持穿山甲、穿山甲-精选游戏广告位</span>
  42. </a-form-model-item>
  43. <a-form-model-item label="行为兴趣:" class="optItem">
  44. <a-radio-group default-value="" button-style="solid">
  45. <a-radio-button value="">不限</a-radio-button>
  46. <a-radio-button value="men">系统推荐</a-radio-button>
  47. <a-radio-button value="women">自定义</a-radio-button>
  48. </a-radio-group>
  49. </a-form-model-item>
  50. <a-form-model-item label="平台:" class="optItem">
  51. <a-radio-group default-value="" button-style="solid">
  52. <a-radio-button value="">不限</a-radio-button>
  53. <a-radio-button value="IOS">IOS</a-radio-button>
  54. <a-radio-button value="Android">Android</a-radio-button>
  55. </a-radio-group>
  56. </a-form-model-item>
  57. <a-form-model-item label="过滤已安装:" class="optItem">
  58. <a-radio-group default-value="" button-style="solid">
  59. <a-radio-button value="">不过滤</a-radio-button>
  60. <a-radio-button value="filter">过滤</a-radio-button>
  61. </a-radio-group>
  62. </a-form-model-item>
  63. <a-form-model-item label="运营商:" class="optItem">
  64. <radioCheck :checkArr='carrierArr' @getSonValue='getNewUser' />
  65. </a-form-model-item>
  66. <a-form-model-item label="网络:" class="optItem">
  67. <radioCheck :checkArr='networkArr' @getSonValue='getNewUser' />
  68. </a-form-model-item>
  69. <a-form-model-item label="设备类型:" class="optItem">
  70. <a-radio-group default-value="" button-style="solid">
  71. <a-radio-button value="">不限</a-radio-button>
  72. <a-radio-button value="wifi">智能手机</a-radio-button>
  73. <a-radio-button value="2G">平板</a-radio-button>
  74. </a-radio-group>
  75. </a-form-model-item>
  76. <a-form-model-item label="手机品牌:" class="optItem">
  77. <a-radio-group default-value="" v-model="deviceBrand" button-style="solid">
  78. <a-radio-button value="">不限</a-radio-button>
  79. <a-radio-button value="byBrand">按品牌</a-radio-button>
  80. </a-radio-group>
  81. <div v-if="deviceBrand=='byBrand'" class="deviceBrand">
  82. <div class="selectBox">
  83. <div class="selectLeft">
  84. <div class="title">手机品牌</div>
  85. <div class="selectBox1">
  86. <span class="selectLists"><a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" > 全选 </a-checkbox></span>
  87. <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="checkGroupChange" class="selectList" ></a-checkbox-group>
  88. </div>
  89. </div>
  90. <div class="selectRight">
  91. <div class="title">已选<a-button class="clear" type="link" @click="clearAll">清空</a-button></div>
  92. <div class="selectBox1">
  93. <span class="selectListitem" v-for="(item,index) in checkedList" :key='index'>{{item}}<a-icon type="close" id="close" @click="deleteItem(item)" /></span>
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. </a-form-model-item>
  99. <a-form-model-item label="手机价格:" class="optItem">
  100. <a-radio-group default-value="" v-model="launchPrice" button-style="solid">
  101. <a-radio-button value="">不限</a-radio-button>
  102. <a-radio-button value="custom">自定义</a-radio-button>
  103. </a-radio-group>
  104. <span v-if="launchPrice=='custom'">
  105. <a-slider range :marks="marks" :default-value="[2000, 7000]" :step="null" :min='0' :max='11000' @change="slideChange" />
  106. </span>
  107. <span v-else></span>
  108. </a-form-model-item>
  109. <a-form-model-item label="新用户:" class="optItem">
  110. <radioCheck :checkArr='newUser' @getSonValue='getNewUser' />
  111. </a-form-model-item>
  112. <a-form-model-item label="智能放量:" class="optItem">
  113. <a-radio-group default-value="" button-style="solid">
  114. <a-radio-button value="">不启用</a-radio-button>
  115. <a-radio-button value="open">启用</a-radio-button>
  116. </a-radio-group>
  117. </a-form-model-item>
  118. <a-form-model-item label="保存为模板:" class="optItem">
  119. <a-radio-group default-value="no" button-style="solid">
  120. <a-radio value="yes">是</a-radio>
  121. <a-radio value="no">否</a-radio>
  122. </a-radio-group>
  123. </a-form-model-item>
  124. <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
  125. <a-button type="primary" @click="applicatiSubmit">
  126. 应用
  127. </a-button>
  128. <a-button style="margin-left: 10px;" @click="cancel">
  129. 取消
  130. </a-button>
  131. </a-form-model-item>
  132. </a-form-model>
  133. </div>
  134. <div class="rightBox">
  135. <div class="topBox">
  136. <p class="title">预估可覆盖</p>
  137. <div class="info">
  138. <p>抖音视频:<span class="num">{{}}</span>万日活跃用户</p>
  139. <p>西瓜视频:<span class="num">{{}}</span>万日活跃用户</p>
  140. <p>火山视频:<span class="num">{{}}</span>万日活跃用户</p>
  141. <p>今日头条:<span class="num">{{}}</span>万日活跃用户</p>
  142. </div>
  143. </div>
  144. <div class="bottomBox">
  145. <p class="title">受众信息</p>
  146. <div class="info">
  147. <p>性别:<span class="num">{{}}</span></p>
  148. <p>年龄:<span class="num">{{}}</span></p>
  149. <p>平台:<span class="num">{{}}</span></p>
  150. <p>网络:<span class="num">{{}}</span></p>
  151. <p>运营商:<span class="num">{{}}</span></p>
  152. <p>新用户:<span class="num">{{}}</span></p>
  153. <p>手机品牌:<span class="num">{{}}</span></p>
  154. </div>
  155. </div>
  156. </div>
  157. </div>
  158. </div>
  159. </template>
  160. <script>
  161. const plainOptions = ['Apple', 'Pear', 'Orange','44','550','9982','5525'];
  162. const defaultCheckedList = ['Apple', 'Orange'];
  163. import radioCheck from './radioCheck';
  164. let newUser=[
  165. {
  166. value:'',
  167. title:'不限'
  168. },
  169. {
  170. value:'oneMonth',
  171. title:'一月以内'
  172. },
  173. {
  174. value:'twoMonth',
  175. title:'一月到三个月'
  176. },
  177. {
  178. value:'treeMonth',
  179. title:'三月以上'
  180. }
  181. ]
  182. let networkArr=[
  183. {
  184. value:'',
  185. title:'不限'
  186. },
  187. {
  188. value:'WIFI',
  189. title:'wifi'
  190. },
  191. {
  192. value:'2G',
  193. title:'2G'
  194. },
  195. {
  196. value:'3G',
  197. title:'3G'
  198. },
  199. {
  200. value:'4G',
  201. title:'4G'
  202. },
  203. ]
  204. let carrierArr=[
  205. {
  206. value:'',
  207. title:'不限'
  208. },
  209. {
  210. value:'MOBILE',
  211. title:'移动'
  212. },
  213. {
  214. value:'UNICOM',
  215. title:'联通'
  216. },
  217. {
  218. value:'TELCOM',
  219. title:'电信'
  220. },
  221. ]
  222. let platformArr=[
  223. {
  224. value:'',
  225. title:'不限'
  226. },
  227. {
  228. value:'MOBILE',
  229. title:'移动'
  230. },
  231. {
  232. value:'UNICOM',
  233. title:'联通'
  234. },
  235. {
  236. value:'TELCOM',
  237. title:'电信'
  238. },
  239. ]
  240. let ageArr=[
  241. {
  242. value:'',
  243. title:'不限'
  244. },
  245. {
  246. value:'AGE_BETWEEN_18_23',
  247. title:' 18-23岁'
  248. },
  249. {
  250. value:'AGE_BETWEEN_24_30',
  251. title:'24-30岁'
  252. },
  253. {
  254. value:'AGE_BETWEEN_31_40',
  255. title:'31-40岁'
  256. },
  257. {
  258. value:'AGE_BETWEEN_41_49',
  259. title:'41-49岁'
  260. },
  261. {
  262. value:'AGE_ABOVE_50',
  263. title:'大于等于50岁'
  264. },
  265. ]
  266. export default {
  267. components:{
  268. radioCheck,
  269. },
  270. data() {
  271. return {
  272. labelCol: { span: 4 },
  273. wrapperCol: { span: 14 },
  274. launchPrice:'',//手机价格
  275. deviceBrand:'',//手机品牌
  276. form:{
  277. medialType:1,
  278. sex:'',
  279. launchPrice:[],//手机价格
  280. },
  281. marks: {
  282. 0: '0',
  283. 1000: '',
  284. 2000: '2000元',
  285. 2500: '',
  286. 3000: '',
  287. 3500: '',
  288. 4000: '',
  289. 4500: '',
  290. 5000: '5000元',
  291. 5500: '',
  292. 6000: '',
  293. 6500: '',
  294. 7000: '',
  295. 8000: '',
  296. 9000: '',
  297. 10000: '10000元',
  298. 11000: {
  299. style: {
  300. color: '#f50',
  301. },
  302. label: <strong>11000元</strong>,
  303. },
  304. },
  305. //选择框
  306. checkedList: defaultCheckedList,
  307. indeterminate: true,
  308. checkAll: false,
  309. plainOptions,
  310. newUser,//新用户的每一项值
  311. networkArr,//网络
  312. carrierArr,//运营商
  313. ageArr,//受众年龄
  314. }
  315. },
  316. methods: {
  317. //应用按钮
  318. applicatiSubmit(){
  319. console.log('submit!', this.form);
  320. this.$router.push('/modules/BatchCreate/directionalPackage')
  321. },
  322. //取消按钮
  323. cancel(){
  324. this.$router.push('/modules/BatchCreate/directionalPackage')
  325. },
  326. //huakuai de shijian
  327. slideChange(value) {
  328. this.form.launchPrice=value;
  329. },
  330. btnChange(e){
  331. console.log(e)
  332. },
  333. //多选的事件
  334. checkGroupChange(checkedList) {
  335. this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
  336. this.checkAll = checkedList.length === plainOptions.length;
  337. },
  338. onCheckAllChange(e) {
  339. Object.assign(this, {
  340. checkedList: e.target.checked ? plainOptions : [],
  341. indeterminate: false,
  342. checkAll: e.target.checked,
  343. });
  344. },
  345. deleteItem(item){
  346. console.log(item);
  347. this.checkedList=this.checkedList.filter((element,index) => {
  348. return element!=item
  349. });
  350. if(this.checkedList.length==0){
  351. this.indeterminate=false
  352. this.checkAll=false
  353. }
  354. },
  355. clearAll(){
  356. this.checkedList=[];
  357. this.indeterminate=false;
  358. this.checkAll=false
  359. },
  360. //获取新用户的选中值
  361. getNewUser(val){
  362. console.log(val);
  363. },
  364. },
  365. }
  366. </script>
  367. <style lang="scss">
  368. .newDirectedPackage .ant-checkbox-group-item{
  369. // width: 100%;
  370. display: block ;
  371. padding: 3px 0;
  372. margin-right: 0;
  373. padding: 5px 15px;
  374. }
  375. .newDirectedPackage .ant-checkbox-group-item:hover{
  376. background-color: rgba(0,0,0,.1);
  377. }
  378. </style>
  379. <style lang="scss" scoped>
  380. .newDirectedPackage{
  381. // background-color: #fff;
  382. .title{
  383. width: 100%;
  384. font-size: 20px;
  385. font-weight: 700;
  386. padding: 15px 0;
  387. text-align: center;
  388. border-bottom: 1px solid #eee;
  389. background-color: #fff;
  390. }
  391. .optBOX{
  392. background-color: #fff;
  393. padding: 15px 0;
  394. position: relative;
  395. .optItem{
  396. // margin-bottom: 15px;
  397. .typeName{
  398. width: 130px;
  399. text-align: right;
  400. display: inline-block;
  401. margin-right: 15px;
  402. }
  403. .tishi{
  404. display: block;
  405. color: #999;
  406. .tubiao{
  407. color: red;
  408. margin-right: 5px;
  409. }
  410. }
  411. #btngroup .ant-btn:hover{
  412. border-color: none;
  413. }
  414. .deviceBrand{
  415. // background: rgb(116, 76, 76);
  416. width: 100%;
  417. height: 300px;
  418. }
  419. .selectBox{
  420. display: flex;
  421. .title{
  422. background: #f9f9f9;
  423. font-size: 14px;
  424. font-weight: 700;
  425. padding:0 15px;
  426. border-bottom: 1px solid #ddd;
  427. text-align: left;
  428. position: relative;
  429. .clear{
  430. position: absolute;
  431. top: 5px;
  432. right: 0;
  433. }
  434. }
  435. .selectLeft{
  436. width: 40%;
  437. margin-right: 2%;
  438. border: 1px solid #ddd;
  439. border-radius: 5px;
  440. }
  441. .selectRight{
  442. width: 20%;
  443. border: 1px solid #ddd;
  444. border-radius: 5px;
  445. }
  446. .selectBox1{
  447. height: 250px;
  448. overflow: auto;
  449. .selectList{
  450. display: block;
  451. width: 100%;
  452. // padding: 0 15px;
  453. // padding: 3px 0;
  454. }
  455. .selectLists{
  456. display: block;
  457. width: 100%;
  458. padding: 0 15px;
  459. }
  460. .selectLists:hover{
  461. background-color: rgba(0,0,0,.1);
  462. }
  463. .selectListitem{
  464. display: block;
  465. height: 25px;
  466. line-height: 25px;
  467. background-color: #eee;
  468. border-radius: 5px;
  469. padding: 0 10px;
  470. margin: 8px 10px;
  471. position: relative;
  472. #close{
  473. font-size: 12px;
  474. position: absolute;
  475. right: 10px;
  476. top: 5px;
  477. cursor: pointer;
  478. }
  479. }
  480. }
  481. }
  482. }
  483. .rightBox{
  484. position: fixed;
  485. top: 22%;
  486. right: 20px;
  487. width: 230px;
  488. // height: 500px;
  489. max-height: 450px;
  490. border: 1px solid #ddd;
  491. border-radius: 10px;
  492. font-size: 12px;
  493. overflow: auto;
  494. .topBox,.bottomBox{
  495. padding: 10px 15px;
  496. background-color: #f9f9f9;
  497. border-bottom: 1px solid #eee;
  498. border-radius: 10px 10px 0 0;
  499. .title{
  500. background-color: #f9f9f9;
  501. font-size: 14px;
  502. text-align: left;
  503. margin: 0 0 10px;
  504. padding: 5px 0;
  505. font-weight: 400;
  506. border-bottom: 0;
  507. // border-radius: 10px;
  508. }
  509. .info p{
  510. margin-bottom: 6px;
  511. color: #999;
  512. }
  513. .info .num{
  514. color: #000;
  515. font-weight: 600;
  516. }
  517. }
  518. .bottomBox{
  519. background-color: #fff;
  520. border-bottom:0;
  521. .title{
  522. background-color: #FFF;
  523. }
  524. }
  525. }
  526. }
  527. }
  528. </style>