jufubao-base 1.0.191 → 1.0.192-beta1

package/src/components/JfbBaseUserOrder/JfbBaseUserOrder.vue

@@ -13,25 +13,18 @@
       <view class="jfb-base-user-order__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view
-      v-if="list.length > 0"
-      class="jfb-base-user-order__body"
-      :style="{ padding: outMargin}"
-    >
-      <view :style="{borderRadius: bodyRadius + 'rpx', backgroundColor:bodyBackgroundColor, padding:outPadding}">
+    <view class="jfb-base-user-order__body">
+      <view class="x-line"></view>
+      <view :style="[bodyStyleComp]" v-if="list.length > 0">
         <view class="my-order__add">
-          <view :style="{color:cardNameColor}">我的订单</view>
-          <view @click="handleToLink(afterUrl)" :style="{borderColor:subColor || mainColor,color: subColor || mainColor}">售后订单</view>
+          <view :style="[titleStyleComp]">{{myOrderName}}</view>
+          <view
+            v-if="isShowBtn === 'Y'"
+            @click="handleToLink(afterUrl)"
+            :style="[addBtnStyleComp]"
+          >{{afterBuyName}}</view>
         </view>
-        <view
-          class="my-order__content"
-          :style="{
-            borderRadius: radius + 'rpx',
-            background: backgroundColor,
-            marginTop: spacing + 'rpx',
-            border: borderBox,
-          }"
-        >
+        <view class="my-order__content" :style="[contStyleComp]">
           <view class="my-order__content-type">
             <view
               class="my-order__content-type-item"
@@ -40,14 +33,16 @@
               @click="handleToLink(orderListUrl, item.status)"
             >
               <view class="my-order__content-type-item-icon">
+                <image v-if="item.image" :src="item.image"></image>
                 <xd-font-icon
+                  v-else
                   :icon="item.icon"
                   :color="iconColor"
                   :size="item.size"
                 ></xd-font-icon>
                 <view
                   v-if="item.num"
-                  :style="{backgroundColor: iconColor}"
+                  :style="[popComp]"
                   class="my-order__content-type-item-number"
                 >{{item.num}}</view>
               </view>
@@ -67,6 +62,7 @@
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins"
   import { getContainerPropsValue } from "@/utils/xd.base";
