hookehuyr

feat(支付): 添加微信支付弹窗及相关处理逻辑

在订单页面中引入微信支付弹窗组件,并实现支付成功、支付失败及支付处理中的回调处理逻辑。支付成功后刷新订单列表,确保用户看到最新的订单状态。
...@@ -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 // 查看订单详情
......