jufubao-base 1.0.132-beta2 → 1.0.132

package/src/components/JfbBaseUserCenter/Attr.js

@@ -11,14 +11,12 @@ export default {
         label: '',
         ele: 'slot',
         slot: 'is_reference_title',
-        groupKey:'advanced',
       },
       {
         label: '卡券自定义名称:',
         ele: 'el-input',
         type: 'text',
         valueKey: 'cardName',
-        groupKey:'content',
         value: data['cardName'] || '',
         placeholder: '请输入卡券自定义名称',
         className: 'input80',
@@ -38,23 +36,45 @@ export default {
         label: '卡券文字颜色:',
         ele: 'xd-color',
         valueKey: 'cardNameColor',
-        groupKey:'style',
         value: data['cardNameColor'] || null,
         placeholder: '请选择卡券文字颜色',
         classNmae: 'input80',
       },
-
       {
         ele: 'title',
         label: '整体风格',
-        size: 'small',
-        groupKey:'style',
+        size: 'small', //default/mini/small
+      },
+      {
+        label: '外边距:',
+        ele: 'xd-margin-padding',
+        valueKey: 'bodyMargin',
+        value: data['bodyMargin'] || null,
+        disabled: false,
+        setting: {
+          type: 'margin',
+        },
+        placeholder: '请设置外边距',
+        inline: false,
+        notice: '设置外边距，<span style="color: red">单位：像素</span>。默认值：0像素',
+      },
+      {
+        label: '填充:',
+        ele: 'xd-margin-padding',
+        valueKey: 'bodyPadding',
+        value: data['bodyPadding'] || null,
+        disabled: false,
+        setting: {
+          type: 'padding',
+        },
+        placeholder: '请设置外边距',
+        inline: false,
+        notice: '设置填充值，<span style="color: red">单位：像素</span>。默认值：0像素',
       },
       {
         label: '背景颜色:',
         ele: 'xd-color',
         valueKey: 'bodyBackgroundColor',
-        groupKey:'style',
         value: data['bodyBackgroundColor'] || null,
         placeholder: '请选择背景颜色',
         classNmae: 'input80',
@@ -63,7 +83,6 @@ export default {
         label: '圆角设置:',
         ele: 'xd-site-select-list',
         valueKey: 'bodyRadius',
-        groupKey:'style',
         value: data['bodyRadius'],
         placeholder: '请选择圆角设置',
         multiple: false,
@@ -78,55 +97,16 @@ export default {
             });
         },
       },
-      {
-        label: '间距:',
-        ele: 'el-input',
-        type: 'number',
-        valueKey: 'padding',
-        groupKey:'style',
-        value: data.padding || '',
-        placeholder: '请输入间距',
-        className: 'input60',
-        inline: false,
-        notice: '设置间距，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">20</span>像素',
-      },
-      {
-        label: '外边距:',
-        ele: 'xd-margin-padding',
-        valueKey: 'bodyMargin',
-        groupKey:'style',
-        value: data['bodyMargin'] || null,
-        setting: {
-          type: 'margin',
-        },
-        placeholder: '请设置外边距',
-        inline: false,
-        notice: '设置外边距，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">20</span>像素',
-      },
-      {
-        label: '填充:',
-        ele: 'xd-margin-padding',
-        valueKey: 'bodyPadding',
-        groupKey:'style',
-        value: data['bodyPadding'] || null,
-        setting: {
-          type: 'padding',
-        },
-        placeholder: '请设置外边距',
-        inline: false,
-        notice: '设置填充值，<span style="color: red">单位：像素</span>。默认值：0像素',
-      },
       {
         ele: 'title',
         label: '内容区域风格',
-        size: 'small',
-        groupKey:'style',
+        size: 'small', //default/mini/small
       },
