jufubao-mall 2.0.20-beta6 → 2.0.21-beta21

package/src/components/JfbMallRecommendProduct/JfbMallRecommendProduct.vue

@@ -20,102 +20,90 @@
       <view
         class="showlist"
         v-if="isShow"
-        :style="[contMarginComp]"
+        :style="{ margin: contMarginComp}"
       >
         <!--title-->
         <view
-          v-if="isTitleStatus"
+          v-if="isShowTitle === 'Y'"
           class="title"
           :style="{
             backgroundColor:titleBgColor,
             borderRadius:titleRadius + 'rpx'
           }"
         >
-          <xd-more :background="titleMoreBgColor"><text :style="[titleFontStyle]">{{isTitleStatus}}</text></xd-more>
+          <xd-more :background="titleMoreBgColor"><text :style="[titleFontStyle]">{{recommendTitle}}</text></xd-more>
         </view>
         <!--title-->
-        <view class="list-product">
-          <view
-            v-if="prodList === null"
-            class="products-ske"
-            :class="{
+        <!--商品列表-->
+        <view
+          v-if="prodList === null"
+          class="products-ske"
+          :class="{
             skeOneBox: column_num === 1,
             skeTwoBox: column_num === 2,
             skeThreeBox: column_num === 3
           }"
-            :style="[listMarginComp]"
+          :style="{padding:listMarginComp}"
+        >
+          <view
+            v-for="(column,index) in column_num"
+            :key="column"
+            :style="{marginRight:(column_num ===1 ? 0:(columnSpacing + 'rpx'))}"
           >
             <view
-              v-for="(column) in column_num"
-              :key="column"
-              :style="{marginRight:(column_num ===1 ? 0:(columnSpacing + 'rpx'))}"
+              v-for="item in skeNumber"
+              :key="item"
+              :style="[skeletonStyle]"
             >
-              <view
-                v-for="item in skeNumber"
-                :key="item"
-                :style="[skeletonStyle]"
-              >
-                <ske-product
-                  :cell="column_num"
-                  :cell-spacing="columnSpacing"
-                  :row-spacing="rowSpacing"
-                  :product-config="productConfig"
-                  :height="skeletonImageHeight"
-                ></ske-product>
-              </view>
+              <ske-product
+                :cell="column_num"
+                :cell-spacing="columnSpacing"
+                :row-spacing="rowSpacing"
+                :product-config="productConfig"
+                :height="skeletonImageHeight"
+              ></ske-product>
             </view>
           </view>
-          <view
-            class="products-list"
-            v-if="prodList && prodList.length > 0"
-            :class="{
+        </view>
+        <view
+          class="products-list"
+          v-if="prodList && prodList.length > 0"
+          :class="{
             skeOneBox: column_num === 1,
             skeTwoBox: column_num === 2,
             skeThreeBox: column_num === 3,
+            isHiddenTitle: isShowTitle === 'N'
           }"
-            :style="[listMarginComp]"
+          :style="{padding:listMarginComp}"
+        >
+          <view
+            v-for="(column,index) in column_num"
+            :key="column"
+            :style="{marginRight:(column_num ===1 ? 0:(columnSpacing + 'rpx'))}"
           >
             <view
-              v-for="(column,index) in column_num"
-              :key="column"
-              :style="{marginRight:(column_num ===1 ? 0:(columnSpacing + 'rpx'))}"
+              v-for="(item,idx) in getItemData(index,prodList)"
+              :key="item.product_id"
+              :style="[contProductStyles]"
             >
-
-              <template v-if="getItemData(index,prodList).length > 0">
-                <view
-                  v-for="(item,idx) in getItemData(index,prodList)"
-                  :key="item.product_id"
-                  :style="[contProductStyles]"
-                >
-                  <cus-product
-                    :column-one-layout="columnOneLayout"
-                    :image-radius="imageRadius"
-                    :brand-color="brandStyleComp"
-                    :height="contProductImageHeight"
-                    :cell="column_num"
-                    :name-font="itemFontStyle"
-                    :product-config="productConfig"
-                    :isPlus="isGVipSite"
-                    :item="item"
-                    :cell-spacing="contSpacing"
-                    :color="mainColor"
-                    @on-product-detail="toProductInfo"
-                  ></cus-product>
-                </view>
-              </template>
-              <template v-else>
-                <view :style="[contProductStyles, {visibility: 'hidden'}]"></view>
-              </template>
+              <cus-product
+                :image-radius="imageRadius"
+                :brand-color="brandColor"
+                :height="contProductImageHeight"
+                :cell="column_num"
+                :name-font="itemFontStyle"
+                :product-config="productConfig"
+                :item="item"
+                :isPlus="is_plus_site"
+                :row-spacing="rowSpacing"
+                :cell-spacing="contSpacing"
+                @on-product-detail="toProductInfo"
+              ></cus-product>
             </view>
           </view>
         </view>
         <!--商品列表-->
