feat: 支付宝测试对接

src/service/api/payment.ts

@@ -0,0 +1,10 @@
+import { request, rawRequest } from '../request';
+
+/** Submit order with different types */
+export function aliPayPcPay(params: {orderId: number}) {
+    return rawRequest({
+      url: '/payment/aliPay/pcPay',
+      method: 'post',
+      params
+    });
+  }

src/service/request/index.ts

@@ -1,4 +1,4 @@
-import { BACKEND_ERROR_CODE, createFlatRequest } from '@sa/axios';
+import { BACKEND_ERROR_CODE, createFlatRequest, createRequest } from '@sa/axios';
 import { useAuthStore } from '@/store/modules/auth';
 import { localStg } from '@/utils/storage';
 import { getServiceBaseURL } from '@/utils/service';
@@ -134,3 +134,48 @@ export const request = createFlatRequest<App.Service.Response, InstanceState>(
     }
   }
 );
+
+export const rawRequest = createRequest(
+  {
+    baseURL,
+  },
+  {
+    async onRequest(config) {
+      const { headers } = config;
+
+      // set token
+      const token = localStg.get('token');
+      const Authorization = token ? `Bearer ${token}` : null;
+
+      // set language
+      const ContentLanguage = localStg.get('lang') || 'zh-CN';
+      Object.assign(headers, { Authorization, "Content-Language": ContentLanguage });
+
+      return config;
+    },
+    isBackendSuccess(response) {
+      // when the backend response code is "200", it means the request is success
+      // you can change this logic by yourself
+      return response.data.status === '200';
+    },
+    async onBackendFail(_response) {
+      // when the backend response code is not "200", it means the request is fail
+      // for example: the token is expired, refresh token and retry request
+    },
+    transformBackendResponse(response) {
+      return response.data;
+    },
+    onError(error) {
+      // when the request is fail, you can show error message
+
+      let message = error.message;
+
+      // show backend error message
+      if (error.code === BACKEND_ERROR_CODE) {
+        message = error.response?.data?.message || message;
+      }
+
+      window.$message?.error(message);
+    }
+  }
+);

src/views/recharge/balancerecharge/index.vue

@@ -3,6 +3,7 @@ import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useBillingStore } from '@/store/modules/billing/billing';
 import { useI18n } from 'vue-i18n';
 import { submitOrder } from '@/service/api/auth';
+import { aliPayPcPay } from '@/service/api/payment';
 import { message } from 'ant-design-vue';
 import type { Ref } from 'vue';
 defineOptions({
@@ -102,6 +103,25 @@ const handleRecharge = async () => {
     console.error('Failed to submit recharge order:', error);
   }
 };
+// 测试：支付宝支付
+const handleAliPay = async () => {
+  try {
+    const orderRes = await submitOrder({
+      type: 1,
+      orderAmount: paymentAmount.value
+    });
+    const res = await aliPayPcPay({orderId: orderRes.data});
+    console.log(res);
+    const div = document.createElement("div");
+    div.innerHTML = res; // html code
+    document.body.appendChild(div);
+    document.forms['punchout_form'].submit();
+
+  } catch (error) {
+    message.error('充值失败，请重试！');
+    console.error('Failed to submit recharge order:', error);
+  }
+};
 </script>
 
 <template>
@@ -158,6 +178,16 @@ const handleRecharge = async () => {
       >
         ¥{{ paymentAmount.toFixed(2) }} {{ t('page.carddata.pay') }}
       </AButton>
+      <!-- 测试：支付宝支付 -->
+      <AButton
+        type="primary"
+        size="large"
+        block
+        :disabled="!paymentAmount || paymentAmount <= 0"
+        @click="handleAliPay"
+      >
+        AliPay
+      </AButton>
     </div>
   </div>
 </template>