jufubao-mall 2.0.21 → 2.0.23-beta1

package/src/components/JfbMallProductList/ComFilterQuery.vue

@@ -0,0 +1,950 @@
+<template>
+  <view class="jfb-filter" v-if="showQuery === 'Y'" :style="[cssStyle]">
+
+    <view class="jfb-filter-placeholder" :style="[placeholderStyleComp]"></view>
+    <view class="jfb-filter-menu" :style="[cusMenuStyle,menuStyleTopComp]">
+      <template v-if="sortList.length > 0">
+        <view
+          class="jfb-filter-menu-item"
+          v-for="sortValue in sortList"
+          :key="sortValue.value"
+          @click="handleNenu(sortValue.value)"
+        >
+          <view
+            class="jfb-filter-menu-name"
+            :class="{ fontWeight: sortValue.value === sortAct}"
+            :style="[menuTextColorComp]"
+          >{{sortValue|fCusName}}</view>
+          <view class="jfb-filter-menu-icon">
+            <view v-if="sortValue.value === 'common'">
+              <xd-font-icon icon="iconxia_down" width="50" :color="menuTextColorComp.color" :size="20"/>
+            </view>
+            <template v-if="sortValue.value === 'price'">
+              <view v-if="!['price_desc','price_asc'].includes(sort)">
+                <xd-font-icon icon="iconshang_up" width="50" :color="menuTextColorComp.color" height="20" :size="20"/>
+                <xd-font-icon icon="iconxia_down" width="50" :color="menuTextColorComp.color"  height="20"  :size="20"/>
+              </view>
+              <view v-if="sort === 'price_desc'">
+                <xd-font-icon icon="iconxia_down" width="50" :color="menuTextColorComp.color" :size="20"/>
+              </view>
+              <view v-if="sort === 'price_asc'">
+                <xd-font-icon icon="iconshang_up" width="50" :color="menuTextColorComp.color" :size="20"/>
+              </view>
+            </template>
+          </view>
+        </view>
+      </template>
+      <template v-if="otherNenuItems.length > 0">
+        <view
+          class="jfb-filter-menu-item"
+          v-for="otherNenu in otherNenuItems"
+          :key="otherNenu.value"
+          @click="handleNenu(otherNenu.value)"
+        >
+          <view
+            class="jfb-filter-menu-name"
+            :class="{ fontWeight: otherNenu.value !=='filter' && selectedNenuLabels[otherNenu.value].length > 0}"
+            :style="[menuTextColorComp]"
+          >{{otherNenu|fCusOtherName}}</view>
+          <view class="jfb-filter-menu-icon">
+            <view>
+              <xd-font-icon icon="iconxia_down" width="50" :color="menuTextColorComp.color" :size="20"/>
+            </view>
+          </view>
+        </view>
+      </template>
+    </view>
+    <view class="jfb-filter-pop" :style="[queryTopComp]">
+      <view
+        class="xd-query-sort"
+        v-if="menuAct === 'common' && showQueryModal"
+        :style="[boxStyleComp]">
+        <view
+          class="xd-query-sort-item"
+          v-for="item in allSortItems"
+          :key="item.value"
+          :style="[(sort === item.value? labelActColor:labelColor)]"
+          @click="handleCommonSort(item)"
+        >{{item.label}}</view>
+      </view>
+      <view
+        class="xd-query-filter"
+        v-if="!['common','price', 'hot'].includes(menuAct) && showQueryModal"
+      >
+        <view class="filter_wrap" :style="[otherMenuComp]">
+          <view
+            class="filter_item"
+            v-for="tab in filterTabs"
+            :key="tab.value"
+            :style="[otherMenuContComp]"
+          >
+            <view class="filter_title" v-if="isFitler">
+              <view>{{tab.title}}</view>
+              <view v-if="tab.options.length > collapseNum" class="_ext" @click="switchOtherOpen(tab)">
+                <text>{{tab.open ? '收起' : '展开'}}</text>
+                <xd-font-icon v-if="tab.open" icon="iconshang_up" :size="20"></xd-font-icon>
+                <xd-font-icon v-else icon="iconxia_down" :size="20"></xd-font-icon>
+              </view>
+            </view>
+            <view class="filter_tab">
+              <template v-for="(item,i) in tab.options">
+                <view
+                  class="_tag"
+                  :style="[otherMenuItemComp,(isOtherActive(tab, item.value)?labelActColor:labelColor)]"
+                  v-if="(!tab.open && i < collapseNum) || tab.open || !isFitler"
+                  :key="item.value"
+                  :class="{
+                    active: isOtherActive(tab, item.value),
+                    noMarginRigth: i%column === (column-1),
+                    noMarginTop: i/column < 1
+                  }"
+                  @click="setOhterChooseTag(tab, item)"
+                >{{item.label}}</view>
+              </template>
+            </view>
+          </view>
+        </view>
+        <view class="bottom_btn" v-if="isShowBtn">
+          <xd-button class="xd-button" type="info" width="248rpx" size="normal" @click="onOtherReset">重置</xd-button>
+          <xd-button class="xd-button" type="primary" width="248rpx" size="normal" @click="onOtherConfirm">确定</xd-button>
+        </view>
+      </view>
+    </view>
+    <view
+      v-if="showQueryModal"
+      class="jfb-filter-mask"
+      :style="[queryMaskComp]"
+      @click="closeQueryModal"
+      @touchmove.stop.prevent="moveHandle"
+    ></view>
+  </view>
+</template>
+
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon.vue";
+import XdButton from "@/components/XdButton/XdButton"
+import {mapActions} from "vuex";
+import Color from "color";
+
+let $vm = null;
+export default {
+  name: 'ComFilterQuery',
+  components:{
+    XdFontIcon,
+    XdButton
+  },
+  props:{
+    showQuery:{
+      type: String,
+      default: 'N',
+    },
+    layoutInfo:{
+      type: Object,
+      default(){
+        return {}
+      }
+    },
+    topHeight: {
+      type: Number,
+      default: 0,
+    },
+    cusMenuStyle:{
+      type: Object,
+      default(){
+        return {}
+      }
+    },
+    cusPopStyle:{
+      type: Object,
+      default(){
+        return {}
+      }
+    },
+    menuHeight:{
+      type: Number,
+      default: 48,
+    },
+    menuItems: {
+      type: Array,
+      default(){
+        return []
+      }
+    },
+
+    //排序默认值
+    defSort:{
+      type: String,
+      default: '',
+    },
+    defRemote:{
+      type: Object,
+      default(){
+        return {}
+      },
+    },
+    remoteList:{
+      type:Array,
+      default(){
+        return {}
+      }
+    },
+    //是否在筛选项过滤配置项
+    filterFields:{
+      type: Array,
+      default(){
+        return []
+      },
+    },
+
+    column:{
+      type: Number,
+      default: 3
+    },
+
+    //几个开始折叠
+    collapseNum: {
+      type: Number,
+      default: 3
+    },
+  },
+  filters:{
+    fCusName(item){
+      if($vm.sort) {
+        if($vm.sortAct === item.value) {
+          let act = $vm.allSortItemsOrg.filter(it=>$vm.sort===it.value);
+          if(act.length === 1) return  act[0].menuName;
+          return item.label
+        }
+        return item.label
+      }
+      return item.label
+    },
+    fCusOtherName(item){
+      if(item.value === 'filter') return item.label;
+      else {
+        let names = $vm.selectedNenuLabels[item.value];
+        if(names.length > 0) {
+          let namesStr = ''
+          if(typeof names === 'string') namesStr = names
+          else namesStr = names.join(',');
+          let maxStr = 9;
+          if($vm.menuItems.length === 3) maxStr = 7;
+          if($vm.menuItems.length === 4) maxStr = 4;
+          if(namesStr.length > maxStr) return  namesStr.substring(0,maxStr) + '...'
+          return namesStr
+        }
+        return item.label;
+      }
+    }
+  },
+  computed:{
+    queryMaskComp(){
+      return {
+        top: this.topHeight + this.layoutInfo.top + 'rpx'
+      }
+    },
+    placeholderStyleComp(){
+      let {paddingTb, borderTopWidth} =  this.cusMenuStyle;
+      return {
+        height: this.menuHeight + paddingTb + borderTopWidth  + 'rpx'
+      }
+    },
+    menuStyleTopComp(){
+      return {
+        zIndex: this.showQueryModal ? 1002 : 1,
+        position:this.$configProject.isPreview?'absolute':'fixed',
+        top: this.$configProject.isPreview ? 0 : (parseInt(this.queryMaskComp.top) - 2) + 'rpx',
+      }
+    },
+    queryTopComp(){
+      let {paddingTb} =  this.cusMenuStyle;
+      let height = 48;//默认90高，填充0
+      return {
+        top:  this.topHeight + this.layoutInfo.top + (height + paddingTb - 2)  + 'rpx'
+      }
+    },
+    menuTextColorComp(){
+      return {
+        color: this.cusMenuStyle.color || '#999'
+      }
+    },
+
+    //other menu======
+    otherMenuComp(){
+      let height = 48; //菜单高度
+      let maxHeight = this.$root.layoutInfo['bodyMinHeightRpx'] - (300 + height +  this.topHeight) ;
+      if(this.$configProject.isPreview) maxHeight = 600;
+      return {
+        backgroundColor: this.cusPopStyle['filterListColor'] || '#f8f8f8',
+        maxHeight: maxHeight + 'rpx',
+        borderTop: this.cusPopStyle.filterTopBorder || '2rpx solid #f8f8f8',
+
+      }
+    },
+    otherMenuContComp(){
+      return {
+        backgroundColor: '#fff',
+        marginBottom: (this.cusPopStyle['filterRowSpacing'] || 16) + 'rpx',
+        padding: (this.cusPopStyle['filterPadding'] || '32rpx 48rpx'),
+      }
+    },
+
+    otherMenuItemComp(){
+      let outWidth = uni.getSystemInfoSync().safeArea.width;
+      let columnSpacing = this.cusPopStyle['filterRowSpacing'] || 16
+      let columnSpacingAllWidth = columnSpacing *  this.$rpxNum * (this.column-1)
+      let marginRL = this.cusPopStyle['filterPaddingRL'] * this.$rpxNum;
+      return {
+        width: (outWidth - (columnSpacingAllWidth + marginRL))/this.column + 'px',
+        marginRight: columnSpacing + 'rpx',
+        marginTop: columnSpacing + 'rpx',
+        borderRadius:(this.cusPopStyle['filterListRadius']||0) + 'rpx',
+      };
+    },
+    //other menu======
+
+    boxStyleComp(){
+      return {
+        backgroundColor: this.cusPopStyle.filterListColor||'#fff',
+      }
+    },
+    labelColor(){
+      let font = this.cusPopStyle.filterFontStyle;
+      let params = {
+        color: font.color,
+        fontSize: font.fontSize,
+      }
+      if(this.menuAct !== 'common') {
+        params = {
+          ...params,
+          borderColor: Color(font.color).alpha(0.01).toString(),
+          backgroundColor: Color(font.color).alpha(0.05).toString(),
+        }
+      }
+      return params
+    },
+    labelActColor(){
+      let font = this.cusPopStyle.filterActFontStyle;
+      let params = {
+        color: font.color,
+        fontSize: font.fontSize,
+      }
+      if(this.menuAct !== 'common') {
+        params = {
+          ...params,
+          borderColor: Color(font.color).alpha(0.2).toString(),
+          backgroundColor: Color(font.color).alpha(0.1).toString(),
+        }
+      }
+      return params
+    },
+    cssStyle(){
+      let filterListColor = this.cusPopStyle['filterListColor'] || '#f8f8f8';
+      if(Color(filterListColor).isDark()) filterListColor = Color(filterListColor).lighten(0.8).toString();
+      else if(Color(filterListColor).isLight()) filterListColor = Color(filterListColor).darken(0.03).toString();
+
+      let menuListColor = this.cusPopStyle['backgroundColor'] || '#fff';
+      if(Color(menuListColor).isDark()) menuListColor = Color(menuListColor).lighten(0.8).toString();
+      else if(Color(menuListColor).isLight()) menuListColor = Color(menuListColor).darken(0.03).toString();
+
+      return {
+        '--com-pop-border': filterListColor,
+        '--com-menu-border': menuListColor
+      }
+    }
+  },
+  watch:{
+    menuItems(){
+      this.initMune();
+    },
+
+    showQueryModal(val){
+      if(val) this.setHasPopStatus({popId: this.bodyID, action: 'add'});
+      else this.setHasPopStatus({popId: this.bodyID, action: 'del'});
+    },
+    remoteList(){
+      this.initFilterData()
+    },
+
+  },
+  data(){
+    return {
+      allSortItemsOrg:[],
+      showQueryModal: false,
+      allSortItems:[],//综合列表
+      sortList:[], //排序数组显示菜单
+      sort: '', //排序键值
+      sortAct: '',
+      menuAct: '', //当前操作菜单
+      bodyID:null,
+
+      //其他按钮
+      otherNenuItems:[], //其他远程菜单列表
+      selectedNenuItems:{}, //存放选中选项卡对象
+      selectedNenuIds:{}, //存放选中选项卡ID对象
+      selectedNenuLabels:{}, //存放选中选项卡名称对象
+      isFitler: true, //是筛选OR快捷方式
+      isShowBtn: false, //是单选还是多选
+      filterTabs: [],//当前下拉菜单数据
+      filterTabsOrg:[], //下拉菜单原始数据
+    }
+  },
+  created() {
+    $vm = this;
+    this.bodyID = `body_${this.$xdUniHelper.randomChar(10)}`;
+    this.initMune();
+    this.initFilterData();
+  },
+  methods:{
+    ...mapActions(['setHasPopStatus']),
+
+    //==menu====
+    hideSelectMenu(){
+      this.showQueryModal = false;
+    },
+    clearFitlerMenu(){
+      //设置默认值
+      if(this.defSort){
+        this.sort = this.defSort;
+        let sortAct = 'common';
+        if(this.menuItems.includes('hot') && this.sort === 'sale_num_desc') sortAct = 'hot';
+        if(this.menuItems.includes('price') && ['price_desc','price_asc'].includes(this.sort)) sortAct = 'price';
+        this.sortAct = sortAct;
+      }
+
+      let menuItems = ['filter'];
+      this.initCurrentFilter('filter', true).map(item=>{
+        if(item['filter_keys'] === false) menuItems.push(item.value)
+      })
+      menuItems.map(key=>{
+        this.$set(this.selectedNenuIds,key, []);
+        this.$set(this.selectedNenuItems, key, []);
+        this.$set(this.selectedNenuLabels, key, []);
+      });
+
+      let otherParams = {};
+      Object.keys(this.defRemote).map(key=>{
+        otherParams[key] = typeof this.defRemote[key] === 'string'?this.defRemote[key]: this.defRemote[key].join(',')
+      })
+
+      this.$emit('on-change', {
+        sort: this.defSort,
+        filter:{
+          items: [],
+          labels: [],
+          ids: this.defRemote
+        },
+        params:{
+          sort: this.defSort,
+          ...otherParams,
+        }
+      })
+    },
+    initMune() {
+      let sortList = [];
+      let allSortItems = [
+        {label: "综合",  value: "default", menuName: '综合', key: 'common'},
+        {label: "销量",  value: "sale_num_desc", menuName: '销量', key: 'hot'},
+        {label: "价格由高到低",  value: "price_desc", menuName: '价格降', key: 'price'},
+        {label: "价格由低到高",  value: "price_asc", menuName: '价格升', key: 'price'},
+      ]
+      this.allSortItemsOrg = this.$xdUniHelper.cloneDeep(allSortItems);
+
+      //综合处理
+      if(this.menuItems.includes('common')) sortList.push({label:'综合', value:'common'});
+
+      //价格处理
+      if(this.menuItems.includes('price')) {
+        sortList.push({label:'价格', value:'price'});
+        allSortItems = allSortItems.filter(item=> item.key !== 'price');
+      }
+
+      //销量处理
+      if(this.menuItems.includes('hot')) {
+        sortList.push({label:'销量', value:'hot'});
+        allSortItems = allSortItems.filter(item=> item.key !== 'hot');
+      }
+      this.sortList = sortList;
+      this.allSortItems = allSortItems;
+
+      //设置排序默认值
+      if(this.defSort){
+        this.sort = this.defSort;
+        let sortAct = 'common';
+        if(this.menuItems.includes('hot') && this.sort === 'sale_num_desc') sortAct = 'hot';
+        if(this.menuItems.includes('price') && ['price_desc','price_asc'].includes(this.sort)) sortAct = 'price';
+        this.sortAct = sortAct;
+      }
+
+      //其他菜单处理
+      let otherNenuItems = this.menuItems.filter(item=>{
+        return !(typeof item === 'string' && ['common', 'price', 'hot'].includes(item));
+      });
+
+      this.initSelected(otherNenuItems.map(item=>item.value));
+      this.otherNenuItems = otherNenuItems;
+    },
+    initSelected(nenuItems){
+      nenuItems.map(key=>{
+        this.$set(this.selectedNenuIds, key, []);
+        this.$set(this.selectedNenuItems,key, []);
+        this.$set(this.selectedNenuLabels, key, []);
+      });
+    },
+    handleCommonSort(item){
+      this.sort = item.value;
+      this.closeQueryModal();
+      this.update();
+    },
+    moveHandle(){
+      return false
+    },
+    closeQueryModal(){
+      this.showQueryModal = false;
+    },
+    //==menu====
+
+    handleNenu(value){
+      //排序菜单操作
+      if(['common','price','hot'].includes(value)) {
+        if(value=== 'hot') {
+          this.sort = 'sale_num_desc';
+          this.showQueryModal = false;
+          this.update();
+        }
+        if(value === 'price') {
+          if(!['price_desc','price_asc'].includes(this.sort)) {
+            this.sort = 'price_desc';
+          }
+          else {
+            switch(this.sort) {
+              case 'price_desc':
+                this.sort = 'price_asc';
+                break;
+              default:
+                this.sort = 'price_desc';
+            }
+          }
+          this.showQueryModal = false;
+          this.update();
+        }
+        if(value === 'common') {
+          if(value === this.menuAct) this.showQueryModal = !this.showQueryModal;
+          else this.showQueryModal = true;
+        }
+        this.sortAct = value;
+        this.menuAct  = value;
+      }
+
+      //其他菜单操作
+      else {
+        this.initCurrentFilter(value);
+
+        //点击是当前菜单直接关闭操作
+        if(value === this.menuAct) this.showQueryModal = !this.showQueryModal;
+        else this.showQueryModal = true;
+
+        this.menuAct  = value;
+      }
+    },
+
+    //==其他菜单下拉操作====
+    initCurrentFilter(value,isData=false){
+      if(this.filterTabsOrg.length === 0)  this.filterTabs= [];
+      let filterTabs = this.$xdUniHelper.cloneDeep(this.filterTabsOrg);
+
+      //过滤条件
+      if(value === 'filter') {
+        if(this.filterFields.length > 0) {
+          filterTabs = filterTabs.filter(item=>{
+            return !(this.filterFields.includes(item.title) || this.filterFields.includes(item.value))
+          })
+        }
+        let filterTabsNew =  this.$xdUniHelper.cloneDeep(filterTabs).map(item =>{
+          //私有属性
+          if(item.value === undefined || item.value === 'attr'){
+            item.value = `attr-${this.$xdUniHelper.randomChar(15)}`;
+            item.filter_keys = true;
+          }
+          else item.filter_keys = false;
+          return item
+        });
+        if(isData) return filterTabsNew;
+        else {
+          this.filterTabs = this.$xdUniHelper.cloneDeep(filterTabsNew).map(item =>{
+            //私有属性
+            if(item.value === undefined || item.value === 'attr'){
+              item.value = `attr-${this.$xdUniHelper.randomChar(15)}`;
+              item.filter_keys = true;
+            }
+            else item.filter_keys = false;
+            return item
+          });
+          this.isFitler = true
+          this.isShowBtn = true
+        }
+
+      }
+      //快捷方式
+      else {
+        this.filterTabs = filterTabs.filter(item=>item.value === value);
+        this.isFitler = false;
+        if(this.filterTabs.length === 1)  this.isShowBtn = this.filterTabs[0]['multiple'];
+        else this.isShowBtn = false;
+      }
+    },
+    initFilterData(){
+      if(this.remoteList.length === 0) this.filterTabsOrg = [];
+      else {
+        this.filterTabsOrg = this.$xdUniHelper.cloneDeep(this.remoteList).map(item=>{
+          let isOwnAttr = !(item.value.indexOf('attr') === 0);
+          //当前菜单不在快捷方式里面时候进行数据初始化
+          if(isOwnAttr) {
+            let ids = [], items=[], labels = [];
+            //有默认值
+            if(this.defRemote[item.value] && this.defRemote[item.value].length > 0) {
+              this.defRemote[item.value].map(id=>{
+                let cur = (item.options||[]).find(item=> id === item.value);
+                if(cur) {
+                  ids.push(cur.value);
+                  labels.push(cur.label);
+                  items.push(cur);
+                }
+              })
+            }
+            this.$set(this.selectedNenuIds, item.value, ids);
+            this.$set(this.selectedNenuItems, item.value, items);
+            this.$set(this.selectedNenuLabels, item.value,labels);
+          }
+          return item;
+        });
+      }
+    },
+    onOtherReset(){
+      if(this.menuAct === 'filter') {
+        let nenuItems = ['filter'];
+        this.filterTabs.map(item=>{
+          if(item['filter_keys'] === false) nenuItems.push(item.value)
+        });
+        this.initSelected(nenuItems);
+      }
+      else {
+        this.$set(this.selectedNenuIds, this.menuAct, []);
+        this.$set(this.selectedNenuItems, this.menuAct, []);
+        this.$set(this.selectedNenuLabels, this.menuAct, []);
+      }
+    },
+    onOtherConfirm(){
+      this.update();
+      this.closeQueryModal();
+    },
+    switchOtherOpen(tab){
+      this.filterTabs = this.filterTabs.map(item => {
+        if(JSON.stringify(tab.value) === JSON.stringify(item.value)) item['open'] = !item['open'];
+        return item;
+      })
+    },
+    isOtherActive(tab, value){
+      let isOwnAttr = !(tab.value.indexOf('attr-') === 0);
+      let saveKey = isOwnAttr ? tab.value : 'filter';
+      if(!this.selectedNenuIds[saveKey]) return false
+      return this.selectedNenuIds[saveKey].includes(value);
+    },
+    setSelectMenuOneData(saveKey, ids, items, labels){
+      this.$set(this.selectedNenuIds, saveKey, ids);
+      this.$set(this.selectedNenuItems, saveKey, items);
+      this.$set(this.selectedNenuLabels, saveKey, labels);
+    },
+    setSelectMenuMoreData(saveKey, item){
+      let ids = this.$xdUniHelper.cloneDeep(this.selectedNenuIds[saveKey] || []),
+        items = this.$xdUniHelper.cloneDeep(this.selectedNenuItems[saveKey] || []),
+        labels = this.$xdUniHelper.cloneDeep(this.selectedNenuLabels[saveKey] || []);
+      ids.push(item.value);
+      items.push(item);
+      labels.push(item.label);
+      this.$set(this.selectedNenuIds, saveKey, ids);
+      this.$set(this.selectedNenuItems, saveKey, items);
+      this.$set(this.selectedNenuLabels, saveKey, labels);
+    },
+    setUnselectMenu(saveKey,index){
+      this.selectedNenuIds[saveKey].splice(index,1);
+      this.selectedNenuLabels[saveKey].splice(index,1);
+      this.selectedNenuItems[saveKey].splice(index,1);
+    },
+    setOhterChooseTag(tab, item){
+      let isOwnAttr = !(tab.value.indexOf('attr-') === 0);
+      let saveKey = isOwnAttr ? tab.value : 'filter';
+
+      //单选(排除筛选中的单选选项)
+      if(isOwnAttr && !tab.multiple) {
+        //点击筛选中的单选
+        if(this.menuAct === 'filter') {
+          //取消选中
+          if(item.value === this.selectedNenuIds[tab.value]) {
+            this.$set(this.selectedNenuIds, saveKey, '');
+            this.$set(this.selectedNenuItems, saveKey, '');
+            this.$set(this.selectedNenuLabels, saveKey, '');
+          }
+          //新增操作
+          else {
+            this.setSelectMenuOneData(saveKey, item.value, item , item.label);
+          }
+          return;
+        }
+        this.setSelectMenuOneData(saveKey, item.value, item , item.label);
+        //单选直接触发返回数据
+        if(this.isShowBtn === false) this.onOtherConfirm();
+      }
+
+      //多选or筛选菜单中的单选属性
+      else {
+        let index = this.selectedNenuIds[saveKey].indexOf(item.value);
+
+        //filter中的单选操作
+        if(!tab.multiple) {
+          if(index === -1) {
+            tab.options.map(it=>{
+              let idx = this.selectedNenuIds[saveKey].indexOf(it.value);
+              if(idx !== -1) {
+                this.setUnselectMenu(saveKey,idx)
+              }
+            });
+            this.setSelectMenuMoreData(saveKey,item);
+          }
+          else {
+            this.setUnselectMenu(saveKey,index)
+          }
+          return
+        }
+
+        //新增
+        if(index === -1) {
+          this.setSelectMenuMoreData(saveKey,item)
+        }
+
+        //取消操作
+        else {
+          this.setUnselectMenu(saveKey,index)
+        }
+      }
+
+    },
+    //==其他菜单下拉操作====
+
+    update(){
+      let params = {};
+      if(this.sort) params['sort'] = this.sort;
+      Object.keys(this.selectedNenuIds).map(key=>{
+        if(key === 'filter') {
+          if( this.selectedNenuIds[key].length > 0) params['filter_keys'] =  this.selectedNenuIds[key].join(',');
+        }
+        else {
+          if( this.selectedNenuIds[key].length > 0){
+            //单选
+            if(typeof this.selectedNenuIds[key] === 'string') params[key] = this.selectedNenuIds[key];
+            //多选
+            else params[key] =  this.selectedNenuIds[key].join(',');
+          }
+        }
+      })
+      this.$emit('on-change', {
+        sort: this.sort,
+        filter:{
+          items: this.$xdUniHelper.cloneDeep(this.selectedNenuItems),
+          labels: this.$xdUniHelper.cloneDeep(this.selectedNenuLabels),
+          ids: this.$xdUniHelper.cloneDeep(this.selectedNenuIds)
+        },
+        params
+      })
+    },
+
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .jfb-filter {
+    position: relative;
+    &-placeholder {
+      font-size: 20rpx;
+    }
+    &-menu {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 100;
+      border-top: 1px solid var(--com-menu-border);
+      display: flex;
+      justify-content: space-around;
+      height: 49rpx;
+
+
+      &-item {
+        display: flex;
+        font-size: unit(28, rpx);
+        line-height: unit(48, rpx);
+        justify-content: center;
+        align-items: center;
+        color: #333;
+        flex: 1;
+
+
+        //.query_item{
+        //  display: flex;
+        //  font-size: unit(28, rpx);
+        //  line-height: unit(48, rpx);
+        //  justify-content: center;
+        //  align-items: center;
+        //  color: #333;
+        //  font-weight: 400;
+        //  flex: 1;
+        //
+        //  & > view {
+        //    display: flex;
+        //    justify-content:center;
+        //    align-items: center;
+        //    width: unit(40, rpx);
+        //    height: unit(92, rpx);
+        //    flex-shrink: 0;
+        //  }
+        //  &__sort{
+        //    flex-direction: column;
+        //    justify-items: center;
+        //    align-content: center;
+        //    line-height: 16rpx;
+        //  }
+        //  & > text {
+        //    flex-shrink: 0;
+        //  }
+        //}
+      }
+
+      &-name {
+
+        &.fontWeight {
+          font-weight: bold;
+        }
+      }
+
+      &-icon {
+
+        & > view {
+          height: 100%;
+          display: flex;
+          align-content: center;
+          align-items: center;
+          flex-direction: column;
+        }
+      }
+    }
+
+    &-pop {
+      position: fixed;
+      z-index: 110;
+      left: 0;
+      right: 0;
+      .xd-query-sort{
+        &-item {
+          height: 80rpx;
+          border-bottom: 1rpx solid var(--com-pop-border);
+          line-height: 80rpx;
+          padding-left: 80rpx;
+          color: #999;
+          font-size: 24rpx;
+        }
+      }
+
+      .xd-query-filter {
+        background-color: #fff;
+
+        .filter_wrap{
+          overflow: auto;
+
+          .filter_item{
+            &:last-child {
+              margin-bottom: 0!important;
+            }
+          }
+          .filter_title{
+            color: #333333;
+            font-size: 28rpx;
+            margin-bottom: 1.2rem;
+            font-weight: bold;
+            display: flex;
+            justify-content: space-between;
+
+            ._ext{
+              display: flex;
+              align-items: center;
+              font-size: 24rpx;
+              color: #BBBBBB;
+              font-weight: normal;
+
+              & > text {
+                padding-right: unit(10, rpx);
+              }
+            }
+          }
+
+          .filter_tab{
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: flex-start;
+            align-items: center;
+
+            & > ._tag {
+              text-align: center;
+              line-height: 62rpx;
+              border-radius: 4rpx;
+              font-size: 24rpx;
+              color: #666;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              white-space: nowrap;
+              box-sizing: border-box;
+              background-color: #f8f8f8;
+              border-width: 2rpx;
+              border-style: solid;
+              padding: 0 10rpx;
+
+              &.noMarginRigth{
+                margin-right: 0!important;
+              }
+              &.noMarginTop {
+                margin-top: 0!important;
+              }
+            }
+
+
+          }
+
+        }
+
+        .bottom_btn{
+          display: flex;
+          justify-content: center;
+          padding: 16rpx 32rpx;
+          border-top: 2rpx solid #f8f8f8;
+
+          .xd-button{
+            margin: 0 32rpx;
+          }
+        }
+      }
+
+
+    }
+
+    &-mask {
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, .4);
+      z-index: 102;
+    }
+  }
+</style>