feat:增加余额支付功能

src/views/recharge/package/index.vue

@@ -4,15 +4,16 @@ import { ref, onMounted, computed } from 'vue';
 import { fetchPackageList, submitOrder } from '@/service/api/auth';
 import { message } from 'ant-design-vue';
 import OrderConfirmModal from '@/components/order-confirm/orderConfirmModal.vue';
-import { aliPayPcPay,aliPayWapPay, wxPayScanCode } from '@/service/api/payment';
+import { aliPayPcPay,aliPayWapPay, wxPayScanCode, payBalance } from '@/service/api/payment';
 import { useRouterPush } from '@/hooks/common/router';
 import { useAppStore } from '@/store/modules/app';
+import { useAuthStore} from '@/store/modules/auth';
 
 defineOptions({
   name: 'PackageSubscription'
 });
 const { t } = useI18n();
-
+const authStore = useAuthStore();
 interface RateLimit {
   upLimitEnable: boolean;
   downLimitEnable: boolean;
@@ -133,9 +134,13 @@ const { routerPushByKey } = useRouterPush();
 
 // 添加订单确认弹窗相关状态
 const showOrderModal = ref(false);
-const currentOrderInfo = ref({
+const currentOrderInfo = ref<{
+  orderId: string;
+  orderType: number;
+  orderAmount: number;
+}>({
   orderId: '',
-  orderType: 0, // 0 表示购买套餐
+  orderType: 0,
   orderAmount: 0
 });
 
@@ -146,6 +151,21 @@ const appStore = useAppStore();
 const isLoading = ref(false);
 const hasPackages = computed(() => packageOptions.value.length > 0);
 
+// 添加用户余额状态
+const userBalance = ref(0);
+
+// 添加检查余额是否足够的计算属性
+const canUseBalancePay = computed(() => {
+  // 添加日志来调试
+  console.log('Current balance:', userBalance.value);
+  console.log('Package price:', selectedPackage.value?.price);
+  console.log('Can use balance pay:', userBalance.value >= (selectedPackage.value?.price || 0));
+  return userBalance.value >= (selectedPackage.value?.price || 0);
+});
+
+// 添加 loading 状态
+const paymentLoading = ref(false);
+
 const fetchPackages = async () => {
   isLoading.value = true;
   try {
@@ -191,9 +211,11 @@ const fetchPackages = async () => {
 
 const selectPackage = (option: PackageOption) => {
   selectedPackage.value = option;
+  console.log('Selected package price:', option.price);
+  console.log('Can use balance pay after selection:', canUseBalancePay.value);
 };
 
-// 修改套餐办理方法
+// 修改套餐办理方法，添加日志跟踪订单ID
 const handleSubmitOrder = async () => {
   try {
     const orderRes = await submitOrder({
@@ -201,12 +223,22 @@ const handleSubmitOrder = async () => {
       packageId: selectedPackage.value.id
     });
 
+    // 添加日志
+    console.log('Created order ID:', orderRes.data);
+
+    // 重新获取最新余额
+    await fetchUserBalance();
+
     // 更新订单信息并显示弹窗
     currentOrderInfo.value = {
-      orderId: orderRes.data,
+      orderId: String(orderRes.data), // 确保转换为字符串
       orderType: 0,
       orderAmount: selectedPackage.value.price
     };
+
+    // 添加日志
+    console.log('Current order info after creation:', currentOrderInfo.value);
+
     showOrderModal.value = true;
   } catch (error) {
     message.error(t('page.order.createOrderFailed'));
@@ -215,9 +247,40 @@ const handleSubmitOrder = async () => {
 };
 
 // 修改支付处理方法
-const handlePaymentConfirm = async (paymentMethod: 'alipay' | 'wxpay') => {
+const handlePaymentConfirm = async (paymentMethod: 'alipay' | 'wxpay' | 'balance') => {
   try {
-    if (paymentMethod === 'alipay') {
+    console.log('Payment confirmation for order:', currentOrderInfo.value);
+
+    if (!currentOrderInfo.value.orderId) {
+      throw new Error('Order ID is missing');
+    }
+
+    if (paymentMethod === 'balance') {
+      // 设置 loading 状态
+      paymentLoading.value = true;
+
+      console.log('Attempting balance payment for order:', currentOrderInfo.value.orderId);
+
+      const result = await payBalance({
+        orderId: currentOrderInfo.value.orderId
+      });
+
+      console.log('Balance payment response:', result);
+
+      if (result.error) {
+        throw new Error(result.error.message || 'Payment failed');
+      }
+
+      message.success(t('page.order.paymentSuccess'));
+
+      // 延迟一下再关闭弹窗和刷新页面
+      setTimeout(() => {
+        showOrderModal.value = false;
+        window.location.reload();
+      }, 1000);
+
+      return;
+    } else if (paymentMethod === 'alipay') {
       // 区分手机端和pc端支付
       let res;
       if (appStore.isMobile) {
@@ -241,15 +304,30 @@ const handlePaymentConfirm = async (paymentMethod: 'alipay' | 'wxpay') => {
       });
     }
   } catch (error) {
-    message.error(t('page.order.paymentFailed'));
-    console.error('Payment failed:', error);
+    console.error('Payment failed with error:', error);
+    message.error(error instanceof Error ? error.message : t('page.order.paymentFailed'));
   } finally {
-    showOrderModal.value = false;
+    // 清除 loading 状态
+    paymentLoading.value = false;
+  }
+};
+
+// 修改获取用户余额的方法，添加日志
+const fetchUserBalance = async () => {
+  try {
+    const response = await authStore.getDashboardData();
+    if (response && !response.error) {
+      userBalance.value = Number(response.balance) || 0;
+      console.log('Fetched balance:', userBalance.value);
+    }
+  } catch (error) {
+    console.error('Failed to fetch user balance:', error);
   }
 };
 
 onMounted(async () => {
   await fetchPackages();
+  await fetchUserBalance();
 });
 </script>
 
@@ -354,6 +432,9 @@ onMounted(async () => {
     <OrderConfirmModal
       v-model:visible="showOrderModal"
       :order-info="currentOrderInfo"
+      :enable-balance-pay="canUseBalancePay"
+      :user-balance="userBalance"
+      :loading="paymentLoading"
       @confirm="handlePaymentConfirm"
     />
   </div>