移动端微信支付和支付宝支付

Posted 2020-11-10 从入门到放弃

说明：

此项目是h5+app项目，不是此项目，请勿参考

context是this

curPayType是支付的方式

ordercode当前订单号 

1    Alipay(curPayType,ordercode){
2     if(curPayType){//微信支付
 3       context.$fetch.post(‘url‘,{ordercode}).then((res)=>{//url为请求微信支付的接口
 4         console.log(‘微信支付‘,res.data)
 5         var self = plus.webview.currentWebview();//5-9行作用，打开一个新的窗口，在设置一下安全域名，不然会报商家存在未配置的参数。。。。
 6           var payView = plus.webview.create(res.data.url, ‘wxpay‘, { //打开一个新的窗口，res.data.url是后端返回的支付链接
 7           top: ‘1000px‘,bottom: ‘1000px‘,
 8           additionalHttpHeaders:{referer:‘https://pay.52dd.cn‘}//设置安全域名
 9         });
　　　　　　//由于没有支付成功的回调，所以以下内容是进行查询用户是否支付成功
10         context.$vux.confirm.show({//10-33行是vux UI框架的cofirm弹框，详情参考官网文档 https://doc.vux.li/zh-CN/components/confirm.html
11           title: ‘消息提示‘,//11-14行是这种弹框的显示内容
12           content: ‘如果你已完成，请点击“已完成付款”‘,
13           confirmText:‘已完成付款‘,
14           cancelText:‘继续支付‘,
15           onCancel : () => { //点击了继续支付
16             context.Alipay(‘1‘)
17           },
18           onConfirm : () => { //点击了已完成支付，发送请求查询当前订单号是否已经付款
19             context.$fetch.post(‘url‘,{ordercode}).then((res)=>{//此url是查询用户是否付款成功的接口
20               if(res.data.orders_pay_status == 2){//支付成功
21                 context.$router.push(‘editUserInfo‘)//跳转页面
22               }else if(res.data.orders_pay_status == 1){//待支付
23                 context.$vux.confirm.show({//vux UI框架的弹窗
24                   title: ‘消息提示‘,
25                   content: ‘支付失败‘,
26                   // 组件除show外的属性
27                   onCancel : () => {},
28                   onConfirm : () => {}
29                 })
30               }
31             })
32           }
33         })
34       });
35     }else{//支付宝
36       context.$fetch.post(‘url‘,{ordercode:context.ordercode}).then((res)=>{//url为请求支付宝支付的接口
　　　　　　1、我这点的这个支付宝接口，默认是返回的一个表单，而且有等待用户确认支付的页面，而且支付成功后自己跳转到了其他产品的页面去了，这并不是我想要的，我想自己跳转页面。
　　　　　　2、37和39处的url是同一个
　　　　　　
　　　　　　　orderhome页面出来的逻辑就是拿到我存的那个表单，把他用v-html渲染在页面上，然后把提交就ok了，我的表单是这么触发的，需要包一个定时触发函数，每个人开发的不一样，更具你自己的情况来，如下

　　　　　　　　window.document.forms[‘alipaysubmit‘].submit();

37 　　　　　let url = window.location.origin + ‘/#/orderhome‘//这个页面是用来打开后端返回的form表单，要将这个表单在这个页面提交，不能在当前页面提交，否则会自己挑到其他产品的页面，我这个情况是后端不给我写接口了，就让我用以前的 38 var self = plus.webview.currentWebview(); 39 var payView = plus.webview.create(url, ‘alipay‘, {//plus.webview.create就是打开一个新的页面，把上面的url拿过来，在下面保存了后端返回的form表单，在这个打开的页面进行提交， 40 top: ‘1000px‘,bottom: ‘1000px‘, //把top和buttom设置成0px能看见页面 41 additionalHttpHeaders:{referer:‘https://pay.52dd.cn‘}//设置安全域名 42  }); 43  self.append(payView);
　　　　　　//45-46行下面内容是将后端返回的form表单存储起来
45         let str = JSON.stringify(res)
46         window.localStorage.setItem(‘from‘,res)
　　　　　　//由于后端返回的那个表单提交后会自己打开一个让用户确认是否支付的界面，在上面的orderhome中被打开，而那个页面我们把他隐藏了，用户是看不见的，现在让用户看我我们自己写的
47         context.$vux.confirm.show({
48           title: ‘消息提示‘,
49           content: ‘如果你已完成，请点击“已完成付款”‘,
50           confirmText:‘已完成付款‘,
51           cancelText:‘继续支付‘,
52           onCancel : () => {
53             context.Alipay()
54           },
55           onConfirm : () => {
56             context.$fetch.post(‘url‘,{ordercode:context.ordercode}).then((res)=>{//此url是查询是否支付成功的接口
57               if(res.data.orders_pay_status == 2){
58                 context.$router.push(‘editUserInfo‘)
59               }else if(res.data.orders_pay_status == 1){
60                 context.$vux.confirm.show({
61                   title: ‘消息提示‘,
62                   content: ‘支付失败‘,
63                   // 组件除show外的属性
64                   onCancel : () => {},
65                   onConfirm : () => {}
66                 })
67               }
68             })
69           }
70         })
75       });
76     }
77 }