jufubao-mall 2.0.21 → 2.0.23-beta1

package/src/components/JfbMallProductList/JfbMallProductList.vue

@@ -19,110 +19,76 @@
     </view>
     <!-- #endif -->
     <view class="jfb-mall-product-list__body" :style="[bodyStyleComp]">
-      <!--分类设置-->
-      <view v-if="!loaded" class="skeleton-cate">
-        <view class="cate_tab" v-if="showCategory === 'Y'">
-          <view class="cate_tab_item" v-for="i in 5" :key="i"></view>
-        </view>
-        <view class="sub_cate" v-if="showCategory === 'Y'">
-          <view class="sub_cate_item" v-for="i in 5" :key="i">
-            <view></view>
-            <view></view>
+      <view style="position: relative; z-index: 10">
+        <!--分类设置-->
+        <view v-if="!loaded" class="skeleton-cate">
+          <view class="cate_tab" v-if="showCategory === 'Y'">
+            <view class="cate_tab_item" v-for="i in 5" :key="i"></view>
+          </view>
+          <view class="sub_cate" v-if="showCategory === 'Y'">
+            <view class="sub_cate_item" v-for="i in 5" :key="i">
+              <view></view>
+              <view></view>
+            </view>
           </view>
         </view>
+        <template v-else>
+          <xd-cate-v1
+            v-if="loaded && categoryLayout === 'v1' && isShowCategory"
+            ref="xdCateV1"
+            :layoutInfo="layoutInfo"
+            :navList="navList"
+            :isShowCategory="isShowCategory"
+            :pid="pid"
+            :fixedTop.sync="categoryFixedHeight"
+            :cateId="cateId"
+            :showType="categoryLayout1ShowType"
+            :titleColor="titleColor"
+            :titleBgcColor="titleBgColor"
+            :box-title-border="filterTopBorder"
+            :level2BgcColor="level2BgcColor"
+            :level2Color="level2Color"
+            :mainColor="mainColor"
+            :tab-style="tabStyle"
+            :style-config="styleV2ConfigComp"
+            @onCateChange="handleCateChange"
+          ></xd-cate-v1>
+          <xd-cate-v2
+            v-if="loaded && categoryLayout === 'v2' && isShowCategory"
+            :layoutInfo="layoutInfo"
+            :navList="navList"
+            :pid="pid"
+            :cateId="cateId"
+            :tab-style="tabStyle"
+            :mainColor="mainColor"
+            :style-config="styleV2ConfigComp"
+            @onCateChange="handleCateChange"
+            @on-open="handleCateOpen"
+          >
+          </xd-cate-v2>
+        </template>
+        <!--分类设置-->
+        <!--搜索条件-->
+        <template v-if="loaded">
+          <com-filter-query
+            ref="filter-query"
+            :show-query="showQuery"
+            :layout-info="layoutInfo"
+            :top-height="cateFixedHeight"
+            :cus-menu-style="queryMenuStyleComp"
+            :cus-pop-style="filterStyle"
+            :menu-items="filterModeData"
+            :remote-list="searchFilterList"
+            :filter-fields="isFilterMenuForFilterFields"
+            :def-sort="sort"
+            :def-remote="defMenuValue"
+            @on-change="handleFitlerChange"
+          ></com-filter-query>
+        </template>
+        <!--搜索条件-->
       </view>
-      <template v-else>
-        <xd-cate-v1
-          v-if="loaded && categoryLayout === 'v1'"
-          ref="xdCateV1"
-          :layoutInfo="layoutInfo"
-          :navList="navList"
-          :isFixed="isFixed"
-          :isShowCategory="isShowCategory"
-          :pid="pid"
-          :cateId="cateId"
-          :showType="categoryLayout1ShowType"
-          :titleColor="titleColor"
-          :titleBgcColor="titleBgColor"
-          :boxTitleBorder="boxTitleBorder"
-          :level2BgcColor="level2BgcColor"
-          :level2Color="level2Color"
-          :mainColor="mainColor"
-          :tab-style="tabStyle"
-          :style-config="styleV2ConfigComp"
-          @onCateChange="handleCateChange"
-        ></xd-cate-v1>
-        <xd-cate-v2
-          v-if="loaded && categoryLayout === 'v2' && isShowCategory"
-          :layoutInfo="layoutInfo"
-          :navList="navList"
-          :pid="pid"
-          :cateId="cateId"
-          :style-config="styleV2ConfigComp"
-          @onCateChange="handleCateChange"
-        >
-        </xd-cate-v2>
-      </template>
-      <!--分类设置-->
-
-      <!--搜索条件-->
-      <view :style="[queryHeightComp]" v-if="showQuery === 'Y' && isFixed"></view>
-      <view
-        class="query_wrap"
-        v-if="showQuery === 'Y'"
-        :class="{isFixed:isFixed}"
-        :style="[queryWrapStyle]"
-      >
-        <view class="query_item" @click="switchQueryModal('sort')">
-          <text>{{sortData.label || '综合'}}</text>
-          <view><xd-font-icon icon="iconxia_down" width="50" :color="filterColor" :size="24"/></view>
-        </view>
-        <view v-if="showBrandFilter === 'out' && brandList.length" class="query_item" @click="switchQueryModal('brand')">
-          <text>品牌</text>
-          <view><xd-font-icon icon="iconxia_down" width="50" :color="filterColor" :size="24"/></view>
-        </view>
-        <view
-          class="query_item"
-          @click="switchQueryModal('filter')"
-          :style="{visibility: searchFilterList.length ? 'visible' : 'hidden'}"
-        >
-          <text>筛选</text>
-          <view><xd-font-icon icon="iconshaixuanbiaoji_mian" width="50" :color="filterColor" :size="28"/></view>
-        </view>
-        <view v-show="showQueryModal" class="query_modal">
-          <xd-query-brand
-            v-if="!filterStyleIsEmpty"
-            :filter-style="filterStyle"
-            v-show="curQueryTab === 'brand'"
-            :brand_ids="brand_ids"
-            :brandList="brandList"
-            @onConfirm="handleQueryBrand"
-          ></xd-query-brand>
-          <xd-query-sort
-            v-if="!filterStyleIsEmpty"
-            :filter-style="filterStyle"
-            :sort="sort"
-            v-show="curQueryTab === 'sort'"
-            @onConfirm="handleQuerySort"
-          ></xd-query-sort>
-          <xd-query-filter
-            :key="keyFilter"
-            v-if="!filterStyleIsEmpty"
-            :filter-style="filterStyle"
-            v-show="curQueryTab === 'filter'"
-            :pageParmas="options"
-            :brand_ids="brand_ids"
-            :delivery="delivery"
-            :list="searchFilterList"
-            :maxHeight="scrollHeight - 180"
-            @onConfirm="handleQueryFilter"></xd-query-filter>
-        </view>
-      </view>
-      <view v-show="showQueryModal" class="modal" @click="closeQueryModal" @touchmove.stop.prevent="moveHandle"></view>
-      <!--搜索条件-->
-
-      <view class="list-scroll-top"></view>
       <!--商品列表-->
+      <view class="list-scroll-top"></view>
       <view class="list-product">
         <view
           v-if="prodList === null"
@@ -171,28 +137,31 @@
           >
             <template v-if="getItemData(index,prodList).length > 0">
               <view
+                class="product-item"
                 v-for="(item,idx) in getItemData(index,prodList)"
                 :key="item.product_id"
-                :style="[contProductStyles]"
+                :style="[item.is_poster ==='Y'?posterProductStyles:contProductStyles]"
               >
                 <cus-product
                   v-if="item.is_poster ==='N'"
+                  :column-one-layout="columnOneLayout"
                   :image-radius="imageRadius"
-                  :brand-color="brandColor"
+                  :brand-color="brandStyleComp"
                   :height="contProductImageHeight"
                   :cell="column_num"
                   :name-font="itemFontStyle"
                   :product-config="productConfig"
+                  :isPlus="isGVipSite"
                   :item="item"
-                  :isPlus="is_plus_site"
                   :row-spacing="rowSpacing"
                   :cell-spacing="itemSpacing"
+                  :color="mainColor"
                   @on-product-detail="toProductInfo"
                 ></cus-product>
                 <view
                   v-else
                   class="poster"
-                  :class="{two:column_num === 2,one:column_num === 1 }"
+                  :style="[posterSizeComp]"
                 >
                   <cus-poster
                     :key="posterKey"
@@ -214,6 +183,7 @@
             </template>
           </view>
         </view>
+        <xd-no-data icon-type="product" :scale-size="2" v-if="prodList && prodList.length === 0">暂无商品</xd-no-data>
       </view>
       <!--商品列表-->
       <xd-to-top :is-preview="isPreview" :mainColor="mainColor" ref="VT" :scrollTop="0"></xd-to-top>
@@ -226,30 +196,30 @@
   import XdMore from "@/components/XdMore/XdMore";
   import XdUnit from "@/components/XdUnit/XdUnit"
   import XdButton from "@/components/XdButton/XdButton"
