feat(支付): 添加微信支付弹窗及相关处理逻辑
在订单页面中引入微信支付弹窗组件,并实现支付成功、支付失败及支付处理中的回调处理逻辑。支付成功后刷新订单列表,确保用户看到最新的订单状态。
Showing
1 changed file
with
47 additions
and
1 deletions
| ... | @@ -156,6 +156,24 @@ | ... | @@ -156,6 +156,24 @@ |
| 156 | </div> | 156 | </div> |
| 157 | </div> | 157 | </div> |
| 158 | </van-dialog> | 158 | </van-dialog> |
| 159 | + | ||
| 160 | + <!-- 支付弹窗 --> | ||
| 161 | + <van-popup | ||
| 162 | + v-model:show="showPaymentPopup" | ||
| 163 | + position="bottom" | ||
| 164 | + round | ||
| 165 | + closeable | ||
| 166 | + close-icon-position="top-right" | ||
| 167 | + :style="{ height: '90%' }" | ||
| 168 | + > | ||
| 169 | + <WechatPayment | ||
| 170 | + v-if="showPaymentPopup && currentOrder" | ||
| 171 | + :order-id="currentOrder.id" | ||
| 172 | + @success="handlePaymentSuccess" | ||
| 173 | + @failed="handlePaymentFailed" | ||
| 174 | + @processing="handlePaymentProcessing" | ||
| 175 | + /> | ||
| 176 | + </van-popup> | ||
| 159 | </AppLayout> | 177 | </AppLayout> |
| 160 | </template> | 178 | </template> |
| 161 | 179 | ||
| ... | @@ -164,6 +182,7 @@ import { ref } from 'vue' | ... | @@ -164,6 +182,7 @@ import { ref } from 'vue' |
| 164 | import { useRoute, useRouter } from 'vue-router'; | 182 | import { useRoute, useRouter } from 'vue-router'; |
| 165 | import AppLayout from '@/components/layout/AppLayout.vue' | 183 | import AppLayout from '@/components/layout/AppLayout.vue' |
| 166 | import FrostedGlass from '@/components/ui/FrostedGlass.vue' | 184 | import FrostedGlass from '@/components/ui/FrostedGlass.vue' |
| 185 | +import WechatPayment from '@/components/payment/WechatPayment.vue' | ||
| 167 | import { useTitle } from '@vueuse/core'; | 186 | import { useTitle } from '@vueuse/core'; |
| 168 | import { showConfirmDialog, showToast, Dialog } from 'vant'; | 187 | import { showConfirmDialog, showToast, Dialog } from 'vant'; |
| 169 | import { formatDate } from '@/utils/tools'; | 188 | import { formatDate } from '@/utils/tools'; |
| ... | @@ -272,8 +291,35 @@ const onLoad = async () => { | ... | @@ -272,8 +291,35 @@ const onLoad = async () => { |
| 272 | }; | 291 | }; |
| 273 | 292 | ||
| 274 | // 支付订单 | 293 | // 支付订单 |
| 294 | +// 支付相关状态 | ||
| 295 | +const showPaymentPopup = ref(false) | ||
| 296 | +const currentOrder = ref(null) | ||
| 297 | + | ||
| 298 | +// 处理支付 | ||
| 275 | const handlePay = (order) => { | 299 | const handlePay = (order) => { |
| 276 | - showToast('支付功能暂未开放'); | 300 | + currentOrder.value = order |
| 301 | + showPaymentPopup.value = true | ||
| 302 | +} | ||
| 303 | + | ||
| 304 | +// 处理支付成功 | ||
| 305 | +const handlePaymentSuccess = () => { | ||
| 306 | + showPaymentPopup.value = false | ||
| 307 | + showToast('支付成功') | ||
| 308 | + // 刷新订单列表 | ||
| 309 | + page.value = 0 | ||
| 310 | + orders.value = [] | ||
| 311 | + finished.value = false | ||
| 312 | + onLoad() | ||
| 313 | +} | ||
| 314 | + | ||
| 315 | +// 处理支付失败 | ||
| 316 | +const handlePaymentFailed = (error) => { | ||
| 317 | + showToast(error || '支付失败') | ||
| 318 | +} | ||
| 319 | + | ||
| 320 | +// 处理支付处理中 | ||
| 321 | +const handlePaymentProcessing = () => { | ||
| 322 | + showToast('支付处理中...') | ||
| 277 | } | 323 | } |
| 278 | 324 | ||
| 279 | // 查看订单详情 | 325 | // 查看订单详情 | ... | ... |
-
Please register or login to post a comment