jufubao-mall 2.0.20-beta1 → 2.0.20-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-mall",
-  "version": "2.0.20-beta1",
+  "version": "2.0.20-beta3",
   "private": false,
   "description": "聚福宝商城业务组件插件包",
   "main": "index.js",

package/src/components/JfbMallBrandWall/JfbMallBrandWall.vue

@@ -22,12 +22,13 @@
           <scroll-view
             :scroll-x="layout==='v1'"
             :scroll-y="layout==='v2'"
-            :style="{height:layout==='v2'?tabStyleComp.height:'auto'}"
+            :style="{height:layout==='v2'? tabStyleComp.height:'auto'}"
             :class="{'tab-linex':layout==='v1' && hStyle ==='v3'}"
           >
             <view
               class="tab_list"
               :class="{hStyle: layout === 'v1'}"
+              :style="[tabListComp]"
               v-if="loaded"
             >
               <view
@@ -46,7 +47,7 @@
                   || (layout === 'v1' && ['v2','v3'].includes(hStyle))"
                   class="lineCom"
                   :class="{lineSmall: ['v3'].includes(hStyle)}"
-                  :style="{backgroundColor: i === tabIndex?tabActItemStyleComp.color:'rgba(0,0,0,0)'}"
+                  :style="{backgroundColor: i === tabIndex?tabActItemNameStyle.color:'rgba(0,0,0,0)'}"
                 ></view>
                 <view :style="[i === tabIndex?tabActItemNameStyle:tabItemNameStyle]">{{tab.input}}</view>
               </view>
@@ -199,14 +200,15 @@
 
         //选项卡信息
         titleBgc: '',
-        tabPadding:{},
+        tabPadding:{},//选项卡填充
         titleStyle:{},
         titleRadius:0,
         titleShadow:'',
         titleBorder:0,
         titleBorderWidth:0,
         titleBgcActColor:'',
-        titlePadding: 0,
+        titlePadding: 0, //内容与选项卡填充
+        titleSp: 0, //选项卡间距
 
 
         //内容
@@ -245,7 +247,7 @@
       skeletonStyle(){
         let margin = 0;
         if(this.layout === 'v1') {
-           margin = '24rpx 24rpx 24rpx 0';
+           margin = '0rpx 24rpx 0rpx 0';
         }
         if(this.layout === 'v2') {
           margin = '12rpx'
@@ -263,7 +265,10 @@
         }
       },
       showTabs(){
-        let tabs = this.$xdUniHelper.cloneDeep(this.newLabel).filter(item=>item.check);
+        let tabs = this.$xdUniHelper.cloneDeep(this.newLabel).filter(item=>{
+          return item.check === true
+        });
+
         //线下签是否展示通过后台控制
         if(this.has_sell) return tabs;
         else return tabs.filter(item => item.value !== 'sell');
@@ -351,9 +356,6 @@
           if(['v1', 'v2'].includes(this.vStyle)) {
             style['height'] = `${this.layoutInfo.bodyMinHeightPx - outHeight}px`;
           }
-          // if(['v2', 'v4'].includes(this.vStyle)) {
-          //   style['max-height'] = `${this.layoutInfo.bodyMinHeightPx - outHeight}px`;
-          // }
           style['overflowY'] = 'auto';
           style['overflowX'] = 'hidden';
         }
@@ -366,7 +368,7 @@
         let style = {}
         //上下结构
         if(this.layout === 'v1') {
-          style['padding'] = this.getMarginAndPadding(this.tabPadding, 0);
+
           if(!this.isPreview) {
             style['position'] = 'fixed';
             style['zIndex'] = '10';
@@ -380,23 +382,36 @@
           style['width'] = '172rpx';
           style['flexShrink'] = 0;
           style['overflow'] = 'hidden';
-          style['padding'] = this.getMarginAndPadding(this.tabPadding, 0);
+          style['padding'] = 0;
 
           if(['v1', 'v2'].includes(this.vStyle)) {
             let tb = this.getPMValue(this.bodyPadding, 'TB', 0) * this.$rpxNum +  this.titleBorderWidth * 2 *this.$rpxNum;
-            tb +=  this.getPMValue(this.tabPadding, 'TB', 0) * this.$rpxNum
             style['height'] = `calc(${ this.layoutInfo.bodyMinHeightPx}px - ${tb}px)`;
             style['borderRadius'] = `0 ${this.titleRadius}rpx  ${this.titleRadius}rpx  0`;
           }
         }
         return style;
       },
+      tabListComp(){
+        let temp = {};
+        if(this.layout === 'v1') {
+          temp['paddingLeft'] =  (this.tabPadding.left || 0) + 'rpx';
+          temp['paddingRight'] =  (this.tabPadding.right || 0) + 'rpx';
+          temp['paddingBottom'] =  (this.tabPadding.bottom || 0) + 'rpx';
+          temp['paddingTop'] =  (this.tabPadding.top || 0) + 'rpx';
+        }
+        return temp
+      },
       tabStyleComp(){
+        let border = {};
+        if(this.layout === 'v2') border = {border: this.titleBorder}
+        else border = {borderBottom: this.titleBorder}
         return {
           boxShadow: this.titleShadow,
-          borderBottom: this.titleBorder,
+          ...border,
           backgroundColor: this.titleBgc,
-          marginBottom: this.titlePadding + 'rpx',
+          //在模版二不使用内容与选项卡直接间距
+          marginBottom: this.layout === 'v2'?0:this.titlePadding + 'rpx',
           ...this.getTabHeight,
         };
       },
