From ccf6a0bc014d86290efffc55cbea9cf3dc860d56 Mon Sep 17 00:00:00 2001
From: queenwuli <942534046@qq.com>
Date: Wed, 23 Dec 2020 16:19:23 +0800
Subject: [PATCH] 会员编辑，新增联调
---
hive-app/components/filterDropdown/index.vue | 73 +++++++++++++++++++++++++++++-------
1 files changed, 58 insertions(+), 15 deletions(-)
diff --git a/hive-app/components/filterDropdown/index.vue b/hive-app/components/filterDropdown/index.vue
index abd303c..b73b26e 100644
--- a/hive-app/components/filterDropdown/index.vue
+++ b/hive-app/components/filterDropdown/index.vue
@@ -2,21 +2,26 @@
<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">
- <text :class="index===0?'blue':''">{{item}}</text>
- <text v-if="index===0" class="iconfont icongouxuan blue font-18"></text>
+ <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">
+ <view v-for="(item, index) in list" class="all-screen" @click.stop="show">
<text class="title">{{item.title}}</text>
<view>
- <text v-for="op in item.list" class="name">{{op.title}}</text>
+ <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">重置</text>
- <text class="btn btn-blue">完成</text>
+ <text class="btn" @click="_reset">重置</text>
+ <text class="btn btn-blue" @click="_confirm">完成</text>
</view>
</view>
</view>
@@ -31,25 +36,58 @@
},
type: {
default: 1 //0表示全部筛选
+ },
+ filterKey: {
+ default: {}
}
},
data(){
return {
- isShow: false
+ 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);
}
}
}
@@ -72,7 +110,7 @@
}
.dropdown-wrap-con{
background: #FFFFFF;
- padding: 10px 10px;
+ padding: 5px 10px 10px;
font-size: 14px;
line-height: 32px;
color: #999999;
@@ -86,20 +124,25 @@
.all-screen .title{
display: block;
font-size: 14px;
- padding: 10px 0;
+ padding: 5px 0 10px;
color: #666666;
}
.all-screen .name{
- font-size: 12px;
+ font-size: 10px;
background: #F2f2f2;
color: #666666;
- padding: 5px 10px;
- min-width: 56px;
+ padding: 5px 0;
+ width: 160rpx;
+ box-sizing: border-box;
text-align: center;
display: inline-block;
margin-right: 10px;
border-radius: 2px;
- margin-bottom: 5px;
+ margin-bottom: 8px;
+ }
+ .all-screen .name.active{
+ background: #518EFF;
+ color: #FFFFFF;
}
.btn-group{
display: flex;
--
Gitblit v1.9.1