注文を送信
コンポーネントがありません。最初にコンポーネントを移動してください
ルーティングを構成する
次に、静的な有料ページがあります
ここでの注文の送信は、単に直接ルーティング ジャンプするだけでなく、支払ったデータを含むリクエストをサーバーに送信します。
注文を送信
リクエストアドレス
/api/order/auth/submitOrder?tradeNo={tradeNo}
リクエストメソッド
役職
パラメータの種類
| パラメータ名 |
タイプ |
必要ですか? |
説明 |
| トレーダー番号 |
弦 |
Y |
トランザクション番号 (パスに結合) |
| 荷受人 |
弦 |
Y |
受取人の名前 |
| 荷受人電話番号 |
弦 |
Y |
受信者の電話 |
| 配達先住所 |
弦 |
Y |
受信者のアドレス |
| 支払い方法 |
弦 |
Y |
支払方法 （ONLINEはオンラインの略です） |
| 注文コメント |
弦 |
Y |
注文メモ |
| 注文詳細リスト |
配列 |
Y |
複数の項目オブジェクトを格納する配列 |
例：
{
"荷受人": "管理者",
"荷受人電話番号": "15011111111",
"deliveryAddress": "北京昌平 2 区",
"支払い方法": "オンライン",
"orderComment": "xxx",
"orderDetailList": [
{
"id": null、
"orderId": null、
「skuId」: 6、
"skuName": "Apple iPhone 11 (A2223) 128GB レッド China Unicom Telecom 22",
"imgUrl": "http://182.92.128.115:8080//rBFUDF6V0JmAG9XGAAGL4LZv5fQ163.png",
「注文価格」: 4343、
「skuNum」: 2、
"在庫あり": null
}、
{
"id": null、
"orderId": null、
「skuId」: 4、
"skuName": "Apple iPhone 11 (A2223) 128GB レッド",
"imgUrl": "http://182.92.128.115:80800/rBFUDF6VzaeANzIOAAL1X4gVWEE035.png",
「注文価格」: 5999、
「skuNum」: 1、
"在庫あり": null
}
]
}
戻り値の例
成功：
| { 「コード」: 200、 "メッセージ": "成功", "data": 71, // orderId注文番号 「わかりました」: 本当 } |
インターフェースを書きます。別の方法があります。vuex を通過するのに邪魔になることはありません。
ここに新しい要件があります。一度導入するだけで、インターフェイスを使用できます。グローバル イベント バスを使用できます。
統一されたインポート方法
ここでは vuex を使用せずに方法を変更しました。データを使用してデータを保存する
テストしてみて、うまくいきました
注文番号を取得して支払い情報を表示する
注文が正常に送信された場合は、ここで判断します。配線ジャンプ + 配線引き渡しパラメータ
次に、過去に渡した値を有料ページに表示します
ここのように、注文番号が渡されて、リクエストが開始されます。
注文の支払い情報を取得する
リクエストアドレス
/api/payment/weixin/createNative/{orderId}
リクエストメソッド
得る
パラメータの種類
| パラメータ名 |
タイプ |
必要ですか? |
説明 |
| 注文ID |
弦 |
Y |
支払い注文ID (注文を送信することで取得) |
戻り値の例
成功：
| { 「コード」: 200、 "メッセージ": "成功", "データ"： { "codeUrl": "weixin://wxpay/bizpayurl?pr=P0aPBJK", 「注文ID」: 71、 "合計料金": 23996、 "結果コード": "成功" }、 「わかりました」: 本当 } |
次にAPIを書きます
次に、マウントされた状態でリクエストを送信します
ライフサイクル関数で 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页面当中
微信支付业务下
我们不应该在点完已支付成功后直接消失
