<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>