@@ -421,9 +436,10 @@
       getTabItemHeight(){
         if(this.layout === 'v1'){
           return  {
-            height:['v1'].includes(this.hStyle) ?'60rpx' : '108rpx',
-            lineHeight: ['v1'].includes(this.hStyle) ?'60rpx' : '108rpx',
+            height: '60rpx',
+            lineHeight:'60rpx',
             marginRight: this.titleSp + 'rpx',
+            minWidth: '80rpx'
           }
         }
 
@@ -433,7 +449,7 @@
             lineHeight: '100rpx',
             borderRadius:'0',
             fontSize:'24rpx',
-            marginBottom: this.titlePadding + 'rpx'
+            marginBottom: this.titleSp + 'rpx'
           }
         }
 
@@ -475,10 +491,35 @@
         }
       },
       tabActItemNameStyle(){
-        if(this.layout === 'v2') return {}
         let bgColor = '';
         let bgImage = 'none';
+        let color = this.mainColor;
+        if(this.layout === 'v2') {
+          if(['v2'].includes(this.vStyle)) {
+            //选项卡标签文字颜色
+            if(this.titleStyle.actColor) color = this.titleStyle.actColor;
+            else color = '#fff';
+
+            //选项卡标签背景颜色
+            if(this.titleStyle.actBgColor) bgColor = this.titleStyle.actBgColor;
+            else {
+              if(this.mainGradient && this.mainGradient.indexOf('gradient') !== -1)  bgImage = this.mainGradient;
+              else bgColor = this.mainColor;
+            }
+          }
+
+          return {
+            backgroundColor: bgColor,
+            color: color,
+          }
+        }
+
         if(['v1'].includes(this.hStyle)) {
+          //选项卡标签文字颜色
+          if(this.titleStyle.actColor) color = this.titleStyle.actColor;
+          else color = '#fff';
+
+          //选项卡标签背景颜色
           if(this.titleStyle.actBgColor) bgColor = this.titleStyle.actBgColor;
           else {
             if(this.mainGradient && this.mainGradient.indexOf('gradient') !== -1)  bgImage = this.mainGradient;
@@ -490,7 +531,7 @@
           backgroundColor: bgColor,
           backgroundImage: bgImage,
           padding: '0 32rpx',
-          color: this.titleStyle.actColor,
+          color: color,
           fontSize: this.titleStyle.actFontSize + 'rpx',
           fontWeight: this.titleStyle.actFontWeight,
         }
@@ -514,9 +555,6 @@
       this.$nextTick()
     },
     methods: {
-      tr() {
-        return tr
-      },
       onJfbLoad(options) {
         //设置业务请求代码
         this.setNameSpace(options);
@@ -562,7 +600,8 @@
         ]
         let newLabel = this.$xdUniHelper.cloneDeep(gCPVal(container, 'newLabel', []))
           .filter(item=>{
-            return item['isShow'] !== undefined
+            //更古老数据，相对新数据
+            return item['isShow'] === undefined || item['isShow'] === true
           })
           .sort((a,b)=>Number(a.sort)-Number(b.sort))
           .map(item=>{
@@ -572,6 +611,7 @@
               item['check'] = item['isShow'];
               delete item['isShow'];
             }
+            else item['check'] = true;
             if(item['newLabel'] !== undefined || item['label'] !== undefined) {
               item['input'] = item['newLabel'] || item['label'];
               delete item['newLabel'];
@@ -579,8 +619,20 @@
             }
             return item
           });
-        this.newLabel = gCPVal(container, 'tabContent', [newLabel.length > 0 ? newLabel: defNewLabel]);
+        let defValues = {
+          all: '全部',
+          sell:'线下',
+          code:'电子码',
+          stod:'线上',
+          'stod-samecity':'同城配送',
+          "stod-logistics":'快递配送',
+          'stod-takeout':'门店自提'
+        }
 
+        this.newLabel = gCPVal(container, 'tabContent', newLabel.length > 0 ? newLabel: defNewLabel).map(item=>{
+          if(item.input === '') item.input = defValues[item.value];
+          return item
+        });
 
         //常规
         let defBodyPadding= 0;
@@ -616,12 +668,10 @@
           else defListPadding = {top:40,left:40, right:40, bottom:40};
         }
 
+        let defListMargin = 0;
+        if(this.layout === 'v2' && this.vStyle === 'v2') defListMargin = 24;
+
         this.listPadding = gCPVal(container, 'listPadding', [defListPadding,24], {sKey: 'listPaddingStatus', fields: ['listPadding'], isPMR: true});
-        let defListMargin= 0;
-        if(this.layout === 'v2'){
-          //if(['v3', 'v4'].includes(this.vStyle)) defListMargin = {top:0,left:24, right:0, bottom:0}
-          if(['v2'].includes(this.vStyle)) defListMargin = {top:24,left:24, right:24, bottom:24}
-        }
         this.listMargin = gCPVal(container, 'listMargin', [defListMargin,0], {sKey: 'listMarginStatus', fields: ['listMargin'], isPMR: true});
         this.contRadius = gCPVal(container, 'contRadius', [this.gStyleValue.radius,0],{sKey: 'contRadiusStatus', fields: ['contRadius']})||0;
 
