1.HTML部分
<template>
<view>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<view class="titleBtn" @click="onWxPay">微信小程序支付</view>
<view class="titleBtn" @click="onAliPay">支付宝支付</view>
<view class="titleBtn" @click="onToutiaoPay">头条小程序支付</view>
<view class="titleBtn" @click="onAppWxPay">app微信支付</view>
<view class="titleBtn" @click="onH5WxPay">H5微信公众号支付</view>
<view class="titleBtn" @click="openPay">打开支付弹窗(支持钱包支付)</view>
<u-popup :show="isPayPopup" mode="bottom" @close="isPayPopup=false" round="10">
<f-pay :show="isPayPopup" :payMoney="999" :tradeNo="tradeNo"></f-pay>
</u-popup>
</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { setPay,wxPublicPay } from '@/config/pay'; //支付需进入设置您的支付接口
import fPay from '@/components/module/f-pay/f-pay';
export default {
components:{
fPay
},
data() {
return {
tradeNo:'16fw61cqew6464wdc',//支付单号
isPayPopup:false,
}
},
onLoad() {
},
methods: {
// 微信小程序支付
onWxPay(){
// #ifdef MP-WEIXIN
this.onPay('mpwxpay',this.tradeNo)
// #endif
// #ifndef MP-WEIXIN
this.$u.toast('微信小程序才能用哦~')
// #endif
},
// 支付宝小程序支付
onAliPay(){
// #ifdef MP-ALIPAY || APP
this.onPay('alipay',this.tradeNo)
// #endif
// #ifndef MP-ALIPAY || APP
this.$u.toast('支付宝小程序或APP才能用哦~')
// #endif
},
// 头条小程序支付
onToutiaoPay(){
// #ifdef MP-TOUTIAO
this.onPay('toutiao',this.tradeNo)
// #endif
// #ifndef MP-TOUTIAO
this.$u.toast('头条小程序才能用哦~')
// #endif
},
// app微信支付
onAppWxPay(){
// #ifdef APP-PLUS
this.onPay('wxpay',this.tradeNo)
// #endif
// #ifndef APP-PLUS
this.$u.toast('app才能用哦~')
// #endif
},
// 微信公众号支付
onH5WxPay(){
var that = this
// #ifdef H5
wxPublicPay({
tradeNo:that.tradeNo,
},res => {
// 支付的回调
if(res.success){
uni.$u.toast('支付成功')
}else{
uni.$u.toast('支付失败')
}
})
// #endif
// #ifndef H5
this.$u.toast('微信公众号才能用哦~')
// #endif
},
//支付(app、小程序)
onPay(type,tradeNo){
setPay({
type: type, // 支付平台
tradeNo: tradeNo // 订单编号
},res => {
// 小程序支付的回调
if(res.success){
uni.$u.toast('支付成功')
}else{
uni.$u.toast('支付失败')
}
})
},
openPay(){
this.isPayPopup = true
}
},
}
</script>
<style lang="scss" scoped>
.titleBtn{
margin: 24rpx;
width: 702rpx;
padding: 20rpx 24rpx;
background-color: #007AFF;
color: #fff;
font-size: 24rpx;
text-align: center;
}
</style>
2.封装pay.js支付方法
import store from '@/store';
import { isWechat } from '@/config/h5Utils';
// 支付(app、小程序)
function setPay(payInfo, callback){
let userInfo = store.state.userInfo
let httpData = {
userId: userInfo.userId || '',
sessionId: userInfo.sessionId || '',
openid: userInfo.openId,
tradeNo: payInfo.tradeNo, // 创建支付订单时返回的 订单号
}
var url = '/api/PayApi' // 您的支付接口
uni.$u.http.post(url, httpData).then((data) => {
let payData = {
success: function(res) {
var flag = true
// #ifdef MP-ALIPAY
if(res.resultCode == 9000){
flag = true
}else{
flag = false
}
// #endif
callback && callback({
success: flag,
data: res
});
console.log('success:' + JSON.stringify(res));
},
fail: function(err) {
callback && callback({
success: false,
data: err
});
console.log('fail:' + JSON.stringify(err));
}
};
if (payInfo.type == 'mpwxpay') {
// 微信小程序
payData.provider = 'wxpay';
payData.timeStamp = data.sdk_time_stamp;
payData.nonceStr = data.sdk_nonce_str;
payData.package = data.sdk_prepay_id;
payData.signType = data.sdk_sign_type;
payData.paySign = data.sdk_pay_sign;
} else if (payInfo.type == 'wxpay') {
// app微信
payData.provider = 'wxpay';
payData.orderInfo = data.tradeNo;
} else if (payInfo.type == 'alipay') {
payData.provider = 'alipay';
payData.orderInfo = data.sdk_transaction_id;
} else if (payInfo.type == 'baidu') {
payData.provider = 'baidu';
payData.orderInfo = data.tradeNo;
} else if (payInfo.type == 'toutiao') {
payData.provider = 'toutiao';
payData.service = 5; // 5:拉起小程序收银台 其他:不拉起字节跳动小程序收银台
payData._debug = 1;
// payData.payChannel = {
// default_pay_channel: 'wx' // wx|| alipay
// };
payData.orderInfo = {
order_id: data.order_id,
order_token: data.order_token
};
}
console.log("支付参数", payData);
uni.requestPayment(payData);
}, err => {
callback && callback({
success: false,
data: err
});
});
}
//公众号微信支付
function wxPublicPay(payInfo, callback){
if(!isWechat()) {
uni.showToast({
title: "需微信公众号才能使用~",
icon: "none"
});
return
}
var url = '/api/PayApi' // 您的支付接口
uni.$u.http.post(url, {
tradeNo: payInfo.tradeNo //订单号
}).then(data => {
let wxConfigObj = {
appId: data.appId,
timeStamp: data.timeStamp,
nonceStr: data.nonceStr,
package: data.package,
signType: data.signType,
paySign: data.sign
};
function onBridgeReady() {
window.WeixinJSBridge.invoke("getBrandWCPayRequest", wxConfigObj, function(
res
) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
callback && callback({
success: true,
data: res
});
} else // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回 ok,但并不保证它绝对可靠。
if (res.err_msg == "get_brand_wcpay_request:cancel") {
// 您取消了支付
callback && callback({
success: false,
data: res
});
} else
if (res.err_msg == "get_brand_wcpay_request:fail") {
// 支付失败
callback && callback({
success: false,
data: res
});
}
});
}
if (typeof window.WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
}
} else {
onBridgeReady();
}
});
};
export {
setPay, //支付(app、小程序)
wxPublicPay, //公众号微信支付
}