npm package: @retailwe/ui-user-center-card
Description: ### 引入
Latest version: 0.0.12

## user-center-card 个人中心卡片

### 引入

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

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

### 使用效果

个人中心卡片-未登录

![image-20200713190455939](https://cdn.qs.qq.com/mp/example/user-center-card-login-md.png)

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

![image-20200713190455939](https://cdn.qs.qq.com/mp/example/user-center-card-bind-md.png)

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

![image-20200713190528473](https://cdn.qs.qq.com/mp/example/user-center-card-custom-md.png)

### 使用方法

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

### 自定义卡片内容

示意图

<img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1ggpho38voij30fz0sydm6.jpg" alt="示意图" style="zoom:50%;" />

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