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的总额并传到前端,若无,则无订单

跳转回首页或购物车

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

谷粒商城项目篇13_分布式高级篇_订单业务模块(提交订单幂等性、分布式事务、延时MQ实现定时任务)
目录一.订单业务模块订单流程购物车跳转订单确认页登录拦截器封装vo Feign远程调用丢失请求头信息 Feign远程异步调用丢失上下文信息提交订单接口幂等性令牌token机制各种锁机制 ...
Kroger EDI 855 采购订单确认报文详解
本文着重讲述Kroger EDI项目中,供应商发给Kroger的X12 855EDI 规范报文(采购订单确认)解读. 在此前的文章如何读懂X12报文中,我们对X12已经做了详细的介绍,大家可以以此为基 ...
dism++封装系统使用教程_客栈管理系统“订单来了”客房订单盒子使用教程
原标题:客栈管理系统"订单来了"客房订单盒子使用教程「订单来了」是非标住宿行业领先的移动互联云PMS,是以PMS为基础,聚合全渠道的营销管理生态平台,为客栈/民宿提供信息化一体解 ...
Vue.js-Day08【项目实战(附带完整项目源码)-day03：订单确认页面、美团支付页面、flex弹性盒子布局】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
Vue电商项目—订单管理—订单列表模块-10
Vue电商项目-订单管理-订单列表模块-10 1.1 订单管理概述订单管理模块用于维护商品的订单信息, 可以查看订单的商品信息.物流信息, 并且可以根据实际的运营情况对订单做适当的调整. 1.2 订 ...
谷粒商城笔记+踩坑（19）——订单模块构建、登录拦截器
导航: 谷粒商城笔记+踩坑汇总篇目录 1.页面环境搭建 1.1 动静分离 1.2 hosts添加域名映射 1.3 配置网关和nacos 1.4 引导类开启注册发现和feign客户端 1.5 thym ...
Vue项目实战：订单确认页面实现
目录订单父组件结构封装地址和商品数据加载地址删除功能实现新增地址交互实现地址编辑和订单提交订单确认页面如下: (1)订单父组件结构封装回顾路由文件router.js中关于order的路 ...
黑马淘淘商城第十二天购物车实现、订单确认页面展示
1. 课程计划第十二天: 1.购物车实现 2.订单确认页面展示 2. 购物车的实现 2.1. 功能分析 1.购物车是一个独立的表现层工程. 2.添加购物车不要求登录.可以指定购买商品的数量. 3.展 ...
前端开发Vue项目实战：电商后台管理系统（八）------ 订单管理模块
git checkout -b order git push -u origin order 目录 1. 挂载组件及基本布局 2. 获取订单数据 3. 表格渲染 4. 分页功能 5. 实现省市区县数据 ...

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

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

最新文章

热门文章