jufubao-base 1.0.288 → 1.0.289-beta1

package/src/components/JfbBaseTfkSearch/JfbBaseTfkSearch.vue

@@ -34,7 +34,41 @@
               >{{ item.label }}</view>
             </view>
           </view>
+          <view class="menu_filter" v-if="(tabId!=='all'&&filterTab.length)||(tabId!=='all'&&showComprehensive)||(tabId!=='all'&&showSort)">
+            <view @click="handleGetFilterItem({value:'comprehensive'})" v-if="showComprehensive" class="menu_filter_item" >
+              <view>{{sortData.label || '综合'}}</view>
+              <xd-font-icon size="24" icon="iconxia_down" color="#333"></xd-font-icon>
+            </view>
+            <view @click="handleGetFilterItem({value:'sort'})" v-if="showSort" class="menu_filter_item" >
+              <view>{{sortData.label || '排序'}}</view>
+              <xd-font-icon size="24" icon="iconxia_down" color="#333"></xd-font-icon>
+            </view>
+            <view class="menu_filter_item" @click="handleGetFilterItem(item)" v-for="(item,index) in filterTab" :key="index">
+              <view>
+                {{ item.label }}
+              </view>
+              <xd-font-icon v-if="item.icon" :size="item.size" :icon="item.icon" color="#333"></xd-font-icon>
+            </view>
+          </view>
+          <view class="query_modal">
+            <xd-query-filter
+              v-if="showMoreFilterType.includes(curQueryTab)&&searchFilterList.length"
+              :key="curQueryTab"
+              :list="searchFilterList"
+              :filter-type="curQueryTab"
+              :collapse-num="6"
+              :filter-selected="selectFilterParams"
+              @onConfirm="handleQueryFilter"></xd-query-filter>
+              <xd-query-sort
+                v-if="(curQueryTab === 'comprehensive' || curQueryTab === 'sort')"
+                :list="sortList"
+                :filter-style="filterStyle"
+                :sort="sort"
+                @onConfirm="handleQuerySort"
+              ></xd-query-sort>
+          </view>
         </view>
+
         <view v-if="!isPreview" :style="{height: menuHeight}"></view>
         <view class="tfk-search" :style="{padding: outSpacing + 'rpx'}">
           <all-list v-if="tabId === 'all'"
@@ -50,6 +84,7 @@
             v-else
             :tab-id="tabId"
             :keyword="keyword"
+            :refresh="refresh"
             :list-item-style="listItemStyle"
             :product-config="productConfig"
             ref="customList"
@@ -74,6 +109,8 @@
   import CustomList from "./CustomList.vue";
   import AllList from "./AllList.vue";
   import { mapState } from 'vuex';
+  import XdQueryFilter from "./XdQueryFilter"
+  import XdQuerySort from "./XdQuerySort"
 
   class EmitParent {
     constructor(options) {
@@ -88,6 +125,8 @@
       XdFontIcon,
       AllList,
       XdSearchHistory,
+      XdQueryFilter,
+      XdQuerySort
     },
     mixins: [
       componentsMixins, extsMixins, JfbBaseTfkSearchMixin,listMixins
@@ -128,15 +167,42 @@
         allModuleItemContRadius: 16,
         allModuleItemContBgColor: "#FFFFFF",
         emitParent:{},
-        is_plus_site: false
+        is_plus_site: false,
+        closeMask: true,
+        filterTab: [],
+        filterTabIcon: [
+          { value: 'area', label: '区域',icon: 'icondizhitubiao', size: 24 },
+          { value: 'brand', label: '品牌',icon: 'iconxia_down', size: 18 },
+          { value: 'shop', label: '门店分类',icon: 'iconxia_down', size: 18 },
+          { value: 'filter', label: '筛选', icon: 'iconshaixuanbiaoji_mian', size: 24 },
+          { value: 'comprehensive', label: '综合', icon: 'iconxia_down', size: 18 },
+          { value: 'sort', label: '排序', icon: 'iconxia_down', size: 18 },
+          { value: 'business_line', label: '业务线', icon: 'iconxia_down', size: 18 },
+        ],
+        curQueryTab: "",//刷新KEY（切换标签）
+        searchFilterList: [],
+        searchFilterParams: {},
+        selectFilterParams: {},
+        filterType: '',
+        sort: "",
+        sortData: {},
+        filterStyle: {},
+        showMoreFilterType: ['filter', 'shop', 'brand', 'area', 'delivery_method', 'shop_category', 'business_line','namespace'],
+        refresh: new Date().getTime(),
+        showComprehensive: false,
+        showSort:false,
+        brands: [],
+        namespace: '',
+        sortList: []
       }
     },
     computed: {
       ...mapState({
         siteInfo: state => state.siteInfo,
+        stateCity: state => state.cityLocation.city,
       }),
       showMenuList(){
-        return [{label: "全部", value: "all"}, ...this.menuList]
+        return [{ label: "全部", value: "all" }, ...this.menuList]
       },
       menuWrapBoxStyle(){
         let padding = `${this.checkValue(this.menuMargin.top, 20)}rpx`;
@@ -186,6 +252,9 @@
         let height = this.checkValue(menuMargin.top, 20) + this.checkValue(menuMargin.bottom, 20) +
           this.checkValue(menuPadding.top, 20) + this.checkValue(menuPadding.bottom, 20) +
           this.checkValue(menuItemPadding.top, 20) + this.checkValue(menuItemPadding.bottom, 20);
+        if (this.filterTab.length > 0) {
+          height += 90
+        }
         return (height + 40) + 'rpx';
       },
       menuItemActiveStyle(){
@@ -229,8 +298,7 @@
         }
       },
     },
