vue vant优惠券使用

vue vant优惠券使用
引入vant,并且复制代码过来,然后我把数据列表抽出去,放在vuex里面了。
1,vuex
在这里插入图片描述

2,页面
在这里插入图片描述

3,函数
在这里插入图片描述
自带的函数,可以监听选中的是哪条数据,并且也就能拿到这条数据里面的值,“钱”

在vuex中默认值给了一个0,然后再页面上created()中获取这个值,以及所有优惠券数据,把这个默认值赋值给上面的默认选中属性。然后当页面发生改变的时候,再把这个值传回给vuex,并且页面上也选中这个。

在提交订单的时候,获取这个默认选中的优惠券下标,拿到这个金额,放在页面上,也可以点击进入切换优惠券,在支付金额处,商品钱数与这个优惠券金额做运算即可
1,
在这里插入图片描述
2,
在这里插入图片描述

还存在bug,例如,如果用选择某张优惠券并且用掉了之后,要把哪个默认选中的id变为原来的0,就是列表里面的第一张,用于在界面显示。另外,在选择不使用的时候,页面优惠券处显示为-0,或者优惠券用光了,也显示-0
在这里插入图片描述

第二个,就是,当我选择不是用优惠券的时候,页面选择的index为-1,所以这个时候,不用去更改优惠券,需要return一下。

在这里插入图片描述

  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_小郑有点困了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值