@tanzhenxing/zx-ecard v1.0.1

zx-ecard 电子卡券组件

一个功能完整的电子卡券组件，支持优惠券、代金券、折扣券、礼品券等多种类型，适用于电商、O2O等场景。

介绍

zx-ecard 是一个专为电子卡券场景设计的组件，提供了完整的卡券展示功能。组件支持多种卡券类型、状态管理、自定义样式等功能，同时支持点击事件、按钮操作等交互。基于 NutUI 电子卡券组件设计理念 1，结合 uniapp 多端兼容特性开发。

特性

• 🎫 支持多种卡券类型：优惠券、代金券、折扣券、礼品券
• 🔄 支持多种状态：可用、已使用、已过期
• 🎨 丰富的自定义样式配置
• 📱 完美适配 H5、小程序、APP 多端
• ⚡ 基于 Vue 3 Composition API
• 🛡️ TypeScript 类型支持
• 🎯 无浏览器特有 DOM 依赖

基础用法

<template>
  <zx-ecard
    type="coupon"
    title="满减优惠券"
    description="全场通用，满100元可用"
    :value="20"
    condition="满100元可用"
    valid-to="2024-12-31"
    @click="handleCardClick"
    @button-click="handleButtonClick"
  />
</template>

<script setup>
const handleCardClick = (cardInfo) => {
  console.log('卡券点击:', cardInfo)
}

const handleButtonClick = (cardInfo) => {
  console.log('按钮点击:', cardInfo)
}
</script>

不同类型

<template>
  <!-- 优惠券 -->
  <zx-ecard
    type="coupon"
    title="满减优惠券"
    :value="20"
    condition="满100元可用"
  />
  
  <!-- 代金券 -->
  <zx-ecard
    type="voucher"
    title="代金券"
    :value="50"
    condition="指定商品可用"
  />
  
  <!-- 折扣券 -->
  <zx-ecard
    type="discount"
    title="折扣券"
    value="8"
    value-symbol=""
    value-unit="折"
    condition="全场商品可用"
  />
  
  <!-- 礼品券 -->
  <zx-ecard
    type="gift"
    title="生日礼品券"
    :value="100"
    condition="生日当月可用"
    tag="专享"
  />
</template>

不同状态

<template>
  <!-- 可用状态 -->
  <zx-ecard
    title="可用优惠券"
    :value="15"
    status="available"
  />
  
  <!-- 已使用状态 -->
  <zx-ecard
    title="已使用优惠券"
    :value="15"
    status="used"
  />
  
  <!-- 已过期状态 -->
  <zx-ecard
    title="已过期优惠券"
    :value="15"
    status="expired"
  />
</template>

自定义样式

<template>
  <zx-ecard
    title="自定义样式券"
    :value="88"
    title-color="#2979ff"
    :title-size="36"
    value-color="#ff6b35"
    :value-size="52"
    button-color="#2979ff"
    tag="特惠"
    tag-color="#ff6b35"
  />
</template>

按钮类型

<template>
  <!-- 主要按钮 -->
  <zx-ecard
    title="主要按钮"
    :value="25"
    button-type="primary"
    button-text="立即使用"
  />
  
  <!-- 次要按钮 -->
  <zx-ecard
    title="次要按钮"
    :value="25"
    button-type="secondary"
    button-text="立即领取"
  />
  
  <!-- 轮廓按钮 -->
  <zx-ecard
    title="轮廓按钮"
    :value="30"
    button-type="outline"
    button-text="去使用"
  />
</template>

显示完整信息

<template>
  <zx-ecard
    title="商家优惠券"
    :value="35"
    valid-from="2024-01-01"
    valid-to="2024-12-31"
    merchant-name="ZXUI官方旗舰店"
    card-no="ZX202410001"
    :show-footer="true"
  />
</template>

特殊状态

<template>
  <!-- 禁用状态 -->
  <zx-ecard
    title="禁用状态券"
    :value="40"
    :disabled="true"
  />
  
  <!-- 选中状态 -->
  <zx-ecard
    title="选中状态券"
    :value="20"
    :selected="true"
  />
  
  <!-- 隐藏按钮 -->
  <zx-ecard
    title="纯展示券"
    :value="60"
    :show-button="false"
  />
</template>

API

Props

Type 卡券类型

Status 卡券状态

Button Type 按钮类型

Events

数据结构

卡券信息对象

{
  type: 'coupon',           // 卡券类型
  status: 'available',      // 卡券状态
  title: '满减优惠券',       // 卡券标题
  description: '全场通用',   // 卡券描述
  value: 20,                // 面额/折扣值
  valueSymbol: '¥',         // 面额符号
  valueUnit: '',            // 面额单位
  condition: '满100元可用',  // 使用条件
  validFrom: '2024-01-01',  // 有效期开始
  validTo: '2024-12-31',    // 有效期结束
  merchantName: '商家名称',  // 商家名称
  cardNo: 'ZX202410001',    // 卡券编号
  tag: '限时'               // 卡券标签
}

样式变量

组件提供了以下 CSS 变量，可用于自定义主题：

$zx-ecard-primary: #ff4757 !default;           // 主色调
$zx-ecard-secondary: #2979ff !default;         // 次要色调
$zx-ecard-success: #5cb85c !default;           // 成功色调
$zx-ecard-warning: #f0ad4e !default;           // 警告色调
$zx-ecard-border-radius: 12rpx !default;       // 圆角大小
$zx-ecard-spacing-xs: 8rpx !default;           // 最小间距
$zx-ecard-spacing-sm: 16rpx !default;          // 小间距
$zx-ecard-spacing-md: 24rpx !default;          // 中等间距
$zx-ecard-spacing-lg: 32rpx !default;          // 大间距

注意事项

1. 多端兼容：组件使用 uniapp 语法，支持 H5、小程序、APP 多端运行
2. 样式单位：所有尺寸使用 rpx 单位，确保多端适配
3. 事件处理：点击事件会返回卡券的基本信息，便于业务处理
4. 状态管理：组件本身不处理状态变更，需要在业务层面管理卡券状态
5. 自定义样式：支持通过 props 自定义样式，也可以通过 custom-class 和 custom-style 进行深度定制
6. 无 DOM 依赖：组件不使用浏览器特有的 DOM API，确保多端兼容性

更新日志

v1.0.0

• 🎉 初始版本发布
• ✨ 支持多种卡券类型和状态
• ✨ 提供丰富的自定义配置
• ✨ 完美支持多端运行
• ✨ 基于 Vue 3 Composition API

许可证

MIT License