jufubao-base 1.0.287 → 1.0.289-beta1

package/src/components/JfbBaseNotice/JfbBaseNotice.vue

@@ -182,7 +182,6 @@
   import getServiceUrl from "@/common/getServiceUrl";
   import storage from "@/common/storage";
   import Color from "color";
-  const color = require('color');
   export default {
     name: "JfbBaseNotice",
     components: {
@@ -346,13 +345,13 @@
        * @param container {object} 业务组件对象自己
        */
       init(container) {
-        let colorBg = color(this.warningColor).alpha(0.1).array();
+        let colorBg = Color(this.warningColor).alpha(0.1).array();
         this.style = getContainerPropsValue(container, 'content.style', '1');
         this.time = Number(getContainerPropsValue(container, 'content.time', 3));
         this.textColor = getContainerPropsValue(container, 'content.textColor', this.warningColor);
         this.textAlign = getContainerPropsValue(container, 'content.textAlign', 'left');
         this.bgc = getContainerPropsValue(container, 'content.bgc', `rgba(${colorBg.join(',')})`);
-        this.borderTitleColor = color(this.bgc).lighten(.15).hex();
+        this.borderTitleColor = Color(this.bgc).lighten(.15).hex();
         this.margin = getContainerPropsValue(container, 'content.margin', {top: 0, left: 0, bottom: 0, right: 0});
         this.padding = getContainerPropsValue(container, 'content.padding', {top: 8, left: 10, bottom: 8, right: 10});
         this.scrollMargin =  getContainerPropsValue(container, 'content.scrollMargin', {});

package/src/components/JfbBaseOrderList/Mock.js

@@ -25,7 +25,7 @@ module.exports = {
         "product_thumb": "\/\/sandbox-img.jufubao.cn\/uploads\/20230506\/40018e35f8d9b3bcc2f180cfe073ce28.png",
         "sale_price": 2678
       }],
-      "buttons": [{"text": "支付", "action": "pay"}, {"text": "取消订单", "action": "cancel_unpaid"}, { "text": "申请退款", "action": "apply_refund"}]
+      "buttons": [{"text": "支付", "action": "pay"}, {"text": "取消订单", "action": "cancel_unpaid"}, { "text": "申请售后", "action": "apply_refund"}]
     },
       {
       "main_order_id": "m513033785675509760",

package/src/components/JfbBaseTfkSearch/Api.js

@@ -24,4 +24,19 @@ module.exports = [
     isConsole: true,
     disabled: true,
   },
+  {
+    //设置方法名字当别忘记加上【模块名字】：Tfk
+    mapFnName: 'getTfkSearchFilterItems',
+    title: '获取搜索筛选条件',
+    path: '/mall/v1/msearch/search-filter',
+    isRule: false,
+    data: {
+      type: ['类型', 'String', '必选'],
+      namespace: ['业务线', 'Number', '非必选'],
+      city_code: ['城市编码', 'Number', '非必选'],
+      filter_item: ['纬度', 'Number', '非必选'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
 ];

package/src/components/JfbBaseTfkSearch/CustomList.vue

@@ -177,6 +177,10 @@ export default {
     tabId:{
       type:String,
       required:true
+    },
+    refresh: {
+      type: String | Number,
+      default: '',
     }
   },
 
@@ -282,6 +286,12 @@ export default {
       this.onCusReloadList();
     },
 
+    refresh() {
+      this.handleClear();
+      this.parseTab()
+      this.onCusReloadList();
+    },
+
     stateCity(n, o){
       if(n && JSON.stringify(n) !== JSON.stringify(o)){
         this.onCusReloadList()

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>