vue vant优惠券使用

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

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

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

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

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

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

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

在这里插入图片描述

原文链接:https://blog.csdn.net/qq_44706619/article/details/104876949?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277499316781435492536%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165277499316781435492536&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-11-104876949-null-null.nonecase&utm_term=%E4%BC%98%E6%83%A0

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
文明发言,共建和谐米科社区
提交
头像

昵称

取消
昵称表情图片