Vue项目中常见问题(55)提交订单、获取订单号、展示支付信息

目录

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

业务需求:完成提交订单的业务

1.支付静态组件先完成

Pay静态组件完成

配置路由

2.点击提交订单把支付信息传给服务器

提交订单的接口

2. 1.写api

这次我们不用vuex来写,如果没有vuex,我们应该直接在组件当中发请求,拿到服务器的数据,在组件当中进行管理

2.2.引入api

 第一种引入方法:

 第二种引入方法:

2. 3.发请求

先找到对应的点击提交订单的结构

把结构换成a标签,绑定点击事件

发请求

2.3.1先把交易编码解构出来

2.3.2 其余6个参数放入

2. 3.3替换数据

2. 3.4把参数放入()内

3.获取订单号与展示支付信息

3.1.定义一个订单号

3.2.进行判断成功与失败分别做什么

3.3.页面中展示真实订单号

获取订单支付信息接口

3. 4.写接口

3. 5.当路由一跳转,我们可以拿到订单号,只要组件一挂载,我们需要展示应付金额,我们需要在mounted中发请求

3. 6.返回的结果我们需要存储一下:

3.7.展示应付的金额

---

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

业务需求:完成提交订单的业务

我们点击提交订单应该跳转到支付的页面,

1.支付静态组件先完成

Pay静态组件完成

在pages下新建Pay文件夹,再建index.vue文件

在pages/Pay/index.vue中:完整静态代码:

配置路由

在router/routes.js中: 

现在点击 提交订单按钮,可以跳转到支付页面了

2.点击提交订单把支付信息传给服务器

点击提交订单的时候,还需要向服务器发起一次请求[把支付的一些信息传递给服务器]

提交订单的接口

请求地址:/api/order/auth/submitOrder?tradeNo={tradeNo}

请求方式:post

返回的参数是我们支付的订单号

 

 

我们可以看到请求地址带了query参数,里面的tradeNo是交易编号

tradeNo交易编号是在我们的订单详情里面的,有数据

2. 1.写api

在api/index.js中: 

这次我们不用vuex来写,如果没有vuex,我们应该直接在组件当中发请求,拿到服务器的数据,在组件当中进行管理

2.2.引入api

在pages/Trade/index.vue中:

第一种引入方法:

直接在组件中直接引入:

但是这种方法,如果api很多需要引入的时候,需要一条一条的写

 第二种引入方法:

$bus全局事件总线:

Vue的原型对象: 组件实例的原型的原型是vue.prototype

所有的组件实例可以找Vue.prototype借用属性和方法        

这种方法可以一次性把多条api引入任意的组件中,我们只需要在main.js中引入一次,所有的组件使用api里面的接口,就不用再引入了,我们可以直接找Vue.prototype借用

在main.js中统一接口api文件夹里面全部请求函数

这是打印的结果: 是一个对象,里面包含了所有请求方法

在main.js中这样写:就完成了

2. 3.发请求

我们点击提交订单的时候,需要发请求

先找到对应的点击提交订单的结构

 在pages/Trade/index.vue中:

把结构换成a标签,绑定点击事件

 书写事件处理函数,先测试一下我们的$API里面有没有我们的api方法

结果:点击提交按钮,我们会在控制台看到方法

 注意:现在我们存储数据不用vuex了,用data来管理

发请求

 在pages/Trade/index.vue中:

2.3.1先把交易编码解构出来

 

 2.3.2 其余6个参数放入

复制粘贴这个例子放到:let data = 后面 

{
    "consignee": "admin",
    "consigneeTel": "15011111111",
    "deliveryAddress": "北京市昌平区2",
    "paymentWay": "ONLINE",
    "orderComment": "xxx",
    "orderDetailList": [
        {
            "id": null,
            "orderId": null,
            "skuId": 6,
            "skuName": " Apple iPhone 11 (A2223) 128GB 红色 移动联通电信22",
            "imgUrl": "http://182.92.128.115:8080//rBFUDF6V0JmAG9XGAAGL4LZv5fQ163.png",
            "orderPrice": 4343,
            "skuNum": 2,
            "hasStock": null
        },
        {
            "id": null,
            "orderId": null,
            "skuId": 4,
            "skuName": "Apple iPhone 11 (A2223) 128GB 红色",
            "imgUrl": "http://182.92.128.115:80800/rBFUDF6VzaeANzIOAAL1X4gVWEE035.png",
            "orderPrice": 5999,
            "skuNum": 1,
            "hasStock": null
        }
    ]
}

 这里刚刚好6个数据,都是我们需要的,这6个数据我们在前面已经通过计算属性计算了,那么我们替换一下这里的数据,这里的数据不能写死

 我们之前通过计算属性计算出来了

2. 3.3替换数据

这样我们需要的参数就准备好了

2. 3.4把参数放入()内

 测试:点击提交订单,显示提交订单成功

 

3.获取订单号与展示支付信息

提交成功后,我们需要存储订单号,也就是上图中的data

因为我们支付的时候,需要知道支付的是哪笔订单,到时候在支付页面中我们需要使用这个数据

这个数据我们存储在data中

3.1.定义一个订单号

3.2.进行判断成功与失败分别做什么

测试:现在点击提交订单,我们可以发现提交成功

 

3.3.页面中展示真实订单号

跳转到支付页面后,我们可以看到url中我们已经有订单号了,我们需要把真实订单号展示到页面中

 

在pages/Pay/index.vue中:

计算出来写的就短一点,不计算写的有点长

 

 插值语法替换数据

 

还有这个应付的金额的数据我们也需要替换为真实的数据,但是这个应付的金额我们需要拿着我们的订单号,重新发请求,获取到我们支付的信息

请求地址: /api/payment/weixin/createNative/{orderId}

请求方式:get

返回的数据中有我们的需要支付的总金额

获取订单支付信息接口

3. 4.写接口

在api/index.js中: 

3. 5.当路由一跳转,我们可以拿到订单号,只要组件一挂载,我们需要展示应付金额,我们需要在mounted中发请求

 在pages/Pay/index.vue中:

 控制台查看:

3. 6.返回的结果我们需要存储一下:

 控制台:这个时候我们可以看到我们组件的身上已经有payInfo的数据了

 totalFee是应付的金额

3.7.展示应付的金额

 效果:实现

 

下一步就是我们点击立即支付,弹出支付的二维码

下一篇文章,我来细说