会员编辑，新增联调

queenwuli

2020-12-23 ccf6a0bc014d86290efffc55cbea9cf3dc860d56

 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;