-  import XdQueryFilter from "./XdQueryFilter"
-  import XdQuerySort from "./XdQuerySort"
-  import XdQueryBrand from "./XdQueryBrand.vue"
+  import ComFilterQuery from "./ComFilterQuery.vue";
   import XdCateV1 from "./XdCateV1"
   import XdCateV2 from "./XdCateV2"
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbMallProductListMixin from "./JfbMallProductListMixin";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins"
-  import { getContainerPropsValue, toProductDetail } from "@/utils/xd.base";
+  import productCompMixins from "@/mixins/productCompMixins";
+  import { getContainerPropsValue, toProductDetail,gCPVal } from "@/utils/xd.base";
   import getServiceUrl from "@/common/getServiceUrl";
   import XdProductStatus from "@/components/XdProductStatus/XdProductStatus";
   import Color from "color"
   import XdToTop from './XdToTop.vue';
-  import { mapState } from "vuex"
+  import { mapState,mapActions } from "vuex"
   import SkeProduct from "@/components/SkeProduct/SkeProduct.vue";
   import CusProduct from "@/components/CusProduct/CusProduct.vue";
   import posterMixins from "@/mixins/posterMixins";
   import CusPoster from "@/components/CusPoster/CusPoster.vue";
-
+  import XdNoData from "@/components/XdNoData/XdNoData";
 
   export default {
     name: "JfbMallProductList",
     components: {
+      XdNoData,
       CusPoster,
       CusProduct,
       SkeProduct,
@@ -257,120 +227,110 @@
       XdMore,
       XdUnit,
       XdButton,
-      XdQueryFilter,
-      XdQuerySort,
-      XdQueryBrand,
       XdProductStatus,
       XdCateV1,
       XdCateV2,
       XdToTop,
+      ComFilterQuery
     },
-    mixins: [componentsMixins,extsMixins,JfbMallProductListMixin,posterMixins],
+    mixins: [componentsMixins,extsMixins,JfbMallProductListMixin,posterMixins,productCompMixins],
     data() {
       return {
-        top:0,
-        options: {},
+        options: {}, //页面参数
         closeMask: true,
         isPreview: false,
-        prodList: null,
-        navList: [],
-        keyword: "",
-        page_token: "1",
-        page_size: 20,
-        random_score_seed: parseInt(Math.random() * 10000000),
-        hasNext: false,
-        next_page_token: "",
-        loaded: false,
-        loadingList: true,
-        scrollTop: 0,
-        scrollHeight: 0,
-        isFirst: true,
-        isFixed: false,
-        mainColorAlpha: "",
+        prodList: null, //商品列表
+        navList: [], //商品分类
+        keyword: "", //搜索关键字
+        page_token: "1",//当前页码
+        page_size: 20, //每页数据条数
+        hasNext: false, //是否有下一页
+        random_score_seed: parseInt(Math.random() * 10000000),//随机种子
+        next_page_token: "", //下一页
+        loaded: false, //分类是否加载完成
+        isFirst: true, //是否首次加载
+        mainColorAlpha: "", //主色进行0.1透明处理的值
+        is_plus_site: false, //是否为vip站点
+        //loading状态
+        initStatus: false, //面板属性加载完成
+        onLoadStatus: false, //是否执行到onLoading完成
+
 
+        //基础
+        column_num: 2,
+        columnOneLayout:'H', //H=>水平 V=>垂直
+        skeNumber:10,
+        listPadding:{},
+        contentColor:'',
+        filterModeData:[],//菜单数量
+        parentId:0, //获取商品分类父级ID
+
+        //==搜索条件=============
+        filterPadding:{},
+        filterBgcColor:'',
+        filterColor: '',
+        filterStyle: {},
+        filterTopBorder:'',
+        filterTopBorderWidth: 0,
 
         //filters
-        showQueryModal: false,
-        curQueryTab: "filter",
-        brand_ids: "",
-        brand_type: "",
-        delivery: "",
-        filter_keys: "",
+        isFilterMenuForFilterFields:[],//在筛选时候需要过滤都条件
+        searchFilterList: [], //下拉菜单数据
         sort: "default",
-        searchFilterList: [],
-        searchFilterListOrg:[],
-        sortData: {},
-        filterData: null,
-        pid: "",  //分类一级
-        cateId: "", //分类二级
-        keyFilter: 'keyFilter',
+        pid: "",  //分类一级(用于是否选中一级分类操作)
+        cateId: "", //分类二级(用于是否选中二级分类操作)
+        truePid:'',//分类一级(用于是查询商品列表操作)
+        trueCateId:'',//分类二级(用于是查询商品列表操作)
+        defMenuValue:{}, //菜单选中
+        menuSelectParams:null, //null|object null未初始化 object已初始化
+        //==搜索条件=============
 
         //面板
-        showCategory: "Y",
-        showQuery:'Y',
+        orgCategory:null,
+        showCategory: "Y", //是否线上分类
+        showQuery:'Y', //是否线上搜索条件
         categoryLayout: "v1",  //分类布局
         categoryLayout1ShowType: "all", //分类布局1显示类型
         showBrandFilter: "in",  //品牌展示位置； out:外面单独展示；  in：筛选面板中展示
-        brandList: [],
+        categoryFixedHeight:0, //分类高度
 
-        //基础
-        contentColor: '',
+        //==分类========
+        //分类-基础
         allName:'全部',
         allIcon:{},
-
-        //一级分类配置
-
-        //分类名称样式设置
+        allIconSize:0,
         titleBgColor: '',
         titleColor: '',
-        titleActColor:'',
-        tabStyle:{},
-        titleBorder:{},
-        titleFontSize: 30,
-        titleActFontSize:38,
-        titleFontWeight: 'normal',
-        titleActFontWeight: 'bold',
+        tabStyle:{}, //图标样式
         level2BgcColor: '',
         level2Color: '',
 
-        //搜索条件
-        filterBgcColor:'',
-        filterColor: '',
-        filterStyle: {},
-        isShowDelivery:'Y',
+        //==分类========
 
-        //商品列表
-        column_num: 1,
-        skeNumber:10,
+        //商品内容样式
         rowSpacing:20,
         columnSpacing:20,
-        listPadding:{},
-        productConfig:{},
         itemPadding:{},
+        contShadow:'',
         itemSpacing:20,
         imageRadius:'0',
-        brandColor:'',
+        radius:'0',
         itemFontStyle:{},
-
+        itemBgcColor:'',
+        contBorder:'',
+        contStyleBorder:0,
 
         //高级
         productInfoPath: "",
         xnamespace: "",
         isCityFilter: "N",
+        version:'',
 
         //广告位置======
-        isPoster:'N',
-        posterList:null,
-        posterNum:1, //使用张数
-        mode:'round',//直接写死
-        carouselTime: 0,//轮播图轮播周期
-        posterKey:'posterKey',
-        posterIndex:'',
         isOnloaded: false,
         //广告位置======
         need_show_tags: [],
-        is_plus_site: false,
-
+        searchTimer:null, //顶部菜单输入截流
       }
     },
     computed: {
@@ -378,36 +338,6 @@
         stateCity: state => state.cityLocation.city
       }),
 
-      posterSize(){
-        let dw = 670, dh= 200;
-        if(this.column_num === 2) {
-          dw = 316;
-          dh = 540;
-        }
-        if(this.poster && this.poster.size) {
-          let {width, height} = this.poster.size
-          let size = { width: dw, height: dh }
-          if(width) size['width'] = Number(width || dw);
-          if(height) size['height'] = Number(height || dh);
-          return size;
-        }
-        return {
-          width: dw,
-          height: dh,
-        }
-      },
-
-      queryHeightComp(){
-        let str = '100rpx'
-        if(this.filterStyle && typeof this.filterStyle.filterTopBorder === 'string') {
-          let arr = this.filterStyle.filterTopBorder.split(' ');
-          if(arr.length > 0) {
-            str = `${parseInt(arr[0]) + 100}rpx`;
-          }
-        }
-        return {height: str};
-      },
-
       bodyStyleComp(){
         return {
           background: this.contentColor,
@@ -421,7 +351,8 @@
         return {
           backgroundColor: this.titleBgColor,
           titleStyleLv1: this.tabStyle,
-          titleStyleLv2: {}
+          titleStyleLv2: {},
+          version: this.version
         }
       },
 
@@ -431,38 +362,6 @@
         }
       },
 
