refactor(CheckoutPage): 将微信支付组件移至弹窗中并调整支付失败处理

将微信支付组件从页面主体移至弹窗中，提升用户体验。调整支付失败处理逻辑，不再自动关闭支付弹窗，以便用户重新尝试支付。

@@ -16,32 +16,8 @@
       </FrostedGlass>
       </FrostedGlass>
     </div>
     </div>
 
 
-    <WechatPayment
-      v-else-if="showPayment"
-      :order-id="orderId"
-      @success="handlePaymentSuccess"
-      @failed="handlePaymentFailed"
-      @processing="handlePaymentProcessing"
-    >
-      <template #success-action>
-        <button
-          @click="handleBackToHome"
-          class="w-full bg-gradient-to-r from-green-500 to-green-600 text-white py-3 rounded-xl font-medium"
-        >
-          返回首页
-        </button>
-      </template>
-      <template #failed-action>
-        <button
-          @click="handleBackToHome"
-          class="w-full bg-gray-100 text-gray-700 py-3 sm:py-3.5 rounded-xl font-medium text-base sm:text-lg hover:bg-gray-200 transition-colors"
-        >
-          返回首页
-        </button>
-      </template>
-    </WechatPayment>
 
 
-    <div v-else class="pb-20">
+    <div v-else-if="!orderComplete" class="pb-20">
       <!-- Order Summary -->
       <!-- Order Summary -->
       <div class="p-4 bg-gradient-to-r from-green-500/10 to-blue-500/10">
       <div class="p-4 bg-gradient-to-r from-green-500/10 to-blue-500/10">
         <FrostedGlass class="rounded-xl p-4">
         <FrostedGlass class="rounded-xl p-4">
@@ -270,6 +246,44 @@
       }"
       }"
       @cancel="itemToDelete = null"
       @cancel="itemToDelete = null"
     />
     />
+
+
+    <!-- 支付弹窗 -->
+    <van-popup
+      v-model:show="showPayment"
+      position="bottom"
+      round
+      closeable
+      close-icon-position="top-right"
+      :style="{ height: '90%' }"
+    >
+      <div class="bg-gradient-to-r from-green-500/10 to-blue-500/10 h-full">
+        <WechatPayment
+          v-if="showPayment && orderId"
+          :order-id="orderId"
+          @success="handlePaymentSuccess"
+          @failed="handlePaymentFailed"
+          @processing="handlePaymentProcessing"
+        >
+          <template #success-action>
+            <button
+              @click="handleBackToHome"
+              class="w-full bg-gradient-to-r from-green-500 to-green-600 text-white py-3 rounded-xl font-medium"
+            >
+              返回首页
+            </button>
+          </template>
+          <template #failed-action>
+            <button
+              @click="handleBackToHome"
+              class="w-full bg-gray-100 text-gray-700 py-3 sm:py-3.5 rounded-xl font-medium text-base sm:text-lg hover:bg-gray-200 transition-colors"
+            >
+              返回首页
+            </button>
+          </template>
+        </WechatPayment>
+      </div>
+    </van-popup>
   </AppLayout>
   </AppLayout>
 </template>
 </template>
 
 
@@ -367,7 +381,7 @@ const handlePaymentSuccess = () => {
 // 处理支付失败
 // 处理支付失败
 const handlePaymentFailed = (error) => {
 const handlePaymentFailed = (error) => {
   console.error('支付失败:', error)
   console.error('支付失败:', error)
-  showPayment.value = false
+  // showPayment.value = false
 }
 }
 
 
 // 处理支付处理中
 // 处理支付处理中