@@ -631,18 +681,11 @@
         let defTabPadding = 0;
         let oldTabPadding = 0;
         if(this.layout === 'v2') {
-          if(['v2', 'v1'].includes(this.vStyle)) defTabPadding = {top:0,left:0, right:0, bottom:0};
           if(['v1'].includes(this.vStyle)) defTitleBgc = '#f8f8f8';
         }
         if(this.layout === 'v1') {
-          defTabPadding =  {top:0,left:32, right:0, bottom:0};
-          oldTabPadding = {top:0,left:32, right:0, bottom:0};
-
-          if(['v1'].includes(this.hStyle)) {
-            defTabPadding =  {top:24,left:32, right:0, bottom:24};
-            oldTabPadding = {top:24,left:32, right:0, bottom:24};
-          }
-
+          defTabPadding =  {top:24,left:32, right:32, bottom:24};
+          oldTabPadding = {top:40,left:40, right:40, bottom:40};
         }
         this.tabPadding = gCPVal(container, 'tabPadding', [defTabPadding,oldTabPadding], {sKey: 'tabPaddingStatus', fields: ['tabPadding'], isPMR: true});
         this.titleBgc = gCPVal(container, 'titleBgc', [defTitleBgc,'#fff'],{sKey: 'titleBgcStatus', fields: ['titleBgc']});
@@ -653,7 +696,7 @@
         let titleStyleStatus =  gCPVal(container, 'titleStyleStatus', '');
         if(titleStyleStatus === 'D') titleActColor = '';
         let mainColor = titleActColor || this.mainColor;
-        if(this.layout === 'v1' && this.hStyle === 'v1')  mainColor = '#fff';
+        //if(this.layout === 'v1' && this.hStyle === 'v1')  mainColor = '#fff';
         if(this.layout === 'v2' && this.vStyle === 'v2')  mainColor = '#fff';
         this.titleStyle = gCPVal(
           container,
@@ -663,10 +706,10 @@
             bgColor: titleBgcColor || '#fff' ,
             fontSize: '32',
             fontWeight: '400',
-            actColor: mainColor,
+            actColor: titleActColor || '',
             actFontWeight: '400',
             actFontSize: '32',
-            actBgColor: "",
+            actBgColor:this.titleBgcActColor || '',
           }],
           {sKey:'titleStyleStatus',fields:['titleStyle'],isMerge: true},
         );
@@ -679,16 +722,16 @@
           if(['v1','v2'].includes(this.vStyle)) defTitleRadius = '0';
         }
         this.titleRadius = gCPVal(container, 'titleRadius', [defTitleRadius,this.gStyleValue.radius,'0'],{sKey: 'titleRadiusStatus', fields: ['titleRadius']})||0;
-        this.titlePadding = gCPVal(container, 'titlePadding', '0',{sKey: 'titlePaddingStatus', fields: ['titlePadding']});
-        this.titleSp = gCPVal(container, 'titleSp', [48, 0],{sKey: 'titleSpStatus', fields: ['titleSp']});
+        this.titlePadding = gCPVal(container, 'titlePadding', 0,{sKey: 'titlePaddingStatus', fields: ['titlePadding']});
+        this.titleSp = gCPVal(container, 'titleSp', [(this.layout === 'v2'?0:48), 0],{sKey: 'titleSpStatus', fields: ['titleSp']});
 
         //内容
         this.contentBgc = gCPVal(container, 'contentBgc', '#fff',{sKey: 'contentBgcStatus', fields: ['contentBgc']} );
         let contentPadding = gCPVal(container, 'contentPadding',''), bindSize = 68;
         if(this.layout === 'v1' && this.contentCell === 3) bindSize = 28;
         if(this.layout === 'v1' && this.contentCell === 5) bindSize = 60;
-        if(contentPadding) bindSize = 100 - Number(contentPadding);
-        this.bindSize = 100 - Number(gCPVal(container, 'bindSize', [bindSize,68],{sKey: 'bindSizeStatus', fields: ['bindSize']}));
+        if(contentPadding) bindSize = 112 - Number(contentPadding);
+        this.bindSize = 112 - Number(gCPVal(container, 'bindSize', [bindSize,68],{sKey: 'bindSizeStatus', fields: ['bindSize']}));
         this.radius = gCPVal(container, 'radius', [this.gStyleValue.radius,0],{sKey: 'radiusStatus', fields: ['radius']})||0;
         this.brandShadow = gCPVal(container, 'brandShadow', [this.gStyleValue.shadow,'none'], {isShadow:true, bsOld:['isContShadow','isContShadowBgcW','isContShadowBgc']});
         this.brandBorder = gCPVal(container, 'brandBorder', [{color: '#f8f8f8', width: '2', style: 'solid'},{color: '#eee', width: '0', style: 'solid'}], {isBorder:true, bsOld:['isContBorder','isContBorderW','isContBorderColor']});
@@ -696,8 +739,8 @@
           container,
           "brandStyle",
           [{
-            color: gCPVal(container, 'brandNameColor', '') || '#333',
-            fontSize: '24',
+            color: gCPVal(container, 'brandNameColor', '') || '#666',
+            fontSize: '28rpx',
             fontWeight: '400',
           }],
           {sKey:'brandStyleStatus',fields:['brandStyle'],isMerge: true},
@@ -856,7 +899,7 @@
                   left: 50%;
                   width: 64rpx;
                   transform: translateX(-50%);
-                  bottom: 16rpx;
+                  bottom: -16rpx;
                   height: 6rpx;
                   border-radius: 4rpx;
                 }

package/src/components/JfbMallBrandWall/cusAttr/brand.js

