jufubao-base 1.0.186-beta3 → 1.0.187-beta2

package/src/components/JfbBaseWallet/Attr.js

@@ -7,6 +7,30 @@ export default {
   style: [],
   content: (data) => {
     return [
+      {
+        label: '我的账户自定义名称:',
+        ele: 'el-input',
+        type: 'text',
+        valueKey: 'accountName',
+        groupKey:'content',
+        value: data['accountName'] || '',
+        placeholder: '请我的账户自定义名称',
+        className: 'input80',
+        rules: [
+          {
+            required: false,
+            validator: (rule, value, callback) => {
+              value = value.trim();
+              if(value.length === 0) return callback()
+              if (value.length < 2 || value.length > 6) callback('我的账户自定义名称长度为：2-6字符');
+              else callback()
+            },
+            trigger: 'blur'
+          }
+        ],
+        notice: '我的账户自定义名称设置，默认值：<span style="color:red">我的账户</span>，长度为：2-6字符',
+        inline: false,
+      },
       {
         label: '更改分类label(可排序):',
         ele: 'xd-set-sort-label',
@@ -14,15 +38,12 @@ export default {
         groupKey:'content',
         value: data['newLabel'] || null,
         defaultValue: data['newLabel'],
-        setting: {
-          isNeedSwitch: false,
-        },
         list: [
           {
             icon: "iconpiao",
             label: "票券",
             value: 'card',
-            sort: 1,
+            sort: 1
           },
           {
             icon: "iconyuanbao",
@@ -36,7 +57,26 @@ export default {
             value: 'score',
             sort: 3
           },
-        ]
+        ],
+        rules: [
+          {
+            required: false,
+            validator: (rule, value, callback) => {
+              let yes = [];
+              if(value.length === 0) return callback()
+              value.map(item=>{
+                if(item.newLabel && (item.newLabel.length < 2 || item.newLabel.length > 4)) {
+                  yes.push(item.label)
+                }
+              });
+              if (yes.length > 0) callback('分类名称长度为：2-4字符');
+              else callback()
+            },
+            trigger: 'blur'
+          }
+        ],
+        notice: '自定义分类名称长度为：2-4字符',
+        inline: false,
       },
       {
         label: '是否展示票券入口:',
@@ -49,7 +89,6 @@ export default {
           { "label": "否", "value": 'N' },
         ]
       },
-
       {
         label: '是否展示元宝入口:',
         ele: 'xd-radio',
@@ -83,6 +122,302 @@ export default {
         },
         inline: false,
       },
+
+      //style
+      {
+        label: '行间距:',
+        ele: 'el-input',
+        type: 'number',
+        valueKey: 'rowSpacing',
+        groupKey:'style',
+        value: data.rowSpacing|| '',
+        placeholder: '请输入行间距',
+        className: 'input60',
+        inline: false,
+        notice: '设置间距，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">10</span>像素',
+      },
+      {
+        label: '列间距:',
+        ele: 'el-input',
+        type: 'number',
+        groupKey:'style',
+        valueKey: 'columnSpacing',
+        value: data['columnSpacing'] || '',
+        notice: '列间距设置，单位：像素，默认值：<span style="color:red">36</span> px',
+        inline: false,
+        className: 'input60',
+      },
+      {
+        ele: 'title',
+        label: '轮廓设置',
+        size: 'small',
+        groupKey:'style',
+      },
+      {
+        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">0</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>。默认值：<span style="color: red">20</span>像素',
+      },
+      {
+        label: '背景颜色:',
+        ele: 'xd-color',
+        valueKey: 'bodyBgColor',
+        groupKey:'style',
+        value: data['bodyBgColor'] || null,
+        placeholder: '请选择背景颜色',
+        classNmae: 'input80',
+      },
+      {
+        label: '圆角设置:',
+        ele: 'xd-site-select-list',
+        valueKey: 'bodyRadius',
+        groupKey:'style',
+        value: data['bodyRadius'],
+        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);
+            });
+        },
+      },
+      {
+        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: '列表轮廓设置',
+        size: 'small',
+        groupKey:'style',
+      },
+      {
+        label: '填充:',
+        ele: 'xd-margin-padding',
+        valueKey: 'contPadding',
+        groupKey:'style',
+        value: data['contPadding'] || null,
+        setting: {
+          type: 'padding',
+        },
+        placeholder: '请设置外填充',
+        inline: false,
+        notice: '设置填充值，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">32px 32px 48px 48px</span>像素',
+      },
+      {
+        label: '背景颜色:',
+        ele: 'xd-color',
+        valueKey: 'contBgColor',
+        groupKey:'style',
+        value: data['contBgColor'] || null,
+        placeholder: '请选择背景颜色',
+        classNmae: 'input80',
+      },
+      {
+        label: '圆角设置:',
+        ele: 'xd-site-select-list',
+        valueKey: 'contRadius',
+        groupKey:'style',
+        value: data['contRadius'],
+        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-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: '列表样式设置',
+        size: 'small',
+        groupKey:'style',
+      },
+      {
+        label: '填充:',
+        ele: 'xd-margin-padding',
+        valueKey: 'itemPadding',
+        groupKey:'style',
+        value: data['itemPadding'] || null,
+        setting: {
+          type: 'padding',
+        },
+        placeholder: '请设置外填充',
+        inline: false,
+        notice: '设置填充值，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">20px 20px 0 0</span>像素',
+      },
+      {
+        label: "标题样式设置",
+        ele: "xd-text-and-bgc",
+        groupKey:'style',
+        valueKey: 'itemStyle',
+        value: data['itemStyle'] || 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-color',
+        valueKey: 'itemBgColor',
+        groupKey:'style',
+        value: data['itemBgColor'] || null,
+        placeholder: '请选择背景颜色',
+        classNmae: 'input80',
+      },
+      {
+        label: '圆角设置:',
+        ele: 'xd-site-select-list',
+        valueKey: 'itemRadius',
+        groupKey:'style',
+        value: data['itemRadius'],
+        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-shadow',
+        groupKey:'style',
+        valueKey: 'itemShadow',
+        value: data['itemShadow'] || '',
+        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: 'itemBorder',
+        value: data['itemBorder'] || {},
+        setting: {
+          selected:'N'
+        },
+      },
+
       {
         label: '票券跳转路径:',
         ele: 'xd-select-pages-path',

package/src/components/JfbBaseWallet/JfbBaseWallet.vue

@@ -14,21 +14,29 @@
     </view>
     <!-- #endif -->
     <view class="jfb-base-wallet__body">
+      <view class="x-line"></view>
       <template v-if="showContent">
-        <view class="jfb-base-wallet__body-title">我的账户</view>
-        <view class="jfb-base-wallet__body-type" v-if="showType.length > 0">
-          <view
-            :style="{marginRight: index === showType.length - 1 ? '0' : '36rpx',}"
-            v-for="(item, index) in showType"
-            @click="handleJumpTo(item)"
-            :key="index"
-            class="jfb-base-wallet__body-type-item"
-          >
-            <XdFontIcon :icon="item.icon"></XdFontIcon>
-            <view>{{ item.label }}</view>
+        <view :style="[{
+          margin:marginComp,
+          padding:paddingComp,
+          backgroundColor:bodyBgColor,
+          borderRadius:bodyRadius+'rpx'
+        }]">
+          <view class="jfb-base-wallet__body-title" :style="[titleStyleComp]">{{accountName}}</view>
+          <view class="jfb-base-wallet__body-type" :style="[contStyleComp]" v-if="showType.length > 0">
+            <view
+              :style="[itemStyleComp]"
+              v-for="(item, index) in showType"
+              @click="handleJumpTo(item)"
+              :key="index"
+              class="jfb-base-wallet__body-type-item"
+            >
+              <xd-font-icon :icon="item.icon" :color="iconColor"></xd-font-icon>
+              <view>{{ item.label }}</view>
+            </view>
           </view>
