@retailwe/ui-user-center-card NPM

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	用户手机号码样式类