Vue电商项目--订单和支付

提交订单

没有组件，先搬组件

配置路由

然后静态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

支付订单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秒）执行一次，直到支付成功为止。