提交订单
没有组件，先搬组件
配置路由
然后静态pay页面就有了
这里提交订单不是简单的直接进行路由的跳转，而且要拿你支付的数据向服务器发请求
提交订单
请求地址
/api/order/auth/submitOrder?tradeNo={tradeNo}
请求方式
POST
参数类型
| 参数名称 |
类型 |
是否必选 |
描述 |
| traderNo |
string |
Y |
交易编号(拼接在路径中) |
| consignee |
string |
Y |
收件人姓名 |
| consigneeTel |
string |
Y |
收件人电话 |
| deliveryAddress |
string |
Y |
收件地址 |
| paymentWay |
string |
Y |
支付方式 (ONLINE代表在线) |
| orderComment |
string |
Y |
订单备注 |
| orderDetailList |
Array |
Y |
存储多个商品对象的数组 |
例子:
{
"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
}
]
}
返回示例
成功：
| { "code": 200, "message": "成功", "data": 71, // orderId 订单号 "ok": true } |
写接口，这里换一种方式。我们不在通过vuex的方式。
现在我们这里有一个新的需求，只需引入一次，接口都可以使用，我们可以用全局事件总线的方式
统一引入的方式
我们这里换了一种方式，不使用vuex。用data来存储数据
测试一下，成功了
获取订单号与展示支付信息
这里做一个判断，如果提交订单成功。路由跳转+路由传递参数
然后我们在pay页面显示我们传递过去的值
像我们这里就是订单号传递过去，然后发起请求
获取订单支付信息
请求地址
/api/payment/weixin/createNative/{orderId}
请求方式
GET
参数类型
| 参数名称 |
类型 |
是否必选 |
描述 |
| orderId |
string |
Y |
支付订单ID (通过提交订单得到) |
返回示例
成功：
| { "code": 200, "message": "成功", "data": { "codeUrl": "weixin://wxpay/bizpayurl?pr=P0aPBJK", "orderId": 71, "totalFee": 23996, "resultCode": "SUCCESS" }, "ok": true } |
然后写api
然后在mounted中发请求
注意不要在生命周期函数中使用async
先把他打印出来看看，测试一下
大概是这样的
但是发现id是拿到了，但是支付报错了。可能接口不能正常使用
支付页面中使用elementUI以及按需引入
常用的组件库
React(Vue):antd[PC] antd-mobile[移动端]
Vue:elementUi[PC] vant[移动端]
没有element-ui 先下载
我们别完整引入（太大了），我们可以按需引入
配置一下
然后引入它
这里可以安装一个新的插件来帮助我们
<el-就有了 沒< 有可能没有效果
然后效果就有了
然后修改我们的项目
elementui注册组件的时候，还有一种写法，挂在原型上
这里我们需要使用这个
因为它是挂载在原型对象上，因此它可以直接this.$alert了
大概的效果是这样的
open(){
this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
dangerouslyUseHTMLString: true,
// 中间布局
center:true,
// 是否显示取消按钮
showCancelButton:true,
// 取消按钮的文本内容
cancelButtonText:'支付遇到问题',
confirmButtonText:'已支付成功',
// 右上角的x
showClose:false
});
}微信支付业务上
就是添加一个二维码的功能
现在这个接口好像蹦了，现在只提供思想。原本支付成功会返回一个data,data里面有存储微信二维码的地址
在这里我们需要使用一个新的技术，那就是qrcode.
先下载然后去应用他
这里接口不能正常使用，我才用写死方式模拟出一个
如何判断支付成功还是失败
你需要知道支付成功还是失败。
支付成功实现路由的跳转，支付失败显示提示信息
这里我们需要用新的接口
查询支付订单状态
请求地址
/api/payment/weixin/queryPayStatus/{orderId}
请求方式
GET
参数类型
| 参数名称 |
类型 |
是否必选 |
描述 |
| orderId |
string |
Y |
支付订单ID |
返回示例
成功：
| { "code": 205, "message": "支付中", "data": null, "ok": false } |
写接口
长轮询，什么叫长轮询？长轮询（Long polling） (javascript.info)
基本的逻辑是这样的
上述代码是一个定时器的逻辑，它在特定时间间隔内执行一段异步操作。下面是对代码的解析：
-
首先，判断
this.timer是否为假值（例如null或undefined）。这样可以确保只有当定时器不存在时才能创建一个新的定时器。 -
如果条件满足，将创建一个定时器。定时器使用
setInterval函数，接受两个参数：一个异步函数和时间间隔（以毫秒为单位）。 -
异步函数中，调用
this.$API.reqPayStatus(this.orderId)发送请求，获取支付状态的结果。这里使用了await关键字等待异步操作完成，并将结果赋给变量result。 -
检查
result.code是否等于200，表示支付成功。 -
如果支付成功，执行以下操作： a. 清除定时器：调用
clearInterval(this.timer)清除之前设置的定时器。 b. 将this.timer设置为null，表示定时器已被清除。 c. 保存支付成功返回的code：将result.code赋给变量this.code，以便后续使用。 d. 关闭弹出框：使用this.$msgbox.close()关闭当前弹出框。 e. 跳转到支付成功路由：使用this.$router.push('/paysuccess')导航到指定的支付成功页面。 -
整个过程会每隔1000毫秒（即1秒）执行一次，直到支付成功为止。
这段代码的作用是在一定时间间隔内轮询请求支付状态，如果支付成功，则进行相应操作，并清除定时器。
然后捞组件，实现跳转
完成，这个也告诉了我们为什么code当开始就null,如果当开始不为null，用户直接点支付成功。直接跳转到paysuccess页面当中
微信支付业务下
我们不应该在点完已支付成功后直接消失
