购物车流程,创建订单流程,支付流程简要

最新推荐文章于 2024-08-09 10:42:44 发布

DYS_WYZS

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量282

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/DYS_WYZS/article/details/131926305

版权

这篇博客详细介绍了前端的购物车、创建订单及支付流程。购物车流程包括添加和减少商品、查看购物车、编辑及删除商品、全选与反选以及计算总价。创建订单流程涉及选择商品、结算、确认订单以及支付。支付流程涵盖选择支付方式、验证信息、确认支付及接收支付结果。整个流程详细解释了用户从选择商品到订单完成的每个步骤。

摘要由CSDN通过智能技术生成

购物车流程

添加商品：浏览商品页面，选择想要购买的商品，点击“加入购物车”按钮将商品添加到购物车中。
增加数量： css样式写一个步进器，给加的按钮绑定一个点击事件，获取v-for循环时的index下标，然后在方法中定义点击事件，获取到当前点击的这条数据中的数量，并对数量进行加加的处理。
减少数量：css样式写一个步进器，给加的按钮绑定一个点击事件，获取v-for循环时的index下标，然后在方法中定义点击事件，获取到当前点击的这条数据中的数量，并对数量进行减减的处理，然后进行判断，判断数量不小于一，如果小于一，则让数凉量等于一。
查看购物车：用户可以通过点击购物车图标或链接进入购物车页面，查看已添加的商品列表。
编辑购物车：在购物车页面，用户可以对购物车中的商品进行编辑操作，如修改商品数量、删除商品、选择商品属性、全选与反选、计算总价等。
删除：给删除按钮绑定一个点击事件，获取v-for循环时的index下标，然后在方法中定义点击事件，利用splice经行删除的处理，第一个值为index下标，第二个值为删除的数量。
全选与反选：在data里面定义checked为不选中（也就是false），在计算属性里面定义一个方法，有get和set, set是反选，get是全选，在反选input框里面设置v-model="item.checked", 在全选的inpu