jufubao-base 1.0.197-beta3 → 1.0.197-beta5

package/src/components/JfbBaseUserInfo/Attr.js

@@ -1,4 +1,5 @@
 'use strict';
+import ICONS from "@/ICONS.js"
 /**
  * @description 当表单组件中有联动操作时候，使用方法进行返回
  */
@@ -26,6 +27,16 @@ export default {
           {label: '垂直', value: 'Y'},
         ]
       },
+      {
+        label: "头像右侧内容:",
+        ele: "xd-radio-self",
+        valueKey: "rightContent",
+        value: data.rightContent,
+        groupKey: "content",
+        setting: {
+          icons: ICONS
+        }
+      },
       {
         label: '内容文字颜色:',
         ele: 'xd-color',
@@ -35,6 +46,26 @@ export default {
         placeholder: '请选择内容文字颜色',
         classNmae: 'input80',
       },
+      {
+        label: '内容背景图片:', //label
+        ele: 'xd-upload', //package 名称
+        valueKey: 'bgImage', //form[valueKey]
+        value: data.bgImage || null, //v-model
+        defaultValue: data.bgImage || null, //默认图片对象
+        groupKey: "style",
+        slot: true, //按钮是否使用slot
+        oneWidth: 200, //单个图片显示宽度
+        oneHeight: 100, //单个图片显示高度
+        elinputClassName: 'input40',
+        tipsformet: '上传文件格式：@imageType@，不超过@size@MB.',
+        type: ['jpg', 'png', 'jpeg'],
+        styleType: 'one', //其值：one=>单文件上传 auth=>证件正反面上传 list=>多文件上传
+        uploadType: 'aliyun', //''=>API服务上传  qiniu=>七牛云OSS上传  aliyun=> 阿里云OSS上传
+        size: 5, //5M
+        action: 'aliyun',
+        sort: true, //当上传图片列表时候，是否启用排序
+        maxlen: 100, //当上传图片列表时候，最大数量数量
+      },
       {
         label: '内容背景颜色:',
         ele: 'xd-color',
@@ -97,6 +128,7 @@ export default {
         label: '投影设置',
         size: 'small',
         groupKey:'style',
+        hidden: true,
       },
       {
         label: '是否有投影:',
@@ -110,7 +142,8 @@ export default {
         list: [
           {label: '是', value: 'Y'},
           {label: '否', value: 'N'},
-        ]
+        ],
+        hidden: true,
       },
       data['is_shadow'] === 'Y' && {
         label: '投影颜色:',
@@ -120,6 +153,7 @@ export default {
         value: data['is_shadow_bg'] || '',
         placeholder: '请选择投影颜色',
         classNmae: 'input80',
+        hidden: true,
       },
       data['is_shadow'] === 'Y' && {
         label: '投影范围:',
@@ -142,12 +176,41 @@ export default {
               console.error(error);
             });
         },
+        hidden: true,
+      },
+      {
+        label: "边框阴影设置：",
+        ele: "xd-shadow",
+        valueKey: "boxShadow",
+        value: data['boxShadow'] || null,
+        groupKey:'style',
+        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",
+        valueKey: "boxBorder",
+        value: data['boxBorder'] || null,
+        groupKey:'style',
+        setting: {
+          selected:'N'
+        },
       },
       {
         ele: 'title',
         label: '边框设置',
         size: 'small',
         groupKey:'style',
+        hidden: true,
       },
       {
         label: '是否有边框:',
@@ -161,7 +224,8 @@ export default {
         list: [
           {label: '是', value: 'Y'},
           {label: '否', value: 'N'},
-        ]
+        ],
+        hidden: true,
       },
       data['is_border'] === 'Y' && {
         label: '边框颜色:',
@@ -171,6 +235,7 @@ export default {
         value: data['is_border_c'] || '',
         placeholder: '请选择边框颜色',
         classNmae: 'input80',
+        hidden: true,
       },
       data['is_border'] === 'Y' && {
         label: '边框大小:',
@@ -181,6 +246,75 @@ export default {
         value: data['is_border_w'] || '',
         placeholder: '请输入边框颜色',
         className: 'input80',
+        hidden: true,
+      },
+      {
+        label: "头像右侧内容配置",
+        ele: "title",
+        size: "small",
+        groupKey: "style"
+      },
+      {
+        label: "头像右侧内容背景颜色:",
+        ele: "xd-color",
+        valueKey: "rightContentBgColor",
+        value: data.rightContentBgColor || '',
+        placeholder: '请选择头像右侧内容背景颜色',
+        groupKey: "style",
+      },
+      {
+        label: "头像右侧内容文字颜色:",
+        ele: "xd-color",
+        valueKey: "rightContentTextColor",
+        value: data.rightContentTextColor || '',
+        placeholder: '请选择头像右侧内容文字颜色',
+        groupKey: "style",
+      },
+      {
+        label: "头像右侧内容内边距配置:",
+        ele: 'xd-margin-padding',
+        valueKey: 'rightContentPadding',
+        groupKey: "style",
+        value: data.rightContentPadding || {},
+        setting: {
+          type: 'padding',
+        },
+        inline: false,
+        notice: '设置外填充，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">20</span>像素',
+      },
+      {
+        label: "头像右侧内容圆角:",
+        ele: 'xd-site-select-list',
+        valueKey: 'rightContentRadius',
+        value: data['rightContentRadius'] || '',
+        groupKey:'style',
+        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',
+        valueKey: 'addressUrl',
+        groupKey:'advanced',
+        placeholder: '请选择编辑地址路径',
+        value: data['addressUrl'] || null,
+        setting: {
+          router: XdBus.getParentApi('getPagesTree'),
+        },
+        rules: [
+          {required: true, message: '请选择编辑地址路径', trigger: 'change'},
+        ],
+        inline: false,
       },
       {
         label: '',

package/src/components/JfbBaseUserInfo/JfbBaseUserInfo.vue

@@ -17,15 +17,7 @@
       <view class="x-line"></view>
       <view
         class="jfb-base-user-info__body-header"
-        :style="{
-          margin: outMargin,
-          background:backgroundColor,
-          color: color,
-          padding: outPadding,
-          boxShadow: shadow,
-          borderRadius: radius + 'rpx',
-          border: borderBox
-        }"
+        :style="[userWrapBoxStyle]"
         v-if="userInfo !== null"
       >
         <view
@@ -41,19 +33,42 @@
           <view v-else class="no-image" :style="{borderColor: color}">
             <xd-font-icon :color="color" 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 class="logout" @click="handleLogout()">
-              <view :style="{color:color}">[退出登录]</view>
+          <view v-if="logined && textType ==='N'"class="user_name" :style="{color:color}">{{userInfo|getName}}</view>
+          <view class="vertical-user" v-if="logined && textType ==='Y'" :style="{color:color}" style="flex-direction: column;">
+            <view class="user_name">{{userInfo|getName}}</view>
+            <view v-if="rightContent && rightContent.type !== 'hidden'"
+              class="logout" style="margin-top: 16rpx;"
+              :style="[logoutBtnStyle]"
+            >
+              <view v-if="rightContent && rightContent.type === 'logout'"
+                class="right_cont_i"
+                @click="handleLogout()"
+              >
+                <xd-font-icon class="xd-font-icon" :icon="rightContent.icon" :size="28"></xd-font-icon>
+                {{rightContent.name || '退出登录'}}
+              </view>
+              <view v-if="rightContent && rightContent.type === 'addr'"
+                class="right_cont_i"
+                @click="handleAddress()"
+              >
+                <xd-font-icon class="xd-font-icon" :icon="rightContent.icon" :size="28"></xd-font-icon>
+                {{ rightContent.name || '地址' }}
+              </view>
             </view>
             <view @click="handleToLink()" v-if="0">
               <xd-font-icon :color="color" size="40" 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 @click="handleLogout()" v-if="logined && textType ==='N'" class="logout" :style="[logoutBtnStyle]">
+          <view v-if="rightContent && rightContent.type === 'logout'" class="right_cont_i" @click="handleLogout()">
+            <xd-font-icon class="xd-font-icon" :icon="rightContent.icon" :size="28"></xd-font-icon>
+            {{rightContent.name || '退出登录'}}
+          </view>
+          <view v-if="rightContent && rightContent.type === 'addr'" class="right_cont_i" @click="handleAddress()">
+            <xd-font-icon class="xd-font-icon" :icon="rightContent.icon" :size="28"></xd-font-icon>
+            {{ rightContent.name || '地址' }}
+          </view>
         </view>
       </view>
     </view>
@@ -70,6 +85,7 @@
   import { getContainerPropsValue } from "@/utils/xd.base";
   import {mapState} from 'vuex';
   import store from "@/store";
+  import getServiceUrl from "@/common/getServiceUrl";
   export default {
     name: "JfbBaseUserInfo",
     components: {
@@ -100,6 +116,41 @@
       borderBox(){
         if (this.is_border === 'Y') return `${this.is_border_w}rpx solid ${this.is_border_c}`;
         else return '0';
+      },
+      userWrapBoxStyle(){
+
+        let border = this.getBorderCompatibleOldStyle(this.boxBorder, {
+          type: this.is_border,
+          width: this.is_border_w,
+          color: this.is_border_c
+        })
+        let boxShadow = this.getShadowCompatibleOldStyle(this.boxShadow, {
+          type: this.is_shadow,
+          width: this.is_shadow_w,
+          color: this.is_shadow_bg
+        })
+
+        return {
+          margin: this.outMargin,
+          backgroundColor: this.backgroundColor,
+          backgroundImage: `url(${this.bgImage})`,
+          color: this.color,
+          padding: this.outPadding,
+          boxShadow: boxShadow,
+          border: border
+        }
+      },
+      logoutBtnStyle(){
+        let padding = `${this.checkValue(this.rightContentPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.rightContentPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.rightContentPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.rightContentPadding.left, 20)}rpx`;
+        return {
+          backgroundColor: this.rightContentBgColor,
+          color: this.rightContentTextColor || this.color,
+          padding: padding,
+          borderRadius: this.rightContentRadius + 'rpx'
+        }
       }
     },
     filters:{
@@ -143,7 +194,15 @@
           right: 0,
           bottom: 0
         },
-
+        rightContent: null,
+        addressUrl: "",
+        bgImage: "",
+        boxBorder: "",
+        boxShadow: "",
+        rightContentBgColor: "",
+        rightContentTextColor: "",
+        rightContentPadding: "",
+        rightContentRadius: 0
       }
     },
     watch: {
@@ -231,7 +290,22 @@
         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.rightContent = getContainerPropsValue(container, 'content.rightContent', {});
+        this.addressUrl = getContainerPropsValue(container, 'content.addressUrl', {value: ""}).value;
+        this.bgImage = getServiceUrl(getContainerPropsValue(container, 'content.bgImage', '').url);
+        this.boxBorder = getContainerPropsValue(container, 'content.boxBorder', '');
+        this.boxShadow = getContainerPropsValue(container, 'content.boxShadow', '');
+        this.rightContentBgColor = getContainerPropsValue(container, 'content.rightContentBgColor', 'transparent');
+        this.rightContentTextColor = getContainerPropsValue(container, 'content.rightContentTextColor', '');
+        this.rightContentPadding = getContainerPropsValue(container, 'content.rightContentPadding', {});
+        this.rightContentRadius = getContainerPropsValue(container, 'content.rightContentRadius', 0);
+        console.log("this.rightContentRadius", this.rightContentRadius);
       },
+      handleAddress(){
+        this.$xdUniHelper.navigateTo({
+          url: this.addressUrl
+        })
+      }
     }
   }
 
@@ -251,10 +325,16 @@
 
   .jfb-base-user-info {
     &__body{
+      .user_name{
+        font-size: 40rpx;
+        font-weight: 500;
+      }
       &-header {
         display: flex;
         align-items: center;
         justify-content: flex-start;
+        background-size: cover;
+        background-repeat: no-repeat;
 
 
         &-left {
@@ -308,6 +388,16 @@
 
     .logout {
       font-size: unit(24, rpx);
+      .right_cont_i{
+        display: flex;
+        align-items: center;
+        font-size: 28rpx;
+        color: inherit;
+        font-weight: 400;
+        .xd-font-icon{
+          margin-right:8rpx;
+        }
+      }
       & > view {
         cursor: pointer;
       }