<template>
|
<view :class="isShow?'dropdown-wrap-open':'dropdown-wrap-close'">
|
<view class="mask" @touchmove.stop.prevent="moveHandle" @click.stop="hide">
|
<view v-if="type===1" class="dropdown-wrap-con">
|
<view v-for="(item, index) in list" class="flex justify-between" @click="_changeItem(item, index)">
|
<text :class="selectIndex==index?'blue':''">{{item.title}}</text>
|
<text v-if="selectIndex==index" class="iconfont icongouxuan blue font-18"></text>
|
</view>
|
</view>
|
<view v-else class="all-screen-wrap">
|
<view v-for="(item, index) in list" class="all-screen" @click.stop="show">
|
<text class="title">{{item.title}}</text>
|
<view>
|
<text class="name"
|
v-for="op in item.list"
|
:class="_handleActiveClass(item, op)"
|
@click="_chooseItem(item, op)">
|
{{op.title}}
|
</text>
|
</view>
|
</view>
|
<view class="btn-group">
|
<text class="btn" @click="_reset">重置</text>
|
<text class="btn btn-blue" @click="_confirm">完成</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
props:{
|
list: {
|
default: []
|
},
|
type: {
|
default: 1 //0表示全部筛选
|
},
|
filterKey: {
|
default: {}
|
}
|
},
|
data(){
|
return {
|
isShow: false,
|
selectItem: {},
|
selectIndex: 0
|
}
|
},
|
created() {
|
this.init();
|
},
|
methods:{
|
moveHandle(){
|
|
},
|
init(){
|
this.selectItem = JSON.parse(JSON.stringify(this.filterKey));
|
},
|
show(){
|
this.isShow = true;
|
},
|
hide(){
|
this.isShow = false
|
},
|
// 普通下拉选择
|
_changeItem(item, index){
|
this.selectIndex = index;
|
this.$emit('confirm', item);
|
},
|
|
// 处理选项选中/不选中状态class
|
_handleActiveClass(item, option){
|
return this.selectItem[item.key] == option.value?'active':'';
|
},
|
// 选中筛选条件
|
_chooseItem(item, option){
|
if(this.selectItem[item.key] === option.value){
|
this.selectItem[item.key] = ''
|
} else {
|
this.selectItem[item.key] = option.value;
|
}
|
},
|
_reset(){
|
this.init();
|
this.$emit('reset');
|
},
|
_confirm(){
|
this.$emit('confirm', this.selectItem);
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.mask{
|
position: fixed;
|
top: calc(92px + var(--status-bar-height));
|
left: 0;
|
right: 0;
|
height: 100%;
|
background: rgba(0,0,0,0.4);
|
transition: all 0.2s;
|
z-index: 999;
|
}
|
.dropdown-wrap-close .mask{
|
display: none;
|
}
|
.dropdown-wrap-open .mask{
|
display: block;
|
}
|
.dropdown-wrap-con{
|
background: #FFFFFF;
|
padding: 5px 10px 10px;
|
font-size: 14px;
|
line-height: 32px;
|
color: #999999;
|
}
|
.all-screen-wrap{
|
background: #FFFFFF;
|
}
|
.all-screen{
|
padding: 5px 10px 0;
|
}
|
.all-screen .title{
|
display: block;
|
font-size: 14px;
|
padding: 5px 0 10px;
|
color: #666666;
|
}
|
.all-screen .name{
|
font-size: 10px;
|
background: #F2f2f2;
|
color: #666666;
|
padding: 5px 0;
|
width: 160rpx;
|
box-sizing: border-box;
|
text-align: center;
|
display: inline-block;
|
margin-right: 10px;
|
border-radius: 2px;
|
margin-bottom: 8px;
|
}
|
.all-screen .name.active{
|
background: #518EFF;
|
color: #FFFFFF;
|
}
|
.btn-group{
|
display: flex;
|
border-top: 1px solid #EDEAF4;
|
margin-top: 20px;
|
}
|
.btn-group .btn{
|
flex: 1;
|
line-height: 44px;
|
text-align: center;
|
font-size: 15px;
|
color: #666666;
|
}
|
.btn-group .btn-blue{
|
background: #518EFF;
|
color: #FFFFFF;
|
}
|
</style>
|
