vue 多选 单选

 

 

 

<div class="filter_box">
    <div class="filter_list">
        <div v-for="(item,index) in filter_tabs" @click="showSelect(index)" :class="{activeColor:index==filter_num||item.active}">
            <span>{{cityStr(item.name)}}</span>
            <span v-show="index!=3" class="sanjiao" :class="{xsanjiao:index==filter_num,activeSanjiao:item.active}"></span>
            <span v-show="index==3" class="filter_icon" :class="{filter_iconActive:index==filter_num||item.active}"></span>
        </div>
    </div>
    <div class="tabCon">
        <ul class="class_select" v-show="filter_num==0">
            <li v-for="(item,index) in classList" class="class_list_item" :class="{selected:item.active}" @click="selectTab(index,item.id,item.title)">
                {{item.title}}
            </li>
            <div style="clear: both"></div>
            <div class="class_btn" @click="setClass_sure()">确定</div>
        </ul>
        <div class="city_box" v-show="filter_num==1">
            <ul>
                <li v-for="(item,index ) in filter_cityDate" @click.stop="citySel(index,item.value)" :class="{cityStyle:index== fliter_cityIndex}">
                    <div class="city_left">{{item.label}}</div>
                    <div class="city_right"  v-show="index==fliter_cityIndex">
                        <div v-for="(child,index) in item.children" @click.stop="setCity(index,child.value,child.label)" :class="{activeColor:index==childIndex}">
                            {{child.label}}
                            <img class="sure_icon" v-show="index==childIndex" src="http://oss.xqzs.cn/resources/psy/asker/filter_sure_icon.png" alt="">
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <ul v-show="filter_num==2" class="sort_box">
            <li v-for="(item,index) in sortList" @click="sortSel(index,item.value)" :class="{activeColor:index == fliter_sortIndex}">
                {{item.name}}
                <img v-show="index == fliter_sortIndex" class="sure_icon" src="http://oss.xqzs.cn/resources/psy/asker/filter_sure_icon.png" alt="">
            </li>
        </ul>
        <div v-show="filter_num==3" class="last_box">
            <div class="title">年龄</div>
            <ul class="age_box">
                <li v-for="(item,index) in ageList" @click="ageSel(index,item.lable)" :class="{selected:index==fliter_ageIndex}">{{item.name}}</li>
                <div style="clear: both"></div>
            </ul>
            <div class="title">性别</div>
            <ul class="sexBox">
                <li v-for="(item,index) in sexList" @click="sexSel(index,item.lable)" :class="{selected:index==fliter_sexIndex}">{{item.name}}</li>
                <div style="clear: both"></div>
            </ul>
            <div class="set_btn">
                <div @click="init_lastSel()">重置</div>
                <div @click="last_sure()">确定</div>
            </div>
        </div>
    </div>

    <div class="downList_mask" v-show="filter_num>-1" @click="filter_closeList()" @touchmove.prevent></div>
</div>

 

 

 

 

 

