feat:增加余额支付功能

2025-02-13 20:35:43 +08:00
parent 29f58edef6
commit 93579c7dde
6 changed files with 212 additions and 40 deletions
--- a/src/components/order-confirm/orderConfirmModal.vue
+++ b/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">
-      <div class="info-item">
-        <span class="label">{{ t('page.order.orderType') }}：</span>
-        <span class="value">{{ orderTypeMap[orderInfo.orderType] }}</span>
+    <a-spin :spinning="loading" tip="Processing payment...">
+      <div class="order-info">
+        <div class="info-item">
+          <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">
-      <h4>{{ t('page.order.selectPayment') }}</h4>
-      <div class="methods-container">
-        <div class="method-item" @click="handleConfirm('alipay')">
-          <AlipayOutlined class="payment-icon alipay-icon" />
-          <span>{{ t('page.order.alipay') }}</span>
-        </div>
-        <div class="method-item" @click="handleConfirm('wxpay')">
-          <WechatOutlined class="payment-icon wxpay-icon" />
-          <span>{{ t('page.order.wxpay') }}</span>
+      <div class="payment-methods">
+        <h4>{{ t('page.order.selectPayment') }}</h4>
+        <div class="methods-container">
+          <div
+            v-if="orderInfo.orderType === 0"
+            class="method-item"
+            :class="{
+              disabled: !enableBalancePay || loading,
+            }"
+            @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>
--- a/src/locales/langs/en-us.ts
+++ b/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',
--- a/src/locales/langs/zh-cn.ts
+++ b/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:'驾驶证',
--- a/src/service/api/payment.ts
+++ b/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'
+    }
+  });
+}
--- a/src/typings/auto-imports.d.ts
+++ b/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']
--- a/src/views/recharge/package/index.vue
+++ b/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>