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>