jufubao-mall 2.0.29 → 2.0.31

package/src/components/JfbMallSpecialInfo/JfbMallSpecialInfo.vue

@@ -31,7 +31,7 @@
               >
                 <image :src="curCate.category_img" mode="widthFix"></image>
               </view>
-              <view class="product_list" :style="{padding:contMarginComp}">
+              <view class="product_list" :style="[contWrapStyle]">
                 <!--骨架-->
                 <view
                   v-if="products === null"
@@ -76,7 +76,7 @@
                   <view
                     v-for="(column,index) in column_num"
                     :key="column"
-                    :style="{marginRight:(column_num ===1 ? 0:(mainSpacing + 'rpx'))}"
+                    :style="{marginRight:(column_num ===1 && columnOneLayout ==='H' ? 0:(mainSpacing + 'rpx'))}"
                   >
                     <view
                       v-for="(item,idx) in getItemData(index,products)"
@@ -84,16 +84,19 @@
                       :style="[contProductStyles]"
                     >
                       <cus-product
+                        :column-one-layout="columnOneLayout"
                         :image-radius="imageRadius"
-                        :brand-color="contBrandColor"
+                        :brand-color="brandStyleComp"
                         :height="contProductImageHeight"
                         :cell="column_num"
                         :name-font="itemFont"
                         :product-config="productConfig"
+                        :color="mainColor"
                         :item="item"
                         :isPlus="is_plus_site"
                         :row-spacing="rowMainSpacing"
                         :cell-spacing="contSpacing"
+                        :cont-padding="contPadding"
                         @on-product-detail="toProductInfo"
                       ></cus-product>
                     </view>
@@ -117,7 +120,7 @@
   import XdUnit from "@/components/XdUnit/XdUnit"
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbMallSpecialInfoMixin from "./JfbMallSpecialInfoMixin";
-  import { getContainerPropsValue,toProductDetail, getImageInfo } from "@/utils/xd.base";
+  import { getContainerPropsValue,toProductDetail, getImageInfo,gCPVal } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
   import getServiceUrl from "@/common/getServiceUrl";
@@ -166,25 +169,29 @@
         is_show_brand: 'N',
 
         //基础属性
-        mainSpacing: 30, //列间距
-        rowMainSpacing: 30, //行间距
+        mainSpacing: 16, //列间距
+        rowMainSpacing: 16, //行间距
         column_num: 1,
         productConfig:{},
 
         //item
-        imageRadius:'10',
-        contRadius: '10',
+        imageRadius:'8',
+        contRadius: '16',
         contShadow:'0 0 0 rgba(0,0,0,0)',
         contBorder:0,
         contBgColor:'#fff',
-        contTextColor:'#333',
-        contBrandColor:'#999',
+        contBrandColor: '',
+        contBrandBgColor: '',
         contMargin:{},
         contPadding:{},
         itemFont:{},
-        contSpacing: '20',
+        contSpacing: '16',
         need_show_tags: [],
-        is_plus_site: false
+        is_plus_site: false,
+        columnOneLayout: 'H', //V=垂直 H=水平
+        contStyleBorder: 0,
+        contBackgroundColor: '',
+        contBackground: ''
       }
     },
     computed: {
@@ -224,18 +231,20 @@
         return this.categories.find(item => Number(item.category_id) === category_id) || {};
       },
 
-      contMarginComp(){
-        let str = `${this.checkValue(this.contMargin.top, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.contMargin.right, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.contMargin.bottom, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.contMargin.left, 0)}rpx`;
-        return str
+      contWrapStyle(){
+        return {
+          padding: this.getMarginAndPadding(this.contMargin, 0),
+          backgroundColor: this.contBackgroundColor,
+          backgroundImage: `url(${this.contBackground})`,
+          backgroundSize: `100% 100%`,
+          backgroundRepeat: 'no-repeat'
+        }
       },
       contPaddingComp(){
-        let str = `${this.checkValue(this.contPadding.top, 20)}rpx`;
-        str = `${str} ${this.checkValue(this.contPadding.right, 20)}rpx`;
-        str = `${str} ${this.checkValue(this.contPadding.bottom, 20)}rpx`;
-        str = `${str} ${this.checkValue(this.contPadding.left, 20)}rpx`;
+        let str = `${this.checkValue(this.contPadding.top, 16)}rpx`;
+        str = `${str} ${this.checkValue(this.contPadding.right, 16)}rpx`;
+        str = `${str} ${this.checkValue(this.contPadding.bottom, 16)}rpx`;
+        str = `${str} ${this.checkValue(this.contPadding.left, 16)}rpx`;
         return str
       },
 
@@ -253,7 +262,7 @@
 
 
         //item内容填充
-        let paddinRL = (Number(this.checkValue(this.contPadding.left, 20)) + Number(this.checkValue(this.contPadding.right, 20))) * this.column_num;
+        let paddinRL = (Number(this.checkValue(this.contPadding.left, 16)) + Number(this.checkValue(this.contPadding.right, 16))) * this.column_num;
         //内容列表区域边距
         let marginUl = (Number(this.checkValue(this.contMargin.left, 0)) + Number(this.checkValue(this.contMargin.right, 0)))
 
@@ -263,12 +272,7 @@
         if(this.$configProject['isPreview']) isPreview = 2 * this.$pxNum;
 
         //边框
-        let borderRL = 0;
-        if(this.contBorderOrg.type === 'Y') {
-          if(this.contBorderOrg.value && this.contBorderOrg.value.width !== undefined) {
-            borderRL = Number(this.contBorderOrg.value.width) * 2;
-          }
-        }
+        let borderRL =  this.contStyleBorder * 2;
         borderRL = borderRL * this.column_num;
         return {
           marginTop: this.rowMainSpacing + 'rpx',
@@ -303,6 +307,13 @@
           padding: `${top} ${this.rowMainSpacing}rpx ${this.mainSpacing}rpx`
         }
       },