+          <view v-else class="jfb-base-wallet__body-type notice" :style="{backgroundColor:backgroundColor, color:warningColor}">我的账户无配置数据，在正式环境将不显示改模块</view>
         </view>
-        <view v-else class="jfb-base-wallet__body-type notice" :style="{backgroundColor:backgroundColor, color:warningColor}">我的账户无配置数据，在正式环境将不显示改模块</view>
       </template>
     </view>
   </view>
@@ -72,6 +80,37 @@ export default {
       isCard: "Y",
       isYuanbao: "Y",
       isIntegral: "Y",
+      accountName:'我的账户',
+
+      //标题
+      titleStyle:{},
+
+      //轮廓
+      bodyRadius:'0',
+      bodyMargin:{},
+      bodyPadding:{},
+      rowSpacing:10,
+      columnSpacing:36,
+      bodyBgColor:'rgba(0,0,0,0)',
+
+      //content
+      contPadding:{},
+      contBgColor:'rgba(0,0,0,0)',
+      contRadius:'10',
+      contShadow:'0 0 0 rgba(0,0,0,0)',
+      contBorder:{},
+
+      //item
+      itemPadding:{},
+      itemBgColor:'rgba(0,0,0,0)',
+      itemRadius:'10',
+      itemShadow: '0 0 0 rgba(0,0,0,0)',
+      itemBorder:{},
+      itemPStyle:{},
+      iconColor: '#333',
+
+
+      //高级
       cardPath: "",
       yuanbaoPath: "",
       integralPath: "",
@@ -177,7 +216,89 @@ export default {
     showContent(){
       if(this.$configProject.isPreview) return true;
       return this.showType.length > 0;
-    }
+    },
+
+    titleStyleComp(){
+      return {
+        fontSize: this.titleStyle.fontSize || '28rpx',
+        color: `${this.titleStyle.color || '#333'}`,
+        fontWeight: `${this.titleStyle.fontWeight || 'normal'}`,
+        marginBottom: `${this.rowSpacing}rpx`,
+      }
+    },
+
+    marginComp() {
+      let str = `${this.checkValue(this.bodyMargin.top, 0)}rpx`;
+      str = `${str} ${this.checkValue(this.bodyMargin.right, 0)}rpx`;
+      str = `${str} ${this.checkValue(this.bodyMargin.bottom, 0)}rpx`;
+      str = `${str} ${this.checkValue(this.bodyMargin.left, 0)}rpx`;
+      return str
+    },
+
+    paddingComp() {
+      let str = `${this.checkValue(this.bodyPadding.top, 20)}rpx`;
+      str = `${str} ${this.checkValue(this.bodyPadding.right, 20)}rpx`;
+      str = `${str} ${this.checkValue(this.bodyPadding.bottom, 20)}rpx`;
+      str = `${str} ${this.checkValue(this.bodyPadding.left, 20)}rpx`;
+      return str
+    },
+
+    contStyleComp(){
+      let str = `${this.checkValue(this.contPadding.top, 32)}rpx`;
+      str = `${str} ${this.checkValue(this.contPadding.right, 48)}rpx`;
+      str = `${str} ${this.checkValue(this.contPadding.bottom, 32)}rpx`;
+      str = `${str} ${this.checkValue(this.contPadding.left, 48)}rpx`;
+      let border = {
+        borderWidth: '2rpx',
+        borderStyle: 'solid',
+        borderColor: '#eee',
+      }
+      if(this.contBorder && this.contBorder.type === 'Y') {
+        let value = this.contBorder.value || {};
+        if(value.color) border.borderColor = value.color;
+        if(value.style) border.borderStyle = value.style;
+        if(value.width) border.borderWidth = value.width + 'rpx';
+      }
+
+      return {
+        padding: str,
+        backgroundColor: this.contBgColor,
+        borderRadius: this.contRadius + 'rpx',
+        boxShadow: this.contShadow,
+        ...border,
+      }
+    },
+
+    itemStyleComp(){
+      let str = `${this.checkValue(this.itemPadding.top, 20)}rpx`;
+      str = `${str} ${this.checkValue(this.itemPadding.right, 0)}rpx`;
+      str = `${str} ${this.checkValue(this.itemPadding.bottom, 20)}rpx`;
+      str = `${str} ${this.checkValue(this.itemPadding.left, 0)}rpx`;
+
+      let border = {
+        borderWidth: '2rpx',
+        borderStyle: 'solid',
+        borderColor: '#eee',
+      }
+      if(this.itemBorder && this.itemBorder.type === 'Y') {
+        let value = this.itemBorder.value || {};
+        if(value.color) border.borderColor = value.color;
+        if(value.style) border.borderStyle = value.style;
+        if(value.width) border.borderWidth = value.width + 'rpx';
+      }
+      if(this.itemPStyle.color !== undefined) this.iconColor =this.itemPStyle.color
+      return {
+        padding: str,
+        backgroundColor: this.itemBgColor,
+        borderRadius: this.itemRadius + 'rpx',
+        marginRight: this.columnSpacing + 'rpx',
+        boxShadow: this.itemShadow,
+        fontSize: this.itemPStyle.fontSize || '28rpx',
+        color: `${this.itemPStyle.color || '#333'}`,
+        fontWeight: `${this.itemPStyle.fontWeight || 'normal'}`,
+        ...border
+      }
+    },
   },
   created() {
     this.backgroundColor = Color(this.warningColor).alpha(0.2).toString();
@@ -196,34 +317,42 @@ export default {
     init(container) {
       this.newLabel = getContainerPropsValue(container, "content.newLabel", []);
       this.isCard = getContainerPropsValue(container, "content.isCard", "Y");
-      this.isYuanbao = getContainerPropsValue(
-        container,
-        "content.isYuanbao",
-        "Y"
-      );
-      this.isIntegral = getContainerPropsValue(
-        container,
-        "content.isIntegral",
-        "Y"
-      );
-      this.cardPath = getContainerPropsValue(container, "content.cardPath", {
-        value: "",
-      }).value;
-
-      this.yuanbaoPath = getContainerPropsValue(
-        container,
-        "content.yuanbaoPath",
-        { value: "" }
-      ).value;
-
-      this.integralPath = getContainerPropsValue(
-        container,
-        "content.integralPath",
-        { value: "" }
-      ).value;
+      this.isYuanbao = getContainerPropsValue(container, "content.isYuanbao", "Y");
+      this.isIntegral = getContainerPropsValue(container, "content.isIntegral", "Y");
+      this.accountName = getContainerPropsValue(container, "content.accountName", "我的账户");
+      this.rowSpacing = Number(getContainerPropsValue(container, "content.rowSpacing", 10));
+      this.columnSpacing = Number(getContainerPropsValue(container, "content.columnSpacing", 36));
+      this.bodyBgColor = getContainerPropsValue(container, "content.bodyBgColor", 'rgba(0,0,0,0)');
+      this.bodyPadding = getContainerPropsValue(container, "content.bodyPadding", {});
+      this.bodyMargin = getContainerPropsValue(container, "content.bodyMargin", {});
+      this.bodyRadius = getContainerPropsValue(container, "content.bodyRadius", '0');
+
+      //标题
+      this.titleStyle = getContainerPropsValue(container, 'content.titleStyle', {});
+
+      //content
+      this.contPadding = getContainerPropsValue(container, "content.contPadding", {});
+      this.contBgColor = getContainerPropsValue(container, "content.contBgColor", 'rgba(0,0,0,0)');
+      this.contRadius = getContainerPropsValue(container, "content.contRadius", '10');
+      this.contBorder = getContainerPropsValue(container, "content.contBorder", {});
+      this.contShadow = this.getXdShadow({width:20, color:'rgba(0,0,0,.3)'},getContainerPropsValue(container, 'content.contShadow', {}))
+
+
+      //item
+      this.itemPadding = getContainerPropsValue(container, 'content.itemPadding', {});
+      this.itemBgColor = getContainerPropsValue(container, 'content.itemBgColor', 'rgba(0,0,0,0)');
+      this.itemRadius = getContainerPropsValue(container, 'content.itemRadius', '10');
+      this.itemShadow = this.getXdShadow({width:20, color:'rgba(0,0,0,.3)'},getContainerPropsValue(container, 'content.itemShadow', {}))
+      this.itemBorder = getContainerPropsValue(container, "content.itemBorder", {});
+      this.itemPStyle = getContainerPropsValue(container, "content.itemStyle", {});
+
+      //高级
+      this.cardPath = getContainerPropsValue(container, "content.cardPath", {value: "",}).value;
+      this.yuanbaoPath = getContainerPropsValue(container, "content.yuanbaoPath", { value: "" }).value;
+      this.integralPath = getContainerPropsValue(container, "content.integralPath", { value: "" }).value;
     },
     handleJumpTo(item) {
-      console.log(item, "ppppp");
+      if(this.$configProject.isPreview) return;
       switch (item.value) {
         case "card":
           this.$xdUniHelper.navigateTo({
@@ -257,22 +386,20 @@ export default {
 .jfb-base-wallet {
   &__body {
     &-title {
-      padding: 20rpx;
+      min-height: 64rpx;
+      line-height: 64rpx;
     }
     &-type {
       display: flex;
       border-radius: 20rpx;
       background: rgba(255, 255, 255, 1);
       border: 1rpx solid rgba(238, 238, 238, 1);
-      padding: 32rpx 48rpx 32rpx 48rpx;
-      margin: 0 20rpx 0;
 
       &.notice {
         font-size: 26rpx;
       }
 
       &-item {
-        color: #999999;
         flex: 1;
         display: flex;
         flex-direction: column;
@@ -280,12 +407,9 @@ export default {
         justify-content: center;
         font-size: 24rpx;
         border: 2rpx solid #eeeeee;
-        border-radius: 16rpx;
-        background: #ffffff;
-        padding: 16rpx 0;
-        margin-right: 36rpx;
-        & > view:nth-child(2) {
-          margin-top: 12rpx;
+
+        &:last-child{
+          margin-right: 0!important;
         }
       }
     }