在我的mall电商实战项目中,有着从商品加入购物车到订单支付成功的一整套功能,这套功能的设计与实现对于有购物需求的网站来说,应该是一套通用设计了。今天给大家介绍下这套功能设计,涵盖购物车、生成确认单、生成订单、取消订单以及支付成功回调等内容,希望对大家有所帮助!
mall项目简介
这里还是简单介绍下mall项目吧,mall项目是一套基于 SpringBoot + Vue + uni-app 的电商系统(Github标星60K),采用Docker容器化部署。包括前台商城项目和后台管理系统,能支持完整的订单流程!涵盖商品、订单、购物车、权限、优惠券、会员、支付等功能,功能很强大!
- 项目地址:github.com/macrozheng/...
- 官方文档:www.macrozheng.com
后台管理系统演示

前台商城项目演示

功能设计
这里介绍下从商品加入购物车到订单支付成功的整个流程,涵盖流程的示意图和效果图。
流程示意图
以下是从商品加入购物车到订单支付成功的流程图。

流程效果图
以下是从商品加入购物车到订单支付成功的效果图,可以对照上面的流程示意图查看。

数据库设计
为了支持以上购物流程,整个订单模块的数据库设计如下。

设计要点
接下来介绍下整个购物流程中的一些设计要点,涵盖加入购物车、生成确认单、生成订单、取消订单以及支付成功回调等内容。
加入购物车
功能逻辑
用户将商品加入购物车后,可以在购物车中查看到商品。购物车的主要功能就是存储用户选择的商品信息及计算购物车中商品的优惠。

购物车优惠计算流程

相关注意点
- 购物车中商品优惠金额不会在购物车中体现,要在生成确认单时才会体现;
- 由于商品优惠都是以商品为单位来设计的,并不是以sku为单位设计的,所以必须以商品为单位来计算商品优惠;
- 代码实现逻辑可以参考mall项目中
OmsPromotionServiceImpl
类的calcCartPromotion
方法。
生成确认单
功能逻辑
用户在购物车页面点击去结算
后进入生成确认单页面。确认单主要用于用户确认下单的商品信息、优惠信息、价格信息,以及选择收货地址、选择优惠券和使用积分。

生成确认单流程

相关注意点
- 总金额的计算:购物车中所有商品的总价;
- 活动优惠的计算:购物车中所有商品的优惠金额累加;
- 应付金额的计算:应付金额=总金额-活动优惠;
- 代码实现逻辑可以参考mall项目中
OmsPortalOrderServiceImpl
类的generateConfirmOrder
方法。
生成订单
功能逻辑
用户在生成确认单页面点击提交订单
后生成订单,可以从订单详情页查看。生成订单操作主要对购物车中信息进行处理,综合下单用户的信息来生成订单。

下单流程

相关注意点
-
库存的锁定:库存从获取购物车优惠信息时就已经从
pms_sku_stock
表中查询出来了,lock_stock字段表示锁定库存的数量,会员看到的商品数量为真实库存减去锁定库存; -
优惠券分解金额的处理:对全场通用、指定分类、指定商品的优惠券分别进行分解金额的计算:
- 全场通用:购物车中所有下单商品进行均摊;
- 指定分类:购物车中对应分类的商品进行均摊;
- 指定商品:购物车中包含的指定商品进行均摊。
-
订单中每个商品的实际支付金额计算:原价-促销优惠-优惠券抵扣-积分抵扣,促销优惠就是购物车计算优惠流程中计算出来的优惠金额;
-
订单号的生成:使用Redis来生成,生成规则:8位日期+2位平台号码+2位支付方式+6位以上自增id;
-
优惠券使用完成后需要修改优惠券的使用状态;
-
代码实现逻辑可以参考mall项目中
OmsPortalOrderServiceImpl
类的generateOrder
方法。
取消订单
功能逻辑
订单生成之后还需开启一个延时任务来取消超时的订单,用户也可以在订单未支付的情况下直接取消订单。

订单取消流程

相关注意点
- 代码实现逻辑可以参考mall项目中
OmsPortalOrderServiceImpl
类的cancelOrder
方法。
支付成功回调
功能逻辑
前台用户订单支付完成后,第三方支付平台需要回调支付成功接口。

支付成功回调流程

相关注意点
- 代码实现逻辑可以参考mall项目中
OmsPortalOrderServiceImpl
类的paySuccess
方法。
总结
今天给大家介绍了mall项目中整套购物流程的功能设计,其实对于很多网站来说都需要这么一套功能,说它是通用功能也不为过。从本文中大家可以看到,mall项目的整套购物流程设计的还是比较严谨的,考虑到了方方面面,如果你对mall项目整套购物流程实现感兴趣的话可以学习下mall项目的代码。