vue中调起支付宝支付AlipayJSBridge 调用微信支付（商户支付）WeixinJSBridge

1： 我最近最外快的时候，做到调起支付宝支付，然后百度了，然后都是你抄我，我抄你的一点效果都没有的。好了废话少说上代码。ps: window.onload 初始化的只能作为一个单页面才会有效果，如果作为组件的话就没有效果

<template>
    <div>
        <div class="model" :class="model">
            <div class="model-box">
                <div class="weui-loading" style="width: 60px;height: 60px; margin-top: 87px;"></div>
            </div>
        </div>
        <div class="contanice"  v-if="RoomInfos == false">
            <!-- <div class="moneycode"  >
                <span class="xaiofe">点单类型:</span>
                <div class="right" style="padding-right:2.7%;">
                    <span class="zhifumoney"> ￥{{name}}</span>
                </div>
            </div> -->
            <div class="room_size">
                 <div class="weui-cell" style="background-color:#fff">
            <div class="weui-cell__hd"><label class="weui-label">订单类型</label></div>
            <div class="weui-cell__bd">
                <div class="weui-input" style="color:#999" data-i="1">{{RcodeList.ordertype}}</div>
            </div>
        </div>
        
         <div class="weui-cell" style="background-color:#fff;margin-top:10px;margin-bottom:10px;" >
            <div class="weui-cell__hd"><label class="weui-label">房台号</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" ref="input_description"  :value="RcodeList.room"  style="font-width:600;color:#999;font-size:16px" readonly placeholder="">
                
            </div>
        </div>
          <div class="weui-cell" style="background-color:#fff;margin-top:10px;margin-bottom:10px;" >
            <div class="weui-cell__hd"><label class="weui-label">金额</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" ref="input_description"  :value="RcodeList.money"  style="font-width:600;color:#999;font-size:16px" readonly placeholder="选填">
                
            </div>
        </div>
          <div class="weui-cell" style="background-color:#fff;margin-top:10px;margin-bottom:10px;"  >
            <div class="weui-cell__hd"><label class="weui-label">支付方式</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" ref="input_description"  :value="RcodeList.paytype" readonly  style="font-width:600;color:#999;font-size:16px"     type="text" placeholder="选填">
                <!--blur失去焦点的时候调用  -->
            </div>
        </div>
            </div>
         <div class="button-sp-area" style="position:fixed;bottom:100px;left:10%;width:80%;" >
            <a href="javascript:;" @click.stop="RedirectSurepay" v-if="disable == false" class="weui-btn weui-btn_block weui-btn_primary">支付</a> 
            <a href="javascript:;"   v-if="disable == true" class="weui-btn weui-btn_block weui-btn_primary">支付</a> 
        </div>
        </div>
          <!-- <van-divider v-if="RoomInfos == true">{{roominfo}}</van-divider>
         <sRoom @sValue="getRoomName" :datas="datatype" :shows="shows" @exit="exit" /> -->
    </div>
