feat(checkout): 优化微信支付和线下付款流程
- 将默认支付方式调整为微信支付(payType=1),增加支付方式选择项 - 微信支付成功后直接调用微信支付接口并处理支付结果反馈 - 支付取消或失败时显示对应提示信息 - 线下付款(payType=9)保留并显示相应提示,不触发在线支付 - 提交订单时根据支付方式显示不同的按钮文本 (‘提交并支付’ 或 ‘提交订单’) - 针对微信支付配置缺失的错误,统一显示详细提示,便于定位问题 - 优化支付方式选中时的提示样式与说明,提升用户体验
This commit is contained in:
+40
-10
@@ -128,11 +128,13 @@ const CheckoutPage: React.FC = () => {
|
||||
const { isVip } = useVipStatus()
|
||||
|
||||
// 支付方式相关状态
|
||||
const [payType, setPayType] = useState<number>(9) // 9: 线下付款(默认),8: 货到付款(已注释)
|
||||
// 1: 微信支付(默认,提交订单后直接调起微信支付),9: 线下付款(微信转账,商家确认后发货)
|
||||
const [payType, setPayType] = useState<number>(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 && (
|
||||
<View className='mt-2 p-2 rounded-lg' style={{ backgroundColor: '#dcfce7' }}>
|
||||
<Text className='text-xs text-green-600'>
|
||||
提交订单后将直接调起微信支付,支付成功即完成下单。
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
{payType === 9 && (
|
||||
<View className='mt-2 p-2 rounded-lg' style={{ backgroundColor: '#fef3c7' }}>
|
||||
<Text className='text-xs text-orange-600'>
|
||||
@@ -577,7 +607,7 @@ const CheckoutPage: React.FC = () => {
|
||||
style={{ backgroundColor: submitting ? '#ccc' : '#0e932e' }}
|
||||
onClick={submitting ? undefined : handleSubmit}
|
||||
>
|
||||
<Text>{submitting ? '提交中...' : '提交订单'}</Text>
|
||||
<Text>{submitting ? '提交中...' : (payType === 1 ? '提交并支付' : '提交订单')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
Reference in New Issue
Block a user