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

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

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

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

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

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

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

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