更新记录

1.0.0（2026-03-11） 下载此版本

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

平台兼容性

uni-app(3.7.0)

其他

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

Events

Slots