当前位置: 首页 > article >正文

Vue前端开发-Coupon组件

商品在展示时,通常会与一些优惠券一起显示,针对这种需求,Vant 提供了专门用于优惠券展示的组件——Coupon,它用于优惠券的兑换和选择,点击CouponCell组件时,以弹框形式进入选择,在选择时,由CouponList组件显示兑换优惠券列表,当选中某项列表后,再次返回CouponCell组件,显示选中项,并减少结算总金额。

Coupon组件由CouponCell和CouponList两部分组成,其中CouponCell组件的常用属性如下表11-10所示
在这里插入图片描述
CouponList组件的常用属性如下表11-11所示
在这里插入图片描述
接下来通过一个完整的案例来演示使用Coupon组件实现的效果。

实例11-8 Coupon组件

  1. 功能描述

在实例【11-7】的基础之上,添加一个coupon组件,当点击“优惠券”选项时,以弹框形式显示可用优惠券和不可用优惠券的列表,当选中可用优惠券列表中某项优惠时,关闭弹框,并显示选中优惠券的总金额。

  1. 实现代码

在项目的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> 

  1. 页面效果

保存代码后,页面在Chrome浏览器下执行的页面效果如图11-10所示。
在这里插入图片描述
4. 源码分析

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

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

需要说明的是:每个数组对象中的value属性表示优惠券的金额,它的单位是分,例如:如果优惠券是200元,那么,它的值就是20000。
在这里插入图片描述


http://www.kler.cn/a/580858.html

相关文章:

  • 时序数据库 InfluxDB 3.0 版本性能实测报告:写入吞吐量提升效果验证
  • 鸿蒙跨平台框架ArkUI-X
  • 后 Safe 时代:多签钱包安全新范式与防范前端攻击的新思路
  • Windows控制台函数:设置文字颜色样式函数SetConsoleTextAttribute()
  • SQL 窗口函数之lead() over(partition by ) 和 lag() over(partition by )
  • 批量将 Excel 转换 PDF/Word/CSV以及图片等其它格式
  • 手写Tomcat
  • C++ 内存模型
  • 从头开始开发基于虹软SDK的人脸识别考勤系统(python+RTSP开源)(三)
  • 1688商品列表商品详情API接口全面解析
  • upload-labs详解(13-20)文件上传分析
  • 大湾区经济网战略媒体澳门《红刊》访霍英东集团
  • 转自南京日报:天洑软件创新AI+仿真技术变制造为“智造
  • 从C#中的MemberwiseClone()浅拷贝说起
  • CentOS7离线部署安装Dify
  • 网络安全技术整体架构 一个中心三重防护
  • 基于架构的软件开发(ABSD)
  • 3D模型语义搜索引擎
  • 聚水潭数据集成到MySQL的高效方法
  • 51c视觉~3D~合集2