feat: 新增支付管理其他模块
吃货
parent
4562d204e0
commit
95f2d1c9bb
|
|
@ -10,7 +10,7 @@ import {
|
|||
setupVbenVxeTable,
|
||||
useVbenVxeGrid,
|
||||
} from '@vben/plugins/vxe-table';
|
||||
import { isFunction, isString } from '@vben/utils';
|
||||
import { erpCountInputFormatter, erpNumberFormatter, formatPast2, isFunction, isString } from '@vben/utils';
|
||||
|
||||
import { ElButton, ElImage, ElPopconfirm, ElSwitch } from 'element-plus';
|
||||
|
||||
|
|
@ -267,21 +267,25 @@ setupVbenVxeTable({
|
|||
|
||||
// 添加数量格式化，例如金额
|
||||
// TODO @xingyu：建议金额，和数量分开哈；原因是，有些团队希望金额，单独控制；
|
||||
vxeUI.formats.add('formatNumber', {
|
||||
cellFormatMethod({ cellValue }, digits = 2) {
|
||||
if (cellValue === null || cellValue === undefined) {
|
||||
return '';
|
||||
}
|
||||
if (isString(cellValue)) {
|
||||
cellValue = Number.parseFloat(cellValue);
|
||||
}
|
||||
// 如果非 number，则直接返回空串
|
||||
if (Number.isNaN(cellValue)) {
|
||||
return '';
|
||||
}
|
||||
return cellValue.toFixed(digits);
|
||||
vxeUI.formats.add('formatPast2', {
|
||||
tableCellFormatMethod({ cellValue }) {
|
||||
return formatPast2(cellValue);
|
||||
},
|
||||
});
|
||||
|
||||
// add by 星语：数量格式化，例如说：金额
|
||||
vxeUI.formats.add('formatNumber', {
|
||||
tableCellFormatMethod({ cellValue }) {
|
||||
return erpCountInputFormatter(cellValue);
|
||||
},
|
||||
});
|
||||
|
||||
vxeUI.formats.add('formatAmount2', {
|
||||
tableCellFormatMethod({ cellValue }, digits = 2) {
|
||||
return `${erpNumberFormatter(cellValue, digits)}元`;
|
||||
},
|
||||
});
|
||||
|
||||
},
|
||||
useVbenForm,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,77 @@
|
|||
<script lang="tsx">
|
||||
import type { DescriptionProps } from 'element-plus';
|
||||
|
||||
import type { PropType } from 'vue';
|
||||
|
||||
import type { DescriptionItemSchema, DescriptionsOptions } from './typing';
|
||||
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
|
||||
|
||||
/** 对 Descriptions 进行二次封装 */
|
||||
const Description = defineComponent({
|
||||
name: 'Descriptions',
|
||||
props: {
|
||||
data: {
|
||||
type: Object as PropType<Record<string, any>>,
|
||||
default: () => ({}),
|
||||
},
|
||||
schema: {
|
||||
type: Array as PropType<DescriptionItemSchema[]>,
|
||||
default: () => [],
|
||||
},
|
||||
// Descriptions 原生 props
|
||||
componentProps: {
|
||||
type: Object as PropType<DescriptionProps>,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
setup(props: DescriptionsOptions) {
|
||||
// TODO @puhui999：每个 field 的 slot 的考虑
|
||||
// TODO @puhui999：from 5.0：extra: () => getSlot(slots, 'extra')
|
||||
/** 过滤掉不需要展示的 */
|
||||
const shouldShowItem = (item: DescriptionItemSchema) => {
|
||||
if (item.hidden === undefined) return true;
|
||||
return typeof item.hidden === 'function'
|
||||
? !item.hidden(props.data)
|
||||
: !item.hidden;
|
||||
};
|
||||
/** 渲染内容 */
|
||||
const renderContent = (item: DescriptionItemSchema) => {
|
||||
if (item.content) {
|
||||
return typeof item.content === 'function'
|
||||
? item.content(props.data)
|
||||
: item.content;
|
||||
}
|
||||
return item.field ? props.data?.[item.field] : null;
|
||||
};
|
||||
|
||||
return () => (
|
||||
<ElDescriptions
|
||||
{...props}
|
||||
border={props.componentProps?.border}
|
||||
column={props.componentProps?.column}
|
||||
extra={props.componentProps?.extra}
|
||||
direction={props.componentProps?.direction}
|
||||
size={props.componentProps?.size}
|
||||
title={props.componentProps?.title}
|
||||
>
|
||||
{props.schema?.filter(shouldShowItem).map((item) => (
|
||||
<ElDescriptionsItem
|
||||
key={item.field || String(item.label)}
|
||||
label={item.label as string}
|
||||
span={item.span}
|
||||
>
|
||||
{renderContent(item)}
|
||||
</ElDescriptionsItem>
|
||||
))}
|
||||
</ElDescriptions>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
// TODO @puhui999：from 5.0：emits: ['register'] 事件
|
||||
export default Description;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export { default as Description } from './description.vue';
|
||||
export * from './typing';
|
||||
export { useDescription } from './use-description';
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import type { DescriptionProps } from 'element-plus';
|
||||
|
||||
import type { CSSProperties, VNode } from 'vue';
|
||||
|
||||
// TODO @puhui999：【content】这个纠结下；1）vben2.0 是 render；https://doc.vvbin.cn/components/desc.html#usage 2）
|
||||
// TODO @puhui999：vben2.0 还有 sapn【done】、labelMinWidth、contentMinWidth
|
||||
// TODO @puhui999：【hidden】这个纠结下；1）vben2.0 是 show；
|
||||
export interface DescriptionItemSchema {
|
||||
label: string | VNode; // 内容的描述
|
||||
field?: string; // 对应 data 中的字段名
|
||||
content?: ((data: any) => string | VNode) | string | VNode; // 自定义需要展示的内容，比如说 dict-tag
|
||||
span?: number; // 包含列的数量
|
||||
labelStyle?: CSSProperties; // 自定义标签样式
|
||||
contentStyle?: CSSProperties; // 自定义内容样式
|
||||
hidden?: ((data: any) => boolean) | boolean; // 是否显示
|
||||
}
|
||||
|
||||
// TODO @puhui999：vben2.0 还有 title【done】、bordered【done】d、useCollapse、collapseOptions
|
||||
// TODO @puhui999：from 5.0：bordered 默认为 true
|
||||
// TODO @puhui999：from 5.0：column 默认为 lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4
|
||||
// TODO @puhui999：from 5.0：size 默认为 small；有 'default', 'middle', 'small', undefined
|
||||
// TODO @puhui999：from 5.0：useCollapse 默认为 true
|
||||
export interface DescriptionsOptions {
|
||||
data?: Record<string, any>; // 数据
|
||||
schema?: DescriptionItemSchema[]; // 描述项配置
|
||||
componentProps?: DescriptionProps; // antd Descriptions 组件参数
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
import type { DescriptionsOptions } from './typing';
|
||||
|
||||
import { defineComponent, h, isReactive, reactive, watch } from 'vue';
|
||||
|
||||
import { Description } from './index';
|
||||
|
||||
/** 描述列表 api 定义 */
|
||||
class DescriptionApi {
|
||||
private state = reactive<Record<string, any>>({});
|
||||
|
||||
constructor(options: DescriptionsOptions) {
|
||||
this.state = { ...options };
|
||||
}
|
||||
|
||||
getState(): DescriptionsOptions {
|
||||
return this.state as DescriptionsOptions;
|
||||
}
|
||||
|
||||
// TODO @puhui999：【setState】纠结下：1）vben2.0 是 data https://doc.vvbin.cn/components/desc.html#usage；
|
||||
setState(newState: Partial<DescriptionsOptions>) {
|
||||
this.state = { ...this.state, ...newState };
|
||||
}
|
||||
}
|
||||
|
||||
export type ExtendedDescriptionApi = DescriptionApi;
|
||||
|
||||
export function useDescription(options: DescriptionsOptions) {
|
||||
const IS_REACTIVE = isReactive(options);
|
||||
const api = new DescriptionApi(options);
|
||||
// 扩展API
|
||||
const extendedApi: ExtendedDescriptionApi = api as never;
|
||||
const Desc = defineComponent({
|
||||
name: 'UseDescription',
|
||||
inheritAttrs: false,
|
||||
setup(_, { attrs, slots }) {
|
||||
// 合并props和attrs到state
|
||||
api.setState({ ...attrs });
|
||||
|
||||
return () =>
|
||||
h(
|
||||
Description,
|
||||
{
|
||||
...api.getState(),
|
||||
...attrs,
|
||||
},
|
||||
slots,
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
// 响应式支持
|
||||
if (IS_REACTIVE) {
|
||||
watch(
|
||||
() => options.schema,
|
||||
(newSchema) => {
|
||||
api.setState({ schema: newSchema });
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => options.data,
|
||||
(newData) => {
|
||||
api.setState({ data: newData });
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
}
|
||||
|
||||
return [Desc, extendedApi] as const;
|
||||
}
|
||||
|
|
@ -78,7 +78,7 @@ const dictTag = computed(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<ElTag v-if="dictTag" :type="dictTag.colorType">
|
||||
<ElTag v-if="dictTag.label" :type="dictTag.colorType as any">
|
||||
{{ dictTag.label }}
|
||||
</ElTag>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,81 @@
|
|||
import {
|
||||
SvgAlipayAppIcon,
|
||||
SvgAlipayBarIcon,
|
||||
SvgAlipayPcIcon,
|
||||
SvgAlipayQrIcon,
|
||||
SvgAlipayWapIcon,
|
||||
SvgMockIcon,
|
||||
SvgWalletIcon,
|
||||
SvgWxAppIcon,
|
||||
SvgWxBarIcon,
|
||||
SvgWxLiteIcon,
|
||||
SvgWxNativeIcon,
|
||||
SvgWxPubIcon,
|
||||
} from '@vben/icons';
|
||||
|
||||
export const channelsAlipay = [
|
||||
{
|
||||
name: '支付宝 PC 网站支付',
|
||||
icon: SvgAlipayPcIcon,
|
||||
code: 'alipay_pc',
|
||||
},
|
||||
{
|
||||
name: '支付宝 Wap 网站支付',
|
||||
icon: SvgAlipayWapIcon,
|
||||
code: 'alipay_wap',
|
||||
},
|
||||
{
|
||||
name: '支付宝 App 网站支付',
|
||||
icon: SvgAlipayAppIcon,
|
||||
code: 'alipay_app',
|
||||
},
|
||||
{
|
||||
name: '支付宝扫码支付',
|
||||
icon: SvgAlipayQrIcon,
|
||||
code: 'alipay_qr',
|
||||
},
|
||||
{
|
||||
name: '支付宝条码支付',
|
||||
icon: SvgAlipayBarIcon,
|
||||
code: 'alipay_bar',
|
||||
},
|
||||
];
|
||||
export const channelsWechat = [
|
||||
{
|
||||
name: '微信公众号支付',
|
||||
icon: SvgWxPubIcon,
|
||||
code: 'wx_pub',
|
||||
},
|
||||
{
|
||||
name: '微信小程序支付',
|
||||
icon: SvgWxLiteIcon,
|
||||
code: 'wx_lite',
|
||||
},
|
||||
{
|
||||
name: '微信 App 支付',
|
||||
icon: SvgWxAppIcon,
|
||||
code: 'wx_app',
|
||||
},
|
||||
{
|
||||
name: '微信扫码支付',
|
||||
icon: SvgWxNativeIcon,
|
||||
code: 'wx_native',
|
||||
},
|
||||
{
|
||||
name: '微信条码支付',
|
||||
icon: SvgWxBarIcon,
|
||||
code: 'wx_bar',
|
||||
},
|
||||
];
|
||||
export const channelsMock = [
|
||||
{
|
||||
name: '钱包支付',
|
||||
icon: SvgWalletIcon,
|
||||
code: 'wallet',
|
||||
},
|
||||
{
|
||||
name: '模拟支付',
|
||||
icon: SvgMockIcon,
|
||||
code: 'mock',
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,389 @@
|
|||
<script setup lang="ts">
|
||||
import type { PayOrderApi } from '#/api/pay/order';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import { Page, useVbenModal } from '@vben/common-ui';
|
||||
import { useTabs } from '@vben/hooks';
|
||||
import { fenToYuan, formatDate } from '@vben/utils';
|
||||
|
||||
import {
|
||||
ElButton,
|
||||
ElCard,
|
||||
ElDescriptions,
|
||||
ElInput,
|
||||
ElMessage,
|
||||
ElImage,
|
||||
} from 'element-plus';
|
||||
|
||||
import { getOrder, submitOrder } from '#/api/pay/order';
|
||||
import {
|
||||
PayChannelEnum,
|
||||
PayDisplayModeEnum,
|
||||
PayOrderStatusEnum,
|
||||
} from '#/utils';
|
||||
|
||||
import { channelsAlipay, channelsMock, channelsWechat } from './data';
|
||||
|
||||
defineOptions({ name: 'PayCashier' });
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
showConfirmButton: false,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
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() {
|
||||
// 1. 获取路由参数
|
||||
id.value = route.query.id;
|
||||
if (route.query.returnUrl) {
|
||||
returnUrl.value = decodeURIComponent(route.query.returnUrl as string);
|
||||
}
|
||||
// 1.1 未传递订单编号
|
||||
if (!id.value) {
|
||||
ElMessage.error('未传递支付单号，无法查看对应的支付信息');
|
||||
goReturnUrl('cancel');
|
||||
return;
|
||||
}
|
||||
const res = await getOrder(id.value);
|
||||
// 1.2 无法查询到支付信息
|
||||
if (!res) {
|
||||
ElMessage.error('支付订单不存在，请检查！');
|
||||
goReturnUrl('cancel');
|
||||
return;
|
||||
}
|
||||
// 1.3 如果已支付、或者已关闭，则直接跳转
|
||||
if (res.status === PayOrderStatusEnum.SUCCESS.status) {
|
||||
ElMessage.success('支付成功');
|
||||
goReturnUrl('success');
|
||||
return;
|
||||
} else if (res.status === PayOrderStatusEnum.CLOSED.status) {
|
||||
ElMessage.error('无法支付，原因：订单已关闭');
|
||||
goReturnUrl('close');
|
||||
return;
|
||||
}
|
||||
payOrder.value = res;
|
||||
}
|
||||
|
||||
function handlePay(channelCode: string) {
|
||||
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: {
|
||||
ElMessage.error('微信小程序：不支持 PC 网站');
|
||||
break;
|
||||
}
|
||||
case PayChannelEnum.WX_PUB.code: {
|
||||
ElMessage.error('微信公众号支付：不支持 PC 网站');
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
submit(channelCode);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
ElMessage.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('支付成功！')
|
||||
}
|
||||
}
|
||||
|
||||
/** 构建提交支付的额外参数 */
|
||||
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) {
|
||||
ElMessage.error('支付宝 App 支付：无法在网页支付！');
|
||||
}
|
||||
if (channelCode === PayChannelEnum.WX_APP.code) {
|
||||
ElMessage.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();
|
||||
ElMessage.success('支付成功！');
|
||||
goReturnUrl('success');
|
||||
}
|
||||
// 已取消
|
||||
if (data.status === PayOrderStatusEnum.CLOSED.status) {
|
||||
clearQueryInterval();
|
||||
ElMessage.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 {
|
||||
closeCurrentTab();
|
||||
push({ path: url });
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await getDetail();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<ElCard class="mt-4">
|
||||
<ElDescriptions :column="3" :title="payOrder?.subject ?? '商品详情'">
|
||||
<ElDescriptions.Item label="支付单号">
|
||||
{{ payOrder?.id }}
|
||||
</ElDescriptions.Item>
|
||||
<ElDescriptions.Item label="商品标题">
|
||||
{{ payOrder?.subject }}
|
||||
</ElDescriptions.Item>
|
||||
<ElDescriptions.Item label="商品内容">
|
||||
{{ payOrder?.body }}
|
||||
</ElDescriptions.Item>
|
||||
<ElDescriptions.Item label="支付金额">
|
||||
{{ `￥${fenToYuan(payOrder?.price || 0)}` }}
|
||||
</ElDescriptions.Item>
|
||||
<ElDescriptions.Item label="创建时间">
|
||||
{{ formatDate(payOrder?.createTime) }}
|
||||
</ElDescriptions.Item>
|
||||
<ElDescriptions.Item label="过期时间">
|
||||
{{ formatDate(payOrder?.expireTime) }}
|
||||
</ElDescriptions.Item>
|
||||
</ElDescriptions>
|
||||
</ElCard>
|
||||
<ElCard title="选择支付宝支付" class="mt-4">
|
||||
<div class="flex">
|
||||
<div
|
||||
class="mr-4 w-40 cursor-pointer items-center border-2 border-gray-200 pb-1 pt-4 text-center hover:border-blue-500"
|
||||
v-for="channel in channelsAlipay"
|
||||
:key="channel.code"
|
||||
@click="handlePay(channel.code)"
|
||||
>
|
||||
<div class="flex items-center justify-center">
|
||||
<component :is="channel.icon" class="h-10 w-10" />
|
||||
</div>
|
||||
<div class="mt-2 pt-1 text-center">{{ channel.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</ElCard>
|
||||
<ElCard title="选择微信支付" class="mt-4">
|
||||
<div class="flex">
|
||||
<div
|
||||
class="mr-4 w-40 cursor-pointer items-center border-2 border-gray-200 pb-1 pt-4 text-center hover:border-blue-500"
|
||||
v-for="channel in channelsWechat"
|
||||
:key="channel.code"
|
||||
@click="handlePay(channel.code)"
|
||||
>
|
||||
<div class="flex items-center justify-center">
|
||||
<component :is="channel.icon" class="h-10 w-10" />
|
||||
</div>
|
||||
<div class="mt-2 pt-1 text-center">{{ channel.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</ElCard>
|
||||
<ElCard title="选择其它支付" class="mt-4">
|
||||
<div class="flex">
|
||||
<div
|
||||
class="mr-4 w-40 cursor-pointer items-center border-2 border-gray-200 pb-1 pt-4 text-center hover:border-blue-500"
|
||||
v-for="channel in channelsMock"
|
||||
:key="channel.code"
|
||||
@click="handlePay(channel.code)"
|
||||
>
|
||||
<div class="flex items-center justify-center">
|
||||
<component :is="channel.icon" class="h-10 w-10" />
|
||||
</div>
|
||||
<div class="mt-2 pt-1 text-center">{{ channel.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</ElCard>
|
||||
<Modal class="w-2/5" :title="title">
|
||||
<ElImage v-if="qrCode.visible" :src="qrCode.url" />
|
||||
<ElInput
|
||||
v-if="barCode.visible"
|
||||
v-model:value="barCode.value"
|
||||
placeholder="请输入条形码"
|
||||
required
|
||||
/>
|
||||
<div class="text-right" v-if="barCode.visible">
|
||||
或使用
|
||||
<ElButton
|
||||
type="danger"
|
||||
link
|
||||
target="_blank"
|
||||
href="https://baike.baidu.com/item/条码支付/10711903"
|
||||
>
|
||||
(扫码枪/扫码盒)
|
||||
</ElButton>
|
||||
扫码
|
||||
</div>
|
||||
</Modal>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { DICT_TYPE } from '#/utils';
|
||||
|
||||
/** 新增/修改的表单 */
|
||||
export function useFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'id',
|
||||
dependencies: {
|
||||
triggerFields: [''],
|
||||
show: () => false,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
fieldName: 'spuId',
|
||||
label: '商品',
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '华为手机 --- 1.00元', value: 1, price: 1 },
|
||||
{ label: '小米电视 --- 10.00元', value: 2, price: 10 },
|
||||
{ label: '苹果手表 --- 100.00元', value: 3, price: 100 },
|
||||
{ label: '华硕笔记本 --- 1000.00元', value: 4, price: 1000 },
|
||||
{ label: '蔚来汽车 --- 200000.00元', value: 5, price: 200_000 },
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 列表的字段 */
|
||||
export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'id',
|
||||
title: '订单编号',
|
||||
},
|
||||
{
|
||||
field: 'userId',
|
||||
title: '用户编号',
|
||||
},
|
||||
{
|
||||
field: 'spuName',
|
||||
title: '商品名字',
|
||||
},
|
||||
{
|
||||
field: 'price',
|
||||
title: '支付价格',
|
||||
formatter: 'formatAmount2',
|
||||
},
|
||||
{
|
||||
field: 'refundPrice',
|
||||
title: '退款金额',
|
||||
formatter: 'formatAmount2',
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '创建时间',
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
field: 'payOrderId',
|
||||
title: '支付单号',
|
||||
},
|
||||
{
|
||||
field: 'payStatus',
|
||||
title: '是否支付',
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'payTime',
|
||||
title: '支付时间',
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
field: 'refundTime',
|
||||
title: '退款时间',
|
||||
slots: { default: 'refundTime' },
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 200,
|
||||
fixed: 'right',
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { DemoOrderApi } from '#/api/pay/demo/order';
|
||||
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
|
||||
import { formatDateTime } from '@vben/utils';
|
||||
|
||||
import { ElMessage, ElLoading } from 'element-plus';
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getDemoOrderPage, refundDemoOrder } from '#/api/pay/demo/order';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useGridColumns } from './data';
|
||||
import Form from './modules/form.vue';
|
||||
|
||||
const [FormModal, formModalApi] = useVbenModal({
|
||||
connectedComponent: Form,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
/** 刷新表格 */
|
||||
function onRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
/** 创建订单 */
|
||||
function handleCreate() {
|
||||
formModalApi.setData(null).open();
|
||||
}
|
||||
|
||||
/** 支付按钮操作 */
|
||||
function handlePay(row: DemoOrderApi.Order) {
|
||||
router.push({
|
||||
name: 'PayCashier',
|
||||
query: {
|
||||
id: row.payOrderId,
|
||||
returnUrl: encodeURIComponent(`/pay/demo/order?id=${row.id}`),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/** 退款按钮操作 */
|
||||
async function handleRefund(row: DemoOrderApi.Order) {
|
||||
const loadingInstance = ElLoading.service({
|
||||
text: '退款中，请稍后...',
|
||||
fullscreen: true,
|
||||
});
|
||||
try {
|
||||
await refundDemoOrder(row.id as number);
|
||||
ElMessage.success('退款成功');
|
||||
onRefresh();
|
||||
} finally {
|
||||
loadingInstance.close();
|
||||
}
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns: useGridColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getDemoOrderPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: { code: 'query' },
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<DemoOrderApi.Order>,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<template #doc>
|
||||
<DocAlert
|
||||
title="支付宝支付接入"
|
||||
url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
|
||||
/>
|
||||
<DocAlert
|
||||
title="支付宝、微信退款接入"
|
||||
url="https://doc.iocoder.cn/pay/refund-demo/"
|
||||
/>
|
||||
<DocAlert
|
||||
title="微信公众号支付接入"
|
||||
url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/"
|
||||
/>
|
||||
<DocAlert
|
||||
title="微信小程序支付接入"
|
||||
url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<FormModal @success="onRefresh" />
|
||||
<Grid table-title="示例订单列表">
|
||||
<template #toolbar-tools>
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('ui.actionTitle.create', ['示例订单']),
|
||||
type: 'primary',
|
||||
icon: ACTION_ICON.ADD,
|
||||
onClick: handleCreate,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
<template #refundTime="{ row }">
|
||||
<span v-if="row.refundTime">{{ formatDateTime(row.refundTime) }}</span>
|
||||
<span v-else-if="row.payRefundId">退款中，等待退款结果</span>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: '前往支付',
|
||||
type: 'primary',
|
||||
link: true,
|
||||
ifShow: !row.payStatus,
|
||||
onClick: handlePay.bind(null, row),
|
||||
},
|
||||
{
|
||||
label: '发起退款',
|
||||
type: 'danger',
|
||||
link: true,
|
||||
ifShow: row.payStatus && !row.payRefundId,
|
||||
popConfirm: {
|
||||
title: '确定发起退款吗？',
|
||||
confirm: handleRefund.bind(null, row),
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<script lang="ts" setup>
|
||||
import type { DemoOrderApi } from '#/api/pay/demo/order';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { createDemoOrder } from '#/api/pay/demo/order';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useFormSchema } from '../data';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
formItemClass: 'col-span-2',
|
||||
labelWidth: 80,
|
||||
},
|
||||
layout: 'horizontal',
|
||||
schema: useFormSchema(),
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
// 提交表单
|
||||
const data = (await formApi.getValues()) as DemoOrderApi.Order;
|
||||
try {
|
||||
await createDemoOrder(data);
|
||||
// 关闭并提示
|
||||
await modalApi.close();
|
||||
emit('success');
|
||||
ElMessage.success($t('ui.actionMessage.operationSuccess'));
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal class="w-2/5" :title="$t('ui.actionTitle.create', ['退款订单'])">
|
||||
<Form class="mx-4" />
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { DICT_TYPE } from '#/utils';
|
||||
|
||||
/** 新增/修改的表单 */
|
||||
export function useFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'id',
|
||||
dependencies: {
|
||||
triggerFields: [''],
|
||||
show: () => false,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'subject',
|
||||
label: '提现标题',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'InputNumber',
|
||||
fieldName: 'price',
|
||||
label: '提现金额',
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
min: 1,
|
||||
precision: 2,
|
||||
step: 0.01,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
fieldName: 'type',
|
||||
label: '提现类型',
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '支付宝', value: 1 },
|
||||
{ label: '微信余额', value: 2 },
|
||||
{ label: '钱包余额', value: 3 },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'userName',
|
||||
label: '收款人姓名',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'userAccount',
|
||||
label: '收款人账号',
|
||||
rules: 'required',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 列表的字段 */
|
||||
export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'id',
|
||||
title: '提现单编号',
|
||||
},
|
||||
{
|
||||
field: 'subject',
|
||||
title: '提现标题',
|
||||
},
|
||||
{
|
||||
field: 'type',
|
||||
title: '提现类型',
|
||||
slots: { default: 'type' },
|
||||
},
|
||||
{
|
||||
field: 'price',
|
||||
title: '提现金额',
|
||||
formatter: 'formatAmount2',
|
||||
},
|
||||
{
|
||||
field: 'userName',
|
||||
title: '收款人姓名',
|
||||
},
|
||||
{
|
||||
field: 'userAccount',
|
||||
title: '收款人账号',
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '提现状态',
|
||||
slots: { default: 'status' },
|
||||
},
|
||||
{
|
||||
field: 'payTransferId',
|
||||
title: '转账单号',
|
||||
},
|
||||
{
|
||||
field: 'transferChannelCode',
|
||||
title: '转账渠道',
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'transferTime',
|
||||
title: '转账时间',
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
field: 'transferErrorMsg',
|
||||
title: '转账失败原因',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 130,
|
||||
fixed: 'right',
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { DemoWithdrawApi } from '#/api/pay/demo/withdraw';
|
||||
|
||||
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
|
||||
import { erpPriceInputFormatter } from '@vben/utils';
|
||||
|
||||
import { ElMessage, ElLoading, ElTag } from 'element-plus';
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import {
|
||||
getDemoWithdrawPage,
|
||||
transferDemoWithdraw,
|
||||
} from '#/api/pay/demo/withdraw';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useGridColumns } from './data';
|
||||
import Form from './modules/form.vue';
|
||||
|
||||
const [FormModal, formModalApi] = useVbenModal({
|
||||
connectedComponent: Form,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
/** 刷新表格 */
|
||||
function onRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
/** 创建提现单 */
|
||||
function handleCreate() {
|
||||
formModalApi.setData(null).open();
|
||||
}
|
||||
|
||||
/** 处理转账操作 */
|
||||
async function handleTransfer(row: DemoWithdrawApi.Withdraw) {
|
||||
const loadingInstance = ElLoading.service({
|
||||
text: '转账中，请稍后...',
|
||||
fullscreen: true,
|
||||
});
|
||||
try {
|
||||
const payTransferId = await transferDemoWithdraw(row.id as number);
|
||||
ElMessage.success(`转账提交成功，转账单号：${payTransferId}`);
|
||||
onRefresh();
|
||||
} finally {
|
||||
loadingInstance.close();
|
||||
}
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns: useGridColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getDemoWithdrawPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: { code: 'query' },
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<DemoWithdrawApi.Withdraw>,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<template #doc>
|
||||
<DocAlert
|
||||
title="支付宝转账接入"
|
||||
url="https://doc.iocoder.cn/pay/alipay-transfer-demo/"
|
||||
/>
|
||||
<DocAlert
|
||||
title="微信转账接入"
|
||||
url="https://doc.iocoder.cn/pay/wx-transfer-demo/"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<FormModal @success="onRefresh" />
|
||||
<Grid table-title="示例提现单列表">
|
||||
<template #toolbar-tools>
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('ui.actionTitle.create', ['示例提现单']),
|
||||
type: 'primary',
|
||||
icon: ACTION_ICON.ADD,
|
||||
onClick: handleCreate,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
<template #type="{ row }">
|
||||
<ElTag v-if="row.type === 1">支付宝</ElTag>
|
||||
<ElTag v-else-if="row.type === 2">微信余额</ElTag>
|
||||
<ElTag v-else-if="row.type === 3">钱包余额</ElTag>
|
||||
</template>
|
||||
<template #price="{ row }">
|
||||
<span>￥{{ erpPriceInputFormatter(row.price) }}</span>
|
||||
</template>
|
||||
<template #status="{ row }">
|
||||
<ElTag v-if="row.status === 0 && !row.payTransferId" type="warning">
|
||||
等待转账
|
||||
</ElTag>
|
||||
<ElTag v-else-if="row.status === 0 && row.payTransferId" type="info">
|
||||
转账中
|
||||
</ElTag>
|
||||
<ElTag v-else-if="row.status === 10" type="success"> 转账成功 </ElTag>
|
||||
<ElTag v-else-if="row.status === 20" type="danger"> 转账失败 </ElTag>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: '发起转账',
|
||||
type: 'primary',
|
||||
link: true,
|
||||
ifShow: row.status === 0 && !row.payTransferId,
|
||||
onClick: handleTransfer.bind(null, row),
|
||||
},
|
||||
{
|
||||
label: '重新转账',
|
||||
type: 'primary',
|
||||
link: true,
|
||||
ifShow: row.status === 20,
|
||||
onClick: handleTransfer.bind(null, row),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<script lang="ts" setup>
|
||||
import type { DemoWithdrawApi } from '#/api/pay/demo/withdraw';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { createDemoWithdraw } from '#/api/pay/demo/withdraw';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useFormSchema } from '../data';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
formItemClass: 'col-span-2',
|
||||
labelWidth: 80,
|
||||
},
|
||||
layout: 'horizontal',
|
||||
schema: useFormSchema(),
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
// 提交表单
|
||||
const data = (await formApi.getValues()) as DemoWithdrawApi.Withdraw;
|
||||
try {
|
||||
await createDemoWithdraw(data);
|
||||
// 关闭并提示
|
||||
await modalApi.close();
|
||||
emit('success');
|
||||
ElMessage.success($t('ui.actionMessage.operationSuccess'));
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal class="w-2/5" :title="$t('ui.actionTitle.create', ['示例提现单'])">
|
||||
<Form class="mx-4" />
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { getAppList } from '#/api/pay/app';
|
||||
import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
|
||||
|
||||
/** 列表的搜索表单 */
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'appId',
|
||||
label: '应用编号',
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
api: async () => {
|
||||
const data = await getAppList();
|
||||
return data.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}));
|
||||
},
|
||||
autoSelect: 'first',
|
||||
placeholder: '请选择数据源',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'type',
|
||||
label: '通知类型',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
options: getDictOptions(DICT_TYPE.PAY_NOTIFY_TYPE, 'number'),
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'dataId',
|
||||
label: '关联编号',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
fieldName: 'status',
|
||||
label: '通知状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
options: getDictOptions(DICT_TYPE.PAY_NOTIFY_STATUS, 'number'),
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'merchantOrderId',
|
||||
label: '商户订单编号',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
fieldName: 'createTime',
|
||||
label: '创建时间',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
...getRangePickerDefaultProps(),
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 列表的字段 */
|
||||
export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'id',
|
||||
title: '任务编号',
|
||||
},
|
||||
{
|
||||
field: 'appName',
|
||||
title: '应用编号',
|
||||
},
|
||||
{
|
||||
field: 'merchantOrderId',
|
||||
title: '商户订单编号',
|
||||
},
|
||||
{
|
||||
field: 'type',
|
||||
title: '通知类型',
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.PAY_NOTIFY_TYPE },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'dataId',
|
||||
title: '关联编号',
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '通知状态',
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.PAY_NOTIFY_STATUS },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'lastExecuteTime',
|
||||
title: '最后通知时间',
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
field: 'nextNotifyTime',
|
||||
title: '下次通知时间',
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
field: 'notifyTimes',
|
||||
title: '通知次数',
|
||||
cellRender: {
|
||||
name: 'CellTag',
|
||||
props: {
|
||||
type: 'success',
|
||||
content: '{notifyTimes} / {maxNotifyTimes}',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 80,
|
||||
fixed: 'right',
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 详情列表的字段 */
|
||||
export const detailColumns = [
|
||||
{
|
||||
title: '日志编号',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
width: 120,
|
||||
ellipsis: false,
|
||||
},
|
||||
{
|
||||
title: '通知状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 120,
|
||||
ellipsis: false,
|
||||
},
|
||||
{
|
||||
title: '通知次数',
|
||||
dataIndex: 'notifyTimes',
|
||||
key: 'notifyTimes',
|
||||
width: 120,
|
||||
ellipsis: false,
|
||||
},
|
||||
{
|
||||
title: '通知时间',
|
||||
dataIndex: 'lastExecuteTime',
|
||||
key: 'lastExecuteTime',
|
||||
width: 120,
|
||||
ellipsis: false,
|
||||
},
|
||||
{
|
||||
title: '响应结果',
|
||||
dataIndex: 'response',
|
||||
key: 'response',
|
||||
width: 120,
|
||||
ellipsis: false,
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getNotifyTaskPage } from '#/api/pay/notify';
|
||||
|
||||
import { useGridColumns, useGridFormSchema } from './data';
|
||||
import Detail from './modules/detail.vue';
|
||||
|
||||
const [DetailModal, detailModalApi] = useVbenModal({
|
||||
connectedComponent: Detail,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
/** 刷新表格 */
|
||||
function onRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
/** 查看详情 */
|
||||
function handleDetail(row: any) {
|
||||
detailModalApi.setData(row).open();
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useGridFormSchema(),
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getNotifyTaskPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: { code: 'query' },
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<any>,
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<template #doc>
|
||||
<DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
|
||||
</template>
|
||||
|
||||
<DetailModal @success="onRefresh" />
|
||||
<Grid table-title="支付通知列表">
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('common.detail'),
|
||||
type: 'primary',
|
||||
link: true,
|
||||
icon: ACTION_ICON.VIEW,
|
||||
auth: ['pay:notify:query'],
|
||||
onClick: handleDetail.bind(null, row),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { formatDateTime } from '@vben/utils';
|
||||
|
||||
import { ElDescriptions, ElDescriptionsItem, ElDivider, ElTable, ElTag } from 'element-plus';
|
||||
|
||||
import { getNotifyTaskDetail } from '#/api/pay/notify';
|
||||
import { DictTag } from '#/components/dict-tag';
|
||||
import { DICT_TYPE } from '#/utils';
|
||||
|
||||
import { detailColumns } from '../data';
|
||||
|
||||
const formData = ref();
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onOpenChange(isOpen: boolean) {
|
||||
if (!isOpen) {
|
||||
formData.value = undefined;
|
||||
return;
|
||||
}
|
||||
// 加载数据
|
||||
const data = modalApi.getData();
|
||||
if (!data || !data.id) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
try {
|
||||
formData.value = await getNotifyTaskDetail(data.id);
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal
|
||||
title="通知详情"
|
||||
class="w-1/2"
|
||||
:show-cancel-button="false"
|
||||
:show-confirm-button="false"
|
||||
>
|
||||
<ElDescriptions border :column="2" class="mx-4">
|
||||
<ElDescriptionsItem label="商户订单编号">
|
||||
<ElTag>{{ formData?.merchantOrderId }}</ElTag>
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="通知状态">
|
||||
<DictTag
|
||||
:type="DICT_TYPE.PAY_NOTIFY_STATUS"
|
||||
:value="formData?.status"
|
||||
/>
|
||||
</ElDescriptionsItem>
|
||||
|
||||
<ElDescriptionsItem label="应用编号">
|
||||
{{ formData?.appId }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="应用名称">
|
||||
{{ formData?.appName }}
|
||||
</ElDescriptionsItem>
|
||||
|
||||
<ElDescriptionsItem label="关联编号">
|
||||
{{ formData?.dataId }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="通知类型">
|
||||
<DictTag :type="DICT_TYPE.PAY_NOTIFY_TYPE" :value="formData?.type" />
|
||||
</ElDescriptionsItem>
|
||||
|
||||
<ElDescriptionsItem label="通知次数">
|
||||
{{ formData?.notifyTimes }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="最大通知次数">
|
||||
{{ formData?.maxNotifyTimes }}
|
||||
</ElDescriptionsItem>
|
||||
|
||||
<ElDescriptionsItem label="最后通知时间">
|
||||
{{ formatDateTime(formData?.lastExecuteTime || '') }}
|
||||
</ElDescriptionsItem>
|
||||
|
||||
<ElDescriptionsItem label="创建时间">
|
||||
{{ formatDateTime(formData?.createTime || '') }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="更新时间">
|
||||
{{ formatDateTime(formData?.updateTime || '') }}
|
||||
</ElDescriptionsItem>
|
||||
</ElDescriptions>
|
||||
|
||||
<ElDivider />
|
||||
|
||||
<ElDescriptions border :column="1" class="mx-4">
|
||||
<ElDescriptionsItem label="回调日志">
|
||||
<ElTable
|
||||
v-if="formData"
|
||||
:data-source="formData.logs"
|
||||
:columns="detailColumns"
|
||||
/>
|
||||
</ElDescriptionsItem>
|
||||
</ElDescriptions>
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,255 @@
|
|||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { DescriptionItemSchema } from '#/components/description';
|
||||
import type { PayOrderApi } from '#/api/pay/order';
|
||||
|
||||
import { h } from 'vue';
|
||||
|
||||
import { erpPriceInputFormatter, formatDateTime } from '@vben/utils';
|
||||
|
||||
import { ElTag } from 'element-plus';
|
||||
|
||||
import { DictTag } from '#/components/dict-tag';
|
||||
import { DICT_TYPE, getDictOptions } from '#/utils';
|
||||
|
||||
/** 列表的搜索表单 */
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'appId',
|
||||
label: '应用编号',
|
||||
componentProps: {
|
||||
placeholder: '请输入应用编号',
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
fieldName: 'channelCode',
|
||||
label: '支付渠道',
|
||||
componentProps: {
|
||||
placeholder: '请选择开启状态',
|
||||
options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'),
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'merchantOrderId',
|
||||
label: '商户单号',
|
||||
componentProps: {
|
||||
placeholder: '请输入商户单号',
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'no',
|
||||
label: '支付单号',
|
||||
componentProps: {
|
||||
placeholder: '请输入支付单号',
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'channelOrderNo',
|
||||
label: '渠道单号',
|
||||
componentProps: {
|
||||
placeholder: '请输入渠道单号',
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
fieldName: 'status',
|
||||
label: '支付状态',
|
||||
componentProps: {
|
||||
placeholder: '请选择支付状态',
|
||||
options: getDictOptions(DICT_TYPE.PAY_ORDER_STATUS, 'number'),
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'RangePicker',
|
||||
fieldName: 'createTime',
|
||||
label: '创建时间',
|
||||
componentProps: {
|
||||
placeholder: ['开始日期', '结束日期'],
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 列表的字段 */
|
||||
export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
title: '编号',
|
||||
field: 'id',
|
||||
},
|
||||
{
|
||||
title: '支付金额',
|
||||
field: 'price',
|
||||
formatter: 'formatAmount2',
|
||||
},
|
||||
{
|
||||
title: '退款金额',
|
||||
field: 'refundPrice',
|
||||
formatter: 'formatAmount2',
|
||||
},
|
||||
{
|
||||
title: '手续金额',
|
||||
field: 'channelFeePrice',
|
||||
formatter: 'formatAmount2',
|
||||
},
|
||||
{
|
||||
title: '订单号',
|
||||
field: 'no',
|
||||
slots: {
|
||||
default: 'no',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '支付状态',
|
||||
field: 'status',
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.PAY_ORDER_STATUS },
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '支付渠道',
|
||||
field: 'channelCode',
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '支付时间',
|
||||
field: 'successTime',
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
title: '支付应用',
|
||||
field: 'appName',
|
||||
},
|
||||
{
|
||||
title: '商品标题',
|
||||
field: 'subject',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 100,
|
||||
fixed: 'right',
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 详情的字段 */
|
||||
export function useDetailSchema(): DescriptionItemSchema[] {
|
||||
return [
|
||||
{
|
||||
field: 'merchantOrderId',
|
||||
label: '商户单号',
|
||||
},
|
||||
{
|
||||
field: 'no',
|
||||
label: '支付单号',
|
||||
},
|
||||
{
|
||||
field: 'appId',
|
||||
label: '应用编号',
|
||||
},
|
||||
{
|
||||
field: 'appName',
|
||||
label: '应用名称',
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
label: '支付状态',
|
||||
content: (data: PayOrderApi.Order) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.PAY_ORDER_STATUS,
|
||||
value: data?.status,
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'price',
|
||||
label: '支付金额',
|
||||
content: (data: PayOrderApi.Order) => `￥${erpPriceInputFormatter(data?.price)}`,
|
||||
},
|
||||
{
|
||||
field: 'channelFeePrice',
|
||||
label: '手续费',
|
||||
content: (data: PayOrderApi.Order) => `￥${erpPriceInputFormatter(data?.channelFeePrice)}`,
|
||||
},
|
||||
{
|
||||
field: 'channelFeeRate',
|
||||
label: '手续费比例',
|
||||
content: (data: PayOrderApi.Order) => `${erpPriceInputFormatter(data?.channelFeeRate)}%`,
|
||||
},
|
||||
{
|
||||
field: 'successTime',
|
||||
label: '支付时间',
|
||||
content: (data: PayOrderApi.Order) => formatDateTime(data?.successTime) as string,
|
||||
},
|
||||
{
|
||||
field: 'expireTime',
|
||||
label: '失效时间',
|
||||
content: (data: PayOrderApi.Order) => formatDateTime(data?.expireTime) as string,
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
label: '创建时间',
|
||||
content: (data: PayOrderApi.Order) => formatDateTime(data?.createTime) as string,
|
||||
},
|
||||
{
|
||||
field: 'updateTime',
|
||||
label: '更新时间',
|
||||
content: (data: PayOrderApi.Order) => formatDateTime(data?.updateTime) as string,
|
||||
},
|
||||
{
|
||||
field: 'subject',
|
||||
label: '商品标题',
|
||||
},
|
||||
{
|
||||
field: 'body',
|
||||
label: '商品描述',
|
||||
},
|
||||
{
|
||||
field: 'channelCode',
|
||||
label: '支付渠道',
|
||||
content: (data: PayOrderApi.Order) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.PAY_CHANNEL_CODE,
|
||||
value: data?.channelCode,
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'userIp',
|
||||
label: '支付 IP',
|
||||
},
|
||||
{
|
||||
field: 'channelOrderNo',
|
||||
label: '渠道单号',
|
||||
content: (data: PayOrderApi.Order) =>
|
||||
h(ElTag, { color: 'green' }, () => data?.channelOrderNo || ''),
|
||||
},
|
||||
{
|
||||
field: 'channelUserId',
|
||||
label: '渠道用户',
|
||||
},
|
||||
{
|
||||
field: 'refundPrice',
|
||||
label: '退款金额',
|
||||
content: (data: PayOrderApi.Order) => `￥${erpPriceInputFormatter(data?.refundPrice)}`,
|
||||
},
|
||||
{
|
||||
field: 'notifyUrl',
|
||||
label: '通知 URL',
|
||||
},
|
||||
{
|
||||
field: 'channelNotifyData',
|
||||
label: '支付通道异步回调内容',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { PayOrderApi } from '#/api/pay/order';
|
||||
|
||||
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { ElTag } from 'element-plus';
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getOrderPage } from '#/api/pay/order';
|
||||
|
||||
import { useGridColumns, useGridFormSchema } from './data';
|
||||
import Detail from './modules/detail.vue';
|
||||
|
||||
const [DetailModal, detailModalApi] = useVbenModal({
|
||||
connectedComponent: Detail,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
/** 刷新表格 */
|
||||
function onRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
/** 查看详情 */
|
||||
function handleDetail(row: PayOrderApi.Order) {
|
||||
detailModalApi.setData(row).open();
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useGridFormSchema(),
|
||||
collapsed: false,
|
||||
},
|
||||
gridOptions: {
|
||||
cellConfig: {
|
||||
height: 80,
|
||||
},
|
||||
columns: useGridColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getOrderPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
isCurrent: true,
|
||||
isHover: true,
|
||||
resizable: true,
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: { code: 'query' },
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<PayOrderApi.Order>,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<template #doc>
|
||||
<DocAlert
|
||||
title="支付宝支付接入"
|
||||
url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
|
||||
/>
|
||||
<DocAlert
|
||||
title="微信公众号支付接入"
|
||||
url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/"
|
||||
/>
|
||||
<DocAlert
|
||||
title="微信小程序支付接入"
|
||||
url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
|
||||
/>
|
||||
</template>
|
||||
<DetailModal @success="onRefresh" />
|
||||
<Grid table-title="支付订单列表">
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('common.detail'),
|
||||
type: 'primary',
|
||||
link: true,
|
||||
icon: ACTION_ICON.VIEW,
|
||||
auth: ['pay:order:query'],
|
||||
onClick: handleDetail.bind(null, row),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
<template #no="{ row }">
|
||||
<div class="flex flex-col gap-1 text-left">
|
||||
<p class="text-sm">
|
||||
<ElTag size="small" type="primary"> 商户</ElTag> {{ row.merchantOrderId }}
|
||||
</p>
|
||||
<p class="text-sm" v-if="row.no">
|
||||
<ElTag size="small" type="warning">支付</ElTag> {{ row.no }}
|
||||
</p>
|
||||
<p class="text-sm" v-if="row.channelOrderNo">
|
||||
<ElTag size="small" type="success">渠道</ElTag>
|
||||
{{ row.channelOrderNo }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<script setup lang="ts">
|
||||
import type { PayOrderApi } from '#/api/pay/order';
|
||||
|
||||
import { ref, } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { getOrder } from '#/api/pay/order';
|
||||
import { useDescription } from '#/components/description';
|
||||
|
||||
import { useDetailSchema } from '../data';
|
||||
|
||||
const detailData = ref<PayOrderApi.Order>();
|
||||
|
||||
const [Description] = useDescription({
|
||||
componentProps: {
|
||||
border: false,
|
||||
column: 2,
|
||||
direction: 'horizontal',
|
||||
title: '',
|
||||
labelWidth: 200,
|
||||
extra: '',
|
||||
},
|
||||
schema: useDetailSchema(),
|
||||
});
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (!isOpen) {
|
||||
detailData.value = undefined;
|
||||
return;
|
||||
}
|
||||
// 加载数据
|
||||
const data = modalApi.getData<PayOrderApi.Order>();
|
||||
if (!data || !data.id) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
try {
|
||||
detailData.value = await getOrder(data.id);
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Modal
|
||||
title="订单详情"
|
||||
class="w-1/2"
|
||||
:show-cancel-button="false"
|
||||
:show-confirm-button="false"
|
||||
>
|
||||
<Description :data="detailData" />
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,254 @@
|
|||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { DescriptionItemSchema } from '#/components/description';
|
||||
|
||||
import { h } from 'vue';
|
||||
|
||||
import { fenToYuan, formatDateTime } from '@vben/utils';
|
||||
|
||||
import { ElTag } from 'element-plus';
|
||||
|
||||
import { getAppList } from '#/api/pay/app';
|
||||
import { DictTag } from '#/components/dict-tag';
|
||||
import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
|
||||
|
||||
/** 列表的搜索表单 */
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'appId',
|
||||
label: '应用编号',
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
api: async () => {
|
||||
const data = await getAppList();
|
||||
return data.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}));
|
||||
},
|
||||
autoSelect: 'first',
|
||||
placeholder: '请选择数据源',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'channelCode',
|
||||
label: '退款渠道',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'),
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'merchantOrderId',
|
||||
label: '商户支付单号',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
fieldName: 'merchantRefundId',
|
||||
label: '商户退款单号',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
fieldName: 'channelOrderNo',
|
||||
label: '渠道支付单号',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
fieldName: 'channelRefundNo',
|
||||
label: '渠道退款单号',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
fieldName: 'status',
|
||||
label: '退款状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
options: getDictOptions(DICT_TYPE.PAY_REFUND_STATUS, 'number'),
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'createTime',
|
||||
label: '创建时间',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
...getRangePickerDefaultProps(),
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 列表的字段 */
|
||||
export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'id',
|
||||
title: '编号',
|
||||
},
|
||||
{
|
||||
field: 'merchantRefundId',
|
||||
title: '退款订单号',
|
||||
},
|
||||
{
|
||||
field: 'channelRefundNo',
|
||||
title: '渠道退款单号',
|
||||
},
|
||||
{
|
||||
field: 'payPrice',
|
||||
title: '支付金额',
|
||||
formatter: 'formatAmount2',
|
||||
},
|
||||
{
|
||||
field: 'refundPrice',
|
||||
title: '退款金额',
|
||||
formatter: 'formatAmount2',
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '退款状态',
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.PAY_REFUND_STATUS },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '创建时间',
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 100,
|
||||
fixed: 'right',
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 详情页的字段 */
|
||||
export function useBaseDetailSchema(): DescriptionItemSchema[] {
|
||||
return [
|
||||
{
|
||||
field: 'merchantRefundId',
|
||||
label: '商户退款单号',
|
||||
content: (data) =>
|
||||
h(ElTag, {}, () => {
|
||||
return data?.merchantRefundId || '-';
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'channelRefundNo',
|
||||
label: '渠道退款单号',
|
||||
content: (data) =>
|
||||
h(ElTag, {}, () => {
|
||||
return data?.channelRefundNo || '-';
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'merchantOrderId',
|
||||
label: '商户支付单号',
|
||||
content: (data) =>
|
||||
h(ElTag, {}, () => {
|
||||
return data?.merchantOrderId || '-';
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'channelOrderNo',
|
||||
label: '渠道支付单号',
|
||||
content: (data) =>
|
||||
h(ElTag, {}, () => {
|
||||
return data?.channelOrderNo || '-';
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'appId',
|
||||
label: '应用编号',
|
||||
},
|
||||
{
|
||||
field: 'appName',
|
||||
label: '应用名称',
|
||||
},
|
||||
{
|
||||
field: 'payPrice',
|
||||
label: '支付金额',
|
||||
content: (data) =>
|
||||
h(ElTag, { color: 'success' }, () => {
|
||||
return fenToYuan(data.payPrice || 0);
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'refundPrice',
|
||||
label: '退款金额',
|
||||
content: (data) =>
|
||||
h(ElTag, { color: 'red' }, () => {
|
||||
return fenToYuan(data.refundPrice || 0);
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
label: '退款状态',
|
||||
content: (data) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.PAY_REFUND_STATUS,
|
||||
value: data?.status,
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'successTime',
|
||||
label: '退款时间',
|
||||
content: (data) => formatDateTime(data.successTime) as string,
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
label: '创建时间',
|
||||
content: (data) => formatDateTime(data.createTime) as string,
|
||||
},
|
||||
{
|
||||
field: 'updateTime',
|
||||
label: '更新时间',
|
||||
content: (data) => formatDateTime(data.updateTime) as string,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 详情页的字段 */
|
||||
export function useChannelDetailSchema(): DescriptionItemSchema[] {
|
||||
return [
|
||||
{
|
||||
field: 'channelCode',
|
||||
label: '退款渠道',
|
||||
content: (data) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.PAY_CHANNEL_CODE,
|
||||
value: data?.channelCode,
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'reason',
|
||||
label: '退款原因',
|
||||
},
|
||||
{
|
||||
field: 'userIp',
|
||||
label: '退款 IP',
|
||||
},
|
||||
{
|
||||
field: 'notifyUrl',
|
||||
label: '通知 URL',
|
||||
},
|
||||
{
|
||||
field: 'channelErrorCode',
|
||||
label: '渠道错误码',
|
||||
},
|
||||
{
|
||||
field: 'channelErrorMsg',
|
||||
label: '渠道错误码描述',
|
||||
},
|
||||
{
|
||||
field: 'channelNotifyData',
|
||||
label: '支付通道异步回调内容',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
|
||||
import { downloadFileFromBlobPart } from '@vben/utils';
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import * as RefundApi from '#/api/pay/refund';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useGridColumns, useGridFormSchema } from './data';
|
||||
import Detail from './modules/detail.vue';
|
||||
|
||||
const [RefundDetailModal, refundDetailModalApi] = useVbenModal({
|
||||
connectedComponent: Detail,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
/** 刷新表格 */
|
||||
function onRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
/** 导出表格 */
|
||||
async function handleExport() {
|
||||
const data = await RefundApi.exportRefund(await gridApi.formApi.getValues());
|
||||
downloadFileFromBlobPart({ fileName: '支付退款.xls', source: data });
|
||||
}
|
||||
|
||||
/** 查看详情 */
|
||||
function handleDetail(row: any) {
|
||||
refundDetailModalApi.setData(row).open();
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useGridFormSchema(),
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await RefundApi.getRefundPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: { code: 'query' },
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<any>,
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<template #doc>
|
||||
<DocAlert
|
||||
title="支付宝、微信退款接入"
|
||||
url="https://doc.iocoder.cn/pay/refund-demo/"
|
||||
/>
|
||||
</template>
|
||||
<RefundDetailModal @success="onRefresh" />
|
||||
<Grid table-title="支付退款列表">
|
||||
<template #toolbar-tools>
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('ui.actionTitle.export'),
|
||||
type: 'primary',
|
||||
icon: ACTION_ICON.DOWNLOAD,
|
||||
auth: ['pay:refund:query'],
|
||||
onClick: handleExport,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('common.detail'),
|
||||
type: 'primary',
|
||||
link: true,
|
||||
icon: ACTION_ICON.VIEW,
|
||||
auth: ['pay:refund:query'],
|
||||
onClick: handleDetail.bind(null, row),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<script lang="ts" setup>
|
||||
import type { PayRefundApi } from '#/api/pay/refund';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { ElDivider } from 'element-plus';
|
||||
|
||||
import { getRefund } from '#/api/pay/refund';
|
||||
import { useDescription } from '#/components/description';
|
||||
|
||||
import { useBaseDetailSchema, useChannelDetailSchema } from '../data';
|
||||
|
||||
const formData = ref<PayRefundApi.Refund>();
|
||||
|
||||
const [BaseDescription] = useDescription({
|
||||
componentProps: {
|
||||
border: false,
|
||||
column: 2,
|
||||
direction: 'horizontal',
|
||||
title: '',
|
||||
labelWidth: 200,
|
||||
extra: '',
|
||||
},
|
||||
schema: useBaseDetailSchema(),
|
||||
});
|
||||
|
||||
const [ChannelDescription] = useDescription({
|
||||
componentProps: {
|
||||
border: false,
|
||||
column: 2,
|
||||
direction: 'horizontal',
|
||||
title: '',
|
||||
labelWidth: 200,
|
||||
extra: '',
|
||||
},
|
||||
schema: useChannelDetailSchema(),
|
||||
});
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onOpenChange(isOpen: boolean) {
|
||||
if (!isOpen) {
|
||||
formData.value = undefined;
|
||||
return;
|
||||
}
|
||||
// 加载数据
|
||||
const data = modalApi.getData<PayRefundApi.Refund>();
|
||||
if (!data || !data.id) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
try {
|
||||
formData.value = await getRefund(data.id);
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal
|
||||
title="退款详情"
|
||||
class="w-1/2"
|
||||
:show-cancel-button="false"
|
||||
:show-confirm-button="false"
|
||||
>
|
||||
<BaseDescription :data="formData" />
|
||||
<ElDivider />
|
||||
<ChannelDescription :data="formData" />
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,274 @@
|
|||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { DescriptionItemSchema } from '#/components/description';
|
||||
|
||||
import { h } from 'vue';
|
||||
|
||||
import { erpPriceInputFormatter, formatDateTime } from '@vben/utils';
|
||||
|
||||
import { ElTag } from 'element-plus';
|
||||
|
||||
import { DictTag } from '#/components/dict-tag';
|
||||
import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
|
||||
|
||||
/** 列表的搜索表单 */
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'no',
|
||||
label: '转账单号',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请输入转账单号',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'channelCode',
|
||||
label: '转账渠道',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE),
|
||||
allowClear: true,
|
||||
placeholder: '请选择支付渠道',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'merchantTransferId',
|
||||
label: '商户单号',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请输入商户单号',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'type',
|
||||
label: '类型',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.PAY_TRANSFER_TYPE),
|
||||
allowClear: true,
|
||||
placeholder: '请选择类型',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'status',
|
||||
label: '转账状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.PAY_TRANSFER_STATUS),
|
||||
allowClear: true,
|
||||
placeholder: '请选择转账状态',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'userName',
|
||||
label: '收款人姓名',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请输入收款人姓名',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'accountNo',
|
||||
label: '收款人账号',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请输入收款人账号',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'channelTransferNo',
|
||||
label: '渠道单号',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请输入渠道单号',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'createTime',
|
||||
label: '创建时间',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
...getRangePickerDefaultProps(),
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 列表的字段 */
|
||||
export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'id',
|
||||
title: '编号',
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '创建时间',
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
field: 'appName',
|
||||
title: '支付应用',
|
||||
},
|
||||
{
|
||||
field: 'price',
|
||||
title: '转账金额',
|
||||
formatter: 'formatAmount2',
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '转账状态',
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.PAY_TRANSFER_STATUS },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'type',
|
||||
title: '类型',
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.PAY_TRANSFER_TYPE },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'channelCode',
|
||||
title: '支付渠道',
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'merchantTransferId',
|
||||
title: '商户单号',
|
||||
},
|
||||
{
|
||||
field: 'channelTransferNo',
|
||||
title: '渠道单号',
|
||||
},
|
||||
{
|
||||
field: 'userName',
|
||||
title: '收款人姓名',
|
||||
},
|
||||
{
|
||||
field: 'accountNo',
|
||||
title: '收款人账号',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 120,
|
||||
fixed: 'right',
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 详情的配置 */
|
||||
export function useDetailSchema(): DescriptionItemSchema[] {
|
||||
return [
|
||||
{
|
||||
field: 'id',
|
||||
label: '编号',
|
||||
},
|
||||
{
|
||||
field: 'merchantTransferId',
|
||||
label: '商户单号',
|
||||
content: (data) => {
|
||||
return h(ElTag, {
|
||||
color: 'blue',
|
||||
content: data?.merchantTransferId,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'no',
|
||||
label: '转账单号',
|
||||
content: (data) => {
|
||||
return h(ElTag, {
|
||||
color: 'blue',
|
||||
content: data?.no,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'appId',
|
||||
label: '应用编号',
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
label: '转账状态',
|
||||
content: (data) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.PAY_TRANSFER_STATUS,
|
||||
value: data?.status,
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'price',
|
||||
label: '转账金额',
|
||||
content: (data) => {
|
||||
return h(ElTag, {
|
||||
color: 'blue',
|
||||
content: `￥${erpPriceInputFormatter(data?.price)}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'successTime',
|
||||
label: '转账时间',
|
||||
content: (data) => formatDateTime(data?.successTime) as string,
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
label: '创建时间',
|
||||
content: (data) => formatDateTime(data?.createTime) as string,
|
||||
},
|
||||
{
|
||||
field: 'userName',
|
||||
label: '收款人姓名',
|
||||
},
|
||||
{
|
||||
field: 'userAccount',
|
||||
label: '收款人账号',
|
||||
},
|
||||
{
|
||||
field: 'channelCode',
|
||||
label: '支付渠道',
|
||||
content: (data) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.PAY_CHANNEL_CODE,
|
||||
value: data?.channelCode,
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'channelCode',
|
||||
label: '支付 IP',
|
||||
},
|
||||
{
|
||||
field: 'channelTransferNo',
|
||||
label: '渠道单号',
|
||||
content: (data) => {
|
||||
return h(ElTag, {
|
||||
color: 'blue',
|
||||
content: data?.channelTransferNo,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'notifyUrl',
|
||||
label: '通知 URL',
|
||||
},
|
||||
{
|
||||
field: 'channelNotifyData',
|
||||
label: '转账渠道通知内容',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { PayTransferApi } from '#/api/pay/transfer';
|
||||
|
||||
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
|
||||
import { downloadFileFromBlobPart } from '@vben/utils';
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { exportTransfer, getTransferPage } from '#/api/pay/transfer';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useGridColumns, useGridFormSchema } from './data';
|
||||
import Detail from './modules/detail.vue';
|
||||
|
||||
const [DetailModal, detailModalApi] = useVbenModal({
|
||||
connectedComponent: Detail,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
/** 刷新表格 */
|
||||
function onRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
/** 导出表格 */
|
||||
async function handleExport() {
|
||||
const data = await exportTransfer(await gridApi.formApi.getValues());
|
||||
downloadFileFromBlobPart({ fileName: '转账单.xls', source: data });
|
||||
}
|
||||
|
||||
/** 查看转账详情 */
|
||||
function handleDetail(row: PayTransferApi.Transfer) {
|
||||
detailModalApi.setData(row).open();
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useGridFormSchema(),
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getTransferPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: { code: 'query' },
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<PayTransferApi.Transfer>,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<template #doc>
|
||||
<DocAlert title="转账管理" url="https://doc.iocoder.cn/pay/transfer/" />
|
||||
</template>
|
||||
|
||||
<DetailModal @success="onRefresh" />
|
||||
<Grid table-title="转账单列表">
|
||||
<template #toolbar-tools>
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('ui.actionTitle.export'),
|
||||
type: 'primary',
|
||||
icon: ACTION_ICON.DOWNLOAD,
|
||||
auth: ['pay:transfer:export'],
|
||||
onClick: handleExport,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('common.detail'),
|
||||
type: 'primary',
|
||||
link: true,
|
||||
icon: ACTION_ICON.VIEW,
|
||||
auth: ['pay:transfer:query'],
|
||||
onClick: handleDetail.bind(null, row),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<script lang="ts" setup>
|
||||
import type { PayTransferApi } from '#/api/pay/transfer';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { getTransfer } from '#/api/pay/transfer';
|
||||
import { useDescription } from '#/components/description';
|
||||
|
||||
import { useDetailSchema } from '../data';
|
||||
|
||||
const formData = ref<PayTransferApi.Transfer>();
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onOpenChange(isOpen: boolean) {
|
||||
if (!isOpen) {
|
||||
formData.value = undefined;
|
||||
return;
|
||||
}
|
||||
// 加载数据
|
||||
const data = modalApi.getData<PayTransferApi.Transfer>();
|
||||
if (!data || !data.id) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
try {
|
||||
formData.value = await getTransfer(data.id);
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const [Description] = useDescription({
|
||||
componentProps: {
|
||||
title: '基本信息',
|
||||
border: false,
|
||||
column: 2,
|
||||
direction: 'horizontal',
|
||||
labelWidth: 200,
|
||||
extra: '',
|
||||
},
|
||||
schema: useDetailSchema(),
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal
|
||||
title="转账单详情"
|
||||
class="w-1/2"
|
||||
:show-cancel-button="false"
|
||||
:show-confirm-button="false"
|
||||
>
|
||||
<Description :data="formData" />
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
|
||||
|
||||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
|
||||
import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
|
||||
|
||||
/** 列表的搜索表单 */
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'userId',
|
||||
label: '用户编号',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
fieldName: 'userType',
|
||||
label: '用户类型',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'createTime',
|
||||
label: '创建时间',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
...getRangePickerDefaultProps(),
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 列表的字段 */
|
||||
export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
title: '编号',
|
||||
field: 'id',
|
||||
},
|
||||
{
|
||||
title: '用户编号',
|
||||
field: 'userId',
|
||||
},
|
||||
{
|
||||
title: '用户类型',
|
||||
field: 'userType',
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.USER_TYPE },
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '余额',
|
||||
field: 'balance',
|
||||
formatter: 'formatAmount2',
|
||||
},
|
||||
{
|
||||
title: '累计支出',
|
||||
field: 'totalExpense',
|
||||
formatter: 'formatAmount2',
|
||||
},
|
||||
{
|
||||
title: '累计充值',
|
||||
field: 'totalRecharge',
|
||||
formatter: 'formatAmount2',
|
||||
},
|
||||
{
|
||||
title: '冻结金额',
|
||||
field: 'freezePrice',
|
||||
formatter: 'formatAmount2',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
field: 'createTime',
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
field: 'actions',
|
||||
fixed: 'right',
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { PayWalletApi } from '#/api/pay/wallet/balance';
|
||||
|
||||
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getWalletPage } from '#/api/pay/wallet/balance';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useGridColumns, useGridFormSchema } from './data';
|
||||
import WalletDetail from './modules/detail.vue';
|
||||
|
||||
/** 刷新表格 */
|
||||
function onRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
const [WalletModal, walletModalApi] = useVbenModal({
|
||||
connectedComponent: WalletDetail,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
function handleDetail(row: Required<PayWalletApi.Wallet>) {
|
||||
walletModalApi.setData(row).open();
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useGridFormSchema(),
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getWalletPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: { code: 'query' },
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<PayWalletApi.Wallet>,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<template #doc>
|
||||
<DocAlert title="钱包余额" url="https://doc.iocoder.cn/pay/build/" />
|
||||
</template>
|
||||
|
||||
<WalletModal @reload="onRefresh" />
|
||||
|
||||
<Grid>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('common.detail'),
|
||||
type: 'primary',
|
||||
link: true,
|
||||
icon: ACTION_ICON.VIEW,
|
||||
onClick: handleDetail.bind(null, row),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<script setup lang="ts">
|
||||
import type { PayWalletApi } from '#/api/pay/wallet/balance';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import WalletTransactionList from '../../transaction/index.vue';
|
||||
|
||||
const walletId = ref(0);
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onOpenChange(isOpen: boolean) {
|
||||
if (!isOpen) {
|
||||
return;
|
||||
}
|
||||
// 加载数据
|
||||
const data = modalApi.getData<PayWalletApi.Wallet>();
|
||||
if (!data || !data.id) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
try {
|
||||
walletId.value = data.id;
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Modal
|
||||
title="消息详情"
|
||||
class="w-2/5"
|
||||
:show-cancel-button="false"
|
||||
:show-confirm-button="false"
|
||||
>
|
||||
<WalletTransactionList :wallet-id="walletId" />
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
|
||||
|
||||
/** 新增/修改的表单 */
|
||||
export function useFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'name',
|
||||
label: '套餐名',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'payPrice',
|
||||
label: '支付金额(元)',
|
||||
component: 'InputNumber',
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
min: 0,
|
||||
precision: 2,
|
||||
step: 0.01,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'bonusPrice',
|
||||
label: '赠送金额(元)',
|
||||
component: 'InputNumber',
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
min: 0,
|
||||
precision: 2,
|
||||
step: 0.01,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'status',
|
||||
label: '开启状态',
|
||||
component: 'RadioGroup',
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 列表的搜索表单 */
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'name',
|
||||
label: '套餐名称',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
fieldName: 'status',
|
||||
label: '状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'createTime',
|
||||
label: '创建时间',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
...getRangePickerDefaultProps(),
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 列表的字段 */
|
||||
export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'id',
|
||||
title: '编号',
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '套餐名称',
|
||||
},
|
||||
{
|
||||
field: 'payPrice',
|
||||
title: '支付金额',
|
||||
formatter: 'formatAmount2',
|
||||
},
|
||||
{
|
||||
field: 'bonusPrice',
|
||||
title: '赠送金额',
|
||||
formatter: 'formatAmount2',
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '状态',
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.COMMON_STATUS },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '创建时间',
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 130,
|
||||
fixed: 'right',
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { Page, useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { ElLoading, ElMessage } from 'element-plus';
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import {
|
||||
deletePackage,
|
||||
getPackagePage,
|
||||
} from '#/api/pay/wallet/rechargePackage';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useGridColumns, useGridFormSchema } from './data';
|
||||
import Form from './modules/form.vue';
|
||||
|
||||
const [FormModal, formModalApi] = useVbenModal({
|
||||
connectedComponent: Form,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
/** 刷新表格 */
|
||||
function onRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
/** 创建套餐 */
|
||||
function handleCreate() {
|
||||
formModalApi.setData(null).open();
|
||||
}
|
||||
|
||||
/** 编辑套餐 */
|
||||
function handleEdit(row: any) {
|
||||
formModalApi.setData(row).open();
|
||||
}
|
||||
|
||||
/** 删除套餐 */
|
||||
async function handleDelete(row: any) {
|
||||
const loadingInstance = ElLoading.service({
|
||||
text: $t('ui.actionMessage.deleting', [row.name]),
|
||||
fullscreen: true,
|
||||
});
|
||||
try {
|
||||
await deletePackage(row.id as number);
|
||||
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
|
||||
onRefresh();
|
||||
} finally {
|
||||
loadingInstance.close();
|
||||
}
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useGridFormSchema(),
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getPackagePage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: { code: 'query' },
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<any>,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<FormModal @success="onRefresh" />
|
||||
<Grid table-title="充值套餐列表">
|
||||
<template #toolbar-tools>
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('ui.actionTitle.create', ['充值套餐']),
|
||||
type: 'primary',
|
||||
icon: ACTION_ICON.ADD,
|
||||
auth: ['pay:wallet-recharge-package:create'],
|
||||
onClick: handleCreate,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('common.edit'),
|
||||
type: 'primary',
|
||||
link: true,
|
||||
icon: ACTION_ICON.EDIT,
|
||||
auth: ['pay:wallet-recharge-package:update'],
|
||||
onClick: handleEdit.bind(null, row),
|
||||
},
|
||||
{
|
||||
label: $t('common.delete'),
|
||||
type: 'danger',
|
||||
link: true,
|
||||
icon: ACTION_ICON.DELETE,
|
||||
auth: ['pay:wallet-recharge-package:delete'],
|
||||
popConfirm: {
|
||||
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
|
||||
confirm: handleDelete.bind(null, row),
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<script lang="ts" setup>
|
||||
import type { WalletRechargePackageApi } from '#/api/pay/wallet/rechargePackage';
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { fenToYuan, yuanToFen } from '@vben/utils';
|
||||
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import {
|
||||
createPackage,
|
||||
getPackage,
|
||||
updatePackage,
|
||||
} from '#/api/pay/wallet/rechargePackage';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useFormSchema } from '../data';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
const formData = ref<WalletRechargePackageApi.Package>();
|
||||
const getTitle = computed(() => {
|
||||
return formData.value?.id
|
||||
? $t('ui.actionTitle.edit', ['充值套餐'])
|
||||
: $t('ui.actionTitle.create', ['充值套餐']);
|
||||
});
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
formItemClass: 'col-span-2',
|
||||
labelWidth: 120,
|
||||
},
|
||||
layout: 'horizontal',
|
||||
schema: useFormSchema(),
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
// 提交表单
|
||||
const data =
|
||||
(await formApi.getValues()) as WalletRechargePackageApi.Package;
|
||||
try {
|
||||
// 转换金额单位
|
||||
data.payPrice = yuanToFen(data.payPrice);
|
||||
data.bonusPrice = yuanToFen(data.bonusPrice);
|
||||
await (formData.value?.id ? updatePackage(data) : createPackage(data));
|
||||
// 关闭并提示
|
||||
await modalApi.close();
|
||||
emit('success');
|
||||
ElMessage.success($t('ui.actionMessage.operationSuccess'));
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
async onOpenChange(isOpen: boolean) {
|
||||
if (!isOpen) {
|
||||
formData.value = undefined;
|
||||
return;
|
||||
}
|
||||
// 加载数据
|
||||
const data = modalApi.getData<WalletRechargePackageApi.Package>();
|
||||
if (!data || !data.id) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
try {
|
||||
formData.value = await getPackage(data.id as number);
|
||||
// 转换金额单位
|
||||
formData.value.payPrice = Number.parseFloat(
|
||||
fenToYuan(formData.value.payPrice),
|
||||
);
|
||||
formData.value.bonusPrice = Number.parseFloat(
|
||||
fenToYuan(formData.value.bonusPrice),
|
||||
);
|
||||
// 设置到 values
|
||||
await formApi.setValues(formData.value);
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal class="w-2/5" :title="getTitle">
|
||||
<Form class="mx-4" />
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
/** 列表的字段 */
|
||||
export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'id',
|
||||
title: '编号',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
field: 'walletId',
|
||||
title: '钱包编号',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'title',
|
||||
title: '关联业务标题',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
field: 'price',
|
||||
title: '交易金额',
|
||||
width: 120,
|
||||
formatter: ({ cellValue }) => `${cellValue / 100} 元`,
|
||||
},
|
||||
{
|
||||
field: 'balance',
|
||||
title: '钱包余额',
|
||||
width: 120,
|
||||
formatter: ({ cellValue }) => `${cellValue / 100} 元`,
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '交易时间',
|
||||
width: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getWallet } from '#/api/pay/wallet/balance';
|
||||
import { getTransactionPage } from '#/api/pay/wallet/transaction';
|
||||
|
||||
import { useGridColumns } from './data';
|
||||
|
||||
const props = defineProps({
|
||||
walletId: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: undefined,
|
||||
},
|
||||
userId: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
const [Grid] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns: useGridColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
let walletId = props.walletId;
|
||||
if (props.userId) {
|
||||
const wallet = await getWallet({ userId: props.userId });
|
||||
walletId = wallet.id;
|
||||
}
|
||||
return await getTransactionPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
walletId,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: { code: 'query' },
|
||||
},
|
||||
} as VxeTableGridOptions<any>,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<Grid table-title="钱包交易记录" />
|
||||
</Page>
|
||||
</template>
|
||||
Loading…
Reference in New Issue