jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseUserInfo/JfbBaseUserInfo.vue

@@ -0,0 +1,426 @@
+<template>
+  <view
+    class="jfb-base-user-info"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-user-info__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-user-info__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-user-info__body">
+      <view class="x-line"></view>
+      <view
+        class="jfb-base-user-info__body-header"
+        :style="[boxStyleComp]"
+        v-if="userInfo !== null"
+      >
+        <view
+          class="jfb-base-user-info__body-header-left"
+          :class="{center: textType === 'N',vertical: textType === 'Y'}"
+        >
+          <template v-if="logined">
+            <image v-if="userInfo['head_url']" :src="userInfo['head_url']"></image>
+            <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: imageColor, borderRadius:imageRadius}">
+            <xd-font-icon :color="imageColor" icon="iconwode_mian" size="90"></xd-font-icon>
+          </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="isSetting === 'Y'">
+              <xd-font-icon size="26" icon="iconshezhi_mian"></xd-font-icon>
+            </view>
+          </view>
+        </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>
+  </view>
+</template>
+
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbBaseUserInfoMixin from "./JfbBaseUserInfoMixin";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins"
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  import {mapState} from 'vuex';
+  import store from "@/store";
+  import getServiceUrl from "@/common/getServiceUrl";
+  export default {
+    name: "JfbBaseUserInfo",
+    components: {
+      XdFontIcon
+    },
+    mixins: [componentsMixins,extsMixins,JfbBaseUserInfoMixin],
+    computed: {
+      ...mapState(['jfbAuthorize']),
+
+      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 ${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:{
+      getName(val){
+        return val.nickname || val['real_name'] || val['user_name'] || val['phone_number'];
+      }
+    },
+    data() {
+      return {
+        logined: false,
+        userInfo: null,
+        isSetting:'N',
+        // logoutName:'[退出登录]',
+        imageRadius:'50%',
+
+        //基础
+        imageColor: '#333',
+        backgroundColor: 'rgba(0,0,0,0)',
+        textType: 'N', //默认水平
+        radius: 0,
+
+        //投影
+        contShadow:{},
+        is_shadow: 'N',
+        is_shadow_bg: 0,
+        is_shadow_w: 0,
+
+        //边框
+        contBorder:{},
+        is_border: 'N',
+        is_border_w: 0,
+        is_border_c: '',
+
+        //其他
+        margin: {},
+        padding: {},
+        nickStyle:{},
+        logoutStyle:{},
+        rightContent: null,
+        addressUrl: '',
+        bgImage: "",
+        rightContentBgColor: "",
+        // rightContentTextColor: "",
+        rightContentPadding: "",
+        rightContentRadius: 0
+      }
+    },
+    watch: {
+      container(value,oldValue) {
+        if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      }
+    },
+    created() {
+      this.init(this.container);
+    },
+    methods: {
+      handleToLink(){
+        this.$xdUniHelper.navigateTo({
+          url: '/pages/settings/settings'
+        })
+      },
+
+      async handleLogout(){
+        // #ifdef H5
+        if (this.$configProject.isPreview) return;
+        // #endif
+
+        if (this.jfbAuthorize !== null) {
+          this.$xdShowLoading({});
+          store.dispatch('logout').then(res=>{
+            let url = this.$configProject.entry || `/${this.projectAttr.deploy_dir}/`;
+            this.$xdHideLoading();
+            this.jfbAuthorize.removeAllCardToken();
+            this.jfbAuthorize.removeAllToken()
+            this.jfbAuthorize.jumpToUserLogin(this, false, url);
+          }).catch(err=>{
+            console.error(err);
+          })
+        }
+      },
+
+      async onJfbLoad(options) {
+
+        //预览模式
+        if(this.$configProject.isPreview) {
+          jfbRootExec('getBaseUserInfo', {
+            vm: this,
+            data: {}
+          }).then(res => {
+            this.userInfo = res || {};
+            this.logined = true;
+            console.log('getBaseUserInfo', res)
+          }).catch(error => {
+            console.log('getBaseUserInfo', error)
+          });
+          return;
+        }
+
+        this.logined = await this.jfbAuthorize.checkUserLogin(true, this, false);
+        if(!this.logined) return;
+
+        jfbRootExec('getBaseUserInfo', {
+          vm: this,
+          data: {}
+        }).then(res=>{
+          this.userInfo = res || {};
+          console.log('getBaseUserInfo',res)
+        }).catch(error=>{
+          console.log('getBaseUserInfo',error)
+        })
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        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.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
+        })
+      }
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbBaseUserInfoLess.less";
+
+  .vertical-user {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    & > view:nth-child(2) {
+      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;
+    }
+  }
+
+  .jfb-base-user-info {
+    &__body{
+      &-header {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        background-size: cover;
+        background-repeat: no-repeat;
+
+        &-left {
+          display: flex;
+          align-items: center;
+          flex: 1;
+
+          &.vertical {
+            width: 100%;
+            flex-direction: column;
+
+            & > view:last-child {
+              width: 100%;
+              text-align: center;
+              flex-shrink: 0;
+              padding-top: unit(20, rpx);
+            }
+
+            & > image, .no-image {
+              margin-right: unit(0, rpx);
+            }
+          }
+
+          & > image, .no-image {
+            width: unit(140, rpx);
+            height: unit(140, rpx);
+            margin-right: unit(30, rpx);;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-shrink: 0;
+            overflow: hidden;
+          }
+
+          .no-image {
+            border: unit(4, rpx) solid #e5e5e5;
+          }
+
+          & > view {
+            color: #383838;
+            font-size: unit(32, rpx);
+          }
+        }
+
+        & > view:nth-child(2) {
+          flex-shrink: 0;
+        }
+      }
+    }
+
+    .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;
+      }
+    }
+  }
+</style>

