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

创建订单确认模块组件

初始化列表,直接获取购物车列表,但是要获取选中的购物车接口 checked==1的
vue商城第13 订单确认模块 14订单成功页面_第1张图片
初始化函数
vue商城第13 订单确认模块 14订单成功页面_第2张图片

循环显示选中的列表
vue商城第13 订单确认模块 14订单成功页面_第3张图片
添加金额税收优惠券等属性
vue商城第13 订单确认模块 14订单成功页面_第4张图片

计算选中商品的总金额
vue商城第13 订单确认模块 14订单成功页面_第5张图片
计算要支付的总金额, 选中+邮费-优惠券+税
vue商城第13 订单确认模块 14订单成功页面_第6张图片
符号进行过滤器
vue商城第13 订单确认模块 14订单成功页面_第7张图片
vue商城第13 订单确认模块 14订单成功页面_第8张图片

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

后台创建订单功能获取用户数据,获取用户地址信息和购物车选中商品
vue商城第13 订单确认模块 14订单成功页面_第9张图片
用一个直接在对象原型的方法创建订单 模拟订单唯一ID
vue商城第13 订单确认模块 14订单成功页面_第10张图片
vue商城第13 订单确认模块 14订单成功页面_第11张图片
创建订单ID orderId,和订单时间,直接调用导入的format方法生成订单时间
vue商城第13 订单确认模块 14订单成功页面_第12张图片
生成订单并将订单信息传到数据库,返回订单ID和总金额给前端以便下个页面使用
vue商城第13 订单确认模块 14订单成功页面_第13张图片
前端页面
上创建确认支付点击事件获取订单数据
vue商城第13 订单确认模块 14订单成功页面_第14张图片
拿到路由那里传过来的id,$router.query.xxxid,并拿到总金额,实际开发不止拿总金额
push路由跳转到拿到的成功订单ID的订单确认页面

vue商城第13 订单确认模块 14订单成功页面_第15张图片

创建订单成功页面组件
vue商城第13 订单确认模块 14订单成功页面_第16张图片

使用$router.query获取hash订单的ID, 然后获取订单总额,get请求要用params请求参数
vue商城第13 订单确认模块 14订单成功页面_第17张图片
后台获取订单ID查询订单信息, 小于0,未创建订单,大于0遍历订单列表,有订单得到该ID的总额并传到前端,若无,则无订单
vue商城第13 订单确认模块 14订单成功页面_第18张图片
跳转回首页或购物车
vue商城第13 订单确认模块 14订单成功页面_第19张图片

你可能感兴趣的:(vue商城第13 订单确认模块 14订单成功页面)