<script type="">
    
    export default {
        data() {
            return {
                classList:[],
                list:[],
               
                titleVal:'',
                filter_tabs:[{name:'主题',active:false},{name:'地区',active:false},{name:'排序',active:false},{name:'筛选',active:false}],
                classId:'',
                filter_num:-1,
                fliter_cityIndex:-1,
                fliter_sortIndex:-1,
                fliter_ageIndex:-1,
                fliter_sexIndex:-1,
                childIndex:-1,
                filter_cityDate:[],
                classIdArray:[],
                provinceId:'',
                cityId:'',
                sortList:[
                    {name:'综合排序',value:'complex'},
                    {name:'最新入驻',value:'new'},
                    {name:'活跃度从高到低',value:'login'},
                    {name:'回答次数从高到低',value:'answer'},
                ],
                order:'',
                age:'',
                ageVal:'',
                sex:'',
                sexVal:'',
                ageList:[
                    {name:'90后',lable:'1990'},
                    {name:'85后',lable:'1985'},
                    {name:'80后',lable:'1980'},
                    {name:'75后',lable:'1975'},
                    {name:'70后',lable:'1970'},
                    {name:'70前',lable:'1970b'},
                ],
                sexList:[
                    {name:'男咨询师',lable:1},
                    {name:'女咨询师',lable:2}
                ]
            }
        },
        methods: {
            filter_getCity:function () {  //获取城市
                let  _this = this;
                $.get('/src/js/city.json', function (data) {
                    data.unshift({label:'全国',value:'',children:[{label:'不限',value:''}]});
                    _this.filter_cityDate = data;
                    _this.$set(_this.filter_cityDate);
                });
            },
            filter_closeList:function () {  //关闭弹窗
                this.filter_num=-1;

            },
            citySel:function (index,pId) {  
                this.provinceId = pId;
                this.fliter_cityIndex = index;
                this.childIndex = -1;
            },
            setCity:function (index,cId,cName) {
                //filter_tabs
                console.log(cName)
                this.filter_tabs[1].name = cName;
                this.cityId = cId;
                this.childIndex = index;
                this.filter_tabs[1].active = true;
                
                this.filter_closeList();
            },
            cityStr:function (name) {
                return name.substring(0,4)
            },
            showSelect:function (index) {
                let _this = this;
                _this.filter_num = index;
            },
            selectTab:function (index,id,title) {
                this.titleVal = title;
                if(id==0){
                    for(let i = 0;i<this.classList.length;i++){
                        this.classList[i].active = false;
                    }
                }else{
                    this.classList[0].active = false;
                }
                this.classList[index].active = !this.classList[index].active;
                this.$set(this.classList,index,this.classList[index]);
            },
            setClass_sure:function () {
                this.classIdArray = [];
                for(let i = 0;i<this.classList.length;i++){
                    if(this.classList[i].active){
                        this.classIdArray.push(this.classList[i].id )
                    }
                }
                if(this.classIdArray.length>0){
                    this.initGetList();
                    this.filter_tabs[0].active = true;
                }
                this.filter_closeList();
            },
            sortSel:function (index,val) {
                this.order = val;
               
                this.filter_tabs[2].active = true;
                this.filter_closeList();
                this.fliter_sortIndex = index
            },
            ageSel:function (index,age) {
                this.age = age;
                this.fliter_ageIndex = index;
            },
            sexSel:function (index,sex) {
                this.sex = sex;
                this.fliter_sexIndex = index
            },
            init_lastSel:function () {
                this.sex='';
                this.age = '';
                this.filter_tabs[3].active = false;
                this.fliter_ageIndex = -1;
                this.fliter_sexIndex = -1;
            },
            last_sure:function () {
                if(this.age||this.sex){
                    this.ageVal = this.age;
                    this.sexVal = this.sex;
                    this.filter_tabs[3].active = true;
                  
                }
                this.filter_closeList();
            },
            
        
            getClassList:function () {
                let _this=this;
                _this.$http.get('获取主题类型').then(function (data) {//es5写法
                    if (data.body.status == 1) {
                        _this.classList= data.body.data
                        _this.classList.splice(0,0,{id:0,title:'全部',code:'qb'})
                        for(let i = 0 ; i<_this.classList.length;i++){
                            _this.classList[i].active = false;  //添加状态
                            if(_this.classList[i].id==this.classId){
                                _this.classList[i].active = true;
                            }
                        }
                        console.log(this.classIdArray)
                    }
                }, function (error) {
                });
            }

        },
        mounted: function () {
            this.classId = this.$route.query.classId;
            this.titleVal = this.$route.query.title;
            this.getClassList();
            this.filter_getCity();
            xqzs.wx.setConfig(this, function () { //分享
                var config = {
                    imgUrl:"封面地址",
                    title:  "title" ,
                    desc: '描述',
                    link:  '链接',
                };
                weshare.init(wx, config)
            });

        }
       
    }
</script>

<style>
 .filter_box .filter_list{
     height:0.96rem;
     color:RGBA(43, 53, 68, 0.5);
     font-size: 0.3rem;
     text-align: center;
     display: flex;
     line-height:0.96rem;
     background: #fff;
     border-bottom: 0.08rem solid #f4f4f7;
     position: relative;
     z-index:55;
 }
