商城-下单-订单结算页
商城-下单-订单结算页
- 2.订单结算页
- 2.1.页面跳转
- 2.2.收货人信息(作业)
- 2.3.支付方式
- 2.4.商品列表
- 2.4.1.购物车信息获取
- 2.4.2.页面渲染
- 2.5.总金额
- 2.6.提交订单
- 2.6.1.页面提交
- 2.6.2.精度损失问题
2.订单结算页
2.1.页面跳转
在购物车页面的最下方,有一个去结算按钮:
当点击结算,我们应该跳转到订单结算页,即:getOrderInfo.html
查看购物车的结算
按钮:
可以看到,地址是正确的。但是只有登录用户才可以去结算付款,因此我们不能直接跳转,而是在跳转前校验用户的登录状态,如果发现是未登录,应该重定向到登录页!
我们给这个按钮绑定点击事件:
事件中判断登录状态,进行页面跳转:
toOrderInfo() {// 判断是否登录ly.verifyUser().then(() => {// 已登录window.location.href = "/getOrderInfo.html"}).catch(() => {// 未登录window.location.href = "/login.html?returnUrl=" + window.location.href;})
}
登录后测试:
此处页面需要渲染的内容主要包含3部分:
- 收货人信息
- 支付方式
- 商品信息
2.2.收货人信息(作业)
这里的收货人信息肯定是当前登录用户的收货地址。所以需要根据当前登录用户去查询,目前我们在页面是写的假数据:
大家可以在在后台提供地址的增删改查接口,然后页面加载时根据当前登录用户查询,而后赋值给addresses即可。
2.3.支付方式
支付方式有2种:
- 微信支付
- 货到付款
与我们订单数据中的paymentType
关联:
所以我们可以在Vue实例中定义一个属性来记录支付方式:
然后在页面渲染时与这个变量关联:
2.4.商品列表
效果图:
这里的送货清单,其实就是购物车中用户选择的要付款的商品
因此,我们需要在购物车跳转过来的同时,携带选中的购物车的信息
2.4.1.购物车信息获取
我们修改cart.html
中的页面跳转逻辑,把用户选中的购物车信息传递过来:
然后在created
钩子函数中获取购物车数据,保存到本地属性,要注意的是,我们应该在获取数据前校验用户登录状态,如果发现未登录,则直接重定向到登录页:
然后重新加载页面,查看控制台:
2.4.2.页面渲染
要修改的页面位置:每一个li就是一件商品
我们修改为:
<ul class="send-detail"><li v-for="(cart,index) in carts" :key="index"><div class="sendGoods"><ul class="yui3-g"><li class="yui3-u-1-6"><span><img width="70px" height="70px" :src="cart.image"/></span></li><li class="yui3-u-7-12"><div class="desc">{{cart.title}}</div><div class="seven"><span v-for="(v) in JSON.parse(cart.ownSpec)">{{v + " "}} </span></div></li><li class="yui3-u-1-12"><div class="price">¥{{ly.formatPrice(cart.price * cart.num)}}</div></li><li class="yui3-u-1-12"><div class="num">{{cart.num}}</div></li><li class="yui3-u-1-12"><div class="exit">有货</div></li></ul></div></li>
</ul>
2.5.总金额
另外在商品列表下面,还有一个总金额的计算:
可以看出这里主要有4个数据:
- 总金额:totalPay
- 优惠返现:discount
- 运费:postFee
- 实付金额:actualPay
不过我们没有做优惠活动,另外运费需要结合物流系统来计算,暂时我们都设置为0,在order属性中写死:
我们通过计算属性来得到totalPay
和actualPay
值:
computed: {totalNum(){return this.carts.reduce((c1, c2) => c1 + c2.num, 0)},totalPay(){return this.carts.reduce((c1, c2) => c1 + c2.price * c2.num, 0);},actualPay(){return this.totalPay + this.order.postFee - this.order.discount;}
},
然后在页面渲染:
效果:
2.6.提交订单
2.6.1.页面提交
来看下订单接口所需要的数据:
分为3部分,分别是
订单本身的基本信息
- 总金额
- 实付金额
- 付款类型
- 买家信息就是当前用户
订单详情
- 就是购物车中的商品,不过购物车数据会多出一个userId,我们去除即可:
- 就是购物车中的商品,不过购物车数据会多出一个userId,我们去除即可:
物流信息
- 当前用户选中的物流地址信息
给提交按钮绑定事件:
然后编写方法,组织数据并提交:
methods: {submit() {// 把购物车数据处理成订单详情const orderDetails = this.carts.map(({userId, ...rest}) => rest);// 处理物流信息const addr = this.addresses[this.selectedAddress];const obj = {receiver: addr.name,receiverState: addr.state,receiverCity: addr.city,receiverAddress: addr.address,receiverDistrict: addr.district,receiverMobile: addr.phone,receiverZip: addr.zipCode};// 复制到订单对象Object.assign(this.order, obj, {orderDetails,totalPay: this.totalPay,actualPay: this.actualPay,});// 提交订单ly.http.post("/order", this.order).then(({data}) => {// 在线支付,需要到付款页window.location = "pay.html?orderId=" + data;}).catch((resp) => {alert("订单提交失败,可能是缺货!")})}
},
2.6.2.精度损失问题
在页面点击提交测试:
成功生成订单!
然后看页面跳转:
好像有什么不对?订单号的最后2位不正确啊!
这其实是因为JS的长整数精度有限,java的Long类型数据超出了范围,所以出现了精度损失。
我们后台返回的是Json的字符串,在axios内部会自动调用 JSON.parse()方法把json字符串转为JS数据,就会出现进度损失。如果不进行转换,依然当做字符串来使用,就不会有问题了。
因此,我们重写axios对响应的处理回调函数:
再次测试,就OK了。
接下来就轮到支付了。
商城-下单-订单结算页相关推荐
- 商城-下单-订单系统接口
商城-下单-订单系统接口 1.订单系统接口 1.1.导入订单服务 1.2.Swagger-UI 1.2.1.什么是OpenAPI 1.2.2.什么是swagger? 1.2.3.快速入门 1)引入依赖 ...
- 美多商城之订单(结算订单)
订单 提示: 订单入口 在<购物车>页面的<去结算>. <去结算>后进入到<结算订单>页面,展示出要结算的商品信息. 一.结算订单 1.1.1. 结算订 ...
- 【javaWeb微服务架构项目——乐优商城day15】——会调用订单系统接口,实现订单结算功能,实现微信支付功能
0.学习目标 会调用订单系统接口 实现订单结算功能 实现微信支付功能 源码笔记及资料: 链接:https://pan.baidu.com/s/1_opfL63P1pzH3rzLnbFiNw 提取码:v ...
- 【第十八篇】商城系统-订单中心设计解决方案
订单模块 一.资源整合 我们需要把相关的静态资源拷贝到nginx,然后动态模板文件拷贝到order项目的templates目录下,然后调整资源的路径.在网关中设置对应的路由即可. 二.整合Spri ...
- 美多商城项目订单和支付模块总结
订单完成 订单结算页面 订单展示用的序列化器 # 前端需要运费数据和商品信息数据的字典列表,这里使用嵌套序列化器返回数据 class CartSKUSerializer(serializers.Mod ...
- 食品商城网站设计—食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的制作
HTML5期末大作业:食品商城网站设计--食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的制作 文章目录 HTML5期末大作业:食品商城网站设计--食品商城购物网站(8页) ...
- html大作业网页代码 尤洪购物商城-功能齐全(30页) HTML+CSS+JavaScript 学生DW网页设计作业成品 实训大作业
HTML5期末大作业:购物商城网站设计--尤洪购物商城-功能齐全(30页) HTML+CSS+JavaScript 学生DW网页设计作业成品 实训大作业 文章目录 HTML5期末大作业:购物商城网站设 ...
- html制作第二页,订单第二页.html
订单第二页 $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; ...
- 订单结算中最佳优惠券组合推荐策略分析
之前花了大量的篇幅介绍优惠券的作用.怎么建券.怎么使用.怎么核销等的文章,对此感兴趣的同学,可以先看看下方的文章,希望能对大家有一些帮助. 本篇文章主要介绍当用户在订单结算过程中,通过技术手段替用户推 ...
最新文章
- linux的 计划任务机制,自己带节奏
- poj2387(SPFA算法)
- JAVA反射通俗易懂转 转载大牛的 通俗易懂
- 音频降噪在58直播中的研究与实现
- grep 显示前后几行
- 初识MQ--mq常见技术介绍
- gets与fgets,puts与fputs区别
- 【网络安全工程师面试】—SSRF服务端请求伪造漏洞及利用方法
- nodepad代码格式复制到word发布到博客
- JAVA购物管理系统
- 作为一名优秀的软件测试工程师,需要具备哪些能力?
- 敏 感 信 息 扫 描 工 具 使 用 对 比
- 数据组织与存储(一)
- 信号处理--傅里叶变换的性质及常用信号的傅里叶变换
- CAD给标注尺寸加上下公差的方法
- vmware 克隆虚拟机的关键步骤
- 可视化大屏设计尺寸_UI设计中大屏可视化设计尺寸指南
- 【疑难杂症爆破委员会】UEFI Linux、Windows双系统,丢失Windows的efi文件导致找不到启动项(恢复Windows的efi文件)
- java并发编程之再学习
- C#学习之面象对象继承练习(二)
热门文章
- 微软服务器无法删除不了,[图]Edge无法卸载 引发诸多用户强烈不满
- 微博登录账号密码终于又找回来了。Mark一下
- 喜欢艾弗森,退役了。。。
- C语言二维数求矩阵每行的最大值与最小值
- We‘re sorry but XXX doesn‘t work properly without JavaScript enabled.
- 【云原生 • Kubernetes】k8s功能特性、k8s集群架构介绍
- python用表格中的数据画柱状图_[python]统计excel表格某列中每项出现的次数并画柱状图...
- Flutter 中神奇的 AbsorbPointer 组件
- 如何下载blob:https://www.bilibili.com/的视频
- Android TV开发 焦点返回ListView时, 返回到离开时的位置