jufubao-mall 2.0.20-beta1 → 2.0.20-beta2

package/package.json

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

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: '名称样式',