（即将废弃）product-follow-button 商品收藏按钮
收藏注意
商品收藏按钮提供了商品收藏的能力，可以使用该组件引导用户收藏小程序所属店铺下的商品。
效果示例：
前置条件
仅在行业 SDK 上才支持，需要在代码中配置行业 SDK 的权限：行业 SDK 的权限配置。当完成行业 SDK 的权限配置后，可通过 tt.canIUse('product-follow-button') 判断该组件是否可用。
另外在使用组件时需要在页面
index.json 文件中进行引入。
{ "usingComponents": { "product-follow-button": "ext://industry/product-follow-button" } }
Tip：使用该组件时需要用户身份信息，请确保在调用接口前，用户已经登录宿主 APP。
属性说明
属性名 | 类型 | 默认值 | 是否必填 | 说明 |
shop-id | string | -- | 是 | 店铺 ID |
product-id | string | -- | 是 | 商品 ID |
hidden | boolean | false | 否 | 按钮是否显示 |
disabled | boolean | false | 否 | 按钮是否禁用 |
no-style | boolean | false | 否 | 是否关闭默认样式，关闭后仅剩按钮文案，可配合其它样式属性进行充分的样式自定义 |
size | string | mini | 否 | 按钮大小，可取值 default、mini |
style | string | -- | 否 | 按钮內联样式 |
class | string | -- | 否 | 按钮通用样式类 |
disabled-class-name | string | -- | 否 | 禁用状态下的按钮样式类 |
followed-class-name | string | -- | 否 | 已收藏状态下的按钮样式类 |
followed-text | string | 已收藏 | 否 | 已收藏状态下的按钮文案 |
unfollowed-class-name | string | -- | 否 | 未收藏状态下的按钮样式类 |
unfollowed-text | string | 收藏 | 否 | 未收藏状态下的按钮文案 |
bind:followed | function | -- | 否 | 商品收藏成功回调 |
bind:unfollowed | function | -- | 否 | 商品取消收藏成功回调 |
bind:error | function | -- | 否 | 组件发生错误回调 |
代码示例
<product-follow-button shop-id="12345678" product-id="12345678" bind:followed="handleFollowed" bind:unfollowed="handleUnfollowed" bind:error="handleError" ></product-follow-button>
自定义样式说明
- •可以传入自定义的类名
followed-class-name 和 unfollowed-class-name 来覆盖已收藏和未收藏状态下的按钮样式。- •按钮禁用的样式可以采用类选择器实现以进行自定义覆盖。
- •也可以关闭所有默认样式
no-style 进行完全的自定义实现。<product-follow-button shop-id="12345678" product-id="12345678" followed-class-name="followed" unfollowed-class-name="unfollowed" disabled-class-name="disabled" ></product-follow-button>
.followed { background-color: #f4f5f6; } .followed.disabled { background-color: #fdfdfd; } .unfollowed { background-color: #f85959; } .unfollowed.disabled { background-color: #fcc0c1; }
bind:followed 说明
- •当商品收藏成功时触发。
- •无参数。
- •使用场景例如当用户收藏成功后给予一些优惠等。
bind:unfollowed 说明
- •当商品取消收藏成功时触发。
- •无参数
bind:error 说明
- •当错误发生时触发。
- •错误原因可能为网络错误、业务错误等，具体错误内容见本文错误码说明。
代码示例：
function handleError(event) { const { errMsg, errNo } = event.detail; }
错误码说明
errNo | errMsg | 说明 |
160502 | Fail to get follow state | 获取当前用户对指定商品的收藏状态失败 |
160503 | Fail to follow | 收藏失败 |
160504 | Fail to unfollow | 取消收藏失败 |
