im-uniapp/components/x-coupon/╬─╡╡.md

x-coupon 优惠券组件

一个可复用的优惠券展示组件，支持金额券/折扣券、状态展示、按钮插槽、自定义主题色与缺口背景色。

引入方式

在页面中手动引入：

<script>
import xCoupon from '@/components/x-coupon/x-coupon.vue'

export default {
  components: { xCoupon }
}
</script>

基本用法

<template>
  <view style="padding: 24rpx; background: #f5f5f5;">
    <x-coupon
      value="100"
      condition="满500可用"
      title="全场通用券"
      desc="仅限服饰类商品"
      validity="2026.12.31 到期"
      @click="onUse"
    />
  </view>
</template>

<script>
import xCoupon from '@/components/x-coupon/x-coupon.vue'

export default {
  components: { xCoupon },
  methods: {
    onUse() {
      uni.showToast({ title: '使用优惠券', icon: 'none' })
    }
  }
}
</script>

折扣券

<x-coupon
  type="discount"
  value="8.5"
  title="会员专享折扣"
  condition="无门槛"
  color="#FF9800"
/>

状态展示

<x-coupon value="50" title="新人券" status="used" disabled />
<x-coupon value="20" title="限时券" status="expired" disabled />

自定义按钮（插槽）

<x-coupon value="30" title="外卖券">
  <template #action>
    <view style="padding: 8rpx 22rpx; border-radius: 999rpx; background: #111; color: #fff; font-size: 24rpx;">
      去使用
    </view>
  </template>
</x-coupon>

Props

参数	说明	类型	默认值
type	券类型：money 金额券 / discount 折扣券	String	money
value	面值（金额或折扣值）	Number | String	必填
currency	金额币种符号（仅 money 时展示）	String	¥
condition	使用条件文案	String	''
title	标题	String	优惠券
desc	描述文案	String	''
validity	有效期文案	String	''
color	左侧主题色（也用于默认按钮色）	String	#ff5a5f
backgroundColor	卡券背景色	String	#ffffff
cutoutColor	缺口圆背景色（通常传页面背景色；需要透明可传 transparent）	String	#f5f5f5
disabled	是否禁用点击（禁用时不会触发 click）	Boolean	false
status	状态：available / used / expired	String	available
btnText	默认按钮文字（未使用 action 插槽时）	String	立即使用
showBtn	是否显示默认按钮	Boolean	true

Events

事件	说明	回调参数
click	点击卡券（仅 status=available 且未禁用时触发）	无

Slots

名称	说明
action	右侧操作区域插槽（自定义按钮/图标等）