jufubao-base 1.0.186 → 1.0.187-beta3

package/src/components/JfbBaseUserInfo/Attr.js

@@ -6,12 +6,6 @@ export default {
   style: [],
   content: (data)=>{
     return [
-      {
-        label: '',
-        ele: 'slot',
-        slot: 'is_reference_title',
-        groupKey:'advanced',
-      },
       {
         label: '内容排版:',
         ele: 'xd-radio',
@@ -27,30 +21,39 @@ export default {
         ]
       },
       {
-        label: '内容文字颜色:',
-        ele: 'xd-color',
-        valueKey: 'textColor',
-        groupKey:'style',
-        value: data.textColor || '',
-        placeholder: '请选择内容文字颜色',
-        classNmae: 'input80',
+        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:'content',
       },
       {
-        label: '内容背景颜色:',
+        label: '边框颜色:',
         ele: 'xd-color',
-        valueKey: 'backgroundColor',
-        groupKey:'style',
-        value: data.backgroundColor || '',
-        placeholder: '请选择内容背景颜色',
+        groupKey:'content',
+        valueKey: 'imageColor',
+        value: data['imageColor'] || '',
+        placeholder: '请选择背景颜色',
         classNmae: 'input80',
       },
       {
-        label: '内容圆角设置:',
+        label: '圆角设置:',
         ele: 'xd-site-select-list',
-        valueKey: 'radius',
-        value: data['radius'] || '',
-        groupKey:'style',
-        placeholder: '请选择内容圆角设置',
+        valueKey: 'imageRadius',
+        value: data['imageRadius'] || '50%',
+        groupKey:'content',
+        placeholder: '请选择圆角设置',
         multiple: false,
         className: 'input60',
         handleCustom({action, data}) {
@@ -59,15 +62,21 @@ export default {
             key: Date.now()
           })
             .then(res => {
-              data.cb(res.list)
+              data.cb(res.list.map(item=>{
+                return {
+                  ...item,
+                  value: item.value + 'rpx'
+                }
+              }).concat({label: '圆角', value:'50%'}))
             })
             .catch(error => {
               console.error(error);
             });
         },
       },
+
       {
-        label: '内容设置外边距:',
+        label: '设置外边距:',
         ele: 'xd-margin-padding',
         valueKey: 'margin',
         groupKey:'style',
@@ -75,12 +84,11 @@ export default {
         setting: {
           type: 'margin',
         },
-        placeholder: '请设置外边距',
         inline: false,
-        notice: '设置外边距，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">0</span>像素',
+        notice: '设置外边距，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">20</span>像素',
       },
       {
-        label: '内容设置内边距:',
+        label: '设置填充:',
         groupKey:'style',
         ele: 'xd-margin-padding',
         valueKey: 'padding',
@@ -88,15 +96,127 @@ export default {
         setting: {
           type: 'padding',
         },
-        placeholder: '请设置边距',
+        placeholder: '设置填充',
         inline: false,
-        notice: '设置内边距，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">20</span>像素',
+        notice: '设置填充，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">20</span>像素',
+      },
+      {
+        label: '背景颜色:',
+        ele: 'xd-color',
+        valueKey: 'backgroundColor',
+        groupKey:'style',
+        value: data.backgroundColor || '',
+        placeholder: '请选择背景颜色',
+        classNmae: 'input80',
+      },
+      {
+        label: '圆角设置:',
+        ele: 'xd-site-select-list',
+        valueKey: 'radius',
+        value: data['radius'] || '0',
+        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: '投影设置:',
+        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'
+        },
       },
+      {
+        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',
+        hidden: true,
       },
       {
         label: '是否有投影:',
@@ -107,6 +227,7 @@ export default {
         placeholder: '请选择是否投影',
         multiple: false,
         className: 'input80',
+        hidden: true,
         list: [
           {label: '是', value: 'Y'},
           {label: '否', value: 'N'},
@@ -120,6 +241,7 @@ export default {
         value: data['is_shadow_bg'] || '',
         placeholder: '请选择投影颜色',
         classNmae: 'input80',
+        hidden: true,
       },
       data['is_shadow'] === 'Y' && {
         label: '投影范围:',
@@ -142,16 +264,19 @@ 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',
@@ -165,6 +290,7 @@ export default {
       },
       data['is_border'] === 'Y' && {
         label: '边框颜色:',
+        hidden: true,
         ele: 'xd-color',
         groupKey:'style',
         valueKey: 'is_border_c',
@@ -173,6 +299,7 @@ export default {
         classNmae: 'input80',
       },
       data['is_border'] === 'Y' && {
+        hidden: true,
         label: '边框大小:',
         ele: 'el-input',
         type: 'number',
@@ -182,6 +309,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',

package/src/components/JfbBaseUserInfo/JfbBaseUserInfo.vue

@@ -18,10 +18,9 @@
       <view
         class="jfb-base-user-info__body-header"
         :style="{
-          margin: outMargin,
-          background:backgroundColor,
-          color: color,
-          padding: outPadding,
+          margin: marginComp,
+          background : backgroundColor,
+          padding: paddingComp,
           boxShadow: shadow,
           borderRadius: radius + 'rpx',
           border: borderBox
@@ -34,26 +33,26 @@
         >
           <template v-if="logined">
             <image v-if="userInfo['head_url']" :src="userInfo['head_url']"></image>
-            <view class="no-image" :style="{borderColor: color}" v-else>
-              <xd-font-icon :color="color" icon="iconwode_mian" size="100"></xd-font-icon>
+            <view class="no-image" :style="{borderColor: imageColor, borderRadius:imageRadius}" v-else>
+              <xd-font-icon :color="imageColor" icon="iconwode_mian" size="100"></xd-font-icon>
             </view>
           </template>
-          <view v-else class="no-image" :style="{borderColor: color}">
-            <xd-font-icon :color="color" icon="iconwode_mian" size="90"></xd-font-icon>
+          <view v-else class="no-image" :style="{borderColor: imageColor, borderRadius:imageRadius}">
+            <xd-font-icon :color="imageColor" icon="iconwode_mian" size="90"></xd-font-icon>
           </view>
-          <view v-if="logined && textType ==='N'" :style="{color:color}">{{userInfo|getName}}</view>
-          <view class="vertical-user" v-if="logined && textType ==='Y'" :style="{color:color}">
-            <view>{{userInfo|getName}}</view>
+          <view v-if="logined && textType ==='N'" :style="[nickNameStyle]">{{userInfo|getName}}</view>
+          <view class="vertical-user" v-if="logined && textType ==='Y'">
+            <view :style="[nickNameStyle]">{{userInfo|getName}}</view>
             <view class="logout" @click="handleLogout()">
-              <view :style="{color:color}">[退出登录]</view>
+              <view :style="[logoutStyleComp]">{{logoutName}}</view>
             </view>
-            <view @click="handleToLink()" v-if="0">
-              <xd-font-icon :color="color" size="40" icon="iconshezhi_mian"></xd-font-icon>
+            <view @click="handleToLink()" v-if="isSetting === 'Y'">
+              <xd-font-icon size="26" icon="iconshezhi_mian"></xd-font-icon>
             </view>
           </view>
         </view>
         <view @click="handleLogout()" v-if="logined && textType ==='N'" class="logout">
-          <view :style="{color:color}">[退出登录]</view>
+          <view :style="[logoutStyleComp]">{{logoutName}}</view>
         </view>
       </view>
     </view>
@@ -79,14 +78,14 @@
     computed: {
       ...mapState(['jfbAuthorize']),
 
-      outMargin() {
+      marginComp() {
         let str = `${this.checkValue(this.margin.top, 20)}rpx`;
         str = `${str} ${this.checkValue(this.margin.right, 20)}rpx`;
         str = `${str} ${this.checkValue(this.margin.bottom, 20)}rpx`;
         str = `${str} ${this.checkValue(this.margin.left, 20)}rpx`;
         return str
       },
-      outPadding() {
+      paddingComp() {
         let str = `${this.checkValue(this.padding.top, 20)}rpx`;
         str = `${str} ${this.checkValue(this.padding.right, 20)}rpx`;
         str = `${str} ${this.checkValue(this.padding.bottom, 20)}rpx`;
@@ -98,8 +97,22 @@
         else return '0 0 0 rgba(0,0,0,0)';
       },
       borderBox(){
-        if (this.is_border === 'Y') return `${this.is_border_w}rpx solid ${this.is_border_c}`;
+        if (this.is_border === 'Y') return `${this.is_border_w}rpx ${this.is_border_s} ${this.is_border_c}`;
         else return '0';
+      },
+      nickNameStyle(){
+        return {
+          fontSize: this.nickStyle.fontSize || '32rpx',
+          color: `${this.nickStyle.color || '#333'}`,
+          fontWeight: `${this.nickStyle.fontWeight || 'normal'}`,
+        }
+      },
+      logoutStyleComp(){
+        return {
+          fontSize: this.logoutStyle.fontSize || '20rpx',
+          color: `${this.logoutStyle.color || '#333'}`,
+          fontWeight: `${this.logoutStyle.fontWeight || 'normal'}`,
+        }
       }
     },
     filters:{
@@ -111,39 +124,32 @@
       return {
         logined: false,
         userInfo: null,
-        address_url: '',
+        isSetting:'N',
+        logoutName:'[退出登录]',
+        imageRadius:'50%',
 
         //基础
-        color: '#333',
+        imageColor: '#333',
         backgroundColor: 'rgba(0,0,0,0)',
         textType: 'N', //默认水平
         radius: 0,
 
         //投影
-        is_shadow: 'Y',
+        is_shadow: 'N',
         is_shadow_bg: 0,
         is_shadow_w: 0,
 
-
         //边框
-        is_border: 'Y',
+        is_border: 'N',
         is_border_w: 0,
         is_border_c: '',
+        is_border_s:'solid',
 
         //其他
-        margin: {
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0
-        },
-        padding: {
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0
-        },
-
+        margin: {},
+        padding: {},
+        nickStyle:{},
+        logoutStyle:{},
       }
     },
     watch: {
@@ -216,21 +222,44 @@
        * @param container {object} 业务组件对象自己
        */
       init(container) {
-        this.margin = getContainerPropsValue(container, 'content.margin', {top: 20, left: 20, right: 20, bottom: 20});
-        this.padding = getContainerPropsValue(container, 'content.padding', {top: 20, left: 20, right: 20, bottom: 20});
-        this.address_url = getContainerPropsValue(container, 'content.address_url', {value: ''});
-        this.color = getContainerPropsValue(container, 'content.textColor', '#333');
+        this.margin = getContainerPropsValue(container, 'content.margin', {});
+        this.padding = getContainerPropsValue(container, 'content.padding', {});
         this.backgroundColor = getContainerPropsValue(container, 'content.backgroundColor', '#f8f8f8');
         this.textType = getContainerPropsValue(container, 'content.text_type', 'N');
+        this.radius = getContainerPropsValue(container, 'content.radius', '10');
+        this.isSetting = getContainerPropsValue(container, 'content.isSetting', 'N');
+        this.logoutName = getContainerPropsValue(container, 'content.logoutName', '[退出登录]');
+        this.imageRadius = getContainerPropsValue(container, 'content.imageRadius', '50%');
+        this.imageColor = getContainerPropsValue(container, 'content.imageColor', '#333');
 
+        //Shadow
+        this.contShadow = getContainerPropsValue(container, 'content.contShadow', {})
         this.is_shadow = getContainerPropsValue(container, 'content.is_shadow', 'N');
         this.is_shadow_bg = getContainerPropsValue(container, 'content.is_shadow_bg', '#fff');
         this.is_shadow_w = getContainerPropsValue(container, 'content.is_shadow_w', '10');
+        if(this.contShadow.type === 'Y') {
+          this.is_shadow = 'Y';
+          if(this.contShadow.value && this.contShadow.value.width) this.is_shadow_w = this.contShadow.value.width;
+          if(this.contShadow.value && this.contShadow.value.color) this.is_shadow_bg = this.contShadow.value.color;
+        }
 
+        //边框
+        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', 0);
-        this.radius = getContainerPropsValue(container, 'content.radius', '10');
+        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.nickStyle = getContainerPropsValue(container, 'content.nickStyle', {});
+        this.logoutStyle = getContainerPropsValue(container, 'content.logoutStyle', {});
+
       },
     }
   }
@@ -245,7 +274,15 @@
     justify-content: center;
     align-items: center;
     & > view:nth-child(2) {
-      margin-left: unit(10, rpx);
+      margin-left: unit(15, rpx);
+    }
+    & > view:nth-child(3) {
+      width: 26rpx;
+      height: 26rpx;
+      margin-left: unit(15, rpx);
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
   }
 
@@ -281,8 +318,7 @@
           & > image, .no-image {
             width: unit(140, rpx);
             height: unit(140, rpx);
-            margin-right: unit(30, rpx);
-            border-radius: 50%;
+            margin-right: unit(30, rpx);;
             display: flex;
             justify-content: center;
             align-items: center;