jufubao-base 1.0.187-beta2 → 1.0.188

package/src/components/JfbBaseUserCenter/Attr.js

@@ -24,26 +24,15 @@ export default {
         className: 'input80',
         rules: [
           {
-            required: false,
+            required: true,
             validator: (rule, value, callback) => {
               value = value.trim();
-              if(value.length === 0) return callback()
               if (value.length < 1 || value.length > 4) callback('卡券自定义名称长度为：1-4字符');
               else callback()
             },
             trigger: 'blur'
           }
         ],
-        notice: '卡券自定义名称设置，默认值：<span style="color:red">卡券</span>，长度为：1-4字符',
-        inline: false,
-      },
-
-      //style
-      {
-        ele: 'title',
-        label: '轮廓设置',
-        size: 'small',
-        groupKey:'style',
       },
       {
         label: '卡券文字颜色:',
@@ -53,7 +42,13 @@ export default {
         value: data['cardNameColor'] || null,
         placeholder: '请选择卡券文字颜色',
         classNmae: 'input80',
-        hidden:true,
+      },
+
+      {
+        ele: 'title',
+        label: '整体风格',
+        size: 'small',
+        groupKey:'style',
       },
       {
         label: '背景颜色:',
@@ -84,13 +79,13 @@ export default {
         },
       },
       {
-        label: '行间距:',
+        label: '间距:',
         ele: 'el-input',
         type: 'number',
         valueKey: 'padding',
         groupKey:'style',
         value: data.padding || '',
-        placeholder: '请输入行间距',
+        placeholder: '请输入间距',
         className: 'input60',
         inline: false,
         notice: '设置间距，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">20</span>像素',
@@ -123,160 +118,10 @@ export default {
       },
       {
         ele: 'title',
-        label: '标题设置',
-        size: 'small',
-        groupKey:'style',
-      },
-      {
-        label: "标题样式设置",
-        ele: "xd-text-and-bgc",
-        groupKey:'style',
-        valueKey: 'titleStyle',
-        value: data['titleStyle'] || null,
-        setting: {
-          fontSize: true,
-          color: true,
-          bgColor: false,
-          weight: true,
-          selected:false
-        },
-        handleCustom({action, data}) {
-          XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_font_size'})
-            .then(res => {
-              data.cb(res.list)
-            })
-            .catch(error => {
-              console.error(error);
-              data.cb([])
-            });
-        },
-      },
-      {
-        ele: 'title',
-        label: `添加${data['cardName'] || '卡券'}设置`,
-        size: 'small',
-        groupKey:'style',
-      },
-      {
-        label: "文字样式设置",
-        ele: "xd-text-and-bgc",
-        groupKey:'style',
-        valueKey: 'addBtnStyle',
-        value: data['addBtnStyle'] || null,
-        setting: {
-          fontSize: true,
-          color: true,
-          bgColor: false,
-          weight: true,
-          selected:false
-        },
-        handleCustom({action, data}) {
-          XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_font_size'})
-            .then(res => {
-              data.cb(res.list)
-            })
-            .catch(error => {
-              console.error(error);
-              data.cb([])
-            });
-        },
-      },
-      {
-        label: '圆角设置:',
-        ele: 'xd-site-select-list',
-        valueKey: 'addBtnRadius',
-        groupKey:'style',
-        value: data['addBtnRadius'] || '40',
-        placeholder: '请选择圆角设置',
-        multiple: false,
-        className: 'input80',
-        handleCustom({action, data}) {
-          XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
-            .then(res => {
-              data.cb(res.list)
-            })
-            .catch(error => {
-              console.error(error);
-            });
-        },
-      },
-      {
-        label: '背景颜色:',
-        ele: 'xd-color',
-        valueKey: 'addBtnBgColor',
-        groupKey:'style',
-        value: data['addBtnBgColor'] || null,
-        placeholder: '请选择背景颜色',
-        classNmae: 'input80',
-      },
-      {
-        label: '投影设置:',
-        ele: 'xd-shadow',
-        groupKey:'style',
-        valueKey: 'addBtnShadow',
-        value: data['addBtnShadow'] || '',
-        setting: {
-          selected: 'N'
-        },
-        handleCustom({action, data}) {
-          XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
-            .then(res => {
-              data.cb(res.list)
-            })
-            .catch(error => {
-              console.error(error);
-              data.cb([])
-            });
-        },
-      },
-      {
-        label: '边框设置:',
-        ele: 'xd-border',
-        groupKey:'style',
-        valueKey: 'addBtnBorder',
-        value: data['addBtnBorder'] || {},
-        setting: {
-          selected:'N'
-        },
-      },
-      {
-        ele: 'title',
-        label: `进入我的${data['cardName'] || '卡券'}设置`,
+        label: '内容区域风格',
         size: 'small',
         groupKey:'style',
       },
-      {
-        label: '填充:',
-        ele: 'xd-margin-padding',
-        valueKey: 'contentPadding',
-        groupKey:'style',
-        value: data['contentPadding'] || null,
-        setting: {
-          type: 'padding',
-        },
-        placeholder: '请设填充',
-        inline: false,
-        notice: '设置填充值，<span style="color: red">单位：像素</span>。默认值：<span style="color:red">40</span>像素',
-      },
-      {
-        label: '圆角设置:',
-        ele: 'xd-site-select-list',
-        valueKey: 'radius',
-        groupKey:'style',
-        value: data['radius'] || '10',
-        placeholder: '请选择内容圆角设置',
-        multiple: false,
-        className: 'input80',
-        handleCustom({action, data}) {
-          XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
-            .then(res => {
-              data.cb(res.list)
-            })
-            .catch(error => {
-              console.error(error);
-            });
-        },
-      },
       {
         label: '背景颜色:',
         ele: 'xd-color',
@@ -287,88 +132,30 @@ export default {
         classNmae: 'input80',
       },
       {
-        label: '投影设置:',
-        ele: 'xd-shadow',
-        groupKey:'style',
-        valueKey: 'contShadow',
-        value: data['contShadow'] || '',
-        setting: {
-          selected: 'N'
-        },
-        handleCustom({action, data}) {
-          XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
-            .then(res => {
-              data.cb(res.list)
-            })
-            .catch(error => {
-              console.error(error);
-              data.cb([])
-            });
-        },
-      },
-      {
-        label: '边框设置:',
-        ele: 'xd-border',
-        groupKey:'style',
-        valueKey: 'contBorder',
-        value: data['contBorder'] || {},
-        setting: {
-          selected:'N'
-        },
-      },
-      {
-        ele: 'title',
-        label: `进入我的${data['cardName'] || '卡券'}按钮样式设置`,
-        size: 'small',
-        groupKey:'style',
-      },
-      {
-        label: '圆角设置:',
-        ele: 'xd-site-select-list',
-        valueKey: 'btnRadius',
-        value: data['btnRadius'] || '40',
-        groupKey:'style',
-        placeholder: '请选择圆角设置',
-        multiple: false,
-        className: 'input60',
-        handleCustom({action, data}) {
-          XdBus.getParentApi('getOptionsSettingList')({
-            setting_id: 'edtix_style_radius',
-            key: Date.now()
-          })
-            .then(res => {
-              data.cb(res.list)
-            })
-            .catch(error => {
-              console.error(error);
-            });
-        },
-      },
-      {
-        label: '背景颜色:',
+        label: '按钮背景颜色:',
         ele: 'xd-color',
         valueKey: 'btnBgColor',
         groupKey:'style',
         value: data['btnBgColor'] || null,
-        placeholder: '请选择背景颜色',
+        placeholder: '请选择按钮背景颜色',
         classNmae: 'input80',
       },
       {
-        label: '文字颜色:',
+        label: '按钮文字颜色:',
         ele: 'xd-color',
         valueKey: 'btnTextColor',
         groupKey:'style',
         value: data['btnTextColor'] || null,
-        placeholder: '请选择文字颜色',
+        placeholder: '请选择按钮文字颜色',
         classNmae: 'input80',
       },
       {
-        label: '文字大小:',
+        label: '按钮文字大小:',
         ele: 'xd-site-select-list',
         valueKey: 'btnFontSize',
         groupKey:'style',
         value: data['btnFontSize'] || '',
-        placeholder: '请选择文字大小',
+        placeholder: '请选择按钮文字大小',
         multiple: false,
         className: 'input80',
         handleCustom({action, data}) {
@@ -384,13 +171,11 @@ export default {
         },
       },
 
-      //=====属性已废弃(不能删除，已隐藏)====
       {
         ele: 'title',
         label: '边框设置',
         size: 'small',
         groupKey:'style',
-        hidden: true
       },
       {
         label: '是否有边框:',
@@ -401,7 +186,6 @@ export default {
         placeholder: '请选择是否有边框',
         multiple: false,
         className: 'input80',
-        hidden: true,
         list: [
           {label: '是', value: 'Y'},
           {label: '否', value: 'N'},
@@ -415,7 +199,6 @@ export default {
         value: data['is_border_c'] || '',
         placeholder: '请选择边框颜色',
         classNmae: 'input80',
-        hidden: true
       },
       data['is_border'] === 'Y' && {
         label: '边框大小:',
@@ -426,10 +209,26 @@ export default {
         value: data['is_border_w'] || '',
         placeholder: '请输入边框颜色',
         className: 'input80',
-        hidden: true
       },
-      //=====属性已废弃(不能删除，已隐藏)====
-
+      {
+        label: '内容圆角设置:',
+        ele: 'xd-site-select-list',
+        valueKey: 'radius',
+        groupKey:'style',
+        value: data['radius'] || '10',
+        placeholder: '请选择内容圆角设置',
+        multiple: false,
+        className: 'input80',
+        handleCustom({action, data}) {
+          XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
+            .then(res => {
+              data.cb(res.list)
+            })
+            .catch(error => {
+              console.error(error);
+            });
+        },
+      },
       {
         label: '添加卡券路径:',
         ele: 'xd-select-pages-path',
@@ -437,34 +236,43 @@ export default {
         groupKey:'advanced',
         placeholder: '请选择添加卡券路径',
         value: data['add_url'] || null,
-        className: 'input100',
         setting: {
           router: XdBus.getParentApi('getPagesTree'),
         },
+        rules: [
+          {required: true, message: '请选择添加卡券路径', trigger: 'change'},
+        ],
+        inline: false,
       },
       {
         label: '设置支付密码路径:',
         ele: 'xd-select-pages-path',
         valueKey: 'pwd_url',
         groupKey:'advanced',
-        className: 'input100',
         placeholder: '请选择设置支付密码路径',
         value: data['pwd_url'] || null,
         setting: {
           router: XdBus.getParentApi('getPagesTree'),
         },
+        rules: [
+          {required: true, message: '请选择设置支付密码路径', trigger: 'change'},
+        ],
+        inline: false,
       },
       {
         label: '进入我的票券路径:',
         ele: 'xd-select-pages-path',
         valueKey: 'card_url',
         groupKey:'advanced',
-        className: 'input100',
         placeholder: '请选择进入我的票券路径',
         value: data['card_url'] || null,
         setting: {
           router: XdBus.getParentApi('getPagesTree'),
         },
+        rules: [
+          {required: true, message: '请选择进入我的票券路径', trigger: 'change'},
+        ],
+        inline: false,
       },
       {
         label: '',

package/src/components/JfbBaseUserCenter/JfbBaseUserCenter.vue

@@ -18,8 +18,8 @@
       <view class="user-center-box" :style="{padding: outMargin}">
         <view :style="{borderRadius: bodyRadius + 'rpx', backgroundColor:bodyBackgroundColor, padding:outPadding}">
         <view class="my-card-add__btn">
-          <view :style="[titleStyleComp]">我的{{cardName}}</view>
-          <view :style="[addBtnStyleComp]" @click="handleToLink(add_url)">添加{{cardName}}</view>
+          <view :style="{color: cardNameColor}">我的{{cardName}}</view>
+          <view :style="{borderColor:btnBoxColor || mainColor,color:btnBoxColor || mainColor}" @click="handleToLink(add_url)">添加{{cardName}}</view>
         </view>
         <view
           class="my-card-add__link"
@@ -27,9 +27,7 @@
             borderRadius: radius + 'rpx',
             background: backgroundColor,
             border: borderBox,
-            marginTop: rowSpacing + 'rpx',
-            padding:contentPaddingComp,
-            boxShadow: contShadow
+            marginTop: padding + 'rpx'
           }"
         >
           <view class="my-card-add__link-num" v-if="0">
@@ -44,8 +42,7 @@
             :style="{
               color:btnTextColor,
               background:btnBgColor,
-              fontSize: btnFontSize + 'rpx',
-              borderRadius:btnRadius + 'rpx',
+              fontSize: btnFontSize + 'rpx'
             }"
             @click="handleToLink(card_url)"
           >
@@ -89,91 +86,38 @@
         return str
       },
       borderBox() {
-        if (this.is_border === 'Y') return `${this.is_border_w}rpx ${this.is_border_s} ${this.is_border_c}`;
+        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',
-          color: `${this.titleStyle.color || '#333'}`,
-          fontWeight: `${this.titleStyle.fontWeight || 'normal'}`,
-        }
-      },
-      addBtnStyleComp(){
-        let border = {};
-        if(this.addBtnBorder && this.addBtnBorder.type === 'Y') {
-          let value = this.addBtnBorder.value ||{};
-          if(value.width) border['borderWidth'] = value.width + 'rpx';
-          if(value.color) border['borderColor'] = value.color;
-          if(value.style) border['borderStyle'] = value.style;
-        }
-        let addBtnShadow = {};
-        if(this.addBtnShadow && this.addBtnShadow.type === 'Y') {
-          let value = this.addBtnShadow.value || {};
-          if(value.color && value.width) {
-            addBtnShadow['boxShadow'] = `0 0 ${value.width}rpx ${value.color}`
-          }
-        }
-        return {
-          color: this.addBtnStyle.color || this.mainColor,
-          fontSize: this.addBtnStyle.fontSize || '26rpx',
-          fontWeight: this.addBtnStyle.fontWeight || 'normal',
-          borderColor: this.mainColor,
-          borderWidth: '2rpx',
-          borderStyle:'solid',
-          backgroundColor: this.addBtnBgColor || 'rgba(0,0,0,0)',
-          borderRadius:this.addBtnRadius + 'rpx',
-          ...border,
-          ...addBtnShadow
-        }
-      },
-      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
-      }
     },
     data() {
       return {
         add_url: '',
         pwd_url: '',
         card_url:'',
-        cardName: '卡券',
-        bodyPadding: {},
-        bodyRadius: 0,
-        bodyBackgroundColor: 'rgba(0,0,0,0)',
-        bodyMargin:{},
-        rowSpacing: 20,
-
-        //title
-        titleStyle:{},
-
-        //添加按钮
-        addBtnBgColor:'rgba(0,0,0,0)',
-        addBtnStyle:{},
-        addBtnBorder:{},
-        addBtnShadow:{},
-        addBtnRadius: '40',
+        cardName: '',
 
-        //进入
-        contentPadding:{},
+        //基础
+        color: '#333',
         backgroundColor: 'rgba(0,0,0,0)',
         radius: 0,
-        contShadow:'0 0 0 rgba(0,0,0,0)',
-
-        //进入按钮样式
+        padding: 20,
         btnBgColor: '',
         btnTextColor: '',
         btnFontSize: 24,
-        btnRadius:'40',
 
         //边框
         is_border: 'Y',
         is_border_w: 0,
         is_border_c: '',
 
+        //整体
+        bodyPadding: {},
+        bodyRadius: 0,
+        bodyBackgroundColor: 'rgba(0,0,0,0)',
+        bodyMargin:{},
+        cardNameColor: '#333',
+        btnBoxColor:'',
       }
     },
     watch: {
@@ -187,7 +131,6 @@
     },
     methods: {
       handleToLink(path, type) {
-        if (this.$configProject['isPreview']) return;
         if(!path) {
           console.warn(`跳转地址不存在`)
         }
@@ -201,51 +144,33 @@
        * @param container {object} 业务组件对象自己
        */
       init(container) {
-        this.cardName = getContainerPropsValue(container, 'content.cardName', '卡券');
+
+        //整体
         this.bodyMargin = getContainerPropsValue(container, 'content.bodyMargin', {});
         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.rowSpacing = getContainerPropsValue(container, 'content.padding', 20);
 
-        //标题
-        this.titleStyle = getContainerPropsValue(container, 'content.titleStyle', {});
-
-        //添加按钮
-        this.addBtnBgColor = getContainerPropsValue(container, 'content.addBtnBgColor', 'rgba(0,0,0,0)');
-        this.addBtnStyle = getContainerPropsValue(container, 'content.addBtnStyle', {});
-        this.addBtnBorder = getContainerPropsValue(container, 'content.addBtnBorder', {});
-        this.addBtnRadius = getContainerPropsValue(container, 'content.addBtnRadius', '40');
-        this.addBtnShadow =  getContainerPropsValue(container, 'content.addBtnShadow', {});
-
-        //进入
-        this.contentPadding = getContainerPropsValue(container, 'content.contentPadding', {});
+        //基础
         this.radius = getContainerPropsValue(container, 'content.radius', 0);
         this.color = getContainerPropsValue(container, 'content.textColor', '#333');
         this.backgroundColor = getContainerPropsValue(container, 'content.backgroundColor', '#f8f8f8');
-        this.contShadow = this.getXdShadow({width:20, color:'rgba(0,0,0,0)'},getContainerPropsValue(container, 'content.contShadow', {}))
-
-        //进入按钮
-        this.btnBgColor = getContainerPropsValue(container, 'content.btnBgColor', this.mainGradient||this.mainColor);
+        this.padding = getContainerPropsValue(container, 'content.padding', 20);
+        this.btnBgColor = getContainerPropsValue(container, 'content.btnBgColor', this.mainGradient);
         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.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.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;
         this.card_url = getContainerPropsValue(container, 'content.card_url', {value: ''}).value;
+        this.cardName = getContainerPropsValue(container, 'content.cardName', '卡券');
+
       },
     }
   }
@@ -272,6 +197,9 @@
         width: unit(200, rpx);
         height: unit(60, rpx);
         line-height: unit(60, rpx);
+        border-radius: unit(30, rpx);
+        border: 1px solid #FF5733;
+        color: #FF5733;
         text-align: center;
       }
     }
@@ -307,6 +235,7 @@
         height: unit(80, rpx);
         line-height: unit(80, rpx);
         border-radius: unit(100, rpx);
+        font-size: unit(24, rpx);
         text-align: center;
         margin-top: unit(30, rpx);
       }