yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

!118 支付模块已完成 

Merge pull request !118 from xingyu/dev
pull/119/MERGE
xingyu 2025-05-27 14:38:32 +00:00 committed by Gitee
parent ae4d0440a5 77ccb9a5d8
commit fe117c1f63
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
61 changed files with 4629 additions and 1185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.vscode/settings.json vendored
View File

@ -100,7 +100,7 @@
"**/.stylelintcache": true,
"**/.DS_Store": true,
"**/vite.config.mts.*": true,
"**/tea.yaml": true,
"**/tea.yaml": true
},
"files.watcherExclude": {
"**/.git/objects/**": true,
@ -110,7 +110,7 @@
"**/tmp/**": true,
"**/bower_components/**": true,
"**/dist/**": true,
"**/yarn.lock": true,
"**/yarn.lock": true
},
"typescript.tsserver.exclude": ["**/node_modules", "**/dist", "**/.turbo"],

18
apps/web-antd/src/adapter/vxe-table.ts
View File

@ -269,7 +269,7 @@ setupVbenVxeTable({
// vxeUI.formats.add
// add by 星语：数量格式化，例如说：金额
vxeUI.formats.add('formatNumber', {
cellFormatMethod({ cellValue }, digits = 2) {
tableCellFormatMethod({ cellValue }, digits = 2) {
if (cellValue === null || cellValue === undefined) {
return '';
}
@ -283,6 +283,22 @@ setupVbenVxeTable({
return cellValue.toFixed(digits);
},
});
vxeUI.formats.add('formatFraction', {
tableCellFormatMethod({ cellValue }) {
if (cellValue === null || cellValue === undefined) {
return '0.00';
}
if (isString(cellValue)) {
cellValue = Number.parseFloat(cellValue);
}
// 如果非 number，则直接返回空串
if (Number.isNaN(cellValue)) {
return '0.00';
}
return `${(cellValue / 100).toFixed(2)}元`;
},
});
},
useVbenForm,
});

13
apps/web-antd/src/api/pay/app/index.ts
View File

@ -23,10 +23,21 @@ export namespace PayAppApi {
id: number;
status: number;
}
export interface AppPageReqVO extends PageParam {
name?: string;
status?: number;
remark?: string;
payNotifyUrl?: string;
refundNotifyUrl?: string;
transferNotifyUrl?: string;
merchantName?: string;
createTime?: Date[];
}
}
/** 查询支付应用列表 */
export function getAppPage(params: PageParam) {
export function getAppPage(params: PayAppApi.AppPageReqVO) {
return requestClient.get<PageResult<PayAppApi.App>>('/pay/app/page', {
params,
});

38
apps/web-antd/src/api/pay/demo/index.ts
View File

@ -1,38 +0,0 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace PayDemoApi {
/** 示例订单信息 */
export interface DemoOrder {
spuId: number;
createTime: Date;
}
}
/** 创建示例订单 */
export function createDemoOrder(data: PayDemoApi.DemoOrder) {
return requestClient.post('/pay/demo-order/create', data);
}
/** 获得示例订单 */
export function getDemoOrder(id: number) {
return requestClient.get<PayDemoApi.DemoOrder>(
`/pay/demo-order/get?id=${id}`,
);
}
/** 获得示例订单分页 */
export function getDemoOrderPage(params: PageParam) {
return requestClient.get<PageResult<PayDemoApi.DemoOrder>>(
'/pay/demo-order/page',
{
params,
},
);
}
/** 退款示例订单 */
export function refundDemoOrder(id: number) {
return requestClient.put(`/pay/demo-order/refund?id=${id}`);
}

47
apps/web-antd/src/api/pay/demo/order/index.ts Normal file
View File

@ -0,0 +1,47 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace DemoOrderApi {
/** 示例订单信息 */
export interface Order {
id?: number;
userId?: number;
spuName?: string;
price?: number;
payStatus?: boolean;
payOrderId?: number;
payTime?: Date;
payChannelCode?: string;
payRefundId?: number;
refundPrice?: number;
refundTime?: Date;
spuId?: number;
createTime?: Date;
}
export interface OrderPageReqVO extends PageParam {
spuId?: number;
createTime?: Date[];
}
}
/** 创建示例订单 */
export function createDemoOrder(data: DemoOrderApi.Order) {
return requestClient.post('/pay/demo-order/create', data);
}
/** 获得示例订单分页 */
export function getDemoOrderPage(params: DemoOrderApi.OrderPageReqVO) {
return requestClient.get<PageResult<DemoOrderApi.Order>>(
'/pay/demo-order/page',
{
params,
},
);
}
/** 退款示例订单 */
export function refundDemoOrder(id: number) {
return requestClient.put(`/pay/demo-order/refund?id=${id}`);
}

29
apps/web-antd/src/api/pay/demo/transfer/index.ts
View File

@ -1,29 +0,0 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace PayDemoTransferApi {
/** 示例转账单信息 */
export interface DemoTransfer {
price: number;
type: number;
userName: string;
alipayLogonId: string;
openid: string;
}
}
/** 创建示例转账单 */
export function createDemoTransfer(data: PayDemoTransferApi.DemoTransfer) {
return requestClient.post('/pay/demo-transfer/create', data);
}
/** 获得示例转账单分页 */
export function getDemoTransferPage(params: PageParam) {
return requestClient.get<PageResult<PayDemoTransferApi.DemoTransfer>>(
'/pay/demo-transfer/page',
{
params,
},
);
}

40
apps/web-antd/src/api/pay/demo/withdraw/index.ts Normal file
View File

@ -0,0 +1,40 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace DemoWithdrawApi {
/** 示例提现单信息 */
export interface Withdraw {
id?: number;
subject: string;
price: number;
userName: string;
userAccount: string;
type: number;
status?: number;
payTransferId?: number;
transferChannelCode?: string;
transferTime?: Date;
transferErrorMsg?: string;
}
}
/** 查询示例提现单列表 */
export function getDemoWithdrawPage(params: PageParam) {
return requestClient.get<PageResult<DemoWithdrawApi.Withdraw>>(
'/pay/demo-withdraw/page',
{
params,
},
);
}
/** 创建示例提现单 */
export function createDemoWithdraw(data: DemoWithdrawApi.Withdraw) {
return requestClient.post('/pay/demo-withdraw/create', data);
}
/** 发起提现单转账 */
export function transferDemoWithdraw(id: number) {
return requestClient.post(`/pay/demo-withdraw/transfer?id=${id}`);
}

8
apps/web-antd/src/api/pay/transfer/index.ts
View File

@ -52,7 +52,9 @@ export function getTransfer(id: number) {
);
}
/** 创建转账单 */
export function createTransfer(data: PayTransferApi.Transfer) {
return requestClient.post('/pay/transfer/create', data);
/** 导出转账单 */
export function exportTransfer(params: any) {
return requestClient.download('/pay/transfer/export-excel', {
params,
});
}

180
apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
View File

@ -12,10 +12,11 @@ import { useVbenDrawer } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import {
Divider,
Col,
Input,
Radio,
RadioGroup,
Row,
TabPane,
Tabs,
Tooltip,
@ -91,8 +92,8 @@ const getDeptNames = (deptIds: number[]): string => {
// 使用 VbenDrawer
const [Drawer, drawerApi] = useVbenDrawer({
header: false,
closable: false,
header: true,
closable: true,
onCancel() {
drawerApi.close();
},
@ -142,28 +143,28 @@ defineExpose({ showStartUserNodeConfig });
</script>
<template>
<Drawer>
<div class="config-header">
<!-- TODO v-mountedFocus 自动聚集 需要迁移一下 -->
<Input
v-if="showInput"
type="text"
class="config-editable-input"
@blur="blurEvent()"
v-model:value="nodeName"
:placeholder="nodeName"
/>
<div v-else class="node-name">
{{ nodeName }}
<IconifyIcon
class="ml-1"
icon="ep:edit-pen"
:size="16"
@click="clickIcon()"
<template #title>
<div class="config-header">
<!-- TODO v-mountedFocus 自动聚集 需要迁移一下 -->
<Input
v-if="showInput"
type="text"
class="config-editable-input"
@blur="blurEvent()"
v-model:value="nodeName"
:placeholder="nodeName"
/>
<div v-else class="node-name">
{{ nodeName }}
<IconifyIcon
class="ml-1"
icon="ep:edit-pen"
:size="16"
@click="clickIcon()"
/>
</div>
</div>
<Divider />
</div>
</template>
<Tabs v-model:active-key="activeTabName" type="card">
<TabPane tab="权限" key="user">
<TypographyText
@ -212,69 +213,76 @@ defineExpose({ showStartUserNodeConfig });
key="fields"
v-if="formType === BpmModelFormType.NORMAL"
>
<div class="field-setting-pane">
<div class="field-setting-desc">字段权限</div>
<div class="field-permit-title">
<div class="setting-title-label first-title">字段名称</div>
<div class="other-titles">
<span
class="setting-title-label cursor-pointer"
@click="updatePermission('READ')"
>
只读
</span>
<span
class="setting-title-label cursor-pointer"
@click="updatePermission('WRITE')"
>
可编辑
</span>
<span
class="setting-title-label cursor-pointer"
@click="updatePermission('NONE')"
>
隐藏
</span>
</div>
</div>
<div
class="field-setting-item"
v-for="(item, index) in fieldsPermissionConfig"
:key="index"
>
<div class="field-setting-item-label">{{ item.title }}</div>
<RadioGroup
class="field-setting-item-group"
v-model:value="item.permission"
>
<div class="item-radio-wrap">
<Radio
:value="FieldPermissionType.READ"
size="large"
:label="FieldPermissionType.READ"
>
<span></span>
</Radio>
</div>
<div class="item-radio-wrap">
<Radio
:value="FieldPermissionType.WRITE"
size="large"
:label="FieldPermissionType.WRITE"
>
<span></span>
</Radio>
</div>
<div class="item-radio-wrap">
<Radio
:value="FieldPermissionType.NONE"
size="large"
:label="FieldPermissionType.NONE"
>
<span></span>
</Radio>
</div>
</RadioGroup>
<div class="p-1">
<div class="mb-4 text-[16px] font-bold">字段权限</div>
<!-- 表头 -->
<Row class="border border-gray-200 px-4 py-3">
<Col :span="8" class="font-bold">字段名称</Col>
<Col :span="16">
<Row>
<Col :span="8" class="flex items-center justify-center">
<span
class="cursor-pointer font-bold"
@click="updatePermission('READ')"
>
只读
</span>
</Col>
<Col :span="8" class="flex items-center justify-center">
<span
class="cursor-pointer font-bold"
@click="updatePermission('WRITE')"
>
可编辑
</span>
</Col>
<Col :span="8" class="flex items-center justify-center">
<span
class="cursor-pointer font-bold"
@click="updatePermission('NONE')"
>
隐藏
</span>
</Col>
</Row>
</Col>
</Row>
<!-- 表格内容 -->
<div v-for="(item, index) in fieldsPermissionConfig" :key="index">
<Row class="border border-t-0 border-gray-200 px-4 py-2">
<Col :span="8" class="flex items-center truncate">
{{ item.title }}
</Col>
<Col :span="16">
<RadioGroup v-model:value="item.permission" class="w-full">
<Row>
<Col :span="8" class="flex items-center justify-center">
<Radio
:value="FieldPermissionType.READ"
size="large"
:label="FieldPermissionType.READ"
/>
</Col>
<Col :span="8" class="flex items-center justify-center">
<Radio
:value="FieldPermissionType.WRITE"
size="large"
:label="FieldPermissionType.WRITE"
/>
</Col>
<Col :span="8" class="flex items-center justify-center">
<Radio
:value="FieldPermissionType.NONE"
size="large"
:label="FieldPermissionType.NONE"
/>
</Col>
</Row>
</RadioGroup>
</Col>
</Row>
</div>
</div>
</TabPane>

1252
apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue Normal file
View File

File diff suppressed because it is too large Load Diff

48
apps/web-antd/src/components/simple-process-design/components/nodes-config/utils.ts Normal file
View File

@ -0,0 +1,48 @@
import { APPROVE_TYPE, ApproveType, TimeUnitType } from '../../consts';
/** 获取条件节点默认的名称 */
export const getDefaultConditionNodeName = (
index: number,
defaultFlow: boolean | undefined,
): string => {
if (defaultFlow) {
return '其它情况';
}
return `条件${index + 1}`;
};
/** 获取包容分支条件节点默认的名称 */
export const getDefaultInclusiveConditionNodeName = (
index: number,
defaultFlow: boolean | undefined,
): string => {
if (defaultFlow) {
return '其它情况';
}
return `包容条件${index + 1}`;
};
/** 转换时间单位字符串为枚举值 */
export const convertTimeUnit = (strTimeUnit: string) => {
if (strTimeUnit === 'M') {
return TimeUnitType.MINUTE;
}
if (strTimeUnit === 'H') {
return TimeUnitType.HOUR;
}
if (strTimeUnit === 'D') {
return TimeUnitType.DAY;
}
return TimeUnitType.HOUR;
};
/** 根据审批类型获取对应的文本描述 */
export const getApproveTypeText = (approveType: ApproveType): string => {
let approveTypeText = '';
APPROVE_TYPE.forEach((item) => {
if (item.value === approveType) {
approveTypeText = item.label;
}
});
return approveTypeText;
};

138
apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue Normal file
View File

@ -0,0 +1,138 @@
<script setup lang="ts">
import type { Ref } from 'vue';
import type { SimpleFlowNode } from '../../consts';
import { inject, ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { Input } from 'ant-design-vue';
import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
import UserTaskNodeConfig from '../nodes-config/user-task-node-config.vue';
import NodeHandler from './node-handler.vue';
defineOptions({ name: 'UserTaskNode' });
const props = defineProps({
flowNode: {
type: Object as () => SimpleFlowNode,
required: true,
},
});
const emits = defineEmits<{
findParentNode: [nodeList: SimpleFlowNode[], nodeType: NodeType];
'update:flowNode': [node: SimpleFlowNode | undefined];
}>();
// 是否只读
const readonly = inject<Boolean>('readonly');
const tasks = inject<Ref<any[]>>('tasks', ref([]));
// 监控节点变化
const currentNode = useWatchNode(props);
// 节点名称编辑
const { showInput, blurEvent, clickTitle } = useNodeName2(
currentNode,
NodeType.START_USER_NODE,
);
const nodeSetting = ref();
const nodeClick = () => {
if (readonly) {
if (tasks && tasks.value) {
// 只读模式，弹窗显示任务信息 TODO 待实现
console.warn('只读模式，弹窗显示任务信息待实现');
}
} else {
// 编辑模式，打开节点配置、把当前节点传递给配置组件
nodeSetting.value.showUserTaskNodeConfig(currentNode.value);
}
};
const deleteNode = () => {
emits('update:flowNode', currentNode.value.childNode);
};
// 查找可以驳回用户节点
const findReturnTaskNodes = (
matchNodeList: SimpleFlowNode[], // 匹配的节点
) => {
// 从父节点查找
emits('findParentNode', matchNodeList, NodeType.USER_TASK_NODE);
};
// const selectTasks = ref<any[] | undefined>([]); // 选中的任务数组
</script>
<template>
<div class="node-wrapper">
<div class="node-container">
<div
class="node-box"
:class="[
{ 'node-config-error': !currentNode.showText },
`${useTaskStatusClass(currentNode?.activityStatus)}`,
]"
>
<div class="node-title-container">
<div
:class="`node-title-icon ${currentNode.type === NodeType.TRANSACTOR_NODE ? 'transactor-task' : 'user-task'}`"
>
<span
:class="`iconfont ${currentNode.type === NodeType.TRANSACTOR_NODE ? 'icon-transactor' : 'icon-approve'}`"
>
</span>
</div>
<Input
v-if="!readonly && showInput"
type="text"
class="editable-title-input"
@blur="blurEvent()"
v-model="currentNode.name"
:placeholder="currentNode.name"
/>
<div v-else class="node-title" @click="clickTitle">
{{ currentNode.name }}
</div>
</div>
<div class="node-content" @click="nodeClick">
<div
class="node-text"
:title="currentNode.showText"
v-if="currentNode.showText"
>
{{ currentNode.showText }}
</div>
<div class="node-text" v-else>
{{ NODE_DEFAULT_TEXT.get(currentNode.type) }}
</div>
<IconifyIcon icon="ep:arrow-right-bold" v-if="!readonly" />
</div>
<div v-if="!readonly" class="node-toolbar">
<div class="toolbar-icon">
<IconifyIcon
color="#0089ff"
icon="ep:circle-close-filled"
:size="18"
@click="deleteNode"
/>
</div>
</div>
</div>
<!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
<NodeHandler
v-if="currentNode"
v-model:child-node="currentNode.childNode"
:current-node="currentNode"
/>
</div>
</div>
<UserTaskNodeConfig
v-if="currentNode"
ref="nodeSetting"
:flow-node="currentNode"
@find-return-task-nodes="findReturnTaskNodes"
/>
<!-- TODO 审批记录 -->
</template>
<style lang="scss" scoped></style>

15
apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
View File

@ -5,6 +5,7 @@ import { NodeType } from '../consts';
import { useWatchNode } from '../helpers';
import EndEventNode from './nodes/end-event-node.vue';
import StartUserNode from './nodes/start-user-node.vue';
import UserTaskNode from './nodes/user-task-node.vue';
defineOptions({ name: 'ProcessNodeTree' });
const props = defineProps({
@ -29,16 +30,12 @@ const emits = defineEmits<{
const currentNode = useWatchNode(props);
// 用于删除节点
// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars
const handleModelValueUpdate = (updateValue: any) => {
emits('update:flowNode', updateValue);
};
// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars
const triggerFromParentNode = (
nodeList: SimpleFlowNode[],
nodeType: number,
) => {
const findParentNode = (nodeList: SimpleFlowNode[], nodeType: number) => {
emits('recursiveFindParentNode', nodeList, props.parentNode, nodeType);
};
@ -69,7 +66,7 @@ const recursiveFindParentNode = (
:flow-node="currentNode"
/>
<!-- 审批节点 -->
<!-- <UserTaskNode
<UserTaskNode
v-if="
currentNode &&
(currentNode.type === NodeType.USER_TASK_NODE ||
@ -77,8 +74,8 @@ const recursiveFindParentNode = (
"
:flow-node="currentNode"
@update:flow-node="handleModelValueUpdate"
@find:parent-node="findFromParentNode"
/> -->
@find-parent-node="findParentNode"
/>
<!-- 抄送节点 -->
<!-- <CopyTaskNode
v-if="currentNode && currentNode.type === NodeType.COPY_TASK_NODE"

76
apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
View File

@ -44,82 +44,6 @@
}
}
}
// 表单字段权限
.field-setting-pane {
display: flex;
flex-direction: column;
font-size: 14px;
.field-setting-desc {
padding-right: 8px;
margin-bottom: 16px;
font-size: 16px;
font-weight: 700;
}
.field-permit-title {
display: flex;
align-items: center;
justify-content: space-between;
height: 45px;
padding-left: 12px;
line-height: 45px;
background-color: #f8fafc0a;
border: 1px solid #1f38581a;
.first-title {
text-align: left !important;
}
.other-titles {
display: flex;
justify-content: space-between;
}
.setting-title-label {
display: inline-block;
width: 110px;
padding: 5px 0;
font-size: 13px;
font-weight: 700;
color: #000;
text-align: center;
}
}
.field-setting-item {
display: flex;
align-items: center;
justify-content: space-between;
height: 38px;
padding-left: 12px;
border: 1px solid #1f38581a;
border-top: 0;
.field-setting-item-label {
display: inline-block;
width: 110px;
min-height: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: text;
}
.field-setting-item-group {
display: flex;
justify-content: space-between;
.item-radio-wrap {
display: inline-block;
width: 110px;
text-align: center;
}
}
}
}
// 节点连线气泡卡片样式
.handler-item-wrapper {
display: flex;

27
apps/web-antd/src/components/upload/input-upload.vue
View File

@ -3,40 +3,51 @@ import type { InputProps, TextAreaProps } from 'ant-design-vue';
import type { FileUploadProps } from './typing';
import { computed, ref } from 'vue';
import { computed } from 'vue';
import { useVModel } from '@vueuse/core';
import { Col, Input, Row, Textarea } from 'ant-design-vue';
import FileUpload from './file-upload.vue';
const props = defineProps<{
defaultValue?: number | string;
fileUploadProps?: FileUploadProps;
inputProps?: InputProps;
inputType?: 'input' | 'textarea';
modelValue?: number | string;
textareaProps?: TextAreaProps;
}>();
const emit = defineEmits(['change', 'update:value']);
const emits = defineEmits<{
(e: 'change', payload: number | string): void;
(e: 'update:value', payload: number | string): void;
(e: 'update:modelValue', payload: number | string): void;
}>();
const value = ref('');
const modelValue = useVModel(props, 'modelValue', emits, {
defaultValue: props.defaultValue,
passive: true,
});
function handleReturnText(text: string) {
value.value = text;
emit('change', value.value);
emit('update:value', value.value);
modelValue.value = text;
emits('change', modelValue.value);
emits('update:value', modelValue.value);
emits('update:modelValue', modelValue.value);
}
const inputProps = computed(() => {
return {
...props.inputProps,
value: value.value,
value: modelValue.value,
};
});
const textareaProps = computed(() => {
return {
...props.textareaProps,
value: value.value,
value: modelValue.value,
};
});

4
apps/web-antd/src/components/user-select-modal/user-select-modal.vue
View File

@ -417,8 +417,8 @@ defineExpose({
<Spin :spinning="loading">
<Row :gutter="[16, 16]">
<Col :span="6">
<div class="h-[500px] overflow-auto rounded border border-gray-200">
<div class="border-b border-gray-200 p-2">
<div class="h-[500px] overflow-auto rounded border">
<div class="border-b p-2">
<Input
v-model:value="deptSearchKeys"
placeholder="搜索部门"

16
apps/web-antd/src/router/routes/modules/pay.ts Normal file
View File

@ -0,0 +1,16 @@
import type { RouteRecordRaw } from 'vue-router';
const routes: RouteRecordRaw[] = [
{
path: '/pay/cashier',
component: () => import('#/views/pay/cashier/index.vue'),
name: 'PayCashier',
meta: {
title: '收银台',
icon: 'lucide:badge-japanese-yen',
hideInMenu: true,
},
},
];
export default routes;

82
apps/web-antd/src/utils/formatNumber.ts Normal file
View File

@ -0,0 +1,82 @@
/**
* 将一个整数转换为分数保留两位小数
* @param num
*/
export function formatToFraction(num: number | string | undefined): string {
if (num === undefined) return '0.00';
const parsedNumber = typeof num === 'string' ? Number.parseFloat(num) : num;
return (parsedNumber / 100).toFixed(2);
}
/**
* 将一个数转换为 1.00 这样
* 数据呈现的时候使用
*
* @param num 整数
*/
export function floatToFixed2(num: number | string | undefined): string {
let str = '0.00';
if (num === undefined) {
return str;
}
const f = formatToFraction(num);
const decimalPart = f.toString().split('.')[1];
const len = decimalPart ? decimalPart.length : 0;
switch (len) {
case 0: {
str = `${f.toString()}.00`;
break;
}
case 1: {
str = `${f.toString()}0`;
break;
}
case 2: {
str = f.toString();
break;
}
}
return str;
}
/**
* 将一个分数转换为整数
* @param num
*/
export function convertToInteger(num: number | string | undefined): number {
if (num === undefined) return 0;
const parsedNumber = typeof num === 'string' ? Number.parseFloat(num) : num;
return Math.round(parsedNumber * 100);
}
/**
* 元转分
*/
export function yuanToFen(amount: number | string): number {
return convertToInteger(amount);
}
/**
* 分转元
*/
export function fenToYuan(price: number | string): string {
return formatToFraction(price);
}
/**
* 计算环比
*
* @param value 当前数值
* @param reference 对比数值
*/
export function calculateRelativeRate(
value?: number,
reference?: number,
): number {
// 防止除0
if (!reference || reference === 0) return 0;
return Number.parseFloat(
((100 * ((value || 0) - reference)) / reference).toFixed(0),
);
}

1
apps/web-antd/src/utils/index.ts
View File

@ -1,6 +1,7 @@
export * from './constants';
export * from './dict';
export * from './download';
export * from './formatNumber';
export * from './formatTime';
export * from './formCreate';
export * from './rangePickerProps';

2
apps/web-antd/src/views/bpm/model/index.vue
View File

@ -167,7 +167,7 @@ const handleCategorySortSubmit = async () => {
<CategoryFormModal @success="getList" />
<Card
:body-style="{ padding: '10px' }"
class="mb-4"
class="mb-4 h-[98%]"
v-spinning="modelListSpinning"
>
<div class="flex h-full items-center justify-between pl-5">

2
apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue
View File

@ -199,7 +199,7 @@ defineExpose({
<Button
v-if="row.formId > 0"
type="primary"
@click="showFormDetail(row)"`
@click="showFormDetail(row)"
size="small"
ghost
class="ml-1"

1
apps/web-antd/src/views/pay/app/data.ts
View File

@ -54,7 +54,6 @@ export function useGridColumns<T = PayAppApi.App>(
{
field: 'status',
title: '状态',
minWidth: 100,
align: 'center',
cellRender: {
attrs: { beforeChange: onStatusChange },

317
apps/web-antd/src/views/pay/app/index.vue
View File

@ -100,7 +100,7 @@ function isChannelExists(channels: string[], channelCode: string) {
}
async function openChannelForm(row: PayAppApi.App, payCode: string) {
channelModalApi.setData({ id: row.id || 0, payCode }).open();
channelModalApi.setData({ id: row.id, payCode }).open();
}
const [Grid, gridApi] = useVbenVxeGrid({
@ -134,13 +134,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
</script>
<template>
<Page :auto-content-height="true">
<Page auto-content-height>
<template #doc>
<DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
</template>
<AppModal @reload="onRefresh" />
<ChannelModal @reload="onRefresh" />
<AppModal @success="onRefresh" />
<ChannelModal @success="onRefresh" />
<Grid>
<template #toolbar-tools>
@ -185,27 +185,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
:actions="[
{
type: 'primary',
icon: 'lucide:check',
shape: 'circle',
ifShow: isChannelExists(
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_APP.code,
)
? 'lucide:check'
: 'lucide:x',
danger: !isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_APP.code,
),
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.ALIPAY_APP.code,
),
},
{
type: 'primary',
danger: true,
icon: 'lucide:x',
shape: 'circle',
ifShow: !isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_APP.code,
),
onClick: openChannelForm.bind(
null,
row,
@ -220,27 +210,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
:actions="[
{
type: 'primary',
icon: 'lucide:check',
shape: 'circle',
ifShow: isChannelExists(
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_PC.code,
)
? 'lucide:check'
: 'lucide:x',
danger: !isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_PC.code,
),
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.ALIPAY_PC.code,
),
},
{
type: 'primary',
danger: true,
icon: 'lucide:x',
shape: 'circle',
ifShow: !isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_PC.code,
),
onClick: openChannelForm.bind(
null,
row,
@ -255,27 +235,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
:actions="[
{
type: 'primary',
icon: 'lucide:check',
shape: 'circle',
ifShow: isChannelExists(
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_WAP.code,
)
? 'lucide:check'
: 'lucide:x',
danger: !isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_WAP.code,
),
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.ALIPAY_WAP.code,
),
},
{
type: 'primary',
danger: true,
icon: 'lucide:x',
shape: 'circle',
ifShow: !isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_WAP.code,
),
onClick: openChannelForm.bind(
null,
row,
@ -290,27 +260,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
:actions="[
{
type: 'primary',
icon: 'lucide:check',
shape: 'circle',
ifShow: isChannelExists(
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_QR.code,
)
? 'lucide:check'
: 'lucide:x',
danger: !isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_QR.code,
),
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.ALIPAY_QR.code,
),
},
{
type: 'primary',
danger: true,
icon: 'lucide:x',
shape: 'circle',
ifShow: !isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_QR.code,
),
onClick: openChannelForm.bind(
null,
row,
@ -325,27 +285,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
:actions="[
{
type: 'primary',
icon: 'lucide:check',
shape: 'circle',
ifShow: isChannelExists(
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_BAR.code,
)
? 'lucide:check'
: 'lucide:x',
danger: !isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_BAR.code,
),
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.ALIPAY_BAR.code,
),
},
{
type: 'primary',
danger: true,
icon: 'lucide:x',
shape: 'circle',
ifShow: !isChannelExists(
row.channelCodes,
PayChannelEnum.ALIPAY_BAR.code,
),
onClick: openChannelForm.bind(
null,
row,
@ -360,27 +310,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
:actions="[
{
type: 'primary',
icon: 'lucide:check',
shape: 'circle',
ifShow: isChannelExists(
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.WX_LITE.code,
)
? 'lucide:check'
: 'lucide:x',
danger: !isChannelExists(
row.channelCodes,
PayChannelEnum.WX_LITE.code,
),
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.WX_LITE.code,
),
},
{
type: 'primary',
danger: true,
icon: 'lucide:x',
shape: 'circle',
ifShow: !isChannelExists(
row.channelCodes,
PayChannelEnum.WX_LITE.code,
),
onClick: openChannelForm.bind(
null,
row,
@ -395,27 +335,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
:actions="[
{
type: 'primary',
icon: 'lucide:check',
shape: 'circle',
ifShow: isChannelExists(
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.WX_PUB.code,
)
? 'lucide:check'
: 'lucide:x',
danger: !isChannelExists(
row.channelCodes,
PayChannelEnum.WX_PUB.code,
),
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.WX_PUB.code,
),
},
{
type: 'primary',
danger: true,
icon: 'lucide:x',
shape: 'circle',
ifShow: !isChannelExists(
row.channelCodes,
PayChannelEnum.WX_PUB.code,
),
onClick: openChannelForm.bind(
null,
row,
@ -430,27 +360,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
:actions="[
{
type: 'primary',
icon: 'lucide:check',
shape: 'circle',
ifShow: isChannelExists(
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.WX_APP.code,
)
? 'lucide:check'
: 'lucide:x',
danger: !isChannelExists(
row.channelCodes,
PayChannelEnum.WX_APP.code,
),
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.WX_APP.code,
),
},
{
type: 'primary',
danger: true,
icon: 'lucide:x',
shape: 'circle',
ifShow: !isChannelExists(
row.channelCodes,
PayChannelEnum.WX_APP.code,
),
onClick: openChannelForm.bind(
null,
row,
@ -465,27 +385,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
:actions="[
{
type: 'primary',
icon: 'lucide:check',
shape: 'circle',
ifShow: isChannelExists(
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.WX_NATIVE.code,
)
? 'lucide:check'
: 'lucide:x',
danger: !isChannelExists(
row.channelCodes,
PayChannelEnum.WX_NATIVE.code,
),
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.WX_NATIVE.code,
),
},
{
type: 'primary',
danger: true,
icon: 'lucide:x',
shape: 'circle',
ifShow: !isChannelExists(
row.channelCodes,
PayChannelEnum.WX_NATIVE.code,
),
onClick: openChannelForm.bind(
null,
row,
@ -500,27 +410,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
:actions="[
{
type: 'primary',
icon: 'lucide:check',
shape: 'circle',
ifShow: isChannelExists(
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.WX_WAP.code,
)
? 'lucide:check'
: 'lucide:x',
danger: !isChannelExists(
row.channelCodes,
PayChannelEnum.WX_WAP.code,
),
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.WX_WAP.code,
),
},
{
type: 'primary',
danger: true,
icon: 'lucide:x',
shape: 'circle',
ifShow: !isChannelExists(
row.channelCodes,
PayChannelEnum.WX_WAP.code,
),
onClick: openChannelForm.bind(
null,
row,
@ -535,27 +435,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
:actions="[
{
type: 'primary',
icon: 'lucide:check',
shape: 'circle',
ifShow: isChannelExists(
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.WX_BAR.code,
)
? 'lucide:check'
: 'lucide:x',
danger: !isChannelExists(
row.channelCodes,
PayChannelEnum.WX_BAR.code,
),
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.WX_BAR.code,
),
},
{
type: 'primary',
danger: true,
icon: 'lucide:x',
shape: 'circle',
ifShow: !isChannelExists(
row.channelCodes,
PayChannelEnum.WX_BAR.code,
),
onClick: openChannelForm.bind(
null,
row,
@ -570,27 +460,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
:actions="[
{
type: 'primary',
icon: 'lucide:check',
shape: 'circle',
ifShow: isChannelExists(
icon: isChannelExists(
row.channelCodes,
PayChannelEnum.WALLET.code,
)
? 'lucide:check'
: 'lucide:x',
danger: !isChannelExists(
row.channelCodes,
PayChannelEnum.WALLET.code,
),
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.WALLET.code,
),
},
{
type: 'primary',
danger: true,
icon: 'lucide:x',
shape: 'circle',
ifShow: !isChannelExists(
row.channelCodes,
PayChannelEnum.WALLET.code,
),
onClick: openChannelForm.bind(
null,
row,
@ -605,27 +485,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
:actions="[
{
type: 'primary',
icon: 'lucide:check',
shape: 'circle',
ifShow: isChannelExists(
icon: isChannelExists(row.channelCodes, PayChannelEnum.MOCK.code)
? 'lucide:check'
: 'lucide:x',
danger: !isChannelExists(
row.channelCodes,
PayChannelEnum.MOCK.code,
),
onClick: openChannelForm.bind(
null,
row,
PayChannelEnum.MOCK.code,
),
},
{
type: 'primary',
danger: true,
icon: 'lucide:x',
shape: 'circle',
ifShow: !isChannelExists(
row.channelCodes,
PayChannelEnum.MOCK.code,
),
onClick: openChannelForm.bind(
null,
row,

157
apps/web-antd/src/views/pay/app/modules/channel-form.vue
View File

@ -6,21 +6,21 @@ import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { message, Row, Space, Textarea } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { createChannel, getChannel, updateChannel } from '#/api/pay/channel';
import { FileUpload } from '#/components/upload';
import { CommonStatusEnum } from '#/utils';
import { channelSchema } from './data';
const emit = defineEmits(['success']);
const formData = ref<PayChannelApi.Channel>();
const formData = ref<any>();
const formType = ref<string>('');
const title = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', '应用')
: $t('ui.actionTitle.create', '应用');
return formData.value?.id === 0
? $t('ui.actionTitle.create', '应用')
: $t('ui.actionTitle.edit', '应用');
});
const [Form, formApi] = useVbenForm({
@ -44,8 +44,17 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as PayChannelApi.Channel;
// 只保留表单中实际存在的字段，且值不为 undefined
const data2 = Object.fromEntries(
Object.entries(data).filter(([key, value]) => {
// 检查字段是否在表单中存在，且值不为 undefined
return key in data && value !== undefined;
}),
);
const data3 = { ...formData.value, ...data2 };
data3.config = JSON.stringify(data3.config);
try {
await (formData.value?.id ? updateChannel(data) : createChannel(data));
await (data3.id ? updateChannel(data3) : createChannel(data3));
// 关闭并提示
await modalApi.close();
emit('success');
@ -68,18 +77,80 @@ const [Modal, modalApi] = useVbenModal({
return;
}
modalApi.lock();
formType.value = payCode;
if (payCode.includes('alipay_')) {
formType.value = 'alipay';
formData.value = {
appId: id,
code: payCode,
status: CommonStatusEnum.ENABLE,
remark: '',
feeRate: null,
config: {
appId: '',
serverUrl: null,
signType: 'RSA2',
mode: null,
privateKey: '',
alipayPublicKey: '',
appCertContent: '',
alipayPublicCertContent: '',
rootCertContent: '',
encryptType: '',
encryptKey: '',
},
};
} else if (payCode.includes('mock')) {
formType.value = 'mock';
formData.value = {
appId: id,
code: payCode,
status: CommonStatusEnum.ENABLE,
remark: '',
feeRate: 0,
config: {
name: 'mock-conf',
},
};
} else if (payCode.includes('wallet')) {
formType.value = 'wallet';
formData.value = {
appId: id,
code: payCode,
status: CommonStatusEnum.ENABLE,
remark: '',
feeRate: 0,
config: {
name: 'mock-conf',
},
};
} else if (payCode.includes('wx')) {
formType.value = 'wx';
formData.value = {
appId: id,
code: payCode,
status: CommonStatusEnum.ENABLE,
feeRate: undefined,
remark: '',
config: {
appId: '',
mchId: '',
apiVersion: '',
mchKey: '',
keyContent: '',
privateKeyContent: '',
certSerialNo: '',
apiV3Key: '',
publicKeyContent: '',
publicKeyId: '',
},
};
}
try {
formData.value = await getChannel(id, payCode);
const res = await getChannel(id, payCode);
formData.value = {
...res,
config: {
...JSON.parse(res.config),
},
};
// 设置到 values
await formApi.setValues(formData.value);
} finally {
@ -90,66 +161,6 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal :close-on-click-modal="false" :title="title" class="w-[40%]">
<Form :schema="channelSchema(formType)">
<template #appCertContent="slotProps">
<Space style="width: 100%" direction="vertical">
<Row>
<Textarea
v-bind="slotProps"
:rows="8"
placeholder="请上传商户公钥应用证书"
/>
</Row>
<Row>
<FileUpload
:accept="['crt']"
@return-text="
(text: string) => {
slotProps.setValue(text);
}
"
/>
</Row>
</Space>
</template>
<template #alipayPublicCertContent="slotProps">
<Space style="width: 100%" direction="vertical">
<Row>
<Textarea
v-bind="slotProps"
:rows="8"
placeholder="请上传支付宝公钥证书"
/>
</Row>
<Row>
<FileUpload
:accept="['.crt']"
@return-text="
(text: string) => {
slotProps.setValue(text);
}
"
/>
</Row>
</Space>
</template>
<template #rootCertContent="slotProps">
<Space style="width: 100%" direction="vertical">
<Row>
<Textarea v-bind="slotProps" :rows="8" placeholder="请上传根证书" />
</Row>
<Row>
<FileUpload
:accept="['.crt']"
@return-text="
(text: string) => {
slotProps.setValue(text);
}
"
/>
</Row>
</Space>
</template>
</Form>
<Form :schema="channelSchema(formType)" />
</Modal>
</template>

965
apps/web-antd/src/views/pay/app/modules/data.ts
View File

@ -6,541 +6,486 @@ import { InputUpload } from '#/components/upload';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
export function channelSchema(formType: string): VbenFormSchema[] {
switch (formType) {
case 'alipay': {
return [
{
label: '商户编号',
fieldName: 'id',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
if (formType.includes('alipay_')) {
return [
{
label: '应用编号',
fieldName: 'appId',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
{
label: '应用编号',
fieldName: 'appId',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '渠道费率',
fieldName: 'feeRate',
component: 'InputNumber',
rules: 'required',
componentProps: {
placeholder: '请输入渠道费率',
addonAfter: '%',
},
{
label: '渠道编码',
fieldName: 'code',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
defaultValue: 0,
},
{
label: '开放平台 APPID',
fieldName: 'config.appId',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入开放平台 APPID',
},
{
label: '渠道费率',
fieldName: 'feeRate',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入渠道费率',
},
},
{
label: '渠道状态',
fieldName: 'status',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
{
label: '开放平台 APPID',
fieldName: 'config.appId',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入开放平台 APPID',
},
defaultValue: 0,
},
{
label: '网关地址',
fieldName: 'config.serverUrl',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: [
{
value: 'https://openapi.alipay.com/gateway.do',
label: '线上环境',
},
{
value: 'https://openapi-sandbox.dl.alipaydev.com/gateway.do',
label: '沙箱环境',
},
],
},
{
label: '渠道状态',
fieldName: 'status',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
defaultValue: 1,
},
{
label: '算法类型',
fieldName: 'config.signType',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: [
{
value: 'RSA2',
label: 'RSA2',
},
],
},
{
label: '网关地址',
fieldName: 'config.serverUrl',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: [
{
value: 'https://openapi.alipay.com/gateway.do',
label: '线上环境',
},
{
value: 'https://openapi-sandbox.dl.alipaydev.com/gateway.do',
label: '沙箱环境',
},
],
},
defaultValue: 'RSA2',
},
{
label: '公钥类型',
fieldName: 'config.mode',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: [
{
value: 1,
label: '公钥模式',
},
{
value: 2,
label: '证书模式',
},
],
},
{
label: '算法类型',
fieldName: 'config.signType',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: [
{
value: 'RSA2',
label: 'RSA2',
},
],
},
defaultValue: 'RSA2',
},
{
label: '应用私钥',
fieldName: 'config.privateKey',
component: 'Textarea',
rules: 'required',
componentProps: {
placeholder: '请输入应用私钥',
rows: 8,
},
{
label: '公钥类型',
fieldName: 'config.mode',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: [
{
value: 0,
label: '公钥模式',
},
{
value: 1,
label: '证书模式',
},
],
},
},
{
label: '支付宝公钥',
fieldName: 'config.alipayPublicKey',
component: 'Textarea',
rules: 'required',
componentProps: {
placeholder: '请输入支付宝公钥',
rows: 8,
},
{
label: '应用私钥',
fieldName: 'config.privateKey',
component: 'Textarea',
rules: 'required',
componentProps: {
placeholder: '请输入应用私钥',
dependencies: {
show(values) {
return values?.config?.mode === 1;
},
triggerFields: ['config.mode', 'mode', 'config'],
},
},
{
label: '商户公钥应用证书',
fieldName: 'config.appCertContent',
component: h(InputUpload, {
inputType: 'textarea',
textareaProps: { rows: 8, placeholder: '请上传商户公钥应用证书' },
fileUploadProps: {
accept: ['crt'],
},
}),
rules: 'required',
dependencies: {
show(values) {
return values?.config?.mode === 2;
},
triggerFields: ['config.mode', 'mode', 'config'],
},
},
{
label: '支付宝公钥证书',
fieldName: 'config.alipayPublicCertContent',
component: h(InputUpload, {
inputType: 'textarea',
textareaProps: { rows: 8, placeholder: '请上传支付宝公钥证书' },
fileUploadProps: {
accept: ['crt'],
},
}),
rules: 'required',
dependencies: {
show(values) {
return values?.config?.mode === 2;
},
triggerFields: ['config.mode', 'mode', 'config'],
},
},
{
label: '根证书',
fieldName: 'config.rootCertContent',
component: h(InputUpload, {
inputType: 'textarea',
textareaProps: { rows: 8, placeholder: '请上传根证书' },
fileUploadProps: {
accept: ['crt'],
},
}),
rules: 'required',
dependencies: {
show(values) {
return values?.config?.mode === 2;
},
triggerFields: ['config.mode', 'mode', 'config'],
},
},
{
label: '接口内容加密方式',
fieldName: 'config.encryptType',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: [
{
value: 'NONE',
label: '无加密',
},
{
value: 'AES',
label: 'AES',
},
],
},
defaultValue: 'NONE',
},
{
label: '接口内容加密密钥',
fieldName: 'config.encryptKey',
component: 'Input',
rules: 'required',
dependencies: {
show(values) {
return values?.config?.encryptType === 'AES';
},
triggerFields: ['config.encryptType', 'encryptType', 'config'],
},
},
{
label: '备注',
fieldName: 'remark',
component: 'Input',
componentProps: {
placeholder: '请输入备注',
},
},
];
} else if (formType.includes('mock') || formType.includes('wallet')) {
return [
{
label: '应用编号',
fieldName: 'appId',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '渠道状态',
fieldName: 'status',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
defaultValue: 0,
},
{
label: '渠道编码',
fieldName: 'code',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '渠道费率',
fieldName: 'feeRate',
component: 'InputNumber',
rules: 'required',
componentProps: {
placeholder: '请输入渠道费率',
addonAfter: '%',
},
defaultValue: 0,
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '备注',
fieldName: 'remark',
component: 'Input',
componentProps: {
placeholder: '请输入备注',
},
},
];
} else if (formType.includes('wx')) {
return [
{
label: '应用编号',
fieldName: 'appId',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '渠道编码',
fieldName: 'code',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '渠道费率',
fieldName: 'feeRate',
component: 'InputNumber',
rules: 'required',
componentProps: {
placeholder: '请输入渠道费率',
addonAfter: '%',
},
defaultValue: 0,
},
{
label: '微信 APPID',
fieldName: 'config.appId',
help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/extend/merchant_appid/mapay_platform/account_manage]查看 APPID',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入微信 APPID',
},
},
{
label: '商户号',
fieldName: 'config.mchId',
help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/extend/pay_setting]查看商户号',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入商户号',
},
},
{
label: '渠道状态',
fieldName: 'status',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
defaultValue: 0,
},
{
label: 'API 版本',
fieldName: 'config.apiVersion',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: [
{
label: 'v2',
value: 'v2',
},
{
label: 'v3',
value: 'v3',
},
],
},
},
{
label: '商户密钥',
fieldName: 'config.mchKey',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入商户密钥',
},
dependencies: {
show(values) {
return values?.config?.apiVersion === 'v2';
},
triggerFields: ['config.mode', 'mode', 'config'],
},
},
{
label: 'apiclient_cert.p12 证书',
fieldName: 'config.keyContent',
component: h(InputUpload, {
inputType: 'textarea',
textareaProps: {
rows: 8,
placeholder: '请上传 apiclient_cert.p12 证书',
},
dependencies: {
show(values) {
return values.config.mode !== undefined;
},
triggerFields: ['config'],
fileUploadProps: {
accept: ['p12'],
},
}),
rules: 'required',
dependencies: {
show(values) {
return values?.config?.apiVersion === 'v2';
},
triggerFields: ['config.mode', 'mode', 'config'],
},
{
label: '支付宝公钥',
fieldName: 'config.alipayPublicKey',
component: 'Textarea',
rules: 'required',
componentProps: {
placeholder: '请输入支付宝公钥',
},
{
label: 'API V3 密钥',
fieldName: 'config.apiV3Key',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入 API V3 密钥',
},
dependencies: {
show(values) {
return values?.config?.apiVersion === 'v3';
},
triggerFields: ['config.mode', 'mode', 'config'],
},
},
{
label: 'apiclient_key.pem 证书',
fieldName: 'config.privateKeyContent',
component: h(InputUpload, {
inputType: 'textarea',
textareaProps: {
rows: 8,
placeholder: '请上传 apiclient_key.pem 证书',
},
dependencies: {
show(values) {
return values?.config?.mode === 0;
},
triggerFields: ['config.mode', 'mode', 'config'],
fileUploadProps: {
accept: ['pem'],
},
}),
rules: 'required',
dependencies: {
show(values) {
return values?.config?.apiVersion === 'v3';
},
triggerFields: ['config.mode', 'mode', 'config'],
},
{
label: '商户公钥应用证书',
fieldName: 'config.appCertContent',
component: h(InputUpload, {
inputType: 'textarea',
textareaProps: { rows: 8, placeholder: '请上传商户公钥应用证书' },
fileUploadProps: {
accept: ['crt'],
},
}),
rules: 'required',
dependencies: {
show(values) {
return values?.config?.mode === 1;
},
triggerFields: ['config.mode', 'mode', 'config'],
},
},
{
label: '证书序列号',
fieldName: 'config.certSerialNo',
component: 'Input',
help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/core/cert/api_cert#/api-cert-manage]查看证书序列号',
rules: 'required',
componentProps: {
placeholder: '请输入证书序列号',
},
{
label: '支付宝公钥证书',
fieldName: 'config.alipayPublicCertContent',
component: h(InputUpload, {
inputType: 'textarea',
textareaProps: { rows: 8, placeholder: '请上传支付宝公钥证书' },
fileUploadProps: {
accept: ['crt'],
},
}),
rules: 'required',
dependencies: {
show(values) {
return values?.config?.mode === 1;
},
triggerFields: ['config.mode', 'mode', 'config'],
dependencies: {
show(values) {
return values?.config?.apiVersion === 'v3';
},
triggerFields: ['config.mode', 'mode', 'config'],
},
{
label: '根证书',
fieldName: 'config.rootCertContent',
component: h(InputUpload, {
inputType: 'textarea',
textareaProps: { rows: 8, placeholder: '请上传根证书' },
fileUploadProps: {
accept: ['crt'],
},
}),
rules: 'required',
dependencies: {
show(values) {
return values?.config?.mode === 1;
},
triggerFields: ['config.mode', 'mode', 'config'],
},
{
label: 'public_key.pem 证书',
fieldName: 'config.publicKeyContent',
component: h(InputUpload, {
inputType: 'textarea',
textareaProps: {
rows: 8,
placeholder: '请上传 public_key.pem 证书',
},
fileUploadProps: {
accept: ['pem'],
},
}),
rules: 'required',
dependencies: {
show(values) {
return values?.config?.apiVersion === 'v3';
},
triggerFields: ['config.mode', 'mode', 'config'],
},
{
label: '接口内容加密方式',
fieldName: 'config.encryptType',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: [
{
value: 'NONE',
label: '无加密',
},
{
value: 'AES',
label: 'AES',
},
],
},
defaultValue: 'NONE',
},
{
label: '公钥 ID',
fieldName: 'config.publicKeyId',
component: 'Input',
help: '微信支付公钥产品简介及使用说明[https://pay.weixin.qq.com/doc/v3/merchant/4012153196]',
rules: 'required',
componentProps: {
placeholder: '请输入公钥 ID',
},
{
label: '备注',
fieldName: 'remark',
component: 'Textarea',
componentProps: {
rows: 3,
placeholder: '请输入备注',
dependencies: {
show(values) {
return values?.config?.apiVersion === 'v3';
},
triggerFields: ['config.mode', 'mode', 'config'],
},
];
}
case 'mock': {
return [
{
label: '商户编号',
fieldName: 'id',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '备注',
fieldName: 'remark',
component: 'Input',
componentProps: {
placeholder: '请输入备注',
},
{
label: '应用编号',
fieldName: 'appId',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '渠道状态',
fieldName: 'status',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
defaultValue: 1,
},
{
label: '渠道编码',
fieldName: 'code',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '渠道费率',
fieldName: 'feeRate',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入渠道费率',
},
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '备注',
fieldName: 'remark',
component: 'Textarea',
componentProps: {
rows: 3,
placeholder: '请输入备注',
},
},
];
}
case 'wallet': {
return [
{
label: '商户编号',
fieldName: 'id',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '应用编号',
fieldName: 'appId',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '渠道状态',
fieldName: 'status',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
defaultValue: 1,
},
{
label: '渠道编码',
fieldName: 'code',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '渠道费率',
fieldName: 'feeRate',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入渠道费率',
},
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '备注',
fieldName: 'remark',
component: 'Textarea',
componentProps: {
rows: 3,
placeholder: '请输入备注',
},
},
];
}
case 'wx': {
return [
{
label: '商户编号',
fieldName: 'id',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '应用编号',
fieldName: 'appId',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '渠道编码',
fieldName: 'code',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '渠道费率',
fieldName: 'feeRate',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入渠道费率',
},
},
{
label: '微信 APPID',
fieldName: 'config.appId',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入微信 APPID',
},
},
{
label: '商户号',
fieldName: 'config.mchId',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入商户号',
},
},
{
label: '渠道状态',
fieldName: 'status',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
defaultValue: 1,
},
{
label: 'API 版本',
fieldName: 'config.apiVersion',
component: 'RadioGroup',
rules: 'required',
componentProps: {
options: [
{
label: 'v2',
value: 'v2',
},
{
label: 'v3',
value: 'v3',
},
],
},
},
{
label: '商户密钥',
fieldName: 'config.mchKey',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入商户密钥',
},
dependencies: {
show(values) {
return values?.config?.apiVersion === 'v2';
},
triggerFields: ['config.mode', 'mode', 'config'],
},
},
{
label: 'apiclient_cert.p12 证书',
fieldName: 'config.keyContent',
component: h(InputUpload, {
inputType: 'textarea',
textareaProps: {
rows: 8,
placeholder: '请上传 apiclient_cert.p12 证书',
},
fileUploadProps: {
accept: ['p12 '],
},
}),
rules: 'required',
dependencies: {
show(values) {
return values?.config?.apiVersion === 'v2';
},
triggerFields: ['config.mode', 'mode', 'config'],
},
},
{
label: 'API V3 密钥',
fieldName: 'config.apiV3Key',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入 API V3 密钥',
},
dependencies: {
show(values) {
return values?.config?.apiVersion === 'v3';
},
triggerFields: ['config.mode', 'mode', 'config'],
},
},
{
label: 'apiclient_key.pem 证书',
fieldName: 'config.privateKeyContent',
component: h(InputUpload, {
inputType: 'textarea',
textareaProps: {
rows: 8,
placeholder: '请上传 apiclient_key.pem 证书',
},
fileUploadProps: {
accept: ['pem'],
},
}),
rules: 'required',
dependencies: {
show(values) {
return values?.config?.apiVersion === 'v3';
},
triggerFields: ['config.mode', 'mode', 'config'],
},
},
{
label: '证书序列号',
fieldName: 'config.certSerialNo',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入证书序列号',
},
dependencies: {
show(values) {
return values?.config?.apiVersion === 'v3';
},
triggerFields: ['config.mode', 'mode', 'config'],
},
},
{
label: '备注',
fieldName: 'remark',
component: 'Textarea',
componentProps: {
rows: 3,
placeholder: '请输入备注',
},
},
];
}
default: {
return [];
}
},
];
} else {
return [];
}
}

81
apps/web-antd/src/views/pay/cashier/data.ts Normal file
View File

@ -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',
},
];

390
apps/web-antd/src/views/pay/cashier/index.vue Normal file
View File

@ -0,0 +1,390 @@
<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 { formatDate } from '@vben/utils';
import {
Button,
Card,
Descriptions,
Input,
message,
QRCode,
} from 'ant-design-vue';
import { getOrder, submitOrder } from '#/api/pay/order';
import {
fenToYuan,
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) {
message.error('未传递支付单号，无法查看对应的支付信息');
goReturnUrl('cancel');
return;
}
const res = await getOrder(id.value);
// 1.2 无法查询到支付信息
if (!res) {
message.error('支付订单不存在，请检查！');
goReturnUrl('cancel');
return;
}
// 1.3 如果已支付、或者已关闭，则直接跳转
if (res.status === PayOrderStatusEnum.SUCCESS.status) {
message.success('支付成功');
goReturnUrl('success');
return;
} else if (res.status === PayOrderStatusEnum.CLOSED.status) {
message.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: {
message.error('微信小程序：不支持 PC 网站');
break;
}
case PayChannelEnum.WX_PUB.code: {
message.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();
message.success('支付成功！');
goReturnUrl('success');
return;
}
// 展示对应的界面
switch (data.displayMode) {
case PayDisplayModeEnum.APP.mode: {
displayApp(channelCode);
break;
}
case PayDisplayModeEnum.QR_CODE.mode: {
displayQrCode(channelCode, data);
break;
}
case PayDisplayModeEnum.URL.mode: {
displayUrl(data);
break;
}
// No default
}
// 打开轮询任务
createQueryInterval();
} finally {
// message.success('支付成功！')
}
}
/** 构建提交支付的额外参数 */
function buildSubmitParam(channelCode: string) {
// ① 支付宝 BarCode 支付时，需要传递 authCode 条形码
if (channelCode === PayChannelEnum.ALIPAY_BAR.code) {
return {
channelExtras: {
auth_code: barCode.value.value,
},
};
}
// ② 微信 BarCode 支付时，需要传递 authCode 条形码
if (channelCode === PayChannelEnum.WX_BAR.code) {
return {
channelExtras: {
authCode: barCode.value.value,
},
};
}
return {};
}
/** 提交支付后，URL 的展示形式 */
function displayUrl(data: any) {
location.href = data.displayContent;
}
/** 提交支付后（扫码支付） */
function displayQrCode(channelCode: string, data: any) {
title.value = '请使用手机浏览器“扫一扫”';
if (channelCode === PayChannelEnum.ALIPAY_WAP.code) {
// 考虑到 WAP 测试，所以引导手机浏览器搞
} else if (channelCode.indexOf('alipay_') === 0) {
title.value = '请使用支付宝“扫一扫”扫码支付';
} else if (channelCode.indexOf('wx_') === 0) {
title.value = '请使用微信“扫一扫”扫码支付';
}
qrCode.value = {
url: data.displayContent,
visible: true,
};
}
/** 提交支付后（App） */
function displayApp(channelCode: string) {
if (channelCode === PayChannelEnum.ALIPAY_APP.code) {
message.error('支付宝 App 支付：无法在网页支付！');
}
if (channelCode === PayChannelEnum.WX_APP.code) {
message.error('微信 App 支付：无法在网页支付！');
}
}
/** 轮询查询任务 */
function createQueryInterval() {
if (interval.value) {
return;
}
interval.value = setInterval(async () => {
const data = await getOrder(id.value);
// 已支付
if (data.status === PayOrderStatusEnum.SUCCESS.status) {
clearQueryInterval();
message.success('支付成功！');
goReturnUrl('success');
}
// 已取消
if (data.status === PayOrderStatusEnum.CLOSED.status) {
clearQueryInterval();
message.error('支付已关闭！');
goReturnUrl('close');
}
}, 1000 * 2);
}
/** 清空查询任务 */
function clearQueryInterval() {
// 清空数据
qrCode.value = {
url: '',
visible: false,
};
barCode.value = {
channelCode: '',
value: '',
visible: false,
};
// 清空任务
clearInterval(interval.value);
interval.value = undefined;
}
/**
* 回到业务的 URL
*
* @param payResult 支付结果
* ① success：支付成功
* ② cancel：取消支付
* ③ close：支付已关闭
*/
function goReturnUrl(payResult: string) {
// 清理任务
clearQueryInterval();
// 未配置的情况下，只能关闭
if (!returnUrl.value) {
closeCurrentTab();
return;
}
const url = returnUrl.value.includes('?')
? `${returnUrl.value}&payResult=${payResult}`
: `${returnUrl.value}?payResult=${payResult}`;
// 如果有配置，且是 http 开头，则浏览器跳转
if (returnUrl.value.indexOf('http') === 0) {
location.href = url;
} else {
closeCurrentTab();
push({ path: url });
}
}
onMounted(async () => {
await getDetail();
});
</script>
<template>
<Page auto-content-height>
<Card class="mt-4">
<Descriptions :column="3" :title="payOrder?.subject ?? '商品详情'">
<Descriptions.Item label="支付单号">
{{ payOrder?.id }}
</Descriptions.Item>
<Descriptions.Item label="商品标题">
{{ payOrder?.subject }}
</Descriptions.Item>
<Descriptions.Item label="商品内容">
{{ payOrder?.body }}
</Descriptions.Item>
<Descriptions.Item label="支付金额">
{{ `￥${fenToYuan(payOrder?.price || 0)}` }}
</Descriptions.Item>
<Descriptions.Item label="创建时间">
{{ formatDate(payOrder?.createTime) }}
</Descriptions.Item>
<Descriptions.Item label="过期时间">
{{ formatDate(payOrder?.expireTime) }}
</Descriptions.Item>
</Descriptions>
</Card>
<Card 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>
</Card>
<Card 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>
</Card>
<Card 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>
</Card>
<Modal class="w-[40%]" :title="title">
<QRCode v-if="qrCode.visible" :value="qrCode.url" />
<Input
v-if="barCode.visible"
v-model:value="barCode.value"
placeholder="请输入条形码"
required
/>
<div class="text-right" v-if="barCode.visible">
或使用
<Button
type="link"
danger
target="_blank"
href="https://baike.baidu.com/item/条码支付/10711903"
>
(扫码枪/扫码盒)
</Button>
扫码
</div>
</Modal>
</Page>
</template>

104
apps/web-antd/src/views/pay/demo/order/data.ts Normal file
View File

@ -0,0 +1,104 @@
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: '订单编号',
minWidth: 200,
},
{
field: 'userId',
title: '用户编号',
minWidth: 200,
},
{
field: 'spuName',
title: '商品名字',
minWidth: 200,
},
{
field: 'price',
title: '支付价格',
minWidth: 120,
formatter: 'formatNumber',
},
{
field: 'refundPrice',
title: '退款金额',
minWidth: 120,
formatter: 'formatNumber',
},
{
field: 'createTime',
title: '创建时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'payOrderId',
title: '支付单号',
minWidth: 200,
},
{
field: 'payStatus',
title: '是否支付',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
},
},
{
field: 'payTime',
title: '支付时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'refundTime',
title: '退款时间',
minWidth: 180,
slots: { default: 'refundTime' },
},
{
title: '操作',
width: 200,
fixed: 'right',
slots: { default: 'actions' },
},
];
}

150
apps/web-antd/src/views/pay/demo/order/index.vue
View File

@ -1,13 +1,97 @@
<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { DemoOrderApi } from '#/api/pay/demo/order';
import { Button } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import { Page, useVbenModal } from '@vben/common-ui';
import { formatDateTime } from '@vben/utils';
import { message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getDemoOrderPage, refundDemoOrder } from '#/api/pay/demo/order';
import { DocAlert } from '#/components/doc-alert';
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 hideLoading = message.loading({
content: '退款中，请稍后...',
key: 'action_key_msg',
});
try {
await refundDemoOrder(row.id as number);
message.success({
content: '退款成功',
key: 'action_key_msg',
});
onRefresh();
} finally {
hideLoading();
}
}
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>
<Page auto-content-height>
<DocAlert
title="支付宝支付接入"
url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
@ -24,23 +108,47 @@ import { DocAlert } from '#/components/doc-alert';
title="微信小程序支付接入"
url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
/>
<Button
danger
type="link"
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3"
>
该功能支持 Vue3 + element-plus 版本！
</Button>
<br />
<Button
type="link"
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/demo/order/index"
>
可参考
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/demo/order/index
代码，pull request 贡献给我们！
</Button>
<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: 'link',
ifShow: !row.payStatus,
onClick: handlePay.bind(null, row),
},
{
label: '发起退款',
type: 'link',
danger: true,
ifShow: row.payStatus && !row.payRefundId,
popConfirm: {
title: '确定发起退款吗？',
confirm: handleRefund.bind(null, row),
},
},
]"
/>
</template>
</Grid>
</Page>
</template>

55
apps/web-antd/src/views/pay/demo/order/modules/form.vue Normal file
View File

@ -0,0 +1,55 @@
<script lang="ts" setup>
import type { DemoOrderApi } from '#/api/pay/demo/order';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
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');
message.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
});
</script>
<template>
<Modal class="w-[600px]" :title="$t('ui.actionTitle.create', ['退款订单'])">
<Form class="mx-4" />
</Modal>
</template>

28
apps/web-antd/src/views/pay/demo/transfer/index.vue
View File

@ -1,28 +0,0 @@
<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import { Button } from 'ant-design-vue';
</script>
<template>
<Page>
<Button
danger
type="link"
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3"
>
该功能支持 Vue3 + element-plus 版本！
</Button>
<br />
<Button
type="link"
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/demo/transfer/index"
>
可参考
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/demo/transfer/index
代码，pull request 贡献给我们！
</Button>
</Page>
</template>

135
apps/web-antd/src/views/pay/demo/withdraw/data.ts Normal file
View File

@ -0,0 +1,135 @@
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: '提现单编号',
minWidth: 100,
},
{
field: 'subject',
title: '提现标题',
minWidth: 120,
},
{
field: 'type',
title: '提现类型',
minWidth: 90,
slots: { default: 'type' },
},
{
field: 'price',
title: '提现金额',
minWidth: 120,
formatter: 'formatNumber',
},
{
field: 'userName',
title: '收款人姓名',
minWidth: 150,
},
{
field: 'userAccount',
title: '收款人账号',
minWidth: 250,
},
{
field: 'status',
title: '提现状态',
minWidth: 100,
slots: { default: 'status' },
},
{
field: 'payTransferId',
title: '转账单号',
minWidth: 120,
},
{
field: 'transferChannelCode',
title: '转账渠道',
minWidth: 180,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
},
},
{
field: 'transferTime',
title: '转账时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'transferErrorMsg',
title: '转账失败原因',
minWidth: 200,
},
{
title: '操作',
width: 130,
fixed: 'right',
slots: { default: 'actions' },
},
];
}

145
apps/web-antd/src/views/pay/demo/withdraw/index.vue Normal file
View File

@ -0,0 +1,145 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { DemoWithdrawApi } from '#/api/pay/demo/withdraw';
import { Page, useVbenModal } from '@vben/common-ui';
import { message, Tag } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
getDemoWithdrawPage,
transferDemoWithdraw,
} from '#/api/pay/demo/withdraw';
import { DocAlert } from '#/components/doc-alert';
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 hideLoading = message.loading({
content: '转账中，请稍后...',
key: 'action_key_msg',
});
try {
const payTransferId = await transferDemoWithdraw(row.id as number);
message.success({
content: `转账提交成功，转账单号：${payTransferId}`,
key: 'action_key_msg',
});
onRefresh();
} finally {
hideLoading();
}
}
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 }">
<Tag v-if="row.type === 1">支付宝</Tag>
<Tag v-else-if="row.type === 2">微信余额</Tag>
<Tag v-else-if="row.type === 3">钱包余额</Tag>
</template>
<template #price="{ row }">
<span>￥{{ (row.price / 100.0).toFixed(2) }}</span>
</template>
<template #status="{ row }">
<Tag v-if="row.status === 0 && !row.payTransferId" type="warning">
等待转账
</Tag>
<Tag v-else-if="row.status === 0 && row.payTransferId" type="info">
转账中
</Tag>
<Tag v-else-if="row.status === 10" type="success"> 转账成功 </Tag>
<Tag v-else-if="row.status === 20" type="danger"> 转账失败 </Tag>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: '发起转账',
type: 'link',
ifShow: row.status === 0 && !row.payTransferId,
onClick: handleTransfer.bind(null, row),
},
{
label: '重新转账',
type: 'link',
ifShow: row.status === 20,
onClick: handleTransfer.bind(null, row),
},
]"
/>
</template>
</Grid>
</Page>
</template>

55
apps/web-antd/src/views/pay/demo/withdraw/modules/form.vue Normal file
View File

@ -0,0 +1,55 @@
<script lang="ts" setup>
import type { DemoWithdrawApi } from '#/api/pay/demo/withdraw';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
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');
message.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
});
</script>
<template>
<Modal class="w-[600px]" :title="$t('ui.actionTitle.create', ['示例提现单'])">
<Form class="mx-4" />
</Modal>
</template>

2
apps/web-antd/src/views/pay/order/index.vue
View File

@ -59,7 +59,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
</script>
<template>
<Page :auto-content-height="true">
<Page auto-content-height>
<template #doc>
<DocAlert
title="支付宝支付接入"

285
apps/web-antd/src/views/pay/transfer/data.ts Normal file
View File

@ -0,0 +1,285 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { formatDateTime } from '@vben/utils';
import { Tag } from 'ant-design-vue';
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: '编号',
minWidth: 100,
},
{
field: 'createTime',
title: '创建时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'appName',
title: '支付应用',
minWidth: 100,
},
{
field: 'price',
title: '转账金额',
minWidth: 120,
formatter: ({ cellValue }) => `￥${(cellValue / 100).toFixed(2)}`,
},
{
field: 'status',
title: '转账状态',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.PAY_TRANSFER_STATUS },
},
},
{
field: 'type',
title: '类型',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.PAY_TRANSFER_TYPE },
},
},
{
field: 'channelCode',
title: '支付渠道',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
},
},
{
field: 'merchantTransferId',
title: '商户单号',
minWidth: 180,
},
{
field: 'channelTransferNo',
title: '渠道单号',
minWidth: 180,
},
{
field: 'userName',
title: '收款人姓名',
minWidth: 120,
},
{
field: 'accountNo',
title: '收款人账号',
minWidth: 180,
},
{
title: '操作',
width: 120,
fixed: 'right',
slots: { default: 'actions' },
},
];
}
/** 详情的配置 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'id',
label: '编号',
},
{
field: 'merchantTransferId',
label: '商户单号',
content: (data) => {
return h(Tag, {
color: 'blue',
content: data?.merchantTransferId,
});
},
},
{
field: 'no',
label: '转账单号',
content: (data) => {
return h(Tag, {
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(Tag, {
color: 'blue',
content: `￥${(data?.price / 100).toFixed(2)}`,
});
},
},
{
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(Tag, {
color: 'blue',
content: data?.channelTransferNo,
});
},
},
{
field: 'notifyUrl',
label: '通知 URL',
},
{
field: 'channelNotifyData',
label: '转账渠道通知内容',
},
];
}

117
apps/web-antd/src/views/pay/transfer/index.vue
View File

@ -1,28 +1,103 @@
<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { PayTransferApi } from '#/api/pay/transfer';
import { Button } from 'ant-design-vue';
import { 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 { DocAlert } from '#/components/doc-alert';
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>
<Button
danger
type="link"
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3"
>
该功能支持 Vue3 + element-plus 版本！
</Button>
<br />
<Button
type="link"
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/transfer/index"
>
可参考
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/transfer/index
代码，pull request 贡献给我们！
</Button>
<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: 'link',
icon: ACTION_ICON.VIEW,
auth: ['pay:transfer:query'],
onClick: handleDetail.bind(null, row),
},
]"
/>
</template>
</Grid>
</Page>
</template>

55
apps/web-antd/src/views/pay/transfer/modules/detail.vue Normal file
View File

@ -0,0 +1,55 @@
<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: '基本信息',
bordered: false,
column: 2,
class: 'mx-4',
},
schema: useDetailSchema(),
});
</script>
<template>
<Modal
title="转账单详情"
class="w-1/2"
:show-cancel-button="false"
:show-confirm-button="false"
>
<Description :data="formData" />
</Modal>
</template>

86
apps/web-antd/src/views/pay/wallet/balance/data.ts Normal file
View File

@ -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: 'formatFraction',
},
{
title: '累计支出',
field: 'totalExpense',
formatter: 'formatFraction',
},
{
title: '累计充值',
field: 'totalRecharge',
formatter: 'formatFraction',
},
{
title: '冻结金额',
field: 'freezePrice',
formatter: 'formatFraction',
},
{
title: '创建时间',
field: 'createTime',
formatter: 'formatDateTime',
},
{
title: '操作',
field: 'actions',
fixed: 'right',
slots: { default: 'actions' },
},
];
}

96
apps/web-antd/src/views/pay/wallet/balance/index.vue
View File

@ -1,28 +1,82 @@
<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { PayWalletApi } from '#/api/pay/wallet/balance';
import { Button } from 'ant-design-vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getWalletPage } from '#/api/pay/wallet/balance';
import { DocAlert } from '#/components/doc-alert';
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.WalletVO>) {
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.WalletVO>,
});
</script>
<template>
<Page>
<Button
danger
type="link"
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3"
>
该功能支持 Vue3 + element-plus 版本！
</Button>
<br />
<Button
type="link"
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/wallet/balance/index"
>
可参考
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/wallet/balance/index
代码，pull request 贡献给我们！
</Button>
<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: 'link',
icon: ACTION_ICON.VIEW,
onClick: handleDetail.bind(null, row),
},
]"
/>
</template>
</Grid>
</Page>
</template>

40
apps/web-antd/src/views/pay/wallet/balance/modules/detail.vue Normal file
View File

@ -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.WalletVO>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
walletId.value = data.id;
} finally {
modalApi.unlock();
}
},
});
</script>
<template>
<Modal
title="消息详情"
class="w-[40%]"
:show-cancel-button="false"
:show-confirm-button="false"
>
<WalletTransactionList :wallet-id="walletId" />
</Modal>
</template>

119
apps/web-antd/src/views/pay/wallet/rechargePackage/data.ts Normal file
View File

@ -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: 'formatFraction',
},
{
field: 'bonusPrice',
title: '赠送金额',
formatter: 'formatFraction',
},
{
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' },
},
];
}

143
apps/web-antd/src/views/pay/wallet/rechargePackage/index.vue
View File

@ -1,28 +1,129 @@
<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { Button } from 'ant-design-vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
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 hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
key: 'action_key_msg',
});
try {
await deletePackage(row.id as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
key: 'action_key_msg',
});
onRefresh();
} finally {
hideLoading();
}
}
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>
<Button
danger
type="link"
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3"
>
该功能支持 Vue3 + element-plus 版本！
</Button>
<br />
<Button
type="link"
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/wallet/rechargePackage/index"
>
可参考
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/wallet/rechargePackage/index
代码，pull request 贡献给我们！
</Button>
<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: 'link',
icon: ACTION_ICON.EDIT,
auth: ['pay:wallet-recharge-package:update'],
onClick: handleEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'link',
danger: 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>

98
apps/web-antd/src/views/pay/wallet/rechargePackage/modules/form.vue Normal file
View File

@ -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 { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import {
createPackage,
getPackage,
updatePackage,
} from '#/api/pay/wallet/rechargePackage';
import { $t } from '#/locales';
import { fenToYuan, yuanToFen } from '#/utils';
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');
message.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-[600px]" :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

40
apps/web-antd/src/views/pay/wallet/transaction/data.ts Normal file
View File

@ -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',
},
];
}

61
apps/web-antd/src/views/pay/wallet/transaction/index.vue Normal file
View File

@ -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>

1
packages/effects/plugins/src/vxe-table/index.ts
View File

@ -6,6 +6,7 @@ export { default as VbenVxeGrid } from './use-vxe-grid.vue';
export type {
VxeGridListeners,
VxeGridProps,
VxeGridPropTypes,
VxeTableInstance,
VxeToolbarInstance,
} from 'vxe-table';

1
packages/icons/src/svg/icons/alipay-app.svg Normal file
View File

@ -0,0 +1 @@
<svg t="1627279997305" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11904" width="40" height="40"><path d="M938.7008 669.525333L938.7008 249.412267c0-90.555733-73.5232-164.078933-164.1472-164.078933L249.378133 85.333333c-90.555733 0-164.078933 73.48906699-164.078933 164.078933l0 525.2096c0 90.555733 73.454933 164.078933 164.07893301 164.078933l525.20959999 0c80.725333 0 147.8656-58.368 161.553067-135.099733-43.52-18.8416-232.106667-100.283733-330.376533-147.182933-74.786133 90.589867-153.088 144.930133-271.121067 144.930133s-196.81279999-72.704-187.357867-161.655467c6.2464-58.402133 46.2848-153.9072 220.296533-137.5232 91.682133 8.6016 133.666133 25.736533 208.418133 50.414933 19.3536-35.4304 35.4304-74.513067 47.616-116.0192L292.0448 436.565333l0-32.8704 164.0448 0 0-58.9824L256 344.712533l1e-8-36.181333 200.12373299 0L456.123733 223.3344c0 0 1.809067-13.312 16.520533-13.31200001l82.056533 1e-8 0 98.474667 213.333333 0 0 36.181333-213.333333 1e-8 0 58.98239999 174.045867 0c-16.00853301 65.1264-40.277333 124.962133-70.690133 177.220267C708.608 599.176533 938.7008 669.525333 938.7008 669.525333L938.7008 669.525333 938.7008 669.525333 938.7008 669.525333zM321.57013299 744.994133c-124.7232 0-144.452267-78.7456-137.83039999-111.65013299 6.5536-32.733867 42.666667-75.502933 112.0256-75.50293301 79.6672 0 151.04 20.445867 236.714667 62.088533C472.302933 698.333867 398.370133 744.994133 321.57013299 744.994133L321.57013299 744.994133 321.57013299 744.994133zM321.57013299 744.994133" fill="#1296db" p-id="11905"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

2
packages/icons/src/svg/icons/alipay-bar.svg Normal file
View File

@ -0,0 +1,2 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279586085" class="icon" viewBox="0 0 1036 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6737" xmlns:xlink="http://www.w3.org/1999/xlink" width="40.46875" height="40"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); }
</style></defs><path d="M27.587124 336.619083h69.148134a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916A13.978733 13.978733 0 0 0 96.735258 0.011183H27.587124a13.978733 13.978733 0 0 0-13.792351 13.978733v308.650434a13.978733 13.978733 0 0 0 13.792351 13.978733z m165.880969 0h27.584701a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916a13.978733 13.978733 0 0 0-13.79235-13.978733h-27.584701a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733z m138.109886 322.629167h-110.525185a27.771084 27.771084 0 0 0-27.584701 28.14385v111.829867a27.771084 27.771084 0 0 0 27.584701 28.14385h110.525185a27.957467 27.957467 0 0 0 27.584701-28.14385v-111.829867a27.957467 27.957467 0 0 0-27.584701-28.14385z m484.596091-322.629167h27.584701a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916a13.978733 13.978733 0 0 0-14.537883-13.978733h-27.5847a13.978733 13.978733 0 0 0-13.978734 13.978733v308.650434a13.978733 13.978733 0 0 0 13.978734 13.978733z m-469.871825 0H428.68358a13.978733 13.978733 0 0 0 13.792351-13.978733V13.989916A13.978733 13.978733 0 0 0 428.68358 0.011183h-83.126867a13.978733 13.978733 0 0 0-13.792351 13.978733v308.650434a13.978733 13.978733 0 0 0 13.792351 13.978733z m594.189361 0h69.148134a13.978733 13.978733 0 0 0 13.792351-13.978733V13.989916a13.978733 13.978733 0 0 0-14.537883-13.978733h-69.148135a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733z m-412.279444 126.181367H66.91396A67.470687 67.470687 0 0 0 0.002423 530.830286v425.139878a67.470687 67.470687 0 0 0 66.911537 68.029836h418.802853a67.470687 67.470687 0 0 0 66.911537-68.029836V487.775787a24.788954 24.788954 0 0 0-24.416188-24.975337z m-58.337914 433.899885a42.681733 42.681733 0 0 1-42.495349 43.054498H125.438257a42.681733 42.681733 0 0 1-42.495349-43.054498V590.100115a42.681733 42.681733 0 0 1 42.495349-43.054498h301.940642a42.681733 42.681733 0 0 1 42.495349 43.054498z m525.22761-433.899885a41.749817 41.749817 0 0 0-41.377051 42.122583v55.914934a41.377051 41.377051 0 1 0 82.940485 0v-55.914934a41.749817 41.749817 0 0 0-41.563434-42.122583z m0 223.659734a41.749817 41.749817 0 0 0-41.377051 42.122584V894.65012a45.477479 45.477479 0 0 1-45.291096 45.850246h-159.730327a43.240882 43.240882 0 0 0-43.613649 37.276622A41.9362 41.9362 0 0 0 745.534871 1024h233.538039a57.778765 57.778765 0 0 0 57.405999-58.337914V729.3283a41.749817 41.749817 0 0 0-41.377051-41.9362zM732.488053 322.64035V13.989916a13.978733 13.978733 0 0 0-13.79235-13.978733h-82.940485a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733h82.940485a13.978733 13.978733 0 0 0 13.79235-13.978733zM532.126208 0.011183c-11.36937 0-20.688525 6.337026-20.688526 13.978733v308.650434c0 7.828091 9.319156 13.978733 20.688526 13.978733s20.688525-6.337026 20.688525-13.978733V13.989916c0-7.641708-9.319156-13.978733-20.688525-13.978733z" p-id="6738" fill="#1977FD"></path><path d="M745.534871 462.80045a41.749817 41.749817 0 0 0-41.377051 42.122583v252.549117a41.377051 41.377051 0 1 0 82.940485 0V504.923033A41.749817 41.749817 0 0 0 745.534871 462.80045" p-id="6739" fill="#1977FD"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

1
packages/icons/src/svg/icons/alipay-pc.svg Normal file
View File

@ -0,0 +1 @@
<svg t="1627279878333" class="icon" viewBox="0 0 1285 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8535" width="40" height="40"><path d="M1141.76 855.04h-286.72c0 40.96 30.72 71.68 71.68 71.68h107.52c20.48 0 35.84 15.36 35.84 35.84s-15.36 35.84-35.84 35.84h-783.36c-20.48 0-35.84-15.36-35.84-35.84s15.36-35.84 35.84-35.84h107.52c40.96 0 71.68-30.72 71.68-71.68h-286.72c-76.8 0-143.36-61.44-143.36-143.36v-568.32c0-76.8 61.44-143.36 143.36-143.36h993.28c76.8 0 143.36 61.44 143.36 143.36v568.32c5.12 76.8-56.32 143.36-138.24 143.36z m71.68-711.68c0-40.96-30.72-71.68-71.68-71.68h-993.28c-40.96 0-71.68 30.72-71.68 71.68v568.32c0 40.96 30.72 71.68 71.68 71.68h993.28c40.96 0 71.68-30.72 71.68-71.68v-568.32z m-143.36 568.32h-855.04c-40.96 0-71.68-30.72-71.68-71.68v-424.96c0-40.96 30.72-71.68 71.68-71.68h855.04c40.96 0 71.68 30.72 71.68 71.68v424.96c0 40.96-30.72 71.68-71.68 71.68z" p-id="8536" fill="#1977FD"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 939 B

2
packages/icons/src/svg/icons/alipay-qr.svg Normal file
View File

@ -0,0 +1,2 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279238245" class="icon" viewBox="0 0 1115 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4112" width="43.5546875" height="40" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); }
</style></defs><path d="M751.388 68.267a34.133 34.133 0 0 1 0-68.267h227.556a91.022 91.022 0 0 1 91.022 91.022v227.556a34.133 34.133 0 1 1-68.266 0V91.022a22.756 22.756 0 0 0-22.756-22.755H751.388M1001.7 705.422a34.133 34.133 0 0 1 68.266 0v227.556A91.022 91.022 0 0 1 978.944 1024H748.885a34.133 34.133 0 0 1 0-68.267H978.49a22.756 22.756 0 0 0 22.755-22.755V705.422M364.09 955.733a34.133 34.133 0 1 1 0 68.267H136.533a91.022 91.022 0 0 1-91.022-91.022V705.422a34.133 34.133 0 0 1 68.267 0v227.556a22.756 22.756 0 0 0 22.755 22.755H364.09M113.778 318.578a34.133 34.133 0 1 1-68.267 0V91.022A91.022 91.022 0 0 1 136.533 0H364.09a34.133 34.133 0 0 1 0 68.267H136.533a22.756 22.756 0 0 0-22.755 22.755v227.556M34.133 477.867a34.133 34.133 0 0 0 0 68.266h168.619v-68.266z m1046.756 0H912.27v68.266h168.619a34.133 34.133 0 0 0 0-68.266zM202.752 157.24h709.746v320.627H202.752z m0 388.893h709.746V866.76H202.752z" fill="#1977FD" p-id="4113"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
packages/icons/src/svg/icons/alipay-wap.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645964864184" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8460" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><defs><style type="text/css"></style></defs><path d="M768.3 0 255.7 0c-70.8 0-128.1 57.4-128.1 128.1l0 767.8c0 70.8 57.4 128.1 128.1 128.1L512 1024l256.3 0c70.8 0 128.1-57.4 128.1-128.1L896.4 128.1C896.4 57.3 839 0 768.3 0zM383.9 96.1c0-17.7 14.3-32 32-32l192.2 0c17.7 0 32 14.3 32 32l0 0c0 17.7-14.3 32-32 32L415.9 128.1C398.2 128.1 383.9 113.8 383.9 96.1L383.9 96.1zM512 959.9 512 959.9 512 959.9c-35.4 0-64.1-28.8-64.1-64.1 0-35.4 28.7-64.1 64.1-64.1l0 0 0 0c35.4 0 64.1 28.7 64.1 64.1C576.1 931.1 547.4 959.9 512 959.9zM832.3 755.6c0 6.7-5.4 12.2-12.2 12.2L203.9 767.8c-6.7 0-12.2-5.4-12.2-12.2L191.7 204.3c0-6.7 5.4-12.2 12.2-12.2l616.3 0c6.7 0 12.2 5.4 12.2 12.2L832.4 755.6z" p-id="8461" fill="#1977FD"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
packages/icons/src/svg/icons/mock.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747409043186" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4834" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M44.416 853.333333v-85.205333a170.666667 170.666667 0 0 1 170.666667-170.666667h170.837333a37637.589333 37637.589333 0 0 1 0-206.165333C324.309333 352.170667 281.6 285.141333 281.6 211.968c0-116.906667 90.197333-211.072 231.168-211.072 140.970667 0 230.741333 94.208 230.741333 211.072 0 73.216-40.96 140.245333-102.528 179.328 0.256 0.170667 0.256 68.906667 0 206.165333h171.989334a170.666667 170.666667 0 0 1 170.666666 170.666667V853.333333a170.666667 170.666667 0 0 1-170.666666 170.666667H215.082667a170.666667 170.666667 0 0 1-170.666667-170.666667z m84.266667-84.650666v104.277333a85.333333 85.333333 0 0 0 85.333333 85.333333H811.52a85.333333 85.333333 0 0 0 85.333333-85.333333v-104.277333a85.333333 85.333333 0 0 0-85.333333-85.333334h-256.64l8.96-342.698666c66.944-21.333333 100.394667-64.256 100.394667-128.682667 0-61.952-57.344-129.322667-151.466667-129.322667-94.122667 0-146.645333 61.610667-146.645333 129.322667 0 71.466667 34.816 114.346667 104.362666 128.682667v342.698666H214.016a85.333333 85.333333 0 0 0-85.333333 85.333334z m167.125333 138.368c-50.432 0-91.434667-41.557333-91.434667-92.586667s41.002667-92.586667 91.434667-92.586667c50.389333 0 91.434667 41.557333 91.434667 92.586667 0 24.832-9.6 48.170667-27.008 65.706667-17.237333 17.322667-40.106667 26.88-64.426667 26.88z m0-119.466667a27.093333 27.093333 0 0 0-27.306667 26.88c0 14.805333 12.245333 26.88 27.306667 26.88a27.306667 27.306667 0 0 0 19.498667-8.106667 26.453333 26.453333 0 0 0 7.808-18.773333 27.093333 27.093333 0 0 0-27.306667-26.88z" fill="#1296db" p-id="4835"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

1
packages/icons/src/svg/icons/wallet.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1676209854312" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3033" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M173.077333 362.666667l91.114667-214.677334a65.6 65.6 0 0 1 86.016-34.773333c11.584 4.906667 24.96 10.282667 40.896 16.448 8.277333 3.2 16.789333 6.464 27.904 10.666667 28.202667 10.709333 39.296 14.933333 46.144 17.642666l51.477333-51.669333c28.181333-28.16 74.112-27.946667 102.570667 0.533333l195.925333 195.925334c16.426667 16.426667 23.445333 38.634667 21.056 59.904H896a42.666667 42.666667 0 0 1 42.666667 42.666666v490.666667a42.666667 42.666667 0 0 1-42.666667 42.666667H128a42.666667 42.666667 0 0 1-42.666667-42.666667V405.333333a42.666667 42.666667 0 0 1 42.666667-42.666666h45.077333z m48.96 0h39.104l169.194667-169.770667-27.328-10.389333c-11.2-4.245333-19.818667-7.530667-28.224-10.794667a1459.2 1459.2 0 0 1-42.197333-17.002667 20.522667 20.522667 0 0 0-26.901334 10.88L222.037333 362.666667z m108.842667 0h454.954667a23.509333 23.509333 0 0 0-5.290667-25.322667l-195.925333-195.925333a23.36 23.36 0 0 0-33.024-0.213334L330.88 362.666667zM128 405.333333v490.666667h768V405.333333H128z m597.333333 320a85.333333 85.333333 0 1 1 0-170.666666 85.333333 85.333333 0 0 1 0 170.666666z m0-42.666666a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z" fill="#4296d5" p-id="3034"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

2
packages/icons/src/svg/icons/wx-app.svg Normal file
View File

@ -0,0 +1,2 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279375144" class="icon" viewBox="0 0 1115 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4399" width="43.5546875" height="40" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); }
</style></defs><path d="M751.388 68.267a34.133 34.133 0 0 1 0-68.267h227.556a91.022 91.022 0 0 1 91.022 91.022v227.556a34.133 34.133 0 1 1-68.266 0V91.022a22.756 22.756 0 0 0-22.756-22.755H751.388M1001.7 705.422a34.133 34.133 0 0 1 68.266 0v227.556A91.022 91.022 0 0 1 978.944 1024H748.885a34.133 34.133 0 0 1 0-68.267H978.49a22.756 22.756 0 0 0 22.755-22.755V705.422M364.09 955.733a34.133 34.133 0 1 1 0 68.267H136.533a91.022 91.022 0 0 1-91.022-91.022V705.422a34.133 34.133 0 0 1 68.267 0v227.556a22.756 22.756 0 0 0 22.755 22.755H364.09M113.778 318.578a34.133 34.133 0 1 1-68.267 0V91.022A91.022 91.022 0 0 1 136.533 0H364.09a34.133 34.133 0 0 1 0 68.267H136.533a22.756 22.756 0 0 0-22.755 22.755v227.556M34.133 477.867a34.133 34.133 0 0 0 0 68.266h168.619v-68.266z m1046.756 0H912.27v68.266h168.619a34.133 34.133 0 0 0 0-68.266zM202.752 157.24h709.746v320.627H202.752z m0 388.893h709.746V866.76H202.752z" fill="#04C361" p-id="4400"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
packages/icons/src/svg/icons/wx-bar.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279586085" class="icon" viewBox="0 0 1036 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6737" xmlns:xlink="http://www.w3.org/1999/xlink" width="40.46875" height="40"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2&quot;) format(&quot;woff2&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff&quot;) format(&quot;woff&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf&quot;) format(&quot;truetype&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont&quot;) format(&quot;svg&quot;); }</style></defs><path d="M27.587124 336.619083h69.148134a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916A13.978733 13.978733 0 0 0 96.735258 0.011183H27.587124a13.978733 13.978733 0 0 0-13.792351 13.978733v308.650434a13.978733 13.978733 0 0 0 13.792351 13.978733z m165.880969 0h27.584701a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916a13.978733 13.978733 0 0 0-13.79235-13.978733h-27.584701a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733z m138.109886 322.629167h-110.525185a27.771084 27.771084 0 0 0-27.584701 28.14385v111.829867a27.771084 27.771084 0 0 0 27.584701 28.14385h110.525185a27.957467 27.957467 0 0 0 27.584701-28.14385v-111.829867a27.957467 27.957467 0 0 0-27.584701-28.14385z m484.596091-322.629167h27.584701a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916a13.978733 13.978733 0 0 0-14.537883-13.978733h-27.5847a13.978733 13.978733 0 0 0-13.978734 13.978733v308.650434a13.978733 13.978733 0 0 0 13.978734 13.978733z m-469.871825 0H428.68358a13.978733 13.978733 0 0 0 13.792351-13.978733V13.989916A13.978733 13.978733 0 0 0 428.68358 0.011183h-83.126867a13.978733 13.978733 0 0 0-13.792351 13.978733v308.650434a13.978733 13.978733 0 0 0 13.792351 13.978733z m594.189361 0h69.148134a13.978733 13.978733 0 0 0 13.792351-13.978733V13.989916a13.978733 13.978733 0 0 0-14.537883-13.978733h-69.148135a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733z m-412.279444 126.181367H66.91396A67.470687 67.470687 0 0 0 0.002423 530.830286v425.139878a67.470687 67.470687 0 0 0 66.911537 68.029836h418.802853a67.470687 67.470687 0 0 0 66.911537-68.029836V487.775787a24.788954 24.788954 0 0 0-24.416188-24.975337z m-58.337914 433.899885a42.681733 42.681733 0 0 1-42.495349 43.054498H125.438257a42.681733 42.681733 0 0 1-42.495349-43.054498V590.100115a42.681733 42.681733 0 0 1 42.495349-43.054498h301.940642a42.681733 42.681733 0 0 1 42.495349 43.054498z m525.22761-433.899885a41.749817 41.749817 0 0 0-41.377051 42.122583v55.914934a41.377051 41.377051 0 1 0 82.940485 0v-55.914934a41.749817 41.749817 0 0 0-41.563434-42.122583z m0 223.659734a41.749817 41.749817 0 0 0-41.377051 42.122584V894.65012a45.477479 45.477479 0 0 1-45.291096 45.850246h-159.730327a43.240882 43.240882 0 0 0-43.613649 37.276622A41.9362 41.9362 0 0 0 745.534871 1024h233.538039a57.778765 57.778765 0 0 0 57.405999-58.337914V729.3283a41.749817 41.749817 0 0 0-41.377051-41.9362zM732.488053 322.64035V13.989916a13.978733 13.978733 0 0 0-13.79235-13.978733h-82.940485a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733h82.940485a13.978733 13.978733 0 0 0 13.79235-13.978733zM532.126208 0.011183c-11.36937 0-20.688525 6.337026-20.688526 13.978733v308.650434c0 7.828091 9.319156 13.978733 20.688526 13.978733s20.688525-6.337026 20.688525-13.978733V13.989916c0-7.641708-9.319156-13.978733-20.688525-13.978733z" p-id="6738" fill="#04C361"/><path d="M745.534871 462.80045a41.749817 41.749817 0 0 0-41.377051 42.122583v252.549117a41.377051 41.377051 0 1 0 82.940485 0V504.923033A41.749817 41.749817 0 0 0 745.534871 462.80045" p-id="6739" fill="#04C361"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

1
packages/icons/src/svg/icons/wx-lite.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1676209433089" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2990" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M608.6 290.3c67.1 0 121.7 50.5 121.7 112.9 0 19.4-5.6 38.4-15.7 55.5-15.3 25-39.8 43.5-69.4 52.3-7.9 2.3-13.9 3.2-19.4 3.2-13 0-23.1-10.2-23.1-23.1 0-13 10.2-23.1 23.1-23.1 0.9 0 2.8 0 5.1-0.9 19.9-5.6 35.6-17.1 44.4-32.4 6-9.7 8.8-20.4 8.8-31.5 0-36.6-33.8-66.6-75-66.6-14.4 0-28.2 3.7-40.7 10.6-21.8 12.5-34.7 33.3-34.7 56v193.9c0 39.3-21.8 75.4-57.9 95.8-19.4 11.1-41.2 16.7-63.4 16.7-67.1 0-121.7-50.5-121.7-112.9 0-19.4 5.6-38.4 15.7-55.5 15.3-25 39.8-43.5 69.4-52.3 8.3-2.3 13.9-3.2 19.4-3.2 13 0 23.1 10.2 23.1 23.1 0 13-10.2 23.1-23.1 23.1-0.9 0-2.8 0-5.1 0.9-19.9 6-35.6 17.6-44.4 32.4-6 9.7-8.8 20.4-8.8 31.5 0 36.6 33.8 66.6 75.4 66.6 14.4 0 28.2-3.7 40.7-10.6 21.8-12.5 34.7-33.3 34.7-56V403.3c0-39.3 21.8-75.4 57.9-95.8 19-11.6 40.7-17.2 63-17.2zM510.8 929c231.1 0 418.4-187.3 418.4-418.4S741.9 92.1 510.8 92.1 92.4 279.5 92.4 510.6 279.7 929 510.8 929z m0 22C267.5 951 70.3 753.8 70.3 510.6S267.5 70.1 510.8 70.1s440.5 197.2 440.5 440.5S754.1 951 510.8 951z" p-id="2991" fill="#58bf6b"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
packages/icons/src/svg/icons/wx-native.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279375144" class="icon" viewBox="0 0 1115 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4399" width="43.5546875" height="40" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2&quot;) format(&quot;woff2&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff&quot;) format(&quot;woff&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf&quot;) format(&quot;truetype&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont&quot;) format(&quot;svg&quot;); }</style></defs><path d="M751.388 68.267a34.133 34.133 0 0 1 0-68.267h227.556a91.022 91.022 0 0 1 91.022 91.022v227.556a34.133 34.133 0 1 1-68.266 0V91.022a22.756 22.756 0 0 0-22.756-22.755H751.388M1001.7 705.422a34.133 34.133 0 0 1 68.266 0v227.556A91.022 91.022 0 0 1 978.944 1024H748.885a34.133 34.133 0 0 1 0-68.267H978.49a22.756 22.756 0 0 0 22.755-22.755V705.422M364.09 955.733a34.133 34.133 0 1 1 0 68.267H136.533a91.022 91.022 0 0 1-91.022-91.022V705.422a34.133 34.133 0 0 1 68.267 0v227.556a22.756 22.756 0 0 0 22.755 22.755H364.09M113.778 318.578a34.133 34.133 0 1 1-68.267 0V91.022A91.022 91.022 0 0 1 136.533 0H364.09a34.133 34.133 0 0 1 0 68.267H136.533a22.756 22.756 0 0 0-22.755 22.755v227.556M34.133 477.867a34.133 34.133 0 0 0 0 68.266h168.619v-68.266z m1046.756 0H912.27v68.266h168.619a34.133 34.133 0 0 0 0-68.266zM202.752 157.24h709.746v320.627H202.752z m0 388.893h709.746V866.76H202.752z" fill="#04C361" p-id="4400"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

2
packages/icons/src/svg/icons/wx-pub.svg Normal file
View File

@ -0,0 +1,2 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279797174" class="icon" viewBox="0 0 1260 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7665" xmlns:xlink="http://www.w3.org/1999/xlink" width="49.21875" height="40"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); }
</style></defs><path d="M797.14798 481.753a269.194 269.194 0 0 0 102.892-211.929C900.03998 120.99 779.02998 0 630.15698 0 481.28298 0 360.27398 120.99 360.27398 269.824c0 85.878 40.33 162.462 102.912 211.929A450.974 450.974 0 0 0 309.84198 582.774c-85.543 85.524-132.608 199.208-132.608 320.236 0 25.01 0 51.712 0.197 76.367a44.898 44.898 0 0 0 44.82 44.623h816.01a44.8 44.8 0 0 0 44.82-44.623V903.01c0-121.009-47.066-234.732-132.609-320.236a451.072 451.072 0 0 0-153.344-101.021z" p-id="7666" fill="#04C361"></path><path d="M1186.18898 580.391A378.644 378.644 0 0 0 1061.81198 473.03a223.783 223.783 0 0 0 64.237-157.657c0-49.742-15.872-96.67-45.746-136.074A225.34 225.34 0 0 0 964.70998 99.9a37.297 37.297 0 0 0-46.14 25.718c-5.592 19.89 5.79 40.724 25.6 46.356 63.114 18.196 107.363 77.135 107.363 143.4a148.913 148.913 0 0 1-81.23 133.06 38.065 38.065 0 0 0-20.363 36.608c1.32 15.203 11.58 28.16 25.975 32.65 125.479 39.601 209.703 155.038 209.703 287.173v63.074c0 20.638 16.62 37.534 37.16 37.711h0.196a37.396 37.396 0 0 0 37.337-37.336V805.06c-0.197-81.644-25.777-159.35-74.142-224.69z m-901.77-62.503a36.982 36.982 0 0 0 25.955-32.65 37.455 37.455 0 0 0-20.362-36.628 148.913 148.913 0 0 1-81.231-133.06c0-66.245 44.071-125.184 107.382-143.4a37.612 37.612 0 0 0 25.58-46.356 37.376 37.376 0 0 0-46.139-25.718 225.32 225.32 0 0 0-115.593 79.4 223.252 223.252 0 0 0-45.746 136.074c0 60.258 23.533 116.381 64.237 157.676A380.475 380.475 0 0 0 74.14498 580.569 373.839 373.839 0 0 0 0.00198 805.258v63.232c0 20.657 16.798 37.356 37.356 37.356h0.197a37.317 37.317 0 0 0 37.14-37.73V805.06c0-132.332 84.401-247.769 209.723-287.173z" p-id="7667" fill="#04C361"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

26
packages/icons/src/svg/index.ts
View File

@ -12,7 +12,26 @@ const SvgBellIcon = createIconifyIcon('svg:bell');
const SvgCakeIcon = createIconifyIcon('svg:cake');
const SvgAntdvLogoIcon = createIconifyIcon('svg:antdv-logo');
/** 支付 */
const SvgAlipayPcIcon = createIconifyIcon('svg:alipay-pc');
const SvgAlipayWapIcon = createIconifyIcon('svg:alipay-wap');
const SvgAlipayAppIcon = createIconifyIcon('svg:alipay-app');
const SvgAlipayQrIcon = createIconifyIcon('svg:alipay-qr');
const SvgAlipayBarIcon = createIconifyIcon('svg:alipay-bar');
const SvgWxPubIcon = createIconifyIcon('svg:wx-pub');
const SvgWxLiteIcon = createIconifyIcon('svg:wx-lite');
const SvgWxAppIcon = createIconifyIcon('svg:wx-app');
const SvgWxNativeIcon = createIconifyIcon('svg:wx-native');
const SvgWxBarIcon = createIconifyIcon('svg:wx-bar');
const SvgWalletIcon = createIconifyIcon('svg:wallet');
const SvgMockIcon = createIconifyIcon('svg:mock');
export {
SvgAlipayAppIcon,
SvgAlipayBarIcon,
SvgAlipayPcIcon,
SvgAlipayQrIcon,
SvgAlipayWapIcon,
SvgAntdvLogoIcon,
SvgAvatar1Icon,
SvgAvatar2Icon,
@ -22,4 +41,11 @@ export {
SvgCakeIcon,
SvgCardIcon,
SvgDownloadIcon,
SvgMockIcon,
SvgWalletIcon,
SvgWxAppIcon,
SvgWxBarIcon,
SvgWxLiteIcon,
SvgWxNativeIcon,
SvgWxPubIcon,
};

6
pnpm-lock.yaml
View File

@ -6,9 +6,6 @@ settings:
catalogs:
default:
'@ant-design/icons-vue':
specifier: ^7.0.1
version: 7.0.1
'@changesets/changelog-github':
specifier: ^0.5.1
version: 0.5.1
@ -686,9 +683,6 @@ importers:
apps/web-antd:
dependencies:
'@ant-design/icons-vue':
specifier: 'catalog:'
version: 7.0.1(vue@3.5.13(typescript@5.8.3))
'@form-create/ant-design-vue':
specifier: 'catalog:'
version: 3.2.22(vue@3.5.13(typescript@5.8.3))