-    created() {
-
+  created() {
       this.emitParent = new EmitParent({
         getParent: ()=>{
           return this;
@@ -248,8 +316,8 @@
        * @param cb {Function}
        */
       handleList({params, cb}){
-        let data = {...params};
-        if(this.tabId === 'all'){
+        let data = { ...params, sort: this.sort, ...this.searchFilterParams };
+         if(this.tabId === 'all'){
           data['search_range'] = this.searchScope.map(item => item.value.split("@")[0]).join(',');
         }
         if(this.productConfig.isShowDiscount==='Y'){
@@ -313,19 +381,170 @@
         this.allModuleItemContPadding = getContainerPropsValue(container, 'content.allModuleItemContPadding', {});
         this.allModuleItemContRadius = getContainerPropsValue(container, 'content.allModuleItemContRadius', 16);
         this.allModuleItemContBgColor = getContainerPropsValue(container, 'content.allModuleItemContBgColor', '#FFFFFF');
-
         if(this.$configProject['isPreview']){
           this.menuList = this.searchScope;
           this.isPreview = true;
         }
+        this.filterStyle = {
+          filterPadding: this.getMarginAndPadding({},20),
+          filterRowSpacing:20,
+          filterListColor:'#f9f9f9',
+          filterFontStyle: this.getFontAndBgcStyle({},{
+            fontSize: '26px',
+            color: '#333',
+            fontWeight: 'normal',
+            bgColor: 'rgba(0,0,0,0)'
+          }),
+          filterActFontStyle: this.getFontAndBgcStyle({},{
+            fontSize: '26px',
+            color: this.mainColor,
+            fontWeight: 'normal',
+            bgColor: 'rgba(0,0,0,0)'
+          },'act')
+        };    
       },
       handleSwitchMenu(item){
         this.tabId = item.value;
+        this.namespace = item.namespace;
+        this.filterType = item.type
+        this.curQueryTab = '';
+        this.searchFilterParams = {};
+        this.sortData = {};
+        this.sort = '';
+        if (item.filter_item && item.filter_item.tab_filter) {
+          // 综合和排序的显示状态，当选中综合或排序时，下拉菜单取本地数据
+          this.showComprehensive = item.filter_item.tab_filter.find(item => item.value === 'comprehensive')
+          this.showSort = item.filter_item.tab_filter.find(item => item.value === 'sort')
+          let filter_item = item.filter_item.tab_filter.filter(item => {
+            return (item.value !== 'comprehensive'&&item.value !== 'sort')
+          })
+          this.filterTab = filter_item.map(item => {
+            let temp = this.filterTabIcon.find(Sitem => item.value === Sitem.value);
+            return {
+              ...item,
+              icon: temp ? temp.icon : '',
+              size: temp ? temp.size : ''
+            }
+          })
+        } else {
+          this.filterTab = []
+        }
         uni.pageScrollTo({
           scrollTop: 0,
           duration: 0
         });
       },
+      handleGetFilterItem(item) {
+        //设置城市
+        let city_code = ''
+        if(this.stateCity && this.stateCity.city_code) {
+          city_code = this.stateCity.city_code;
+        }
+        let data = {
+          type: this.filterType,
+          namespace: this.namespace,
+          filter_item: item.value,
+          city_code
+        }
+        if(item.value === this.curQueryTab){
+          this.curQueryTab = '';
+          return
+        }
+        else {
+          this.curQueryTab = item.value;
+        }
+        if (this.curQueryTab === 'sort') {
+          this.sortList = [{
+            label: "排序",
+            key: "default",
+            value: "default"
+          }]
+        } else if (this.curQueryTab === 'comprehensive') {
+          this.sortList = [
+          {
+            label: "综合",
+            key: "default",
+            value: "default"
+          },
+          {
+            label: "销量",
+            key: "sale_num",
+            children: [
+              {label: "由高到低", value: 'sale_num_desc'},
+              {label: "由低到高", value: 'sale_num_asc'}
+            ]
+          },
+          {
+            label: "价格",
+            key: "price",
+            children: [
+              {label: "由高到低", value: 'price_desc'},
+              {label: "由低到高", value: 'price_asc'}
+            ]
+          }
+        ]
+         }
+        const sortMap = {
+          'sales_volume': 'sale_num_desc',
+          'price': 'price_desc',
+          default: 'default'
+        };
+
+        if (sortMap[item.value]) {
+          this.sort = sortMap[item.value];
+          this.refresh = new Date().getTime();
+          return;
+        }
+  
+        jfbRootExec("getTfkSearchFilterItems", {
+          vm: this,
+          data: data
+        }).then(res => {
+          this.searchFilterList = res.items || [];
+        }).catch(err => {
+          this.$xdLog.catch(err);
+        })
+      },
+      handleQueryFilter({ items, ids, labels }) {
+        const maps = {
+          'brand': 'brands',
+          'area': 'area_codes',
+          'delivery_method': 'delivery_methods',
+          'shop_category': 'category_ids',
+          'business_line': 'business_lines'
+        };
+        Object.keys(items).map(key => {
+          let keys = Object.keys(maps);
+          if (keys.indexOf(key) > -1) {
+            this.searchFilterParams[maps[key]] = ids[key]
+          }
+          // if (key === 'brand') {
+          //   this.searchFilterParams.brands = ids[key]
+          // }
+          // if (key === 'area') {
+          //   this.searchFilterParams.area_codes = ids[key]
+          // }
+          // if (key === 'delivery_method') {
+          //   this.searchFilterParams.delivery_methods = ids[key]
+          // }
+          // if (key === 'shop_category') {
+          //   this.searchFilterParams.category_ids = ids[key]
+          // }
+          // if (key === 'business_line') {
+          //   this.searchFilterParams.business_lines = ids[key]
+          // }
+          this.selectFilterParams[key] = ids[key] 
+        })
+        this.curQueryTab = '';
+        this.refresh = new Date().getTime();
+      },
+      handleQuerySort(sortData){
+        if(this.sort === sortData.value) return false;
+        this.sortData = sortData;
+        this.sort = sortData.value;
+        this.curQueryTab = '';
+        this.refresh = new Date().getTime();
+      },
       handleToSearch(item){
         this.keyword = item;
         jfbRootFnExec(this, 'onCustomEvent')("baseTfkSearch@keyword", item);
@@ -380,6 +599,27 @@
           }
         }
       }
+      .menu_filter {
+        background:#fff;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        padding: 26rpx 0;
+        border-top: 1px solid #f8f8f8;
+        &_item {
+          color: #333;
+          font-size: 28rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          & > view:first-child{
+            margin-right: 14rpx;
+          }
+        }
+      }
+      .query_modal {
+        background-color: #fff;
+      }
     }
   }
 </style>

package/src/components/JfbBaseTfkSearch/XdQueryFilter.vue

@@ -0,0 +1,354 @@
+<template>
+  <view class="xd-query-filter">
+    <view class="filter_wrap" :style="[boxListComp]">
+      <view
+        class="filter_item"
+        v-for="tab in filterTabs"
+        :key="tab.title"
+        :style="[contStyleComp]"
+      >
+        <view class="filter_title">
+          <view>{{tab.title}}</view>
+          <view v-if="isFitler && tab.options.length > collapseNum" class="_ext" @click="switchOpen(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="[itemStyleComp,(isActive(tab, item.value)?labelActColor:labelColor)]"
+              v-if="(!tab.open && i < collapseNum) || tab.open || !isFitler"
+              :key="item.value"
+              :class="{active: isActive(tab, item.value)}"
+              @click="setChooseTag(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="small" @click="onReset">重置</xd-button>
+      <xd-button class="xd-button" type="primary" width="248rpx" size="small" @click="onConfirm">确定</xd-button>
+    </view>
+  </view>
+</template>
+
+<script>
+import XdButton from "@/components/XdButton/XdButton"
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon"
+import Color from "color";
+
+export default {
+  components: {
+    XdButton,
+    XdFontIcon
+  },
+  props: {
+    list: {
+      type: Array,
+      default: function(){
+        return [
+
+        ]
+      }
+    },
+    filterStyle:{
+      type: Object,
+      default(){
+        return {}
+      }
+    },
+    collapseNum: {
+      type: Number,
+      default: 3
+    },
+    filterType:{
+      type: String,
+      default: ""
+    },
+    filterSelected:{
+      type: Object,
+      default(){
+        return {}
+      }
+    },
+  },
+  computed:{
+    itemStyleComp(){
+      let column = 3,columnSpacing = 24;
+
+      let outWidth = uni.getSystemInfoSync().safeArea.width;
+      let columnSpacingWidth = columnSpacing * (column-1) * this.$rpxNum;
+      let marginRL = 96 * this.$rpxNum; //左右默认48rpx
+      let paddingRL = 16  * this.$rpxNum
+
+      return {
+        width: (outWidth - (columnSpacingWidth + marginRL + paddingRL))/column + 'px',
+        padding: `0 ${paddingRL}px`,
+        marginRight: columnSpacing + 'rpx',
+        marginTop: columnSpacing + 'rpx',
+      };
+    },
+    boxListComp(){
+      let maxHeight = this.$root.layoutInfo['bodyMinHeightRpx'] - 500;
+      if(this.$configProject.isPreview) maxHeight = 800;
+      return {
+        backgroundColor: this.filterStyle['filterListColor'] || '#f8f8f8',
+        maxHeight: maxHeight + 'rpx',
+        borderTop: this.filterStyle.filterTopBorder|| '2rpx solid #f8f8f8'
+      }
+    },
+    contStyleComp(){
+      return {
+        backgroundColor: '#fff',
+        marginBottom: (this.filterStyle['filterRowSpacing'] || 16) + 'rpx',
+        padding: (this.filterStyle['filterRowPadding'] || '32rpx 48rpx'),
+      }
+    },
+    labelColor(){
+      let fontStyle = this.filterStyle.filterFontStyle || {}
+      return {
+        color: fontStyle.color ||'#666',
+        borderColor: Color(fontStyle.color || '#666').alpha(0.2).toString(),
+        backgroundColor: fontStyle.backgroundColor || '#f8f8f8',
+      }
+    },
+    labelActColor(){
+      let fontStyle = this.filterStyle.filterActFontStyle || {}
+      let mainColor = fontStyle.color || this.$root.gThemeStyle['--g-theme-mainColor'];
+      return {
+        color: mainColor,
+        borderColor: Color(mainColor).alpha(0.5).toString(),
+        backgroundColor: fontStyle.backgroundColor || Color(mainColor).alpha(0.1).toString(),
+      }
+    },
+  },
+  data(){
+    return {
+      isFitler: true, //是筛选OR快捷方式
+      isShowBtn: false,
+      selectedItems:{},
+      selectedLabels:{},
+      selectedIds:{},
+      filterTabs: [],
+    }
+  },
+  watch: {
+    list(){
+      this.initData();
+    },
+    filterType(){
+      this.initData();
+    },
+  },
+  created() {
+    console.log(this.list,'aaajaj');
+    this.initData();
+  },
+  methods: {
+    initData(){
+      let filterTabs = [];
+      if(this.filterType === 'filter') {
+        filterTabs = this.$xdUniHelper.cloneDeep(this.list);
+        this.isShowBtn = true;
+        this.isFitler = true;
+      }
+      else {
+        this.isFitler = false;
+        filterTabs = this.$xdUniHelper.cloneDeep(this.list).filter(item=>{
+          if( this.filterType === item.value) {
+            this.isShowBtn = item.multiple === true;
+          }
+          return this.filterType === item.value;
+        });
+      }
+
+      filterTabs.map(item=>{
+        //未选择
+        let ids = !item.multiple?'':[];
+        let lables = !item.multiple ?'':[];
+        let items = !item.multiple?'':[];
+
+        //已选中
+        if(this.filterSelected[item.value]) {
+          ids = this.filterSelected[item.value];
+          if(!item.multiple) {
+            item.options.map(item=>{
+              if(ids === item.value) {
+                lables = item.label;
+                items = this.$xdUniHelper.cloneDeep(item);
+              }
+            })
+          }
+          else {
+            item.options.map(item=>{
+              ids.map(it=>{
+                if(it === item.value) {
+                  lables.push(item.label)
+                  items.push(this.$xdUniHelper.cloneDeep(item))
+                }
+              })
+
+            })
+          }
+        }
+
+        this.$set(this.selectedItems, item.value, items);
+        this.$set(this.selectedLabels, item.value, lables);
+        this.$set(this.selectedIds, item.value, ids);
+      });
+
+      this.filterTabs = filterTabs
+    },
+    isActive(tab, value){
+      if(!this.selectedIds[tab.value]) return false
+      return this.selectedIds[tab.value].includes(value);
+    },
+    setSelectData(type,ids, items, labels){
+      this.$set(this.selectedIds, type, ids);
+      this.$set(this.selectedItems, type, items);
+      this.$set(this.selectedLabels, type, labels);
+    },
+
+    setChooseTag(tab, item){
+      //单选
+      if(!tab.multiple) {
+        //取消
+        if(this.selectedIds[tab.value] && this.selectedIds[tab.value].includes(item.value)) {
+          this.setSelectData(tab.value, '', '', '')
+        }
+        //新增
+        else {
+          this.setSelectData(tab.value, item.value, item, item.label);
+          //单选直接触发返回数据
+          if(this.isShowBtn === false) this.onConfirm();
+        }
+      }
+      //多选
+      else {
+        let index =  this.selectedIds[tab.value].indexOf(item.value);
+        //新增
+        if(index === -1) {
+          //选中
+          let ids = this.$xdUniHelper.cloneDeep(this.selectedIds[tab.value] || []),
+            items = this.$xdUniHelper.cloneDeep(this.selectedItems[tab.value] || []),
+            labels = this.$xdUniHelper.cloneDeep(this.selectedLabels[tab.value] || []);
+          ids.push(item.value);
+          items.push(item);
+          labels.push(item.label);
+          this.$set(this.selectedIds, tab.value,ids);
+          this.$set(this.selectedItems, tab.value,items);
+          this.$set(this.selectedLabels, tab.value,labels);
+        }
+        //取消
+        else {
+          this.selectedIds[tab.value].splice(index,1);
+          this.selectedLabels[tab.value].splice(index,1);
+          this.selectedItems[tab.value].splice(index,1);
+        }
+      }
+
+    },
+    switchOpen(tab){
+      this.filterTabs = this.filterTabs.map(item => {
+        if(JSON.stringify(item) === JSON.stringify(tab)) item['open'] = !item['open'];
+        return item;
+      })
+    },
+
+    //重置
+    onReset(){
+      Object.keys(this.selectedIds).map(key=>{
+        let multiple = this.$xdUniHelper.checkVarType(this.selectedIds[key]) === 'array';
+        let value = multiple ?'':[];
+        this.setSelectData(key, value, value,value)
+      })
+
+
+    },
+    onConfirm(){
+      this.$emit("onConfirm", {
+        items: this.$xdUniHelper.cloneDeep(this.selectedItems),
+        labels: this.$xdUniHelper.cloneDeep(this.selectedLabels),
+        ids: this.$xdUniHelper.cloneDeep(this.selectedIds)
+      });
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .filter_wrap{
+    overflow: auto;
+    max-height: 50vh;
+
+    .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;
+      max-height: 50vh;
+
+      & > ._tag{
+        text-align: center;
+        line-height: 66rpx;
+        border-radius: 4rpx;
+        font-size: 24rpx;
+        color: #666;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        box-sizing: border-box;
+        background-color: #f8f8f8;
+
+        &:nth-child(3n){
+          margin-right: 0!important;
+        }
+        &:nth-child(1),&:nth-child(2),&:nth-child(3) {
+          margin-top: 0!important;
+        }
+      }
+    }
+
+  }
+
+  .bottom_btn{
+    display: flex;
+    justify-content: center;
+    padding: 16rpx 32rpx;
+    border-top: 2rpx solid #f8f8f8;
+
+    .xd-button{
+      margin: 0 32rpx;
+    }
+  }
+</style>