【uniapp】多种支付方式封装

在uni-app项目中常用的支付主要有支付宝支付、微信支付、应用余额内支付这几种（剩余的支付方式不是主流，我也就不讲啦，嘻嘻>-<），接下来我对这几种支付方式进行了统一的封装。

封装的好处：不需要碰到支付就写一遍uni的支付调用，很不方便

具体uni.requestPayment说明请看官方文档：
https://uniapp.dcloud.io/api/plugins/payment.html#requestpayment

先看封装代码

/* * 支付 pay.js */
export const pay = (result, self, success, fail) => {
    
	if (result.code === -10) {
    
		self.showError(result.msg);
		return false;
	}

	// 发起微信支付
	if (result.data.pay_type == 20) {
    
		//小程序支付
		// #ifdef MP-WEIXIN 
		uni.requestPayment({
     // 这里是官方需要的参数--一般是后端获取
			provider: 'wxpay',
			timeStamp: result.data.payment.timeStamp,
			nonceStr: result.data.payment.nonceStr,
			package: 'prepay_id=' + result.data.payment.prepay_id,
			signType: 'MD5',
			paySign: result.data.payment.paySign,
			success: res => {
    
				paySuccess(result, self, success);
			},
			fail: res => {
    
				self.showError('订单未支付成功', () => {
     // 这个this.showError是一个提示，我放在main.js
					payError(result, fail);
				});
			},
		});
		// #endif
		//公众号支付
		// #ifdef H5
		if(self.isWeixin()){
    
			WeixinJSBridge.invoke('getBrandWCPayRequest', JSON.parse(result.data.payment),
				function(res) {
    
					if (res.err_msg == "get_brand_wcpay_request:ok") {
    
						paySuccess(result, self, success);
					} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
    
						self.showSuccess('支付取消', () => {
    
							payError(result, fail);
						});
					} else {
    
						self.showError('订单未支付成功', () => {
    
							payError(result, fail);
						});
					}
				}
			);
		}else{
    
			//h5支付
			uni.navigateTo({
    
			    url: '/pages/order/pay-h5/pay-h5?order_id='+result.data.order_id+'&order_type='+result.data.order_type,
			});
			return ;
		}
		// #endif
		// #ifdef APP-PLUS
		//微信支付
		wxAppPay(result, self,success, fail);
		return;
		// #endif
	}
	// 余额支付
	if (result.data.pay_type == 10) {
    
		paySuccess(result, self, success);
	}
	// 支付宝支付
	if (result.data.pay_type == 30) {
    
		// #ifdef APP-PLUS
		aliAppPay(result, self,success, fail);
		// #endif
		// #ifdef H5
		uni.navigateTo({
    
		    url: '/pages/order/alipay-h5/alipay-h5?order_id='+result.data.order_id+'&order_type='+result.data.order_type,
		});
		// #endif
	}
}

/*跳到支付成功页*/
function paySuccess(result, self, success) {
    
	if(success){
    
		success(result);
		return;
	}
	gotoSuccess(result);
}
/*跳到支付成功页*/
function gotoSuccess(result) {
    
	uni.reLaunch({
    
		url: '/pages/order/pay-success/pay-success?order_id=' + result.data.order_id
	});
}

/*支付失败跳订单详情*/
function payError(result, fail) {
    
	if(fail){
    
		fail(result);
		return;
	}
	uni.redirectTo({
    
		url: '/pages/order/order-detail?order_id=' + result.data.order_id
	});
}

function wxAppPay(result, self,success, fail){
    
	// 获取支付通道 
	plus.payment.getChannels(function(channels) {
    
		self.channel = channels[0];
		console.log(self.channel);
		uni.requestPayment({
    
			provider: 'wxpay',
			orderInfo: result.data.payment,
			success(res) {
    
				paySuccess(result, self, success);
			},
			fail(error) {
    
				console.log(error);
				self.showError('订单未支付成功', () => {
    
					payError(result, fail);
				});
			},
		});
	}, function(e) {
    
		console.log("获取支付通道失败：" + e.message);
	});
}

function aliAppPay(result, self,success, fail){
    
	console.log(result.data.payment);
	uni.requestPayment({
    
		provider: 'alipay',
		orderInfo: result.data.payment,
		success(res) {
    
			paySuccess(result, self, success);
		},
		fail(error) {
    
			console.log(error);
			self.showError('订单未支付成功', () => {
    
				payError(result, fail);
			});
		},
	});
}

说明：pay.js中用到的showError写在main.js中

/** * 显示失败提示框 main.js */
Vue.prototype.showError = function (msg, callback) {
    
  uni.showModal({
    
    title: '友情提示',
    content: msg,
    showCancel: false,
    success: function (res) {
    
      callback && callback();
    }
  });
};

接下来就是使用

// test.vue
import {
     pay } from '@/common/pay.js';

addTwenOrder(bizcontent).then((res) => {
      // 这个是接口
          if (res) {
    
            uni.hideLoading();
            console.log(res.data);// 里面就是一些签名算法、随机字符串等等
            pay(res, self); // 这里调用
            this.disButton = !this.disButton;         
          }
        })
        .catch((res) => {
    
          this.disButton = !this.disButton;
          uni.hideLoading();
          console.log("回调" + JSON.stringify(res));
        });

完结~