jufubao-base 1.0.198-beta1 → 1.0.199

package/src/components/JfbBaseUserCenter/JfbBaseUserCenter.vue

@@ -17,17 +17,28 @@
       <view class="x-line"></view>
       <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="{color: cardNameColor}">我的{{cardName}}</view>
-          <view :style="{borderColor:btnBoxColor || mainColor,color:btnBoxColor || mainColor}" @click="handleToLink(add_url)">添加{{cardName}}</view>
+        <view class="my-card-add__btn" :style="[titleMarginComp]">
+          <view :style="[titleStyleComp]">我的{{cardName}}</view>
+          <view class="addBtn" :style="[addBtnStyleComp]" @click="handleToLink(add_url)">
+            <text>添加{{cardName}}</text>
+            <view v-if="isShowICONBtn === 'Y'">
+              <xd-font-icon
+                icon="iconxiangyou_xian"
+                :color="addBtnStyleComp.color"
+                :size="20"
+              ></xd-font-icon>
+            </view>
+          </view>
         </view>
         <view
           class="my-card-add__link"
           :style="{
             borderRadius: radius + 'rpx',
             background: backgroundColor,
-            border: borderBox,
-            marginTop: padding + 'rpx'
+            border: borderBoxComp,
+            marginTop: rowSpacing + 'rpx',
+            padding:contentPaddingComp,
+            boxShadow: contShadow
           }"
         >
           <view class="my-card-add__link-num" v-if="0">
@@ -42,7 +53,8 @@
             :style="{
               color:btnTextColor,
               background:btnBgColor,
-              fontSize: btnFontSize + 'rpx'
+              fontSize: btnFontSize + 'rpx',
+              borderRadius:btnRadius + 'rpx',
             }"
             @click="handleToLink(card_url)"
           >
@@ -71,23 +83,68 @@
     },
     mixins: [componentsMixins,extsMixins,JfbBaseUserCenterMixin],
     computed: {
+      titleMarginComp(){
+        return {
+          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)
+      },
+      borderBoxComp() {
+        return this.getBorderCompatibleOldStyle(this.contBorder, {
+          color: this.is_border_c,
+          width: this.is_border_w,
+          type: this.is_border,
+          style: 'solid'
+        })
       },
-      borderBox() {
-        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;
+        }
+        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 || {};
+          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(){
+        return this.getMarginAndPadding(this.contentPadding, 40)
       },
     },
     data() {
@@ -95,29 +152,43 @@
         add_url: '',
         pwd_url: '',
         card_url:'',
-        cardName: '',
+        cardName: '卡券',
+        bodyPadding: {},
+        bodyRadius: 0,
+        bodyBackgroundColor: 'rgba(0,0,0,0)',
+        bodyMargin:{},
+        rowSpacing: 20,
+
+        //title
+        titleStyle:{},
+        titleMargin:{},
 
-        //基础
-        color: '#333',
+        //添加按钮
+        addBtnBgColor:'rgba(0,0,0,0)',
+        addBtnStyle:{},
+        addBtnBorder:{},
+        addBtnShadow:{},
+        addBtnRadius: '40',
+        isShowICONBtn:'N',
+
+        //进入
+        contentPadding:{},
         backgroundColor: 'rgba(0,0,0,0)',
         radius: 0,
-        padding: 20,
+        contShadow:'0 0 0 rgba(0,0,0,0)',
+
+        //进入按钮样式
         btnBgColor: '',
         btnTextColor: '',
         btnFontSize: 24,
+        btnRadius:'40',
 
         //边框
+        contBorder:{},
         is_border: 'Y',
         is_border_w: 0,
         is_border_c: '',
 
-        //整体
-        bodyPadding: {},
-        bodyRadius: 0,
-        bodyBackgroundColor: 'rgba(0,0,0,0)',
-        bodyMargin:{},
-        cardNameColor: '#333',
-        btnBoxColor:'',
       }
     },
     watch: {
@@ -131,6 +202,7 @@
     },
     methods: {
       handleToLink(path, type) {
+        if (this.$configProject['isPreview']) return;
         if(!path) {
           console.warn(`跳转地址不存在`)
         }
@@ -144,33 +216,48 @@
        * @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.titleMargin = getContainerPropsValue(container, 'content.titleMargin', {})
 
-        //基础
+        //添加按钮
+        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.isShowICONBtn = getContainerPropsValue(container, 'content.isShowICONBtn', 'N')
+
+        //进入
+        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.padding = getContainerPropsValue(container, 'content.padding', 20);
-        this.btnBgColor = getContainerPropsValue(container, 'content.btnBgColor', this.mainGradient);
+        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.btnTextColor = getContainerPropsValue(container, 'content.btnTextColor', '#fff');
         this.btnFontSize = getContainerPropsValue(container, 'content.btnFontSize',26);
-        this.cardNameColor = getContainerPropsValue(container, 'content.cardNameColor','#333');
-        this.btnBoxColor = getContainerPropsValue(container, 'content.cardNameColor','');
+        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.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', '卡券');
-
       },
     }
   }