@@ -55,13 +55,13 @@ export default (data, gValue, gColor, oldData)=>{
       groupKey: 'style',
       ele: 'xd-slider',
       valueKey: "bindSize",
-      value: dataVal({data, key:'bindSize', dValue: gValue.isAdd && gValue.isFirst?bindSize: 68, gValue}),
+      value: dataVal({data, key:'bindSize', dValue: gValue.isAdd && gValue.isFirst ? bindSize: 68, gValue}),
       hidden: !statusShow({data, key: 'bindSizeStatus', fields:['bindSize'], gValue}),
       className: "input100",
       labelInline: true,
       setting:{
-        min: 0,//最小值
-        max: 100, //最小值
+        min: 50,//最小值
+        max: 90, //最小值
         step:1, //步长
         showStops:false,//显示间断点
         showInput:false,//显示输入框
@@ -97,7 +97,7 @@ export default (data, gValue, gColor, oldData)=>{
         selected:false,
         default:{
           color: data['brandNameColor'] || '#666',
-          fontSize:'24',
+          fontSize:'28rpx',
           fontWeight: '400'
         },
       },

package/src/components/JfbMallBrandWall/cusAttr/content.js

@@ -10,8 +10,10 @@ export default (data, gValue, gColor, oldData={})=>{
   //老数据
   let tabContent = [];
   if(data['newLabel'] !== undefined) {
-    let newLabel = clone(data['newLabel']).filter(item=>{
-      return item['isShow'] !== undefined
+    let newLabel = clone(data['newLabel']).map(item=>{
+      if(typeof item.isShow === 'boolean') item.check = item.isShow;
+      else  item.check = true;
+      return item
     });
     tabContent = newLabel.sort((a,b)=>Number(a.sort)-Number(b.sort)).map(item=>{
       item['placeholder'] = '自定义名称';
@@ -86,13 +88,13 @@ export default (data, gValue, gColor, oldData={})=>{
       inline: false,
       handleCustom({action, data}) {
         data.cb([
-          {value:'all', label: '全部',input:'',check: true,placeholder:'自定义名称'},
-          {value:'sell', label: '线下',input:'',check: true, placeholder:'自定义名称'},
-          {value:'code', label: '电子码',input:'',check: true,placeholder:'自定义名称'},
-          {value:'stod', label: '线上',input:'',check: true,placeholder:'自定义名称'},
-          {value:'stod-samecity', label: '同城配送',input:'',check: false,placeholder:'自定义名称'},
-          {value:'stod-logistics', label: '快递配送',input:'',check: false,placeholder:'自定义名称'},
-          {value:'stod-takeout', label: '门店自提',input:'',check: false,placeholder:'自定义名称'},
+          {value:'all', label: '全部',input:'', def: '全部', check: true,placeholder:'自定义名称'},
+          {value:'sell', label: '线下',input:'', def: '线下',check: true, placeholder:'自定义名称'},
+          {value:'code', label: '电子码',input:'', def: '电子码',check: true,placeholder:'自定义名称'},
+          {value:'stod', label: '线上',input:'', def: '线上',check: true,placeholder:'自定义名称'},
+          {value:'stod-samecity', label: '同城配送',input:'', def: '同城配送',check: false,placeholder:'自定义名称'},
+          {value:'stod-logistics', label: '快递配送',input:'', def: '快递配送',check: false,placeholder:'自定义名称'},
+          {value:'stod-takeout', label: '门店自提',input:'', def: '门店自提',check: false,placeholder:'自定义名称'},
         ])
       },
     },
@@ -146,7 +148,7 @@ export default (data, gValue, gColor, oldData={})=>{
       value: dataVal({data, key:'layout', dValue:'v1', gValue}),
       multiple: false,
       groupKey: 'content',
-      className: 'input50',
+      className: 'input100',
       labelInline:true,
       list: [
         {label: '上下布局', value: 'v1'},
@@ -211,7 +213,7 @@ export default (data, gValue, gColor, oldData={})=>{
       placeholder: '请选择显示列',
       multiple: false,
       groupKey: 'content',
-      className: 'input50',
+      className: 'input100',
       labelInline:true,
       hidden: !(['v1'].includes(dataVal({data, key:'layout', dValue:'v2', gValue}) )),
       list: [

package/src/components/JfbMallBrandWall/cusAttr/tab.js

@@ -27,48 +27,38 @@ export default (datas, gValue, gColor, oldData={})=>{
   let defTitleShadow = cRaBorShadow( data, 'titleShadow', {old:['isTitleShadow','isTitleShadowBgcW','isTitleShadowBgc']},gValue);
   let titleStyleFields = ['titleBgcColor','titleBgcActColor','titleColor','titleActColor'];
 
-  function handle(isBtn, isChange=false){
-    if(isBtn) {
-      if(data['titleStyle'] !== undefined) {
-        data['titleStyle']['color'] = '#333';
-        data['titleStyle']['actColor'] = '#fff';
-        data['titleStyle']['bgColor'] = '#fff';
-        data['titleStyle']['actBgColor'] = '';
-      }
-      if(isChange && statusDataVal({data, key:'tabPaddingStatus', fields:['tabPadding'],gValue}) === 'C') {
-        data['tabPadding'] = {top:24,left:32, right:32, bottom:24}
-      }
-    }
-    else {
-      if(data['titleStyle'] !== undefined) {
-        data['titleStyle']['color'] = '#333';
-        data['titleStyle']['actColor'] = gColor.mainColor;
-        data['titleStyle']['bgColor'] = '';
-        data['titleStyle']['actBgColor'] = '';
-        if(isChange && statusDataVal({data, key:'tabPaddingStatus', fields:['tabPadding'],gValue}) === 'C') {
-          data['tabPadding'] = {top:0,left:0, right:0, bottom:0}
-        }
-      }
-    }
-  }
-
-  //切换左右
-  if(data['layout'] !== oldData.layout) {
-    handle(data['layout'] === 'v1'?data.hStyle === 'v1': data.vStyle === 'v2', data['layout'] === 'v1');
-  }
-
-  //上下结构，切换Tab样式
-  if(data['layout'] === 'v1' && data.hStyle && oldData.hStyle && data.hStyle !== oldData.hStyle) {
-    handle(data.hStyle === 'v1', true);
-  }
-  //左右结构，切换Tab样式
-  if(data['layout'] === 'v2' && data.vStyle && oldData.vStyle && data.vStyle !== oldData.vStyle) {
-    handle(data.vStyle === 'v2');
-  }
-  if(statusDataVal({data, key:'tabPaddingStatus', fields:['tabPadding'],gValue}) === 'C') {
-    if(data['layout'] === 'v2') data['tabPadding'] = {top:20,left:0, right:0, bottom:0};
-    else data['tabPadding'] = {top:24,left:32, right:0, bottom:24}
-  }
+  // function handle(isBtn, isChange=false){
+  //   if(isBtn) {
+  //     if(data['titleStyle'] !== undefined) {
+  //       data['titleStyle']['color'] = '#333';
+  //       data['titleStyle']['actColor'] = '#fff';
+  //       data['titleStyle']['bgColor'] = '#fff';
+  //       data['titleStyle']['actBgColor'] = '';
+  //     }
+  //   }
+  //   else {
+  //     if(data['titleStyle'] !== undefined) {
+  //       data['titleStyle']['color'] = '#333';
+  //       data['titleStyle']['actColor'] = gColor.mainColor;
+  //       data['titleStyle']['bgColor'] = '';
+  //       data['titleStyle']['actBgColor'] = '';
+  //     }
+  //   }
+  // }
+  //
+  // //切换左右
+  // if(data['layout'] !== oldData.layout) {
+  //   handle(data['layout'] === 'v1'?data.hStyle === 'v1': data.vStyle === 'v2', data['layout'] === 'v1');
+  // }
+  //
+  // //上下结构，切换Tab样式
+  // if(data['layout'] === 'v1' && data.hStyle && oldData.hStyle && data.hStyle !== oldData.hStyle) {
+  //   handle(data.hStyle === 'v1', true);
+  // }
+  // //左右结构，切换Tab样式
+  // if(data['layout'] === 'v2' && data.vStyle && oldData.vStyle && data.vStyle !== oldData.vStyle) {
+  //   handle(data.vStyle === 'v2');
+  // }
 
 
   return [
@@ -106,7 +96,7 @@ export default (datas, gValue, gColor, oldData={})=>{
         selected:true,
         default:{
           color: data['titleColor'] || '#333',
-          bgColor:data['titleBgcColor'] || '#fff',
+          bgColor: data['titleBgcColor'] || '#fff',
           fontSize:'32',
           fontWeight: '400',
           actFontSize:'32',
@@ -145,7 +135,7 @@ export default (datas, gValue, gColor, oldData={})=>{
       groupKey: 'style',
       ele: 'xd-slider',
       valueKey: "titleSp",
-      value:  dataVal({data, key:'titleSp', dValue:gValue.isAdd && gValue.isFirst ?48: 0, gValue}),
+      value:  dataVal({data, key:'titleSp', dValue:gValue.isFirst && gValue.isAdd?(data.layout === 'v2'?0:48):0}),
       hidden: !statusShow({data, key: 'titleSpStatus', fields:['titleSp'], gValue}),
       className: "input100",
       labelInline: true,
@@ -166,6 +156,7 @@ export default (datas, gValue, gColor, oldData={})=>{
       valueKey: 'titlePaddingStatus',
       value: statusDataVal({data, key: 'titlePaddingStatus', fields:['titlePadding'], gValue}),
       labelInline:true,
+      hidden: data['layout'] ==='v2',
       list: [
         {label: '默认', value: 'D'},
         {label: '自定义', value: 'C'},
@@ -178,7 +169,7 @@ export default (datas, gValue, gColor, oldData={})=>{
       ele: 'xd-slider',
       valueKey: "titlePadding",
       value:  dataVal({data, key:'titlePadding', dValue:0, gValue}),
-      hidden: !statusShow({data, key: 'titlePaddingStatus', fields:['titlePadding'], gValue}),
+      hidden: !statusShow({data, key: 'titlePaddingStatus', fields:['titlePadding'], gValue}) || data['layout'] ==='v2',
       className: "input100",
       labelInline: true,
       setting:{
@@ -336,7 +327,7 @@ export default (datas, gValue, gColor, oldData={})=>{
       value: dataVal({
         data,
         key:'tabPadding',
-        dValue:[gValue.isAdd&&gValue.isFirst ? 0: {top:24,left:32, right:0, bottom:24}],
+        dValue:[gValue.isAdd && gValue.isFirst?{top:24,left:32, right:32, bottom:24}: 40],
         gValue,
         isPM: true,
       }),
@@ -357,7 +348,7 @@ export default (datas, gValue, gColor, oldData={})=>{
       groupKey: 'style',
       placeholder: '请选择未选中文字颜色',
       classNmae: 'input80',
-      hidden: true
+      hidden: false
     },
     {
       label: '选中标签背景颜色:',
@@ -367,7 +358,7 @@ export default (datas, gValue, gColor, oldData={})=>{
       groupKey: 'style',
       placeholder: '请选择选中标签背景颜色',
       classNmae: 'input80',
-      hidden: true
+      hidden: false
     },
     {
       label: '未选中文字颜色:',
@@ -377,7 +368,7 @@ export default (datas, gValue, gColor, oldData={})=>{
       groupKey: 'style',
       placeholder: '请选择未选中文字颜色',
       classNmae: 'input80',
-      hidden: true
+      hidden: false
     },
     {
       label: '选中文字颜色:',
@@ -387,7 +378,7 @@ export default (datas, gValue, gColor, oldData={})=>{
       groupKey: 'style',
       placeholder: '请选择选中文字颜色',
       classNmae: 'input80',
-      hidden: true
+      hidden: false
     },
 
     {

package/src/components/JfbMallProductList/ComFilterQuery.vue

@@ -1,6 +1,6 @@
 <template>
-  <view class="jfb-filter" v-if="showQuery === 'Y'">
-    <view class="jfb-filter-placeholder" :style="[placeholderStyleComp]" ></view>
+  <view class="jfb-filter" v-if="showQuery === 'Y'" :style="[cssStyle]">
+    <view class="jfb-filter-placeholder" :style="[placeholderStyleComp]"></view>
     <view class="jfb-filter-menu" :style="[cusMenuStyle,menuStyleTopComp]">
       <template v-if="sortList.length > 0">
         <view
@@ -251,7 +251,8 @@ export default {
     menuStyleTopComp(){
       return {
         zIndex: this.showQueryModal ? 1002 : 1,
-        ...this.queryMaskComp
+        position:this.$configProject.isPreview?'absolute':'fixed',
+        top: this.$configProject.isPreview ? 0 : this.queryMaskComp.top
       }
     },
     queryTopComp(){
@@ -271,7 +272,7 @@ export default {
     otherMenuComp(){
       let height = 48; //菜单高度
       let maxHeight = this.$root.layoutInfo['bodyMinHeightRpx'] - (300 + height +  this.topHeight) ;
-      if(this.$configProject.isPreview) maxHeight = 800;
+      if(this.$configProject.isPreview) maxHeight = 600;
       return {
         backgroundColor: this.cusPopStyle['filterListColor'] || '#f8f8f8',
         maxHeight: maxHeight + 'rpx',
@@ -335,6 +336,20 @@ export default {
         }
       }
       return params
+    },
+    cssStyle(){
+      let filterListColor = this.cusPopStyle['filterListColor'] || '#f8f8f8';
+      if(Color(filterListColor).isDark()) filterListColor = Color(filterListColor).lighten(0.8).toString();
+      else if(Color(filterListColor).isLight()) filterListColor = Color(filterListColor).darken(0.03).toString();
+
+      let menuListColor = this.cusPopStyle['backgroundColor'] || '#fff';
+      if(Color(menuListColor).isDark()) menuListColor = Color(menuListColor).lighten(0.8).toString();
+      else if(Color(menuListColor).isLight()) menuListColor = Color(menuListColor).darken(0.03).toString();
+
+      return {
+        '--com-pop-border': filterListColor,
+        '--com-menu-border': menuListColor
+      }
     }
   },
   watch:{
@@ -623,7 +638,6 @@ export default {
       this.closeQueryModal();
     },
     switchOtherOpen(tab){
-      debugger
       this.filterTabs = this.filterTabs.map(item => {
         if(JSON.stringify(tab.value) === JSON.stringify(item.value)) item['open'] = !item['open'];
         return item;
@@ -749,6 +763,7 @@ export default {
 
 <style scoped lang="less">
   .jfb-filter {
+    position: relative;
     &-placeholder {
       font-size: 20rpx;
     }
@@ -758,8 +773,7 @@ export default {
       left: 0;
       right: 0;
       z-index: 100;
-      border-top: 1px solid #F5F5F5;
-      width: 100%;
+      border-top: 1px solid var(--com-menu-border);
       display: flex;
       justify-content: space-around;
       height: 48rpx;
@@ -831,7 +845,7 @@ export default {
       .xd-query-sort{
         &-item {
           height: 80rpx;
-          border-bottom: 1rpx solid #f8f8f8;
+          border-bottom: 1rpx solid var(--com-pop-border);
           line-height: 80rpx;
           padding-left: 80rpx;
           color: #999;

package/src/components/JfbMallProductList/JfbMallProductList.vue

@@ -416,15 +416,22 @@
       allIcon(){
         this.handleAllChange()
       },
+
       allName(){
         this.handleAllChange()
       },
+
       showCategory(val){
         if(this.$configProject.isPreview) {
           if(val === 'Y') this.getCategoryList();
           else this.navList = [];
         }
+      },
 
+      parentId(){
+        if(this.$configProject.isPreview) {
+          this.getCategoryList();
+        }
       },
 
       need_show_tags(value,oldValue) {
@@ -440,7 +447,7 @@
       },
       onLoadStatus(){
         if(this.initStatus && this.onLoadStatus) this.handleInit();
-      }
+      },
 
     },
     created() {
@@ -554,6 +561,13 @@
         //基础
         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']});
@@ -593,7 +607,7 @@
 
         //==过滤区域============
         let categoryLayout = gCPVal(container, "categoryLayout", "v1");
-        let category =  'v2'//gCPVal(container, 'category',categoryLayout);
+        let category =  gCPVal(container, 'category',categoryLayout);
 
         //是否显示过滤菜单
         let showQuery = gCPVal(container, "showQuery", 'Y');
@@ -604,7 +618,7 @@
         else this.isFilterMenuForFilterFields = [];
         //是否显示品牌菜单
         let showBrandFilter = gCPVal(container, "showBrandFilter", "in");
-
+        let filterModeSort = ['common','price','host','brand','delivery_method','filter'];
         //菜单设置
         let filterMode = [];
         if(showQuery === 'Y') {
@@ -616,6 +630,8 @@
             if(showBrandFilter === 'out') filterMode.push('brand');
             filterMode.push('filter');
           }
+          //已经设置
+          else filterMode = this.$xdUniHelper.cloneDeep(filterModeArr);
 
           //设置条件
           if(filterMode.length <= 4 && filterMode.length >=2) {
@@ -786,6 +802,8 @@
         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', [100],{sKey:'iconWdithStatus', fields:['iconWdith']});
+        const iconBgColor = gCPVal(container, 'iconBgColor', [100],{sKey:'iconBgColorStatus', fields:['iconBgColor']});
 
         this.tabStyle = {
           titleColor,
@@ -797,6 +815,8 @@
           titleActFontWeight,
           subTitleIconShadow,
           subTitleIconBorder,
+          iconWdith,
+          iconBgColor,
           titleBgColor,
           titleActBgColor,
           level2Name,

package/src/components/JfbMallProductList/Mock.js

@@ -5,6 +5,8 @@ module.exports = {
     items: [
       {
         title: '配送方式',
+        value:'delivery_method',
+        multiple: false,
         options: [
           {
             label: '同城配送',
@@ -25,6 +27,8 @@ module.exports = {
       },
       {
         title: "品牌",
+        value:'brand',
+        multiple: true,
         options: [
           {"label":"美克斯","value":"100787","icon":"//img.jufubao.cn\/uploads\/20240311\/ef2f44e422d73d9b09746cfe0b2c312d.jpg?x-oss-process=style/size4"},
           {"label":"DOCTOR LI","value":"100535","icon":"//img.jufubao.cn\/uploads\/20240102\/924d9c1b4a06d8a47dfe53a6a6b529b6.png?x-oss-process=style/size4"},
@@ -65,6 +69,8 @@ module.exports = {
       },
       {
         title: "尺寸",
+        value:'attr',
+        multiple: false,
         options: [
           { label: "≤4英寸", value: "size-1" },
           { label: "6英寸", value: "size-2" },
@@ -75,6 +81,8 @@ module.exports = {
       },
       {
         title: "适用场景",
+        value:'attr',
+        multiple: true,
         options: [
           { label: "生日", value: "scene-1" },
           { label: "下午茶", value: "scene-2" },

package/src/components/JfbMallProductList/XdCateV1.vue

@@ -3,7 +3,7 @@
     <view v-if="!isFixed" class="category_wrap-mask" :style="[categoryWarperMaskComp]" ></view>
     <view
       class="category_wraper"
-      :style="{top:(layoutInfo['top']) + 'rpx'}"
+      :style="[categoryWaperComp]"
     >
       <view v-if="showParent && isShowCategory" >
         <view class="tab_wrap" :style="[{backgroundColor:titleBgcColor}]">
@@ -40,20 +40,22 @@
           :key="sub_category_list"
           class="sub_category_list"
         >
-
           <view v-for="(sub,i) in imageIconList" :key="sub.category_id" class="sub_cate icon">
             <view
               :id="'cate-scroll__index-'+i"
               @click="handleCateClick(sub, 1)"
             >
-              <view :style="[sub.category_id === (['child','parentNew'].includes(showType)? uiPid:cateId )?subActTitleIcon:subTitleIcon]" class="sub_icon">
-                <view :style="[subTitleInIcon]">
+              <view
+                :style="[sub.category_id === (['child','parentNew'].includes(showType)? uiPid:uiCateId )?subActTitleIcon:subTitleIcon,subTitleInIcon]"
+                class="sub_icon"
+              >
+                <view>
                   <image :src="sub.category_icon" style="width:100%;height:100%"/>
                 </view>
               </view>
               <view
                 class="sub_name"
-                :style="[sub.category_id === (['child','parentNew'].includes(showType)? uiPid:cateId )?level2ActNameComp:level2NameComp]"
+                :style="[sub.category_id === (['child','parentNew'].includes(showType)? uiPid:uiCateId )?level2ActNameComp:level2NameComp]"
               >{{sub.category_name}}</view>
             </view>
           </view>
@@ -89,6 +91,7 @@
 import CusTab from "@/components/CusTab/CusTab.vue"
 import getServiceUrl from "@/common/getServiceUrl";
 import cateMixins from "./cateMixins";
+import Color from "color";
 export default {
   components: {
     CusTab
@@ -250,7 +253,12 @@ export default {
       return {height: height + 'rpx'}
     },
     subTitleInIcon(){
-      return {}
+      let {iconWdith, iconBgColor} = this.tabStyle
+      return {
+        width: iconWdith + 'rpx',
+        height: iconWdith + 'rpx',
+        backgroundColor: iconBgColor
+      }
     },
     //是否展示父级分类
     showParent(){
@@ -262,9 +270,14 @@ export default {
         backgroundColor: this.level2BgcColor,
         color: this.level2Color,
       }
+
+      let level2BgcColor = this.level2BgcColor || '#fff';
+      if(Color(level2BgcColor).isDark()) level2BgcColor = Color(level2BgcColor).lighten(0.8).toString();
+      else if(Color(level2BgcColor).isLight()) level2BgcColor = Color(level2BgcColor).darken(0.03).toString();
+
       if(this.showParent && this.isShowCategory){
         temp = Object.assign({},temp, {
-          borderTop:this.boxTitleBorder,
+          borderTop:`2rpx solid ${level2BgcColor}`,
           boxSizing: 'border-box'
         })
       }
@@ -288,6 +301,12 @@ export default {
         backgroundColor: this.tabStyle.titleActBgColor,
       }
     },
+    categoryWaperComp(){
+      return {
+        position:this.$configProject.isPreview?'absolute':'fixed',
+        top: this.$configProject.isPreview ? 0 : (this.layoutInfo.top + 'rpx')
+      }
+    }
   },
   created(){
     this.isPreview = this.$configProject.isPreview;
@@ -397,6 +416,7 @@ export default {
      * @param type 1=>图文   2=>文字
      */
     handleCateClick(sub , type = 1){
+      debugger
       //当前布局为v1时候
       if(this.showType === 'all') this.clickClidItem(sub);
 
@@ -498,6 +518,9 @@ export default {
           margin: 0 auto;
           overflow: hidden;
           box-sizing: border-box;
+          display: flex;
+          justify-content: center;
+          align-items: center;
           & > view {
             background-color: #fff;
             width: calc(100% - var(--sub-icon-border)*2);

package/src/components/JfbMallProductList/XdCateV2.vue

@@ -172,9 +172,14 @@ export default {
       };
     },
     chosePanelFixedTop(){
+      let level2BgcColor = '#fff';
+      if(Color(level2BgcColor).isDark()) level2BgcColor = Color(level2BgcColor).lighten(0.8).toString();
+      else if(Color(level2BgcColor).isLight()) level2BgcColor = Color(level2BgcColor).darken(0.03).toString();
+
       return {
         top: this.$configProject.isPreview?'108rpx':(parseInt(this.cateBarStyleComp.top) + 108) + 'rpx',
         position: this.$configProject.isPreview?'absolute':'fixed',
+        borderTop: `2rpx solid ${level2BgcColor}`
       }
     },
 

package/src/components/JfbMallProductList/cusAttr/content.js

@@ -55,6 +55,9 @@ export default (data, gValue,gColor,oldData)=>{
     isShowDelivery = data['isShowDelivery'];
   }
 
+  let categoryParentType = dataVal({data, key:'categoryParentType', dValue:'root', gValue});
+
+
   return[
     {
       ele: 'title',
@@ -172,6 +175,35 @@ export default (data, gValue,gColor,oldData)=>{
         {required: true, message: '请上传全部图标', trigger: ['blur', 'change']},
       ],
     },
+    {
+      label: '父级分类',
+      ele: 'xd-radio',
+      groupKey: 'content',
+      valueKey: 'categoryParentType',
+      value: categoryParentType,
+      labelInline:true,
+      className: 'input100',
+      list: [
+        {label: '根目录', value: 'root'},
+        {label: '自定义', value: 'child'},
+      ],
+      notice:'展示指定父级分类下的子级分类',
+      inline: false
+    },
+    {
+      label: '',
+      ele: 'el-input',
+      type: 'number',
+      labelInline: true,
+      valueKey: 'categoryParent',
+      cusStyle: {
+        paddingLeft: '90px'
+      },
+      value: dataVal({data, key:'categoryParent', dValue:'', gValue}),
+      groupKey:'content',
+      className: 'input100',
+      hidden: categoryParentType === 'root',
+    },
     {ele: 'group_end'},
     {
       label: "分类样式",
@@ -309,6 +341,7 @@ export default (data, gValue,gColor,oldData)=>{
       groupKey:'content',
       valueKey: "filterMode",
       value: filterMode,
+      isSort: true,
       list:[
         {"label": "综合", "value": 'common'},
         {"label": "销量", "value": 'hot'},

package/src/components/JfbMallProductList/cusAttr/icon.js

@@ -103,25 +103,6 @@ export default (data, gValue, gColor, oldData)=>{
         {label: '自定义', value: 'C'},
       ]
     },
-    0&&{
-      label: "图标大小",
-      groupKey: 'style',
-      ele: 'xd-slider',
-      valueKey: "iconWdith",
-      value: data['iconWdith'] === undefined?128:data['iconWdith'],
-      className: "input80",
-      labelInline: true,
-      setting:{
-        min: 64,//最小值
-        max: 128, //最小值
-        step:1, //步长
-        showStops:false,//显示间断点
-        showInput:false,//显示输入框
-      },
-      inline:false,
-      notice:'调整分类图标大小'
-    },
-
     {ele: 'group_start'},
     {
       label: '',
@@ -160,6 +141,63 @@ export default (data, gValue, gColor, oldData)=>{
       },
     },
     {ele: 'group_end'},
+    {
+      label: '图标大小',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'iconWdithStatus',
+      value: statusDataVal({data, key:'iconWdithStatus', fields:['iconWdith'],gValue}),
+      labelInline:true,
+      list: [
+        {label: '默认', value: 'D'},
+        {label: '自定义', value: 'C'},
+      ]
+    },
+    {ele: 'group_start'},
+    {
+      label: "",
+      groupKey: 'style',
+      ele: 'xd-slider',
+      valueKey: "iconWdith",
+      value: dataVal({data, key:'iconWdith', dValue:100, gValue}),
+      hidden: !statusShow({data, key: 'iconWdithStatus', fields:['iconWdith'], gValue}),
+      className: "input80",
+      labelInline: true,
+      setting:{
+        min: 50,//最小值
+        max: 100, //最小值
+        step:1, //步长
+        showStops:false,//显示间断点
+        showInput:false,//显示输入框
+      },
+    },
+    {ele: 'group_end'},
+    {
+      label: '图标背景',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'iconBgColorStatus',
+      value: statusDataVal({data, key:'iconBgColorStatus', fields:['iconBgColor'],gValue}),
+      labelInline:true,
+      list: [
+        {label: '默认', value: 'D'},
+        {label: '自定义', value: 'C'},
+      ]
+    },
+    {ele: 'group_start'},
+    {
+      label: '',
+      ele: 'xd-color',
+      valueKey: 'iconBgColor',
+      groupKey:'style',
+      value: dataVal({data, key:'iconBgColor', dValue:'#f8f8f8', gValue}),
+      hidden: !statusShow({data, key: 'iconBgColorStatus', fields:['iconBgColor'], gValue}),
+      classNmae: 'input80',
+      setting: {
+        showAlpha: true
+      },
+    },
+    {ele: 'group_end'},
 
     {
       label: '名称样式',