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

在订单页面中引入微信支付弹窗组件，并实现支付成功、支付失败及支付处理中的回调处理逻辑。支付成功后刷新订单列表，确保用户看到最新的订单状态。

@@ -156,6 +156,24 @@
         </div>
       </div>
     </van-dialog>
+
+    <!-- 支付弹窗 -->
+    <van-popup
+      v-model:show="showPaymentPopup"
+      position="bottom"
+      round
+      closeable
+      close-icon-position="top-right"
+      :style="{ height: '90%' }"
+    >
+      <WechatPayment
+        v-if="showPaymentPopup && currentOrder"
+        :order-id="currentOrder.id"
+        @success="handlePaymentSuccess"
+        @failed="handlePaymentFailed"
+        @processing="handlePaymentProcessing"
+      />
+    </van-popup>
   </AppLayout>
 </template>
 
@@ -164,6 +182,7 @@ import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router';
 import AppLayout from '@/components/layout/AppLayout.vue'
 import FrostedGlass from '@/components/ui/FrostedGlass.vue'
+import WechatPayment from '@/components/payment/WechatPayment.vue'
 import { useTitle } from '@vueuse/core';
 import { showConfirmDialog, showToast, Dialog } from 'vant';
 import { formatDate } from '@/utils/tools';
@@ -272,8 +291,35 @@ const onLoad = async () => {
 };
 
 // 支付订单
+// 支付相关状态
+const showPaymentPopup = ref(false)
+const currentOrder = ref(null)
+
+// 处理支付
 const handlePay = (order) => {
-  showToast('支付功能暂未开放');
+  currentOrder.value = order
+  showPaymentPopup.value = true
+}
+
+// 处理支付成功
+const handlePaymentSuccess = () => {
+  showPaymentPopup.value = false
+  showToast('支付成功')
+  // 刷新订单列表
+  page.value = 0
+  orders.value = []
+  finished.value = false
+  onLoad()
+}
+
+// 处理支付失败
+const handlePaymentFailed = (error) => {
+  showToast(error || '支付失败')
+}
+
+// 处理支付处理中
+const handlePaymentProcessing = () => {
+  showToast('支付处理中...')
 }
 
 // 查看订单详情