@@ -182,7 +269,15 @@
 
   .jfb-base-user-center {
     &__body{
+      & .addBtn {
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
+        & > view {
+          margin-left: 10rpx;
+        }
+      }
     }
   }
 
@@ -197,9 +292,6 @@
         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;
       }
     }
@@ -235,7 +327,6 @@
         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);
       }

package/src/components/JfbBaseUserInfo/Attr.js

@@ -1,17 +1,23 @@
 '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: '',
-        ele: 'slot',
-        slot: 'is_reference_title',
-        groupKey:'advanced',
-      },
       {
         label: '内容排版:',
         ele: 'xd-radio',
@@ -27,30 +33,66 @@ export default {
         ]
       },
       {
-        label: '内容文字颜色:',
-        ele: 'xd-color',
-        valueKey: 'textColor',
+        label: '退出登录自定义名称:',
+        ele: 'el-input',
+        type: 'text',
+        groupKey:'content',
+        valueKey: 'logoutName',
+        value: data['logoutName'] || '',
+        notice: '退出登录自定义名称设置，默认值：<span style="color:red">[退出登录]</span>',
+        inline: false,
+        className: 'input60',
+      },
+
+      {
+        ele: 'title',
+        label: '基础',
+        size: 'small',
         groupKey:'style',
-        value: data.textColor || '',
-        placeholder: '请选择内容文字颜色',
-        classNmae: 'input80',
       },
       {
-        label: '内容背景颜色:',
+        label: '设置外边距:',
+        ele: 'xd-margin-padding',
+        valueKey: 'margin',
+        groupKey:'style',
+        value: data['margin'] || null,
+        setting: {
+          type: 'margin',
+        },
+        inline: false,
+        notice: '设置外边距，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">20</span>像素',
+      },
+      {
+        label: '设置填充:',
+        groupKey:'style',
+        ele: 'xd-margin-padding',
+        valueKey: 'padding',
+        value: data['padding'] || null,
+        setting: {
+          type: 'padding',
+        },
+        placeholder: '设置填充',
+        inline: false,
+        notice: '设置填充，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">20</span>像素',
+      },
+      {
+        label: '背景颜色:',
         ele: 'xd-color',
         valueKey: 'backgroundColor',
         groupKey:'style',
         value: data.backgroundColor || '',
-        placeholder: '请选择内容背景颜色',
+        labelInline:true,
+        placeholder: '请选择背景颜色',
         classNmae: 'input80',
       },
       {
-        label: '内容圆角设置:',
+        label: '圆角设置:',
         ele: 'xd-site-select-list',
         valueKey: 'radius',
-        value: data['radius'] || '',
+        value: data['radius'] || '0',
+        labelInline:true,
         groupKey:'style',
-        placeholder: '请选择内容圆角设置',
+        placeholder: '请选择圆角设置',
         multiple: false,
         className: 'input60',
         handleCustom({action, data}) {
@@ -67,36 +109,138 @@ export default {
         },
       },
       {
-        label: '内容设置外边距:',
-        ele: 'xd-margin-padding',
-        valueKey: 'margin',
+        label: '投影设置:',
+        ele: 'xd-shadow',
         groupKey:'style',
-        value: data['margin'] || null,
+        valueKey: 'contShadow',
+        value: defContShadow,
+        labelInline:true,
         setting: {
-          type: 'margin',
+          selected: defContShadow.type
+        },
+        handleCustom({action, data}) {
+          XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
+            .then(res => {
+              data.cb(res.list)
+            })
+            .catch(error => {
+              console.error(error);
+              data.cb([])
+            });
         },
-        placeholder: '请设置外边距',
-        inline: false,
-        notice: '设置外边距，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">0</span>像素',
       },
       {
-        label: '内容设置内边距:',
+        label: '边框设置:',
+        ele: 'xd-border',
         groupKey:'style',
-        ele: 'xd-margin-padding',
-        valueKey: 'padding',
-        value: data['padding'] || null,
+        valueKey: 'contBorder',
+        value: defContBorder,
+        labelInline:true,
         setting: {
-          type: 'padding',
+          selected:defContBorder.type
         },
-        placeholder: '请设置边距',
-        inline: false,
-        notice: '设置内边距，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">20</span>像素',
       },
+      {
+        label: "昵称字体样式设置",
+        ele: "xd-text-and-bgc",
+        groupKey:'style',
+        valueKey: 'nickStyle',
+        value: data['nickStyle'] || 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-text-and-bgc",
+        groupKey:'style',
+        valueKey: 'logoutStyle',
+        value: data['logoutStyle'] || 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-color',
+        groupKey:'style',
+        valueKey: 'imageColor',
+        value: data['imageColor'] || '',
+        placeholder: '请选择背景颜色',
+        classNmae: 'input80',
+        labelInline:true,
+      },
+      {
+        label: '圆角设置:',
+        ele: 'xd-site-select-list',
+        valueKey: 'imageRadius',
+        value: data['imageRadius'] || '50%',
+        groupKey:'style',
+        placeholder: '请选择圆角设置',
+        labelInline:true,
+        multiple: false,
+        className: 'input60',
+        handleCustom({action, data}) {
+          XdBus.getParentApi('getOptionsSettingList')({
+            setting_id: 'edtix_style_radius',
+            key: Date.now()
+          })
+            .then(res => {
+              data.cb(res.list.map(item=>{
+                return {
+                  ...item,
+                  value: item.value + 'rpx'
+                }
+              }).concat({label: '圆角', value:'50%'}))
+            })
+            .catch(error => {
+              console.error(error);
+            });
+        },
+      },
+
+      //=====属性已废弃(不能删除，已隐藏)====
       {
         ele: 'title',
         label: '投影设置',
         size: 'small',
         groupKey:'style',
+        hidden: true,
       },
       {
         label: '是否有投影:',
@@ -107,12 +251,13 @@ export default {
         placeholder: '请选择是否投影',
         multiple: false,
         className: 'input80',
+        hidden: true,
         list: [
           {label: '是', value: 'Y'},
           {label: '否', value: 'N'},
         ]
       },
-      data['is_shadow'] === 'Y' && {
+      {
         label: '投影颜色:',
         ele: 'xd-color',
         valueKey: 'is_shadow_bg',
@@ -120,8 +265,9 @@ export default {
         value: data['is_shadow_bg'] || '',
         placeholder: '请选择投影颜色',
         classNmae: 'input80',
+        hidden: true,
       },
-      data['is_shadow'] === 'Y' && {
+      {
         label: '投影范围:',
         groupKey:'style',
         ele: 'xd-site-select-list',
@@ -142,16 +288,21 @@ export default {
               console.error(error);
             });
         },
+        hidden: true,
       },
+
+      //=====属性已废弃(不能删除，已隐藏)====
       {
         ele: 'title',
         label: '边框设置',
         size: 'small',
         groupKey:'style',
+        hidden: true,
       },
       {
         label: '是否有边框:',
         ele: 'xd-radio',
+        hidden: true,
         valueKey: 'is_border',
         groupKey:'style',
         value: data['is_border'] || 'N',
@@ -163,8 +314,9 @@ export default {
           {label: '否', value: 'N'},
         ]
       },
-      data['is_border'] === 'Y' && {
+      {
         label: '边框颜色:',
+        hidden: true,
         ele: 'xd-color',
         groupKey:'style',
         valueKey: 'is_border_c',
@@ -172,7 +324,8 @@ export default {
         placeholder: '请选择边框颜色',
         classNmae: 'input80',
       },
-      data['is_border'] === 'Y' && {
+      {
+        hidden: true,
         label: '边框大小:',
         ele: 'el-input',
         type: 'number',
@@ -182,6 +335,28 @@ export default {
         placeholder: '请输入边框颜色',
         className: 'input80',
       },
+      //=====属性已废弃(不能删除，已隐藏)====
+
+      0&&{
+        label: '是否显示设置:',
+        ele: 'xd-radio',
+        valueKey: 'isSetting',
+        value: data['isSetting'] || 'N',
+        groupKey:'advanced',
+        placeholder: '是否显示设置',
+        multiple: false,
+        className: 'input80',
+        list: [
+          {label: '不显示', value: 'N'},
+          {label: '显示', value: 'Y'},
+        ]
+      },
+      {
+        label: '',
+        ele: 'slot',
+        slot: 'is_reference_title',
+        groupKey:'advanced',
+      },
       {
         label: '',
         ele: 'slot',