feat(pay-confirm): 为支付确认页添加环境适配的状态文本处理
新增小程序环境版本检测逻辑,区分生产与非生产环境。新增状态文本格式化函数,生产环境下展示更友好的用户提示。重构状态文本赋值流程统一使用格式化函数,补充缺失的Taro导入语句。
Showing
1 changed file
with
78 additions
and
9 deletions
| ... | @@ -33,7 +33,7 @@ | ... | @@ -33,7 +33,7 @@ |
| 33 | 33 | ||
| 34 | <script setup> | 34 | <script setup> |
| 35 | import { computed, ref, watch } from 'vue' | 35 | import { computed, ref, watch } from 'vue' |
| 36 | -import { useLoad } from '@tarojs/taro' | 36 | +import Taro, { useLoad } from '@tarojs/taro' |
| 37 | import { useWechatMiniPay } from '@/composables/useWechatMiniPay' | 37 | import { useWechatMiniPay } from '@/composables/useWechatMiniPay' |
| 38 | import { getVersionedImageAssetByName, preloadImageAssetVersion } from '@/utils/assetUrl' | 38 | import { getVersionedImageAssetByName, preloadImageAssetVersion } from '@/utils/assetUrl' |
| 39 | import { redirectAfterPaySuccess } from '@/utils/paySuccessRedirect' | 39 | import { redirectAfterPaySuccess } from '@/utils/paySuccessRedirect' |
| ... | @@ -42,6 +42,7 @@ const order_id = ref('') | ... | @@ -42,6 +42,7 @@ const order_id = ref('') |
| 42 | const amount = ref('') | 42 | const amount = ref('') |
| 43 | const status_text = ref('') | 43 | const status_text = ref('') |
| 44 | const navigating_after_pay_success = ref(false) | 44 | const navigating_after_pay_success = ref(false) |
| 45 | +const mini_program_env_version = ref('') | ||
| 45 | 46 | ||
| 46 | const { | 47 | const { |
| 47 | pay_loading, | 48 | pay_loading, |
| ... | @@ -65,9 +66,75 @@ const pay_button_style = computed(() => ({ | ... | @@ -65,9 +66,75 @@ const pay_button_style = computed(() => ({ |
| 65 | background: `url('${getVersionedImageAssetByName('btnn@2x.png')}') center / 100% 100% no-repeat`, | 66 | background: `url('${getVersionedImageAssetByName('btnn@2x.png')}') center / 100% 100% no-repeat`, |
| 66 | })) | 67 | })) |
| 67 | 68 | ||
| 69 | +const is_release_env = computed(() => mini_program_env_version.value === 'release') | ||
| 70 | + | ||
| 71 | +const getMiniProgramEnvVersion = () => { | ||
| 72 | + try { | ||
| 73 | + const account_info = Taro.getAccountInfoSync?.() | ||
| 74 | + return String(account_info?.miniProgram?.envVersion || account_info?.envVersion || '').trim().toLowerCase() | ||
| 75 | + } catch (error) { | ||
| 76 | + console.warn('获取小程序环境版本失败:', error) | ||
| 77 | + return '' | ||
| 78 | + } | ||
| 79 | +} | ||
| 80 | + | ||
| 81 | +const formatReleaseStatusText = (raw_text) => { | ||
| 82 | + const normalized_text = String(raw_text || '').trim() | ||
| 83 | + if (!normalized_text) return '' | ||
| 84 | + | ||
| 85 | + const lower_text = normalized_text.toLowerCase() | ||
| 86 | + | ||
| 87 | + if (normalized_text === '正在请求支付参数...') return normalized_text | ||
| 88 | + if (normalized_text === '已获取支付参数,准备拉起微信支付弹框...') return normalized_text | ||
| 89 | + if (normalized_text === '支付成功,正在跳转...') return normalized_text | ||
| 90 | + if (normalized_text.includes('支付成功')) return normalized_text | ||
| 91 | + | ||
| 92 | + if (lower_text.includes('cancel') || normalized_text.includes('取消支付')) { | ||
| 93 | + return '您已取消本次支付,如需继续,可重新点击支付。' | ||
| 94 | + } | ||
| 95 | + | ||
| 96 | + if ( | ||
| 97 | + normalized_text.includes('未授权') | ||
| 98 | + || normalized_text.includes('授权失败') | ||
| 99 | + || normalized_text.includes('静默授权失败') | ||
| 100 | + || normalized_text.includes('登录') | ||
| 101 | + ) { | ||
| 102 | + return '当前登录状态需要更新,请重新进入后再试。' | ||
| 103 | + } | ||
| 104 | + | ||
| 105 | + if (normalized_text.includes('缺少订单编号') || normalized_text.includes('订单 ID')) { | ||
| 106 | + return '支付信息不完整,请返回上一页后重新发起。' | ||
| 107 | + } | ||
| 108 | + | ||
| 109 | + if ( | ||
| 110 | + normalized_text.includes('获取支付参数失败') | ||
| 111 | + || normalized_text.includes('拉起支付失败') | ||
| 112 | + || normalized_text.includes('支付未完成') | ||
| 113 | + || normalized_text.includes('失败') | ||
| 114 | + || normalized_text.includes('错误') | ||
| 115 | + || normalized_text.includes('异常') | ||
| 116 | + ) { | ||
| 117 | + return '支付暂时没有完成,请稍后重试;如多次失败,请联系寺院工作人员协助处理。' | ||
| 118 | + } | ||
| 119 | + | ||
| 120 | + return '当前操作暂时没有完成,请稍后再试。' | ||
| 121 | +} | ||
| 122 | + | ||
| 123 | +const setStatusText = (raw_text) => { | ||
| 124 | + const normalized_text = String(raw_text || '').trim() | ||
| 125 | + if (!normalized_text) { | ||
| 126 | + status_text.value = '' | ||
| 127 | + return | ||
| 128 | + } | ||
| 129 | + | ||
| 130 | + status_text.value = is_release_env.value | ||
| 131 | + ? formatReleaseStatusText(normalized_text) | ||
| 132 | + : normalized_text | ||
| 133 | +} | ||
| 134 | + | ||
| 68 | watch(last_result_text, (value) => { | 135 | watch(last_result_text, (value) => { |
| 69 | if (!pay_loading.value) { | 136 | if (!pay_loading.value) { |
| 70 | - status_text.value = value | 137 | + setStatusText(value) |
| 71 | } | 138 | } |
| 72 | }) | 139 | }) |
| 73 | 140 | ||
| ... | @@ -77,24 +144,24 @@ const goUserWebviewAfterPaySuccess = async () => { | ... | @@ -77,24 +144,24 @@ const goUserWebviewAfterPaySuccess = async () => { |
| 77 | navigating_after_pay_success.value = true | 144 | navigating_after_pay_success.value = true |
| 78 | 145 | ||
| 79 | try { | 146 | try { |
| 80 | - status_text.value = '支付成功,正在跳转...' | 147 | + setStatusText('支付成功,正在跳转...') |
| 81 | 148 | ||
| 82 | const redirect_result = await redirectAfterPaySuccess() | 149 | const redirect_result = await redirectAfterPaySuccess() |
| 83 | if (redirect_result?.reason === 'missing-user-menu') { | 150 | if (redirect_result?.reason === 'missing-user-menu') { |
| 84 | - status_text.value = '支付成功,未找到“我的”菜单,正在返回首页...' | 151 | + setStatusText('支付成功,未找到“我的”菜单,正在返回首页...') |
| 85 | return | 152 | return |
| 86 | } | 153 | } |
| 87 | 154 | ||
| 88 | if (redirect_result?.reason === 'empty-user-link') { | 155 | if (redirect_result?.reason === 'empty-user-link') { |
| 89 | - status_text.value = '支付成功,但“我的”菜单地址为空,正在返回首页...' | 156 | + setStatusText('支付成功,但“我的”菜单地址为空,正在返回首页...') |
| 90 | return | 157 | return |
| 91 | } | 158 | } |
| 92 | 159 | ||
| 93 | if (redirect_result?.target === 'home') { | 160 | if (redirect_result?.target === 'home') { |
| 94 | - status_text.value = '支付成功,但菜单获取失败,正在返回首页...' | 161 | + setStatusText('支付成功,但菜单获取失败,正在返回首页...') |
| 95 | } | 162 | } |
| 96 | } catch (error) { | 163 | } catch (error) { |
| 97 | - status_text.value = '支付成功,但菜单获取失败,正在返回首页...' | 164 | + setStatusText('支付成功,但菜单获取失败,正在返回首页...') |
| 98 | } finally { | 165 | } finally { |
| 99 | navigating_after_pay_success.value = false | 166 | navigating_after_pay_success.value = false |
| 100 | } | 167 | } |
| ... | @@ -108,7 +175,7 @@ const handlePay = async () => { | ... | @@ -108,7 +175,7 @@ const handlePay = async () => { |
| 108 | const pay_res = await pay_by_order_id(order_id.value, { | 175 | const pay_res = await pay_by_order_id(order_id.value, { |
| 109 | auto_auth: true, | 176 | auto_auth: true, |
| 110 | on_status: (text) => { | 177 | on_status: (text) => { |
| 111 | - status_text.value = text | 178 | + setStatusText(text) |
| 112 | }, | 179 | }, |
| 113 | }) | 180 | }) |
| 114 | 181 | ||
| ... | @@ -118,6 +185,8 @@ const handlePay = async () => { | ... | @@ -118,6 +185,8 @@ const handlePay = async () => { |
| 118 | } | 185 | } |
| 119 | 186 | ||
| 120 | useLoad((options) => { | 187 | useLoad((options) => { |
| 188 | + mini_program_env_version.value = getMiniProgramEnvVersion() | ||
| 189 | + | ||
| 121 | preloadImageAssetVersion().catch((error) => { | 190 | preloadImageAssetVersion().catch((error) => { |
| 122 | console.error('支付确认页预加载图片版本配置失败:', error) | 191 | console.error('支付确认页预加载图片版本配置失败:', error) |
| 123 | }) | 192 | }) |
| ... | @@ -132,7 +201,7 @@ useLoad((options) => { | ... | @@ -132,7 +201,7 @@ useLoad((options) => { |
| 132 | amount.value = String(options?.amount || options?.money || '').trim() | 201 | amount.value = String(options?.amount || options?.money || '').trim() |
| 133 | 202 | ||
| 134 | if (!order_id.value) { | 203 | if (!order_id.value) { |
| 135 | - status_text.value = '缺少订单编号,暂时无法发起支付。' | 204 | + setStatusText('缺少订单编号,暂时无法发起支付。') |
| 136 | } | 205 | } |
| 137 | }) | 206 | }) |
| 138 | </script> | 207 | </script> | ... | ... |
-
Please register or login to post a comment