更新记录

1.0.0（2026-08-02） 下载此版本

新增

• 基于 uni-app x Composition API + UTS 开发的跨平台卡券展示组件
• 左信息区 + 右金额操作区的卡片布局
• 支持 default / select 两种模式
• 已使用/已过期状态灰度滤镜效果
• 底部弹窗查看卡券详情
• 纯 CSS 绘制，无需背景图依赖

平台兼容性

uni-app(5.0)

uni-app x(5.0)

jack-coupon 卡券组件

uni-app x 跨平台卡券展示组件，支持 App / Web / 微信小程序。

功能特性

• 卡券列表展示（名称、类型、折扣金额、有效期）
• 左信息区 + 右金额/操作区的卡片布局
• 选中模式（select），支持单选
• 已使用 / 已过期状态灰度显示
• 底部弹窗查看详情
• 纯 CSS 绘制，无需背景图

平台兼容性

属性 Props

数据项 CouponItem

事件 Events

使用示例

<template>
  <jack-coupon
    :list="couponList"
    mode="default"
    @action="handleAction"
    @detail="handleDetail"
  />
</template>

<script setup lang="uts">
import { ref } from 'vue'

const couponList = ref([
  {
    id: '1',
    name: '新用户专享券',
    typeDesc: '满减券',
    discount: '50',
    discountUnit: '元',
    condition: '满200元可用',
    validDate: '2026-12-31',
    status: 'active',
    selected: false,
    detail: '仅限新用户首次下单使用，不可与其他优惠叠加'
  },
  {
    id: '2',
    name: '会员折扣券',
    typeDesc: '打折券',
    discount: '8.5',
    discountUnit: '折',
    condition: '满100元可用',
    validDate: '2026-08-15',
    status: 'active',
    selected: false,
    detail: '会员专享，全场通用'
  }
])

function handleAction(item: any) {
  console.log('使用卡券:', item.id)
}

function handleDetail(item: any) {
  console.log('查看详情:', item.id)
}
</script>