pay(){
let data ={
  order_id:this.order_id,
  wechatpay_type:this.wechatpay_type,
  merchant_id:localStorage.merchant_id,
  authentication_token:this.token,
  client_token:this.client_token
}
this.$fetch(this.Wxpay, data)
.then(res=>{
  if(res.code==200){
    if (res.data.wechatpay_type == "wxpay") {
    // 公众号支付
    this.callWxPay(res.data.pay_param);
  } else if (res.data.wechatpay_type == "wxpay_h5_wap") {
    this.callWxPayH5(res.data.pay_param.mweb_url);
  } else if (res.data.wechatpay_type == "wxpay_app") {
    this.callWxPayAPP(res.data.pay_param);
  } else {
    Toast('无效的支付类型');
  }
  }else{
    Toast(res.error)
  }
  },err=>{
    alert(JSON.stringify(err))
  })
},
 
jsApiCall(params) {
  let that = this
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest', {
      'appId': params.appId,
      'timeStamp':params.timeStamp,
      'nonceStr': params.nonceStr,
      'package': params.package,
      'signType': params.signType,
      'paySign': params.paySign
    },
    function (res) {
      if (res.err_msg === 'get_brand_wcpay_request:ok') {
        Toast('微信支付成功')
        that.$router.replace({name:'fullOrder',query:{id:'2'}})
      } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
        Toast('用户取消支付')
        that.$router.replace({name:'fullOrder',query:{id:'1'}})
      } else if (res.err_msg === 'get_brand_wcpay_request:fail') {
        Toast('网络异常,请重试')
      }
    }
  );
},
 
callWxPay(params) {
  if (typeof WeixinJSBridge == "undefined"){
  if( document.addEventListener ){
    document.addEventListener('WeixinJSBridgeReady', this.jsApiCall(params), false);
  }else if (document.attachEvent){
    document.attachEvent('WeixinJSBridgeReady', this.jsApiCall(params));
    document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall(params));
    }
  }else{
    this.jsApiCall(params);
  }
},
 
callWxPayH5(mweb_url) {
  location.href = mweb_url;
},
 
callWxPayAPP(params) {
  let dsBridge = require("dsbridge");
  dsBridge.call("requestWeChatPay", params, function (data) {
    alert(data);
  })
},
 
wechatpaytype(){
  if(this.isWeiXin()){
    this.wechatpay_type='wxpay'
  }else{
    this.wechatpay_type='wxpay_h5_wap'
  }
},
 
isWeiXin(){    //判断是否微信平台
  var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger'){
    return true;
  } else {
    return false;
  }
}

vue 调用微信支付方法的更多相关文章

  1. 微信公众号内H5调用微信支付国内服务商模式

    最近在折微信公众号内H5用JSAPI调用微信支付,境内服务商版支付,微信支付给出的官方文档以及SDK不够详细,导至我们走了一些弯路,把他分享出来,我这边主要是用PHP开发,所以未加说的话示例都是PHP ...

  2. WAP调用微信支付https://pay.weixin.qq.com/wiki/doc/api/wap.php?chapter=15_1

    公司做的一个购物网站 之前微信版的网站要搬在webView上   可是微信支付是个问题 , 在外部浏览器怎么都发不起微信请求 , 原因是因为页面调用的微信浏览器自带JSAPI 在外部浏览器无法调用,但 ...

  3. 微信公众号支付(三):页面调用微信支付JS并完成支付

    一.调用微信的JS文件 1.首先要绑定[JS接口安全域名],“公众号设置”的“功能设置”中 2.引入JS文件 备注:支持使用 AMD/CMD 标准模块加载方法加载 <script type=&q ...

  4. 前端如何在h5页面调用微信支付?

    在微信服务号开发的时候经常会遇到微信支付的功能实现,通过实际经验自己总结了一下,前端在H5页面调起微信支付有两种办法,一是利用内置对象,二是通过引用微信的js sdk,亲测都能支付成功,从写法上来看用 ...

  5. TP5调用小程序微信支付,回调,在待支付中再次调用微信支付

    1,必须要有 $mch_id $key $appid这三个值,是需要去申请的,我是直接用公司的2,购买商品订单号用户openid统一下单名称商品价格(必须以分为单位,调起微信支付)服务器的ip地址(没 ...

  6. Wechat 微信端调用“微信支付接口”的正确方式

    微信端的项目中,比如微信商城之类的,肯定会涉及到微信支付这一块: 下面直接上详细的代码: var data = {--}; // 调用微信支付需要的数据 function onBridgeReady( ...

  7. h5内嵌微信小程序,调用微信支付功能

    在小程序中不能使用之前在浏览器中配置的支付功能,只能调用小程序专属的api进行支付. 因为需要在现在实现的基础上,再添加在小程序中调用微信支付功能,所以我的思路是这样的 1.在点击支付按钮时,判断是不 ...

  8. 关于IOS调用微信支付jsapi不起作用的解决方法

    微信支付时,安卓机调用 jsapi可以支付,IOS就不行,点击立即支付,直接返回原立即支付页面,跟刷新页面差不多,解决方案很简单:两句话而已. 不得不说,微信支付坑太多了,我擦..... <sc ...

  9. VUE 进行微信支付,解决 微信支付URL未注册

    使用history方式 比较坑吧就不吐槽了,说下实现方式 需要解决问题: 1.因为我的微信支付授权路由是:m.xxxx.com,this.$router.push('xxx')之后经常出现 [微信支付 ...

随机推荐

  1. AlterDialog对话框的使用

    第一步先写出layout文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xml ...

  2. Nginx系列1.2:nginx-rtmp流媒体服务器添加权限认证(推流权限和播放权限)

    用到的工具:OBS Studio(推流).nginx-rtmp流媒体服务器.VLC(拉取流播放) Nginx系列1:ubuntu16.04编译出适合自己的nginx服务器 Nginx系列1.1:ubu ...

  3. Octave(控制语句)

    for循环遍历 >> v = zeros(,) v = >> v() ans = >> :, v(i) = ^i; end; >> v v = 或者: ...

  4. kafka相关

    一.消息队列优点(解耦.异步.削峰)二.用消息队列都有什么优点和缺点?三.kafka.activemq.rabbitmq.rocketmq都有什么区别四.如何保证消息队列的高可用啊?五.如何保证消息不 ...

  5. hibernate的详解

    一,环境的搭建 1)创建maven项目 2)导入依赖的jar包.pom.xml和创建实体类User <?xml version="1.0" encoding="UT ...

  6. Vue -- element-ui FileSaver.js 导出

    html <el-button type="danger" @click="exportRs">导出Excel报表</el-button> ...

  7. 将CHROME WEBSTORE里的APPS和扩展下载到本地 转载自:http://ro-oo.diandian.com/post/2011-05-28/1103036

    Chrome Webstore 自动改版后就不能再直接下载到本地... 下载地址: https://clients2.google.com/service/update2/crx?response=r ...

  8. Log 日志收集

    class Log { private readonly static String DateFormat = "yyyyMMdd"; private readonly stati ...

  9. 03_mysql-python模块, linux环境下python2,python3的

    ---恢复内容开始--- 1.Python2 正常 [root@IP ~]# pip install mysql-python DEPRECATION: Python 2.7 will reach t ...

  10. Appium自动化测试教程-自学网-app基础知识

    Instrumentation的缺点是不支持跨应用,比如我想要先调起通讯录,在操作其他的app,则不支持. 第一步,应该确定系统哪些模块适合自动化.哪些不适合做自动化,明确做自动化给我们带来的好处是什 ...