uinapp万能支付模板

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,      //公众号微信支付
}