当前位置：首页 > wzjs >正文

专做排名的网站收录优美的图片

wzjs 2025/8/22 1:28:24

专做排名的网站,收录优美的图片,可以接单包工的平台,个人主页怎么填写商品在展示时，通常会与一些优惠券一起显示，针对这种需求，Vant 提供了专门用于优惠券展示的组件——Coupon，它用于优惠券的兑换和选择，点击CouponCell组件时，以弹框形式进入选择，在选择时&#x…

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