-        <xd-no-data :scale-size="2" type="product" v-if="prodList && prodList.length === 0"></xd-no-data>
-        <xd-more
-          v-if="(isPreview || !hasNext ) && isUserScrollData === 'Y' && prodList.length > 0"
-          :color="footerColor"
-          :background="footerColor"
-        ><text>我是有底线的</text></xd-more>
+        <view class="hasNoData" v-if="hasDataComp">已经到底没有更多数据了</view>
       </view>
       <view
         class="notShow"
@@ -134,18 +122,17 @@
 <script>
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
   import XdMore from "@/components/XdMore/XdMore";
+  import XdUnit from "@/components/XdUnit/XdUnit"
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbMallRecommendProductMixin from "./JfbMallRecommendProductMixin";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins"
-  import {getContainerPropsValue, toProductDetail,gCPVal} from "@/utils/xd.base";
+  import {getContainerPropsValue, toProductDetail} from "@/utils/xd.base";
   import getServiceUrl from "@/common/getServiceUrl"
   import { mapState } from "vuex"
   import Color from "color";
   import SkeProduct from "@/components/SkeProduct/SkeProduct.vue";
   import CusProduct from "@/components/CusProduct/CusProduct.vue";
-  import productCompMixins from "@/mixins/productCompMixins";
-  import XdNoData from "@/components/XdNoData/XdNoData.vue";
 
 
   export default {
@@ -155,51 +142,40 @@
       SkeProduct,
       XdFontIcon,
       XdMore,
-      XdNoData
+      XdUnit
     },
-    mixins: [componentsMixins,extsMixins,JfbMallRecommendProductMixin,productCompMixins],
+    mixins: [componentsMixins,extsMixins,JfbMallRecommendProductMixin],
     data() {
       return {
         closeMask: true,
         page_size: 20,
         page_token:'1',
-        hasNext: true,
         prodList: null,
         isShow: true,
         noticeBackgroundColor: "",
         random_score_seed: parseInt(Math.random() * 10000000),
-        isProductTop:true,
 
         //高级属性
         xnamespace: "",
         productInfoPath: "",
         isCityFilter: "N",
         isUserScrollData:'N',
-
-        //商品设置
-        productConfig:{},
-        column_num: 2,
-        columnOneLayout: 'H', //V=垂直 H=水平
-        sort: "default",
-        skeNumber:6,
+        isShowTitle:'Y',
 
 
         //基础属性
         columnSpacing: 20,
         rowSpacing: 20, //行间距
+        column_num: 2,
+        productConfig:{},
         marketTags: [],
-        isPlatformTags:[],
-        need_show_tags: [],
-        footerColor:'',
+        skeNumber:6,
 
 
-        //外边框
-        bodyPadding:{},//外边距
-        listPadding:{}, //列表填充
+        //contnet
+        contMargin:{},//外边距
+        contPadding:{}, //列表填充
         itemPadding:{}, //商品填充
-        contentColor:'',
-
-
         contBgColor: '#f8f8f8',
         contRadius: '10',
         imageRadius: '10',
@@ -214,7 +190,6 @@
 
         //title
         titleFontStyle:{},
-        isShowTitle:'Y',
         recommendTitle: "",
         titleBgColor:'#fff',
         titleRadius:0,
@@ -233,25 +208,41 @@
       }),
 
       contMarginComp(){
-        return {
-          margin: this.getMarginAndPadding(this.bodyPadding,0),
-          backgroundColor: this.contentColor,
-          minHeight: this.layoutInfo.bodyMinHeightRpx + 'rpx'
-        }
+        return this.getMarginAndPadding(this.contMargin,0)
       },
 
       listMarginComp(){
+        return this.getMarginAndPadding(this.contPadding,{top:0, bottom:20, left:20, right:20})
+
+      },
+
+      hasDataComp(){
+        return this.isUserScrollData === 'Y'&& (this.prodList&& this.prodList.length > 0) && this.page_token === ''
+      },
+
+      //骨架
+      skeletonImageHeight(){
+        return parseInt(this.skeletonStyle.width);
+      },
+
+      skeletonStyle(){
+        return this.getContentStyle('ske');
+      },
+      //骨架
+
+      contProductImageHeight(){
+        return parseInt(this.contProductStyles.width);
+      },
+      contProductStyles(){
         return {
-          padding: this.getMarginAndPadding(this.listPadding,0),
+          ...this.getContentStyle(),
+          boxShadow: this.contShadow,
+          border: this.contBorder,
+          backgroundColor: this.contBgColor,
         }
       },
 
 