+  import getServiceUrl from "@/common/getServiceUrl";
   export default {
     name: "JfbBaseUserOrder",
     components: {
@@ -74,23 +70,95 @@
     },
     mixins: [componentsMixins,extsMixins,JfbBaseUserOrderMixin],
     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
-      },
-      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
-      },
-      borderBox() {
+      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',
+          color: `${this.titleStyle.color || this.cardNameColor ||'#333'}`,
+          fontWeight: `${this.titleStyle.fontWeight || 'normal'}`,
+        }
+      },
+      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,
+          borderRadius: this.bodyRadius + 'rpx',
+          backgroundColor: this.bodyBackgroundColor,
+        }
+      },
+      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
+        }
+      },
+      popComp(){
+        return {
+          backgroundColor: this.popBgColor,
+          color: this.popColor || '#f00',
+        }
+      },
+      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`;
+        return {
+          borderRadius: this.radius + 'rpx',
+          backgroundColor: this.backgroundColor,
+          marginTop: this.spacing + 'rpx',
+          border: `${borderWidth} ${borderStyle} ${borderColor}`,
+          boxShadow: this.contShadow,
+          padding
+        }
       }
     },
     data() {
@@ -98,14 +166,41 @@
         options: {},
         list: [],
 
-        //基础
+        //整体
+        bodyPadding: {},
+        bodyRadius: 0,
+        bodyBackgroundColor: 'rgba(0,0,0,0)',
+        bodyMargin: { },
+        spacing:20,
+
+        //内容列表
         color: '#333',
-        backgroundColor: 'rgba(0,0,0,0)',
-        radius: 0,
         iconColor: '',
-        spacing:20,
 
-        //边框
+        //我的标题
+        myOrderName: '我的订单',
+        cardNameColor: '#333',
+        titleStyle: {},
+
+        //售后订单
+        isShowBtn:'Y',
+        afterBuyName:'售后订单',
+        addBtnBgColor:'rgba(0,0,0,0)',
+        addBtnStyle:{},
+        addBtnBorder:{},
+        addBtnShadow:{},
+        addBtnRadius: '40',
+
+        //数字气泡
+        popColor:'#fff',
+        popBgColor:'#f00',
+
+        //content
+        backgroundColor: 'rgba(0,0,0,0)',
+        radius: 0,
+        contPadding:{},
+        contShadow:{},
+        contBorder:{},
         is_border: 'Y',
         is_border_w: 0,
         is_border_c: '',
@@ -114,13 +209,6 @@
         afterUrl: null,
         orderListUrl: null,
 
-        //整体
-        bodyPadding: {top: 20, left: 20, right: 20, bottom: 20},
-        bodyRadius: 0,
-        bodyBackgroundColor: 'rgba(0,0,0,0)',
-        bodyMargin: {top: 0, left: 0, right: 0, bottom: 0},
-        cardNameColor: '#333',
-        subColor:'',
       }
     },
     watch: {
@@ -178,6 +266,24 @@
        * @param container {object} 业务组件对象自己
        */
       init(container) {
+        this.isShowBtn = getContainerPropsValue(container, 'content.isShowBtn', 'Y');
+        this.afterBuyName = getContainerPropsValue(container, 'content.afterBuyName', '售后订单');
+
+        //数字气泡
+        this.popColor = getContainerPropsValue(container, 'content.popColor', '#fff');
+        this.popBgColor = getContainerPropsValue(container, 'content.popBgColor', '#f00');
+
+
+        //标题
+        this.myOrderName = getContainerPropsValue(container, 'content.myOrderName', '我的订单')
+        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.bodyMargin = getContainerPropsValue(container, 'content.bodyMargin', {top: 0, left: 0, right: 0, bottom: 0});
@@ -195,23 +301,29 @@
 
         //基础
         this.radius = getContainerPropsValue(container, 'content.radius', 0);
-        this.color = getContainerPropsValue(container, 'content.textColor', '#333');
-        this.iconColor = getContainerPropsValue(container, 'content.iconColor', this.mainColor);
         this.backgroundColor = getContainerPropsValue(container, 'content.backgroundColor', '#f8f8f8');
-
-        //边框
+        this.contPadding = getContainerPropsValue(container, 'content.contPadding', '{}')
+        this.contShadow = this.getXdShadow({width:20, color:'rgba(0,0,0,0)'},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', '#f8f8f8');
         this.is_border_w = getContainerPropsValue(container, 'content.is_border_w', '2');
 
-
+        //内容列表
         this.list = getContainerPropsValue(container, 'content.orderTypeList', []).map(item=>{
+          let image = '';
+          if(this.$xdUniHelper.checkVarType(item.image) === 'object') {
+            image = getServiceUrl(item.image.url, 'size1');
+          }
           return {
             ...item,
+            image,
             size: Number(item.size ? item.size: 18) * 2,
             num: 0
           }
-        })
+        });
+        this.color = getContainerPropsValue(container, 'content.textColor', '#333');
+        this.iconColor = getContainerPropsValue(container, 'content.iconColor', this.mainColor);
       },
 
       onJfbShow(options) {
@@ -219,6 +331,7 @@
       },
 
       handleToLink(path, type) {
+        if (this.$configProject['isPreview']) return;
         this.$xdUniHelper.navigateTo({
           url: type ? `${path}?type=${type}` : path
         })
@@ -244,6 +357,7 @@
       justify-content: space-between;
       align-items: center;
       font-size: unit(28, rpx);
+      min-height: 62rpx;
 
       & > view:nth-child(2) {
         width: unit(200, rpx);
@@ -260,7 +374,6 @@
         display: flex;
         justify-content: space-around;
         align-items: center;
-        padding: unit(40, rpx) unit(20, rpx) unit(35, rpx);
 
         &-item {
           font-size: unit(24, rpx);
@@ -268,13 +381,18 @@
           flex: 1;
 
           &-icon {
-            height: unit(40, rpx);
-            width: unit(40, rpx);
+            height: unit(54, rpx);
+            width: unit(54, rpx);
             display: flex;
             justify-content: center;
             align-items: center;
             margin: 0 auto;
             position: relative;
+
+            & > image {
+              max-width: 100%;
+              max-height: 100%;
+            }
           }
 
           &-text {

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',
@@ -36,7 +60,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 +92,6 @@ export default {
           { "label": "否", "value": 'N' },
         ]
       },
-
       {
         label: '是否展示元宝入口:',
         ele: 'xd-radio',
@@ -83,6 +125,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',