第三十章订单结算页和微信支付

最新推荐文章于 2021-12-30 10:27:46 发布

原创

最新推荐文章于 2021-12-30 10:27:46 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#java #项目 #spring

这篇博客介绍了如何在Java项目中实现订单结算页面和微信支付功能。详细讲解了页面跳转、支付方式选择、商品列表显示、总金额计算、提交订单过程中的精度问题以及微信支付的开发流程，包括生成二维码和查询支付状态的方法。

此博客用于个人学习，来源于网上，对知识点进行一个整理。

1. 订单结算页：

1.1 页面跳转：

在购物车页面的最下方，有一个去结算按钮：

在这里插入图片描述
当点击结算，我们应该跳转到订单结算页，即：getOrderInfo.html。

查看购物车的结算按钮：

在这里插入图片描述
可以看到，地址是正确的。但是只有登录用户才可以去结算付款，因此我们不能直接跳转，而是在跳转前校验用户的登录状态，如果发现是未登录，应该重定向到登录页。我们给这个按钮绑定点击事件：

在这里插入图片描述
事件中判断登录状态，进行页面跳转：

toOrderInfo() {
   
   
    // 判断是否登录
    ly.verifyUser().then(() => {
   
   
        // 已登录
        window.location.href = "/getOrderInfo.html"
    }).catch(() => {
   
   
        // 未登录
        window.location.href = "/login.html?returnUrl=" + window.location.href;
    })
}

1.2 支付方式：

支付方式有2种：

微信支付
货到付款

与我们订单数据中的 paymentType 关联：

在这里插入图片描述
所以我们可以在 Vue 实例中定义一个属性来记录支付方式：

在这里插入图片描述

然后在页面渲染时与这个变量关联：

在这里插入图片描述

1.3 商品列表：

送货清单，其实就是购物车中用户选择的要付款的商品。因此，我们需要在购物车跳转过来的同时，携带选中的购物车的信息。

1）购物车信息获取：

我们修改 cart.html 中的页面跳转逻辑，把用户选中的购物车信息传递过来：

在这里插入图片描述
然后在 created 钩子函数中获取购物车数据，保存到本地属性，要注意的是，我们应该在获取数据前校验用户登录状态，如果发现未登录，则直接重定向到登录页：

在这里插入图片描述
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">