<template>
  <van-coupon
    v-model="showCoupon"
    :coupons="couponList"
    :chosen-coupon="chosenCoupon"
    @change="onChange"
    @exchange="onExchange"
  />
</template>

<script>
import { Coupon } from 'vant';

export default {
  components: {
    [Coupon.name]: Coupon,
  },
  data() {
    return {
      showCoupon: true, // 控制优惠券选择器的显示与隐藏
      couponList: [
        {
          id: '1',
          condition: 100, // 使用条件
          reason: '新用户专享',
          value: 10, // 优惠券面额
        },
        // 可以有多个优惠券对象
      ],
      chosenCoupon: '', // 用于双向绑定选中的优惠券 ID
    };
  },
  methods: {
    onChange(coupon) {
      // 处理优惠券选择变化的逻辑
      console.log('选择的优惠券:', coupon);
    },
    onExchange(code) {
      // 处理兑换优惠券的逻辑
      console.log('兑换的优惠券码:', code);
    },
  },
};
</script>