jufubao-base 1.0.201 → 1.0.204

package/src/components/JfbBaseUserInfo/Attr.js

@@ -1,5 +1,6 @@
 'use strict';
 import {oldTonNewBorAndSha, checkValue} from '@/utils/AttrTools'
+import ICONS from "@/ICONS.js"
 
 /**
  * @description 当表单组件中有联动操作时候，使用方法进行返回
@@ -33,16 +34,31 @@ export default {
         ]
       },
       {
-        label: '退出登录自定义名称:',
-        ele: 'el-input',
-        type: 'text',
-        groupKey:'content',
-        valueKey: 'logoutName',
-        value: data['logoutName'] || '',
-        notice: '退出登录自定义名称设置，默认值：<span style="color:red">[退出登录]</span>',
-        inline: false,
-        className: 'input60',
+        label: "头像右侧内容:",
+        ele: "xd-radio-self",
+        valueKey: "rightContent",
+        value: data.rightContent || {
+          type: "logout",
+          name: "退出登录",
+          icon: "",
+          iconName: "",
+        },
+        groupKey: "content",
+        setting: {
+          icons: ICONS
+        }
       },
+      // {
+      //   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',
@@ -85,6 +101,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-site-select-list',
@@ -164,30 +200,6 @@ export default {
             });
         },
       },
-      {
-        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',
@@ -351,6 +363,95 @@ export default {
           {label: '显示', value: 'Y'},
         ]
       },
+      {
+        label: "头像右侧内容配置",
+        ele: "title",
+        size: "small",
+        groupKey: "style"
+      },
+      {
+        label: "头像右侧内容背景颜色:",
+        ele: "xd-color",
+        valueKey: "rightContentBgColor",
+        value: data.rightContentBgColor || '',
+        placeholder: '请选择头像右侧内容背景颜色',
+        groupKey: "style",
+      },
+      {
+        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([])
+            });
+        },
+      },
+      // {
+      //   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'),
+        },
+        inline: false,
+      },
       {
         label: '',
         ele: 'slot',

package/src/components/JfbBaseUserInfo/JfbBaseUserInfo.vue

@@ -36,16 +36,47 @@
           <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="[logoutStyleComp]">{{logoutName}}</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"
+                :style="[logoutStyleComp]"
+                @click="handleLogout()"
+              >
+                <xd-font-icon v-if="rightContent.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"
+                :style="[logoutStyleComp]"
+                @click="handleAddress()"
+              >
+                <xd-font-icon v-if="rightContent.icon" class="xd-font-icon" :icon="rightContent.icon" :size="28"></xd-font-icon>
+                {{ rightContent.name || '地址' }}
+              </view>
             </view>
             <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="[logoutStyleComp]">{{logoutName}}</view>
+        <view v-if="logined && textType ==='N' && rightContent && rightContent.type !== 'hidden'" class="logout" :style="[logoutBtnStyle]">
+          <view v-if="rightContent && rightContent.type === 'logout'" class="right_cont_i"
+            :style="[logoutStyleComp]"
+             @click="handleLogout()"
+          >
+            <xd-font-icon v-if="rightContent.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"
+            :style="[logoutStyleComp]"
+            @click="handleAddress()"
+          >
+            <xd-font-icon v-if="rightContent.icon"class="xd-font-icon" :icon="rightContent.icon" :size="28"></xd-font-icon>
+            {{ rightContent.name || '地址' }}
+          </view>
         </view>
       </view>
     </view>
@@ -62,6 +93,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: {
@@ -86,7 +118,8 @@
         })
         return {
           margin: this.getMarginAndPadding(this.margin, 20),
-          background : this.backgroundColor,
+          backgroundColor : this.backgroundColor,
+          backgroundImage: `url(${this.bgImage})`,
           padding: this.getMarginAndPadding(this.padding, 20),
           boxShadow: shadow,
           borderRadius: this.radius + 'rpx',
@@ -117,6 +150,18 @@
           color: `${this.logoutStyle.color || '#333'}`,
           fontWeight: `${this.logoutStyle.fontWeight || 'normal'}`,
         }
+      },
+      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:{
@@ -129,7 +174,7 @@
         logined: false,
         userInfo: null,
         isSetting:'N',
-        logoutName:'[退出登录]',
+        // logoutName:'[退出登录]',
         imageRadius:'50%',
 
         //基础
@@ -155,6 +200,13 @@
         padding: {},
         nickStyle:{},
         logoutStyle:{},
+        rightContent: null,
+        addressUrl: '',
+        bgImage: "",
+        rightContentBgColor: "",
+        // rightContentTextColor: "",
+        rightContentPadding: "",
+        rightContentRadius: 0
       }
     },
     watch: {
@@ -233,7 +285,7 @@
         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.logoutName = getContainerPropsValue(container, 'content.logoutName', '[退出登录]');
         this.imageRadius = getContainerPropsValue(container, 'content.imageRadius', '50%');
         this.imageColor = getContainerPropsValue(container, 'content.imageColor', '#333');
 
@@ -252,8 +304,25 @@
 
         this.nickStyle = getContainerPropsValue(container, 'content.nickStyle', {});
         this.logoutStyle = getContainerPropsValue(container, 'content.logoutStyle', {});
+        this.rightContent = getContainerPropsValue(container, 'content.rightContent', {
+          type: "logout",
+          name: "退出登录",
+          icon: "",
+          iconName: "",
+        });
+        this.addressUrl = getContainerPropsValue(container, 'content.addressUrl', {value: ""}).value;
+        this.bgImage = getServiceUrl(getContainerPropsValue(container, 'content.bgImage', '').url);
+        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);
 
       },
+      handleAddress(){
+        this.$xdUniHelper.navigateTo({
+          url: this.addressUrl
+        })
+      }
     }
   }
 
@@ -264,6 +333,7 @@
 
   .vertical-user {
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     & > view:nth-child(2) {
@@ -285,7 +355,8 @@
         display: flex;
         align-items: center;
         justify-content: flex-start;
-
+        background-size: cover;
+        background-repeat: no-repeat;
 
         &-left {
           display: flex;
@@ -337,6 +408,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;
       }