商品在展示时，通常会与一些优惠券一起显示，针对这种需求，Vant 提供了专门用于优惠券展示的组件——Coupon，它用于优惠券的兑换和选择，点击CouponCell组件时，以弹框形式进入选择，在选择时，由CouponList组件显示兑换优惠券列表，当选中某项列表后，再次返回CouponCell组件，显示选中项，并减少结算总金额。
Coupon组件由CouponCell和CouponList两部分组成，其中CouponCell组件的常用属性如下表11-10所示
CouponList组件的常用属性如下表11-11所示
接下来通过一个完整的案例来演示使用Coupon组件实现的效果。
实例11-8 Coupon组件
- 功能描述
在实例【11-7】的基础之上，添加一个coupon组件，当点击“优惠券”选项时，以弹框形式显示可用优惠券和不可用优惠券的列表，当选中可用优惠券列表中某项优惠时，关闭弹框，并显示选中优惠券的总金额。
- 实现代码
在项目的components 文件夹中，添加一个名为“Coupon”的.vue文件，该文件的保存路径是“components/ch11/buis/”，在文件中加入如清单11-8所示代码。
代码清单11-8 Coupon.vue代码
<template><div><h3>Coupon 组件</h3><div class="row"><van-card :num="curGoods.num" :tag="curGoods.tag" :price="curGoods.price" :desc="curGoods.desc":title="curGoods.title" :thumb="curGoods.thumb" :origin-price="curGoods.originPrice"><template #tags><van-tag plain type="primary">{{ curGoods.tags[0] }}</van-tag><van-tag plain type="primary">{{ curGoods.tags[1] }}</van-tag></template><template #footer><van-button size="mini" @click="add">+</van-button><van-button size="mini" @click="reduce">-</van-button></template></van-card></div><!-- 优惠券单元格 --><van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" /><!-- 优惠券列表 --><van-popup :show="showList" round position="bottom" style="height: 70%; padding-top: 4px;"><van-coupon-list :show-exchange-bar="false" :coupons="coupons" :chosen-coupon="chosenCoupon":disabled-coupons="disabledCoupons" @change="onChange" /></van-popup></div>
</template>
<script>
import goods from "../../../assets/goods.png"
export default {data() {return {curGoods: {num: 2, price: 9000,desc: "一台笔记本电脑",title: "thinkpad X1 系列",thumb: goods,originPrice: "11000",tag: "超薄小巧型",tags: ["一代经典", "超低价格"]},disabledCoupons: [{available: 0,condition: '满1000元\n再优惠 200 元',reason: '',value: 20000,name: '老客户惊喜',startAt: 1489104340,endAt: 1514592670,valueDesc: '200',unitDesc: '元'}],coupons: [{available: 1,condition: '无门槛\n最高优惠 100 元',reason: '',value: 10000,name: '新人惊喜',startAt: 1589304340,endAt: 1634595670,valueDesc: '100',unitDesc: '元'}],showList: false,chosenCoupon: -1}},methods: {add() {this.curGoods.num++;},onChange(index) {this.showList = false;this.chosenCoupon = index;},reduce() {if (this.curGoods.num > 1)this.curGoods.num--;}}
}
</script>
<style>
.row {margin: 10px 0;padding: 10px 0;border-bottom: solid 1px #eee;
}
.van-image img {object-fit: contain !important;
}
</style> - 页面效果
保存代码后，页面在Chrome浏览器下执行的页面效果如图11-10所示。
4. 源码分析
在本实例的加粗代码中，van-coupon-cell组件负责显示优惠券的入口，另外一个组件van-coupon-list用于显示优惠券的列表，包括可用和不可用的优惠券，列表的数据来源于coupons和disabled-coupons属性对应的数组。
当点击列表中某项数据时，便触发绑定的change事件，在事件函数中，获取列表中选中项的索引号，且隐藏弹框，并显示优惠金额。
需要说明的是：每个数组对象中的value属性表示优惠券的金额，它的单位是分，例如：如果优惠券是200元，那么，它的值就是20000。
