vue商城第13 订单确认模块 14订单成功页面

创建订单确认模块组件

初始化列表,直接获取购物车列表,但是要获取选中的购物车接口 checked==1的

初始化函数

循环显示选中的列表

添加金额税收优惠券等属性

计算选中商品的总金额

计算要支付的总金额, 选中+邮费-优惠券+税

符号进行过滤器

点击支付页面
要第三方支付接口,自己没有, 直接点支付跳转页面
点击上一步返回adress

后台创建订单功能获取用户数据,获取用户地址信息和购物车选中商品

用一个直接在对象原型的方法创建订单 模拟订单唯一ID


创建订单ID orderId,和订单时间,直接调用导入的format方法生成订单时间

生成订单并将订单信息传到数据库,返回订单ID和总金额给前端以便下个页面使用

前端页面
上创建确认支付点击事件获取订单数据

拿到路由那里传过来的id,$router.query.xxxid,并拿到总金额,实际开发不止拿总金额
push路由跳转到拿到的成功订单ID的订单确认页面

创建订单成功页面组件

使用$router.query获取hash订单的ID, 然后获取订单总额,get请求要用params请求参数

后台获取订单ID查询订单信息, 小于0,未创建订单,大于0遍历订单列表,有订单得到该ID的总额并传到前端,若无,则无订单

跳转回首页或购物车

实现在线商城订单交易模块需要考虑以下几个方面: 1. 确定订单状态:在订单交易过程中,需要确定订单的不同状态,如待付款、待发货、待收货、已完成等状态,以便于后续的订单处理和管理。 2. 支付接口的对接:实现在线商城订单交易模块,需要对接支付接口,常见的支付接口有支付宝、微信支付等。需要根据商家需求选择适合的支付接口。 3. 订单信息的存储:订单信息需要存储在数据库中,包括订单号、商品信息、订单状态、订单金额、收货地址等信息。 4. 订单的创建和处理:用户下单后,需要生成订单并将订单信息存储到数据库中,商家可以对订单进行处理,如确认订单、发货、退款等操作。 5. 订单状态的更新:在订单交易过程中,订单状态需要不断更新,包括付款状态、发货状态、收货状态等,以便于用户和商家及时了解订单状态。 基于以上几点,可以考虑以下实现方式: 1. 前端界面:使用Vue框架实现前端界面,包括商品列表、购物车、订单管理等页面,通过接口调用实现与后端数据的交互。 2. 后端接口:使用SpringBoot框架实现后端接口,包括商品信息查询、订单创建、订单处理、订单状态更新等接口,与前端界面进行数据交互。 3. 数据库设计:设计订单信息表、商品信息表、用户信息表等表,用于存储订单、商品、用户等相关信息。 4. 支付对接:对接支付宝、微信支付等支付接口,实现用户付款功能。 5. 安全性考虑:在订单交易过程中,需要考虑安全性问题,如用户信息保护、支付信息保护等,可以采用加密算法等手段保证安全性。 以上是一个简单的实现思路,具体实现需要根据商家需求、技术实现能力等进行调整和完善。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值