## PaidMember 知识付费会员

<script>
import data from 'docs/zh-CN/paid-member/data';

export default {
  data() {
    return {
      data
    };
  }
}
</script>

### 使用指南
#### 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
```javascript
import { PaidMember } from 'captain-ui';
```

### 代码演示
#### 显示标题和查看全部按钮
同时传show-title和show-title-all

:::demo 
```html
<template>
  <div>
    <cap-paid-member 
      show-title
      show-title-all
      :title="data.title"
      :subscriptionsCount="data.sold_out"
      :member-list="data.sub_entry">
    </cap-paid-member>
  </div>
</template>
```
:::

#### 不显示查看全部按钮
不传showTitleAll时，不展示查看全部按钮。

:::demo 
```html
<template>
  <div>
    <cap-paid-member 
      show-title
      :title="data.title"
      :member-list="data.sub_entry">
    </cap-paid-member>
  </div>
</template>
```
:::

#### 不显示标题栏
不传showTitle时，不展示标题栏。

:::demo 
```html
<template>
  <div>
    <cap-paid-member 
      :title="data.title"
      :member-list="data.sub_entry">
    </cap-paid-member>
  </div>
</template>
```
:::


### API


| 参数       | 说明      | 类型       | 默认值       | 必须      |
|-----------|-----------|-----------|-------------|-------------|
| show-title | 是否显示标题栏，默认不显示 | Boolean  | false |   |
| show-title-all | 是否显示查看全部按钮, 默认不显示 | String  | false |   |
| title | 标题 | String  | - |   |
| member-list | 内容列表 | Array  | - | 是  |

### 数据格式
#### member-list数据结构
```json
[
  {
    // 内容alais
    "alias": "1y56r22b89uet",
    // 内容标题
    "title": "不二测试",
    // 内容封面
    "cover": "https://img.yzcdn.cn/upload_files/2017/05/24/FioU5ebKIiPuCPqTibirDCzna8PN.png",
    // 是否免费试读/试听
    "is_free": 0,
    // 内容类型：图文/音频
    "media_type": 2,
    // 价格
    "price": 1,
    // 发布日期
    "publish_at": "2017-05-24 16:09:31",
    // 订阅数
    "subscriptions_count": 3,
    // 所属专栏标题
    "column_title": "不二测试专栏"
  },
  ...
]
```