我這里使用的是vant插件
<template>
<div>
<van-button class="payBtn" slot="button" size="normal" type="primary" :disabled="isDisabledSubmitBtn" @click="handelPay">確認支付</van-button>
</div>
</template>
<script>
import {
paymentSubmit
} from "../../api/industry"; //根據路徑引入后端接口（注意檢查路徑是否正確）
export default {
name: 'payment',
data() {
return {
isDisabledSubmitBtn:true, //按鈕是否禁用
money:null //金額
}
},
created() {
},
methods: {
handelPay() {
let params={
money:this.money
} //根據后端所需傳參數
this.isDisabledSubmitBtn=true //防止用戶點擊多次
paymentSubmit(params).then(res => {
this.weChatParameter=res
this.weixinPay()
});
},
//解決微信內置對象報錯
weixinPay(params){
var that= this;
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady(params), false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady(params));
document.attachEvent('onWeixinJSBridgeReady',that.onBridgeReady(params));
}
}else{
that.onBridgeReady();
}
},
//微信內置瀏覽器類，weChatParameter對象中的參數是3.步驟代碼中從后端獲取的數據
onBridgeReady(){
var that = this;
var timestamp=Math.round(that.weChatParameter.timeStamp).toString();
WeixinJSBridge.invoke(
'getBrandWCPayRequest',{
debug:false,
"appId":that.weChatParameter.appId, //公眾號名稱，由商戶傳入
"timeStamp":timestamp, //時間戳，自1970年以來的秒數
"nonceStr":that.weChatParameter.nonceStr, //隨機串
"package":that.weChatParameter.package,
"signType":that.weChatParameter.signType, //微信簽名方式：
"paySign":that.weChatParameter.paySign, //微信簽名
jsApiList: [
'chooseWXPay'
]
},
function(res){
// 使用以上方式判斷前端返回,微信團隊鄭重提示：res.err_msg將在用戶支付成功后返回ok，但並不保證它絕對可靠。
if(res.err_msg == "get_brand_wcpay_request:ok" ){ //支付成功后的操作
that.$toast({
message: ‘支付成功’,
duration: 2000
});
that.isDisabledSubmitBtn=true
}else if(res.err_msg=='get_brand_wcpay_request:cancel'){ //取消支付的操作
that.$toast({
message: ‘取消支付’,
duration: 2000
});
that.isDisabledSubmitBtn=false //按鈕恢復高亮
}else{ //支付失敗的操作
that.$toast({
message: ‘支付失敗’,
duration: 2000
});
that.isDisabledSubmitBtn=false //按鈕恢復高亮
}
}
);
}
}
}
</script>
<style scoped>
.payBtn {
border: none;
width: 70%;
border-radius: 5px;
font-size: 16px;
height: 44px;
line-height: .44rem;
background-color:#11415F;
}
</style>
在api中定義industry.js文件
//支付接口 export const paymentSubmit = (params={}) => { return request({ url:‘后端支付接口’, method: 'post', params: params }) }