feat: 微信支付
This commit is contained in:
@@ -56,6 +56,11 @@ function createCommonRequest<ResponseData = any>(
|
||||
}
|
||||
}
|
||||
|
||||
// 支付宝支付接口放行
|
||||
if (response.config.url?.includes('/payment/aliPay/pcPay')) {
|
||||
return Promise.resolve(response);
|
||||
}
|
||||
|
||||
if (opts.isBackendSuccess(response)) {
|
||||
return Promise.resolve(response);
|
||||
}
|
||||
|
||||
@@ -414,6 +414,17 @@ export const customRoutes: GeneratedRoute[] = [
|
||||
icon: 'material-symbols:filter-list-off',
|
||||
order: 4
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'billing_wxpay',
|
||||
path: '/billing/wxpay',
|
||||
component: 'view.billing_wxpay',
|
||||
meta: {
|
||||
title: '微信支付',
|
||||
icon: 'material-symbols:filter-list-off',
|
||||
hideInMenu: true,
|
||||
order: 10,
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
12
src/service/api/order.ts
Normal file
12
src/service/api/order.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { request } from '../request';
|
||||
|
||||
/**
|
||||
* 获取订单详情
|
||||
*
|
||||
* @param deptId 订单id
|
||||
*/
|
||||
export function doGetOrderInfo(orderId: number) {
|
||||
return request<Api.Order.BaseOrderParams>({
|
||||
url: `/u/order/${orderId}`
|
||||
});
|
||||
}
|
||||
@@ -1,10 +1,19 @@
|
||||
import { request, rawRequest } from '../request';
|
||||
|
||||
/** Submit order with different types */
|
||||
/** AliPay pcPay with orderId */
|
||||
export function aliPayPcPay(params: {orderId: number}) {
|
||||
return rawRequest({
|
||||
url: '/payment/aliPay/pcPay',
|
||||
method: 'post',
|
||||
params
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** WxPay scanCode with orderId */
|
||||
export function wxPayScanCode(params: {orderId: number}) {
|
||||
return request({
|
||||
url: '/payment/wxPay/scanCode2',
|
||||
method: 'post',
|
||||
params
|
||||
});
|
||||
}
|
||||
1
src/typings/api.d.ts
vendored
1
src/typings/api.d.ts
vendored
@@ -704,6 +704,7 @@ declare namespace Api {
|
||||
/** Base order params */
|
||||
interface BaseOrderParams {
|
||||
type: OrderType;
|
||||
status: number;
|
||||
}
|
||||
|
||||
/** Package order params */
|
||||
|
||||
48
src/views/billing/wxpay/index.vue
Normal file
48
src/views/billing/wxpay/index.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useRouterPush } from '@/hooks/common/router';
|
||||
import { doGetOrderInfo } from '@/service/api/order';
|
||||
|
||||
const route = useRoute();
|
||||
const { routerPushByKey } = useRouterPush();
|
||||
|
||||
const qrCodeImg = ref<string>(route.query.url);
|
||||
const orderId = ref<number>(route.query.orderId);
|
||||
|
||||
let orderStatusInterval = ref<number | null>(null);
|
||||
|
||||
// 设置订单状态轮询定时器
|
||||
const setOrderStatusInterval = () => {
|
||||
orderStatusInterval = setInterval(async () => {
|
||||
let res = await doGetOrderInfo(orderId.value);
|
||||
if (res.data.status == 1) {
|
||||
routerPushByKey('home')
|
||||
}
|
||||
}, 2000)
|
||||
};
|
||||
onMounted(() => {
|
||||
setOrderStatusInterval();
|
||||
});
|
||||
onUnmounted(() => {
|
||||
clearInterval(orderStatusInterval)
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="weChat__card--div">
|
||||
<a-card class="weChat__card" :bordered="false">
|
||||
<template #title>
|
||||
<span class="title__span">微信支付</span>
|
||||
</template>
|
||||
<div class="weChat__card__content">
|
||||
<p>
|
||||
<img :src="qrCodeImg" class="weChat__card_qrCodeImg" />
|
||||
</p>
|
||||
<div class="bottomContent">
|
||||
<span class="weChat__card_span">使用微信扫码支付</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
|
||||
import { submitOrder } from '@/service/api/auth';
|
||||
import { aliPayPcPay } from '@/service/api/payment';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { useRouterPush } from '@/hooks/common/router';
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
defineOptions({
|
||||
@@ -11,6 +12,7 @@ defineOptions({
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const { routerPushByKey } = useRouterPush();
|
||||
|
||||
interface RechargeOption {
|
||||
amount: number;
|
||||
@@ -116,6 +118,21 @@ const handleAliPay = async () => {
|
||||
console.error('Failed to submit recharge order:', error);
|
||||
}
|
||||
};
|
||||
// 微信支付
|
||||
const handleWxPay = async () => {
|
||||
try {
|
||||
const orderRes = await submitOrder({
|
||||
type: 1,
|
||||
orderAmount: paymentAmount.value
|
||||
});
|
||||
const res = await wxPayScanCode({orderId: orderRes.data});
|
||||
routerPushByKey('billing_wxpay', { query: { url: res.data, orderId: orderRes.data } })
|
||||
|
||||
} catch (error) {
|
||||
message.error('充值失败,请重试!');
|
||||
console.error('Failed to submit recharge order:', error);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -169,15 +186,25 @@ const handleAliPay = async () => {
|
||||
¥{{ paymentAmount.toFixed(2) }} {{ t('page.carddata.pay') }}
|
||||
</AButton>
|
||||
<!-- 测试:支付宝支付 -->
|
||||
<!-- <AButton-->
|
||||
<!-- type="primary"-->
|
||||
<!-- size="large"-->
|
||||
<!-- block-->
|
||||
<!-- :disabled="!paymentAmount || paymentAmount <= 0"-->
|
||||
<!-- @click="handleAliPay"-->
|
||||
<!-- >-->
|
||||
<!-- AliPay-->
|
||||
<!-- </AButton>-->
|
||||
<AButton
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
:disabled="!paymentAmount || paymentAmount <= 0"
|
||||
@click="handleAliPay"
|
||||
>
|
||||
AliPay
|
||||
</AButton>
|
||||
<!-- 测试:微信支付 -->
|
||||
<AButton
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
:disabled="!paymentAmount || paymentAmount <= 0"
|
||||
@click="handleWxPay"
|
||||
>
|
||||
WxPay
|
||||
</AButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user