123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549 |
- <template>
- <div class="newDirectedPackage">
- <div class="title">
- 新建定向包
- </div>
- <div class="optBOX">
- <div class="leftBox">
- <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
- <a-form-model-item label="定向包名称">
- <a-input placeholder="请输入定向包名称,至多20个字符" style="width:40%" />
- </a-form-model-item>
- <a-form-model-item label="媒体:">
- <a-radio-group default-value="toutiao" v-model="form.medialType" button-style="solid">
- <a-radio-button :value="1">头条</a-radio-button>
- </a-radio-group>
- </a-form-model-item>
- <a-form-model-item label="地域:" class="optItem">
- <a-radio-group default-value="" button-style="solid">
- <a-radio-button value="">不限</a-radio-button>
- <a-radio-button value="b">按省市</a-radio-button>
- <a-radio-button value="c">按区县</a-radio-button>
- </a-radio-group>
- <span class=""></span>
- </a-form-model-item>
- <a-form-model-item label="性别:" class="optItem">
- <a-radio-group default-value="" v-model="form.sex" button-style="solid">
- <a-radio-button value="">不限</a-radio-button>
- <a-radio-button value="men">男</a-radio-button>
- <a-radio-button value="women">女</a-radio-button>
- </a-radio-group>
- </a-form-model-item>
- <a-form-model-item label="年龄:" class="optItem">
- <radioCheck :checkArr='ageArr' @getSonValue='getNewUser' />
- </a-form-model-item>
- <a-form-model-item label="精选流量包:" class="optItem">
- <a-radio-group default-value="" button-style="solid">
- <a-radio-button value="">不限</a-radio-button>
- <a-radio-button value="men">应用软件精选</a-radio-button>
- <a-radio-button value="women">游戏精选</a-radio-button>
- </a-radio-group>
- <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />精选流量包仅支持穿山甲、穿山甲-精选游戏广告位</span>
- </a-form-model-item>
- <a-form-model-item label="行为兴趣:" class="optItem">
- <a-radio-group default-value="" button-style="solid">
- <a-radio-button value="">不限</a-radio-button>
- <a-radio-button value="men">系统推荐</a-radio-button>
- <a-radio-button value="women">自定义</a-radio-button>
- </a-radio-group>
- </a-form-model-item>
- <a-form-model-item label="平台:" class="optItem">
- <a-radio-group default-value="" button-style="solid">
- <a-radio-button value="">不限</a-radio-button>
- <a-radio-button value="IOS">IOS</a-radio-button>
- <a-radio-button value="Android">Android</a-radio-button>
- </a-radio-group>
- </a-form-model-item>
- <a-form-model-item label="过滤已安装:" class="optItem">
- <a-radio-group default-value="" button-style="solid">
- <a-radio-button value="">不过滤</a-radio-button>
- <a-radio-button value="filter">过滤</a-radio-button>
- </a-radio-group>
- </a-form-model-item>
- <a-form-model-item label="运营商:" class="optItem">
- <radioCheck :checkArr='carrierArr' @getSonValue='getNewUser' />
- </a-form-model-item>
- <a-form-model-item label="网络:" class="optItem">
- <radioCheck :checkArr='networkArr' @getSonValue='getNewUser' />
- </a-form-model-item>
- <a-form-model-item label="设备类型:" class="optItem">
- <a-radio-group default-value="" button-style="solid">
- <a-radio-button value="">不限</a-radio-button>
- <a-radio-button value="wifi">智能手机</a-radio-button>
- <a-radio-button value="2G">平板</a-radio-button>
- </a-radio-group>
- </a-form-model-item>
- <a-form-model-item label="手机品牌:" class="optItem">
- <a-radio-group default-value="" v-model="deviceBrand" button-style="solid">
- <a-radio-button value="">不限</a-radio-button>
- <a-radio-button value="byBrand">按品牌</a-radio-button>
- </a-radio-group>
- <div v-if="deviceBrand=='byBrand'" class="deviceBrand">
- <div class="selectBox">
- <div class="selectLeft">
- <div class="title">手机品牌</div>
- <div class="selectBox1">
- <span class="selectLists"><a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" > 全选 </a-checkbox></span>
- <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="checkGroupChange" class="selectList" ></a-checkbox-group>
- </div>
- </div>
- <div class="selectRight">
- <div class="title">已选<a-button class="clear" type="link" @click="clearAll">清空</a-button></div>
- <div class="selectBox1">
- <span class="selectListitem" v-for="(item,index) in checkedList" :key='index'>{{item}}<a-icon type="close" id="close" @click="deleteItem(item)" /></span>
- </div>
- </div>
- </div>
-
- </div>
- </a-form-model-item>
- <a-form-model-item label="手机价格:" class="optItem">
- <a-radio-group default-value="" v-model="launchPrice" button-style="solid">
- <a-radio-button value="">不限</a-radio-button>
- <a-radio-button value="custom">自定义</a-radio-button>
- </a-radio-group>
- <span v-if="launchPrice=='custom'">
- <a-slider range :marks="marks" :default-value="[2000, 7000]" :step="null" :min='0' :max='11000' @change="slideChange" />
- </span>
- <span v-else></span>
- </a-form-model-item>
- <a-form-model-item label="新用户:" class="optItem">
- <radioCheck :checkArr='newUser' @getSonValue='getNewUser' />
- </a-form-model-item>
- <a-form-model-item label="智能放量:" class="optItem">
- <a-radio-group default-value="" button-style="solid">
- <a-radio-button value="">不启用</a-radio-button>
- <a-radio-button value="open">启用</a-radio-button>
- </a-radio-group>
- </a-form-model-item>
- <a-form-model-item label="保存为模板:" class="optItem">
- <a-radio-group default-value="no" button-style="solid">
- <a-radio value="yes">是</a-radio>
- <a-radio value="no">否</a-radio>
- </a-radio-group>
- </a-form-model-item>
- <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
- <a-button type="primary" @click="applicatiSubmit">
- 应用
- </a-button>
- <a-button style="margin-left: 10px;" @click="cancel">
- 取消
- </a-button>
- </a-form-model-item>
- </a-form-model>
- </div>
- <div class="rightBox">
- <div class="topBox">
- <p class="title">预估可覆盖</p>
- <div class="info">
- <p>抖音视频:<span class="num">{{}}</span>万日活跃用户</p>
- <p>西瓜视频:<span class="num">{{}}</span>万日活跃用户</p>
- <p>火山视频:<span class="num">{{}}</span>万日活跃用户</p>
- <p>今日头条:<span class="num">{{}}</span>万日活跃用户</p>
- </div>
- </div>
- <div class="bottomBox">
- <p class="title">受众信息</p>
- <div class="info">
- <p>性别:<span class="num">{{}}</span></p>
- <p>年龄:<span class="num">{{}}</span></p>
- <p>平台:<span class="num">{{}}</span></p>
- <p>网络:<span class="num">{{}}</span></p>
- <p>运营商:<span class="num">{{}}</span></p>
- <p>新用户:<span class="num">{{}}</span></p>
- <p>手机品牌:<span class="num">{{}}</span></p>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- const plainOptions = ['Apple', 'Pear', 'Orange','44','550','9982','5525'];
- const defaultCheckedList = ['Apple', 'Orange'];
- import radioCheck from './radioCheck';
- let newUser=[
- {
- value:'',
- title:'不限'
- },
- {
- value:'oneMonth',
- title:'一月以内'
- },
- {
- value:'twoMonth',
- title:'一月到三个月'
- },
- {
- value:'treeMonth',
- title:'三月以上'
- }
- ]
- let networkArr=[
- {
- value:'',
- title:'不限'
- },
- {
- value:'WIFI',
- title:'wifi'
- },
- {
- value:'2G',
- title:'2G'
- },
- {
- value:'3G',
- title:'3G'
- },
- {
- value:'4G',
- title:'4G'
- },
- ]
- let carrierArr=[
- {
- value:'',
- title:'不限'
- },
- {
- value:'MOBILE',
- title:'移动'
- },
- {
- value:'UNICOM',
- title:'联通'
- },
- {
- value:'TELCOM',
- title:'电信'
- },
- ]
- let platformArr=[
- {
- value:'',
- title:'不限'
- },
- {
- value:'MOBILE',
- title:'移动'
- },
- {
- value:'UNICOM',
- title:'联通'
- },
- {
- value:'TELCOM',
- title:'电信'
- },
- ]
- let ageArr=[
- {
- value:'',
- title:'不限'
- },
- {
- value:'AGE_BETWEEN_18_23',
- title:' 18-23岁'
- },
- {
- value:'AGE_BETWEEN_24_30',
- title:'24-30岁'
- },
- {
- value:'AGE_BETWEEN_31_40',
- title:'31-40岁'
- },
- {
- value:'AGE_BETWEEN_41_49',
- title:'41-49岁'
- },
- {
- value:'AGE_ABOVE_50',
- title:'大于等于50岁'
- },
- ]
- export default {
- components:{
- radioCheck,
- },
- data() {
- return {
- labelCol: { span: 4 },
- wrapperCol: { span: 14 },
- launchPrice:'',//手机价格
- deviceBrand:'',//手机品牌
- form:{
- medialType:1,
- sex:'',
- launchPrice:[],//手机价格
- },
- marks: {
- 0: '0',
- 1000: '',
- 2000: '2000元',
- 2500: '',
- 3000: '',
- 3500: '',
- 4000: '',
- 4500: '',
- 5000: '5000元',
- 5500: '',
- 6000: '',
- 6500: '',
- 7000: '',
- 8000: '',
- 9000: '',
- 10000: '10000元',
- 11000: {
- style: {
- color: '#f50',
- },
- label: <strong>11000元</strong>,
- },
- },
- //选择框
- checkedList: defaultCheckedList,
- indeterminate: true,
- checkAll: false,
- plainOptions,
- newUser,//新用户的每一项值
- networkArr,//网络
- carrierArr,//运营商
- ageArr,//受众年龄
- }
- },
- methods: {
- //应用按钮
- applicatiSubmit(){
- console.log('submit!', this.form);
- this.$router.push('/modules/BatchCreate/directionalPackage')
- },
- //取消按钮
- cancel(){
- this.$router.push('/modules/BatchCreate/directionalPackage')
- },
- //huakuai de shijian
- slideChange(value) {
- this.form.launchPrice=value;
- },
- btnChange(e){
- console.log(e)
- },
- //多选的事件
- checkGroupChange(checkedList) {
- this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
- this.checkAll = checkedList.length === plainOptions.length;
- },
- onCheckAllChange(e) {
- Object.assign(this, {
- checkedList: e.target.checked ? plainOptions : [],
- indeterminate: false,
- checkAll: e.target.checked,
- });
- },
- deleteItem(item){
- console.log(item);
- this.checkedList=this.checkedList.filter((element,index) => {
- return element!=item
- });
- if(this.checkedList.length==0){
- this.indeterminate=false
- this.checkAll=false
- }
- },
- clearAll(){
- this.checkedList=[];
- this.indeterminate=false;
- this.checkAll=false
- },
- //获取新用户的选中值
- getNewUser(val){
- console.log(val);
- },
- },
- }
- </script>
- <style lang="scss">
- .newDirectedPackage .ant-checkbox-group-item{
- // width: 100%;
- display: block ;
- padding: 3px 0;
- margin-right: 0;
- padding: 5px 15px;
- }
- .newDirectedPackage .ant-checkbox-group-item:hover{
- background-color: rgba(0,0,0,.1);
- }
-
- </style>
- <style lang="scss" scoped>
- .newDirectedPackage{
- // background-color: #fff;
- .title{
- width: 100%;
- font-size: 20px;
- font-weight: 700;
- padding: 15px 0;
- text-align: center;
- border-bottom: 1px solid #eee;
- background-color: #fff;
- }
- .optBOX{
- background-color: #fff;
- padding: 15px 0;
- position: relative;
- .optItem{
- // margin-bottom: 15px;
- .typeName{
- width: 130px;
- text-align: right;
- display: inline-block;
- margin-right: 15px;
- }
- .tishi{
- display: block;
-
- color: #999;
- .tubiao{
- color: red;
- margin-right: 5px;
- }
- }
- #btngroup .ant-btn:hover{
- border-color: none;
- }
- .deviceBrand{
- // background: rgb(116, 76, 76);
- width: 100%;
- height: 300px;
- }
- .selectBox{
- display: flex;
- .title{
- background: #f9f9f9;
- font-size: 14px;
- font-weight: 700;
- padding:0 15px;
- border-bottom: 1px solid #ddd;
- text-align: left;
- position: relative;
-
- .clear{
- position: absolute;
- top: 5px;
- right: 0;
- }
- }
- .selectLeft{
- width: 40%;
- margin-right: 2%;
- border: 1px solid #ddd;
- border-radius: 5px;
- }
- .selectRight{
- width: 20%;
- border: 1px solid #ddd;
- border-radius: 5px;
- }
- .selectBox1{
- height: 250px;
- overflow: auto;
-
- .selectList{
- display: block;
- width: 100%;
- // padding: 0 15px;
- // padding: 3px 0;
- }
- .selectLists{
- display: block;
- width: 100%;
- padding: 0 15px;
- }
- .selectLists:hover{
- background-color: rgba(0,0,0,.1);
- }
- .selectListitem{
- display: block;
- height: 25px;
- line-height: 25px;
- background-color: #eee;
- border-radius: 5px;
- padding: 0 10px;
- margin: 8px 10px;
- position: relative;
- #close{
- font-size: 12px;
- position: absolute;
- right: 10px;
- top: 5px;
- cursor: pointer;
- }
- }
- }
- }
- }
- .rightBox{
- position: fixed;
- top: 22%;
- right: 20px;
- width: 230px;
- // height: 500px;
- max-height: 450px;
- border: 1px solid #ddd;
- border-radius: 10px;
- font-size: 12px;
- overflow: auto;
- .topBox,.bottomBox{
- padding: 10px 15px;
- background-color: #f9f9f9;
- border-bottom: 1px solid #eee;
- border-radius: 10px 10px 0 0;
- .title{
- background-color: #f9f9f9;
- font-size: 14px;
- text-align: left;
- margin: 0 0 10px;
- padding: 5px 0;
- font-weight: 400;
- border-bottom: 0;
- // border-radius: 10px;
- }
- .info p{
- margin-bottom: 6px;
- color: #999;
- }
- .info .num{
- color: #000;
- font-weight: 600;
- }
- }
- .bottomBox{
- background-color: #fff;
- border-bottom:0;
- .title{
- background-color: #FFF;
- }
- }
- }
-
- }
-
- }
- </style>
|