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. 安卓已过时的ProgressDialog对话框

    private ProgressDialog mDialog; private Handler mHandler; //初始化Handler //初始化 mDialog = new ProgressD ...

  2. 纪念一下,时隔多年,继delphi上成功运行sql之后

    纪念一下,时隔多年,继delphi上成功运行sql之后,在linux上用eclipse成功运行Wordcount程序,不容易呀,折腾了十几天 但我知道,这仅仅是我学习大数据的一个开始,仅此纪念一下,不 ...

  3. idou老师教你学Istio 24:如何在Istio使用Prometheus进行监控

    使用Prometheus进行监控是Istio提供的监控能力之一.Istio提供丰富的监控能力,为网格中的服务收集遥测数据.Mixer是负责提供策略控制和遥测收集的Istio组件. Istio通过Mix ...

  4. Linux终端彩色显示输出结果

    转义序列符 为了添加个人风格的彩色提示符,我们需要使用转义序列符.一个转义序列符是一个控制命令,它控制Shell执行某个特定的动作.一个转义序列符通常以 ESC开始,在Shell中被记录为" ...

  5. cas的客户端配置

    知识点:cas的客户端配置 一:cas客户端配置 二:cas认证流程原理(图) 参考:https://www.cnblogs.com/suiyueqiannian/p/9359597.html 源码: ...

  6. react-router和react-router-dom的区别

    RR4 本次采用单代码仓库模型架构(monorepo),这意味者这个仓库里面有若干相互独立的包,分别是: react-router React Router 核心 react-router-dom 用 ...

  7. c++代码中“引用”的使用

    这些上机实验在Qt5.9上完成的,具体步骤 结构体引用 #include <iostream> #include<stdlib.h> using namespace std; ...

  8. 2019HDU多校Path——最短路最小割

    题目 给出一个 $n$ 个顶点 $m$ 条边的图,要求阻塞一些边,使得从 $1$ 到 $n$ 的最短路变长,求阻塞的边长度和的最小值,不必保证阻塞后可达. 分析 很显然,要阻塞的边肯定在最短路图上,先 ...

  9. Activiti工作流学习(一)——Activiti服务类

    Activity有9个service1.DynamicBpmnService动态Bpmn服务Service providing access to the repository of process ...

  10. java获取一段字符串里符合日期的正则表达式的字符串

    import java.util.regex.Matcher; import java.util.regex.Pattern; public class Test3 { public static v ...