.filter_box .filter_list>div{
    flex: 1;
}
.filter_box .sanjiao {
    width: 0;
    height: 0;
    display: inline-block;
    border-top: 0.12rem solid RGBA(69, 75, 84, 0.2);
    border-right: 0.12rem solid transparent;
    border-left: 0.12rem solid transparent;
    margin-left: 0.08rem;
    vertical-align: middle;
}
.filter_box .activeSanjiao {
    border-top: 0.12rem solid RGBA(3, 207, 254, 1);
}
.filter_box .xsanjiao{
    border-top: 0;
    border-bottom: 0.12rem solid RGBA(3, 207, 254, 1);
}
.filter_box .filter_icon{
    width:0.28rem;
    height:0.28rem;
    display: inline-block;
    background: url("http://oss.xqzs.cn/resources/psy/asker/filter_last_icon.png") no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;
    margin-left: 0.05rem;
}
.filter_box .filter_iconActive{
    background: url("http://oss.xqzs.cn/resources/psy/asker/filter_last_active.png") no-repeat;
    background-size: 100% 100%;
}
.filter_box .activeColor{
    color:#56C4FE !important;
}
.filter_box .tabCon{
    position: absolute;
    z-index: 55;
    background: #fff;
    width: 100%;
    top:0.98rem;
}
.filter_box .class_select {
    height: 4.48rem;
}
.filter_box .city_box{
    height:9rem;
    font-size: 0.28rem;
    position: relative;
}
.filter_box .city_box ul{
    height:100%;
    overflow: auto;
}
.filter_box .sort_box{
    padding-left: 0.6rem;
}
.filter_box .last_box{
    padding:0.32rem 0rem 0.3rem 0.6rem;
}
.filter_box .last_box .title{
    font-size: 0.28rem;
    color:RGBA(43, 53, 68, 0.7);
    line-height: 0.4rem;
    margin-bottom: 0.2rem;
}
.filter_box .last_box li{
    float: left;
    width:1.72rem;
    margin-right: 0.5rem;
    margin-bottom: 0.3rem;
    text-align: center;
    color:RGBA(43, 53, 68, 0.5);
    border-radius: 0.1rem;
    line-height: 0.6rem;
    border:0.02rem solid RGBA(238, 238, 238, 1);
    font-size: 0.26rem;
}
.filter_box .sort_box li{
    line-height: 0.96rem;
    font-size: 0.28rem;
    border-bottom: 0.02rem solid RGBA(238, 238, 238, 1);
    color:RGBA(69, 75, 84, 0.5);
    position: relative;
}
.filter_box .city_box li{
    line-height: 0.92rem;
}
.filter_box .cityStyle .city_left{
    background:#fff;
    color:RGBA(43, 53, 68, 0.5)
}
.filter_box .city_left{
    width:30%;
    text-align: center;
    color:RGBA(43, 53, 68, 0.6);
    background: RGBA(244, 244, 247, 1);
    height:100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.filter_box .city_right{
    position: absolute;
    right:0;
    width:70%;
    color:RGBA(43, 53, 68, 0.5);
    z-index:55;
    top:0;
    line-height: 0.9rem;
    height:9rem;
    overflow: auto;
}
.filter_box .sure_icon{
    width:0.32rem;
    height:0.24rem;
    position: absolute;
    right:0.5rem;
    top:50%;
    margin-top: -0.12rem;
}
.filter_box .city_right>div{
    border-bottom: 0.02rem solid RGBA(238, 238, 238, 1);
    padding-left: 10%;
    position: relative;
}
.filter_box .age_box{margin-bottom: 0.2rem;}
.filter_box .sexBox{margin-bottom: 0.3rem;}
.filter_box .class_select .class_btn{
    line-height: 0.88rem;
    color:RGBA(255, 255, 255, 1);
    background: RGBA(86, 196, 254, 1);
    text-align: center;
    font-size: 0.36rem;
    border-radius: 0.1rem;
    width:92%;
    margin: 0 auto;
    margin-top: 0.6rem;
}
.filter_box .class_list_item {
    float: left;
    width: 1.56rem;
    margin-left: 0.22rem;
    margin-top: 0.25rem;
    font-size: 0.26rem;
    height: 0.60rem;
    text-align: center;
    line-height: 0.60rem;
    color: RGBA(69, 75, 84, 0.5);
    background: #fff;
    border-radius: 0.10rem;
    border: 0.02rem solid RGBA(69, 75, 84, 0.08);
}
.filter_box .downList_mask{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    z-index: 54;
    top:0;
}
.filter_box .selected{
    color:#56C4FE !important;
    border-color: #56C4FE !important;
}
.filter_box .set_btn{
    padding-right: 0.5rem;
    line-height: 0.7rem;
    height:0.66rem;
}
.filter_box .set_btn>div{
    width:2.76rem;
    font-size: 0.36rem;
    text-align: center;
    border-radius: 0.1rem;
    border:0.02rem solid  RGBA(86, 196, 254, 1);
}
.filter_box .set_btn>div:nth-of-type(1){
    float: left;
    color: RGBA(86, 196, 254, 1);
    margin-left: -0.1rem;
}
.filter_box .set_btn>div:nth-of-type(2){
    float: right;
    color:#fff;
    background: RGBA(86, 196, 254, 1);
}
</style>