我这里使用的是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;
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 }) }