-      filterStyleIsEmpty(){
-        return this.$xdUniHelper.isEmpty(this.filterStyle);
-      },
-
-      //骨架
-      skeletonImageHeight(){
-        return parseInt(this.skeletonStyle.width);
-      },
-
-      skeletonStyle(){
-        return this.getContentStyle('ske')
-      },
-      //骨架
-
-      contProductImageHeight(){
-        return parseInt(this.contProductStyles.width);
-      },
-
-      contProductStyles(){
-        return {
-          ...this.getContentStyle(),
-          boxShadow: this.contShadow,
-          border: this.contBorder,
-          backgroundColor: this.itemBgcColor,
-        }
-      },
-
-      boxTitleBorder() {
-        if (this.is_title_border === 'Y') return `${this.is_title_border_w}rpx solid ${this.is_title_border_c}`;
-        else return '0';
-      },
-
       getAllCategory(){
         let icon = getServiceUrl('/common/all.png','size3');
         if(this.$xdUniHelper.checkVarType(this.allIcon) === 'object'&& this.allIcon.url) {
@@ -481,28 +380,19 @@
       isShowCategory(){
         return this.showCategory === 'Y' && !!this.navList.length
       },
-
       //分类展示的固定高度
       cateFixedHeight(){
-        if(!this.isShowCategory) return 0;
-        if(this.categoryLayout === 'v2') return 100; //v2布局固定高度
-        if(this.categoryLayout === 'v1') {
-          console.log(this.filterStyle.filterTopBorder);
-          // debugger
-          //如果展示父级分类
-          if(this.$refs['xdCateV1'] && this.$refs['xdCateV1'].showParent) return 104;
-          else return 0;
-        }
+        if(this.categoryLayout ==='v1') return this.categoryFixedHeight;
+        else if(this.categoryLayout ==='v2') return 108;
+        return 0
       },
-      queryWrapStyle(){
-        let top = 0;
-        if(this.isFixed) top  = (this.layoutInfo.top + this.cateFixedHeight) + 'rpx';
-        return{
-          zIndex: this.showQueryModal ? 1002 : 1,
-          background: this.filterBgcColor,
+      queryMenuStyleComp(){
+        return {
+          backgroundColor: this.filterBgcColor,
           color: this.filterColor,
-          top,
-          borderTop: this.filterStyle.filterTopBorder
+          borderTopWidth: this.filterTopBorderWidth,
+          padding: this.getMarginAndPadding(this.filterPadding, 0),
+          paddingTb: Number(this.getPMValue(this.filterPadding, 'TB',0))
         }
       },
     },
@@ -510,306 +400,576 @@
       container(value,oldValue) {
         if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
         if (this.$configProject['isPreview']){
-          this.getList()
-          this.init(value)
+          this.init(value);
+          this.clearProductData()
+          this.handleInit()
         }
       },
       stateCity(n, o) {
         if(n && JSON.stringify(n) !== JSON.stringify(o)){
-          console.warn('stateCity');
-          this.getList();
-          this.isFixed  = false;
+          this.clearProductData()
+          this.handleInit()
         }
       },
-      isShowDelivery(value){
-        this.searchFilterList = this.$xdUniHelper.cloneDeep(this.searchFilterListOrg).filter(item=>{
-          if(item.title==='配送方式') {
-            return value === 'Y'
-          }
-          else return true
-        });
-        this.keyFilter = Date.now()
-      },
-      categoryLayout(){
-        if(this.isPreview) this.isFixed = false;
-      },
 
       allIcon(){
         this.handleAllChange()
       },
+
       allName(){
         this.handleAllChange()
       },
 
-      //==poster=========
-      isPoster(n, o){
+      showCategory(val){
         if(this.$configProject.isPreview) {
-          if(this.isOnloaded === false) return;
-          this.prodList = null;
-          this.page_token = '1';
-          this.getList();
+          if(val === 'Y') this.getCategoryList();
+          else this.navList = [];
         }
       },
-      posterIndex(){
+
+      parentId(){
         if(this.$configProject.isPreview) {
-          if(this.isOnloaded === false) return;
-          this.prodList = null;
-          this.page_token = '1';
-          this.getList();
+          this.getCategoryList();
         }
       },
-      column_num(){
-        if(this.$configProject.isPreview) {
-          if(this.isOnloaded === false) return;
-          if(this.isPoster === 'Y' && this.column_num < 3 ){
-            this.$xdConfirm({
-              title: '温馨提示',
-              content: '已设置显示广告内容并切换商品显示列数时，别忘记切换对应的广告位置哦！',
-              cancel:false,
-              confirmText: '我知道了',
-              width: '85%',
-              isTitle: true,
-              success: (res) => {
-              }
-            });
-          }
 
-          this.prodList = null;
-          this.page_token = '1';
-          this.posterList = null;
+      need_show_tags(value,oldValue) {
+        if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']){
           this.getList();
-          this.getPosterList()
         }
       },
-      carouselTime(){
-        if(this.isPreview) {
-          this.posterKey = Date.now()
-        }
-      },
-      mode(){
-        if(this.isPreview) {
-          this.posterKey = Date.now()
-        }
+
+      //记载完成
+      initStatus(){
+        if(this.initStatus && this.onLoadStatus) this.handleInit();
       },
-      posterNum(){
-        this.onJfbUpdate()
+      onLoadStatus(){
+        if(this.initStatus && this.onLoadStatus) this.handleInit();
       },
-      //==poster=========
-      need_show_tags(value,oldValue) {
-        if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
-        if (this.$configProject['isPreview']){
-          this.getList();
+
+      filterModeData(){
+        if(this.$configProject.isPreview) {
+          this.$refs['filter-query'].hideSelectMenu();//隐藏菜单
         }
-      }
+      },
+
     },
     created() {
       this.isPreview = this.$configProject.isPreview;
-      const { footerHeight, topHeight } = this.layoutInfo;
-      const { safeAreaInsets, windowHeight } = uni.getSystemInfoSync();
-      this.scrollHeight = windowHeight - safeAreaInsets.top - safeAreaInsets.bottom - (footerHeight + topHeight) * this.$rpxNum;
       this.mainColorAlpha = Color(this.mainColor).alpha(0.1).toString();
-      this.is_plus_site = this.projectAttr.headers['X-Site-Group']==="vip";
+      this.is_plus_site = this.isGVipSite
       this.init(this.container);
     },
     methods: {
+
+      onJfbLoad(options) {
+        //设置业务请求代码
+        this.setNameSpace(options);
+        this.options = options;
+        let defMenuValue = {};
+        if( options.keyword) this.keyword = options.keyword;
+        if( options.pid) this.pid = Number(options.pid);
+        if( options.cateId || options.cateid) this.cateId =  Number(options.cateId||options.cateid);
+        if( options.brand_id) {
+          defMenuValue['brand'] = options.brand_id.split(',');
+          this.brand_ids = options.brand_id;
+        }
+        if( options.delivery) {
+          defMenuValue['delivery_method'] = options.delivery.split(',');
+          this.delivery = options.delivery;
+        }
+        if( options.brand_type) this.brand_type = options.brand_type;
+
+        //预览模式设置默认值
+        if(this.isPreview) {
+          this.brand_ids = '100451';
+          this.delivery = 'logistics';
+        }
+        this.defMenuValue = defMenuValue;
+        this.onLoadStatus = true;
+      },
+
+      getProductListParams(){
+        let data = {
+          xnamespace: this.xnamespace,
+          random_score_seed: this.random_score_seed,
+          page_token: this.page_token,
+          page_size: this.page_size,
+          need_show_tags: this.need_show_tags.join(),
+        }
+
+        if(this.keyword) data['keyword'] = this.keyword;
+        if(this.isCityFilter === "Y") {
+          if(this.stateCity.city_code) data['city_code'] = this.stateCity.city_code
+        }
+
+        //第一次初始化
+        if(this.menuSelectParams === null){
+          if(this.brand_ids) data['brand_ids'] = this.brand_ids;
+          if(this.sort)  data['sort'] = this.sort;
+          if(this.delivery)  data['delivery_method'] = this.delivery;
+        }
+        else {
+          data = {...data, ...this.menuSelectParams};
+        }
+
+        //设置分类
+        if(this.trueCateId  || this.truePid) {
+          data['custom_category_id'] = this.trueCateId || this.truePid;
+        }
+
+        //自定义父分类的时候，选择全部使用parentId的全部
+        if(Number(this.parentId) > 0) {
+          if(!data['custom_category_id']) data['custom_category_id'] = Number(this.parentId);
+        }
+
+        //设置是否展示划线价格
+        if(this.productConfig.isShowDiscount==='Y') data.is_show_uprice = this.$xdUniHelper.multiplyFloatNumber(this.productConfig.differ,100)
+        else data.is_show_uprice = -1
+
+        //设置产品类型
+        if(this.brand_type === 'code') {
+          data['product_types'] = 'card';
+        }
+        //console.log('getProductListParams',JSON.stringify(data));
+        return data
+      },
+      getFilterListParams(){
+        let data = {
+          xnamespace: this.xnamespace,
+          is_need_delivery_method: 'Y'
+        }
+
+        if(this.brand_ids) data['brand_ids']  = this.brand_ids
+        if(this.keyword) data['keyword']  = this.keyword;
+        if(this.isCityFilter === "Y") {
+          if(this.stateCity.city_code) data['city_code'] = this.stateCity.city_code
+        }
+        if(this.brand_type === 'code') data['product_types'] = 'card';
+        if(this.trueCateId  || this.truePid) data['custom_category_id'] = this.trueCateId  || this.truePid;
+
+        //自定义父分类的时候，选择全部使用parentId的全部
+        if(Number(this.parentId) > 0) {
+          if(!data['custom_category_id']) data['custom_category_id'] = Number(this.parentId);
+        }
+
+        return data;
+      },
+
+      async handleInit(){
+        //获取分类数据
+        await this.getCategoryList();
+
+        //广告数据加载
+        await this.getPosterList();
+
+        this.getList();
+        this.getSearchFilterList();
+      },
+
+
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
        */
       init(container) {
-        debugger
-        this.column_num =  getContainerPropsValue(container, "content.row_num", 1);
-        if( this.column_num === 1) {
+        //基础
+        this.sort = gCPVal(container, "sort", "default");
+        this.version = gCPVal(container, 'version', '');
+        let categoryParentType = gCPVal(container, 'categoryParentType', 'root');
+        if(categoryParentType === 'root') this.parentId = 0;
+        else {
+          let categoryParent = gCPVal(container, 'categoryParent', '');
+          if(!categoryParent)  this.parentId = 0;
+          else this.parentId = categoryParent;
+        }
+        this.xnamespace = gCPVal(container, 'xnamespace', this.projectAttr.business_code||this.xnamespace);
+        this.listPadding = gCPVal(container,'listPadding', [{top:16, left:16, right:16,bottom:16},20], {sKey:'listPaddingStatus',fields:['listPadding'],isPMR: true});
+        this.contentColor = gCPVal(container,'contentColor', ['#f8f8f8','#fafafa'], {sKey:'contentColorStatus',fields:['contentColor']});
+        let column_num = gCPVal(container, 'row_num', 2);
+        this.column_num = column_num;
+        //一列垂直
+        if(column_num === 4) {
+          this.column_num = 1;
+          this.columnOneLayout = 'V';
           this.skeNumber = 10;
           this.page_size = 20;
         }
-        if( this.column_num === 2){
+        //一列水平
+        if( column_num === 1) {
+          this.skeNumber = 10;
+          this.page_size = 20;
+          this.columnOneLayout = 'H';
+        }
+        if( column_num === 2) {
           this.skeNumber = 5;
           this.page_size = 20;
         }
-        if( this.column_num === 3) {
+        if(column_num === 3) {
           this.skeNumber = 6;
           this.page_size = 21;
         }
 
-        //广告位置
-        this.isPoster = getContainerPropsValue(container, 'content.isPoster', 'N');
-        this.poster = getContainerPropsValue(container, 'content.poster', {});
-        this.posterNum = getContainerPropsValue(container, 'content.posterNum', 1);
-        this.carouselTime = Number(getContainerPropsValue(container, 'content.carouselTime', 5)) * 1000;
-        this.mode = getContainerPropsValue(container, 'content.dot_type','round');
-        this.posterIndex = getContainerPropsValue(container, 'content.posterIndex','');
-        if(this.column_num === 2 &&  this.isPoster  === 'Y') {
-          this.page_size = 19;
-        }
-
-        this.showCategory = getContainerPropsValue(container, 'content.showCategory', "Y");
-        this.showQuery = getContainerPropsValue(container, "content.showQuery", 'Y');
-        this.sort = getContainerPropsValue(container, "content.sort", "default");
-        this.categoryLayout = getContainerPropsValue(container, "content.categoryLayout", "v1");
-        this.categoryLayout1ShowType = getContainerPropsValue(container, "content.categoryLayout1ShowType", "all");
-        this.showBrandFilter = getContainerPropsValue(container, "content.showBrandFilter", "in");
 
-        //基础
-        this.contentColor = getContainerPropsValue(container, 'content.contentColor', '#fafafa');
-        this.allName = getContainerPropsValue(container, 'content.allName', "全部");
-        this.allIcon = getContainerPropsValue(container, "content.allIcon", {});
-
-        //标题
-        this.titleBgColor = getContainerPropsValue(container, 'content.titleBgColor', '#fff');
-        this.titleColor = getContainerPropsValue(container, 'content.titleColor', '#333');
-        let titleBorder = this.getXdBorder({width:2,color:'rgba(0,0,0,0)'},getContainerPropsValue(container, 'content.subTitleBorder', {}));
-        let titleStyle = getContainerPropsValue(container, "content.titleStyle", {});
-        let titleColor = titleStyle.color || this.titleColor || '#333';
-        let titleActColor = titleStyle.actColor || this.mainColor;
-        let titleFontSize = titleStyle.fontSize ? parseInt(titleStyle.fontSize) : 30;
-        let titleActFontSize = titleStyle.actFontSize ? parseInt(titleStyle.actFontSize) : 38;
-        let titleFontWeight = titleStyle.fontWeight || 'normal';
-        let titleActFontWeight = titleStyle.actFontWeight|| 'bold';
-        let subTitleRadius = getContainerPropsValue(container, 'content.subTitleRadius', '50%');
-        let subTitleIconBorder = this.getXdBorder({width:2,color:'#ccc'},getContainerPropsValue(container, 'content.subTitleIconBorder', {}));
-        let subTitleIconShadow = this.getXdShadow({width:20, color:'rgba(0,0,0,0)'},getContainerPropsValue(container, 'content.subTitleIconShadow', {}))
-        //v1
-        this.tabStyle = {subTitleIconShadow,titleColor,titleActColor,titleFontSize,
-          titleActFontSize,titleFontWeight,titleActFontWeight,titleBorder,subTitleRadius,subTitleIconBorder,
-          allNameKey: Date.now()
+        //广告位置
+        this.isPoster = gCPVal(container, 'isPoster', 'N');
+        this.poster = gCPVal(container, 'poster', {});
+        this.posterNum = gCPVal(container, 'posterNum', 1);
+        this.carouselTime = Number(gCPVal(container, 'carouselTime', 5)) * 1000;
+        this.mode = gCPVal(container, 'dot_type','round');
+        this.posterIndex = gCPVal(container, 'posterIndex','');
+
+
+        //==过滤区域============
+        let categoryLayout = gCPVal(container, "categoryLayout", "v1");
+        let categoryLayout1ShowType = gCPVal(container, "categoryLayout1ShowType", "all");
+        let showCategory = gCPVal(container, 'showCategory', "Y");
+        //数据兼容处理
+        if(categoryLayout && categoryLayout === 'v1') {
+          if(categoryLayout1ShowType === 'child') categoryLayout = 'v3'
         }
-
-        //内容
-        this.columnSpacing = getContainerPropsValue(container, 'content.columnSpacing', 20)
-        this.rowSpacing = getContainerPropsValue(container, 'content.rowSpacing', 20);
-        this.listPadding = getContainerPropsValue(container, 'content.listPadding', {});
-        this.itemPadding = getContainerPropsValue(container, 'content.itemPadding', {})
-        this.itemSpacing = getContainerPropsValue(container, 'content.itemSpacing', 20);
-        this.brandColor = getContainerPropsValue(container, 'content.brandColor', '')
-        this.itemBgcColor = getContainerPropsValue(container, 'content.itemBgcColor', '#fff');
-        this.radius = getContainerPropsValue(container, 'content.radius', 0);
-        this.imageRadius = getContainerPropsValue(container, 'content.imageRadius', '10')
-        let is_border = getContainerPropsValue(container, 'content.is_border', 'N');
-        let is_border_c = getContainerPropsValue(container, 'content.is_border_c', '#fff');
-        let is_border_w = getContainerPropsValue(container, 'content.is_border_w', '2');
-        this.contBorder = this.getBorderCompatibleOldStyle(getContainerPropsValue(container,'content.contBorder',{}), {
-          type: is_border,
-          width: is_border_w,
-          color: is_border_c
-        })
-        let is_shadow = getContainerPropsValue(container, 'content.is_shadow', 'N');
-        let is_shadow_bg = getContainerPropsValue(container, 'content.is_shadow_bg', '#fff');
-        let is_shadow_w = getContainerPropsValue(container, 'content.is_shadow_w', '10');
-        this.contShadow = this.getShadowCompatibleOldStyle(getContainerPropsValue(container,'content.contShadow',{}),{
-          type: is_shadow,
-          width: is_shadow_w,
-          color: is_shadow_bg
-        })
-        this.itemFontStyle = this.getFontAndBgcStyle(
-          getContainerPropsValue(container, 'content.contStyle', {}),
-          {
-            fontSize:'28rpx',
-            color: '#333',
-            fontWeight: 'normal',
+        if(showCategory === 'N') categoryLayout = 'none';
+        let category =  gCPVal(container, 'category',categoryLayout);
+
+        //是否显示过滤菜单
+        let showQuery = gCPVal(container, "showQuery", 'Y');
+
+        //是否筛选菜单里面过滤配送方式
+        let isShowDelivery = gCPVal(container, "isShowDelivery", 'Y');
+        if(isShowDelivery === 'Y') this.isFilterMenuForFilterFields = ['delivery_method','配送方式']
+        else this.isFilterMenuForFilterFields = [];
+        //是否显示品牌菜单
+        let showBrandFilter = gCPVal(container, "showBrandFilter", "in");
+        //菜单设置
+        let filterMode = [];
+        if(showQuery === 'Y') {
+          let filterModeArr = gCPVal(container, "filterMode", '');
+
+          //未设置菜单设置默认菜单
+          if(typeof filterModeArr === "string" && filterModeArr === '') {
+            filterMode.push('common');
+            if(showBrandFilter === 'out') filterMode.push('brand');
+            filterMode.push('filter');
           }
-        );
-
-        //商品设置
-        this.productConfig = this.getProductConfig(container);
-
-
-        //搜索条件
-        this.filterBgcColor = getContainerPropsValue(container, 'content.filterBgcColor', '#fff');
-        this.filterColor = getContainerPropsValue(container, 'content.filterColor', '#999');
-        this.isShowDelivery = getContainerPropsValue(container, 'content.isShowDelivery','Y')
-        let filterPadding = getContainerPropsValue(container, 'content.filterPadding', {});
-        let filterRowSpacing = Number(getContainerPropsValue(container, 'content.filterRowSpacing', 20));
-        let filterListColor = getContainerPropsValue(container, 'content.filterListColor', '#f9f9f9');
-        let filterFontStyle = getContainerPropsValue(container,'content.filterFontStyle', {});
+          //已经设置
+          else filterMode = this.$xdUniHelper.cloneDeep(filterModeArr);
+
+          //设置条件
+          if(filterMode.length <= 4 && filterMode.length >=2) {
+            filterMode = filterMode.map(item=>{
+              if(['common','price','hot'].includes(item)) return item
+              else {
+                if(item === 'brand') return {value: item, label: '品牌'};
+                if(item === 'delivery_method') return {value: item, label: '配送方式'};
+                if(item === 'filter') return {value: item, label: '筛选'};
+              }
+            })
+          }
+          else {
+            filterMode = []
+          }
+        }
+        this.showQuery = showQuery;
+        this.filterModeData = this.$xdUniHelper.cloneDeep(filterMode)
+
+
+        //横向菜单样式区域
+        this.filterPadding = gCPVal(container,'filterPadding', [16], {sKey:'filterPaddingStatus',fields:['filterPadding'],isPMR: true});
+        let defFilterBgcColor = '#fff';
+        if( category ==='v4') defFilterBgcColor = this.pageAttr.background;
+        this.filterBgcColor = gCPVal(container, 'filterBgcColor', [defFilterBgcColor,'#fff'], {sKey: 'filterBgcColorStatus',fields:['filterBgcColor']});
+        this.filterColor = gCPVal(container, 'filterColor', ['#333'], {sKey: 'filterColorStatus',fields:['filterColor']});
+        this.filterTopBorder = gCPVal(container, 'filterTopBorder', [{ color: '#f8f8f8', width: '2', style: 'solid'},{ color: '#f8f8f8', width: '0', style: 'solid'}], {isBorder:true});
+        this.filterTopBorderWidth = gCPVal(container, 'filterTopBorder', [{ color: '#f8f8f8', width: '2', style: 'solid'},{ color: '#f8f8f8', width: '0', style: 'solid'}], {isBorder:true, isBsWidth: true});
+
+        //下拉菜单样式
+        let filterListPadding = gCPVal(container, 'filterListPadding', [{top: 32, bottom: 32, left: 48, right: 48},20], {sKey: 'filterListPaddingStatus',fields:['filterListPadding'],isPMR: true});
+        let filterRowSpacing  = gCPVal(container, 'filterRowSpacing', [16,20], {sKey: 'filterRowSpacingStatus',fields:['filterRowSpacing']});
+        let filterListColor  = gCPVal(container, 'filterListColor', ['#fff','#f8f8f8'], {sKey: 'filterListColorStatus',fields:['filterListColor']});
+        let filterListRadius  = gCPVal(container, 'filterListRadius', ['4','60'], {sKey: 'filterListRadiusStatus',fields:['filterListRadius']})||0;
+        let filterFontStyle = gCPVal(container,'filterFontStyle', {
+          color: '#666',
+          fontSize:'24rpx',
+          actFontSize:'24rpx',
+          actColor: this.mainColor,
+        }, {sKey: 'filterFontStyleStatus',fields:['filterFontStyle']});
         let filterTopBorder = this.getXdBorder({width:2,color:'#F8F8F8',type:'D'},
           getContainerPropsValue(container, 'content.filterTopBorder', {})
         );
         this.filterStyle = {
-          filterPadding:this.getMarginAndPadding(filterPadding,20),
+          filterPadding: this.getMarginAndPadding(filterListPadding, 0),
+          filterPaddingRL:this.getPMValue(filterListPadding, 'RL', 0),
           filterRowSpacing,
           filterListColor,
+          filterListRadius,
           filterFontStyle:this.getFontAndBgcStyle(filterFontStyle,{
-            fontSize: '26px',
-            color: '#333',
-            fontWeight: 'normal',
-            bgColor: 'rgba(0,0,0,0)'
+            fontSize: '24rpx',
+            color: '#666',
           }),
           filterActFontStyle:this.getFontAndBgcStyle(filterFontStyle,{
-            fontSize: '26px',
+            fontSize: '24rpx',
             color: this.mainColor,
-            fontWeight: 'normal',
-            bgColor: 'rgba(0,0,0,0)'
           },'act'),
           filterTopBorder
         }
+        //==过滤区域============
+
+        //==分类区域============
+
+        //分类-基础
+        this.allName = gCPVal(container, 'allName', "全部");
+        this.allIcon = gCPVal(container, "allIcon", {});
+        this.allIconSize = 128 - Number(gCPVal(container, "iconWdith", 128));
+
+        //兼容数据
+
+
+
+        // //兼容分类操作
+        // let  category = 'v1';
+        // //老数据已设置
+        // if(data['categoryLayout']) {
+        //   category = data['categoryLayout'];
+        //   //设置v1项
+        //   if(data['categoryLayout'] === 'v1') {
+        //     if(data['categoryLayout1ShowType'] === 'child') {
+        //       category = 'v3';
+        //     }
+        //   }
+        // }
+        // //分类已设置隐藏（设置隐藏项）
+        // if(data['showCategory'] === 'N') {
+        //   category = 'none';
+        // }
+        // //新数据已设置值
+        // if(data['category'] !== undefined) {
+        //   category = data['category'] ;
+        // }
+
+        //分类 - 功能设置
+        if(category) {
+          if(category === 'none'){
+            showCategory = 'N';
+            categoryLayout = 'none';
+            categoryLayout1ShowType = 'none';
+          }
+          else if(category === 'v5'){
+            categoryLayout = 'v1';
+            categoryLayout1ShowType = 'parent';
+            showCategory = 'Y';
+          }
+          else if(category === 'v4'){
+            categoryLayout = 'v1';
+            categoryLayout1ShowType = 'parentNew';
+            showCategory = 'Y';
+          }
+          else if(category === 'v3') {
+            categoryLayout = 'v1';
+            categoryLayout1ShowType = 'child';
+            showCategory = 'Y';
+          }
+          else if(category === 'v2') {
+            categoryLayout = 'v2';
+            showCategory = 'Y';
+            categoryLayout1ShowType = 'v2';
+          }
+          else if(category === 'v1') {
+            categoryLayout = 'v1';
+            categoryLayout1ShowType = 'all';
+            showCategory = 'Y';
+          }
+        }
+        this.orgCategory = category;
+        this.showCategory = showCategory;
+        this.categoryLayout = categoryLayout;
+        this.categoryLayout1ShowType = categoryLayout1ShowType;
+        let defNewTitleStyle = {
+          color: '#333',
+          actColor: this.mainColor,
+          fontSize: '32',
+          actFontSize: '32',
+          fontWeight:'400',
+          actFontWeight: '500',
+          bgColor: '#f8f8f8',
+          actBgColor:  Color(this.mainColor).alpha(0.15).toString()
+        }
+        let defTitleStyle = {
+          color: gCPVal(container, 'titleColor', '',{}) || '#333',
+          actColor: this.mainColor,
+          fontSize: '30',
+          actFontSize: '30',
+          fontWeight:'normal',
+          actFontWeight: 'normal',
+          bgColor: '#f8f8f8',
+          actBgColor:  Color(this.mainColor).alpha(0.15).toString()
+        }
+
+        if(this.categoryLayout === 'v2') {
+          defTitleStyle['fontSize'] = '36';
+          defTitleStyle['actFontSize'] = '36';
+        }
+
 
+        //分类-文字标题
+        this.titleBgColor = gCPVal(container, 'titleBgColor', '#fff',{sKey:'titleBgColorStatus', fields:['titleBgColor']});
+        const titleStyle = gCPVal(container, 'titleStyle', [defNewTitleStyle, defTitleStyle],{sKey:'titleStyleStatus', fields:['titleStyle','titleColor'],isMerge: true});
+        const titleColor = titleStyle.color;
+        const titleActColor = titleStyle.actColor;
+        const titleFontSize = titleStyle.fontSize;
+        const titleActFontSize = titleStyle.actFontSize;
+        const titleFontWeight = titleStyle.fontWeight;
+        const titleActFontWeight = titleStyle.actFontWeight;
+        const titleBgColor =  titleStyle.bgColor;
+        const titleActBgColor =  titleStyle.actBgColor;
 
         //二级导航文字颜色
-        this.level2BgcColor = getContainerPropsValue(container, 'content.level2BgcColor', '#fafafa');
-        this.level2Color = getContainerPropsValue(container, 'content.level2Color', '#333');
-        this.showActivityPrice = getContainerPropsValue(container, 'content.showActivityPrice', 'N');
+        this.level2BgcColor = gCPVal(container, 'level2BgcColor', ['#fff','#f8f8f8'],{sKey:'level2BgcColorStatus', fields:['level2BgcColor']});
 
-        //高级属性
-        this.productInfoPath = getContainerPropsValue(container, 'content.productInfoPath', {value: ""}).value;
-        this.xnamespace = getContainerPropsValue(container, "content.xnamespace", this.projectAttr.business_code);
-        this.isCityFilter = getContainerPropsValue(container, "content.isCityFilter", "N");
-        let compConfig = getContainerPropsValue(container, "content.compConfig", null);
-        let tagsKeys= this.getProductTagsKeys(compConfig,container)
-        this.need_show_tags = this.getProductTagsParams(compConfig,tagsKeys)
-        if(this.isPreview){
-          this.getSearchFilterList();
+        let color = gCPVal(container, 'level2Color', '') || '#333',
+          actColor= this.mainColor , bgColor='',bgActColor='';
+        if(categoryLayout1ShowType === 'parentNew') {
+          actColor = '#fff';
+          bgActColor = this.mainColor;
         }
-      },
 
-      getPosterList(){
-        jfbRootExec('getMallProductListPoster', {
-          vm: this,
-          data: {
-            page_id: this.pageAttr['page_id'], //页面ID
-            container_id: this.containerId, //组件ID
-            page_size: this.posterNum //可以不传
-          },
-        })
-          .then(res => {
-            let posterList = res.list.map((item,index) => {
-              return {
-                ...item,
-                image_background_url: item.image_background_url?getServiceUrl(item.image_background_url):'',
-                image_url: item.image_url?getServiceUrl(item.image_url):''
-              }
-            });
-            this.posterList = this.posterFilterNoUseData(posterList);
-          })
-          .catch(err=>{
-            console.error(err);
-          })
-      },
+        let defOldLvel2Name = {
+          fontSize: '24',
+          actFontSize: '24',
+          color: color,
+          actColor:actColor,
+          bgColor:bgColor,
+          actBgColor:bgActColor,
+          fontWeight: 'normal',
+          actFontWeight: 'normal',
+        }
+        let defNewLvel2Name = {
+          fontSize: '24',
+          actFontSize: '24',
+          color: '#333',
+          actColor: actColor,
+          bgColor:bgColor,
+          actBgColor:bgActColor,
+          fontWeight: 'normal',
+          actFontWeight: 'normal',
+        }
+        const level2Name = gCPVal(container, 'level2Name', [defNewLvel2Name,defOldLvel2Name],{sKey:'level2NameStatus', fields:['level2Name','level2Color'],isMerge: true});
+        const subTitleRadius = gCPVal(container, 'subTitleRadius', ['40rpx'],{sKey:'subTitleRadiusStatus', fields:['subTitleRadius']})||0;
+        const subTitleIconShadow  = gCPVal(container, 'subTitleIconShadow', [this.gStyleValue.shadow,'none'], {isShadow:true});
+        const subTitleIconBorder  = gCPVal(container, 'subTitleIconBorder', [{style:'solid', width: '2', color: this.mainColor},'0'], {isBorder:true});
+        let navStyle = gCPVal(container, 'navStyle', 'line-6-8-s');
+        if(navStyle.indexOf('line-') === 0) navStyle = 'line-6-8-s';
+        const iconWdith = gCPVal(container, 'iconWdith', [96],{sKey:'iconWdithStatus', fields:['iconWdith']});
+        const iconImageSp = gCPVal(container, 'iconImageSp', [16],{sKey:'iconImageSpStatus', fields:['iconImageSp']});
+        const iconBgColor = gCPVal(container, 'iconBgColor', [100],{sKey:'iconBgColorStatus', fields:['iconBgColor']});
+
+        this.tabStyle = {
+          titleColor,
+          titleActColor,
+          titleFontSize,
+          titleActFontSize,
+          subTitleRadius,
+          titleFontWeight,
+          titleActFontWeight,
+          subTitleIconShadow,
+          subTitleIconBorder,
+          iconWdith,
+          iconImageSp,
+          iconBgColor,
+          titleBgColor,
+          titleActBgColor,
+          level2Name,
+          filterBgcColor: this.filterBgcColor,
+          allNameKey: Date.now(),
+          navStyle,
+          level2BgcColor: this.level2BgcColor
+        }
+        //==分类区域============
+
+        //==商品区域============
+        //商品样式内容
+        this.rowSpacing = Number(gCPVal(container,'rowSpacing', [16,20], {sKey:'columnRowStatus',fields:['rowSpacing','columnSpacing']}));
+        this.columnSpacing = Number(gCPVal(container,'columnSpacing', [16,20], {sKey:'columnRowStatus',fields:['rowSpacing','columnSpacing']}));
+        let radius = gCPVal(container,'radius', '');
+        let imageRadius = gCPVal(container,'imageRadius', '');
+        let radiusNew = gCPVal(container,'radiusNew', [this.gStyleValue.radius,'-123456'], {sKey:'radiusStatus',isEmpty:true,fields:['radius','radiusNew']});
+        let imageRadiusNew = gCPVal(container,'imageRadiusNew', [this.gStyleValue.radius/2,'-123456'], {sKey:'imageRadiusStatus',isEmpty:true,fields:['imageRadius','imageRadiusNew']});
+        if(['','-123456'].includes(radiusNew)) radiusNew = radius;
+        if(['','-123456'].includes(imageRadiusNew)) imageRadiusNew = imageRadius;
+        if(radiusNew === null) radiusNew = '0';
+        if(imageRadiusNew === null) imageRadiusNew = '0';
+        this.radius = radiusNew;
+        this.imageRadius = imageRadiusNew;
+
+
+        this.itemPadding = gCPVal(container,'itemPadding', [16,20], {sKey:'itemPaddingStatus',fields:['itemPadding'],isPMR: true});
+        this.contShadow = gCPVal(container, 'contShadow', [this.gStyleValue.shadow,'none'], {isShadow:true, bsOld:['is_shadow','is_shadow_w','is_shadow_bg']});
+        this.itemSpacing = gCPVal(container,'itemSpacing', [16,20], {sKey:'contStyleStatus',fields:['itemSpacing','contStyle']});
+        this.itemFontStyle = this.getFontAndBgcStyle(
+          gCPVal(container,'contStyle', {}, {sKey:'contStyleStatus',fields:['itemSpacing','contStyle']}),
+          {fontSize: '28rpx', color: '#000', fontWeight: 'normal'},
+        )
+
+        //商品样式关联属性
+        const sValue = "{\"border\":0,\"backgroundColor\":\"#fff\"}";
+        let itemBgcColoStyle = this.getRelationStatus(container,'productStyle',{ itemBgcColorStatus:['itemBgcColor'],bgBorder:['contBorder', 'bs']},sValue);
+        this.itemBgcColor = gCPVal(container, 'itemBgcColor', ['#fff'], {sKey: 'itemBgcColorStatus', cusFields: ['productStyle','backgroundColor',itemBgcColoStyle]});
+        this.contBorder = gCPVal(container, 'contBorder', [{color: '#eee',width: '0',style: 'solid'},{color: 'rgba(0,0,0,0)',width: '0',style: 'solid'}], {isBorder: true, bsOld:['is_border','is_border_w','is_border_c'], cusFields: ['productStyle','border',itemBgcColoStyle]});
+        this.contStyleBorder = gCPVal(container, 'contBorder', [{color: '#eee',width: '0',style: 'solid'},{color: 'rgba(0,0,0,0)',width: '0',style: 'solid'}], {isBorder: true, isBsWidth: true, bsOld:['is_border','is_border_w','is_border_c'], cusFields: ['productStyle','border',itemBgcColoStyle]});
+
+        //品牌样式
+        this.brandColor = gCPVal(container,'brandColor', '#999', {sKey:'brandStatus',fields:['brandColor','brandBgColor','brandBorColor']});
+        this.brandBgColor = gCPVal(container,'brandBgColor', '', {sKey:'brandStatus',fields:['brandColor','brandBgColor','brandBorColor']});
+        this.brandBorColor = gCPVal(container,'brandBorColor', '', {sKey:'brandStatus',fields:['brandColor','brandBgColor','brandBorColor']});
 
-      onJfbLoad(options) {
-        //设置业务请求代码
-        this.setNameSpace(options);
+        //商品设置
+        this.productConfig = this.getProductConfig(container,{cartStyle:'icongouwuche-01'});
+        let compConfig = gCPVal(container, "compConfig", null);
+        let tagsKeys= this.getProductTagsKeys(compConfig,container)
+        this.need_show_tags = this.getProductTagsParams(compConfig,tagsKeys);
 
-        this.options = options;
-        this.keyword = options.keyword;
-        this.pid = options.pid;
-        this.cateId = options.cateId;
-        this.brand_ids = options.brand_id;
-        this.delivery = options.delivery;
-        this.brand_type = options.brand_type;
-        this.getList();
-        this.getPosterList();
-        this.isOnloaded = true;
-        this.getSearchFilterList();
+        //==商品区域============
 
-        if(this.showCategory==="Y"){
-          this.getCategoryList();
-        }else{
-          this.loaded = true;
-        }
+        //高级属性
+        this.productInfoPath = gCPVal(container, 'content.productInfoPath', {value: ""}).value;
+        this.isCityFilter = gCPVal(container, "content.isCityFilter", "N");
+
+        //记载完成
+        this.initStatus = true;
+      },
 
+      //=====广告数据，商品列表， 分类数据，过滤条件===========
+      //广告列表
+      getPosterList(){
+        return new Promise((resolve,reject)=>{
+          jfbRootExec('getMallProductListPoster', {
+            vm: this,
+            data: {
+              page_id: this.pageAttr['page_id'], //页面ID
+              container_id: this.containerId, //组件ID
+              page_size: this.posterNum //可以不传
+            },
+          })
+            .then(res => {
+              let posterList = res.list.map((item,index) => {
+                return {
+                  ...item,
+                  image_background_url: item.image_background_url?getServiceUrl(item.image_background_url):'',
+                  image_url: item.image_url?getServiceUrl(item.image_url):''
+                }
+              });
+              this.posterList = this.posterFilterNoUseData(posterList);
+              resolve()
+            })
+            .catch(err=>{
+              this.posterList = [];
+              console.error(err);
+              resolve();
+            })
+        })
       },
 
+      //分列处理（1，2，3列）
       getItemData(cellIndex,data){
         let list = this.$xdUniHelper.cloneDeep(data);
         return list.filter((it,index) => {
@@ -817,111 +977,31 @@
         })
       },
 
-
-      getContentStyle(type='cont'){
-        //总宽度
-        let outerWidht = uni.getSystemInfoSync().safeArea.width * this.$pxNum;
-
-        //外边距
-        let outMargin = 0
-
-        //列表填充
-        let outPadding = this.getPMValue(this.listPadding, 'RL', 20)
-
-        //间距设置
-        if(this.$xdUniHelper.checkVarType(this.columnSpacing) === 'string') this.columnSpacing = Number(this.columnSpacing);
-        let columnSpacing = Math.floor((this.columnSpacing * (this.column_num-1))); //公式:列数量 * 边距 + 边距
-
-        //item内容填充
-        let paddinRL = this.getPMValue(this.itemPadding, 'RL', 20) * this.column_num;
-
-        //边框
-        let borderRL = 0;
-        if(typeof this.contBorder === 'string') {
-          let borderArr = this.contBorder.split(' ');
-          if(borderArr.length === 3) {
-            borderRL = parseInt(borderArr[0]);
-          }
-        }
-        if(type === 'ske') borderRL = 0;
-        borderRL = borderRL * this.column_num;
-
-        let str = this.getMarginAndPadding(this.itemPadding,20);
-
-        return {
-          marginBottom: this.rowSpacing + 'rpx',
-          width: Math.floor((outerWidht - (outMargin + outPadding + columnSpacing  + paddinRL + borderRL))/this.column_num) + 'rpx',
-          borderRadius: this.radius + 'rpx',
-          boxShadow: '0 0 10rpx rgba(0,0,0,.08)',
-          padding: str,
-          backgroundColor: 'rgba(255,255,255,.8)'
-        };
-      },
-
-      handleAllChange(){
-        if(this.$configProject['isPreview']){
-          this.navList = this.navList.map(item=>{
-            if(item.category_id === -1) return this.getAllCategory;
-            else return item;
-          })
-        }
-      },
-
-      /**
-       * @replace true: 手动点击分类
-       */
-      getList(replace = false){
-        let product_types = '';
-        if(this.brand_type === 'code') product_types = 'card'
-        let data = {
-          xnamespace: this.xnamespace,
-          random_score_seed: this.random_score_seed,
-          page_token: this.page_token,
-          page_size: this.page_size,
-          keyword: this.keyword,
-          brand_ids: this.brand_ids,
-          delivery_method: this.delivery,
-          filter_keys: this.filter_keys,
-          sort: this.sort,
-          custom_category_id: this.cateId || this.pid,
-          city_code: this.isCityFilter === "Y" ? this.stateCity.city_code : "",
-          need_show_tags: this.need_show_tags.join()
-        }
-        if(this.productConfig.isShowDiscount==='Y'){
-          data.is_show_uprice=this.$xdUniHelper.multiplyFloatNumber(this.productConfig.differ,100)
-        } else {
-          data.is_show_uprice=-1
-        }
-        if(product_types) {
-          data['product_types'] = product_types;
-        }
-
-
+      //商品列表
+      getList(){
+        let data = this.getProductListParams();
         if(!this.isFirst) this.$xdShowLoading({});
         this.isFirst = false;
         clearTimeout(this.timer);
         this.timer = setTimeout(() => {
-          jfbRootExec("getMallProductList", {
+          jfbRootExec("getNewMallProductList", {
             vm: this,
             data: this.$xdUniHelper.deleteParamEmptyKey(data)
           })
             .then(res => {
-              this.loadingList = false;
               if (!this.isFirst) this.$xdHideLoading();
 
               let list = this.$xdUniHelper.cloneDeep(res.list||[]).map((item,index) => {
                 item['thumb'] = item.thumb ? getServiceUrl(item['thumb'], "size3") : "";
                 item['key'] = item['product_id'] || index;
                 item['is_poster'] = 'N';
-
                 return item;
               });
+
               //插入广告位置
-              if(this.isPoster === 'Y'
-                && Number(this.page_token) === 1
-              ) {
+              if(this.isOpenPoster && Number(this.page_token) === 1) {
                 let posterIndex = 0;
-                if(this.column_num === 1) posterIndex = 3;
+                if(this.column_num === 1 && this.columnOneLayout === 'H') posterIndex = 3;
                 if(this.column_num === 2) posterIndex = 1;
                 if(this.posterIndex) {
                   let n =  Number(this.posterIndex);
@@ -930,7 +1010,8 @@
                   posterIndex = n - 1;
                 }
 
-                if(this.column_num === 1 || this.column_num === 2) {
+                //一列水平与二列边界处理
+                if(this.columnOneLayout === 'H' || this.column_num === 2) {
                   //边界，列表大于设定等显示广告
                   if(list.length === 0) {
                     list.push({is_poster: 'Y'});
@@ -942,213 +1023,183 @@
                     list.splice(posterIndex,0,{is_poster: 'Y'})
                   }
                 }
-
               }
 
-              let next_page_token = res.next_page_token;
-              this.next_page_token = next_page_token;
-              this.hasNext = !!next_page_token;
 
-              if(this.page_token === '1'){
-                this.$nextTick(() => {
-                  uni.pageScrollTo({
-                    scrollTop: 0,
-                    duration: 0
-                  });
-                })
-              }
+              //预览模式
               if(this.$configProject['isPreview']){
-                this.prodList = list;
-                this.prodList = this.prodList.map(item=>{
+                this.prodList = list.map(item=>{
                   if(this.productConfig.isPrice==='N'){
                     item.show_prices=[]
                   }
+
                   if(this.productConfig.isShowDiscount==='N'){
                     item.show_prices=item.show_prices.filter(item=>item.t!=='U')
                   }
-                  if(item.tags&&item.tags.length>0){
-                    item.tags = item.tags.filter(
-                      tag=>{
-                        return this.need_show_tags.includes(tag.type)
-                      }
-                    )
+
+                  if(item.tags && item.tags.length>0){
+                    let fiterTags = this.$xdUniHelper.cloneDeep(this.need_show_tags);
+                    item.tags = item.tags.filter(tag=>{
+                      return fiterTags.includes(tag.type)
+                    })
                   }
                   return item;
                 })
-              }else{
+              }
+              else{
                 this.prodList = (this.prodList||[]).concat(list);
               }
+
+              let next_page_token = res.next_page_token;
+              this.next_page_token = next_page_token;
+              this.hasNext = !!next_page_token;
+
+              if(this.page_token === '1'){
+                this.$nextTick(() => {
+                  uni.pageScrollTo({
+                    scrollTop: 0,
+                    duration: 0
+                  });
+                })
+              }
             })
             .catch(err => {
               if (!this.isFirst) this.$xdHideLoading();
               this.$xdLog.catch(err);
+              this.prodList = [];
             })
         }, 10)
       },
 
+      //分类数据
       getCategoryList(){
-        jfbRootExec("getMallCategoryTree", {
-          vm: this,
-          data: {
-            xnamespace: this.xnamespace,
-            parent_id: 0,
-            level: 2,
-            need_rec: this.options.need_rec
+        return new Promise((resolve)=>{
+          if(this.showCategory==="Y") {
+            jfbRootExec("getNewMallCategoryTree", {
+              vm: this,
+              data: {
+                xnamespace: this.xnamespace,
+                root_category_id: Number(this.parentId),
+                level:['all','v2','parentNew'].includes(this.categoryLayout1ShowType)?2:1,
+              }
+            })
+              .then(res => {
+                let truePid = '';
+                let trueCateId = '';
+                //是否需要坚持第二层
+                let isLevelTwo = !['child','parent'].includes(this.categoryLayout1ShowType);
+                let navList = res.items.map(item => {
+                  item['name'] = item.category_name;
+                  item['id'] = item.category_id;
+                  //页面传参中的一级分类否分存在
+                  if(this.pid && Number(this.pid) === item.category_id) truePid = item.category_id;
+                  item['category_icon'] = getServiceUrl(item['category_icon'], 'size3');
+                  item.children = item.children.map(child => {
+                    //页面传参中的二级分类否分存在
+                    if(truePid && isLevelTwo && this.cateId && Number(this.cateId) === child.category_id) trueCateId = child.category_id;
+                    child['category_icon'] = getServiceUrl(child['category_icon'], 'size3');
+                    return child;
+                  });
+                  return item;
+                });
+                if(navList.length > 0) {
+                  this.navList = [this.getAllCategory].concat(navList);
+                }
+                else this.navList = [];
+                this.truePid = truePid;
+                this.trueCateId = trueCateId;
+                this.loaded = true;
+                resolve()
+              })
+              .catch(err => {
+                this.$xdLog.catch(err);
+                this.loaded = true;
+                resolve()
+              })
           }
-        }).then(res => {
-          let navList = res.items.map(item => {
-            item['name'] = item.category_name;
-            item['id'] = item.category_id;
-            item['category_icon'] = getServiceUrl(item['category_icon'], 'size3');
-            item.children = item.children.map(child => {
-              child['category_icon'] = getServiceUrl(child['category_icon'], 'size3');
-              return child;
-            });
-            return item;
-          });
-          if(navList.length > 0) {
-            this.navList = [this.getAllCategory].concat(navList);
+          else {
+            this.navList = [];
+            this.loaded = true;
+            resolve()
           }
-          else this.navList = [];
-          this.loaded = true;
-        }).catch(err => {
-          this.$xdLog.catch(err);
+
         })
       },
 
+      //过滤条件
       getSearchFilterList(){
-        let product_types='';
-        if(this.brand_type === 'code') product_types = 'card'
-        let data = {
-          xnamespace: this.xnamespace,
-          keyword: this.keyword,
-          brand_ids: this.options.brand_id,
-          city_code: this.isCityFilter === "Y" ? this.stateCity.city_code : "",
-          custom_category_id: this.cateId || this.pid,
-          is_need_delivery_method: this.isShowDelivery
-        }
-        if(product_types) {
-          data['product_types'] = product_types;
-        }
-        jfbRootExec("getSearchFilterList", {
+        let data = this.getFilterListParams();
+        jfbRootExec("getNewSearchFilterList", {
           vm: this,
           data: data
         }).then(res => {
-          // if(this.delivery) {
-            // res.items = res.items.map((item=>{
-              // if(item.title==='配送方式') {
-              //   item.options = item.options.filter((Sitem=>{
-              //     return Sitem.value === this.delivery
-              //   }))
-              // }
-              // return item
-            // }))
-          // }
-          let filterItems = res.items;
-          this.searchFilterListOrg = this.$xdUniHelper.cloneDeep(filterItems);
-          if(this.showBrandFilter === 'in'){
-            this.searchFilterList = filterItems;
-          }else if(this.showBrandFilter === 'out'){
-            this.searchFilterList = filterItems.filter(item=>{
-              return item.title !== '品牌'
-            })
-            let haveBrand = filterItems.find(item=>item.title==='品牌');
-            if(haveBrand) this.brandList = haveBrand.options;
-          }
-          // this.searchFilterList = res.items;
-          // this.searchFilterListOrg = this.$xdUniHelper.cloneDeep(res.items);
+          this.searchFilterList = this.$xdUniHelper.cloneDeep(res.items)
+            .map(item=>{
+              if(item.title === '口味') item['multiple'] = false;
+              if(item.title === '配送方式') item['multiple'] = false;
+              return item
+            });
+
+
         }).catch(err => {
           this.$xdHideLoading();
           this.$xdLog.catch(err);
         })
       },
 
-      handleQuerySort(sortData){
-        if(this.sort === sortData.value) return false;
-        this.sortData = sortData;
-        this.sort = sortData.value;
-        this.clearProductData();
-        this.getList();
-        this.showQueryModal = false;
-      },
-      handleQueryBrand(brand_ids){
-        console.log('handleQueryBrand', brand_ids);
-        let brands = brand_ids.join(",");
-        this.showQueryModal = false;
-        if(this.brand_ids === brands) return false;
-        this.brand_ids = brands;
-        this.clearProductData();
-        this.getList();
-      },
-      handleQueryFilter(filterData){
-        if(JSON.stringify(this.filterData) === JSON.stringify(filterData)) {
-          this.showQueryModal = false;
-          return false;
-        }
-        this.filterData = filterData;
-        let brand = filterData.find(item=>item.key==='品牌')
-        let delivery = filterData.find(item=>item.key==='配送方式')
-        let filters = filterData.filter(item=>item.key!=='品牌'&&item.key!=='配送方式')
-
-        try {
-          if(brand&&brand.value) {
-            this.brand_ids = brand.value.join(",");
-          }
-          if(delivery&&delivery.value) {
-            this.delivery = delivery.value.join(",");
-          }
-          this.filter_keys = filters.reduce((pre,next) => pre.concat(next.value), []).join(",");
-        } catch (error) {
-        }
-        this.clearProductData();
-        this.getList();
-        this.showQueryModal = false;
+      clearProductData(){
+        this.prodList = null;
+        this.page_token = '1';
+        this.next_page_token = '';
       },
 
-      switchQueryModal(curQueryTab){
-        //"filter"
-        if(this.curQueryTab === curQueryTab) {
-          this.showQueryModal = !this.showQueryModal;
+      //选择分类处理
+      handleCateChange(options){
+        if(options.pid === -1) {
+          this.truePid = '';
+          this.trueCateId = '';
         }
-        //"sort"
-        else{
-          this.curQueryTab = curQueryTab
-          this.showQueryModal = true;
+        else {
+          if(options.pid)  this.truePid = options.pid;
+          if(options.cateId)  this.trueCateId = options.cateId;
         }
+        //关闭选中菜单
+        this.$refs['filter-query'].hideSelectMenu();//隐藏菜单
+        this.$refs['filter-query'].clearFitlerMenu();//清除过滤条件处理
+        this.clearProductData(); //清除商品列表数据
+        this.getSearchFilterList();
       },
 
-      closeQueryModal(){
-        this.showQueryModal = false;
+      //分类样式二操作分类显示时候关键过滤条件选择框（当前过滤条件框开启时候）
+      handleCateOpen(){
+        this.$refs['filter-query'].hideSelectMenu();//隐藏菜单
       },
 
-      moveHandle(){},
-
-      //分类change处理
-      handleCateChange(options){
-        let pid = '';
-        if(options.pid !==  -1) pid = options.pid;
-        this.pid = pid;
-        this.cateId = options.cateId || "";
-        this.handleOnCate();
-        this.getList();
+      handleAllChange(){
+        if(this.$configProject['isPreview']){
+          this.navList = this.navList.map(item=>{
+            if(item.category_id === -1) return this.getAllCategory;
+            else return item;
+          })
+        }
       },
 
-      //一级、二级分类共同处理
-      handleOnCate(){
-        this.brand_ids = "";
-        this.brand_type = "";
-        this.delivery = "";
-        this.filter_keys = "";
-        //点击分类时，触发重置筛选条件
-        this.getSearchFilterList();
-        this.clearProductData();
-      },
+      //=====广告数据，商品列表， 分类数据，过滤条件===========
 
-      clearProductData(){
-        this.prodList = null;
-        this.page_token = '1';
-        this.next_page_token = '';
+
+      //==菜单相关操作==============
+      handleFitlerChange({params}){
+        let menuSelectParams = {};
+        if(params['brand']) menuSelectParams['brand_ids'] = params['brand'];
+        if(params['sort']) menuSelectParams['sort'] = params['sort'];
+        if(params['delivery_method']) menuSelectParams['delivery_method'] = params['delivery_method'];
+        if(params['filter_keys']) menuSelectParams['filter_keys'] = params['filter_keys'];
+        this.menuSelectParams = menuSelectParams;
+        console.log('getProductListParams',JSON.stringify(this.menuSelectParams));
+        this.clearProductData(); //清除商品列表数据
+        this.getList()
       },
+      //==菜单相关操作==============
 
       toProductInfo(item){
         if (this.$configProject['isPreview'])return;
@@ -1156,18 +1207,9 @@
       },
 
       onJfbScroll({e}){
-
-        //#ifdef H5
         if (this.isPreview || this.loading === false) return;
         //调用子组件方法
 			  this.$refs.VT.topData(e.scrollTop);
-        if(this.categoryLayout === 'v1'){
-          let fixedTop = this.$refs['xdCateV1'].fixedTop;
-          this.isFixed = e.scrollTop > fixedTop;
-        }else{
-          this.isFixed = true;
-        }
-        // #endif
       },
 
       onJfbReachBottom(){
@@ -1183,16 +1225,29 @@
 
       onJfbCustomEvent({action, data}){
         if(action === 'baseHeader@search'){
-          uni.pageScrollTo({
-            scrollTop: 0,
-            duration: 0
-          });
-          this.keyword = data;
-          this.clearProductData();
-          this.getList();
+          if(this.searchTimer) {
+            clearTimeout(this.searchTimer);
+            this.searchTimer = null;
+          }
+          this.searchTimer = setTimeout(()=>{
+            uni.pageScrollTo({
+              scrollTop: 0,
+              duration: 0
+            });
+            this.keyword = data;
+            this.clearProductData();
+            this.getSearchFilterList();
+            this.getList();
+          },1000)
         }
-        console.log('onJfbCustomEvent',action, data);
-      }
+
+      },
+
+      onJfbUpdate() {
+        if(this.isPreview){
+          this.getPosterList()
+        }
+      },
     }
   }
 
@@ -1291,51 +1346,6 @@
 				height: unit(100, rpx);
 			}
 
-      .query_wrap{
-        display: flex;
-        justify-content: space-around;
-        background: #FFFFFF;
-        position: relative;
-        z-index: 101;
-        .query_item{
-          display: flex;
-          font-size: unit(28, rpx);
-          line-height: unit(100, rpx);
-          justify-content: center;
-          align-items: center;
-          flex-shrink: 0;
-          & > view {
-            display: flex;
-            justify-content:center;
-            align-items: center;
-            width: unit(40, rpx);
-            height: unit(90, rpx);
-            flex-shrink: 0;
-            margin-top: unit(1, rpx);
-          }
-          & > text {
-            padding-right: unit(10, rpx);
-            flex-shrink: 0;
-          }
-        }
-        .query_modal{
-          position: absolute;
-          background: #FFFFFF;
-          left: 0;
-          top: 100rpx;
-          z-index: 100;
-          border-top: 1px solid #F5F5F5;
-          width: 100%;
-        }
-
-      }
-      .scrollY_wrap{
-        flex: 1;
-        overflow: hidden;
-        .scroll_y{
-          height: 100%;
-        }
-      }
       .empty_data{
         text-align: center;
         color: #999999;
@@ -1404,6 +1414,11 @@
       }
       //poster========
 
+      .list-product{
+        position: relative;
+        z-index: 2;
+      }
+
 
     }
   }