Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat：修改微信，支付宝，华为支付在微信小程序，H5，华为快应用端的支付规范

Browse Source
This commit is contained in:
Zhukj
2025-12-09 17:44:33 +08:00
parent 5bd0881946
commit b522f16d66
3 changed files with 205 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

362
components/payment/payment.vue
View File

@@ -42,19 +42,65 @@
</view> </view>
</view> </view>
</uni-popup> </uni-popup>
<!-- 非H5端支付组件挂载点（小程序/华为快应用） -->
<view v-if="!isH5">
<WechatPay
v-if="showWechatPay"
:product="payProduct"
:config="{
appId: '你的微信小程序/AppID',
merchantId: '你的微信商户号',
apiKey: '你的微信API密钥',
privateKey: '你的微信RSA私钥',
publicKey: '微信支付公钥',
domain: this.$config.h5Domain
}"
@payment-success="handleWechatPaySuccess"
@payment-error="handleWechatPayError"
/>
<AlipayPay
v-if="showAlipayPay"
:product="payProduct"
:config="{
appId: '你的支付宝AppID',
merchantId: '你的支付宝商户号',
privateKey: '你的支付宝RSA2私钥',
alipayPublicKey: '支付宝公钥',
domain: this.$config.h5Domain
}"
@payment-success="handleAlipayPaySuccess"
@payment-error="handleAlipayPayError"
/>
<HuaweiPay
v-if="showHuaweiPay"
:product="payProduct"
:config="{
appId: '你的华为AppID',
merchantId: '你的华为商户号',
publicKey: '华为支付公钥',
privateKey: '你的华为商户私钥',
env: 'sandbox',
domain: this.$config.h5Domain
}"
@payment-success="handleHuaweiPaySuccess"
@payment-error="handleHuaweiPayError"
/>
</view>
</view> </view>
</template> </template>
<!-- 新版支付组件 订单表为order表 的订单支付时使用该组件 -->
<script> <script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'; import uniPopup from '@/components/uni-popup/uni-popup.vue';
import nsSwitch from '@/components/ns-switch/ns-switch.vue'; import nsSwitch from '@/components/ns-switch/ns-switch.vue';
import WechatPay from '@/components/pay-components/wechat-pay.vue';
import AlipayPay from '@/components/pay-components/alipay-pay.vue';
import HuaweiPay from '@/components/pay-components/huawei-pay.vue';
// #ifdef H5 // #ifdef H5
import { Weixin } from 'common/js/wx-jssdk.js'; import { Weixin } from 'common/js/wx-jssdk.js';
// #endif // #endif
// ========== 引入三端支付工具类（核心：适配官方规范） ==========
import { getWechatPay } from '@/utils/wechat-pay.js'; import { getWechatPay } from '@/utils/wechat-pay.js';
import { getAlipayPay } from '@/utils/alipay-pay.js'; import { getAlipayPay } from '@/utils/alipay-pay.js';
import { getHuaweiPay } from '@/utils/huawei-pay.js'; import { getHuaweiPay } from '@/utils/huawei-pay.js';
@@ -63,10 +109,12 @@ export default {
name: 'payment', name: 'payment',
components: { components: {
uniPopup, uniPopup,
nsSwitch nsSwitch,
WechatPay,
AlipayPay,
HuaweiPay
}, },
props: { props: {
// 是否可用余额支付
balanceUsable: { balanceUsable: {
type: Boolean, type: Boolean,
default: true default: true
@@ -76,19 +124,16 @@ export default {
return { return {
payIndex: 0, payIndex: 0,
payTypeList: [ payTypeList: [
// 所有端都显示微信支付
{ {
name: '微信支付', name: '微信支付',
icon: 'icon-weixin1', icon: 'icon-weixin1',
type: 'wechatpay' type: 'wechatpay'
}, },
// 所有端都显示支付宝支付
{ {
name: '支付宝支付', name: '支付宝支付',
icon: 'icon-zhifubaozhifu-', icon: 'icon-zhifubaozhifu-',
type: 'alipay' type: 'alipay'
}, },
// 所有端都显示华为支付
{ {
name: '华为支付', name: '华为支付',
icon: 'icon-zhekou', icon: 'icon-zhekou',
@@ -105,25 +150,21 @@ export default {
// #endif // #endif
payInfo: null, payInfo: null,
balanceConfig: 0, balanceConfig: 0,
// 预售页面判断
sale: true, sale: true,
isBalance: 0, isBalance: 0,
balance: 0, balance: 0,
//重置是否已完成，没有完成不能调用api/pay/pay
resetPayComplete: true, resetPayComplete: true,
repeatFlag: false, repeatFlag: false,
// ========== 支付工具类实例 ==========
wechatPay: null, wechatPay: null,
alipayPay: null, alipayPay: null,
huaweiPay: null huaweiPay: null,
showWechatPay: false,
showAlipayPay: false,
showHuaweiPay: false,
payProduct: null,
isH5: false
}; };
}, },
created(e) {
this.getPayType();
if (this.balanceUsable) this.getBalanceConfig();
// ========== 初始化三端支付工具类（填写官方申请的参数） ==========
this.initPayUtils();
},
computed: { computed: {
balanceDeduct() { balanceDeduct() {
let money = 0; let money = 0;
@@ -143,46 +184,37 @@ export default {
return money; return money;
}, },
offlineShow() { offlineShow() {
// 获取当前页面栈实例数组
const pages = getCurrentPages(); const pages = getCurrentPages();
const currentPage = pages[pages.length - 1]; const currentPage = pages[pages.length - 1];
// 获取页面路由路径
let routePath = currentPage.route; let routePath = currentPage.route;
return this.$store.state.offlineWhiteList.length ? this.$store.state.offlineWhiteList.includes(routePath) : false return this.$store.state.offlineWhiteList.length ? this.$store.state.offlineWhiteList.includes(routePath) : false
} }
}, },
methods: { methods: {
// ========== 初始化支付工具类（核心：配置官方参数） ==========
initPayUtils() { initPayUtils() {
// 微信支付初始化（替换为你的微信官方参数）
this.wechatPay = getWechatPay({ this.wechatPay = getWechatPay({
appId: '你的微信小程序/AppID', // 微信开放平台/AppID appId: '你的微信小程序/AppID',
merchantId: '你的微信商户号', // 微信支付商户号 merchantId: '你的微信商户号',
apiKey: '你的微信API密钥', // 微信支付API密钥（商户平台获取） apiKey: '你的微信API密钥',
privateKey: '你的微信RSA私钥', // 商户私钥 privateKey: '你的微信RSA私钥',
publicKey: '微信支付公钥' // 微信支付公钥 publicKey: '微信支付公钥'
}); });
// 支付宝支付初始化（替换为你的支付宝官方参数）
this.alipayPay = getAlipayPay({ this.alipayPay = getAlipayPay({
appId: '你的支付宝AppID', // 支付宝开放平台/AppID appId: '你的支付宝AppID',
merchantId: '你的支付宝商户号', // 支付宝支付商户号 merchantId: '你的支付宝商户号',
privateKey: '你的支付宝RSA2私钥', // RSA2私钥 privateKey: '你的支付宝RSA2私钥',
alipayPublicKey: '支付宝公钥' // 支付宝公钥 alipayPublicKey: '支付宝公钥'
}); });
// 华为支付初始化（替换为你的华为官方参数）
this.huaweiPay = getHuaweiPay({ this.huaweiPay = getHuaweiPay({
appId: '你的华为AppID', // 华为开发者联盟AppID appId: '你的华为AppID',
merchantId: '你的华为商户号', // 华为支付商户号 merchantId: '你的华为商户号',
publicKey: '华为支付公钥', // 华为支付公钥 publicKey: '华为支付公钥',
privateKey: '你的华为商户私钥', // 华为商户私钥 privateKey: '你的华为商户私钥',
env: 'sandbox' // 测试环境：sandbox，生产环境：production env: 'sandbox'
}); });
}, },
/**
* 父级页面onShow调用
*/
pageShow() { pageShow() {
if (this.payInfo) { if (this.payInfo) {
let offlinepay = uni.getStorageSync('offlinepay'); let offlinepay = uni.getStorageSync('offlinepay');
@@ -197,8 +229,10 @@ export default {
close() { close() {
this.$emit('close'); this.$emit('close');
this.$refs.choosePaymentPopup.close(); this.$refs.choosePaymentPopup.close();
this.showWechatPay = false;
this.showAlipayPay = false;
this.showHuaweiPay = false;
}, },
// 使用余额
useBalance() { useBalance() {
this.isBalance = this.isBalance ? 0 : 1; this.isBalance = this.isBalance ? 0 : 1;
this.$emit('useBalance', this.isBalance) this.$emit('useBalance', this.isBalance)
@@ -247,9 +281,6 @@ export default {
} }
}); });
}, },
/**
* 获取余额配置
*/
getBalanceConfig() { getBalanceConfig() {
this.$api.sendRequest({ this.$api.sendRequest({
url: '/api/pay/getBalanceConfig', url: '/api/pay/getBalanceConfig',
@@ -259,9 +290,6 @@ export default {
} }
}); });
}, },
/**
* 获取用户余额
*/
getMemberBalance() { getMemberBalance() {
this.$api.sendRequest({ this.$api.sendRequest({
url: '/api/memberaccount/usablebalance', url: '/api/memberaccount/usablebalance',
@@ -272,9 +300,6 @@ export default {
} }
}) })
}, },
/**
* 查询支付方式
*/
getPayType() { getPayType() {
this.$api.sendRequest({ this.$api.sendRequest({
url: '/api/pay/type', url: '/api/pay/type',
@@ -291,6 +316,49 @@ export default {
} }
}); });
}, },
handleWechatPaySuccess(res) {
this.showWechatPay = false;
if (this.isH5) {
this.$refs.choosePaymentPopup.close();
}
this.paySuccess();
this.repeatFlag = false;
},
handleWechatPayError(res) {
this.showWechatPay = false;
this.$util.showToast({ title: res.error });
this.repeatFlag = false;
this.resetpay();
},
handleAlipayPaySuccess(res) {
this.showAlipayPay = false;
if (this.isH5) {
this.$refs.choosePaymentPopup.close();
}
this.paySuccess();
this.repeatFlag = false;
},
handleAlipayPayError(res) {
this.showAlipayPay = false;
this.$util.showToast({ title: res.error });
this.repeatFlag = false;
this.resetpay();
},
handleHuaweiPaySuccess(res) {
this.showHuaweiPay = false;
if (this.isH5) {
this.$refs.choosePaymentPopup.close();
}
this.paySuccess();
this.repeatFlag = false;
},
handleHuaweiPayError(res) {
this.showHuaweiPay = false;
this.$util.showToast({ title: res.error });
this.repeatFlag = false;
this.resetpay();
},
// ========== 核心修改：H5端pay方法（跳转独立支付页面） ==========
// #ifdef H5 // #ifdef H5
pay() { pay() {
var payType = this.payTypeList[this.payIndex]; var payType = this.payTypeList[this.payIndex];
@@ -300,146 +368,33 @@ export default {
} else { } else {
return_url = '/pages_tool/pay/result?code='; return_url = '/pages_tool/pay/result?code=';
} }
// 调用后端接口获取对应支付渠道的H5支付链接
this.$api.sendRequest({ this.$api.sendRequest({
url: '/api/pay/pay', url: '/api/pay/get-h5-pay-url', // 后端新增接口：返回支付链接
method: 'POST',
data: { data: {
out_trade_no: this.payInfo.out_trade_no, out_trade_no: this.payInfo.out_trade_no,
pay_type: payType ? payType.type : '', pay_type: payType.type,
amount: this.payMoney,
return_url: encodeURIComponent(this.$config.h5Domain + return_url + this.payInfo.out_trade_no), return_url: encodeURIComponent(this.$config.h5Domain + return_url + this.payInfo.out_trade_no),
is_balance: this.isBalance notify_url: this.$config.h5Domain + '/api/pay/notify/' + payType.type
}, },
success: async res => { // 新增async支持异步调用 success: (res) => {
uni.hideLoading(); uni.hideLoading();
if (res.code >= 0) { if (res.code === 0 && res.data.payUrl) {
if (res.data.pay_success) { // 关闭当前支付弹窗
this.paySuccess(); this.$refs.choosePaymentPopup.close();
return; // 跳转到支付渠道的独立支付页面
} window.location.href = res.data.payUrl;
switch (payType.type) {
// ========== 支付宝支付（H5端，符合官方RSA2规范） ==========
case 'alipay':
try {
this.repeatFlag = false;
const orderInfo = {
outTradeNo: this.payInfo.out_trade_no,
productName: '订单支付',
price: this.payMoney,
returnUrl: this.$config.h5Domain + return_url + this.payInfo.out_trade_no,
notifyUrl: this.$config.h5Domain + '/api/pay/alipay/notify'
};
// 创建支付宝订单（带RSA2签名）
const alipayRes = await this.alipayPay.h5Pay(orderInfo);
// 验证支付宝签名（官方规范）
const isAlipaySignValid = this.alipayPay.verifyResult(alipayRes, alipayRes.sign);
if (!isAlipaySignValid) {
this.$util.showToast({ title: '支付宝订单签名验证失败' });
return;
}
// 区分微信浏览器/普通浏览器
if (this.$util.isWeiXin()) {
var wx_alipay = encodeURIComponent(alipayRes.payUrl);
this.$util.redirectTo('/pages_tool/pay/wx_pay', {
wx_alipay: wx_alipay,
out_trade_no: this.payInfo.out_trade_no
}, '', 'redirectTo');
} else {
location.href = alipayRes.payUrl;
this.checkPayStatus();
}
} catch (error) {
this.$util.showToast({ title: '支付宝支付失败：' + error.message });
this.repeatFlag = false;
}
break;
// ========== 微信支付（H5端，符合官方JSSDK+签名规范） ==========
case 'wechatpay':
try {
this.repeatFlag = false;
const orderInfo = {
outTradeNo: this.payInfo.out_trade_no,
productName: '订单支付',
price: this.payMoney,
openid: this.$store.state.openid,
notifyUrl: this.$config.h5Domain + '/api/pay/wechat/notify',
returnUrl: this.$config.h5Domain + return_url + this.payInfo.out_trade_no,
url: uni.getSystemInfoSync().platform == 'ios' ? uni.getStorageSync('initUrl') : location.href
};
// 微信浏览器内（JSSDK支付）
if (this.$util.isWeiXin()) {
// 初始化JSSDK（官方规范）
await this.wechatPay.initJSSDK(orderInfo.url);
// 创建微信订单（带HMAC-SHA256签名）
const wxPayRes = await this.wechatPay.mpPay(orderInfo);
// 验证签名（官方规范）
const isWxSignValid = this.wechatPay.verifyResult(wxPayRes, wxPayRes.paySign);
if (!isWxSignValid) {
this.$util.showToast({ title: '微信订单签名验证失败' });
return;
}
// 唤起JSSDK支付
await this.wechatPay.h5Pay(wxPayRes);
this.paySuccess();
} else {
// 普通浏览器（H5支付链接）
const wxH5Res = await this.wechatPay.h5Pay(orderInfo);
console.log('普通浏览器微信支付链接：', wxH5Res.mweb_url);
location.href = wxH5Res.mweb_url;
this.checkPayStatus();
}
} catch (error) {
this.$util.showToast({ title: '微信支付失败：' + error.message });
this.resetpay();
this.repeatFlag = false;
}
break;
// ========== 华为支付（H5端，符合官方RSA签名规范） ==========
case 'huaweipay':
try {
this.repeatFlag = false;
const orderInfo = {
productId: 'PROD_' + this.payInfo.out_trade_no,
productName: '订单支付',
price: this.payMoney
};
// 创建华为订单（带RSA签名）
const huaweiRes = await this.huaweiPay.h5Pay(orderInfo);
// 验证签名（官方规范）
const isHuaweiSignValid = this.huaweiPay.verifySignature(JSON.stringify(huaweiRes), huaweiRes.sign);
if (!isHuaweiSignValid) {
this.$util.showToast({ title: '华为订单签名验证失败' });
return;
}
console.log('华为支付跳转链接：', huaweiRes.payUrl);
location.href = huaweiRes.payUrl;
this.checkPayStatus();
} catch (error) {
this.$util.showToast({ title: '华为支付失败：' + error.message });
this.repeatFlag = false;
}
break;
// ========== 线下支付（保留原有逻辑） ==========
case 'offlinepay':
this.$util.redirectTo('/pages_tool/pay/offlinepay', {
outTradeNo: this.payInfo.out_trade_no
});
this.repeatFlag = false;
break;
}
} else { } else {
this.$util.showToast({ this.$util.showToast({ title: res.message || '获取支付链接失败' });
title: res.message
});
this.repeatFlag = false;
} }
this.repeatFlag = false;
}, },
fail: res => { fail: (err) => {
uni.hideLoading(); uni.hideLoading();
this.$util.showToast({ this.$util.showToast({ title: '请求支付链接失败，请重试' });
title: 'request:fail'
});
this.repeatFlag = false; this.repeatFlag = false;
} }
}); });
@@ -465,9 +420,33 @@ export default {
}, 1000); }, 1000);
}, },
// #endif // #endif
// 小程序/华为快应用pay方法（完全保留原有逻辑）
// #ifdef MP // #ifdef MP
pay() { pay() {
var payType = this.payTypeList[this.payIndex]; var payType = this.payTypeList[this.payIndex];
if (payType.type === 'wechatpay' || payType.type === 'alipay' || payType.type === 'huaweipay') {
this.payProduct = {
id: this.payInfo.out_trade_no,
name: '订单支付',
price: this.payMoney * 100,
description: `订单号：${this.payInfo.out_trade_no}`,
image: ''
};
uni.hideLoading();
this.$refs.choosePaymentPopup.close();
if (payType.type === 'wechatpay') {
this.showWechatPay = true;
} else if (payType.type === 'alipay') {
this.showAlipayPay = true;
} else if (payType.type === 'huaweipay') {
this.showHuaweiPay = true;
}
this.repeatFlag = false;
return;
}
this.$api.sendRequest({ this.$api.sendRequest({
url: '/api/pay/pay', url: '/api/pay/pay',
data: { data: {
@@ -476,7 +455,7 @@ export default {
scene: uni.getStorageSync('is_test') ? 1175 : uni.getLaunchOptionsSync().scene, scene: uni.getStorageSync('is_test') ? 1175 : uni.getLaunchOptionsSync().scene,
is_balance: this.isBalance is_balance: this.isBalance
}, },
success: async res => { // 新增async支持异步调用 success: async res => {
uni.hideLoading(); uni.hideLoading();
if (res.code >= 0) { if (res.code >= 0) {
if (res.data.pay_success) { if (res.data.pay_success) {
@@ -492,7 +471,6 @@ export default {
} else { } else {
try { try {
this.repeatFlag = false; this.repeatFlag = false;
// ========== 华为支付（小程序端，跳转H5） ==========
if (payType.type == 'huaweipay') { if (payType.type == 'huaweipay') {
const orderInfo = { const orderInfo = {
productId: 'PROD_' + this.payInfo.out_trade_no, productId: 'PROD_' + this.payInfo.out_trade_no,
@@ -505,9 +483,7 @@ export default {
out_trade_no: this.payInfo.out_trade_no out_trade_no: this.payInfo.out_trade_no
}); });
} else { } else {
// ========== 微信/支付宝小程序支付（符合官方验签规范） ==========
var payData = res.data.data; var payData = res.data.data;
// 验证支付参数签名（官方规范）
let isSignValid = false; let isSignValid = false;
if (payType.type == 'wechatpay') { if (payType.type == 'wechatpay') {
isSignValid = this.wechatPay.verifyResult(payData, payData.paySign); isSignValid = this.wechatPay.verifyResult(payData, payData.paySign);
@@ -606,9 +582,6 @@ export default {
}); });
}, },
// #endif // #endif
/**
* 支付成功之后跳转
*/
paySuccess() { paySuccess() {
if (this.payInfo.event == 'BlindboxGoodsOrderPayNotify') { if (this.payInfo.event == 'BlindboxGoodsOrderPayNotify') {
this.$util.redirectTo('/pages_promotion/blindbox/index', { this.$util.redirectTo('/pages_promotion/blindbox/index', {
@@ -623,9 +596,6 @@ export default {
}, 'redirectTo'); }, 'redirectTo');
} }
}, },
/**
* 重置支付单据
*/
resetpay() { resetpay() {
this.resetPayComplete = false; this.resetPayComplete = false;
this.$api.sendRequest({ this.$api.sendRequest({
@@ -653,6 +623,18 @@ export default {
clearInterval(this.timer); clearInterval(this.timer);
}, },
// #endif // #endif
created(e) {
// #ifdef H5
this.isH5 = true;
// #endif
// #ifndef H5
this.isH5 = false;
// #endif
this.getPayType();
if (this.balanceUsable) this.getBalanceConfig();
this.initPayUtils();
},
}; };
</script> </script>

7
pages/order/public/js/orderMethod.js
View File

@@ -27,7 +27,12 @@ export default {
}, },
success: res => { success: res => {
if (res.code >= 0) { if (res.code >= 0) {
this.$refs.choosePaymentPopup.getPayInfo(res.data); // 修复核心问题：用this替代this2 + 调用子组件方法传参/打开弹窗
const paymentPopup = this.$refs.paymentPopup;
if (paymentPopup) {
paymentPopup.setOrderData(res.data);
paymentPopup.openPopup();
}
} else { } else {
this.$util.showToast({ this.$util.showToast({
title: res.message title: res.message

29
pages_tool/pay/wx_pay.vue
View File

@@ -8,7 +8,6 @@
</view> </view>
</template> </template>
<script> <script>
export default { export default {
name: 'wx_pay', name: 'wx_pay',
data() { data() {
@@ -21,10 +20,32 @@ export default {
onLoad(options) { onLoad(options) {
this.wx_alipay = options.wx_alipay || ''; this.wx_alipay = options.wx_alipay || '';
this.out_trade_no = options.out_trade_no || ''; this.out_trade_no = options.out_trade_no || '';
// ========== 核心修改：用条件编译隔离H5/小程序环境 ==========
// H5环境：保留原有跳转逻辑（不改动）
// #ifdef H5
if(!this.$util.isWeiXin() && this.wx_alipay){ if(!this.$util.isWeiXin() && this.wx_alipay){
this.show = false; this.show = false;
location.href = this.wx_alipay; location.href = this.wx_alipay;
} }
// #endif
// 小程序环境：禁用location，仅提示+清除定时器（避免报错）
// #ifdef MP
if(this.wx_alipay){
// 友好提示用户
this.$util.showToast({
title: '该支付方式需在浏览器打开',
icon: 'none',
duration: 3000
});
// 可选：返回上一页（支付选择页），取消下面注释即可
// setTimeout(() => {
// uni.navigateBack({ delta: 1 });
// }, 1500);
}
// #endif
this.checkPayStatus(); this.checkPayStatus();
}, },
methods: { methods: {
@@ -56,6 +77,10 @@ export default {
} else { } else {
clearInterval(timer); clearInterval(timer);
} }
},
// 新增：请求失败时清除定时器，避免内存泄漏
fail: () => {
clearInterval(timer);
} }
}); });
}, 1000); }, 1000);
@@ -91,4 +116,4 @@ export default {
} }
} }
} }
</style> </style>