电商插件

跳转引导

导购成交

通用查询

会员运营

电商组件

sku-button

product-follow-button

shop-follow-card

member-button

coupon-card

coupon-card
收藏
我的收藏

基础库 3.43.0.0 开始支持本组件。

优惠券卡片（按钮），支持以卡片或者按钮的形式展示优惠券，优惠券有立即领取、立即使用、已过期、已使用四种状态，点击立即领取会进行优惠券的领取，点击立即使用则可以自定义跳转店铺、商详页、单店购物车、小程序页面等。

前置条件

在使用电商插件中的组件和 API 前，需要对行业插件有一个基本了解，可以参考文档：行业插件介绍，然后按照以下步骤及顺序使用电商插件中的能力：

参考电商小程序接入指南完成小程序及资质的准备；

参考申请行业插件完成插件的申请，注意只有小程序拥有电商类目资质才可见申请入口；

参考使用行业插件进行能力的调用；

行业插件在抖音 App 版本 31.8.0 及以上，小程序基础库版本 3.4x.0.0 及以上时支持。

在使用组件时需要在页面 index.json 文件中进行引入。

{
  "usingComponents": {
    "coupon-card": "tt95aee3130ae1cbe911://coupon-card"
  }
}

Tip：使用该组件时需要用户身份信息，请确保在调用接口前，用户已经登录宿主 APP。

效果示例

属性说明

属性名	类型	默认值	必填	说明	最低支持版本
shop-id	string	--	是	当前小程序绑定的抖音小店 id	•Android 2.74.0.0 •iOS 2.93.0.0
coupon-id	string	--	是	优惠券 id	•Android 2.74.0.0 •iOS 2.93.0.0
style	string	--	否	样式	•Android 2.74.0.0 •iOS 2.93.0.0
class	string	--	否	类名	•Android 2.74.0.0 •iOS 2.93.0.0
is-show-button-only	boolean	false	否	是否只展示 button	•Android 2.74.0.0 •iOS 2.93.0.0
title	string	专享优惠券	否	优惠券标题	•Android 2.74.0.0 •iOS 2.93.0.0
sub-title	string	领取后前往店铺使用	否	优惠券副标题	•Android 2.74.0.0 •iOS 2.93.0.0
button-options	ButtonOptions	--	否	按钮选项，包括各个状态的文字及背景颜色、文字颜色	•Android 2.74.0.0 •iOS 2.93.0.0
img-url	string	https://lf3-cm.ecombdstatic.com/obj/ecom-ecop/1688986275d1c1cf2dc8858aacd228074e918d5dbe9301dad7.png	否	优惠券卡片图片 URL	•Android 2.74.0.0 •iOS 2.93.0.0
modal-options	ModalOptions	--	否	点击领取时弹窗的选项	•Android 2.74.0.0 •iOS 2.93.0.0
is-show-coupon-info	boolean	false	否	默认是否展示优惠券卡片中具体的优惠券信息	•Android 2.74.0.0 •iOS 2.93.0.0
bind:error	function	--	否	失败回调	•Android 2.74.0.0 •iOS 2.93.0.0
bind:success	function	--	否	成功回调	•Android 2.74.0.0 •iOS 2.93.0.0
bind:use	function	--	否	点击使用回调，可在该事件中调用其他跳转api跳转各类页面	•Android 2.74.0.0 •iOS 2.93.0.0

ButtonOptions类型说明

属性名	类型	默认值	必填	说明	最低支持版本
unappliedText	string	点击领取	否	未领取优惠券状态下 button 文字	•Android 2.74.0.0 •iOS 2.93.0.0
appliedText	string	立即使用	否	已领取优惠券状态下 button 文字	•Android 2.74.0.0 •iOS 2.93.0.0
expiredText	string	已过期	否	已过期优惠券状态下 button 文字	•Android 2.74.0.0 •iOS 2.93.0.0
usedText	string	已使用	否	已使用优惠券状态下 button 文字	•Android 2.74.0.0 •iOS 2.93.0.0
activeBackgroundColor	string	rgb(201, 54, 37)	否	激活状态下（未领取或已领取） button 背景颜色	•Android 2.74.0.0 •iOS 2.93.0.0
activeColor	string	white	否	激活状态下（未领取或已领取） button 文字颜色	•Android 2.74.0.0 •iOS 2.93.0.0
disableBackgroundColor	string	rgb(212, 153, 140)	否	未激活状态下（已过期或已使用） button 背景颜色	•Android 2.74.0.0 •iOS 2.93.0.0
disableColor	string	rgb(252, 247, 247)	否	未激活状态下（已过期或已使用） button 文字颜色	•Android 2.74.0.0 •iOS 2.93.0.0

ModalOptions类型说明

属性名	类型	默认值	必填	说明	最低支持版本
title	string	领取优惠券	否	Modal 标题	•Android 2.74.0.0 •iOS 2.93.0.0
content	string	是否确认领取优惠券	否	Modal 内容	•Android 2.74.0.0 •iOS 2.93.0.0
confirmText	string	确认领取	否	确认按钮文字	•Android 2.74.0.0 •iOS 2.93.0.0
confirmColor	string	#F85959	否	确认按钮文字颜色（必须用 16 进制形式）	•Android 2.74.0.0 •iOS 2.93.0.0
showCancel	boolean	true	否	是否展示返回按钮	•Android 2.74.0.0 •iOS 2.93.0.0
cancelText	string	我再想想	否	返回按钮文字	•Android 2.74.0.0 •iOS 2.93.0.0
cancelColor	string	#000000	否	返回按钮文字颜色（必须用 16 进制形式）	•Android 2.74.0.0 •iOS 2.93.0.0

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。

coupon-card收藏我的收藏