captain-ui
Version:
有赞vue wap业务组件库
112 lines (97 loc) • 2.23 kB
Markdown
## 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": "不二测试专栏"
},
...
]
```