feat: pay cashier
xingyu4j
parent
58bef6359f
commit
cd239afd83
|
|
@ -5,28 +5,58 @@ import { onMounted, ref } from 'vue';
|
|||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import { Page, useVbenModal } from '@vben/common-ui';
|
||||
import { useTabs } from '@vben/hooks';
|
||||
import { formatDate } from '@vben/utils';
|
||||
|
||||
import { Card, Descriptions, message } from 'ant-design-vue';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Descriptions,
|
||||
Input,
|
||||
message,
|
||||
QRCode,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import { getOrder } from '#/api/pay/order';
|
||||
import { PayChannelEnum, PayOrderStatusEnum } from '#/utils/constants';
|
||||
import { getOrder, submitOrder } from '#/api/pay/order';
|
||||
import {
|
||||
fenToYuan,
|
||||
PayChannelEnum,
|
||||
PayDisplayModeEnum,
|
||||
PayOrderStatusEnum,
|
||||
} from '#/utils';
|
||||
|
||||
import { channelsAlipay, channelsMock, channelsWechat } from './data';
|
||||
import Form from './modules/form.vue';
|
||||
|
||||
defineOptions({ name: 'PayCashier' });
|
||||
|
||||
const [FormModal, formModalApi] = useVbenModal({
|
||||
connectedComponent: Form,
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
showConfirmButton: false,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
const id = ref(); // 支付单号
|
||||
const returnUrl = ref<string>(); // 支付完的回调地址
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { push } = useRouter(); // 路由
|
||||
const { closeCurrentTab } = useTabs();
|
||||
|
||||
const id = ref(); // 支付单号
|
||||
const title = ref('支付订单');
|
||||
const returnUrl = ref<string>(); // 支付完的回调地址
|
||||
|
||||
const payOrder = ref<PayOrderApi.Order>();
|
||||
const interval = ref<any>(undefined); // 定时任务，轮询是否完成支付
|
||||
|
||||
/** 展示形式：二维码 */
|
||||
const qrCode = ref({
|
||||
url: '',
|
||||
visible: false,
|
||||
});
|
||||
|
||||
/** 展示形式：条形码 */
|
||||
const barCode = ref({
|
||||
channelCode: '',
|
||||
value: '',
|
||||
visible: false,
|
||||
});
|
||||
|
||||
/** 获得支付信息 */
|
||||
async function getDetail() {
|
||||
|
|
@ -38,57 +68,227 @@ async function getDetail() {
|
|||
// 1.1 未传递订单编号
|
||||
if (!id.value) {
|
||||
message.error('未传递支付单号，无法查看对应的支付信息');
|
||||
// goReturnUrl('cancel')
|
||||
goReturnUrl('cancel');
|
||||
return;
|
||||
}
|
||||
const res = await getOrder(id.value);
|
||||
// 1.2 无法查询到支付信息
|
||||
if (!res) {
|
||||
message.error('支付订单不存在，请检查！');
|
||||
// goReturnUrl('cancel')
|
||||
goReturnUrl('cancel');
|
||||
return;
|
||||
}
|
||||
// 1.3 如果已支付、或者已关闭，则直接跳转
|
||||
if (res.status === PayOrderStatusEnum.SUCCESS.status) {
|
||||
message.success('支付成功');
|
||||
// goReturnUrl('success')
|
||||
goReturnUrl('success');
|
||||
return;
|
||||
} else if (res.status === PayOrderStatusEnum.CLOSED.status) {
|
||||
message.error('无法支付，原因：订单已关闭');
|
||||
// goReturnUrl('close')
|
||||
goReturnUrl('close');
|
||||
return;
|
||||
}
|
||||
payOrder.value = res;
|
||||
}
|
||||
|
||||
function handlePay(channelCode: string) {
|
||||
// 微信公众号、小程序支付，无法在 PC 网页中进行
|
||||
if (channelCode === PayChannelEnum.WX_PUB.code) {
|
||||
message.error('微信公众号支付：不支持 PC 网站');
|
||||
return;
|
||||
switch (channelCode) {
|
||||
// 条形码支付，需要特殊处理
|
||||
case PayChannelEnum.ALIPAY_BAR.code: {
|
||||
title.value = '“支付宝”条码支付';
|
||||
barCode.value = {
|
||||
channelCode,
|
||||
value: '',
|
||||
visible: true,
|
||||
};
|
||||
modalApi.open();
|
||||
break;
|
||||
}
|
||||
case PayChannelEnum.WX_BAR.code: {
|
||||
title.value = '“微信”条码支付';
|
||||
barCode.value = {
|
||||
channelCode,
|
||||
value: '',
|
||||
visible: true,
|
||||
};
|
||||
modalApi.open();
|
||||
break;
|
||||
}
|
||||
// 微信公众号、小程序支付，无法在 PC 网页中进行
|
||||
case PayChannelEnum.WX_LITE.code: {
|
||||
message.error('微信小程序：不支持 PC 网站');
|
||||
break;
|
||||
}
|
||||
case PayChannelEnum.WX_PUB.code: {
|
||||
message.error('微信公众号支付：不支持 PC 网站');
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
submit(channelCode);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (channelCode === PayChannelEnum.WX_LITE.code) {
|
||||
message.error('微信小程序：不支持 PC 网站');
|
||||
return;
|
||||
}
|
||||
const data = {
|
||||
id: id.value,
|
||||
channelCode,
|
||||
returnUrl: location.href, // 支付成功后，支付渠道跳转回当前页；再由当前页，跳转回 {@link returnUrl} 对应的地址
|
||||
};
|
||||
formModalApi.setData(data).open();
|
||||
}
|
||||
|
||||
function success(data?: { channelCode: string; data?: any }) {
|
||||
if (!data) {
|
||||
clearQueryInterval();
|
||||
async function submit(channelCode: string) {
|
||||
try {
|
||||
const submitParam = {
|
||||
id: id.value,
|
||||
channelCode,
|
||||
returnUrl: location.href, // 支付成功后，支付渠道跳转回当前页；再由当前页，跳转回 {@link returnUrl} 对应的地址
|
||||
...buildSubmitParam(channelCode),
|
||||
};
|
||||
const data = await submitOrder(submitParam);
|
||||
// 直接返回已支付的情况，例如说扫码支付
|
||||
if (data.status === PayOrderStatusEnum.SUCCESS.status) {
|
||||
clearQueryInterval();
|
||||
message.success('支付成功！');
|
||||
goReturnUrl('success');
|
||||
return;
|
||||
}
|
||||
|
||||
// 展示对应的界面
|
||||
switch (data.displayMode) {
|
||||
case PayDisplayModeEnum.APP.mode: {
|
||||
displayApp(channelCode);
|
||||
break;
|
||||
}
|
||||
case PayDisplayModeEnum.QR_CODE.mode: {
|
||||
displayQrCode(channelCode, data);
|
||||
break;
|
||||
}
|
||||
case PayDisplayModeEnum.URL.mode: {
|
||||
displayUrl(data);
|
||||
break;
|
||||
}
|
||||
// No default
|
||||
}
|
||||
|
||||
// 打开轮询任务
|
||||
createQueryInterval();
|
||||
} finally {
|
||||
// message.success('支付成功！')
|
||||
}
|
||||
if (data.channelCode === PayChannelEnum.ALIPAY_BAR.code) {
|
||||
message.success('支付宝条码支付');
|
||||
} else if (data.channelCode === PayChannelEnum.WX_BAR.code) {
|
||||
message.success('微信条码支付');
|
||||
}
|
||||
|
||||
/** 构建提交支付的额外参数 */
|
||||
function buildSubmitParam(channelCode: string) {
|
||||
// ① 支付宝 BarCode 支付时，需要传递 authCode 条形码
|
||||
if (channelCode === PayChannelEnum.ALIPAY_BAR.code) {
|
||||
return {
|
||||
channelExtras: {
|
||||
auth_code: barCode.value.value,
|
||||
},
|
||||
};
|
||||
}
|
||||
// ② 微信 BarCode 支付时，需要传递 authCode 条形码
|
||||
if (channelCode === PayChannelEnum.WX_BAR.code) {
|
||||
return {
|
||||
channelExtras: {
|
||||
authCode: barCode.value.value,
|
||||
},
|
||||
};
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
||||
/** 提交支付后，URL 的展示形式 */
|
||||
function displayUrl(data: any) {
|
||||
location.href = data.displayContent;
|
||||
}
|
||||
|
||||
/** 提交支付后（扫码支付） */
|
||||
function displayQrCode(channelCode: string, data: any) {
|
||||
title.value = '请使用手机浏览器“扫一扫”';
|
||||
if (channelCode === PayChannelEnum.ALIPAY_WAP.code) {
|
||||
// 考虑到 WAP 测试，所以引导手机浏览器搞
|
||||
} else if (channelCode.indexOf('alipay_') === 0) {
|
||||
title.value = '请使用支付宝“扫一扫”扫码支付';
|
||||
} else if (channelCode.indexOf('wx_') === 0) {
|
||||
title.value = '请使用微信“扫一扫”扫码支付';
|
||||
}
|
||||
qrCode.value = {
|
||||
url: data.displayContent,
|
||||
visible: true,
|
||||
};
|
||||
}
|
||||
|
||||
/** 提交支付后（App） */
|
||||
function displayApp(channelCode: string) {
|
||||
if (channelCode === PayChannelEnum.ALIPAY_APP.code) {
|
||||
message.error('支付宝 App 支付：无法在网页支付！');
|
||||
}
|
||||
if (channelCode === PayChannelEnum.WX_APP.code) {
|
||||
message.error('微信 App 支付：无法在网页支付！');
|
||||
}
|
||||
}
|
||||
|
||||
/** 轮询查询任务 */
|
||||
function createQueryInterval() {
|
||||
if (interval.value) {
|
||||
return;
|
||||
}
|
||||
interval.value = setInterval(async () => {
|
||||
const data = await getOrder(id.value);
|
||||
// 已支付
|
||||
if (data.status === PayOrderStatusEnum.SUCCESS.status) {
|
||||
clearQueryInterval();
|
||||
message.success('支付成功！');
|
||||
goReturnUrl('success');
|
||||
}
|
||||
// 已取消
|
||||
if (data.status === PayOrderStatusEnum.CLOSED.status) {
|
||||
clearQueryInterval();
|
||||
message.error('支付已关闭！');
|
||||
goReturnUrl('close');
|
||||
}
|
||||
}, 1000 * 2);
|
||||
}
|
||||
|
||||
/** 清空查询任务 */
|
||||
function clearQueryInterval() {
|
||||
// 清空数据
|
||||
qrCode.value = {
|
||||
url: '',
|
||||
visible: false,
|
||||
};
|
||||
barCode.value = {
|
||||
channelCode: '',
|
||||
value: '',
|
||||
visible: false,
|
||||
};
|
||||
// 清空任务
|
||||
clearInterval(interval.value);
|
||||
interval.value = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* 回到业务的 URL
|
||||
*
|
||||
* @param payResult 支付结果
|
||||
* ① success：支付成功
|
||||
* ② cancel：取消支付
|
||||
* ③ close：支付已关闭
|
||||
*/
|
||||
function goReturnUrl(payResult: string) {
|
||||
// 清理任务
|
||||
clearQueryInterval();
|
||||
|
||||
// 未配置的情况下，只能关闭
|
||||
if (!returnUrl.value) {
|
||||
closeCurrentTab();
|
||||
return;
|
||||
}
|
||||
|
||||
const url = returnUrl.value.includes('?')
|
||||
? `${returnUrl.value}&payResult=${payResult}`
|
||||
: `${returnUrl.value}?payResult=${payResult}`;
|
||||
// 如果有配置，且是 http 开头，则浏览器跳转
|
||||
if (returnUrl.value.indexOf('http') === 0) {
|
||||
location.href = url;
|
||||
} else {
|
||||
message.success('支付成功');
|
||||
closeCurrentTab();
|
||||
push({ path: url });
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -98,8 +298,6 @@ onMounted(async () => {
|
|||
</script>
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<FormModal @success="success" />
|
||||
|
||||
<Card class="mt-4">
|
||||
<Descriptions :column="3" :title="payOrder?.subject ?? '商品详情'">
|
||||
<Descriptions.Item label="支付单号">
|
||||
|
|
@ -112,7 +310,7 @@ onMounted(async () => {
|
|||
{{ payOrder?.body }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="支付金额">
|
||||
{{ `￥${(payOrder?.price ? payOrder.price / 100.0 : 0).toFixed(2)}` }}
|
||||
{{ `￥${fenToYuan(payOrder?.price || 0)}` }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="创建时间">
|
||||
{{ formatDate(payOrder?.createTime) }}
|
||||
|
|
@ -167,5 +365,26 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Modal class="w-[40%]" :title="title">
|
||||
<QRCode v-if="qrCode.visible" :value="qrCode.url" />
|
||||
<Input
|
||||
v-if="barCode.visible"
|
||||
v-model:value="barCode.value"
|
||||
placeholder="请输入条形码"
|
||||
required
|
||||
/>
|
||||
<div class="text-right" v-if="barCode.visible">
|
||||
或使用
|
||||
<Button
|
||||
type="link"
|
||||
danger
|
||||
target="_blank"
|
||||
href="https://baike.baidu.com/item/条码支付/10711903"
|
||||
>
|
||||
(扫码枪/扫码盒)
|
||||
</Button>
|
||||
扫码
|
||||
</div>
|
||||
</Modal>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,155 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { Button, Input, message, QRCode } from 'ant-design-vue';
|
||||
|
||||
import { submitOrder } from '#/api/pay/order';
|
||||
import {
|
||||
PayChannelEnum,
|
||||
PayDisplayModeEnum,
|
||||
PayOrderStatusEnum,
|
||||
} from '#/utils';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
const title = ref('支付订单');
|
||||
const channelCode = ref('');
|
||||
const formData = ref();
|
||||
|
||||
/** 展示形式：二维码 */
|
||||
const qrCode = ref({
|
||||
url: '',
|
||||
visible: false,
|
||||
});
|
||||
|
||||
/** 展示形式：条形码 */
|
||||
const barCode = ref({
|
||||
channelCode: '',
|
||||
value: '',
|
||||
visible: false,
|
||||
});
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
modalApi.lock();
|
||||
try {
|
||||
const submitParam = {
|
||||
id: formData.value.id,
|
||||
channelCode: formData.value.channelCode,
|
||||
returnUrl: formData.value.returnUrl, // 支付成功后，支付渠道跳转回当前页；再由当前页，跳转回 {@link returnUrl} 对应的地址
|
||||
...buildSubmitParam(formData.value.channelCode),
|
||||
};
|
||||
const data = await submitOrder(submitParam);
|
||||
// 直接返回已支付的情况，例如说扫码支付
|
||||
if (data.status === PayOrderStatusEnum.SUCCESS.status) {
|
||||
message.success('支付成功！');
|
||||
emit('success');
|
||||
}
|
||||
// 展示对应的界面
|
||||
switch (data.displayMode) {
|
||||
case PayDisplayModeEnum.APP.mode: {
|
||||
await modalApi.close();
|
||||
emit('success', { channelCode });
|
||||
break;
|
||||
}
|
||||
case PayDisplayModeEnum.QR_CODE.mode: {
|
||||
await modalApi.close();
|
||||
emit('success', { channelCode, data });
|
||||
break;
|
||||
}
|
||||
case PayDisplayModeEnum.URL.mode: {
|
||||
await modalApi.close();
|
||||
emit('success', { channelCode, data });
|
||||
break;
|
||||
}
|
||||
// No default
|
||||
}
|
||||
} catch (error) {
|
||||
message.error(error as string);
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
async onOpenChange(isOpen: boolean) {
|
||||
if (!isOpen) {
|
||||
formData.value = undefined;
|
||||
return;
|
||||
}
|
||||
// 加载数据
|
||||
const data = modalApi.getData();
|
||||
if (!data || !data.id) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
formData.value = data;
|
||||
try {
|
||||
channelCode.value = formData.value.channelCode;
|
||||
// 条形码支付，需要特殊处理
|
||||
if (formData.value.channelCode === PayChannelEnum.ALIPAY_BAR.code) {
|
||||
title.value = '“支付宝”条码支付';
|
||||
barCode.value = {
|
||||
channelCode: formData.value.channelCode,
|
||||
value: formData.value.channelExtras.auth_code,
|
||||
visible: true,
|
||||
};
|
||||
} else if (formData.value.channelCode === PayChannelEnum.WX_BAR.code) {
|
||||
title.value = '“微信”条码支付';
|
||||
barCode.value = {
|
||||
channelCode: formData.value.channelCode,
|
||||
value: formData.value.channelExtras.authCode,
|
||||
visible: true,
|
||||
};
|
||||
}
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
/** 构建提交支付的额外参数 */
|
||||
function buildSubmitParam(channelCode: string) {
|
||||
// ① 支付宝 BarCode 支付时，需要传递 authCode 条形码
|
||||
if (channelCode === PayChannelEnum.ALIPAY_BAR.code) {
|
||||
return {
|
||||
channelExtras: {
|
||||
auth_code: barCode.value.value,
|
||||
},
|
||||
};
|
||||
}
|
||||
// ② 微信 BarCode 支付时，需要传递 authCode 条形码
|
||||
if (channelCode === PayChannelEnum.WX_BAR.code) {
|
||||
return {
|
||||
channelExtras: {
|
||||
authCode: barCode.value.value,
|
||||
},
|
||||
};
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal class="w-[600px]" :title="title">
|
||||
<QRCode v-if="qrCode.visible" :value="qrCode.url" />
|
||||
<Input
|
||||
v-if="barCode.visible"
|
||||
v-model:value="barCode.value"
|
||||
placeholder="请输入条形码"
|
||||
required
|
||||
/>
|
||||
<div style="text-align: right" v-if="barCode.visible">
|
||||
或使用
|
||||
<Button
|
||||
type="link"
|
||||
danger
|
||||
target="_blank"
|
||||
href="https://baike.baidu.com/item/条码支付/10711903"
|
||||
>
|
||||
(扫码枪/扫码盒)
|
||||
</Button>
|
||||
扫码
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
Loading…
Reference in New Issue