jufubao-base 1.0.197-beta1 → 1.0.197-beta11

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="[boxStyleComp]"
         v-if="userInfo !== null"
       >
         <view
@@ -34,26 +26,57 @@
         >
           <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 class="logout" @click="handleLogout()">
-              <view :style="{color:color}">[退出登录]</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 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="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 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>
@@ -70,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: {
@@ -79,27 +103,65 @@
     computed: {
       ...mapState(['jfbAuthorize']),
 
-      outMargin() {
-        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() {
-        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`;
-        str = `${str} ${this.checkValue(this.padding.left, 20)}rpx`;
-        return str
+      boxStyleComp(){
+        let border = this.getBorderCompatibleOldStyle(this.contBorder, {
+          color: this.is_border_c,
+          width: this.is_border_w,
+          type: this.is_border,
+          style: 'solid'
+        })
+
+        let shadow = this.getShadowCompatibleOldStyle(this.contShadow, {
+          color: this.is_shadow_bg,
+          width: this.is_shadow_w,
+          type: this.is_shadow,
+        })
+        return {
+          margin: this.getMarginAndPadding(this.margin, 20),
+          backgroundColor : this.backgroundColor,
+          backgroundImage: `url(${this.bgImage})`,
+          padding: this.getMarginAndPadding(this.padding, 20),
+          boxShadow: shadow,
+          borderRadius: this.radius + 'rpx',
+          border: border,
+
+        }
       },
+
       shadow(){
         if(this.is_shadow === 'Y') return  `0 0 ${this.is_shadow_w}rpx ${this.is_shadow_bg}`;
         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'}`,
+        }
+      },
+      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:{
@@ -111,39 +173,40 @@
       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',
+        contShadow:{},
+        is_shadow: 'N',
         is_shadow_bg: 0,
         is_shadow_w: 0,
 
-
         //边框
-        is_border: 'Y',
+        contBorder:{},
+        is_border: 'N',
         is_border_w: 0,
         is_border_c: '',
 
         //其他
-        margin: {
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0
-        },
-        padding: {
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0
-        },
-
+        margin: {},
+        padding: {},
+        nickStyle:{},
+        logoutStyle:{},
+        rightContent: null,
+        addressUrl: '',
+        bgImage: "",
+        rightContentBgColor: "",
+        // rightContentTextColor: "",
+        rightContentPadding: "",
+        rightContentRadius: 0
       }
     },
     watch: {
@@ -216,22 +279,50 @@
        * @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.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');
+        this.contShadow = getContainerPropsValue(container, 'content.contShadow', {})
 
+        //边框
         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.contBorder = getContainerPropsValue(container, 'content.contBorder', {});
+
+
+        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
+        })
+      }
     }
   }
 
@@ -242,10 +333,19 @@
 
   .vertical-user {
     display: flex;
+    flex-direction: column;
     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;
     }
   }
 
@@ -255,7 +355,8 @@
         display: flex;
         align-items: center;
         justify-content: flex-start;
-
+        background-size: cover;
+        background-repeat: no-repeat;
 
         &-left {
           display: flex;
@@ -281,8 +382,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;
@@ -308,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;
       }