newDirectedPackage.vue 20 KB

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