Vue前端开发-Coupon组件

商品在展示时，通常会与一些优惠券一起显示，针对这种需求，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代码

typescript 复制代码

<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所示。

源码分析

在本实例的加粗代码中，van-coupon-cell组件负责显示优惠券的入口，另外一个组件van-coupon-list用于显示优惠券的列表，包括可用和不可用的优惠券，列表的数据来源于coupons和disabled-coupons属性对应的数组。

当点击列表中某项数据时，便触发绑定的change事件，在事件函数中，获取列表中选中项的索引号，且隐藏弹框，并显示优惠金额。

需要说明的是：每个数组对象中的value属性表示优惠券的金额，它的单位是分，例如：如果优惠券是200元，那么，它的值就是20000。