# 组件名称
subscribe-activity
#版本要求
基础库： 3.150.1 以及上
手百版本：11.19及以上
活动预约组件。可在小程序内配置预约组件，实现用户对活动消息的订阅和取消，提供默认样式，并支持自定义样式。有预约活动需求的开发者，可先联系产品同学：wangqiuchen，提供活动信息。

# 可配置属性与控制的功能
|属性名 | 类型 | 必填 | 默认值 |描述 |
|---|---|---|---|---|
|templateId|String|是||开发者线下提供活动信息后，由百度侧生成，给预约用户推送消息时所用的模板库ID|
|subscribeId|String|是||开发者线下提供活动信息后，由百度侧生成活动ID|
|backgroundColor|String|否|blue|默认有四种背景色可选：blue; white; opacity; none|
|external-subscribe-class|String|否||提供开发外部样式类，供开发者自定义组件样式|
|bindcancelsubscribe|EventHandle|||取消订阅回调|
|bindaddsubscribe|EventHandle|||添加订阅回调|

###bindcancelsubscribe方法参数返回值
|字段名|类型|描述
|--|--|-
|type|String|订阅的操作类型：query（查询订阅）cancel（取消订阅）
|form_id|String|对应提交form 表单时返回的 formId。当传入参数 type 为 query 时有此字段
|status|Number|订阅状态；1 表示已订阅，0 表示已取消订阅，-1 表示未找到此订阅。当传入参数为 query 时或 type 为 cancel 且未找到此订阅时有此字段
|update_time|Number|订阅更新时间
|app_key|String|小程序唯一标识

###bindaddsubscribe 方法参数返回值
|status| message
|---|---|---|---|
|500101 |用户永久拒绝授权
|500102|用户单次拒绝授权
|500103|用户取消授权
|500104|请求模板内容失败 
|500105 |请求formId失败

* 安装组件
```    
npm install @smt-ui/content-component
```

* 在 页面json 文件中
```
{
    "navigationBarTitleText": "标题",
    "usingComponents": {
        "c-subscribe-activity": "@smt-ui/content-component/src/subscribe-activity"
    }
}
```

* 在 swan 文件中

```
<view class="subscribe-demo">
    <c-subscribe class="subscribe" external-subscribe-class="external-subscribe-class" template-id="{{templateId}}" subscribe-id="{{subscribeId}}" background-color="{{background-color}}" bindcancelsubscribe="cancelsubscribe" bindaddsubscribe="addsubscribe"></c-subscribe>
</view>
```

* 在 js 文件中
```
Page({
    data: {
        templateId: 'BD1201',
        subscribeId: '41d8511f1586148e855f499f0499694a',
        backgroundColor: 'blue'
    },
    cancelsubscribe(e) {
        console.log(e)
        swan.showModal({
            title: 'cancelsubscribe',
            content: '' + JSON.stringify(e)
        });
    },
    addsubscribe(e) {
        swan.showModal({
            title: 'addsubscribe',
            content: '' + JSON.stringify(e)
        });
    }
})
```

* 在 css 文件中
```
.subscribe-demo {
    color: #bbb;
    display: flex;
    align-items:center;
    justify-content:space-around;
}
.external-subscribe-class {
    color: red
}
```