@tanzhenxing/zx-coupon-list v1.0.2

zx-coupon-list 优惠券列表

适用于 uni-app 跨端（H5、小程序、App）优惠券选择和兑换场景。

组件特性

• 支持多端（H5/小程序/App）
• 支持优惠券选择（单选/多选）
• 支持优惠券兑换功能
• 支持可用/不可用优惠券分类显示
• 支持自定义样式和文案
• 支持空状态展示
• 支持插槽自定义内容

属性说明

事件说明

插槽说明

CouponInfo 数据结构

使用示例

基础用法

<template>
  <view class="demo">
    <!-- 优惠券选择按钮 -->
    <view class="coupon-cell" @tap="showList = true">
      <text>选择优惠券</text>
      <text v-if="chosenCoupon >= 0">已选择</text>
    </view>
    
    <!-- 优惠券列表弹窗 -->
    <zx-popup 
      v-model:show="showList" 
      position="bottom" 
      :style="{ height: '90%' }"
    >
      <zx-coupon-list
        v-model:code="exchangeCode"
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        @change="onChange"
        @exchange="onExchange"
      />
    </zx-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import zxCouponList from '@/components/zx-coupon-list/zx-coupon-list.vue'
import zxPopup from '@/components/zx-popup/zx-popup.vue'

const showList = ref(false)
const chosenCoupon = ref(-1)
const exchangeCode = ref('')

const coupons = ref([
  {
    id: '1',
    name: '满减优惠券',
    condition: '满100元可用',
    value: 1000, // 10元，单位分
    startAt: 1640995200, // 2022-01-01
    endAt: 1672531199,   // 2022-12-31
    description: '全场通用'
  },
  {
    id: '2',
    name: '新用户专享',
    condition: '无门槛',
    valueDesc: '9.5',
    unitDesc: '折',
    startAt: 1640995200,
    endAt: 1672531199,
    description: '仅限新用户使用'
  }
])

const disabledCoupons = ref([
  {
    id: '3',
    name: '已过期优惠券',
    condition: '满50元可用',
    value: 500,
    reason: '优惠券已过期',
    startAt: 1609459200,
    endAt: 1640995199
  }
])

const onChange = (index) => {
  chosenCoupon.value = index
  showList.value = false
}

const onExchange = (code) => {
  console.log('兑换码:', code)
  // 处理兑换逻辑
}
</script>

多选模式

<template>
  <zx-coupon-list
    :coupons="coupons"
    :chosen-coupon="chosenCoupons"
    @change="onMultiChange"
  />
</template>

<script setup>
import { ref } from 'vue'

const chosenCoupons = ref([]) // 多选模式使用数组

const onMultiChange = (indexes) => {
  chosenCoupons.value = indexes
}
</script>

自定义样式

<template>
  <zx-coupon-list
    :coupons="coupons"
    custom-class="custom-coupon-list"
    currency="$"
    enabled-title="Available Coupons"
    disabled-title="Unavailable Coupons"
    exchange-button-text="Redeem"
    close-button-text="No Coupon"
    input-placeholder="Enter coupon code"
  />
</template>

使用插槽

<template>
  <zx-coupon-list :coupons="coupons">
    <template #list-footer>
      <view class="custom-footer">
        <text>更多优惠券敬请期待</text>
      </view>
    </template>
    
    <template #list-button>
      <view class="custom-button" @tap="customAction">
        <text>自定义按钮</text>
      </view>
    </template>
  </zx-coupon-list>
</template>

注意事项

1. 优惠券金额 value 字段单位为分，组件会自动转换为元显示
2. 时间戳 startAt 和 endAt 单位为秒
3. 多选模式下 chosen-coupon 需要传入数组
4. 组件内部使用了 scroll-view，在某些平台可能需要设置固定高度
5. 兑换功能需要配合后端接口实现具体的兑换逻辑

更新日志

v1.0.0

• 初始版本发布
• 支持基础的优惠券列表展示和选择功能
• 支持优惠券兑换功能
• 支持自定义样式和文案