coupon-card
收藏我的收藏
收藏基础库 3.43.0.0 开始支持本组件。
优惠券卡片（按钮），支持以卡片或者按钮的形式展示优惠券，优惠券有立即领取、立即使用、已过期、已使用四种状态，点击立即领取会进行优惠券的领取，点击立即使用则可以自定义跳转店铺、商详页、单店购物车、小程序页面等。
前置条件
- 1.参考 电商小程序接入指南 完成小程序及资质的准备；
- 2.参考 申请行业插件 完成插件的申请，注意只有小程序拥有电商类目资质才可见申请入口；
- 3.参考 使用行业插件 进行能力的调用；
行业插件在抖音 App 版本 31.8.0 及以上，小程序基础库版本 3.4x.0.0 及以上时支持。
在使用组件时需要在页面
index.json 文件中进行引入。
{ "usingComponents": { "coupon-card": "tt95aee3130ae1cbe911://coupon-card" } }
Tip：使用该组件时需要用户身份信息，请确保在调用接口前，用户已经登录宿主 APP。
效果示例
属性说明
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
shop-id | string | -- | 是 | 当前小程序绑定的抖音小店 id |
|
coupon-id | string | -- | 是 | 优惠券 id |
|
style | string | -- | 否 | 样式 |
|
class | string | -- | 否 | 类名 |
|
is-show-button-only | boolean | false | 否 | 是否只展示 button |
|
title | string | 专享优惠券 | 否 | 优惠券标题 |
|
sub-title | string | 领取后前往店铺使用 | 否 | 优惠券副标题 |
|
button-options | ButtonOptions | -- | 否 | 按钮选项，包括各个状态的文字及背景颜色、文字颜色 |
|
img-url | string | 否 | 优惠券卡片图片 URL |
| |
modal-options | ModalOptions | -- | 否 | 点击领取时弹窗的选项 |
|
is-show-coupon-info | boolean | false | 否 | 默认是否展示优惠券卡片中具体的优惠券信息 |
|
bind:error | function | -- | 否 | 失败回调 |
|
bind:success | function | -- | 否 | 成功回调 |
|
bind:use | function | -- | 否 | 点击使用回调，可在该事件中调用其他跳转api跳转各类页面 |
|
ButtonOptions类型说明
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
unappliedText | string | 点击领取 | 否 | 未领取优惠券状态下 button 文字 |
|
appliedText | string | 立即使用 | 否 | 已领取优惠券状态下 button 文字 |
|
expiredText | string | 已过期 | 否 | 已过期优惠券状态下 button 文字 |
|
usedText | string | 已使用 | 否 | 已使用优惠券状态下 button 文字 |
|
activeBackgroundColor | string | rgb(201, 54, 37) | 否 | 激活状态下（未领取或已领取） button 背景颜色 |
|
activeColor | string | white | 否 | 激活状态下（未领取或已领取） button 文字颜色 |
|
disableBackgroundColor | string | rgb(212, 153, 140) | 否 | 未激活状态下（已过期或已使用） button 背景颜色 |
|
disableColor | string | rgb(252, 247, 247) | 否 | 未激活状态下（已过期或已使用） button 文字颜色 |
|
ModalOptions类型说明
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
title | string | 领取优惠券 | 否 | Modal 标题 |
|
content | string | 是否确认领取优惠券 | 否 | Modal 内容 |
|
confirmText | string | 确认领取 | 否 | 确认按钮文字 |
|
confirmColor | string | #F85959 | 否 | 确认按钮文字颜色（必须用 16 进制形式） |
|
showCancel | boolean | true | 否 | 是否展示返回按钮 |
|
cancelText | string | 我再想想 | 否 | 返回按钮文字 |
|
cancelColor | string | #000000 | 否 | 返回按钮文字颜色（必须用 16 进制形式） |
|
bind:error 说明
- •当错误发生时触发。
- •错误原因可能为参数校验不合法、业务错误等，具体错误内容见本文 错误码说明
代码示例：
// bind:error 代码示例 handleJoinMemberError(event) { const { errMsg ，errNo} = event.detail; }
错误码说明
errNo | errMsg | 说明 | 最低支持版本 |
21501 | Fail to fetch ecom open api | 网络错误，请检查网络状况 | Android 2.74.0.0 iOS 2.93.0.0 |
21502 | Server error | 返回数据错误 | Android 2.74.0.0 iOS 2.93.0.0 |
15921 | page not found | 点击立即使用跳转页面出错 | Android 2.74.0.0 iOS 2.93.0.0 |
13000 | 系统错误 | 服务内部错误，请稍后重试或是联系客服 | Android 2.74.0.0 iOS 2.93.0.0 |
13001 | 关注太快了，先休息一下吧～ | 用户操作太频繁，请稍后再试 | Android 2.74.0.0 iOS 2.93.0.0 |
21601 | 抖音小店 id 不合 法，仅支持 0-9 的字符 | | Android 2.74.0.0 iOS 2.93.0.0 |
21603 | 当前抖音小店 id 不存在 | 当前抖音小店 id 无法获取，请检查是否正确 | Android 2.74.0.0 iOS 2.93.0.0 |
21607 | 抖音小店 id 与当前小程序无绑定关系 | 抖音小店 id 与当前小程序未绑定，请检查当前小程序是否绑定抖音小店 | Android 2.74.0.0 iOS 2.93.0.0 |
21608 | 小程序未绑定对应应用 | 当前小程序未在店铺后台授权，请到抖店开放平台进行授权 | Android 2.74.0.0 iOS 2.93.0.0 |
代码示例
// index.ts const app = getApp() Page({ data: { buttonOptions:{ unappliedText: "去领取", appliedText: "去使用", expiredText: "过期了", usedText: "用完了", activeBackgroundColor: "red", activeColor: "yellow", disableBackgroundColor: "blue", disableColor: "green", }, modalOptions:{ title: "确定领取嘛", content: "你真的确定领取嘛", confirmText: "确定啊", confirmColor: "#FF9B9B", showCancel: true, cancelText: "不确定", cancelColor: "#CBFFA9", } }, onLoad: function () { console.log('Welcome to Mini Code') }, })
<coupon-card shop-id="52142592" coupon-id="7254457569522712832" class={styles.myClass} style="background-color:red;" title="优惠券111" sub-title="请到店铺使用" img-url={aPic} button-options="{{buttonOptions}}" modal-options="{{modalOptions}}" is-show-button-only="{{false}}" is-show-coupon-info="{{true}}" bind:error="handleCouponError" > </coupon-card>
Bug & Tip
Tip： 使用该接口时需要用户身份信息，请确保在调用接口前，用户已经登录宿主 APP。
