Coupon 优惠券

补充优惠券卡片与底部选择面板两种业务场景，支持领取、筛选和关闭不使用优惠券

演示

9:41

代码示例

<!-- 优惠券卡片 -->
  <re-coupon mode="card" :couponData="couponCardLarge" btnText="立即领取" @button-click="onCardButtonClick" />
  <re-coupon mode="card" type="small" pricePosition="front" :couponData="couponCardSmall" :isReceived="true" usedText="已领取" @click="onCardClick" />

<!-- 基础用法 -->
  <re-coupon class="demo-coupon-basic" :visible="show1" :coupons="coupons1" @close="show1 = false" />

<!-- 带不可用券 -->
  <re-coupon class="demo-coupon-disabled" :visible="show2" :coupons="coupons2" @close="show2 = false" />

<!-- 已选中优惠券 -->
  <re-coupon class="demo-coupon-chosen" :visible="show3" :coupons="coupons1" :chosenCoupon="1" @close="show3 = false" />

<!-- 隐藏兑换栏 -->
  <re-coupon class="demo-coupon-no-exchange" :visible="show4" :coupons="coupons1" :showExchangeBar="false" @close="show4 = false" />

<!-- 自定义标题 -->
  <re-coupon class="demo-coupon-title" :visible="show5" :coupons="coupons1" enabledTitle="可使用" disabledTitle="不可用" @close="show5 = false" />

<!-- 自定义关闭按钮 -->
  <re-coupon class="demo-coupon-close" :visible="show6" :coupons="coupons1" closeButtonText="关闭" @close="show6 = false" />

<!-- 自定义样式 -->
  <re-coupon class="demo-coupon-custom" :visible="show7" :coupons="coupons1" customStyle="background-color: rgba(0,0,0,0.3);" @close="show7 = false" />

<!-- 事件监听 -->
  <re-coupon class="demo-coupon-event" :visible="show8" :coupons="coupons1" @close="show8 = false" @exchange="onExchange" @change="onChange" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-coupon />。

API

Coupon Props

名称	类型	默认值	描述	必传
mode	`string`	'selector'	-	N
type	`string`	'large'	-	N
pricePosition	`string`	'back'	-	N
couponData	`CouponCardData`	{	-	N
btnText	`string`	translate('coupon', 'receiveNow', '立即领取')	-	N
isReceived	`boolean`	false	-	N
usedText	`string`	translate('coupon', 'received', '已领取')	-	N
buttonDisabled	`boolean`	false	-	N
visible	`boolean`	false	-	N
coupons	`Array<CouponItem>`	as Array<CouponItem>	-	N
chosenCoupon	`number`	-1	-	N
showExchangeBar	`boolean`	true	-	N
exchangeCode	`string`	''	-	N
enabledTitle	`string`	translate('coupon', 'enabledTitle', '可用优惠券')	-	N
disabledTitle	`string`	translate('coupon', 'disabledTitle', '不可用优惠券')	-	N
showCloseButton	`boolean`	true	-	N
closeButtonText	`string`	translate('coupon', 'noCoupon', '不使用优惠券')	-	N
inputPlaceholder	`string`	translate('coupon', 'exchangePlaceholder', '请输入兑换码')	-	N
exchangeButtonText	`string`	translate('coupon', 'exchangeButtonText', '兑换')	-	N
exchangeButtonDisabled	`boolean`	false	-	N
displayedCouponIndex	`number`	-1	-	N
customStyle	`string`	''	自定义样式	N

Coupon Events

名称	参数	描述
click	data: CouponCardData	点击时触发
button-click	data: CouponCardData	-
exchange	code: string	-
change	couponId: number	值变化时触发
list	-	-
close	-	关闭时触发
update:visible	value: boolean	显隐变化时触发
update:chosenCoupon	value: number	-

Coupon Slots

名称	描述
-	-

Chat 智能对话

智能对话组件，基于 re-chat 系列子组件构建，支持消息列表、操作栏、发送器与思考过程，用于搭建 AI 对话界面

Ecard 电子卡券

电子卡券组件，用于卡券展示与操作

内容锚点

演示
代码示例
引入
API