user-center-card 个人中心卡片

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-user-center-card": "@retailwe/ui-user-center-card/index",
}

使用效果

个人中心卡片-未登录

个人中心卡片-未绑定手机号

外部样式自定义 & 使用插槽

使用方法

<!--- wxml 文件-- 个人中心卡片-未登录 --->
<wr-user-center-card userInfo="{{userInfo}}" authStep="{{authStep}}">
  <view slot="getuserinfo" class="get-user-info">
    <button class="reset-button" open-type="getUserInfo" bindgetuserinfo="bindgetuserinfo">
      <view class="bind-btn-define member-nick-name">点击登录</view>
    </button>
  </view>
  <view slot="getphonenumber" class="get-phone-number">
      <button class="reset-button" open-type="getPhoneNumber" bindgetphonenumber="bindgetphonenumber">
      <view class="bind-btn-define bind-btn-phone">绑定手机号</view>
    </button>
  </view>
</wr-user-center-card>


<!--- wxml 文件-- 外部样式自定义 & 使用插槽 --->
<wr-user-center-card userInfo="{{userInfo}}" isPhoneHide="{{true}}" name-class="custom-name-class" phone-class="custom-phone-class" avatar-class="custome-avatar-class">
  <view class="counts-wrapper" slot="inside">
    <view class="count" wx:for="{{countsData}}" wx:key="item" data-item="{{item}}">
      <view class="num">{{item.num <= 999 ? item.num: '999+'  }}</view>
      <view class="label">{{item.name}}</view>
    </view>
  </view>
  <view slot="outside" class="main-content">
    <wr-cell-group>
      <wr-cell title="{{'一行'}}" value="{{'balabala...'}}" border="{{true}}" />
      <wr-cell title="{{'两行'}}" value="{{'balabala...'}}" border="{{true}}" />
      <wr-cell title="{{'三行'}}" value="{{'balabala...'}}" border="{{true}}" />
      <wr-cell title="四行" value="{{'balabala...'}}" border="{{true}}" />
      <wr-cell title="很多行" value="{{'balabalabalabala...'}}" border="{{false}}" />
    </wr-cell-group>
  </view>
</wr-user-center-card>

参数说明

| 参数 | 类型 | 说明 | | ------------ | ------------------ | ---------------------------------------------------- | | uesrInfo | Object<UserInfo> | 用户的基本信息，包括头像、昵称、手机号、性别等 | | authStep? | number | 用户授权状态-步骤，默认值为1，可用值：1：未授信获取用户信息；2：未授权获取手机号； 3：完善上述授权步骤 | | bgUrl? | string | 个人中心的背景图片，可选，默认为目前标准版的背景图片 | | defaultAvatar? | string | 个人中心的未授权获取用户信息时，用户默认头像 | | isPhoneHide? | boolean | 用户手机是否隐藏中间4位数，默认false不隐藏 |

UserInfo接口

| 属性 | 类型 | 说明 | | ----------- | ----------------------------- | ---------------------------------- | | avatarUrl | string | 用户头像的url | | name | string | 用户昵称 | | phoneNumber | string? | 用户手机号，不传时即不显示手机号信息 | | gender | interger(0：未知 1：男 2：女) | 用户性别 |

外部样式类

| 类名 | 说明 | | --------------- | ------------------------------------------------- | | user-info-class | 用户信息样式类（包裹头像、名称、手机号的wrapper） | | avatar-class | 用户头像样式类 | | name-class | 用户名称样式类 | | phone-class | 用户手机号码样式类 |

自定义卡片内容

示意图

如示意图所示，提供两个插槽位置：inside和outside，前者是用户个人信息卡片内的插槽位置，后者是卡片外的插槽位置。