package/src/components/JfbBaseUserInfo/JfbBaseUserInfoLess.less

@@ -0,0 +1,79 @@
+/**
+* @desc 获取绝对路径完整地址
+* @param @path
+**/
+//例如：https://image.jufubao.cn/20220501010108/image/bg/default_gonghui_bg.png
+@basePath: 'business/';
+@doMain: '//sandbox-img.jufubao.cn/';
+
+.getBusinessImageUrl(@path, @size: 'size8') {
+  @url: "@{doMain}@{basePath}@{path}?x-oss-process=style/@{size}";
+  background-image: url(@url);
+}
+
+//start
+.jfb-base-user-info {
+  box-sizing: border-box;
+
+  &__body{
+      position: relative;
+      overflow: hidden;
+      z-index: 2
+  }
+
+  &.editx,&.editx:hover {
+    position: relative;
+    min-height: unit(100, rpx);
+    z-index: 3;
+    &::after {
+      border: 2rpx dashed blue;
+      content: " ";
+      position: absolute;
+      top:0;
+      left:0;
+      bottom:0;
+      right:0;
+      z-index: 4;
+      cursor: pointer;
+    }
+
+  }
+
+
+  &__edit {
+    cursor: pointer;
+    position: absolute;
+    right: unit(0, rpx);
+    top: unit(-52, rpx);
+    height: unit(50, rpx);
+    line-height: unit(50, rpx);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, .6);
+    border-radius: unit(10, rpx);
+    box-shadow: 0 0 10px rbga(0, 0, 0, 0.3);
+    color: #fff;
+    font-size: unit(22, rpx);
+
+    &-icon{
+      padding: 0 unit(20, rpx);
+    }
+
+    &.editx {
+      box-sizing: border-box;
+
+    }
+  }
+}
+//end
+
+
+/**notPreview**/
+.jfb-base-user-info {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/

package/src/components/JfbBaseUserInfo/JfbBaseUserInfoMixin.js

@@ -0,0 +1,30 @@
+'use strict';
+
+
+//@AttrImport
+import Attr from "./Attr";
+//@EndAttrImport
+
+
+export default {
+  data() {
+    return {
+      //#ifdef H5
+      
+      //@AttrData
+      Attr:{}, //对外开发编辑属性
+      //@EndAttrData
+      
+      // #endif
+      cssRoot: 'jfb-base-user-info'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}

package/src/components/JfbBaseUserInfo/Mock.js

@@ -0,0 +1,20 @@
+'use strict';
+
+module.exports = {
+  getBaseUserInfo: {
+    "user_name": "15801505541",
+    "user_code": "97SJSG667V",
+    "nickname": "草鸡无敌飞侠",
+    "real_name": "",
+    "head_url": "https://sandbox-img.jufubao.cn//uploads/20230217/dc6f1817ae3714814328fcff55925d00.jpg?x-oss-process=style/size8",
+    "province_code": "",
+    "city_code": "",
+    "province_name": "",
+    "city_name": "",
+    "sex": "",
+    "sex_name": "未知",
+    "birthday_date": "",
+    "phone_number": "15801505541",
+    "request_id": "44cf5b8402ff7c2e"
+  }
+}

package/src/components/JfbBaseUserOrder/Api.js

@@ -0,0 +1,19 @@
+'use strict';
+
+/**
+ * @description 我的订单
+ * @type {*[]}
+ */
+module.exports = [
+  {
+    mapFnName: 'getBaseOrderListCount',
+    title: '获取我的订单记录',
+    path: '/order/v1/order/aggs-count',
+    isRule: false,
+    params: {},
+    isConsole: true,
+    disabled: true,
+  },
+
+
+];