jufubao-base 1.0.196-beta101 → 1.0.196-beta102

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-base",
-  "version": "1.0.196-beta101",
+  "version": "1.0.196-beta102",
   "private": false,
   "description": "聚福宝业务组件基础插件包",
   "main": "index.js",

package/src/components/JfbBaseUserCenter/Attr.js

@@ -1,22 +1,6 @@
 'use strict';
 
-function oloTonNewBorAndSha(type,width,color, style=''){
-  if(type === 'Y') {
-    let def = {
-      type: 'Y',
-      value: {
-        width: width,
-        color:color,
-      }
-    }
-    if(style) def.value.style = style;
-    return def
-  }
-  return {
-    type: 'N',
-    value:null,
-  }
-}
+import {oldTonNewBorAndSha, checkValue} from '@/utils/AttrTools'
 
 /**
  * @description 当表单组件中有联动操作时候，使用方法进行返回
@@ -24,7 +8,11 @@ function oloTonNewBorAndSha(type,width,color, style=''){
 export default {
   style: [],
   content:(data)=>{
-    let defAddBtnBorder = oloTonNewBorAndSha()
+    let defContBorder = oldTonNewBorAndSha(data.contBorder, data.is_border,data.is_border_w ,data.is_border_c,'solid');
+    if(defContBorder.type === 'Y' && data.is_border ==='Y') {
+      data.is_border = 'N'
+    }
+
     return [
       {
         label: '',
@@ -293,51 +281,7 @@ export default {
         },
         value: data['addBtnBorder'] || {},
       },
-      //=====属性已废弃(不能删除，已隐藏)====
-      {
-        ele: 'title',
-        label: '边框设置',
-        size: 'small',
-        groupKey:'style',
-        hidden: true
-      },
-      {
-        label: '是否有边框:',
-        ele: 'xd-radio',
-        valueKey: 'is_border',
-        groupKey:'style',
-        value: data['is_border'] || 'N',
-        placeholder: '请选择是否有边框',
-        multiple: false,
-        className: 'input80',
-        hidden: true,
-        list: [
-          {label: '是', value: 'Y'},
-          {label: '否', value: 'N'},
-        ]
-      },
-      data['is_border'] === 'Y' && {
-        label: '边框颜色:',
-        ele: 'xd-color',
-        valueKey: 'is_border_c',
-        groupKey:'style',
-        value: data['is_border_c'] || '',
-        placeholder: '请选择边框颜色',
-        classNmae: 'input80',
-        hidden: true
-      },
-      data['is_border'] === 'Y' && {
-        label: '边框大小:',
-        ele: 'el-input',
-        type: 'number',
-        valueKey: 'is_border_w',
-        groupKey:'style',
-        value: data['is_border_w'] || '',
-        placeholder: '请输入边框颜色',
-        className: 'input80',
-        hidden: true
-      },
-      //=====属性已废弃(不能删除，已隐藏)====
+
 
 
       {
@@ -415,10 +359,10 @@ export default {
         ele: 'xd-border',
         groupKey:'style',
         valueKey: 'contBorder',
-        value: data['contBorder'] || {},
+        value: defContBorder,
         labelInline:true,
         setting: {
-          selected:'N'
+          selected: defContBorder.type
         },
       },
       {
@@ -492,6 +436,51 @@ export default {
         },
       },
 
+      //=====属性已废弃(不能删除，已隐藏)====
+      {
+        ele: 'title',
+        label: '边框设置',
+        size: 'small',
+        groupKey:'style',
+        hidden: true
+      },
+      {
+        label: '是否有边框:',
+        ele: 'xd-radio',
+        valueKey: 'is_border',
+        groupKey:'style',
+        value: data['is_border'] || 'N',
+        placeholder: '请选择是否有边框',
+        multiple: false,
+        className: 'input80',
+        hidden: true,
+        list: [
+          {label: '是', value: 'Y'},
+          {label: '否', value: 'N'},
+        ]
+      },
+      {
+        label: '边框颜色:',
+        ele: 'xd-color',
+        valueKey: 'is_border_c',
+        groupKey:'style',
+        value: data['is_border_c'] || '',
+        placeholder: '请选择边框颜色',
+        classNmae: 'input80',
+        hidden: true
+      },
+      {
+        label: '边框大小:',
+        ele: 'el-input',
+        type: 'number',
+        valueKey: 'is_border_w',
+        groupKey:'style',
+        value: data['is_border_w'] || '',
+        placeholder: '请输入边框颜色',
+        className: 'input80',
+        hidden: true
+      },
+      //=====属性已废弃(不能删除，已隐藏)====
 
 
       {

package/src/components/JfbBaseUserCenter/JfbBaseUserCenter.vue

@@ -35,7 +35,7 @@
           :style="{
             borderRadius: radius + 'rpx',
             background: backgroundColor,
-            border: borderBox,
+            border: borderBoxComp,
             marginTop: rowSpacing + 'rpx',
             padding:contentPaddingComp,
             boxShadow: contShadow
@@ -84,31 +84,23 @@
     mixins: [componentsMixins,extsMixins,JfbBaseUserCenterMixin],
     computed: {
       titleMarginComp(){
-        let str = `${this.checkValue(this.titleMargin.top, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.titleMargin.right, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.titleMargin.bottom, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.titleMargin.left, 0)}rpx`;
         return {
-          padding: str,
+          padding: this.getMarginAndPadding(this.titleMargin, 0),
         }
       },
       outPadding() {
-        let str = `${this.checkValue(this.bodyPadding.top, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.bodyPadding.right, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.bodyPadding.bottom, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.bodyPadding.left, 0)}rpx`;
-        return str
+        return this.getMarginAndPadding(this.bodyPadding,0)
       },
       outMargin() {
-        let str = `${this.checkValue(this.bodyMargin.top, 20)}rpx`;
-        str = `${str} ${this.checkValue(this.bodyMargin.right, 20)}rpx`;
-        str = `${str} ${this.checkValue(this.bodyMargin.bottom, 20)}rpx`;
-        str = `${str} ${this.checkValue(this.bodyMargin.left, 20)}rpx`;
-        return str
+        return this.getMarginAndPadding(this.bodyMargin, 20)
       },
-      borderBox() {
-        if (this.is_border === 'Y') return `${this.is_border_w}rpx ${this.is_border_s} ${this.is_border_c}`;
-        else return '0';
+      borderBoxComp() {
+        return this.getBorderCompatibleOldStyle(this.contBorder, {
+          color: this.is_border_c,
+          width: this.is_border_w,
+          type: this.is_border,
+          style: 'solid'
+        })
       },
       titleStyleComp(){
         return {
@@ -152,11 +144,7 @@
         }
       },
       contentPaddingComp(){
-        let str = `${this.checkValue(this.contentPadding.top, 40)}rpx`;
-        str = `${str} ${this.checkValue(this.contentPadding.right, 40)}rpx`;
-        str = `${str} ${this.checkValue(this.contentPadding.bottom, 40)}rpx`;
-        str = `${str} ${this.checkValue(this.contentPadding.left, 40)}rpx`;
-        return str
+        return this.getMarginAndPadding(this.contentPadding, 40)
       },
     },
     data() {
@@ -196,6 +184,7 @@
         btnRadius:'40',
 
         //边框
+        contBorder:{},
         is_border: 'Y',
         is_border_w: 0,
         is_border_c: '',
@@ -258,18 +247,13 @@
         this.btnTextColor = getContainerPropsValue(container, 'content.btnTextColor', '#fff');
         this.btnFontSize = getContainerPropsValue(container, 'content.btnFontSize',26);
         this.btnRadius =  getContainerPropsValue(container, 'content.btnRadius','40');
+
+        //边框兼容
         this.contBorder = getContainerPropsValue(container, 'content.contBorder', {});
         this.is_border = getContainerPropsValue(container, 'content.is_border', 'N');
         this.is_border_c = getContainerPropsValue(container, 'content.is_border_c', '#fff');
         this.is_border_w = getContainerPropsValue(container, 'content.is_border_w', 2);
-        this.is_border_s = 'solid';
-        if(this.contBorder.type === 'Y') {
-          this.is_border = 'Y';
-          if(this.contBorder.value && this.contBorder.value.width) this.is_border_w = this.contBorder.value.width;
-          if(this.contBorder.value && this.contBorder.value.color) this.is_border_c = this.contBorder.value.color;
-          if(this.contBorder.value && this.contBorder.value.style) this.is_border_s = this.contBorder.value.style;
 
-        }
         //链接
         this.add_url = getContainerPropsValue(container, 'content.add_url', {value: ''}).value;
         this.pwd_url = getContainerPropsValue(container, 'content.pwd_url', {value: ''}).value;

package/src/components/JfbBaseUserInfo/Attr.js

@@ -1,10 +1,22 @@
 'use strict';
+import {oldTonNewBorAndSha, checkValue} from '@/utils/AttrTools'
+
 /**
  * @description 当表单组件中有联动操作时候，使用方法进行返回
  */
 export default {
   style: [],
   content: (data)=>{
+    let defContBorder = oldTonNewBorAndSha(data.contBorder, data.is_border,data.is_border_w ,data.is_border_c,'solid');
+    if(defContBorder.type === 'Y' && data.is_border ==='Y') {
+      data.is_border = 'N'
+    }
+
+    let defContShadow = oldTonNewBorAndSha(data.contShadow, data.is_shadow,data.is_shadow_w ,data.is_shadow_bg);
+    if(defContShadow.type === 'Y' && data.is_shadow ==='Y') {
+      data.is_shadow = 'N'
+    }
+
     return [
       {
         label: '内容排版:',
@@ -101,10 +113,10 @@ export default {
         ele: 'xd-shadow',
         groupKey:'style',
         valueKey: 'contShadow',
-        value: data['contShadow'] || '',
+        value: defContShadow,
         labelInline:true,
         setting: {
-          selected: 'N'
+          selected: defContShadow.type
         },
         handleCustom({action, data}) {
           XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
@@ -122,10 +134,10 @@ export default {
         ele: 'xd-border',
         groupKey:'style',
         valueKey: 'contBorder',
-        value: data['contBorder'] || '',
+        value: defContBorder,
         labelInline:true,
         setting: {
-          selected:'N'
+          selected:defContBorder.type
         },
       },
       {
@@ -245,7 +257,7 @@ export default {
           {label: '否', value: 'N'},
         ]
       },
-      data['is_shadow'] === 'Y' && {
+      {
         label: '投影颜色:',
         ele: 'xd-color',
         valueKey: 'is_shadow_bg',
@@ -255,7 +267,7 @@ export default {
         classNmae: 'input80',
         hidden: true,
       },
-      data['is_shadow'] === 'Y' && {
+      {
         label: '投影范围:',
         groupKey:'style',
         ele: 'xd-site-select-list',
@@ -278,6 +290,8 @@ export default {
         },
         hidden: true,
       },
+
+      //=====属性已废弃(不能删除，已隐藏)====
       {
         ele: 'title',
         label: '边框设置',
@@ -300,7 +314,7 @@ export default {
           {label: '否', value: 'N'},
         ]
       },
-      data['is_border'] === 'Y' && {
+      {
         label: '边框颜色:',
         hidden: true,
         ele: 'xd-color',
@@ -310,7 +324,7 @@ export default {
         placeholder: '请选择边框颜色',
         classNmae: 'input80',
       },
-      data['is_border'] === 'Y' && {
+      {
         hidden: true,
         label: '边框大小:',
         ele: 'el-input',
@@ -321,7 +335,7 @@ export default {
         placeholder: '请输入边框颜色',
         className: 'input80',
       },
-      //=====属性已废弃====
+      //=====属性已废弃(不能删除，已隐藏)====
 
       0&&{
         label: '是否显示设置:',

package/src/components/JfbBaseUserInfo/JfbBaseUserInfo.vue

@@ -17,14 +17,7 @@
       <view class="x-line"></view>
       <view
         class="jfb-base-user-info__body-header"
-        :style="{
-          margin: marginComp,
-          background : backgroundColor,
-          padding: paddingComp,
-          boxShadow: shadow,
-          borderRadius: radius + 'rpx',
-          border: borderBox
-        }"
+        :style="[boxStyleComp]"
         v-if="userInfo !== null"
       >
         <view
@@ -78,20 +71,30 @@
     computed: {
       ...mapState(['jfbAuthorize']),
 
-      marginComp() {
-        let str = `${this.checkValue(this.margin.top, 20)}rpx`;
-        str = `${str} ${this.checkValue(this.margin.right, 20)}rpx`;
-        str = `${str} ${this.checkValue(this.margin.bottom, 20)}rpx`;
-        str = `${str} ${this.checkValue(this.margin.left, 20)}rpx`;
-        return str
-      },
-      paddingComp() {
-        let str = `${this.checkValue(this.padding.top, 20)}rpx`;
-        str = `${str} ${this.checkValue(this.padding.right, 20)}rpx`;
-        str = `${str} ${this.checkValue(this.padding.bottom, 20)}rpx`;
-        str = `${str} ${this.checkValue(this.padding.left, 20)}rpx`;
-        return str
+      boxStyleComp(){
+        let border = this.getBorderCompatibleOldStyle(this.contBorder, {
+          color: this.is_border_c,
+          width: this.is_border_w,
+          type: this.is_border,
+          style: 'solid'
+        })
+
+        let shadow = this.getShadowCompatibleOldStyle(this.contShadow, {
+          color: this.is_shadow_bg,
+          width: this.is_shadow_w,
+          type: this.is_shadow,
+        })
+        return {
+          margin: this.getMarginAndPadding(this.margin, 20),
+          background : this.backgroundColor,
+          padding: this.getMarginAndPadding(this.padding, 20),
+          boxShadow: shadow,
+          borderRadius: this.radius + 'rpx',
+          border: border,
+
+        }
       },
+
       shadow(){
         if(this.is_shadow === 'Y') return  `0 0 ${this.is_shadow_w}rpx ${this.is_shadow_bg}`;
         else return '0 0 0 rgba(0,0,0,0)';
@@ -100,6 +103,7 @@
         if (this.is_border === 'Y') return `${this.is_border_w}rpx ${this.is_border_s} ${this.is_border_c}`;
         else return '0';
       },
+
       nickNameStyle(){
         return {
           fontSize: this.nickStyle.fontSize || '32rpx',
@@ -135,15 +139,16 @@
         radius: 0,
 
         //投影
+        contShadow:{},
         is_shadow: 'N',
         is_shadow_bg: 0,
         is_shadow_w: 0,
 
         //边框
+        contBorder:{},
         is_border: 'N',
         is_border_w: 0,
         is_border_c: '',
-        is_border_s:'solid',
 
         //其他
         margin: {},
@@ -233,29 +238,17 @@
         this.imageColor = getContainerPropsValue(container, 'content.imageColor', '#333');
 
         //Shadow
-        this.contShadow = getContainerPropsValue(container, 'content.contShadow', {})
         this.is_shadow = getContainerPropsValue(container, 'content.is_shadow', 'N');
         this.is_shadow_bg = getContainerPropsValue(container, 'content.is_shadow_bg', '#fff');
         this.is_shadow_w = getContainerPropsValue(container, 'content.is_shadow_w', '10');
-        if(this.contShadow.type === 'Y') {
-          this.is_shadow = 'Y';
-          if(this.contShadow.value && this.contShadow.value.width) this.is_shadow_w = this.contShadow.value.width;
-          if(this.contShadow.value && this.contShadow.value.color) this.is_shadow_bg = this.contShadow.value.color;
-        }
+        this.contShadow = getContainerPropsValue(container, 'content.contShadow', {})
 
         //边框
-        this.contBorder = getContainerPropsValue(container, 'content.contBorder', {});
         this.is_border = getContainerPropsValue(container, 'content.is_border', 'N');
         this.is_border_c = getContainerPropsValue(container, 'content.is_border_c', '#fff');
         this.is_border_w = getContainerPropsValue(container, 'content.is_border_w', 0);
-        this.is_border_s = 'solid';
-        if(this.contBorder.type === 'Y') {
-          this.is_border = 'Y';
-          if(this.contBorder.value && this.contBorder.value.width) this.is_border_w = this.contBorder.value.width;
-          if(this.contBorder.value && this.contBorder.value.color) this.is_border_c = this.contBorder.value.color;
-          if(this.contBorder.value && this.contBorder.value.style) this.is_border_s = this.contBorder.value.style;
+        this.contBorder = getContainerPropsValue(container, 'content.contBorder', {});
 
-        }
 
         this.nickStyle = getContainerPropsValue(container, 'content.nickStyle', {});
         this.logoutStyle = getContainerPropsValue(container, 'content.logoutStyle', {});

package/src/components/JfbBaseUserOrder/Attr.js

@@ -1,5 +1,6 @@
 'use strict';
 import ICONS from '@/ICONS'
+import {oldTonNewBorAndSha, checkValue} from '@/utils/AttrTools'
 
 /**
  * @description 当表单组件中有联动操作时候，使用方法进行返回
@@ -7,6 +8,11 @@ import ICONS from '@/ICONS'
 export default {
   style: [],
   content: (data)=>{
+    let defContBorder = oldTonNewBorAndSha(data.contBorder, data.is_border,data.is_border_w ,data.is_border_c,'solid');
+    if(defContBorder.type === 'Y' && data.is_border ==='Y') {
+      data.is_border = 'N'
+    }
+
     return [
       {
         label: '',
@@ -337,7 +343,8 @@ export default {
         value: data['addBtnBorder'] || {},
         labelInline:true,
         setting: {
-          selected:'N'
+          selected:'N',
+          isDef: true
         },
       },
 
@@ -416,10 +423,10 @@ export default {
         ele: 'xd-border',
         groupKey:'style',
         valueKey: 'contBorder',
-        value: data['contBorder'] || {},
+        value: defContBorder,
         labelInline:true,
         setting: {
-          selected:'N'
+          selected:defContBorder.type
         },
       },
       {
@@ -463,7 +470,7 @@ export default {
         labelInline:true,
       },
 
-
+      //=====属性已废弃(不能删除，已隐藏)====
       {
         label: '是否有边框:',
         ele: 'xd-radio',
@@ -479,7 +486,7 @@ export default {
           {label: '否', value: 'N'},
         ]
       },
-      data['is_border'] === 'Y' && {
+      {
         label: '边框颜色:',
         ele: 'xd-color',
         groupKey:'style',
@@ -489,7 +496,7 @@ export default {
         placeholder: '请选择边框颜色',
         classNmae: 'input80',
       },
-      data['is_border'] === 'Y' && {
+      {
         label: '边框大小:',
         ele: 'el-input',
         type: 'number',
@@ -500,6 +507,7 @@ export default {
         placeholder: '请输入边框大小',
         className: 'input80',
       },
+      //=====属性已废弃(不能删除，已隐藏)====
 
       {
         label: '设置售后订单列表地址:',

package/src/components/JfbBaseUserOrder/JfbBaseUserOrder.vue

@@ -82,18 +82,10 @@
     mixins: [componentsMixins,extsMixins,JfbBaseUserOrderMixin],
     computed: {
       titleMarginComp(){
-        let padding = `${this.checkValue(this.titleMargin.top, 0)}rpx`;
-        padding = `${padding} ${this.checkValue(this.titleMargin.right, 0)}rpx`;
-        padding = `${padding} ${this.checkValue(this.titleMargin.bottom, 0)}rpx`;
-        padding = `${padding} ${this.checkValue(this.titleMargin.left, 0)}rpx`;
         return {
-          padding: padding
+          padding: this.getMarginAndPadding(this.titleMargin, 0)
         }
       },
-      borderComp() {
-        if (this.is_border === 'Y') return `${this.is_border_w}rpx solid ${this.is_border_c}`;
-        else return '0';
-      },
       titleStyleComp(){
         return {
           fontSize: this.titleStyle.fontSize || '28rpx',
@@ -102,19 +94,9 @@
         }
       },
       bodyStyleComp(){
-        let margin = `${this.checkValue(this.bodyMargin.top, 20)}rpx`;
-        margin = `${margin} ${this.checkValue(this.bodyMargin.right, 20)}rpx`;
-        margin = `${margin} ${this.checkValue(this.bodyMargin.bottom, 20)}rpx`;
-        margin = `${margin} ${this.checkValue(this.bodyMargin.left, 20)}rpx`;
-
-        let padding = `${this.checkValue(this.bodyPadding.top, 0)}rpx`;
-        padding = `${padding} ${this.checkValue(this.bodyPadding.right, 0)}rpx`;
-        padding = `${padding} ${this.checkValue(this.bodyPadding.bottom, 0)}rpx`;
-        padding = `${padding} ${this.checkValue(this.bodyPadding.left, 0)}rpx`;
-
         return {
-          margin,
-          padding,
+          margin: this.getMarginAndPadding(this.bodyMargin, 20),
+          padding: this.getMarginAndPadding(this.bodyPadding, 0),
           borderRadius: this.bodyRadius + 'rpx',
           backgroundColor: this.bodyBackgroundColor,
         }
@@ -127,6 +109,11 @@
           if(value.color) border['borderColor'] = value.color;
           if(value.style) border['borderStyle'] = value.style;
         }
+        if(this.addBtnBorder && this.addBtnBorder.type === 'N') {
+          border['borderWidth'] = 0;
+          border['borderColor'] = '';
+          border['borderStyle'] = ''
+        }
         let addBtnShadow = {};
         if(this.addBtnShadow && this.addBtnShadow.type === 'Y') {
           let value = this.addBtnShadow.value || {};
@@ -154,30 +141,20 @@
         }
       },
       contStyleComp(){
-        let borderStyle = 'solid';
-        let borderWidth = 0;
-        let borderColor = 'rgba(0,0,0,0)';
-        if(this.is_border === 'Y') {
-          if(this.is_border_w !== undefined) borderWidth = this.is_border_w;
-          if(this.is_border_c !== undefined) borderColor = this.is_border_c;
-        }
-        if(this.contBorder && this.contBorder.type === 'Y') {
-          let value = this.contBorder.value ||{};
-          if(value.width) borderWidth = value.width + 'rpx';
-          if(value.color) borderColor = value.color;
-          if(value.style) borderStyle = value.style;
-        }
-        let padding = `${this.checkValue(this.contPadding.top, 40)}rpx`;
-        padding = `${padding} ${this.checkValue(this.contPadding.right, 20)}rpx`;
-        padding = `${padding} ${this.checkValue(this.contPadding.bottom, 34)}rpx`;
-        padding = `${padding} ${this.checkValue(this.contPadding.left, 20)}rpx`;
+        let border = this.getBorderCompatibleOldStyle(this.contBorder, {
+          color: this.is_border_c,
+          width: this.is_border_w,
+          type: this.is_border,
+          style: 'solid'
+        })
+
         return {
           borderRadius: this.radius + 'rpx',
           backgroundColor: this.backgroundColor,
           marginTop: this.spacing + 'rpx',
-          border: `${borderWidth} ${borderStyle} ${borderColor}`,
+          border: border,
           boxShadow: this.contShadow,
-          padding
+          padding: this.getMarginAndPadding(this.contPadding,{top:40, bottom: 34, left: 20, right: 20})
         }
       }
     },

package/src/mixins/componentsMixins.js

@@ -171,7 +171,6 @@ export default {
     }
 
     //保存到vuex
-    console.log('setStyleCommon',this)
     this.setStyleCommon(this.styles);
 
     //初始化风格
@@ -207,24 +206,53 @@ export default {
   mounted() {
     let that = this;
     this.autoHideMask();
+
+    //调试模式设置值
+    let zIndex = 4;
+    if( this['hideMask'] === true) zIndex = -1;
+    if(this['closeMask'] === true)  zIndex = -1;
+    if(this['closeMask'] === false) zIndex = 4;
+    document.querySelector(':root').style.setProperty('--preview-z-index', zIndex);
+
+    //生产元素
+    if(this.$configProject.isPreview) {
+      if(zIndex ===-1) {
+        let parentRoot = document.querySelector(`.${this.cssRoot}`);
+        for(let i=0; i < 4;i++) {
+          let span =  document.createElement('span');
+          span.className = 'xd-preview-line xd-preview-line-' + i;
+          parentRoot.appendChild(span);
+        }
+      }
+
+    }
+
     if (this.$configProject.isPreview && this.selfMask !== true ) {
-      this.$nextTick(()=>{
-        function handle() {
-          let elx = that.$el.getElementsByClassName(`${that.cssRoot}__body`);
-          if (elx.length === 0) {
-            setTimeout(() => {
-              handle()
-            }, 50)
-          } else {
-            let len = elx.length;
-            for (let i = 0; i < len; i++) {
-              if (!elx.item(i).classList.contains('isGPreview')) {
-                elx.item(i).classList.add("isGPreview");
-              }
+      //启动关闭
+      if(this['closeMask'] === true) {
+        return;
+      }
+
+      function handle() {
+        let elx = that.$el.getElementsByClassName(`${that.cssRoot}__body`);
+        if (elx.length === 0) {
+          setTimeout(() => {
+            handle()
+          }, 50)
+        }
+        else {
+          let len = elx.length;
+          for (let i = 0; i < len; i++) {
+            if (!elx.item(i).classList.contains('isGPreview')) {
+              elx.item(i).classList.add("isGPreview");
             }
           }
         }
-        handle();
+      }
+      this.$nextTick(()=>{
+        setTimeout(()=>{
+          handle();
+        },200)
       });
     }
 
@@ -261,10 +289,13 @@ export default {
     autoHideMask(){
       if(this.$configProject.isPreview && this.hideMask === true){
         this.$nextTick(()=>{
-          let className = this.$el.classList;
-          if(!className.contains('gHideMask')) {
-            className.add("gHideMask")
-          }
+          setTimeout(()=>{
+            let className = this.$el.classList;
+            if(!className.contains('gHideMask')) {
+              className.add("gHideMask")
+            }
+          },200)
+
         })
       }
     },
@@ -459,26 +490,171 @@ export default {
       return Number(value || 0);
     },
 
+    /**
+     * @description 获取图片链接
+     * @param image
+     * @return {string}
+     */
+    getBgImage(image = {}){
+      let bg = 'none';
+      if(this.$xdUniHelper.checkVarType(image) === 'object') {
+        if(!this.$xdUniHelper.isEmpty(image)) {
+          return `url(${getServiceUrl(image.url)})`
+        }
+      }
+      return bg
+    },
+
+    //阴影样式生成
     getXdShadow(defaultObj, newObj){
       if(newObj.type === 'N' || this.$xdUniHelper.isEmpty(newObj)) return `0 0 0 rgba(0,0,0,0)`;
+      return this.getXdBorder(defaultObj,newObj,'shadow')
+    },
+
+    //边框样式生成
+    getXdBorder(defaultObj, newObj, type='border'){
+      if(newObj.type === 'N' || this.$xdUniHelper.isEmpty(newObj)) return `0`;
       let width = defaultObj.width;
       let color = defaultObj.color;
-      if(newObj.value !== null) {
-        if(newObj.value.width) width = newObj.value.width;
-        if(newObj.value.color) color  = newObj.value.color
-      }
+      let style = defaultObj.style || 'solid';
+      let value = newObj.value || {};
+      if(value.width) width = value.width;
+      if(value.color) color = value.color;
+      if(value.style) style = value.style;
+      if(type === 'border') return `${width}rpx ${style} ${color}`
       return `0 0 ${width}rpx ${color}`;
     },
 
-    getXdBorder(defaultObj, newObj){
-      if(newObj.type === 'N' || this.$xdUniHelper.isEmpty(newObj)) return `0`
-      let width = defaultObj.width;
-      let color = defaultObj.color;
-      if(newObj.value !== null) {
-        if(newObj.value.width) width = newObj.value.width
-        if(newObj.value.color) color  = newObj.value.color
+    getBorderCompatibleOldStyle(newObj={}, oldObj={}, type='border'){
+      let contWidth = 0;
+      let contColor = 'rgba(0.0.0.0)';
+      let contrStyle = 'solid';
+
+      if(oldObj.type === 'Y') {
+        if(oldObj.width !== undefined) contWidth = oldObj.width;
+        if(oldObj.color !== undefined) contColor = oldObj.color;
+      }
+      if(newObj.type === 'Y') {
+        let value = newObj.value || {};
+        if(value.color) contColor = value.color;
+        if(value.style) contrStyle = value.style;
+        if(value.width) contWidth = value.width;
+      }
+
+      if(type === 'border'){
+        if(oldObj.type === 'N' && newObj.type === 'N') return 0;
+        return `${contWidth}rpx ${contrStyle} ${contColor}`
+      }
+      return `0 0  ${contWidth}rpx ${contColor}` ;
+    },
+
+    getShadowCompatibleOldStyle(newShadow={},oldShadow={}){
+      return this.getBorderCompatibleOldStyle(newShadow,oldShadow, 'shadow')
+    },
+
+    /**
+     * @description 获取边框或投影宽度值
+     * @param newObj {Object} border|shadow
+     * @param width {number|string} 老模式宽
+     * @param type {string} 老模式宽是否启用 Y/N
+     * @return {number}
+     */
+    getBorOrShWidth(newObj={}, {width, type}) {
+      let tempWidth = 0;
+      if(type === 'Y' && width !== undefined) tempWidth = width;
+      if(newObj.type === 'Y') {
+        let value = newObj.value || {};
+        if(value.width !== undefined) tempWidth = value.width;
+      }
+      return Number(tempWidth);
+    },
+
+    /**
+     * @description 解析切换元素属性方法
+     * @param newObj
+     * @param fontSize {String} 默认字体大小， 格式：24rpx
+     * @param lineHeight {Number} 默认行高 格式：30
+     * @param color {String} 默认颜色
+     * @param bgColor {String} 默认背景色
+     * @param fontWeight {String} 字体粗线
+     * @param gradientColor {String} 渐变色 参考：https://www.colorzilla.com/gradient-editor/
+     * @param type {String} 获取样式类型： ''=>获取普通样式 act=>获取选中样式
+     * @return {{}}
+     */
+    getFontAndBgcStyle(newObj, {fontSize, lineHeight, color, bgColor, fontWeight,gradientColor},type='' ){
+      let temp = {};
+      let colorKey = 'color',
+        fontSizeKey='fontSize',
+        lineHeightKey = 'lineHeight',
+        fontWeightKey = 'fontWeight',
+        bgColorKey = 'bgColor',
+        gradientColorKey = 'gradientColor';
+      if(type === 'act') {
+        colorKey = `actColor`;
+        fontSizeKey='actFontSize';
+        lineHeightKey = 'actLineHeight';
+        fontWeightKey = 'actFontWeight';
+        bgColorKey = 'actBgColor';
+        gradientColorKey = 'actGradientColor';
+      }
+      if(newObj[colorKey] || color) temp['color'] = newObj[colorKey] || color;
+      if(newObj[fontSizeKey] || color) temp['fontSize'] = newObj[fontSizeKey] || fontSize;
+      if(newObj[lineHeightKey] || lineHeight) temp['lineHeight'] = (newObj[lineHeightKey] || lineHeight) + 'rpx';
+      if(newObj[fontWeightKey] || fontWeight) temp['fontWeight'] = newObj[fontWeightKey] || fontWeight;
+      if(newObj[bgColorKey] || bgColor) temp['backgroundColor'] = newObj[bgColorKey] || bgColor;
+      if(newObj[gradientColorKey] || gradientColor) temp['backgroundImage'] = newObj[gradientColorKey] || gradientColor;
+      return temp;
+
+    },
+
+    /**
+     * @description 数据
+     * @param marAndPadding {Object}
+     * @param defVale {Object|number}
+     */
+    getMarginAndPadding(marAndPadding, defVale){
+      let top = 0, left=0,bottom=0,right=0;
+      if(typeof defVale === 'number') {
+        top=defVale;
+        left=defVale;
+        bottom=defVale;
+        right=defVale;
+      }
+      if(this.$xdUniHelper.checkVarType(defVale) === 'object') {
+        if(defVale.top !== undefined) top = defVale.top;
+        if(defVale.right !== undefined) right = defVale.right;
+        if(defVale.bottom !== undefined) bottom = defVale.bottom;
+        if(defVale.left !== undefined) left = defVale.left;
+      }
+      let str = `${this.checkValue(marAndPadding.top, top)}rpx`;
+      str = `${str} ${this.checkValue(marAndPadding.right, right)}rpx`;
+      str = `${str} ${this.checkValue(marAndPadding.bottom, bottom)}rpx`;
+      str = `${str} ${this.checkValue(marAndPadding.left, left)}rpx`;
+      return str
+    },
+
+    /**
+     * @description 获取商品显示规则
+     * @param container
+     * @return {{isAddCart: *, isShowDiscount: *, isPrice: *, is_show_brand: *, showActivityPrice: *, isShowTag: *, differ: *}}
+     */
+    getProductConfig(container){
+      let is_show_brand = getContainerPropsValue(container, "content.is_show_brand", "N");
+      let isPrice = getContainerPropsValue(container, "content.isPrice", "Y");
+      let isShowDiscount = getContainerPropsValue(container, "content.isShowDiscount", "Y");
+      let differ = getContainerPropsValue(container, "content.differ", 1);
+      let showActivityPrice = getContainerPropsValue(container, "content.showActivityPrice", "N");
+      let isShowTag = getContainerPropsValue(container, "content.isShowTag", "Y");
+      let isAddCart = getContainerPropsValue(container, "content.isAddCart", "N");
+      return {
+        isShowDiscount: isShowDiscount,
+        isPrice: isPrice,
+        isAddCart: isAddCart,
+        is_show_brand: is_show_brand,
+        showActivityPrice:showActivityPrice,
+        isShowTag : isShowTag,
+        differ: differ,
       }
-      return `${width}rpx solid ${color}`;
     },
 
     getUrlCallback(path){
@@ -591,21 +767,20 @@ export default {
             return redirect_data.path
           }
           else {
-            return `//${projectAttr.host}/${redirect_data.frontPath}`
+            return `//${projectAttr.host}${redirect_data.frontPath}`
           }
 
         }
         //#endif
 
         //#ifdef MP-WEIXIN
-
-        let dir = this.getUrlHasSpStrDIR(redirect_data.path);
+        let dir = redirect_data.dir;
         if(redirect_data['appType'] === 'wxmp'){
           if(projectAttr.deploy_dir === dir) return redirect_data.path;
           else return null;
         }
         else if(redirect_data['appType'] === 'h5'){
-
+          return `https://${projectAttr.host}${redirect_data.frontPath}`
         }
         else return null;
         //#endif