-      isTitleStatus(){
-        if(this.isShowTitle === 'N') return '';
-        else if(this.isShowTitle === 'D') return '为您推荐';
-        else  if(this.isShowTitle === 'Y') return  this.recommendTitle||'为您推荐'
-      },
     },
     watch: {
       container(value,oldValue) {
@@ -276,106 +267,112 @@
        * @param container {object} 业务组件对象自己
        */
       init(container) {
-        this.isShowTitle = gCPVal(container, 'isShowTitle', 'Y');
-        this.footerColor = gCPVal(container,'footerColor', '#ddd', {sKey:'footerColorStatus',fields:['footerColor']});
-
-        //营销标签
-        this.marketTags = gCPVal(container, "marketTags",[]);
+        this.marketTags = getContainerPropsValue(container, "content.marketTags",[]);
+        this.isShowTitle = getContainerPropsValue(container, 'content.isShowTitle', 'Y');
         if(typeof this.marketTags === 'string') this.marketTags = [this.marketTags];
-        this.isPlatformTags = gCPVal(container, "isPlatformTags",[]);
 
-        //基础属性
-        this.xnamespace = gCPVal(container, 'xnamespace', this.projectAttr.business_code||this.xnamespace);
-        this.sort = gCPVal(container, 'sort', "default");
-        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( 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( column_num === 3) {
-          this.skeNumber = 6;
-          this.page_size = 21;
-        }
+        this.column_num = getContainerPropsValue(container, 'content.column_num', 2);
+        if( this.column_num === 1) this.skeNumber = 10;
+        if( this.column_num === 2) this.skeNumber = 5;
+        if( this.column_num === 3) this.skeNumber = 6;
+        if(this.column_num === 3) this.page_size = 21;
+        else this.page_size = 20;
 
+        //商品设置
+        this.productConfig = this.getProductConfig(container);
 
         //title
-        this.recommendTitle = gCPVal(container, "recommendTitle", "为您推荐");
-        this.titleFontStyle = gCPVal(container,'titleStyle', [{
-          fontSize: '32rpx',
-          color: '#333',
-          bgColor:'#fff',
-          fontWeight: '500',
-        }], {sKey:'titleStyleStatus',fields:['titleStyle']});
-        this.titleBgColor =  this.titleFontStyle.bgColor;
-        if(Color(this.titleFontStyle.bgColor).isDark()) this.titleMoreBgColor = Color(this.titleBgColor).lighten(0.8).toString();
-        else if(Color(this.titleFontStyle.bgColor).isLight()) this.titleMoreBgColor = Color(this.titleBgColor).darken(0.2).toString();
-        this.titleRadius = gCPVal(container,'titleRadius', ['0'], {sKey:'titleRadiusStatus',fields:['titleRadius']})||0;
+        this.recommendTitle = getContainerPropsValue(container, "content.recommendTitle", "为您推荐");
+        let titleStyle = getContainerPropsValue(container, 'content.titleStyle', {});
+        if(titleStyle.bgColor) {
+          this.titleBgColor = titleStyle.bgColor;
+          this.titleMoreBgColor = Color(this.titleBgColor).lighten(0.25).toString();
+        }
+        else {
+          this.titleBgColor = '#fff';
+          this.titleMoreBgColor = '#eee'
+        }
+        this.titleFontStyle = {
+          color: titleStyle.color || '#333',
+          fontSize: titleStyle.fontSize|| '26rpx',
+          fontWeight:titleStyle.fontWeight || 500
+        };
+        this.titleRadius = getContainerPropsValue(container, "content.titleRadius", '0');
 
+        //列表样式
+        this.contPadding = getContainerPropsValue(container, "content.contPadding", {});
+        this.rowSpacing = Number(getContainerPropsValue(container, "content.rowSpacing", 20));
+        this.columnSpacing = Number(getContainerPropsValue(container, "content.columnSpacing", 20));
+
+        //content
+        this.contMargin  = getContainerPropsValue(container, "content.contMargin", {});
+        this.itemPadding = getContainerPropsValue(container, "content.itemPadding", {});
+        this.imageRadius = getContainerPropsValue(container, "content.imageRadius", '10');
+        this.contRadius = getContainerPropsValue(container, "content.contRadius", '10');
+        this.contBgColor = getContainerPropsValue(container, "content.contBgColor", '#f8f8f8');
+        this.brandColor = getContainerPropsValue(container, "content.brandColor", '#999');
+        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.contSpacing = Number(getContainerPropsValue(container, "content.contSpacing", '20'));
+        this.contStyle = getContainerPropsValue(container, "content.contStyle", {});
+        let contStyle = getContainerPropsValue(container, 'content.contStyle', {});
+        this.itemFontStyle = {
+          color: contStyle.color || '#333',
+          fontSize: contStyle.fontSize|| '28rpx',
+          fontWeight:contStyle.fontWeight || 'normal'
+        };
+        this.contStyleBorder = getContainerPropsValue(container, 'content.contBorder', {})
 
-        //品牌样式
-        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']});
 
+        //高级属性
+        this.xnamespace = getContainerPropsValue(container, "content.xnamespace", this.projectAttr.business_code);
+        this.productInfoPath = getContainerPropsValue(container, "content.productInfoPath", {value: ""}).value;
+        this.isCityFilter = getContainerPropsValue(container, "content.isCityFilter", "N");
+        this.isUserScrollData = getContainerPropsValue(container, "content.isUserScrollData", "N");
+      },
 
-        //列表样式
-        this.bodyPadding = gCPVal(container,'contMargin', [0], {sKey:'contMarginStatus',fields:['contMargin'],isPMR: true});
-        this.listPadding = gCPVal(container,'contPadding', [{top:0, bottom:16, left:16, right:16},{top:0, bottom:20, left:20, right:20}], {sKey:'contPaddingStatus',fields:['contPadding'],isPMR: true});
-        this.contentColor = gCPVal(container,'contentColor', '#f8f8f8', {sKey:'contentColorStatus',fields:['contentColor']});
+      getContentStyle(type='cont') {
+        //总宽度
+        let maxW = uni.getSystemInfoSync().safeArea.width * this.$pxNum;
 
-        //商品样式
-        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']}));
-        this.contRadius = gCPVal(container,'contRadius', [this.gStyleValue.radius,'10'], {sKey:'contRadiusStatus',fields:['contRadius']})||0;
-        this.imageRadius = gCPVal(container,'imageRadius', [this.gStyleValue.radius/2,'0'], {sKey:'imageRadiusStatus',fields:['imageRadius']})||0;
-        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.contSpacing = gCPVal(container,'contSpacing', [16,20], {sKey:'contStyleStatus',fields:['contSpacing','contStyle']});
-        this.itemFontStyle = gCPVal(container, 'contStyle', {
-          color:'#333',
-          fontWeight:'normal'
-        },{sKey:'contStyleStatus',fields:['contSpacing','contStyle']});
+        //外边距
+        let outMargin = this.getPMValue(this.contMargin,'LR',0) //(Number(this.checkValue(this.contMargin.left, 0)) + Number(this.checkValue(this.contMargin.right, 0)))
 
+        //列表填充
+        let outPadding = this.getPMValue(this.contPadding,'LR', 20);//(Number(this.checkValue(this.contPadding.left, 20)) + Number(this.checkValue(this.contPadding.right, 20)))
 
-        //商品样式关联属性（背景与边框）
-        //{ 'contBgColorStatus':['contBgColor'],'contBorder':['contBorder','bs']}
-        const sValue = "{\"border\":0,\"backgroundColor\":\"#fff\"}";
-        let itemBgcColoStyle = this.getRelationStatus(container,'productStyle',{ contBgColorStatus:['contBgColor'],contBorder:['contBorder', 'bs']},sValue);
-        this.contBgColor = gCPVal(container, 'contBgColor', ['#fff'], {sKey: 'contBgColorStatus', cusFields: ['productStyle','backgroundColor',itemBgcColoStyle]});
-        this.contBorder = gCPVal(container, 'contBorder', [{color: '#eee',width: '0',style: 'solid'}], {isBorder: true, cusFields: ['productStyle','border',itemBgcColoStyle]});
-        this.contStyleBorder = gCPVal(container, 'contBorder', [{color: '#eee',width: '0',style: 'solid'}], {isBorder: true, isBsWidth: true, cusFields: ['productStyle','border',itemBgcColoStyle]});
+        //间距设置
+        if(this.$xdUniHelper.checkVarType(this.columnSpacing) === 'string') this.columnSpacing = Number(this.columnSpacing);
+        let columnSpacing = (this.columnSpacing * (this.column_num-1)); //公式:列数量 * 边距 + 边距
 
+        //item内容填充
+        let paddinRL = this.getPMValue(this.itemPadding,'LR',20)*this.column_num;//(Number(this.checkValue(this.itemPadding.left, 20)) + Number(this.checkValue(this.itemPadding.right, 20))) * this.column_num;
 
+        //预览模式有两个像素边距
+        let isPreview = 0;
 
+        //边框
+        let borderRL = 0;
+        if(this.contStyleBorder.type === 'Y') {
+          if(this.contStyleBorder.value && this.contStyleBorder.value.width !== undefined) {
+            borderRL = Number(this.contStyleBorder.value.width) * 2;
+          }
+        }
+        if(type === 'ske') borderRL = 0;
+        borderRL = borderRL * this.column_num;
 
-        //商品设置
-        let compConfig = gCPVal(container, "compConfig", null);
-        let tagsKeys= this.getProductTagsKeys(compConfig,container)
-        this.need_show_tags = this.getProductTagsParams(compConfig,tagsKeys);
+        let otherWidth = outMargin + outPadding + columnSpacing + isPreview + paddinRL + borderRL;
 
-        //高级属性
-        this.productConfig = this.getProductConfig(container,{cartStyle:'icongouwuche-01'});
-        this.productInfoPath = gCPVal(container, "productInfoPath", {value: ""}).value;
-        this.isCityFilter = gCPVal(container, "isCityFilter", "N");
-        this.isUserScrollData = gCPVal(container, "isUserScrollData", "N");
-        this.isInitLoaded = true;
+        return {
+          marginTop: this.rowSpacing + 'rpx',
+          width: (maxW - otherWidth)/this.column_num + 'rpx',
+          borderRadius: this.contRadius + 'rpx',
+          boxShadow: '0 0 10rpx rgba(0,0,0,.08)',
+          padding: this.getMarginAndPadding(this.itemPadding, 20),
+          backgroundColor: 'rgba(255,255,255,.8)'
+        };
       },
 
-
       getItemData(cellIndex,data){
         let list = this.$xdUniHelper.cloneDeep(data);
         return list.filter((it,index) => {
@@ -397,7 +394,6 @@
           market_tags: this.marketTags.join(','),
           city_code: this.isCityFilter === 'Y' ? this.stateCity.city_code : '',
           random_score_seed: this.random_score_seed,
-          need_show_tags: this.need_show_tags.join(),
         }
         if(this.productConfig.isShowDiscount==='Y'){
           data.is_show_uprice=this.$xdUniHelper.multiplyFloatNumber(this.productConfig.differ,100)
@@ -405,51 +401,23 @@
           data.is_show_uprice=-1
         }
 
-        //设置平台标签
-        if(this.isPlatformTags.length > 0){
-          data['partner_product_tags'] = this.isPlatformTags.join(',')
-        }
-
         jfbRootExec('getRecommendMallProductList', {
           vm: this,
           data: data
         }).then(res => {
-
-          let list = this.$xdUniHelper.cloneDeep(res.list||[]).map((item,index) => {
-            item['thumb'] = item.thumb ? getServiceUrl(item['thumb'], "size3") : "";
-            item['is_poster'] = 'N';
-            return item;
-          });
-
-          //预览模式设置标签
-          if(this.$configProject['isPreview']){
-            this.prodList = list.map(item=>{
+          this.prodList = (this.prodList||[]).concat(res.list.map(item => {
+            if(this.$configProject['isPreview']){
               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){
-                let fiterTags = this.$xdUniHelper.cloneDeep(this.need_show_tags);
-                item.tags = item.tags.filter(tag=>{
-                  return fiterTags.includes(tag.type)
-                })
-              }
-              return item;
-            })
-          }
-
-          //正式环境
-          else{
-            if(this.page_token === '1') this.prodList = list;
-            else this.prodList = (this.prodList||[]).concat(list);
-          }
-
+            }
+            item['thumb'] = getServiceUrl(item.thumb, "size3");
+            return item;
+          }));
           this.page_token = res.next_page_token;
-          this.hasNext = !!res.next_page_token;
         })
       },
 
@@ -481,9 +449,10 @@
       },
 
       onJfbReachBottom(){
-        if (this.$configProject['isPreview'] || this.isUserScrollData === 'N') return;
+        if (this.$configProject['isPreview'] || this.isUserScrollData === 'N'
+        ) return;
 
-        if(this.hasNext) {
+        if(this.page_token){
           this.getList();
         }
       },