+      //品牌样式
+      brandStyleComp(){
+        return {
+          color: this.contBrandColor,
+          bgColor: this.contBrandBgColor,
+        }
+      }
     },
     watch: {
       container(value,oldValue) {
@@ -328,7 +339,13 @@
         if (this.$configProject['isPreview']){
           this.getList();
         }
-      }
+      },
+      columnOneLayout(){
+        this.reHandlePoster()
+      },
+      column_num(){
+        this.reHandlePoster()
+      },
     },
     created() {
       this.init(this.container);
@@ -340,45 +357,67 @@
        * @param container {object} 业务组件对象自己
        */
       init(container) {
-        this.mainSpacing = getContainerPropsValue(container, 'content.mainSpacing', 30);
-        this.rowMainSpacing = getContainerPropsValue(container, 'content.rowMainSpacing', 30);
-        this.column_num = getContainerPropsValue(container, 'content.column_num', 2);
-        if( this.column_num === 1) this.skeNumber = 6;
-        if( this.column_num === 2) this.skeNumber = 4;
-        if( this.column_num === 3) this.skeNumber = 5;
-        if(this.column_num === 3) this.pages_size = 21;
-        else this.pages_size = 20;
-
-        //商品内容设置
-        this.isCategoryImage = getContainerPropsValue(container, 'content.isCategoryImage', 'N');
-        this.productConfig = this.getProductConfig(container);
-
-        //item
-        this.contRadius = getContainerPropsValue(container, 'content.contRadius', '10');
-        this.imageRadius = getContainerPropsValue(container, 'content.imageRadius', '10');
-        this.contShadow = this.getXdShadow({width:20, color:'rgba(0,0,0,0)'},getContainerPropsValue(container, 'content.contShadow', {}))
-        this.contBorder = this.getXdBorder({width:2,color:'rgba(0,0,0,0)'},getContainerPropsValue(container, 'content.contBorder', {}));
-        this.contBorderOrg = getContainerPropsValue(container, 'content.contBorder', {});
-        this.contRadius = getContainerPropsValue(container, 'content.contRadius', '10');
-        this.contPadding = getContainerPropsValue(container, 'content.contPadding', {});
-        this.contMargin = getContainerPropsValue(container, 'content.contMargin', {});
-        this.contBgColor = getContainerPropsValue(container, 'content.contBgColor', '#fff');
-        this.contTextColor = getContainerPropsValue(container, 'content.contTextColor', '#333');
-        this.contBrandColor = getContainerPropsValue(container, 'content.contBrandColor', '#999');
-        this.contSpacing = getContainerPropsValue(container, 'content.contSpacing', '20');
-        let contStyle = getContainerPropsValue(container, 'content.contStyle', {});
+        //content
+        this.xnamespace = gCPVal(container, 'xnamespace', this.projectAttr.business_code, {});
+        let compConfig = getContainerPropsValue(container, "content.compConfig", null);
+        let tagsKeys= this.getProductTagsKeys(compConfig,container)
+        this.need_show_tags = this.getProductTagsParams(compConfig, tagsKeys)
+        this.productConfig = this.getProductConfig(container, { cartStyle: 'icongouwuche-01' });
+        let column_num = gCPVal(container, 'column_num', 2);
+        this.column_num = column_num;
+        //一列水平
+        if (column_num === 1) { 
+          this.skeNumber = 6;
+          this.columnOneLayout = 'H';
+        }  
+        if (column_num === 3) {
+          this.skeNumber = 5;
+          this.page_size = 21;
+        } else this.page_size = 20;
+        //一列垂直
+        if(column_num === 4) {
+          this.column_num = 1;
+          this.columnOneLayout = 'V';
+          this.skeNumber = 10;
+          this.page_size = 20;
+        }
+        this.isCategoryImage = gCPVal(container, 'isCategoryImage', 'N');
+        this.productConfig = this.getProductConfig(container, { cartStyle: 'icongouwuche-01' });
+        //商品样式关联属性
+        const sValue = "{\"border\":0,\"backgroundColor\":\"#fff\"}";
+        let itemBgcColoStyle = this.getRelationStatus(container,'productStyle',{ contBgColorStatus:['contBgColor'],bgBorder:['contBorder', 'bs']},sValue);
+        this.contBgColor = gCPVal(container, 'contBgColor', ['#fff'], {sKey: 'contBgColorStatus', cusFields: ['productStyle','backgroundColor',itemBgcColoStyle]});
+
+        //style
+        let contStyle =  gCPVal(
+          container,
+          "contStyle",
+          [{
+            color: '#333',
+            fontWeight: '500',
+          }],
+          {sKey:'contStyleStatus',fields:['contStyle'],isMerge: true}
+          );
         this.itemFont = {
-          color: contStyle.color || '#333',
-          fontSize: contStyle.fontSize|| '30rpx',
-          fontWeight:contStyle.fontWeight || 500
+          color: contStyle.color,
+          fontWeight: parseInt(contStyle.fontWeight)
         };
-
-        //高级属性
+        this.contBrandColor = gCPVal(container, 'contBrandColor', '#999', { sKey: 'contBrandStatus', fields: ['contBrandColor','contBrandBgColor'] });
+        this.contBrandBgColor = gCPVal(container, 'contBrandBgColor', '', { sKey: 'contBrandStatus', fields: ['contBrandColor','contBrandBgColor'] });
+        this.contBorder = gCPVal(container, 'contBorder', [{ color: '#fff', width: 2, style: 'solid' }], { isBorder: true, bsOld: ['is_border', 'is_border_w', 'is_border_c'], cusFields: ['productStyle', 'border', itemBgcColoStyle] });
+        this.contStyleBorder = gCPVal(container, 'contBorder', [{ color: '#fff', width: 2, style: 'solid' }], { isBorder: true, isBsWidth: true, bsOld: ['is_border', 'is_border_w', 'is_border_c'], cusFields: ['productStyle', 'border', itemBgcColoStyle] });
+        this.contRadius = gCPVal(container, 'contRadius', [16], {sKey:'contRadiusStatus', fields:['contRadius']})||0;
+        this.imageRadius = gCPVal(container, 'imageRadius', [8], {sKey:'imageRadiusStatus', fields:['imageRadius']})||0;
+        this.contShadow = gCPVal(container, 'contShadow', [{width:20, color:'rgba(0,0,0,0)'},'none'], {isShadow:true, bsOld:['is_shadow','is_shadow_w','is_shadow_bg']});
+        this.rowMainSpacing = Number(gCPVal(container,'rowMainSpacing', 16, {sKey:'columnRowStatus',fields:['rowMainSpacing','mainSpacing']}));
+        this.mainSpacing = Number(gCPVal(container,'mainSpacing', 16, {sKey:'columnRowStatus',fields:['rowMainSpacing','mainSpacing']}));
+        this.contPadding = gCPVal(container,'contPadding', [16], {sKey:'contPaddingStatus',fields:['contPadding'],isPMR: true});
+        this.contBackgroundColor = gCPVal(container, 'contBackgroundColor', '', { sKey: 'contBgStatus', fields: ['contBackgroundColor', 'contBackground'] });
+        this.contBackground = getServiceUrl(gCPVal(container, 'contBackground', {url:''}, { sKey: 'contBgStatus', fields: ['contBackgroundColor','contBackground'] }).url);
+        this.contMargin = gCPVal(container, 'contMargin', [0], { sKey: 'contMarginStatus', fields: ['contMargin'], isPMR: true });
+        this.contSpacing = gCPVal(container, 'contSpacing', '16', { sKey: 'contStyleStatus', fields: ['contSpacing'] });
+        //advanced
         this.productInfoPath = getContainerPropsValue(container, 'content.productInfoPath', {value: ""}).value;
-        this.xnamespace = getContainerPropsValue(container, 'content.xnamespace', this.projectAttr.business_code);
-        let compConfig = getContainerPropsValue(container, "content.compConfig", null);
-        let tagsKeys= this.getProductTagsKeys(compConfig,container)
-        this.need_show_tags = this.getProductTagsParams(compConfig,tagsKeys) 
       },
 
       onJfbLoad(options) {
@@ -651,7 +690,7 @@
     }
     .skeTwoBox {
       display: flex;
-      justify-content: space-between;
+      justify-content: space-around;
       align-items: flex-start;
       &> view:last-child{
         margin-right: 0!important;
@@ -659,7 +698,7 @@
     }
     .skeThreeBox {
       display: flex;
-      justify-content: space-between;
+      justify-content: space-around;
       align-items: flex-start;
       &> view:last-child{
         margin-right: 0!important;

package/src/components/JfbMallSpecialInfo/Mock.js

@@ -149,151 +149,6 @@ module.exports = {
           }
         ],
       },
-      {
-        product_id: 60008818,
-        product_type: "good",
-        brand_id: 40413,
-        brand_name: "良品铺子",
-        list_title: "百草味原色无漂白盐焗味开心果500g 每日坚果干果零食量贩 送礼团购",
-        status: "soldout",
-        sale_num: 0,
-        market_price: 4300,
-        thumb: "//sandbox-img.jufubao.cn/uploads/20230522/d394f125cdbea07de0b7c33838fc680f.jpg",
-        sale_price: 5356,
-        show_prices: [
-          {
-              "p": 3347,
-              "n": "PLUS价",
-              "t": "S"
-          },
-          {
-              "p": 4300,
-              "n": "原价",
-              "t": "U"
-          }
-        ],
-      },
-      {
-        product_id: 600070912,
-        product_type: "good",
-        brand_id: 40503,
-        brand_name: "Meixin/美心",
-        list_title: "惠普（HP）战66 四代 15.6英寸轻薄笔记本电脑",
-        status: "ok",
-        sale_num: 0,
-        market_price: 4300,
-        thumb: "//sandbox-img.jufubao.cn/uploads/20230517/d01ab9cd8344d226c43919b47f8ed534.jpg",
-        sale_price: 1300,
-        show_prices: [
-          {
-              "p": 1300,
-              "n": "PLUS价",
-              "t": "S"
-          },
-          {
-              "p": 4300,
-              "n": "原价",
-              "t": "U"
-          }
-        ],
-      },
-      {
-        product_id: 600088162,
-        product_type: "good",
-        brand_id: 40413,
-        brand_name: "良品铺子",
-        list_title: "良品铺子手撕面包2斤装 量贩早餐小面包代餐休闲零食办公室点心整箱装礼盒",
-        status: "ok",
-        sale_num: 0,
-        market_price: 4300,
-        thumb: "//sandbox-img.jufubao.cn/uploads/20230522/24f0e3386a80c2a6659d71862eedcae7.jpg",
-        sale_price: 2678,
-        show_prices: [
-          {
-              "p": 2678,
-              "n": "PLUS价",
-              "t": "S"
-          },
-          {
-              "p": 4300,
-              "n": "原价",
-              "t": "U"
-          }
-        ],
-      },
-      {
-        product_id: 600088212,
-        product_type: "good",
-        brand_id: 40189,
-        brand_name: "好丽友",
-        list_title:
-          "好丽友（orion）零食休闲零食薯条膨化食品呀!土豆番茄酱味70g/袋",
-        status: "soldout",
-        sale_num: 0,
-        market_price: 4300,
-        thumb: "//sandbox-img.jufubao.cn/uploads/20230522/eb1d4222f69559e1ac0c999ae01da8ae.jpg",
-        sale_price: 2678,
-        show_prices: [
-          {
-              "p": 2678,
-              "n": "PLUS价",
-              "t": "S"
-          },
-          {
-              "p": 4300,
-              "n": "原价",
-              "t": "U"
-          }
-        ],
-      },
-      {
-        product_id: 600088172,
-        product_type: "good",
-        brand_id: 40413,
-        brand_name: "良品铺子",
-        list_title: "港荣蒸蛋糕 奶香味手撕蛋糕900g/箱面包蛋糕早餐面包办公室零食",
-        status: "off",
-        sale_num: 0,
-        market_price: 4300,
-        thumb: "//sandbox-img.jufubao.cn/uploads/20230522/f1a75df336de07214278e97232207e97.jpg",
-        sale_price: 3347,
-        show_prices: [
-          {
-              "p": 3347,
-              "n": "PLUS价",
-              "t": "S"
-          },
-          {
-              "p": 4300,
-              "n": "原价",
-              "t": "U"
-          }
-        ],
-      },
-      {
-        product_id: 600088182,
-        product_type: "good",
-        brand_id: 40413,
-        brand_name: "良品铺子",
-        list_title: "百草味原色无漂白盐焗味开心果500g 每日坚果干果零食量贩 送礼团购",
-        status: "soldout",
-        sale_num: 0,
-        market_price: 4300,
-        thumb: "//sandbox-img.jufubao.cn/uploads/20230522/d394f125cdbea07de0b7c33838fc680f.jpg",
-        sale_price: 5356,
-        show_prices: [
-          {
-              "p": 3347,
-              "n": "PLUS价",
-              "t": "S"
-          },
-          {
-              "p": 4300,
-              "n": "原价",
-              "t": "U"
-          }
-        ],
-      }
     ],
     request_id: "d649550fb3e62d43"
   },
