vue 优惠券组件
Vant3 Coupon 优惠券选择器是一款基于 Vue.js 的前端开源组件库中的一个组件，用于实现优惠券的选择和展示功能。具体来说，该组件提供了以下功能：

1. 支持多种类型的优惠券，如代金券、折扣券等；
2. 可以自定义优惠券的样式和展示方式；
3. 支持优惠券的选中与取消选中操作；
4. 支持显示已选中优惠券的总价值。

下面是一个简单的例子，展示如何使用 Vant3 Coupon 组件来显示并选择优惠券：

html
<template>
<div>
<van-coupon-list
:coupons="coupons"
:chosen-coupons="chosenCoupons"
@change="onChange"
/>
</div>
</template>

<script>
import { ref } from 'vue';
import { VanCouponList } from 'vant';

export default {
setup() {
const coupons = ref([
{ id: 1, type: 'cash', value: 10 },
{ id: 2, type: 'discount', value: 8, originCondition: 50 },
{ id: 3, type: 'discount', value: 9, originCondition: 60 },
{ id: 4, type: 'cash', value: 15, reason: '新用户专享' },
]);
const chosenCoupons = ref([]);

function onChange(coupons) {
console.log(coupons);
}

return {
coupons,
chosenCoupons,
onChange,
};
},
components: {
VanCouponList,
},
};
</script>


在这个例子中，我们首先引入了 Vant3 Coupon 的组件 VanCouponList，并将需要展示的优惠券传递给它的 coupons 属性。同时，我们还传递了一个 chosenCoupons 数组来表示已选中的优惠券，并绑定了一个 onChange 方法以便在优惠券选择发生变化时进行处理。最后，我们在模板中直接使用了 VanCouponList 组件来显示整个优惠券列表。