提交订单案例
接口信息
1、请求地址
/api/order/auth/submitOrder?tradeNo={tradeNo}
2、请求方式
POST
3、参数类型
4、例子
{
"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
}
]
}
5、返回示例
{
"code": 200,
"message": "成功",
"data": 71, // orderId 订单号
"ok": true
}
书写调用接口方法
提交订单的接口 - 还需要通过query传递参数,拼接到url地址中
// 提交订单的接口
// URL:/api/order/auth/submitOrder?tradeNo={tradeNo} method:post
export const reqSubmitOrder = (tradeNo, data) => requests({
url:`/order/auth/submitOrder?tradeNo=${tradeNo}`, // 通过query传递参数,拼接到了url地址中
data,
method:'post'
})
获取支付信息的接口
// 获取支付信息
// URL:/api/payment/weixin/createNative/{orderId} GET
export const reqPayInfo = (orderId) => requests({
url:`/payment/weixin/createNative/${orderId}`,
method:'get'
})
书写接口以后,在组件中进行调用即可
在提交订单组件中,调用接口方法 在methods中进行相应调用操作
注意:
本来如果在调用接口方法的时候,需在每个组件中
import { reqCategoryList, reqGetBannerList, reqFloorList } from '@/api/index
为了让每一个组件能够轻松调用接口函数方法,我们可以在入口文件main.js中
当然在书写调用接口方法之前,因为我们没有vuex中的commit,所以我们需要定义orderId来接收
data() {
return {
// 收集买家的留言信息
msg: "",
// 因为我们没有vuex中的commit,所以我们需要定义一个orderId来接收
// 订单号
orderId:''
};
},
methods: {
// 修改默认地址
changeDefault(address, addressInfo) {
// 全部的isDefault为0
addressInfo.forEach((item) => {
item.isDefault = 0;
address.isDefault = 1;
});
},
// 提交订单
async submitOrder() {
// 交易编码
let { tradeNo } = this.orderInfo;
// 其余的六个参数
let data = {
consignee: this.userDefaultAddress.consignee, // 最终收件人的名字
consigneeTel: this.userDefaultAddress.phoneNum, // 最终收件人的手机号
deliveryAddress: this.userDefaultAddress.fullAddress, // 收件人的地址
paymentWay: "ONLINE", // 支付方式
orderComment: this.msg, // 买家的留言信息
orderDetailList: this.orderInfo.detailArrayList // 商品清单
};
// 需要带参数的 我们需要等待服务器的成功与失败 用result来接收返回的结果
// 因为返回了成功和失败的内容,所以我们需要使用try...catch来捕获
// 当然也可以使用ifelse来解决
let result = await this.$API.reqSubmitOrder(tradeNo, data);
// console.log(result)
if(result.status == 200) {
this.orderId = result.data.data
// 提交订单成功:路由跳转 + 路由传递参数
this.$router.push('/pay?orderId='+this.orderId)
// 提交订单失败
}else {
alert(result.data.message)
}
},
},
路由跳转 + 路由传递参数
// 提交订单成功:路由跳转 + 路由传递参数
this.$router.push('/pay?orderId='+this.orderId)