江阴做网站的公司有,衡阳微信网站开发,唐山做网站优化,湖南长沙十大特产提交订单 没有组件#xff0c;先搬组件 配置路由 然后静态pay页面就有了
这里提交订单不是简单的直接进行路由的跳转#xff0c;而且要拿你支付的数据向服务器发请求
提交订单
请求地址
/api/order/auth/submitOrder?tradeNo{tradeNo}
请求方式
POST
参数类型 参数名…提交订单 没有组件先搬组件 配置路由 然后静态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?prP0aPBJK, 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这是 iHTML/i 片段/strong, HTML 片段, {dangerouslyUseHTMLString: true,// 中间布局center:true,// 是否显示取消按钮showCancelButton:true,// 取消按钮的文本内容cancelButtonText:支付遇到问题,confirmButtonText:已支付成功,// 右上角的xshowClose: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页面当中
微信支付业务下
我们不应该在点完已支付成功后直接消失