@@ -459,38 +314,6 @@ module.exports = {
               }
             ],
           },
-          {
-            partner_id: 0,
-            product_id: 60008275,
-            product_type: "card",
-            brand_id: 3,
-            brand_name: "好利来",
-            product_name: "",
-            sub_title: "",
-            short_title: "",
-            list_title: "电子码（用于测试搜索）0510",
-            channel_code: "",
-            supplier_id: "",
-            status: "ok",
-            sale_num: 0,
-            thumb: "//sandbox-img.jufubao.cn/uploads/20230510/058bb3097724eba08db852546f7cbf88.jpg",
-            sale_price: 1339,
-            market_tags: [],
-            created_time: 0,
-            updated_time: 0,
-            show_prices: [
-              {
-                  "p": 1339,
-                  "n": "PLUS价",
-                  "t": "S"
-              },
-              {
-                  "p": 4300,
-                  "n": "原价",
-                  "t": "U"
-              }
-            ],
-          }
         ]
       },
       {

package/src/components/JfbMallSpecialInfo/cusAttr/advanced.js

@@ -0,0 +1,24 @@
+'use strict';
+import {
+  dataVal,
+  statusDataVal,
+  statusShow
+} from "@/utils/AttrTools";
+export default (data, gValue, gColor, oldData) => {
+  return [
+    {
+      label: '商品详情',
+      ele: 'xd-select-pages-path',
+      labelInline: true,
+      valueKey: 'productInfoPath',
+      placeholder: '请选择商品详情',
+      value: dataVal({ data, key: 'productInfoPath', dValue: null, gValue }),
+      groupKey: 'advanced',
+      className: 'input100',
+      setting: {
+        mode: 'new',
+        router: XdBus.getParentApi('getPagesTree'),
+      },
+    },
+  ]
+}