当前位置: 首页> 游戏> 手游 > 设计网页公司哪里好_做网站如何推广_seo短视频_如何做好宣传推广

设计网页公司哪里好_做网站如何推广_seo短视频_如何做好宣传推广

时间:2025/7/9 8:14:03来源:https://blog.csdn.net/chuanshixx/article/details/146152582 浏览次数:1次
设计网页公司哪里好_做网站如何推广_seo短视频_如何做好宣传推广

商品在展示时,通常会与一些优惠券一起显示,针对这种需求,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。
在这里插入图片描述

关键字:设计网页公司哪里好_做网站如何推广_seo短视频_如何做好宣传推广

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: