标签:his methods round number str func result padding length
a. getOrderInfo 获取到订单信息,主要是prepayid,对应统一下单api的返回值。
b. uni.requestPayment发起支付,效果就是弹出微信支付框输入密码支付。第一个参数是“wxpay”,第二个参数就是OrderInfo.
前端代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
<template> <view> <page-head :title= "title" ></page-head> <view class= "uni-padding-wrap" > <view style= "background:#FFF; padding:50upx 0;" > <view class= "uni-hello-text uni-center" >支付金额</text></view> <view class= "uni-h1 uni-center uni-common-mt" > <text class= "rmbLogo" >¥</text> <input class= "price" type= "digit" :value= "price" maxlength= "4" @input= "priceChange" /> </view> </view> <view class= "uni-btn-v uni-common-mt" > <!-- #ifdef APP-PLUS --> <template v-if= "providerList.length > 0" > <button v-for= "(item,index) in providerList" :key= "index" @click= "requestPayment(item,index)" :loading= "item.loading" >{{item.name}}支付</button> </template> <!-- #endif --> </view> </view> </view> </view> </template> <script> export default { data() { return { title: ‘request-payment‘ , loading: false, price: 1 , providerList: [] } }, onLoad: function() { // #ifdef APP-PLUS uni.getProvider({ service: "payment" , success: (e) => { console.log( "payment success:" + JSON.stringify(e)); let providerList = []; e.provider.map((value) => { switch (value) { case ‘alipay‘ : providerList.push({ name: ‘支付宝‘ , id: value, loading: false }); break; case ‘wxpay‘ : providerList.push({ name: ‘微信‘ , id: value, loading: false }); break; default: break; } }) this.providerList = providerList; }, fail: (e) => { console.log( "获取支付通道失败:" , e); } }); // #endif }, methods: { async requestPayment(e, index) { this.providerList[index].loading = true; let orderInfo = await this.getOrderInfo(e.id); console.log( "得到订单信息" , orderInfo); if (orderInfo.statusCode !== 200 ) { console.log( "获得订单信息失败" , orderInfo); uni.showModal({ content : "获得订单信息失败" , showCancel: false }) return; } uni.requestPayment({ provider: e.id, orderInfo: orderInfo.data.data, success: (e) => { console.log( "success" , e); uni.showToast({ title: "感谢您的赞助!" }) }, fail: (e) => { console.log( "fail" , e); uni.showModal({ content : "支付失败,原因为: " + e.errMsg, showCancel: false }) }, complete: () => { this.providerList[index].loading = false; } }) }, getOrderInfo(e) { let appid = "" ; // #ifdef APP-PLUS appid = plus.runtime.appid; // #endif let url = ‘http://10.10.60.200:8070/sc-admin/sales/wx/prepay/?brokerId=shba01‘ ; return new Promise((res) => { uni.request({ url: url , success: (result) => { res(result); }, fail: (e) => { res(e); } }) }) }, priceChange(e) { console.log(e.detail.value) this.price = e.detail.value; } } } </script> <style> .rmbLogo { font-size : 40 upx; } button { background-color : #007aff ; color : #ffffff ; } .uni-h 1 .uni- center { display : flex; flex- direction : row; justify- content : center ; align-items: flex-end; } .price { border-bottom : 1px solid #eee ; width : 200 upx; height : 80 upx; padding-bottom : 4 upx; } .ipaPayBtn { margin-top : 30 upx; } </style> |
uni-app开发经验分享八: 实现微信APP支付的全过程详解
标签:his methods round number str func result padding length
原文地址:https://www.cnblogs.com/HelloLc/p/14186995.html