feat:增加余额支付功能

src/components/order-confirm/orderConfirmModal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { defineProps, defineEmits } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { AlipayOutlined, WechatOutlined } from '@ant-design/icons-vue';
+import { AlipayOutlined, WechatOutlined, WalletOutlined } from '@ant-design/icons-vue';
 
 const { t } = useI18n();
 
@@ -12,6 +12,9 @@ interface Props {
     orderType: number; // 0: 购买套餐, 1: 余额充值
     orderAmount: number;
   };
+  enableBalancePay?: boolean;
+  userBalance?: number;
+  loading?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -22,11 +25,14 @@ const orderTypeMap = {
   1: t('page.order.balanceRecharge')
 } as const;
 
-const handleConfirm = (paymentMethod: 'alipay' | 'wxpay') => {
+const handleConfirm = (paymentMethod: 'alipay' | 'wxpay' | 'balance') => {
   emit('confirm', paymentMethod);
 };
 
 const handleCancel = () => {
+  if (props.loading) {
+    return;
+  }
   emit('update:visible', false);
   emit('cancel');
 };
@@ -40,35 +46,63 @@ const handleCancel = () => {
     @cancel="handleCancel"
     width="460px"
     :maskClosable="false"
+    :closable="!loading"
   >
-    <div class="order-info">
+    <a-spin :spinning="loading" tip="Processing payment...">
-      <div class="info-item">
+      <div class="order-info">
-        <span class="label">{{ t('page.order.orderType') }}：</span>
+        <div class="info-item">
-        <span class="value">{{ orderTypeMap[orderInfo.orderType] }}</span>
+          <span class="label">{{ t('page.order.orderType') }}：</span>
+          <span class="value">{{ orderTypeMap[orderInfo.orderType] }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">{{ t('page.order.orderAmount') }}：</span>
+          <span class="value highlight">¥{{ orderInfo.orderAmount.toFixed(2) }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">{{ t('page.order.orderId') }}：</span>
+          <span class="value">{{ orderInfo.orderId }}</span>
+        </div>
       </div>
-      <div class="info-item">
-        <span class="label">{{ t('page.order.orderAmount') }}：</span>
-        <span class="value highlight">¥{{ orderInfo.orderAmount.toFixed(2) }}</span>
-      </div>
-      <div class="info-item">
-        <span class="label">{{ t('page.order.orderId') }}：</span>
-        <span class="value">{{ orderInfo.orderId }}</span>
-      </div>
-    </div>
 
-    <div class="payment-methods">
+      <div class="payment-methods">
-      <h4>{{ t('page.order.selectPayment') }}</h4>
+        <h4>{{ t('page.order.selectPayment') }}</h4>
-      <div class="methods-container">
+        <div class="methods-container">
-        <div class="method-item" @click="handleConfirm('alipay')">
+          <div
-          <AlipayOutlined class="payment-icon alipay-icon" />
+            v-if="orderInfo.orderType === 0"
-          <span>{{ t('page.order.alipay') }}</span>
+            class="method-item"
-        </div>
+            :class="{
-        <div class="method-item" @click="handleConfirm('wxpay')">
+              disabled: !enableBalancePay || loading,
-          <WechatOutlined class="payment-icon wxpay-icon" />
+            }"
-          <span>{{ t('page.order.wxpay') }}</span>
+            @click="(!loading && enableBalancePay) && handleConfirm('balance')"
+          >
+            <div class="debug-info" style="display: none;">
+              Enable balance pay: {{ enableBalancePay }}
+            </div>
+            <WalletOutlined class="payment-icon balance-icon" />
+            <span>{{ t('page.order.balancePay') }}</span>
+            <div class="balance-info" v-if="userBalance !== undefined">
+              {{ t('page.order.availableBalance') }}: ¥{{ userBalance.toFixed(2) }}
+            </div>
+          </div>
+          <div
+            class="method-item"
+            :class="{ disabled: loading }"
+            @click="!loading && handleConfirm('alipay')"
+          >
+            <AlipayOutlined class="payment-icon alipay-icon" />
+            <span>{{ t('page.order.alipay') }}</span>
+          </div>
+          <div
+            class="method-item"
+            :class="{ disabled: loading }"
+            @click="!loading && handleConfirm('wxpay')"
+          >
+            <WechatOutlined class="payment-icon wxpay-icon" />
+            <span>{{ t('page.order.wxpay') }}</span>
+          </div>
         </div>
       </div>
-    </div>
+    </a-spin>
   </a-modal>
 </template>
 
@@ -152,4 +186,41 @@ const handleCancel = () => {
 .wxpay-icon {
   color: #07c160;
 }
+
+.method-item.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: #f5f5f5;
+}
+
+.balance-icon {
+  color: #52c41a;
+}
+
+.balance-info {
+  font-size: 12px;
+  color: #666;
+  margin-top: 4px;
+}
+
+:deep(.ant-spin-container) {
+  position: relative;
+}
+
+:deep(.ant-spin) {
+  max-height: none;
+}
+
+:deep(.ant-spin-spinning) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  background: rgba(255, 255, 255, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>

src/locales/langs/en-us.ts

@@ -707,7 +707,11 @@ const local: any = {
       orderId:'ID',
       selectPayment:'Payment',
       alipay:'Alipay',
-      wxpay:'WeChat Pay'
+      wxpay:'WeChat Pay',
+      balancePay:'Balance Pay',
+      availableBalance:'Balance',
+      paymentSuccess:'Payment  successful',
+      paymentFailed:'Payment failed',
     },
     kyc:{
       drive:'Driving license',

src/locales/langs/zh-cn.ts

@@ -708,7 +708,11 @@ const local:any = {
       orderId:'订单ID',
       selectPayment:'支付方式',
       alipay:'支付宝支付',
-      wxpay:'微信支付'
+      wxpay:'微信支付',
+      balancePay:'余额支付',
+      availableBalance:'可用余额',
+      paymentSuccess:'支付成功',
+      paymentFailed:'支付失败',
     },
      kyc:{
        drive:'驾驶证',

src/service/api/payment.ts

@@ -25,4 +25,15 @@ export function wxPayScanCode(params: {orderId: number}) {
     method: 'post',
     params
   });
-}
+}
+
+/** Balance pay with orderId */
+export function payBalance(params: { orderId: string }) {
+  return request({
+    url: `/u/order/payBalance/${params.orderId}`,
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  });
+}

src/typings/auto-imports.d.ts

@@ -179,6 +179,7 @@ declare global {
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
+  const payBalance: typeof import('../service/api/payment')['payBalance']
   const pick: typeof import('lodash-es')['pick']
   const provide: typeof import('vue')['provide']
   const provideLocal: typeof import('@vueuse/core')['provideLocal']

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 with error:', error);
-    console.error('Payment failed:', 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>