+
       {
         label: '背景颜色:',
         ele: 'xd-color',
         valueKey: 'backgroundColor',
-        groupKey:'style',
         value: data['backgroundColor'] || null,
         placeholder: '请选择背景颜色',
         classNmae: 'input80',
@@ -135,7 +115,6 @@ export default {
         label: '按钮背景颜色:',
         ele: 'xd-color',
         valueKey: 'btnBgColor',
-        groupKey:'style',
         value: data['btnBgColor'] || null,
         placeholder: '请选择按钮背景颜色',
         classNmae: 'input80',
@@ -144,7 +123,6 @@ export default {
         label: '按钮文字颜色:',
         ele: 'xd-color',
         valueKey: 'btnTextColor',
-        groupKey:'style',
         value: data['btnTextColor'] || null,
         placeholder: '请选择按钮文字颜色',
         classNmae: 'input80',
@@ -153,7 +131,6 @@ export default {
         label: '按钮文字大小:',
         ele: 'xd-site-select-list',
         valueKey: 'btnFontSize',
-        groupKey:'style',
         value: data['btnFontSize'] || '',
         placeholder: '请选择按钮文字大小',
         multiple: false,
@@ -170,18 +147,24 @@ export default {
             });
         },
       },
-
+      {
+        label: '间距:',
+        ele: 'el-input',
+        type: 'number',
+        valueKey: 'padding',
+        value: data.padding || '',
+        placeholder: '请输入间距',
+        className: 'input80',
+      },
       {
         ele: 'title',
         label: '边框设置',
-        size: 'small',
-        groupKey:'style',
+        size: 'small', //default/mini/small
       },
       {
         label: '是否有边框:',
         ele: 'xd-radio',
         valueKey: 'is_border',
-        groupKey:'style',
         value: data['is_border'] || 'N',
         placeholder: '请选择是否有边框',
         multiple: false,
@@ -195,7 +178,6 @@ export default {
         label: '边框颜色:',
         ele: 'xd-color',
         valueKey: 'is_border_c',
-        groupKey:'style',
         value: data['is_border_c'] || '',
         placeholder: '请选择边框颜色',
         classNmae: 'input80',
@@ -205,7 +187,6 @@ export default {
         ele: 'el-input',
         type: 'number',
         valueKey: 'is_border_w',
-        groupKey:'style',
         value: data['is_border_w'] || '',
         placeholder: '请输入边框颜色',
         className: 'input80',
@@ -214,7 +195,6 @@ export default {
         label: '内容圆角设置:',
         ele: 'xd-site-select-list',
         valueKey: 'radius',
-        groupKey:'style',
         value: data['radius'] || '10',
         placeholder: '请选择内容圆角设置',
         multiple: false,
@@ -230,10 +210,14 @@ export default {
         },
       },
       {
-        label: '添加卡券路径:',
-        ele: 'xd-select-pages-path',
-        valueKey: 'add_url',
-        groupKey:'advanced',
+        ele: 'title',
+        label: '其他设置',
+        size: 'small', //default/mini/small
+      },
+      {
+        label: '添加卡券路径:', //label
+        ele: 'xd-select-pages-path', //package 名称
+        valueKey: 'add_url', //form[valueKey]
         placeholder: '请选择添加卡券路径',
         value: data['add_url'] || null,
         setting: {
@@ -245,10 +229,9 @@ export default {
         inline: false,
       },
       {
-        label: '设置支付密码路径:',
-        ele: 'xd-select-pages-path',
-        valueKey: 'pwd_url',
-        groupKey:'advanced',
+        label: '设置支付密码路径:', //label
+        ele: 'xd-select-pages-path', //package 名称
+        valueKey: 'pwd_url', //form[valueKey]
         placeholder: '请选择设置支付密码路径',
         value: data['pwd_url'] || null,
         setting: {
@@ -260,10 +243,9 @@ export default {
         inline: false,
       },
       {
-        label: '进入我的票券路径:',
-        ele: 'xd-select-pages-path',
-        valueKey: 'card_url',
-        groupKey:'advanced',
+        label: '进入我的票券路径:', //label
+        ele: 'xd-select-pages-path', //package 名称
+        valueKey: 'card_url', //form[valueKey]
         placeholder: '请选择进入我的票券路径',
         value: data['card_url'] || null,
         setting: {
@@ -278,7 +260,6 @@ export default {
         label: '',
         ele: 'slot',
         slot: 'is_reference',
-        groupKey:'advanced',
       },
     ].filter(i=>i)
   },

package/src/components/JfbBaseUserCenter/JfbBaseUserCenter.vue

@@ -13,13 +13,11 @@
       <view class="jfb-base-user-center__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-user-center__body">
-      <view class="x-line"></view>
-      <view class="user-center-box" :style="{padding: outMargin}">
-        <view :style="{borderRadius: bodyRadius + 'rpx', backgroundColor:bodyBackgroundColor, padding:outPadding}">
+    <view class="jfb-base-user-center__body" :style="{padding: outMargin}">
+      <view :style="{borderRadius: bodyRadius + 'rpx', backgroundColor:bodyBackgroundColor, padding:outPadding}">
         <view class="my-card-add__btn">
           <view :style="{color: cardNameColor}">我的{{cardName}}</view>
-          <view :style="{borderColor:btnBoxColor || mainColor,color:btnBoxColor || mainColor}" @click="handleToLink(add_url)">添加{{cardName}}</view>
+          <view :style="{borderColor:mainColor,color:mainColor}" @click="handleToLink(add_url)">添加{{cardName}}</view>
         </view>
         <view
           class="my-card-add__link"
@@ -50,7 +48,6 @@
           </view>
         </view>
       </view>
-      </view>
     </view>
   </view>
 </template>
@@ -63,7 +60,7 @@
   import extsMixins from "@/mixins/extsMixins"
   import { getContainerPropsValue } from "@/utils/xd.base";
   const color = require('color');
-
+  
   export default {
     name: "JfbBaseUserCenter",
     components: {
@@ -72,18 +69,10 @@
     mixins: [componentsMixins,extsMixins,JfbBaseUserCenterMixin],
     computed: {
       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.bodyPadding.top || 20}rpx ${this.bodyPadding.right || 20}rpx ${this.bodyPadding.bottom || 20}rpx ${this.bodyPadding.left || 20}rpx`
       },
       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.bodyMargin.top || 0}rpx ${this.bodyMargin.right || 0}rpx ${this.bodyMargin.bottom || 0}rpx ${this.bodyMargin.left || 0}rpx`
       },
       borderBox() {
         if (this.is_border === 'Y') return `${this.is_border_w}rpx solid ${this.is_border_c}`;
@@ -96,7 +85,7 @@
         pwd_url: '',
         card_url:'',
         cardName: '',
-
+  
         //基础
         color: '#333',
         backgroundColor: 'rgba(0,0,0,0)',
@@ -105,19 +94,18 @@
         btnBgColor: '',
         btnTextColor: '',
         btnFontSize: 24,
-
+  
         //边框
         is_border: 'Y',
         is_border_w: 0,
         is_border_c: '',
-
+  
         //整体
-        bodyPadding: {},
+        bodyPadding: { top: 20, left: 20, right: 20, bottom: 20 },
         bodyRadius: 0,
         bodyBackgroundColor: 'rgba(0,0,0,0)',
-        bodyMargin:{},
+        bodyMargin: {top: 0, left: 0, right: 0, bottom: 0},
         cardNameColor: '#333',
-        btnBoxColor:'',
       }
     },
     watch: {
@@ -137,39 +125,38 @@
           url: type ? `${path}?type=${type}` : path
         })
       },
-
+      
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
        */
       init(container) {
-
+        
         //整体
-        this.bodyMargin = getContainerPropsValue(container, 'content.bodyMargin', {});
+        this.bodyMargin = getContainerPropsValue(container, 'content.bodyMargin', {top: 0, left: 0, right: 0, bottom: 0});
         this.bodyRadius = getContainerPropsValue(container, 'content.bodyRadius', 0);
         this.bodyBackgroundColor = getContainerPropsValue(container, 'content.bodyBackgroundColor', 'rgba(0,0,0,0)');
-        this.bodyPadding = getContainerPropsValue(container, 'content.bodyPadding', {});
-
+        this.bodyPadding = getContainerPropsValue(container, 'content.bodyPadding', {top: 20, left: 20, right: 20, bottom: 20});
+        
         //基础
         this.radius = getContainerPropsValue(container, 'content.radius', 0);
         this.color = getContainerPropsValue(container, 'content.textColor', '#333');
         this.backgroundColor = getContainerPropsValue(container, 'content.backgroundColor', '#f8f8f8');
         this.padding = getContainerPropsValue(container, 'content.padding', 20);
         this.btnBgColor = getContainerPropsValue(container, 'content.btnBgColor', this.mainGradient);
-        this.btnTextColor = getContainerPropsValue(container, 'content.btnTextColor', '#fff');
+        this.btnTextColor = getContainerPropsValue(container, 'content.btnTextColor', '#333');
         this.btnFontSize = getContainerPropsValue(container, 'content.btnFontSize',26);
         this.cardNameColor = getContainerPropsValue(container, 'content.cardNameColor','#333');
-        this.btnBoxColor = getContainerPropsValue(container, 'content.cardNameColor','');
         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.add_url = getContainerPropsValue(container, 'content.add_url', {value: ''}).value;
         this.pwd_url = getContainerPropsValue(container, 'content.pwd_url', {value: ''}).value;
         this.card_url = getContainerPropsValue(container, 'content.card_url', {value: ''}).value;
         this.cardName = getContainerPropsValue(container, 'content.cardName', '卡券');
-
+        
       },
     }
   }
@@ -184,14 +171,14 @@
 
     }
   }
-
+  
   .my-card-add {
     &__btn {
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-size: unit(28, rpx);
-
+    
       & > view:nth-child(2) {
         width: unit(200, rpx);
         height: unit(60, rpx);
@@ -202,33 +189,33 @@
         text-align: center;
       }
     }
-
+  
     &__link {
       border-radius: unit(20, rpx);
       border: 1px solid #EEEEEE;
       padding: unit(40, rpx);
-
+      
       & > view:first-child {
         margin-top: 0!important;
       }
-
+    
       &-num {
         display: flex;
         align-items: center;
         justify-content: space-between;
         font-size: unit(28, rpx);
-
+      
         & > view:nth-child(1) {
           color: #808080;
         }
-
+      
         & > view:last-child {
           color: #808080;
           display: flex;
           align-items: center;
         }
       }
-
+    
       &-btn {
         width: 100%;
         height: unit(80, rpx);

package/src/components/JfbBaseUserCenter/JfbBaseUserCenterLess.less

@@ -13,8 +13,9 @@
 
 //start
 .jfb-base-user-center {
+  border: 1px dashed rgba(0, 0, 0, 0);
   box-sizing: border-box;
-  min-height: unit(100, rpx);
+  min-height: unit(50, rpx);
 
   &__body{
       position: relative;
@@ -22,21 +23,21 @@
       z-index: 2
   }
 
-  &.editx,&:hover {
+  &.editx {
     position: relative;
-    z-index: 3;
-    &::after {
-      border: 2rpx dashed blue;
-      content: " ";
-      position: absolute;
-      top:0;
-      left:0;
-      bottom:0;
-      right:0;
-      z-index: 4;
-      cursor: pointer;
-    }
+    border: 1px dashed blue;
+    box-sizing: border-box;
+    z-index: 3
+
+  }
 
+  &:hover {
+    border: 1px dashed blue;
+  }
+
+  &.noBorder {
+    border-color: rgba(0,0,0,0);
+    border-width: 0;
   }
 
 
@@ -71,9 +72,9 @@
 
 /**notPreview**/
 .jfb-base-user-center {
-  //&:before {
-    //content: " ";
-    //display: table;
-  //}
+  &:before {
+    content: " ";
+    display: table;
+  }
 }
 /**endNotPreview**/