From 9fcadd772543f190c5fc629cc056574d11bc07e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Mon, 10 Aug 2026 22:30:30 +0800
Subject: [PATCH] =?UTF-8?q?feat(checkout):=20=E4=BC=98=E5=8C=96=E5=BE=AE?=
=?UTF-8?q?=E4=BF=A1=E6=94=AF=E4=BB=98=E5=92=8C=E7=BA=BF=E4=B8=8B=E4=BB=98?=
=?UTF-8?q?=E6=AC=BE=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 将默认支付方式调整为微信支付（payType=1），增加支付方式选择项
- 微信支付成功后直接调用微信支付接口并处理支付结果反馈
- 支付取消或失败时显示对应提示信息
- 线下付款(payType=9)保留并显示相应提示，不触发在线支付
- 提交订单时根据支付方式显示不同的按钮文本 (‘提交并支付’ 或 ‘提交订单’)
- 针对微信支付配置缺失的错误，统一显示详细提示，便于定位问题
- 优化支付方式选中时的提示样式与说明，提升用户体验
---
.idea/workspace.xml | 19 +++++++-------
src/pages/shop/checkout.tsx | 50 +++++++++++++++++++++++++++++--------
2 files changed, 50 insertions(+), 19 deletions(-)
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 7ed3a85..418bcd0 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -119,14 +119,7 @@
-
-
-
- 1776019857647
-
-
-
- 1776019857647
+
@@ -512,7 +505,15 @@
1784803190504
-
+
+
+ 1784873966827
+
+
+
+ 1784873966827
+
+
diff --git a/src/pages/shop/checkout.tsx b/src/pages/shop/checkout.tsx
index cddae1e..18d1a54 100644
--- a/src/pages/shop/checkout.tsx
+++ b/src/pages/shop/checkout.tsx
@@ -128,11 +128,13 @@ const CheckoutPage: React.FC = () => {
const { isVip } = useVipStatus()
// 支付方式相关状态
- const [payType, setPayType] = useState(9) // 9: 线下付款（默认），8: 货到付款（已注释）
+ // 1: 微信支付（默认，提交订单后直接调起微信支付），9: 线下付款（微信转账，商家确认后发货）
+ const [payType, setPayType] = useState(1)
// 支付方式选项
const PAYMENT_OPTIONS = [
// { id: 8, name: '货到付款', desc: '送达时支付', icon: '货', bgColor: '#f0fdf4', iconBg: '#dbeafe', iconColor: '#2563eb', borderColor: '#22c55e' },
+ { id: 1, name: '微信支付', desc: '推荐使用微信支付', icon: '微', bgColor: '#f0fdf4', iconBg: '#dcfce7', iconColor: '#16a34a', borderColor: '#22c55e' },
{ id: 9, name: '线下付款', desc: '微信转账，商家确认后发货', icon: '线', bgColor: '#fffbeb', iconBg: '#fef3c7', iconColor: '#d97706', borderColor: '#f59e0b' },
]
@@ -298,18 +300,39 @@ const CheckoutPage: React.FC = () => {
await removeSelected()
}
- // 显示成功提示
- Taro.showToast({ title: '订单已提交', icon: 'success' })
+ // 微信支付(payType=1)：后端返回预支付参数后直接调起微信支付
+ if (payType === 1 && res) {
+ try {
+ await Taro.requestPayment({
+ timeStamp: res.timeStamp,
+ nonceStr: res.nonceStr,
+ package: res.package,
+ signType: res.signType,
+ paySign: res.paySign,
+ })
+ Taro.showToast({ title: '支付成功', icon: 'success' })
+ } catch (payErr: any) {
+ if (payErr?.errMsg?.includes('cancel')) {
+ Taro.showToast({ title: '已取消支付，可在订单中继续付款', icon: 'none' })
+ } else {
+ Taro.showToast({ title: payErr?.message || '支付失败', icon: 'none' })
+ }
+ }
+ } else {
+ // 线下付款(payType=9)等无需在线支付的场景
+ Taro.showToast({ title: '订单已提交', icon: 'success' })
+ }
+
setTimeout(() => {
Taro.navigateTo({ url: '/pages/order/list' })
}, 1500)
} catch (err: any) {
const message = err.message || '提交失败'
- // 线下付款(payType=9)下单时，后端如果仍尝试创建微信支付订单，
- // 会因支付配置缺失应用ID而报错。这里给出更明确的提示。
- if (payType === 9 && /应用ID|appid|appId|支付配置|微信支付订单|创建支付订单失败/.test(message)) {
- Taro.showToast({ title: '线下支付暂不可用：微信支付配置缺失', icon: 'none', duration: 3000 })
- console.error('[checkout] 线下付款下单失败，后端支付配置问题：', message)
+ // 微信支付(payType=1)或线下付款(payType=9)下单时，若后端微信支付配置缺失（应用ID/appid 缺失）
+ // 会导致创建支付订单失败。这里给出统一的明确提示。
+ if (/应用ID|appid|appId|支付配置|微信支付订单|创建支付订单失败|微信支付/.test(message)) {
+ Taro.showToast({ title: '微信支付暂不可用：支付配置缺失', icon: 'none', duration: 3000 })
+ console.error('[checkout] 下单失败，后端微信支付配置问题：', message)
} else {
Taro.showToast({ title: message, icon: 'none' })
}
@@ -496,7 +519,14 @@ const CheckoutPage: React.FC = () => {
)
})}
- {/* 线下付款选中时显示提示 */}
+ {/* 支付方式选中提示 */}
+ {payType === 1 && (
+
+
+ 提交订单后将直接调起微信支付，支付成功即完成下单。
+
+
+ )}
{payType === 9 && (
@@ -577,7 +607,7 @@ const CheckoutPage: React.FC = () => {
style={{ backgroundColor: submitting ? '#ccc' : '#0e932e' }}
onClick={submitting ? undefined : handleSubmit}
>
- {submitting ? '提交中...' : '提交订单'}
+ {submitting ? '提交中...' : (payType === 1 ? '提交并支付' : '提交订单')}