<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" v-model="value">
<!-- 支付宝或者微信 -->
<button @click="confirm">确认付款</button>
<script>
export default {
data() {
return {
value: ""
}
},
methods: {
confirm() {
if (this.value == "支付宝") {
let data = {
// 向后台传输需要的参数
};
aliOauth(data)
.then(res => {
if (res.data && res.error == 0) {
//后台返回的数据标识
let date = res.data.ali_trade_no;
if (window.AlipayJSBridge) {
this.aliJSDK(date);
}
}
})
.catch(err => {
console.log(err, "失败");
});
} else {
let data = {
// 向后台传输需要的参数
};
aliOauth(data)
.then(res => {
if (res.data && res.error == 0) {
//后台返回的数据标识
let data = {
appId: res.data.appId,
timeStamp: res.data.timeStamp,
nonceStr: res.data.nonceStr,
package: res.data.package_str,
signType: res.data.signType,
paySign: res.data.paySign
};
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener(
"WeixinJSBridgeReady",
this.jsApiCall,
false
);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", this.jsApiCall);
document.attachEvent(
"onWeixinJSBridgeReady",
this.jsApiCall
);
}
} else {
this.jsApiCall(data);
}
}
})
.catch(err => {
console.log(err, "失败");
});
}
},
aliJSDK(data) { //支付宝方式
window.AlipayJSBridge.call("tradePay", {
tradeNO: data
}, res => {
if ("9000" == res.resultCode) {
// 支付成功后跳转自己需要的页面
this.$router.push({
path: "需要跳转的路由路径",
query: {
// 需要带的参数
}
});
}
});
},
jsApiCall(json) { //微信公众号方式
window.WeixinJSBridge.invoke("getBrandWCPayRequest", json, res => {
window.WeixinJSBridge.log(res.err_msg);
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
paySuccessCallback();
} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
alert("已取消支付");
} else {
alert("支付失败");
}
});
},
}
}
</script>
</body>
</html>