</template>
<script>
window.onload
import {
    GetCashierInfo,
    RedirectSurepay
}
from '../../api/index'
import wx from 'weixin-js-sdk'  
export default {
    name:'RecodeIndex',
    data(){
        return{
            model:'none',
            RoomInfos:false,
            trade_type:'',
            RcodeList:{},
            disable:false
        }
    },
     created(){
         let data  = {
             type:this.$route.query.type,
             ordersn:this.$route.query.ordersn,
             trade_type:this.$route.query.trade_type,
             i:this.$route.query.i
         }
         this.trade_type = this.$route.query.trade_type;
         console.log(this.$route.query)
         this.$nextTick(()=>{
             this.GetCashierInfo(data)
            
         })
    },
    // 引入支付宝jsapi
    mounted() {
        const s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = 'https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js';
        document.body.appendChild(s);
         window.onload =()=>{   //初始化产生一个全局变量 AlipayJSBridge
         this.readys()
              
         }
    },
    methods:{
      //获取初始数据
      async  GetCashierInfo(data){
            const _this  = this;
            let result = {};
            result = await GetCashierInfo(data)
            if( result.code == 0 ){
                _this.RcodeList = result.data
            }
        },
        // /微信商户支付
        async initWX(data){
            console.log('data',data)
             WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
                "appId":data.sdk_appid,     //公众号名称，由商户传入     
                "timeStamp":data.sdk_timestamp,         //时间戳，自1970年以来的秒数     
                "nonceStr":data.sdk_noncestr, //随机串     
                "package":data.sdk_package,     
                "signType":data.sdk_signtype,         //微信签名方式：     
                "paySign":data.sdk_paysign //微信签名 
       },
       function(res){     
           console.log(res)
               // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
       }
    ); 
        },
        async RedirectSurepay(){
            // ype（订单类型）ordersn（流水号）openid(微信) appid(微信) 或 auth_code(支付宝) 页面地址中拿
                const _this = this;
                _this.disable = true;
                let result = {};
               
                if(_this.trade_type == "ALIPAY"){       //支付宝支付
                          var data  = {
                            type:_this.$route.query.type,
                            ordersn:_this.$route.query.ordersn,
                            auth_code:_this.$route.query.auth_code,
                            i:_this.$route.query.i,
                            trade_type:_this.$route.query.trade_type
                        }
                }else if(_this.trade_type == "WECHAT"){    //微信支付
                       var data  = {
                            type:this.$route.query.type,
                            ordersn:this.$route.query.ordersn,
                            openid:this.$route.query.openid,
                            appid:this.$route.query.appid,
                            i:this.$route.query.i,
                            trade_type:_this.$route.query.trade_type
                        }
                }
                try{
                     result = await RedirectSurepay(data);
                     console.log('result',result)
                     if( result.code == 0 ){
                           if (window.AlipayJSBridge) {
                                _this.tradePay(result.data)  && _this.alipay(result.data)
                            } else {
                                document.addEventListener('AlipayJSBridgeReady',  _this.alipay(result.data), false);
                            }
                            if( _this.trade_type == "WECHAT" ){
                                _this.initWX(result.data)   //微信支付
                            }else if( _this.trade_type == "ALIPAY" ){
                                _this.alipay(result.data)   //支付宝支付
                            }
                     }else{
                         _this.$msg({
                             text:result.msg,
                             type:'info'
                         })
                          _this.disable = false;
                     }
                } catch(e){
                     _this.$msg({
                             text:'程序出错',
                             type:'info'
                         })
                    console.log('程序出错',e)
                }
               
        },
      readys(callback) {
          console.log(window)
            if (window.AlipayJSBridge) {
                callback && callback();
            } else {
                document.addEventListener('AlipayJSBridgeReady', callback, false);
            }
        },
      tradePay(tradeNO) {
                // 通过传入交易号唤起快捷调用方式(注意tradeNO大小写严格)
                AlipayJSBridge.call("tradePay", {
                    tradeNO: tradeNO.reserved_transaction_id
                }, function (data) {
                    //log(JSON.stringify(data));
                    if(data.resultCode!=9000){
                        //支付失败
                        alert(data.resultCode+"："+data.memo);
                    }else{
                    }
                });
            
        },
       async alipay(id){
               AlipayJSBridge.call("tradePay", {
                    //   tradeNO: "2020111422001434251423057464"
                      tradeNO: id.reserved_transaction_id
                  }, function (data) {
                      console.log(data)
                      //log(JSON.stringify(data));
                  if(data.resultCode!=9000){
                      //支付失败
                     
                    //   alert(data.resultCode+"："+data.memo);
                  }else{
                    this.$msg({
                          text:'支付成功!',
                          type:'info'
                      })
                      //支付成功
                  }
              });

       },
    }

}
</script>
<style scoped>
.contanice{
    /* background: #f1f1f1; */
}
.cont_code{
    padding: 15px;
    /* min-height: 50px; */
    text-align: center;
    background: red;
}
.moneycode{
    display: block;
    margin: 0 auto;
    width: 90%;
    border:1px solid  #999;
    min-height: 40px;
    background: #ffff;
    border-radius: 6px;
}
.cont_code img{
    width: 50px;
    display: inline-block;
    float: left;
}
.cont_code span{
    /* line-height: 50px; */
    display: inline-block;
}
.moneycode .xaiofe{
    display: inline-block;
    line-height: 40px;
    font-size: 12px;
    color: #999;
    padding-left: 2.7%;
}
.moneycode .zhifumoney{
     display: inline-block;
    line-height: 40px;
    /* font-size: 19px; */
    color: #333;
    padding-right: 2.7%;
    font-size: 20px;
}
.mendian{   
    font-size: 20px;
    font-family: monospace;
    /* font-weight: bold; */
}
.beizhu{
    font-size: 13px;
    color: #999;

}
.room_size{
    padding: 15px 0;
    font-size: 19px;
    /* font-weight: bold; */
    font-family: monospace;
}
.mealmodel{
    position: fixed;
    background: rgba(0,0,0,.7);
    z-index: 9999;
    width: 100%;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
}
.mealbock{
  width: 95%;
    /* height: 86%; */
    background: #fff;
    display: block;
    margin: 0 auto;
    position: relative;
    border-radius: 10px;
    top: 35%;
    overflow-y: auto;
}
.close_img{
  display: block;
  text-align: center;
  width: 100%;
  color: #333333;
  font-size: 16.2px;
  font-weight: 600;
  font-family: PingFang-SC-Medium;
  position: relative;
  min-height: 50px;
  background: #fff;
  /* border-bottom: 1px solid rgba(153,153,153,.2); */
}
.close_img span{
  margin-top: 12.5px;
  display: inline-block;
}
.close_img img{
  position: absolute;
  right: 6%;
  /* top: 18%; */
  margin-top: 16px;
}

.moneyName{
    display: block;
    text-align: center;
    padding: 10px 0;
    font-weight: bold;
}
.weui-input{
    text-align: right;;
}
.font25{
    font-size: 25px;
    color: red;
}
.sssss{
    caret-color: red;
}
.span_ca{
    width: 1px;
    height: 20px;
    display: inline-block;
    background: red;
    -webkit-animation: twinkling 1s infinite ease-in-out;
    text-align: center;

}
.animated{ 
-webkit-animation-duration: 1s; 
animation-duration: 1s; 
-webkit-animation-fill-mode: both; 
animation-fill-mode: both 
} 
@-webkit-keyframes twinkling{ 
0%{ 
opacity: 0.5; 
} 
100%{ 
opacity: 1; 
} 
} 
@keyframes twinkling{ 
0%{ 
opacity: 0.2; 
} 
100%{ 
opacity: 1; 
} 
}
</style>