vant商城 Vant4 Coupon 优惠卷

介绍

用于优惠券的兑换和选择。

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

import { createApp } from "vue";
import { CouponCell, CouponList } from "vant";

const app = createApp();
app.use(CouponCell);
app.use(CouponList);

代码演示

基础用法

<!-- 优惠券单元格 -->
<van-coupon-cell
  :coupons="coupons"
  :chosen-coupon="chosenCoupon"
  @click="showList = true"
/>
<!-- 优惠券列表 -->
<van-popup
  v-model:show="showList"
  round
  position="bottom"
  style="height: 90%; padding-top: 4px;"
>
  <van-coupon-list
    :coupons="coupons"
    :chosen-coupon="chosenCoupon"
    :disabled-coupons="disabledCoupons"
    @change="onChange"
    @exchange="onExchange"
  />
</van-popup>

import { ref } from "vue";

export default {
  setup() {
    const coupon = {
      available: 1,
      condition: "无门槛n最多优惠12元",
      reason: "",
      value: 150,
      name: "优惠券名称",
      startAt: 1489104000,
      endAt: 1514592000,
      valueDesc: "1.5",
      unitDesc: "元",
    };

    const coupons = ref([coupon]);
    const showList = ref(false);
    const chosenCoupon = ref(-1);

    const onChange = (index) => {
      showList.value = false;
      chosenCoupon.value = index;
    };
    const onExchange = (code) => {
      coupons.value.push(coupon);
    };

    return {
      coupons,
      showList,
      onChange,
      onExchange,
      chosenCoupon,
      disabledCoupons: [coupon],
    };
  },
};

API

CouponCell Props

CouponList Props

CouponList Events

CouponList Slots

Coupon 数据结构

类型定义

组件导出以下类型定义：

import type { CouponCellProps, CouponListProps } from "vant";

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。