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


    说明:

    此项目是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://xxxxxxxxx.xxxxxxxxxxx.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();
            注意下方1和2的区别,第1处的url是在手机上做开发运的网络地址,而第2处的地址是打包成app之后在手机本地用的地址
    37      1、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);
           2、let url = window.location.origin + window.location.pathname + "#/orderhome";
          //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 }

      

  • 相关阅读:
    vue(21)初识Vuex
    ESCMScript6(3)Promise对象
    vue(20)生命周期函数
    vue(19)嵌套路由
    vue(18)路由懒加载
    vue(17)vue-route路由管理的安装与配置
    vue(16)vue-cli创建项目以及项目结构解析
    vue(15)vue-cli介绍与安装
    webpack(11)配置文件分离为开发配置、生成配置和基础配置
    webpack(10)webpack-dev-server搭建本地服务器
  • 原文地址:https://www.cnblogs.com/tlfe/p/11387399.html
Copyright © 2020-2023  润新知