cpms_org/cpms_operation_platform
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

赛事运营平台 相关功能 #13

Merged
chenzhen merged 133 commits from release/0.01 into master 2026-08-10 16:02:04 +08:00
Conversation 0 Commits 133 Files Changed 168
+5461 -1853
68 changed files with 5461 additions and 1853 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 499903d68b - Show all commits
package.json
+1
View File
@@ -22,6 +22,7 @@
"ant-design-vue": "^4.0.0",
"china-area-data": "^5.0.1",
"dayjs": "^1.11.21",
"echarts": "^5.6.0",
"express": "^5.2.1",
"html2canvas": "^1.4.1",
"qs": "^6.15.0",
src/assets/styles/index.less
+1
View File
@@ -107,6 +107,7 @@ a {
justify-content: flex-end;
padding: 14px;
}
// ===== antd 组件覆盖 =====
// Tag 默认 margin-right: 8px，会挤开表格列或卡片内间距，统一去掉
src/assets/styles/pageLayout.module.less
+47
View File
@@ -0,0 +1,47 @@
// 页面布局根容器：筛选区 + 表格区作为直接子元素
.containerMain {
display: flex;
flex-direction: column;
height: 100%;
// 页面筛选区域：横向 flex，可换行
.filter {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 16px;
row-gap: 12px;
flex-shrink: 0;
padding: 16px;
background-color: #fff;
border-radius: 10px;
}
// 筛选区域操作按钮组
.filterActions {
display: flex;
align-items: center;
gap: 10px;
margin-left: 0;
}
// 表格显示区域：纵向 flex，占据剩余高度
.table {
display: flex;
flex-direction: column;
flex: 1;
background-color: #fff;
min-height: 0;
min-width: 0;
margin-top: 16px;
overflow: hidden;
border-radius: 10px;
.pagination {
flex-shrink: 0;
display: flex;
justify-content: flex-end;
padding: 14px;
}
}
}
src/components/ChangePasswordModal/index.tsx
+1
View File
@@ -61,6 +61,7 @@ export default defineComponent({
destroyOnClose
footer={null}
centered
wrapClassName={styles.changePasswordModalMain}
class={styles.modal}
>
<Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark>
src/components/ChangePasswordModal/style.module.less
+30 -31
View File
@@ -1,37 +1,36 @@
.form {
:global {
.ant-form-item {
margin-bottom: 16px;
}
.ant-form-item-explain-error {
font-size: 12px;
.changePasswordModalMain {
.modal {
:global {
.ant-modal-body {
padding: 16px 24px 0;
}
}
}
}
/* 底部提示文案 */
.tip {
margin-top: -4px;
margin-bottom: 24px;
color: rgba(0, 0, 0, 0.45);
font-size: 12px;
line-height: 1.5;
}
/* 底部按钮 */
.footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding-top: 16px;
border-top: 1px solid #f0f0f0;
}
/* 微调 Modal 内部样式 */
.modal {
:global {
.ant-modal-body {
padding: 16px 24px 0;
.form {
:global {
.ant-form-item {
margin-bottom: 16px;
}
.ant-form-item-explain-error {
font-size: 12px;
}
}
}
.tip {
margin-top: -4px;
margin-bottom: 24px;
color: rgba(0, 0, 0, 0.45);
font-size: 12px;
line-height: 1.5;
}
.footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding-top: 16px;
border-top: 1px solid #f0f0f0;
}
}
src/components/HelloWorld.module.less
+10 -10
View File
@@ -1,16 +1,16 @@
.container {
.helloWorldMain {
text-align: center;
padding: 16px;
}
.title {
color: #1677ff;
}
.title {
color: #1677ff;
}
.desc {
code {
background: #f5f5f5;
padding: 2px 6px;
border-radius: 4px;
.desc {
code {
background: #f5f5f5;
padding: 2px 6px;
border-radius: 4px;
}
}
}
src/components/HelloWorld.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ export default defineComponent({
},
setup(props) {
return () => (
<div class={styles.container}>
<div class={styles.helloWorldMain}>
<h3 class={styles.title}>{props.msg}</h3>
<p class={styles.desc}>
这是一个公共组件示例,采用 TSX 写法。你可以在
src/components/index.ts
+1
View File
@@ -4,3 +4,4 @@
*/
export { default as HelloWorld } from './HelloWorld';
export { default as ChangePasswordModal } from './ChangePasswordModal';
export { default as PageTabs } from './pageTabs/PageTabs';
src/components/pageTabs/PageTabs.module.less
+164
View File
@@ -0,0 +1,164 @@
@primary: #1677ff;
.pageTabsMain {
display: flex;
align-items: center;
width: 100%;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
&::-webkit-scrollbar {
height: 0;
}
.tabItem {
position: relative;
display: flex;
align-items: center;
height: 100%;
user-select: none;
transition: all 0.15s ease;
padding: 0 8px 0 14px;
&:global(:not(.dragging)) {
cursor: pointer;
}
&:not(.tabItemActive) {
&:hover {
> .divider {
opacity: 0;
}
& + .tabItem {
> .divider {
opacity: 0;
}
}
}
}
&.tabItemActive {
z-index: 2;
& + .tabItem {
> .divider {
opacity: 0 !important;
}
}
.tabTitle {
color: @primary;
font-weight: 500;
}
.tabBg {
&.tabBgActive {
.tabBgInner {
background-color: fade(@primary, 8%);
}
.tabBgCurveBefore,
.tabBgCurveAfter {
fill: fade(@primary, 8%);
}
}
}
}
&:not(.tabItemActive) {
.tabTitleCon:hover {
background-color: rgba(0, 0, 0, 0.06);
}
}
}
.divider {
position: absolute;
left: 7px;
top: 50%;
z-index: 0;
width: 1px;
height: 16px;
background-color: #e8e8e8;
transform: translateY(-50%);
transition: opacity 0.15s;
}
.tabBg {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
padding: 0 calc(7px - 1px);
transition: opacity 0.15s;
}
.tabBgInner {
height: 100%;
border-radius: 7px 7px 0 0;
transition:
background-color 0.15s,
margin 0.15s,
border-radius 0.15s;
}
.tabBgCurveBefore {
position: absolute;
left: -1px;
bottom: 0;
fill: transparent;
transition: fill 0.15s;
}
.tabBgCurveAfter {
position: absolute;
right: -1px;
bottom: 0;
fill: transparent;
transition: fill 0.15s;
}
.tabClose {
flex-shrink: 0;
width: 16px;
height: 16px;
line-height: 16px;
font-size: 10px;
text-align: center;
margin-right: 12px;
color: rgba(0, 0, 0, 0.45);
border-radius: 50%;
cursor: pointer;
transition: all 0.15s;
&:hover {
color: rgba(0, 0, 0, 0.85);
background-color: rgba(0, 0, 0, 0.06);
}
}
.tabTitleCon {
height: 28px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
}
.tabTitle {
position: relative;
z-index: 2;
flex: 1;
min-width: 0;
padding: 2px 8px;
font-size: 13px;
color: rgba(0, 0, 0, 0.65);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
src/components/pageTabs/PageTabs.tsx
+91
View File
@@ -0,0 +1,91 @@
import { defineComponent, type PropType } from 'vue';
import { message } from 'ant-design-vue';
import type { TabView } from '@/types';
import styles from './PageTabs.module.less';
/**
* Chrome 风格的页面标签栏组件
* 参考 VBEN tabs-chrome 的视觉设计：
* - 标签重叠排列（负 margin）
* - 激活态：圆角背景 + SVG 底部曲线
* - hover 态：浅灰背景
* - 标签间分隔线
* - 关闭按钮
*/
const PageTabs = defineComponent({
name: 'PageTabs',
props: {
/** 标签列表 */
tabs: { type: Array as PropType<TabView[]>, required: true },
/** 当前激活 key */
activeKey: { type: String, required: true },
/** 关闭标签 */
onClose: { type: Function as PropType<(key: string) => void>, default: undefined },
/** 切换标签 */
onChange: { type: Function as PropType<(key: string) => void>, default: undefined },
},
setup(props) {
const handleClick = (key: string) => {
if (key !== props.activeKey && props.onChange) {
props.onChange(key);
}
};
const handleClose = (key: string, e: Event) => {
e.stopPropagation();
if (props.tabs.length <= 1) {
message.warning('至少保留一个标签');
return;
}
if (props.onClose) {
props.onClose(key);
}
};
return () => (
<div class={styles.pageTabsMain}>
{props.tabs.map((tab, i) => {
const isActive = tab.path === props.activeKey;
return (
<div
key={tab.path}
class={[styles.tabItem, isActive && styles.tabItemActive].filter(Boolean).join(' ')}
onClick={() => handleClick(tab.path)}
>
{/* 分隔线：第一个标签 / 激活标签 / 上一个就是激活的 → 不显示 */}
<div
v-show={i !== 0 && !isActive && props.tabs[i - 1]?.path !== props.activeKey}
class={styles.divider}
/>
{/* Chrome 风格背景：激活态 */}
<div class={[styles.tabBg, isActive && styles.tabBgActive].filter(Boolean).join(' ')}>
<div class={styles.tabBgInner} />
{/* 左下曲线 */}
<svg class={styles.tabBgCurveBefore} height="7" width="7">
<path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z" />
</svg>
{/* 右下曲线 */}
<svg class={styles.tabBgCurveAfter} height="7" width="7">
<path d="M 0 0 A 7 7 0 0 0 7 7 L 0 7 Z" />
</svg>
</div>
<div class={styles.tabTitleCon}>
{/* 标签文字（flex 子元素，与关闭按钮同行） */}
<span class={styles.tabTitle}>{tab.title}</span>
</div>
{/* 关闭按钮（flex 子元素，不参与 shrink） */}
<span class={styles.tabClose} onClick={(e: Event) => handleClose(tab.path, e)}>
✕
</span>
</div>
);
})}
</div>
);
},
});
export default PageTabs;
src/config/fallbackRoutes.ts
+12
View File
@@ -54,30 +54,35 @@ export const FALLBACK_MENU_NODES: MenuNode[] = [
name: '赛事列表',
path: 'events/list',
component: 'events/list',
componentName: 'EventList',
},
{
id: 'events_orders',
name: '订单管理',
path: 'events/orders',
component: 'events/orders',
componentName: 'EventOrders',
},
{
id: 'events_users',
name: '用户列表',
path: 'events/users',
component: 'events/users',
componentName: 'EventUsers',
},
{
id: 'events_banner',
name: 'Banner配置',
path: 'events/banner',
component: 'events/banner',
componentName: 'EventBanner',
},
{
id: 'events_logs',
name: '赛事操作日志',
path: 'events/logs',
component: 'events/logs',
componentName: 'EventLogs',
},
],
},
@@ -92,24 +97,28 @@ export const FALLBACK_MENU_NODES: MenuNode[] = [
name: '提现申请',
path: 'finance/withdraw',
component: 'finance/withdraw',
componentName: 'FinanceWithdraw',
},
{
id: 'finance_wallet',
name: '用户钱包',
path: 'finance/wallet',
component: 'finance/wallet',
componentName: 'FinanceWallet',
},
{
id: 'finance_payments',
name: '支付流水',
path: 'finance/payments',
component: 'finance/payments',
componentName: 'FinancePayments',
},
{
id: 'finance_reports',
name: '账务报表',
path: 'finance/reports',
component: 'finance/reports',
componentName: 'FinanceReports',
},
],
},
@@ -124,18 +133,21 @@ export const FALLBACK_MENU_NODES: MenuNode[] = [
name: '用户管理',
path: 'system/users',
component: 'system/users',
componentName: 'SystemUsers',
},
{
id: 'system_roles',
name: '角色权限',
path: 'system/roles',
component: 'system/roles',
componentName: 'SystemRoles',
},
{
id: 'system_logs',
name: '操作日志',
path: 'system/logs',
component: 'system/logs',
componentName: 'SystemLogs',
},
],
},
src/layouts/BasicLayout.module.less
+109 -96
View File
@@ -1,115 +1,128 @@
.container {
.basicLayoutMain {
min-height: 100vh;
height: 100vh;
}
.logo {
height: 56px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: #1a1a1a;
background: #fff;
}
.logoText {
font-size: 16px;
font-weight: 600;
white-space: nowrap;
}
.trigger {
font-size: 18px;
cursor: pointer;
transition: color 0.3s;
padding: 0 12px;
display: inline-flex;
align-items: center;
&:hover {
color: #1677ff;
.logo {
height: 56px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: #1a1a1a;
background: #fff;
}
}
// 面包屑
.breadcrumb {
flex: 1;
margin-left: 8px;
font-size: 14px;
.logoText {
font-size: 16px;
font-weight: 600;
white-space: nowrap;
}
:global {
.ant-breadcrumb-link,
.ant-breadcrumb-separator,
.ant-breadcrumb-item a {
color: rgba(0, 0, 0, 0.65);
.trigger {
font-size: 18px;
cursor: pointer;
transition: color 0.3s;
padding: 0 12px;
display: inline-flex;
align-items: center;
&:hover {
color: #1677ff;
}
}
.ant-breadcrumb-item:last-child {
.breadcrumb {
flex: 1;
margin-left: 8px;
font-size: 14px;
:global {
.ant-breadcrumb-link,
.ant-breadcrumb-separator,
a {
color: rgba(0, 0, 0, 0.88);
font-weight: 500;
cursor: default;
.ant-breadcrumb-item a {
color: rgba(0, 0, 0, 0.65);
}
.ant-breadcrumb-item:last-child {
.ant-breadcrumb-link,
.ant-breadcrumb-separator,
a {
color: rgba(0, 0, 0, 0.88);
font-weight: 500;
cursor: default;
}
}
}
}
}
// Header 右侧：账号信息 + 退出图标
.headerRight {
margin-left: auto;
display: flex;
gap: 10px;
align-items: center;
}
.userPhone {
font-size: 14px;
color: rgba(0, 0, 0, 0.65);
}
.logoutIcon {
width: 18px;
height: 18px;
opacity: 0.45;
cursor: pointer;
transition: opacity 0.3s;
&:hover {
opacity: 1;
.headerRight {
margin-left: auto;
display: flex;
gap: 10px;
align-items: center;
}
}
// 下拉菜单项：图标 + 文字
.menuItem {
display: inline-flex;
align-items: center;
gap: 8px;
:global(.anticon) {
.userPhone {
font-size: 14px;
color: rgba(0, 0, 0, 0.65);
}
.logoutIcon {
width: 18px;
height: 18px;
opacity: 0.45;
cursor: pointer;
transition: opacity 0.3s;
&:hover {
opacity: 1;
}
}
.menuItem {
display: inline-flex;
align-items: center;
gap: 8px;
:global(.anticon) {
font-size: 14px;
}
}
.menuItemDanger {
color: #ff4d4f;
}
.content {
margin: 16px;
border-radius: 8px;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.main {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.headerRow {
padding: 0 16px;
width: 100%;
height: 48px;
display: flex;
align-items: center;
}
.pageTabs {
width: 100%;
padding: 4px 16px 0 16px;
height: 42px;
background: #fff;
border-top: 1px solid #f0f0f0;
}
}
.menuItemDanger {
color: #ff4d4f;
}
.content {
margin: 16px;
border-radius: 8px;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.main {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
src/layouts/BasicLayout.tsx
+99 -48
View File
@@ -1,5 +1,6 @@
import { computed, defineComponent, h, ref } from 'vue';
import type { CSSProperties } from 'vue';
import { KeepAlive } from 'vue';
import { useRouter, useRoute, RouterView } from 'vue-router';
import { Layout, Menu, Modal, Breadcrumb, Dropdown, message } from 'ant-design-vue';
import type { MenuProps } from 'ant-design-vue';
@@ -16,8 +17,9 @@ import {
} from '@ant-design/icons-vue';
import { useMenuStore } from '@/stores/menuStore';
import { useUserStore } from '@/stores/userStore';
import { useTabsStore } from '@/stores/tabsStore';
import { useState, useBreadcrumb, auth } from '@/hooks';
import { ChangePasswordModal } from '@/components';
import { ChangePasswordModal, PageTabs } from '@/components';
import logoutSvg from '@/assets/img/icon/logout.svg';
import styles from './BasicLayout.module.less';
@@ -25,11 +27,13 @@ const { Header, Sider, Content, Footer } = Layout;
const headerStyle: CSSProperties = {
background: '#fff',
padding: '0 16px',
padding: '0',
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'center',
color: '#1a1a1a',
boxShadow: '0 1px 4px rgba(0, 21, 41, 0.08)',
height: 'auto',
};
const siderStyle: CSSProperties = {
@@ -93,6 +97,7 @@ export default defineComponent({
const { menuItems } = useMenuStore();
const { phone } = useUserStore();
const { tabs, cachedViews, removeTab } = useTabsStore();
const { breadcrumbs } = useBreadcrumb();
const selectedKeys = computed<string[]>(() => [route.path]);
@@ -107,6 +112,8 @@ export default defineComponent({
collapsed.value = !collapsed.value;
};
const activeTabKey = computed(() => route.path);
/** ===== 退出登录 ===== */
const handleLogout = () => {
Modal.confirm({
@@ -154,8 +161,19 @@ export default defineComponent({
}
};
/** ===== PageTabs 事件 ===== */
const handleTabChange = (key: string) => {
if (key !== route.path) {
router.push(key);
}
};
const handleTabClose = (key: string) => {
removeTab(key);
};
return () => (
<Layout class={styles.container}>
<Layout class={styles.basicLayoutMain}>
<Sider style={siderStyle} collapsed={collapsed.value} trigger={null} collapsible>
<div class={styles.logo}>
<span class={styles.logoText}>{collapsed.value ? '6羽' : '六羽赛事运营平台'}</span>
@@ -171,56 +189,89 @@ export default defineComponent({
<Layout class={styles.main}>
<Header style={headerStyle}>
<span class={styles.trigger} onClick={toggleCollapsed}>
{collapsed.value ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
</span>
{/*
── 顶部行：折叠按钮 + 面包屑 + 右侧账号信息 ──
按需求把原来平铺在 Header 里的三块统一包到一个 row 容器内，
形成「行容器 + tabs 容器」的两层结构
*/}
<div class={styles.headerRow}>
<span class={styles.trigger} onClick={toggleCollapsed}>
{collapsed.value ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
</span>
{/* 面包屑：紧跟在折叠按钮之后 */}
<Breadcrumb separator=">" class={styles.breadcrumb}>
{breadcrumbs.value.map((item, index) => {
const isLast = index === breadcrumbs.value.length - 1;
return (
<Breadcrumb.Item key={item.path || index}>
{isLast || !item.path ? (
<span>{item.title}</span>
) : (
<a onClick={() => router.push(item.path as string)}>{item.title}</a>
)}
</Breadcrumb.Item>
);
})}
</Breadcrumb>
{/* 面包屑：紧跟在折叠按钮之后 */}
<Breadcrumb separator=">" class={styles.breadcrumb}>
{breadcrumbs.value.map((item, index) => {
const isLast = index === breadcrumbs.value.length - 1;
return (
<Breadcrumb.Item key={item.path || index}>
{isLast || !item.path ? (
<span>{item.title}</span>
) : (
<a onClick={() => router.push(item.path as string)}>{item.title}</a>
)}
</Breadcrumb.Item>
);
})}
</Breadcrumb>
{/* 右侧: 账号信息 + 退出 */}
<div class={styles.headerRight}>
<span class={styles.userPhone}>{phone.value}</span>
<Dropdown trigger={['hover']} placement="bottomLeft">
{{
default: () => <img src={logoutSvg} class={styles.logoutIcon} />,
overlay: () => (
<Menu onClick={handleUserMenuClick}>
<Menu.Item key="changePassword">
<span class={styles.menuItem}>
<EditOutlined />
修改密码
</span>
</Menu.Item>
<Menu.Divider />
<Menu.Item key="logout">
<span class={`${styles.menuItem} ${styles.menuItemDanger}`}>
<LogoutOutlined />
退出登录
</span>
</Menu.Item>
</Menu>
),
}}
</Dropdown>
{/* 右侧: 账号信息 + 退出 */}
<div class={styles.headerRight}>
<span class={styles.userPhone}>{phone.value}</span>
<Dropdown trigger={['hover']} placement="bottomLeft">
{{
default: () => <img src={logoutSvg} class={styles.logoutIcon} />,
overlay: () => (
<Menu onClick={handleUserMenuClick}>
<Menu.Item key="changePassword">
<span class={styles.menuItem}>
<EditOutlined />
修改密码
</span>
</Menu.Item>
<Menu.Divider />
<Menu.Item key="logout">
<span class={`${styles.menuItem} ${styles.menuItemDanger}`}>
<LogoutOutlined />
退出登录
</span>
</Menu.Item>
</Menu>
),
}}
</Dropdown>
</div>
</div>
{/*
── Tabs 行：Chrome 风格页面标签栏 ──
数据来自 tabsStore，点击切换路由，关闭按钮走 store.removeTab
*/}
<div class={styles.pageTabs}>
<PageTabs
tabs={tabs.value}
activeKey={activeTabKey.value}
onChange={handleTabChange}
onClose={handleTabClose}
/>
</div>
</Header>
{/*
── 路由出口 ──
用 <KeepAlive :include="cachedViews"> 缓存已访问过的页面,
include 是组件 name 列表,所以页面组件需要在 defineComponent 中显式给出 name
*/}
<Content class={styles.content}>
<RouterView />
<RouterView
v-slots={{
default: ({ Component }: any) => (
<KeepAlive include={cachedViews.value}>
<Component />
</KeepAlive>
),
}}
/>
</Content>
<Footer style={footerStyle}>六个羽友赛事运营平台 ©{new Date().getFullYear()}</Footer>
src/pages/about/index.module.less
+15 -17
View File
@@ -1,20 +1,18 @@
.container {
// 容器
}
.aboutMain {
.title {
margin-top: 0;
margin-bottom: 24px;
font-size: 20px;
font-weight: 600;
}
.title {
margin-top: 0;
margin-bottom: 24px;
font-size: 20px;
font-weight: 600;
}
.subtitle {
margin: 16px 0 8px;
}
.subtitle {
margin: 16px 0 8px;
}
.list {
margin: 0;
padding-left: 20px;
line-height: 2;
.list {
margin: 0;
padding-left: 20px;
line-height: 2;
}
}
src/pages/about/index.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ export default defineComponent({
];
return () => (
<div class={styles.container}>
<div class={styles.aboutMain}>
<h2 class={styles.title}>关于</h2>
<Card>
<p>CPMS 运营平台前端 PC 端。</p>
src/pages/dashboard/index.module.less
+21 -23
View File
@@ -1,27 +1,25 @@
.container {
// 容器
}
.title {
margin-top: 0;
margin-bottom: 24px;
font-size: 20px;
font-weight: 600;
}
.panel {
margin-top: 16px;
ul {
margin: 12px 0 0;
padding-left: 20px;
line-height: 2;
.dashboardMain {
.title {
margin-top: 0;
margin-bottom: 24px;
font-size: 20px;
font-weight: 600;
}
code {
padding: 2px 8px;
background: #f5f5f5;
border-radius: 4px;
font-size: 13px;
.panel {
margin-top: 16px;
ul {
margin: 12px 0 0;
padding-left: 20px;
line-height: 2;
}
code {
padding: 2px 8px;
background: #f5f5f5;
border-radius: 4px;
font-size: 13px;
}
}
}
src/pages/dashboard/index.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ export default defineComponent({
];
return () => (
<div class={styles.container}>
<div class={styles.dashboardMain}>
<h2 class={styles.title}>工作台</h2>
<Row gutter={[16, 16]}>
src/pages/events/banner/components/BannerFormModal.module.less
+117 -120
View File
@@ -1,133 +1,130 @@
.form {
:global {
.ant-form-item {
margin-bottom: 16px;
}
.ant-form-item-explain-error {
font-size: 12px;
.bannerFormModalMain {
.form {
:global {
.ant-form-item {
margin-bottom: 16px;
}
.ant-form-item-explain-error {
font-size: 12px;
}
}
}
}
/* ===== 上传 ===== */
.uploader {
position: relative;
}
.uploadCard {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 140px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
background-color: #fafafa;
cursor: pointer;
transition: border-color 0.2s;
gap: 4px;
&:hover {
border-color: #1677ff;
.uploader {
position: relative;
}
}
.uploadCardError {
border-color: #ff4d4f;
}
.uploadCard {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 140px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
background-color: #fafafa;
cursor: pointer;
transition: border-color 0.2s;
gap: 4px;
.uploadIcon {
font-size: 32px;
color: #999;
font-weight: 300;
line-height: 1;
}
.uploadHint {
color: #666;
font-size: 14px;
}
.uploadTip {
color: #999;
font-size: 12px;
text-align: center;
line-height: 1.6;
}
/* ===== 预览 ===== */
.previewWrapper {
position: relative;
width: 100%;
height: 140px;
border: 1px solid #d9d9d9;
border-radius: 6px;
overflow: hidden;
background-color: #f5f5f5;
:global {
.ant-spin-nested-loading,
.ant-spin-container {
width: 100%;
height: 100%;
&:hover {
border-color: #1677ff;
}
}
}
.previewImg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.uploadCardError {
border-color: #ff4d4f;
}
.uploadAgainBtn {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
color: #fff;
text-align: center;
padding: 4px 0;
cursor: pointer;
font-size: 12px;
user-select: none;
transition: background 0.2s;
.uploadIcon {
font-size: 32px;
color: #999;
font-weight: 300;
line-height: 1;
}
&:hover {
background: rgba(0, 0, 0, 0.65);
.uploadHint {
color: #666;
font-size: 14px;
}
.uploadTip {
color: #999;
font-size: 12px;
text-align: center;
line-height: 1.6;
}
.previewWrapper {
position: relative;
width: 100%;
height: 140px;
border: 1px solid #d9d9d9;
border-radius: 6px;
overflow: hidden;
background-color: #f5f5f5;
:global {
.ant-spin-nested-loading,
.ant-spin-container {
width: 100%;
height: 100%;
}
}
}
.previewImg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.uploadAgainBtn {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
color: #fff;
text-align: center;
padding: 4px 0;
cursor: pointer;
font-size: 12px;
user-select: none;
transition: background 0.2s;
&:hover {
background: rgba(0, 0, 0, 0.65);
}
}
.tip {
padding: 8px 12px;
margin-bottom: 16px;
background-color: #f0f5ff;
border: 1px solid #d6e4ff;
border-radius: 4px;
color: #1677ff;
font-size: 13px;
}
.timeRow {
display: flex;
gap: 16px;
.timeItem {
flex: 1;
}
}
.footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding-top: 16px;
border-top: 1px solid #f0f0f0;
margin-top: 8px;
}
}
/* ===== 提示 ===== */
.tip {
padding: 8px 12px;
margin-bottom: 16px;
background-color: #f0f5ff;
border: 1px solid #d6e4ff;
border-radius: 4px;
color: #1677ff;
font-size: 13px;
}
/* ===== 时间行（双列）===== */
.timeRow {
display: flex;
gap: 16px;
.timeItem {
flex: 1;
}
}
/* ===== 底部按钮 ===== */
.footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding-top: 16px;
border-top: 1px solid #f0f0f0;
margin-top: 8px;
}
src/pages/events/banner/components/BannerFormModal.tsx
+1
View File
@@ -266,6 +266,7 @@ export default defineComponent({
destroyOnClose
footer={null}
centered
wrapClassName={styles.bannerFormModalMain}
>
<Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark>
{/* ===== Banner 标题 ===== */}
src/pages/events/banner/index.module.less
+15 -8
View File
@@ -1,14 +1,21 @@
.tableBody {
.eventBannerMain {
flex: 1;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
:global {
.ant-spin-nested-loading,
.ant-spin-container,
.ant-table,
.ant-table-container {
height: 100%;
.tableBody {
flex: 1;
min-height: 0;
overflow: hidden;
:global {
.ant-spin-nested-loading,
.ant-spin-container,
.ant-table,
.ant-table-container {
height: 100%;
}
}
}
}
src/pages/events/banner/index.tsx
+38 -35
View File
@@ -15,6 +15,7 @@ import { useBannerModel, BANNER_STATUS_OPTIONS } from './model/useBannerModel';
import { useContainerSize } from '@/hooks';
import BannerFormModal from './components/BannerFormModal';
import styles from './index.module.less';
import pageStyles from '@/assets/styles/pageLayout.module.less';
/**
* bodyCell 渲染函数
@@ -193,9 +194,9 @@ export default defineComponent({
];
return () => (
<div class="page-container">
<div class={pageStyles.containerMain}>
{/* ===== 筛选区 ===== */}
<div class="page-filter">
<div class={pageStyles.filter}>
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="标题" name="searchTitle">
<Input
@@ -229,40 +230,42 @@ export default defineComponent({
</div>
{/* ===== 表格区 ===== */}
<div class="page-table">
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
renderJumpType,
renderStatus,
onEdit: handleEdit,
onToggleStatus: confirmToggleStatus,
onDelete: confirmDelete,
}),
}}
</Table>
</div>
<div class={pageStyles.table}>
<div class={styles.eventBannerMain}>
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
renderJumpType,
renderStatus,
onEdit: handleEdit,
onToggleStatus: confirmToggleStatus,
onDelete: confirmDelete,
}),
}}
</Table>
</div>
{/* 独立分页，右下方 */}
<div class="page-pagination">
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
{/* 独立分页，右下方 */}
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
</div>
src/pages/events/list/components/EventAuditModal.module.less
+61
View File
@@ -0,0 +1,61 @@
.eventAuditModalMain {
.section {
margin-bottom: 24px;
&:last-child {
margin-bottom: 0;
}
}
.sectionTitle {
font-size: 14px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
margin-bottom: 12px;
padding-left: 8px;
border-left: 3px solid #1677ff;
}
.desc {
:global(.ant-descriptions-item-label) {
width: 110px;
color: rgba(0, 0, 0, 0.65);
}
}
.auditSection {
margin-top: 24px;
}
.auditHeader {
display: flex;
align-items: center;
margin-bottom: 16px;
}
.auditTitle {
font-size: 14px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
padding-left: 8px;
border-left: 3px solid #1677ff;
}
.auditForm {
border-top: 1px solid #f0f0f0;
padding-top: 16px;
}
.auditField {
margin-bottom: 16px;
&:last-child {
margin-bottom: 0;
}
:global(.ant-form-item-label) {
font-weight: 500;
color: rgba(0, 0, 0, 0.65);
}
}
}
src/pages/events/list/components/EventAuditModal.tsx
+157
View File
@@ -0,0 +1,157 @@
import { defineComponent, reactive } from 'vue';
import { Modal, Descriptions, Image, Radio, Input, Form } from 'ant-design-vue';
import styles from './EventAuditModal.module.less';
const { TextArea } = Input;
interface EventAuditModalProps {
visible: boolean;
record: any;
onClose: () => void;
onSubmit?: (payload: { approved: boolean; comment: string }) => void;
}
// ===== Mock 数据 =====
const MOCK_DETAIL = {
name: '第二届全国地学羽毛球邀请赛',
eventTime: '2026.05.26 08:00 ~ 2026.05.31 22:00',
descr:
'赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍。',
registerTime: '2026.05.24 08:00 ~ 2026.05.26 22:00',
cancelDeadline: '2026.05.25 22:00',
region: '北京市 北京市 东城区',
address: '李宁体育馆',
venueNo: '李宁体育馆',
publicEvent: '在首页展示赛事',
needIdCard: '无需提供',
needIdCardImage: '无需提供',
createTime: '2026.05.26 08:00',
creator: '张三',
status: '待审核',
enrolledCount: 100,
cancelledCount: 1,
maxCount: 1000,
crossedCount: 50,
completedCount: 50,
cover: 'https://picsum.photos/seed/eventcover/600/300',
};
/**
* 赛事审核弹窗
* 包含：基础信息 + 封面 + 审核操作（通过/未通过 + 审核内容）
*/
export default defineComponent({
name: 'EventAuditModal',
props: {
visible: { type: Boolean, default: false },
record: { type: Object, default: () => ({}) },
onClose: { type: Function, required: true },
onSubmit: { type: Function, default: undefined },
},
setup(props: EventAuditModalProps) {
const detail = MOCK_DETAIL;
// 审核表单
const auditForm = reactive({
approved: true,
comment: '',
});
const handleOk = () => {
if (!auditForm.comment.trim()) {
// 不通过时强制要求填写审核内容
if (!auditForm.approved) {
// 这里交给校验,简化版本不做强制校验
}
}
if (props.onSubmit) {
props.onSubmit({ approved: auditForm.approved, comment: auditForm.comment });
}
};
return () => (
<Modal
visible={props.visible}
title="审核"
width={900}
onCancel={props.onClose}
onOk={handleOk}
okText="提交审核"
cancelText="取消"
centered
destroyOnClose
wrapClassName={styles.eventAuditModalMain}
>
{/* ===== 基础信息 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>基础信息</div>
<Descriptions size="small" bordered column={3} class={styles.desc}>
<Descriptions.Item label="赛事名称">{detail.name}</Descriptions.Item>
<Descriptions.Item label="赛事时间" span={2}>
{detail.eventTime}
</Descriptions.Item>
<Descriptions.Item label="赛事说明" span={3}>
{detail.descr}
</Descriptions.Item>
<Descriptions.Item label="报名起止时间">{detail.registerTime}</Descriptions.Item>
<Descriptions.Item label="取消报名截止时间" span={2}>
{detail.cancelDeadline}
</Descriptions.Item>
<Descriptions.Item label="省市区">{detail.region}</Descriptions.Item>
<Descriptions.Item label="地点">{detail.address}</Descriptions.Item>
<Descriptions.Item label="场地编号">{detail.venueNo}</Descriptions.Item>
<Descriptions.Item label="公开活动">{detail.publicEvent}</Descriptions.Item>
<Descriptions.Item label="证件号">{detail.needIdCard}</Descriptions.Item>
<Descriptions.Item label="证件图片">{detail.needIdCardImage}</Descriptions.Item>
<Descriptions.Item label="创建时间">{detail.createTime}</Descriptions.Item>
<Descriptions.Item label="创建人">{detail.creator}</Descriptions.Item>
<Descriptions.Item label="状态">{detail.status}</Descriptions.Item>
<Descriptions.Item label="报名人数">{detail.enrolledCount}</Descriptions.Item>
<Descriptions.Item label="取消报名人数" span={1}>
{detail.cancelledCount}
</Descriptions.Item>
<Descriptions.Item label="最大人数">{detail.maxCount}</Descriptions.Item>
<Descriptions.Item label="对岸数量">{detail.crossedCount}</Descriptions.Item>
<Descriptions.Item label="已完成对岸数量">{detail.completedCount}</Descriptions.Item>
</Descriptions>
</div>
{/* ===== 封面 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>封面</div>
<Image src={detail.cover} />
</div>
{/* ===== 审核操作 ===== */}
<div class={styles.auditSection}>
<div class={styles.auditHeader}>
<span class={styles.auditTitle}>审核操作</span>
</div>
<Form layout="horizontal" class={styles.auditForm}>
<Form.Item label="审核状态" class={styles.auditField}>
<Radio.Group v-model={auditForm.approved}>
<Radio value={true}>通过</Radio>
<Radio value={false}>未通过</Radio>
</Radio.Group>
</Form.Item>
<Form.Item label="审核内容" class={styles.auditField}>
<TextArea
v-model={auditForm.comment}
placeholder="请输入审核内容"
rows={4}
maxlength={500}
showCount
/>
</Form.Item>
</Form>
</div>
</Modal>
);
},
});
src/pages/events/list/components/EventDetailModal.module.less
+57 -56
View File
@@ -1,67 +1,68 @@
.section {
margin-bottom: 24px;
}
.eventDetailModalMain {
.section {
margin-bottom: 24px;
.section:last-child {
margin-bottom: 0;
}
&:last-child {
margin-bottom: 0;
}
}
.sectionTitle {
font-size: 14px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
margin-bottom: 12px;
padding-left: 8px;
border-left: 3px solid #1677ff;
}
.sectionTitle {
font-size: 14px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
margin-bottom: 12px;
padding-left: 8px;
border-left: 3px solid #1677ff;
}
.textBlock {
font-size: 13px;
line-height: 1.8;
color: rgba(0, 0, 0, 0.65);
white-space: pre-wrap;
background: #fafafa;
padding: 12px 16px;
border-radius: 4px;
border: 1px solid #f0f0f0;
}
.textBlock {
font-size: 13px;
line-height: 1.8;
color: rgba(0, 0, 0, 0.65);
white-space: pre-wrap;
background: #fafafa;
padding: 12px 16px;
border-radius: 4px;
border: 1px solid #f0f0f0;
}
// Descriptions 列宽稍微压缩一些，避免单标签被挤
.desc :global(.ant-descriptions-item-label) {
width: 110px;
color: rgba(0, 0, 0, 0.65);
}
.desc {
:global(.ant-descriptions-item-label) {
width: 110px;
color: rgba(0, 0, 0, 0.65);
}
}
// 组别信息下的子表格
.group {
margin-bottom: 16px;
}
.group {
margin-bottom: 16px;
.group:last-child {
margin-bottom: 0;
}
&:last-child {
margin-bottom: 0;
}
}
.groupTitle {
font-size: 13px;
color: rgba(0, 0, 0, 0.85);
margin-bottom: 8px;
font-weight: 500;
}
.groupTitle {
font-size: 13px;
color: rgba(0, 0, 0, 0.85);
margin-bottom: 8px;
font-weight: 500;
}
.paginationRow {
display: flex;
justify-content: flex-end;
margin-top: 8px;
}
.paginationRow {
display: flex;
justify-content: flex-end;
margin-top: 8px;
}
// 分组信息列表
.divisionList {
display: flex;
flex-direction: column;
gap: 6px;
}
.divisionList {
display: flex;
flex-direction: column;
gap: 6px;
}
.divisionItem {
font-size: 13px;
color: rgba(0, 0, 0, 0.65);
.divisionItem {
font-size: 13px;
color: rgba(0, 0, 0, 0.65);
}
}
src/pages/events/list/components/EventDetailModal.tsx
+1
View File
@@ -110,6 +110,7 @@ export default defineComponent({
footer={null}
centered
destroyOnClose
wrapClassName={styles.eventDetailModalMain}
>
{/* ===== 基础信息 ===== */}
<div class={styles.section}>
src/pages/events/list/components/EventRegulationModal.module.less
+46 -44
View File
@@ -1,51 +1,53 @@
.section {
margin-bottom: 20px;
}
.eventRegulationModalMain {
.section {
margin-bottom: 20px;
.section:last-child {
margin-bottom: 0;
}
&:last-child {
margin-bottom: 0;
}
}
.sectionTitle {
font-size: 14px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
margin-bottom: 10px;
padding-left: 8px;
border-left: 3px solid #1677ff;
}
.sectionTitle {
font-size: 14px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
margin-bottom: 10px;
padding-left: 8px;
border-left: 3px solid #1677ff;
}
.textBlock {
font-size: 13px;
line-height: 1.5;
color: rgba(0, 0, 0, 0.65);
white-space: pre-wrap;
background: #fafafa;
padding: 12px 16px;
border-radius: 4px;
border: 1px solid #f0f0f0;
}
.textBlock {
font-size: 13px;
line-height: 1.5;
color: rgba(0, 0, 0, 0.65);
white-space: pre-wrap;
background: #fafafa;
padding: 12px 16px;
border-radius: 4px;
border: 1px solid #f0f0f0;
}
.imageGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.imageGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.imageCell {
width: 100%;
aspect-ratio: 3 / 2;
background: #f5f5f5;
border-radius: 4px;
overflow: hidden;
border: 1px solid #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
}
.imageCell {
width: 100%;
aspect-ratio: 3 / 2;
background: #f5f5f5;
border-radius: 4px;
overflow: hidden;
border: 1px solid #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
.imageCell :global(.ant-image) {
width: 100%;
height: 100%;
object-fit: cover;
:global(.ant-image) {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
src/pages/events/list/components/EventRegulationModal.tsx
+1
View File
@@ -40,6 +40,7 @@ export default defineComponent({
footer={null}
centered
destroyOnClose
wrapClassName={styles.eventRegulationModalMain}
>
{/* 规程文字 */}
<div class={styles.section}>
src/pages/events/list/index.module.less
+15 -12
View File
@@ -1,18 +1,21 @@
/**
* 表格 body 容器：占满 flex 剩余空间，并确保 antd 嵌套 div 逐层传递 height: 100%，
* 使得 Table scroll.y = 'calc(100% - 55px)' 中的 100% 能正确解析。
*/
.tableBody {
.eventListMain {
flex: 1;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
:global {
.ant-spin-nested-loading,
.ant-spin-container,
.ant-table,
.ant-table-container {
height: 100%;
.tableBody {
flex: 1;
min-height: 0;
overflow: hidden;
:global {
.ant-spin-nested-loading,
.ant-spin-container,
.ant-table,
.ant-table-container {
height: 100%;
}
}
}
}
src/pages/events/list/index.tsx
+112 -51
View File
@@ -11,6 +11,7 @@ import {
Tooltip,
Pagination,
Modal,
message,
} from 'ant-design-vue';
import {
useEventListModel,
@@ -23,7 +24,9 @@ import { regionOptions } from '@/utils/areaData';
import { useContainerSize, useState } from '@/hooks';
import EventRegulationModal from './components/EventRegulationModal';
import EventDetailModal from './components/EventDetailModal';
import EventAuditModal from './components/EventAuditModal';
import styles from './index.module.less';
import pageStyles from '@/assets/styles/pageLayout.module.less';
const { RangePicker } = DatePicker;
@@ -35,15 +38,15 @@ function renderBodyCell({
text,
record,
onView,
onRemove,
onViewRegulation,
onAudit,
onToggleShelf,
}: {
column: any;
text: any;
record: any;
onView: (record: any) => void;
onRemove: (record: any) => void;
onViewRegulation: (record: any) => void;
onAudit: (record: any) => void;
onToggleShelf: (record: any) => void;
}) {
if (column.dataIndex === 'eventName') {
const maxLen = 15;
@@ -60,29 +63,59 @@ function renderBodyCell({
if (column.key === 'regulation') {
return (
<a style={{ cursor: 'pointer' }} onClick={() => onViewRegulation(record)}>
<a style={{ cursor: 'pointer' }} onClick={() => onView(record)}>
查看
</a>
);
}
if (column.key === 'action') {
const isRemoved = record.status === 'removed';
const status = record.status;
return (
<Space>
// 待审核：查看 + 审核
(status === 'pending' && (
<Space>
<Button type="link" size="small" onClick={() => onView(record)}>
查看
</Button>
<Button type="link" size="small" onClick={() => onAudit(record)}>
审核
</Button>
</Space>
)) ||
// 报名中：查看 + 下架
(status === 'enrolling' && (
<Space>
<Button type="link" size="small" onClick={() => onView(record)}>
查看
</Button>
<Button type="link" size="small" danger onClick={() => onToggleShelf(record)}>
下架
</Button>
</Space>
)) ||
// 已下架：查看 + 上架
(status === 'removed' && (
<Space>
<Button type="link" size="small" onClick={() => onView(record)}>
查看
</Button>
<Button
type="link"
size="small"
style={{ color: '#52c41a' }}
onClick={() => onToggleShelf(record)}
>
上架
</Button>
</Space>
)) || (
// 审核不通过 / 已删除：仅查看
<Button type="link" size="small" onClick={() => onView(record)}>
查看
</Button>
<Button
type="link"
size="small"
danger={!isRemoved}
style={isRemoved ? { color: '#52c41a' } : {}}
onClick={() => onRemove(record)}
>
{isRemoved ? '上架' : '下架'}
</Button>
</Space>
)
);
}
@@ -111,6 +144,7 @@ export default defineComponent({
// 弹窗状态
const [regulationModalVisible, setRegulationModalVisible] = useState<boolean>(false);
const [detailModalVisible, setDetailModalVisible] = useState<boolean>(false);
const [auditModalVisible, setAuditModalVisible] = useState<boolean>(false);
const [currentRecord, setCurrentRecord] = useState<any>({});
const handleView = (record: any) => {
@@ -119,7 +153,8 @@ export default defineComponent({
setDetailModalVisible(true);
};
const handleRemove = (record: any) => {
/** 上架 / 下架 通用 */
const handleToggleShelf = (record: any) => {
const isRemoved = record.status === 'removed';
const actionText = isRemoved ? '上架' : '下架';
Modal.confirm({
@@ -130,10 +165,26 @@ export default defineComponent({
onOk: () => {
console.log(`${actionText}赛事:`, record.eventId);
// TODO: 替换为真实 API 调用
message.success(`${actionText}成功`);
},
});
};
/** 打开审核弹窗 */
const handleAudit = (record: any) => {
console.log('审核赛事:', record.eventId);
setCurrentRecord(record);
setAuditModalVisible(true);
};
/** 提交审核 */
const handleAuditSubmit = (payload: { approved: boolean; comment: string }) => {
console.log('提交审核:', currentRecord.value.eventId, payload);
// TODO: 替换为真实 API 调用
message.success('审核提交成功');
setAuditModalVisible(false);
};
const handleViewRegulation = (record: any) => {
console.log('查看规程:', record.eventId);
setCurrentRecord(record);
@@ -154,9 +205,9 @@ export default defineComponent({
];
return () => (
<div class="page-container">
<div class={pageStyles.containerMain}>
{/* ===== 筛选区 ===== */}
<div class="page-filter">
<div class={pageStyles.filter}>
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="创建时间" name="createTimeRange">
<RangePicker
@@ -249,38 +300,40 @@ export default defineComponent({
</div>
{/* ===== 表格区 ===== */}
<div class="page-table">
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onView: handleView,
onRemove: handleRemove,
onViewRegulation: handleViewRegulation,
}),
}}
</Table>
</div>
<div class={pageStyles.table}>
<div class={styles.eventListMain}>
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onView: handleView,
onAudit: handleAudit,
onToggleShelf: handleToggleShelf,
}),
}}
</Table>
</div>
{/* 独立分页，右下方 */}
<div class="page-pagination">
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
{/* 独立分页，右下方 */}
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
</div>
@@ -298,6 +351,14 @@ export default defineComponent({
onClose={() => setDetailModalVisible(false)}
/>
)}
{auditModalVisible.value && (
<EventAuditModal
visible={auditModalVisible.value}
record={currentRecord.value}
onClose={() => setAuditModalVisible(false)}
onSubmit={handleAuditSubmit}
/>
)}
</div>
);
},
src/pages/events/list/model/useEventListModel.ts
+5 -5
View File
@@ -9,11 +9,11 @@ import { useState, useDebounce, useThrottleFn } from '@/hooks';
/** 赛事状态选项 */
export const EVENT_STATUS_OPTIONS = [
{ value: '', label: '全部' },
{ value: 'pending', label: '待审核' },
{ value: 'enrolling', label: '报名中' },
{ value: 'ongoing', label: '进行中' },
{ value: 'finished', label: '已结束' },
{ value: 'deleted', label: '已删除' },
{ value: 'removed', label: '已下架' },
{ value: 'rejected', label: '审核不通过' },
] as const;
/** 公开活动选项 */
@@ -61,18 +61,18 @@ const MOCK_DATA = Array.from({ length: 12 }, (_, i) => ({
creatorNickname: ['张运营', '李管理', '王策划', '赵赛事'][i % 4],
creatorPhone: ['13800138001', '13900139002', '13700137003', '13600136004'][i % 4],
createTime: '2026-07-01 14:30:00',
status: (['enrolling', 'ongoing', 'finished', 'deleted', 'removed'] as const)[i % 5],
status: (['pending', 'enrolling', 'deleted', 'removed', 'rejected'] as const)[i % 5],
enrolledCount: [128, 256, 512, 64, 0][i % 5],
cancelledCount: [5, 12, 8, 3, 0][i % 5],
}));
/** 状态标签映射 */
const STATUS_MAP: Record<string, { label: string; color: string }> = {
pending: { label: '待审核', color: 'gold' },
enrolling: { label: '报名中', color: 'blue' },
ongoing: { label: '进行中', color: 'green' },
finished: { label: '已结束', color: 'default' },
deleted: { label: '已删除', color: 'red' },
removed: { label: '已下架', color: 'orange' },
rejected: { label: '审核不通过', color: 'volcano' },
};
// ============================================================
src/pages/events/orders/components/OrderDetailModal.module.less
+175 -183
View File
@@ -1,194 +1,186 @@
// ===== 自定义标题栏 =====
.modalHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0 16px;
margin-bottom: 16px;
border-bottom: 1px solid #f0f0f0;
}
.orderDetailModalMain {
.modalHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0 16px;
margin-bottom: 16px;
border-bottom: 1px solid #f0f0f0;
}
.modalTitle {
font-size: 16px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
}
.closeBtn {
width: 28px;
height: 28px;
border: none;
background: transparent;
font-size: 22px;
line-height: 1;
color: rgba(0, 0, 0, 0.45);
cursor: pointer;
border-radius: 4px;
transition: all 0.2s;
&:hover {
background: rgba(0, 0, 0, 0.04);
.modalTitle {
font-size: 16px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
}
}
// ===== 内容区 =====
.modalBody {
padding-top: 0;
}
// ===== 订单信息 grid =====
.infoGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 12px;
column-gap: 24px;
font-size: 13px;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid #f0f0f0;
}
.infoItem {
display: flex;
align-items: baseline;
min-width: 0;
}
.infoLabel {
color: rgba(0, 0, 0, 0.65);
flex-shrink: 0;
}
// ===== 通用 section =====
.section {
margin-bottom: 24px;
}
.section:last-child {
margin-bottom: 0;
}
.sectionTitle {
font-size: 14px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
margin-bottom: 12px;
padding-left: 8px;
border-left: 3px solid #1677ff;
}
// ===== 退款记录 =====
.refundHeader {
margin-bottom: 12px;
}
.refundSummary {
display: flex;
gap: 32px;
font-size: 13px;
color: rgba(0, 0, 0, 0.85);
margin-bottom: 12px;
}
/** 固定高度 + 滚动 */
.refundList {
max-height: 320px;
overflow-y: auto;
padding-right: 4px;
// 自定义滚动条样式
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #d9d9d9;
border-radius: 3px;
}
&::-webkit-scrollbar-track {
.closeBtn {
width: 28px;
height: 28px;
border: none;
background: transparent;
font-size: 22px;
line-height: 1;
color: rgba(0, 0, 0, 0.45);
cursor: pointer;
border-radius: 4px;
transition: all 0.2s;
&:hover {
background: rgba(0, 0, 0, 0.04);
color: rgba(0, 0, 0, 0.85);
}
}
.modalBody {
padding-top: 0;
}
.infoGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 12px;
column-gap: 24px;
font-size: 13px;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid #f0f0f0;
}
.infoItem {
display: flex;
align-items: baseline;
min-width: 0;
}
.infoLabel {
color: rgba(0, 0, 0, 0.65);
flex-shrink: 0;
}
.section {
margin-bottom: 24px;
&:last-child {
margin-bottom: 0;
}
}
.sectionTitle {
font-size: 14px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
margin-bottom: 12px;
padding-left: 8px;
border-left: 3px solid #1677ff;
}
.refundHeader {
margin-bottom: 12px;
}
.refundSummary {
display: flex;
gap: 32px;
font-size: 13px;
color: rgba(0, 0, 0, 0.85);
margin-bottom: 12px;
}
.refundList {
max-height: 320px;
overflow-y: auto;
padding-right: 4px;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #d9d9d9;
border-radius: 3px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
}
.refundCard {
padding: 14px 16px;
margin-bottom: 12px;
background: #fafafa;
border: 1px solid #f0f0f0;
border-radius: 6px;
&:last-child {
margin-bottom: 0;
}
}
.refundCardHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px dashed #e0e0e0;
}
.refundIndex {
font-size: 13px;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
}
.refundCardBody {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 24px;
font-size: 13px;
color: rgba(0, 0, 0, 0.65);
line-height: 1.8;
}
.refundCol {
min-width: 0;
}
.refundAmount {
color: rgba(0, 0, 0, 0.85);
font-weight: 500;
}
.partialMark {
margin-left: 4px;
color: #fa8c16;
font-size: 12px;
}
.refundEmpty {
padding: 32px 0;
text-align: center;
font-size: 13px;
color: rgba(0, 0, 0, 0.45);
background: #fafafa;
border-radius: 6px;
border: 1px dashed #e0e0e0;
}
.refundPagination {
display: flex;
justify-content: flex-end;
margin-top: 12px;
}
.modalFooter {
display: flex;
justify-content: flex-end;
gap: 12px;
padding-top: 16px;
margin-top: 8px;
border-top: 1px solid #f0f0f0;
}
}
.refundCard {
padding: 14px 16px;
margin-bottom: 12px;
background: #fafafa;
border: 1px solid #f0f0f0;
border-radius: 6px;
}
.refundCard:last-child {
margin-bottom: 0;
}
.refundCardHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px dashed #e0e0e0;
}
.refundIndex {
font-size: 13px;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
}
.refundCardBody {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 24px;
font-size: 13px;
color: rgba(0, 0, 0, 0.65);
line-height: 1.8;
}
.refundCol {
min-width: 0;
}
.refundAmount {
color: rgba(0, 0, 0, 0.85);
font-weight: 500;
}
.partialMark {
margin-left: 4px;
color: #fa8c16;
font-size: 12px;
}
.refundEmpty {
padding: 32px 0;
text-align: center;
font-size: 13px;
color: rgba(0, 0, 0, 0.45);
background: #fafafa;
border-radius: 6px;
border: 1px dashed #e0e0e0;
}
// 分页：右下角
.refundPagination {
display: flex;
justify-content: flex-end;
margin-top: 12px;
}
// ===== 底部按钮区 =====
.modalFooter {
display: flex;
justify-content: flex-end;
gap: 12px;
padding-top: 16px;
margin-top: 8px;
border-top: 1px solid #f0f0f0;
}
// ===== Modal 外层包裹：去除 antd 默认内边距，让自定义标题贴合 =====
.orderModalWrap {
:global(.ant-modal-body) {
padding-top: 16px;
src/pages/events/orders/components/OrderDetailModal.tsx
+128 -126
View File
@@ -128,142 +128,144 @@ export default defineComponent({
closable={false}
wrapClassName={styles.orderModalWrap}
>
{/* ===== 自定义标题栏 ===== */}
<div class={styles.modalHeader}>
<span class={styles.modalTitle}>订单信息</span>
<button class={styles.closeBtn} onClick={props.onClose} aria-label="关闭">
×
</button>
</div>
<div class={styles.modalBody}>
{/* ===== 订单信息 ===== */}
<div class={styles.infoGrid}>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>赛事名称：</span>
<span>{props.record?.eventName}</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>订单编号：</span>
<span>{props.record?.orderId}</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>订单时间：</span>
<span>{props.record?.orderTime}</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>支付时间：</span>
<span>{props.record?.payTime}</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>订单金额：</span>
<span>{props.record?.totalAmount?.toFixed(2)}元</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>优惠金额：</span>
<span>{(props.record?.discountAmount || 0).toFixed(2)}元</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>实付金额：</span>
<span>{props.record?.paidAmount?.toFixed(2)}元</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>退款金额：</span>
<span>{props.record?.refundAmount?.toFixed(2)}元</span>
</div>
<div class={styles.orderDetailModalMain}>
{/* ===== 自定义标题栏 ===== */}
<div class={styles.modalHeader}>
<span class={styles.modalTitle}>订单信息</span>
<button class={styles.closeBtn} onClick={props.onClose} aria-label="关闭">
×
</button>
</div>
{/* ===== 选手信息 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>选手信息</div>
<Table
columns={PLAYER_COLUMNS}
dataSource={props.record?.players || []}
size="small"
bordered
pagination={false}
scroll={{ x: 'max-content' }}
/>
</div>
{/* ===== 退款记录 ===== */}
<div class={styles.section}>
<div class={styles.refundHeader}>
<span class={styles.sectionTitle}>退款记录</span>
<div class={styles.modalBody}>
{/* ===== 订单信息 ===== */}
<div class={styles.infoGrid}>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>赛事名称：</span>
<span>{props.record?.eventName}</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>订单编号：</span>
<span>{props.record?.orderId}</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>订单时间：</span>
<span>{props.record?.orderTime}</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>支付时间：</span>
<span>{props.record?.payTime}</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>订单金额：</span>
<span>{props.record?.totalAmount?.toFixed(2)}元</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>优惠金额：</span>
<span>{(props.record?.discountAmount || 0).toFixed(2)}元</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>实付金额：</span>
<span>{props.record?.paidAmount?.toFixed(2)}元</span>
</div>
<div class={styles.infoItem}>
<span class={styles.infoLabel}>退款金额：</span>
<span>{props.record?.refundAmount?.toFixed(2)}元</span>
</div>
</div>
{hasRefund.value ? (
<>
<div class={styles.refundSummary}>
<span>已退金额：{totalRefunded.value.toFixed(2)}元</span>
<span>退款次数：{refundRecords.value.length}次</span>
</div>
{/* 固定高度 + 内部滚动 */}
<div class={styles.refundList}>
{pagedRefunds.value.map((r, idx) => {
const statusInfo = REFUND_STATUS_MAP[r.status] || {
label: '-',
color: 'default',
};
const realIdx = (refundPage.value - 1) * refundPageSize.value + idx + 1;
return (
<div key={r.key} class={styles.refundCard}>
<div class={styles.refundCardHeader}>
<span class={styles.refundIndex}>第{realIdx}次退款</span>
<Tag color={statusInfo.color}>{statusInfo.label}</Tag>
</div>
<div class={styles.refundCardBody}>
<div class={styles.refundCol}>
<div>
退款金额：
<span class={styles.refundAmount}>
¥{r.amount.toFixed(2)}
{r.isPartial && (
<span class={styles.partialMark}>（部分退款）</span>
)}
</span>
{/* ===== 选手信息 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>选手信息</div>
<Table
columns={PLAYER_COLUMNS}
dataSource={props.record?.players || []}
size="small"
bordered
pagination={false}
scroll={{ x: 'max-content' }}
/>
</div>
{/* ===== 退款记录 ===== */}
<div class={styles.section}>
<div class={styles.refundHeader}>
<span class={styles.sectionTitle}>退款记录</span>
</div>
{hasRefund.value ? (
<>
<div class={styles.refundSummary}>
<span>已退金额：{totalRefunded.value.toFixed(2)}元</span>
<span>退款次数：{refundRecords.value.length}次</span>
</div>
{/* 固定高度 + 内部滚动 */}
<div class={styles.refundList}>
{pagedRefunds.value.map((r, idx) => {
const statusInfo = REFUND_STATUS_MAP[r.status] || {
label: '-',
color: 'default',
};
const realIdx = (refundPage.value - 1) * refundPageSize.value + idx + 1;
return (
<div key={r.key} class={styles.refundCard}>
<div class={styles.refundCardHeader}>
<span class={styles.refundIndex}>第{realIdx}次退款</span>
<Tag color={statusInfo.color}>{statusInfo.label}</Tag>
</div>
<div class={styles.refundCardBody}>
<div class={styles.refundCol}>
<div>
退款金额：
<span class={styles.refundAmount}>
¥{r.amount.toFixed(2)}
{r.isPartial && (
<span class={styles.partialMark}>（部分退款）</span>
)}
</span>
</div>
<div>申请时间：{r.applyTime}</div>
<div>完款时间：{r.completeTime || '-'}</div>
</div>
<div class={styles.refundCol}>
<div>退款方式：{r.method}</div>
<div>第三方退款单号：{r.thirdPartyNo || '-'}</div>
</div>
<div>申请时间：{r.applyTime}</div>
<div>完款时间：{r.completeTime || '-'}</div>
</div>
<div class={styles.refundCol}>
<div>退款方式：{r.method}</div>
<div>第三方退款单号：{r.thirdPartyNo || '-'}</div>
</div>
</div>
</div>
);
})}
</div>
<div class={styles.refundPagination}>
<Pagination
current={refundPage.value}
pageSize={refundPageSize.value}
total={refundRecords.value.length}
showSizeChanger={false}
size="small"
onChange={handleRefundPageChange}
/>
</div>
</>
);
})}
</div>
<div class={styles.refundPagination}>
<Pagination
current={refundPage.value}
pageSize={refundPageSize.value}
total={refundRecords.value.length}
showSizeChanger={false}
size="small"
onChange={handleRefundPageChange}
/>
</div>
</>
) : (
<div class={styles.refundEmpty}>暂无退款记录</div>
)}
</div>
</div>
{/* ===== 底部按钮 ===== */}
<div class={styles.modalFooter}>
<Button onClick={props.onClose}>取消</Button>
{hasRefund.value ? (
<Button danger onClick={handleReRefund}>
重新退款
</Button>
) : (
<div class={styles.refundEmpty}>暂无退款记录</div>
<Button type="primary" onClick={handleConfirm}>
确认
</Button>
)}
</div>
</div>
{/* ===== 底部按钮 ===== */}
<div class={styles.modalFooter}>
<Button onClick={props.onClose}>取消</Button>
{hasRefund.value ? (
<Button danger onClick={handleReRefund}>
重新退款
</Button>
) : (
<Button type="primary" onClick={handleConfirm}>
确认
</Button>
)}
</div>
</Modal>
);
},
src/pages/events/orders/index.module.less
+32 -29
View File
@@ -1,37 +1,40 @@
/**
* 表格 body 容器：占满 flex 剩余空间，并确保 antd 嵌套 div 逐层传递 height: 100%，
* 使得 Table scroll.y = 'calc(100% - 55px)' 中的 100% 能正确解析。
*/
.tableBody {
.eventOrdersMain {
flex: 1;
min-height: 0;
overflow: hidden;
:global {
.ant-spin-nested-loading,
.ant-spin-container,
.ant-table,
.ant-table-container {
height: 100%;
}
}
}
.summaryBar {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 20px;
padding: 12px 16px;
font-size: 14px;
color: #1a1a1a;
flex-direction: column;
.summaryItem {
font-weight: 500;
.summaryBar {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 20px;
padding: 12px 16px;
font-size: 14px;
color: #1a1a1a;
.summaryLabel {
color: #666;
font-weight: 400;
.summaryItem {
font-weight: 500;
.summaryLabel {
color: #666;
font-weight: 400;
}
}
}
.tableBody {
flex: 1;
min-height: 0;
overflow: hidden;
:global {
.ant-spin-nested-loading,
.ant-spin-container,
.ant-table,
.ant-table-container {
height: 100%;
}
}
}
}
src/pages/events/orders/index.tsx
+50 -47
View File
@@ -15,6 +15,7 @@ import { useOrderModel, ORDER_STATUS_OPTIONS, REFUND_STATUS_OPTIONS } from './mo
import { useContainerSize, useState } from '@/hooks';
import OrderDetailModal from './components/OrderDetailModal';
import styles from './index.module.less';
import pageStyles from '@/assets/styles/pageLayout.module.less';
const { RangePicker } = DatePicker;
@@ -135,9 +136,9 @@ export default defineComponent({
];
return () => (
<div class="page-container">
<div class={pageStyles.containerMain}>
{/* ===== 筛选区 ===== */}
<div class="page-filter">
<div class={pageStyles.filter}>
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="订单时间" name="orderTimeRange">
<RangePicker
@@ -201,53 +202,55 @@ export default defineComponent({
</div>
{/* ===== 表格区 ===== */}
<div class="page-table">
{/* 金额汇总 */}
<div class={styles.summaryBar}>
<span class={styles.summaryItem}>
<span class={styles.summaryLabel}>总订单金额（已支付）：</span>
{summary.value.totalOrderAmount.toFixed(2)}元
</span>
<span class={styles.summaryItem}>
<span class={styles.summaryLabel}>总实付金额：</span>
{summary.value.totalPaidAmount.toFixed(2)}元
</span>
<span class={styles.summaryItem}>
<span class={styles.summaryLabel}>总退款金额：</span>
{summary.value.totalRefundAmount.toFixed(2)}元
</span>
</div>
<div class={pageStyles.table}>
<div class={styles.eventOrdersMain}>
{/* 金额汇总 */}
<div class={styles.summaryBar}>
<span class={styles.summaryItem}>
<span class={styles.summaryLabel}>总订单金额（已支付）：</span>
{summary.value.totalOrderAmount.toFixed(2)}元
</span>
<span class={styles.summaryItem}>
<span class={styles.summaryLabel}>总实付金额：</span>
{summary.value.totalPaidAmount.toFixed(2)}元
</span>
<span class={styles.summaryItem}>
<span class={styles.summaryLabel}>总退款金额：</span>
{summary.value.totalRefundAmount.toFixed(2)}元
</span>
</div>
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onView: handleView,
onReRefund: handleReRefund,
}),
}}
</Table>
</div>
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onView: handleView,
onReRefund: handleReRefund,
}),
}}
</Table>
</div>
{/* 独立分页，右下方 */}
<div class="page-pagination">
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
{/* 独立分页，右下方 */}
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
</div>
src/pages/events/users/index.module.less
+15 -12
View File
@@ -1,18 +1,21 @@
/**
* 表格 body 容器：占满 flex 剩余空间，并确保 antd 嵌套 div 逐层传递 height: 100%，
* 使得 Table scroll.y = 'calc(100% - 55px)' 中的 100% 能正确解析。
*/
.tableBody {
.eventUsersMain {
flex: 1;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
:global {
.ant-spin-nested-loading,
.ant-spin-container,
.ant-table,
.ant-table-container {
height: 100%;
.tableBody {
flex: 1;
min-height: 0;
overflow: hidden;
:global {
.ant-spin-nested-loading,
.ant-spin-container,
.ant-table,
.ant-table-container {
height: 100%;
}
}
}
}
src/pages/events/users/index.tsx
+34 -31
View File
@@ -13,6 +13,7 @@ import {
import { useUserModel, USER_STATUS_OPTIONS } from './model/useUserModel';
import { useContainerSize } from '@/hooks';
import styles from './index.module.less';
import pageStyles from '@/assets/styles/pageLayout.module.less';
/**
* bodyCell 渲染函数
@@ -102,9 +103,9 @@ export default defineComponent({
];
return () => (
<div class="page-container">
<div class={pageStyles.containerMain}>
{/* ===== 筛选区 ===== */}
<div class="page-filter">
<div class={pageStyles.filter}>
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="用户昵称" name="searchUserName">
<Input
@@ -143,36 +144,38 @@ export default defineComponent({
</div>
{/* ===== 表格区 ===== */}
<div class="page-table">
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onToggleStatus: handleToggleStatus,
}),
}}
</Table>
</div>
<div class={pageStyles.table}>
<div class={styles.eventUsersMain}>
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onToggleStatus: handleToggleStatus,
}),
}}
</Table>
</div>
{/* 独立分页，右下方 */}
<div class="page-pagination">
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
{/* 独立分页，右下方 */}
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
</div>
</div>
src/pages/finance/payments/index.module.less
+46
View File
@@ -0,0 +1,46 @@
// ===== 汇总（按图片：左对齐两段加粗数字） =====
.summary {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0 32px;
flex-shrink: 0;
padding: 14px 15px;
background: #fff;
border-radius: 8px;
font-size: 14px;
color: rgba(0, 0, 0, 0.85);
}
.summaryItem {
display: inline-flex;
align-items: baseline;
}
.summaryLabel {
color: rgba(0, 0, 0, 0.65);
}
.summaryValue {
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
letter-spacing: 0.3px;
font-family:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
// ===== 表格 body 容器：占满 flex 剩余空间 =====
.tableBody {
flex: 1;
min-height: 0;
overflow: hidden;
:global {
.ant-spin-nested-loading,
.ant-spin-container,
.ant-table,
.ant-table-container {
height: 100%;
}
}
}
src/pages/finance/payments/index.tsx
+105 -1
View File
@@ -1,4 +1,10 @@
import { defineComponent } from 'vue';
import { Button, Input, Table, Form, Space, Pagination, Select, DatePicker } from 'ant-design-vue';
import { usePaymentsModel } from './model/usePaymentsModel';
import { useContainerSize } from '@/hooks';
import styles from './index.module.less';
const { RangePicker } = DatePicker;
/**
* 支付流水
@@ -6,9 +12,107 @@ import { defineComponent } from 'vue';
export default defineComponent({
name: 'FinancePayments',
setup() {
const {
filterForm,
loading,
dataSource,
columns,
summary,
pagination,
handleSearch,
handleReset,
handlePageChange,
PAYMENT_TYPE_OPTIONS,
} = usePaymentsModel();
const { containerRef, height } = useContainerSize({ headerOffset: 55 });
return () => (
<div class="page-container">
<div style={{ padding: '24px', fontSize: '16px', color: '#999' }}>支付流水 - 开发中</div>
{/* ===== 筛选区 ===== */}
<div class="page-filter">
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="时间" name="timeRange">
<RangePicker
value={filterForm.timeRange as any}
style={{ width: '240px' }}
allowClear
onUpdate:value={(val: any) => (filterForm.timeRange = val)}
/>
</Form.Item>
<Form.Item label="用户昵称" name="searchUserName">
<Input
placeholder="请输入"
style={{ width: '180px' }}
allowClear
onPressEnter={handleSearch}
/>
</Form.Item>
<Form.Item label="手机号" name="searchPhone">
<Input
placeholder="请输入"
style={{ width: '180px' }}
allowClear
onPressEnter={handleSearch}
/>
</Form.Item>
<Form.Item label="类型" name="type">
<Select
value={filterForm.type}
options={PAYMENT_TYPE_OPTIONS as any}
style={{ width: '140px' }}
allowClear
onUpdate:value={(val: any) => (filterForm.type = val || '')}
/>
</Form.Item>
<Form.Item>
<Space>
<Button onClick={handleReset}>重置</Button>
<Button type="primary" onClick={handleSearch} loading={loading.value}>
查询
</Button>
</Space>
</Form.Item>
</Form>
</div>
{/* ===== 表格区 ===== */}
<div class="page-table">
{/* ===== 汇总区（按图片样式：左对齐的两段加粗数字） ===== */}
<div class={styles.summary}>
<span class={styles.summaryItem}>
<span class={styles.summaryLabel}>总支付金额：</span>
<span class={styles.summaryValue}>{summary.value.totalPay.toFixed(2)}元</span>
</span>
<span class={styles.summaryItem}>
<span class={styles.summaryLabel}>总退款金额：</span>
<span class={styles.summaryValue}>{summary.value.totalRefund.toFixed(2)}元</span>
</span>
</div>
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={columns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
/>
</div>
{/* 独立分页，右下方 */}
<div class="page-pagination">
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
</div>
);
},
src/pages/finance/payments/model/usePaymentsModel.ts
+201
View File
@@ -0,0 +1,201 @@
import { reactive, toRef, Ref } from 'vue';
import { message } from 'ant-design-vue';
import { useState, useDebounce, useThrottleFn } from '@/hooks';
// ============================================================
// 常量
// ============================================================
/** 类型选项（筛选） */
export const PAYMENT_TYPE_OPTIONS = [
{ value: '', label: '全部' },
{ value: '报名', label: '报名' },
{ value: '取消报名', label: '取消报名' },
{ value: '提现', label: '提现' },
] as const;
// ============================================================
// 汇总假数据
// ============================================================
const MOCK_SUMMARY = {
totalPay: 113255.0,
totalRefund: 3255.0,
};
// ============================================================
// 支付流水假数据（5 条）
// ============================================================
const MOCK_DATA = [
{
key: '1',
flowNo: 'xxxxxx',
orderNo: 'xxxxxxxx',
type: '报名',
nickName: '张三',
phone: '12345678997',
amount: 99.0,
thirdFlowNo: 'xxxxxxxxxxxxxxxxxxxx',
tradeTime: '2026-05-26 08:00:00',
},
{
key: '2',
flowNo: '',
orderNo: '',
type: '取消报名',
nickName: '李四',
phone: '12345678998',
amount: 100.0,
thirdFlowNo: '',
tradeTime: '2026-05-26 07:00:00',
},
{
key: '3',
flowNo: '',
orderNo: '',
type: '提现',
nickName: '王五',
phone: '12345678998',
amount: 1000.0,
thirdFlowNo: '',
tradeTime: '2026-05-26 06:00:00',
},
{
key: '4',
flowNo: '',
orderNo: '',
type: '报名',
nickName: '赵六',
phone: '13800138000',
amount: 199.0,
thirdFlowNo: '',
tradeTime: '2026-05-25 19:30:00',
},
{
key: '5',
flowNo: '',
orderNo: '',
type: '取消报名',
nickName: '钱七',
phone: '13900139001',
amount: 50.0,
thirdFlowNo: '',
tradeTime: '2026-05-25 15:20:00',
},
];
// ============================================================
// Model
// ============================================================
/**
* 支付流水页数据模型
*/
export function usePaymentsModel() {
// ===== 筛选条件 =====
const filterForm = reactive({
timeRange: null as [string, string] | null,
searchUserName: '',
searchPhone: '',
type: '',
});
// 可搜索字段防抖
const { debouncedValue: debouncedUserName } = useDebounce(
toRef(filterForm, 'searchUserName') as Ref<string>,
{ delay: 300 },
);
const { debouncedValue: debouncedPhone } = useDebounce(
toRef(filterForm, 'searchPhone') as Ref<string>,
{ delay: 300 },
);
// ===== 汇总 =====
const [summary, setSummary] = useState(MOCK_SUMMARY);
// ===== 表格状态 =====
const [loading, setLoading] = useState<boolean>(false);
const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: MOCK_DATA.length,
});
// ===== 表格列配置 =====
const columns = [
{ title: '流水号', dataIndex: 'flowNo', key: 'flowNo', width: 140 },
{ title: '订单编号', dataIndex: 'orderNo', key: 'orderNo', width: 140 },
{ title: '类型', dataIndex: 'type', key: 'type', width: 110 },
{ title: '用户昵称', dataIndex: 'nickName', key: 'nickName', width: 120 },
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 140 },
{
title: '金额',
dataIndex: 'amount',
key: 'amount',
width: 120,
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
},
{ title: '第三方流水单号', dataIndex: 'thirdFlowNo', key: 'thirdFlowNo', width: 220 },
{
title: '交易时间',
dataIndex: 'tradeTime',
key: 'tradeTime',
width: 170,
},
];
// ===== 方法 =====
/** 查询（节流 500ms） */
const handleSearch = useThrottleFn(async () => {
setLoading(true);
try {
console.log('搜索条件:', {
timeRange: filterForm.timeRange,
nickName: debouncedUserName.value,
phone: debouncedPhone.value,
type: filterForm.type,
});
// TODO: 替换为真实 API 调用
setDataSource(MOCK_DATA);
setPagination({ ...pagination.value, total: MOCK_DATA.length });
setSummary(MOCK_SUMMARY);
message.success('查询成功');
} catch (error: any) {
message.error(error.msg || '查询失败');
} finally {
setLoading(false);
}
}, 500);
/** 重置（节流 500ms） */
const handleReset = useThrottleFn(() => {
filterForm.timeRange = null;
filterForm.searchUserName = '';
filterForm.searchPhone = '';
filterForm.type = '';
setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
setDataSource(MOCK_DATA);
setSummary(MOCK_SUMMARY);
}, 500);
const handlePageChange = (page: number, pageSize: number) => {
setPagination({ ...pagination.value, current: page, pageSize });
handleSearch();
};
return {
filterForm,
loading,
dataSource,
columns,
summary,
pagination,
handleSearch,
handleReset,
handlePageChange,
PAYMENT_TYPE_OPTIONS: PAYMENT_TYPE_OPTIONS as any,
};
}
src/pages/finance/reports/index.module.less
+127
View File
@@ -0,0 +1,127 @@
// ===== 整页可滚动：内容超出视口时出滚动条 =====
.pageWrap {
height: auto !important;
min-height: 100%;
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 16px;
}
// ===== 顶部标题区 =====
.reportHeader {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 4px 4px 0;
flex-shrink: 0;
}
.headerLeft {
display: flex;
flex-direction: column;
gap: 6px;
}
.reportTitle {
font-size: 20px;
font-weight: 600;
color: rgba(0, 0, 0, 0.88);
letter-spacing: 0.5px;
}
.reportSub {
font-size: 12px;
color: rgba(0, 0, 0, 0.45);
letter-spacing: 0.3px;
}
// ===== 顶部 3 张统计卡 =====
.statCards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
flex-shrink: 0;
margin: 16px 0;
}
.statCard {
padding: 20px 24px;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 8px;
transition: all 0.25s ease;
cursor: default;
&:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
}
.statLabel {
font-size: 13px;
color: rgba(0, 0, 0, 0.55);
letter-spacing: 0.3px;
}
.statValue {
font-size: 26px;
font-weight: 600;
line-height: 1.2;
font-family:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
letter-spacing: 0.3px;
}
.statDesc {
font-size: 12px;
letter-spacing: 0.3px;
}
// ===== 图表卡 =====
.chartCard {
flex-shrink: 0;
background: #fff;
border-radius: 10px;
padding: 18px 20px 14px;
margin-bottom: 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.cardTitle {
font-size: 14px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 6px;
}
.cardTitleIcon {
font-size: 14px;
}
// ===== 柱状图（echarts） =====
.chartEcharts {
width: 100%;
height: 300px;
}
// ===== 明细表卡（按内容自适应高度，不被压缩） =====
.detailCard {
flex: none;
display: flex;
flex-direction: column;
background: #fff;
border-radius: 10px;
padding: 18px 20px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
:global(.ant-table-thead > tr > th) {
background: #fafafa;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
}
}
src/pages/finance/reports/index.tsx
+213 -6
View File
@@ -1,15 +1,222 @@
import { defineComponent } from 'vue';
import { defineComponent, ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
import { Select, Table } from 'ant-design-vue';
import * as echarts from 'echarts';
import { useReportsModel } from './model/useReportsModel';
import styles from './index.module.less';
/**
* 账务报表
*
* 页面结构：
* 1. 顶部标题 + 时间范围选择
* 2. 三张统计卡（总收入 / 总提现 / 平台余额）
* 3. 月度收支趋势（近 6 个月，echarts 柱状图）
* 4. 月度收支明细（表格）
*/
export default defineComponent({
name: 'FinanceReports',
setup() {
return () => (
<div class="page-container">
<div style={{ padding: '24px', fontSize: '16px', color: '#999' }}>账务报表 - 开发中</div>
</div>
);
const {
range,
handleRangeChange,
summary,
chartData,
detailColumns,
detailData,
formatMoney,
RANGE_OPTIONS,
} = useReportsModel();
// ===== 柱状图（echarts） =====
const chartRef = ref<HTMLElement>();
let chartInstance: any = null;
const getChartOption = () => {
const months = chartData.value.map((d) => d.month);
const order = chartData.value.map((d) => d.order);
const netIncome = chartData.value.map((d) => d.netIncome);
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
valueFormatter: (v: number) => `¥${formatMoney(v)}`,
},
legend: {
data: ['订单金额', '净收入'],
bottom: 8,
icon: 'roundRect',
itemWidth: 14,
itemHeight: 10,
textStyle: { color: 'rgba(0, 0, 0, 0.65)' },
},
grid: { left: 8, right: 16, top: 24, bottom: 48, containLabel: true },
xAxis: {
type: 'category',
data: months,
axisTick: { show: false },
axisLine: { lineStyle: { color: '#e8e8e8' } },
axisLabel: { color: 'rgba(0, 0, 0, 0.55)' },
},
yAxis: {
type: 'value',
axisLabel: {
color: 'rgba(0, 0, 0, 0.45)',
formatter: (v: number) => (v >= 1000 ? `${v / 1000}k` : `${v}`),
},
splitLine: { lineStyle: { color: '#f5f5f5' } },
},
series: [
{
name: '订单金额',
type: 'bar',
data: order,
barWidth: 30,
itemStyle: { color: '#1677ff', borderRadius: [3, 3, 0, 0] },
},
{
name: '净收入',
type: 'bar',
data: netIncome,
barWidth: 30,
itemStyle: { color: '#52c41a', borderRadius: [3, 3, 0, 0] },
},
],
};
};
const renderChart = () => {
if (!chartRef.value) return;
if (!chartInstance) {
chartInstance = echarts.init(chartRef.value);
}
chartInstance.setOption(getChartOption());
};
const handleResize = () => {
chartInstance?.resize();
};
onMounted(() => {
nextTick(() => {
renderChart();
});
window.addEventListener('resize', handleResize);
});
onBeforeUnmount(() => {
window.removeEventListener('resize', handleResize);
chartInstance?.dispose();
chartInstance = null;
});
// 时间范围切换时刷新图表（接入 API 后生效）
watch(range, () => {
renderChart();
});
return () => {
/** 根据增长率构建箭头 + 颜色（正值 ↑ 绿，负值 ↓ 红，null 时固定文本） */
const changeDesc = (rate: number | null) => {
if (rate == null) return { desc: '= 总收入 - 提现金额', descColor: 'rgba(0, 0, 0, 0.55)' };
const arrow = rate > 0 ? '↑' : '↓';
const sign = rate > 0 ? '+' : '';
return {
desc: `${arrow} 较上月 ${sign}${rate}%`,
descColor: rate > 0 ? '#52c41a' : '#ff4d4f',
};
};
/** 顶部 3 张统计卡配置 */
const statCards = [
{
key: 'totalIncome',
label: '总收入（扣除退款后）',
value: summary.value.totalIncome,
bgColor: '#f6ffed',
accentColor: '#52c41a',
...changeDesc(12.5),
},
{
key: 'totalWithdraw',
label: '总提现金额',
value: summary.value.totalWithdraw,
bgColor: '#fffbe6',
accentColor: '#faad14',
...changeDesc(32),
},
{
key: 'totalBalance',
label: '平台余额（所有用户余额总和）',
value: summary.value.totalBalance,
bgColor: '#e6f4ff',
accentColor: '#1677ff',
...changeDesc(null),
},
];
return (
<div class={['page-container', styles.pageWrap]}>
{/* ===== 顶部标题 + 时间范围 ===== */}
<div class={styles.reportHeader}>
<div class={styles.headerLeft}>
<div class={styles.reportTitle}>财务报表</div>
<div class={styles.reportSub}>
平台资金流水概览，包括收入、退款、提现、用户余额等核心财务指标
</div>
</div>
<Select
value={range.value}
onUpdate:value={(val: string) => handleRangeChange(val)}
options={[...RANGE_OPTIONS]}
style={{ width: 120 }}
/>
</div>
{/* ===== 统计卡 ===== */}
<div class={styles.statCards}>
{statCards.map((item) => (
<div key={item.key} class={styles.statCard} style={{ backgroundColor: item.bgColor }}>
<div class={styles.statLabel}>{item.label}</div>
<div class={styles.statValue} style={{ color: item.accentColor }}>
¥{formatMoney(item.value)}
</div>
<div class={styles.statDesc} style={{ color: item.descColor }}>
{item.desc}
</div>
</div>
))}
</div>
{/* ===== 柱状图卡（echarts） ===== */}
<div class={styles.chartCard}>
<div class={styles.cardTitle}>
<span class={styles.cardTitleIcon}>📊</span>
月度收支趋势（近 6 个月）
</div>
<div
ref={(el: any) => {
if (el) chartRef.value = el as HTMLElement;
}}
class={styles.chartEcharts}
/>
</div>
{/* ===== 月度收支明细 ===== */}
<div class={styles.detailCard}>
<div class={styles.cardTitle}>月度收支明细</div>
<Table
columns={detailColumns}
dataSource={detailData.value}
pagination={false}
size="middle"
bordered={false}
rowKey="key"
/>
</div>
</div>
);
};
},
});
src/pages/finance/reports/model/useReportsModel.ts
+163
View File
@@ -0,0 +1,163 @@
import { ref } from 'vue';
import { useState } from '@/hooks';
// ============================================================
// 常量
// ============================================================
/** 时间范围选项 */
export const RANGE_OPTIONS = [
{ value: 'month', label: '本月' },
{ value: '3m', label: '近 3 个月' },
{ value: '6m', label: '近 6 个月' },
{ value: 'year', label: '本年' },
] as const;
// ============================================================
// 假数据（数值自洽：总收入 - 总提现 = 平台余额）
// ============================================================
/** 6 个月柱状图数据（月份标签 + 订单金额 + 净收入） */
const CHART_DATA = [
{ month: '01月', order: 22500, netIncome: 19000, withdraw: 300 },
{ month: '02月', order: 24500, netIncome: 21500, withdraw: 1850 },
{ month: '03月', order: 24800, netIncome: 23200, withdraw: 1400 },
{ month: '04月', order: 26100, netIncome: 24900, withdraw: 1500 },
{ month: '05月', order: 28900, netIncome: 27400, withdraw: 1800 },
{ month: '06月', order: 32500, netIncome: 31860, withdraw: 2100 },
];
/** 月度收支明细（最近 4 个月） */
const DETAIL_DATA = [
{
key: '2026-06',
month: '2026-06',
order: 32500,
refund: 640,
netIncome: 31860,
withdraw: 2100,
},
{
key: '2026-05',
month: '2026-05',
order: 28900,
refund: 1500,
netIncome: 27400,
withdraw: 1800,
},
{
key: '2026-04',
month: '2026-04',
order: 26100,
refund: 1200,
netIncome: 24900,
withdraw: 1500,
},
{
key: '2026-03',
month: '2026-03',
order: 24800,
refund: 1600,
netIncome: 23200,
withdraw: 1400,
},
];
/** 顶部 3 张统计卡数据 */
const SUMMARY = {
totalIncome: 147860, // 总收入（净收入合计）
totalWithdraw: 8950, // 总提现
totalBalance: 138910, // 平台余额 = 总收入 - 总提现
};
// ============================================================
// 工具
// ============================================================
/** 千分位 + 保留 2 位小数 */
function formatMoney(n: number): string {
return (n || 0).toLocaleString('zh-CN', {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
});
}
// ============================================================
// Model
// ============================================================
/**
* 账务报表数据模型
*/
export function useReportsModel() {
// ===== 时间范围 =====
const [range, setRange] = useState<string>('month');
/** 切换时间范围（演示用：打日志，不改数据） */
const handleRangeChange = (val: string) => {
setRange(val);
// TODO: 接入 API 时按 range 重新拉取汇总 / 图表 / 明细
};
// ===== 汇总 =====
const summary = ref({ ...SUMMARY });
// ===== 图表 =====
const chartData = ref([...CHART_DATA]);
// ===== 明细表 =====
const detailColumns = [
{
title: '月份',
dataIndex: 'month',
key: 'month',
width: 140,
align: 'left' as const,
},
{
title: '订单金额',
dataIndex: 'order',
key: 'order',
align: 'right' as const,
customRender: ({ text }: { text: number }) => `¥${formatMoney(text)}`,
},
{
title: '退款金额',
dataIndex: 'refund',
key: 'refund',
align: 'right' as const,
customRender: ({ text }: { text: number }) => `¥${formatMoney(text)}`,
customCell: (_record: any) => ({ style: { color: '#ff4d4f' } }),
},
{
title: '净收入',
dataIndex: 'netIncome',
key: 'netIncome',
align: 'right' as const,
customRender: ({ text }: { text: number }) => `¥${formatMoney(text)}`,
customCell: (_record: any) => ({
style: { color: '#52c41a', fontWeight: 600 },
}),
},
{
title: '提现金额',
dataIndex: 'withdraw',
key: 'withdraw',
align: 'right' as const,
customRender: ({ text }: { text: number }) => `¥${formatMoney(text)}`,
customCell: (_record: any) => ({ style: { color: '#fa8c16' } }),
},
];
const detailData = ref([...DETAIL_DATA]);
return {
range,
handleRangeChange,
summary,
chartData,
detailColumns,
detailData,
formatMoney,
RANGE_OPTIONS: RANGE_OPTIONS as any,
};
}
src/pages/finance/wallet/components/WalletDetailModal.module.less
+62
View File
@@ -0,0 +1,62 @@
// ===== 自定义标题栏 =====
.modalHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0 16px;
margin-bottom: 16px;
border-bottom: 1px solid #f0f0f0;
}
.modalTitle {
font-size: 16px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
}
.closeBtn {
width: 28px;
height: 28px;
border: none;
background: transparent;
font-size: 22px;
line-height: 1;
color: rgba(0, 0, 0, 0.45);
cursor: pointer;
border-radius: 4px;
transition: all 0.2s;
&:hover {
background: rgba(0, 0, 0, 0.04);
color: rgba(0, 0, 0, 0.85);
}
}
// ===== 内容区 =====
.modalBody {
padding-top: 0;
}
// ===== 筛选区 =====
.filterBar {
flex-shrink: 0;
padding: 16px 20px;
margin-bottom: 16px;
background: #fafafa;
border: 1px solid #f0f0f0;
border-radius: 6px;
}
// ===== 表格区 =====
.tableWrap {
flex: 1;
min-height: 0;
}
// ===== Modal 外层包裹：去除 antd 默认内边距 =====
/* .walletModalWrap {
:global(.ant-modal-body) {
padding-top: 16px;
padding-bottom: 20px;
}
} */
src/pages/finance/wallet/components/WalletDetailModal.tsx
+276
View File
@@ -0,0 +1,276 @@
import { defineComponent, ref, reactive, computed, watch } from 'vue';
import { Modal, Table, Button, Select, Form, Space, DatePicker } from 'ant-design-vue';
import {
useWalletModel,
TRANSACTION_TYPE_OPTIONS,
TRANSACTION_STATUS_OPTIONS,
} from '../model/useWalletModel';
import styles from './WalletDetailModal.module.less';
const { RangePicker } = DatePicker;
interface WalletDetailModalProps {
visible: boolean;
record: any;
onClose: () => void;
}
/**
* 钱包交易明细弹窗
*/
export default defineComponent({
name: 'WalletDetailModal',
props: {
visible: { type: Boolean, default: false },
record: { type: Object, default: () => ({}) },
onClose: { type: Function, required: true },
},
setup(props: WalletDetailModalProps) {
const { loadTransactions, renderTransactionStatus } = useWalletModel();
// ===== 弹窗内筛选条件 =====
const detailFilter = reactive({
timeRange: null as [string, string] | null,
type: '',
status: '',
});
// ===== 加载明细 =====
const loading = ref<boolean>(false);
const allTransactions = ref<any[]>([]);
const fetchTransactions = async () => {
loading.value = true;
try {
allTransactions.value = await loadTransactions(props.record);
} finally {
loading.value = false;
}
};
/**
* 弹窗内筛选后的数据（用 computed 自动响应全量数据和筛选条件的变化）
* 真实场景应传给后端做查询；此处做前端过滤演示
*/
const filteredTransactions = computed(() => {
return allTransactions.value.filter((item) => {
if (detailFilter.type && item.type !== detailFilter.type) return false;
if (detailFilter.status && item.status !== detailFilter.status) return false;
if (detailFilter.timeRange && detailFilter.timeRange.length === 2) {
const [start, end] = detailFilter.timeRange;
if (item.time < start || item.time > end) return false;
}
return true;
});
});
const handleSearch = () => {
// computed 会自动响应；这里保留方法以便将来扩展（如后端查询）
};
const handleReset = () => {
detailFilter.timeRange = null;
detailFilter.type = '';
detailFilter.status = '';
};
// ===== 分页 =====
const pagination = reactive({
current: 1,
pageSize: 10,
total: 0,
showSizeChanger: true,
showTotal: (total: number) => `共 ${total} 条`,
});
/** 筛选条件变化时重置到第 1 页，并同步总数 */
watch(filteredTransactions, (list) => {
pagination.total = list.length;
pagination.current = 1;
});
const handleTableChange = (pag: any) => {
pagination.current = pag.current;
pagination.pageSize = pag.pageSize;
};
/** 监听 visible 变化：打开时加载明细 */
watch(
() => props.visible,
(val) => {
if (val) {
detailFilter.timeRange = null;
detailFilter.type = '';
detailFilter.status = '';
allTransactions.value = [];
fetchTransactions();
}
},
);
// ===== 表格列配置 =====
const detailColumns = [
{
title: '类型',
dataIndex: 'type',
key: 'type',
width: 120,
},
{
title: '金额',
dataIndex: 'amount',
key: 'amount',
width: 110,
align: 'center' as const,
customRender: ({ text }: { text: number }) => {
const num = text || 0;
const isPlus = num > 0;
const isMinus = num < 0;
const color = isPlus ? '#52c41a' : isMinus ? '#ff4d4f' : 'rgba(0,0,0,0.85)';
const sign = isPlus ? '+' : '';
return (
<span style={{ color, fontWeight: 500 }}>
{sign}
{num.toFixed(2)}
</span>
);
},
},
{
title: '余额',
dataIndex: 'balance',
key: 'balance',
width: 110,
align: 'center' as const,
customRender: ({ text }: { text: number }) => `¥${(text || 0).toFixed(2)}`,
},
{
title: '可提现金额',
dataIndex: 'withdrawable',
key: 'withdrawable',
width: 130,
align: 'center' as const,
customRender: ({ text }: { text: number }) => `¥${(text || 0).toFixed(2)}`,
},
{
title: '冻结金额',
dataIndex: 'frozen',
key: 'frozen',
width: 110,
align: 'center' as const,
customRender: ({ text }: { text: number }) => `¥${(text || 0).toFixed(2)}`,
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
width: 90,
align: 'center' as const,
customRender: ({ text }: { text: string }) => renderTransactionStatus(text),
},
{
title: '冻结时间',
dataIndex: 'frozenTime',
key: 'frozenTime',
width: 130,
align: 'center' as const,
},
{
title: '解冻时间',
dataIndex: 'unfreezeTime',
key: 'unfreezeTime',
width: 130,
align: 'center' as const,
},
{
title: '关联单号',
dataIndex: 'relatedNo',
key: 'relatedNo',
width: 130,
align: 'center' as const,
},
{
title: '时间',
dataIndex: 'time',
key: 'time',
width: 130,
align: 'center' as const,
},
];
return () => (
<Modal
title="明细详情"
visible={props.visible}
onCancel={props.onClose}
width={1300}
destroyOnClose
footer={null}
centered
>
<div class={styles.modalBody}>
{/* ===== 弹窗内筛选区 ===== */}
<div class={styles.filterBar}>
<Form layout="inline" model={detailFilter}>
<Form.Item label="时间" name="timeRange">
<RangePicker
value={detailFilter.timeRange as any}
style={{ width: '240px' }}
allowClear
onUpdate:value={(val: any) => (detailFilter.timeRange = val)}
/>
</Form.Item>
<Form.Item label="类型" name="type">
<Select
value={detailFilter.type}
options={TRANSACTION_TYPE_OPTIONS as any}
style={{ width: '140px' }}
allowClear
onUpdate:value={(val: any) => (detailFilter.type = val || '')}
/>
</Form.Item>
<Form.Item label="状态" name="status">
<Select
value={detailFilter.status}
options={TRANSACTION_STATUS_OPTIONS as any}
style={{ width: '140px' }}
allowClear
onUpdate:value={(val: any) => (detailFilter.status = val || '')}
/>
</Form.Item>
<Form.Item>
<Space>
<Button onClick={handleReset}>重置</Button>
<Button type="primary" onClick={handleSearch}>
查询
</Button>
</Space>
</Form.Item>
</Form>
</div>
{/* ===== 表格区 ===== */}
<div class={styles.tableWrap}>
<Table
columns={detailColumns}
dataSource={filteredTransactions.value}
loading={loading.value}
size="middle"
bordered
pagination={{
current: pagination.current,
pageSize: pagination.pageSize,
total: pagination.total,
showSizeChanger: pagination.showSizeChanger,
showTotal: pagination.showTotal,
}}
onChange={handleTableChange}
scroll={{ x: 'max-content' }}
locale={{ emptyText: '暂无交易明细' }}
/>
</div>
</div>
</Modal>
);
},
});
src/pages/finance/wallet/index.module.less
+107
View File
@@ -0,0 +1,107 @@
// ===== 表格 body 容器：占满 flex 剩余空间，并确保 antd 嵌套 div 逐层传递 height: 100% =====
.tableBody {
flex: 1;
min-height: 0;
overflow: hidden;
:global {
.ant-spin-nested-loading,
.ant-spin-container,
.ant-table,
.ant-table-container {
height: 100%;
}
}
}
// ===== 顶部 3 张统计卡 =====
.statCards {
display: flex;
gap: 16px;
flex-shrink: 0;
margin-bottom: 16px;
}
.statCard {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 16px;
padding: 22px 24px;
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
transition: all 0.25s ease;
cursor: default;
&:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
}
.statCardLeft {
flex-shrink: 0;
}
.statIconWrap {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
font-size: 26px;
transition: transform 0.25s ease;
.statCard:hover & {
transform: scale(1.05);
}
}
.statCardRight {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.statLabel {
font-size: 13px;
color: rgba(0, 0, 0, 0.55);
letter-spacing: 0.3px;
}
.statValue {
font-size: 26px;
font-weight: 600;
line-height: 1.2;
font-family:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
letter-spacing: 0.3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// ===== 下方白卡片：包裹筛选区 + 表格区 =====
.tableSection {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
padding: 16px 20px;
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
overflow: hidden;
// 表格区紧贴筛选区下方，控制间距
:global(.page-table) {
margin-top: 16px;
}
}
src/pages/finance/wallet/index.tsx
+232 -5
View File
@@ -1,4 +1,43 @@
import { defineComponent } from 'vue';
import { Button, Input, Table, Form, Space, Pagination } from 'ant-design-vue';
import { WalletOutlined, LockOutlined, RiseOutlined } from '@ant-design/icons-vue';
import { useWalletModel } from './model/useWalletModel';
import { useContainerSize } from '@/hooks';
import WalletDetailModal from './components/WalletDetailModal';
import styles from './index.module.less';
interface StatCardItem {
key: string;
label: string;
value: number;
icon: any;
color: string;
bgColor: string;
}
/**
* bodyCell 渲染函数
*/
function renderBodyCell({
column,
record,
onViewDetail,
}: {
column: any;
text: any;
record: any;
onViewDetail: (record: any) => void;
}) {
// 操作列
if (column.key === 'action') {
return (
<Button type="link" size="small" onClick={() => onViewDetail(record)}>
明细
</Button>
);
}
return;
}
/**
* 用户钱包
@@ -6,10 +45,198 @@ import { defineComponent } from 'vue';
export default defineComponent({
name: 'FinanceWallet',
setup() {
return () => (
<div class="page-container">
<div style={{ padding: '24px', fontSize: '16px', color: '#999' }}>用户钱包 - 开发中</div>
</div>
);
const {
filterForm,
loading,
dataSource,
columns,
summary,
pagination,
detailVisible,
currentWallet,
handleSearch,
handleReset,
handlePageChange,
handleViewDetail,
handleCloseDetail,
} = useWalletModel();
const { containerRef, height } = useContainerSize({ headerOffset: 55 });
/** 最终表格列：模型列 + 操作 */
const tableColumns = [
...columns,
{
title: '操作',
key: 'action',
width: 100,
fixed: 'right' as const,
align: 'center' as const,
},
];
return () => {
/** 顶部统计卡配置 */
const statCards: StatCardItem[] = [
{
key: 'totalBalance',
label: '总余额',
value: summary.value.totalBalance,
icon: WalletOutlined,
color: '#1677ff',
bgColor: 'rgba(22, 119, 255, 0.08)',
},
{
key: 'frozenAmount',
label: '冻结金额',
value: summary.value.frozenAmount,
icon: LockOutlined,
color: '#fa8c16',
bgColor: 'rgba(250, 140, 22, 0.08)',
},
{
key: 'totalWithdraw',
label: '累计提现',
value: summary.value.totalWithdraw,
icon: RiseOutlined,
color: '#52c41a',
bgColor: 'rgba(82, 196, 26, 0.08)',
},
];
return (
<div class="page-container">
{/* ===== 顶部统计卡 ===== */}
<div class={styles.statCards}>
{statCards.map((item) => (
<div key={item.key} class={styles.statCard}>
<div class={styles.statCardLeft}>
<div
class={styles.statIconWrap}
style={{ color: item.color, backgroundColor: item.bgColor }}
>
<item.icon />
</div>
</div>
<div class={styles.statCardRight}>
<div class={styles.statLabel}>{item.label}</div>
<div class={styles.statValue} style={{ color: item.color }}>
¥
{item.value.toLocaleString('zh-CN', {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
</div>
</div>
</div>
))}
</div>
{/* ===== 筛选区 ===== */}
<div class="page-filter">
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="用户昵称" name="searchUserName">
<Input
placeholder="请输入"
style={{ width: '180px' }}
allowClear
onPressEnter={handleSearch}
/>
</Form.Item>
<Form.Item label="手机号" name="searchPhone">
<Input
placeholder="请输入"
style={{ width: '180px' }}
allowClear
onPressEnter={handleSearch}
/>
</Form.Item>
<Form.Item label="余额筛选">
<Space.Compact>
<Input
placeholder="请输入"
style={{ width: '130px' }}
value={filterForm.minBalance}
onUpdate:value={(val: any) => (filterForm.minBalance = val ?? '')}
onPressEnter={handleSearch}
allowClear
/>
<Input
style={{
width: '40px',
textAlign: 'center',
backgroundColor: '#fafafa',
pointerEvents: 'none',
color: 'rgba(0,0,0,0.45)',
}}
value="至"
disabled
/>
<Input
placeholder="请输入"
style={{ width: '130px' }}
value={filterForm.maxBalance}
onUpdate:value={(val: any) => (filterForm.maxBalance = val ?? '')}
onPressEnter={handleSearch}
allowClear
/>
</Space.Compact>
</Form.Item>
<Form.Item>
<Space>
<Button onClick={handleReset}>重置</Button>
<Button type="primary" onClick={handleSearch} loading={loading.value}>
查询
</Button>
</Space>
</Form.Item>
</Form>
</div>
{/* ===== 下方区域：筛选 + 表格（独立白卡片） ===== */}
{/* ===== 表格区 ===== */}
<div class="page-table">
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onViewDetail: handleViewDetail,
}),
}}
</Table>
</div>
{/* 独立分页，右下方 */}
<div class="page-pagination">
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
{/* ===== 交易明细弹窗 ===== */}
<WalletDetailModal
visible={detailVisible.value}
record={currentWallet.value}
onClose={handleCloseDetail}
/>
</div>
);
};
},
});
src/pages/finance/wallet/model/useWalletModel.ts
+349
View File
@@ -0,0 +1,349 @@
import { computed, reactive, toRef, Ref, h } from 'vue';
import { message, Tag } from 'ant-design-vue';
import { useState, useDebounce, useThrottleFn } from '@/hooks';
// ============================================================
// 常量
// ============================================================
/** 明细类型选项（弹窗内筛选） */
export const TRANSACTION_TYPE_OPTIONS = [
{ value: '', label: '全部' },
{ value: '报名收入', label: '报名收入' },
{ value: '提现', label: '提现' },
{ value: '取消报名退款', label: '取消报名退款' },
] as const;
/** 明细状态选项（弹窗内筛选） */
export const TRANSACTION_STATUS_OPTIONS = [
{ value: '', label: '全部' },
{ value: '正常', label: '正常' },
{ value: '冻结中', label: '冻结中' },
{ value: '已解冻', label: '已解冻' },
] as const;
/** 明细状态映射（用于表格 Tag 渲染） */
const TRANSACTION_STATUS_MAP: Record<string, { label: string; color: string }> = {
正常: { label: '正常', color: 'blue' },
冻结中: { label: '冻结中', color: 'orange' },
已解冻: { label: '已解冻', color: 'green' },
};
// ============================================================
// 顶部统计卡假数据
// ============================================================
const MOCK_SUMMARY = {
totalBalance: 86520.0,
frozenAmount: 3200.0,
totalWithdraw: 63080.0,
};
// ============================================================
// 假数据（钱包列表）
// ============================================================
const MOCK_DATA = [
{
key: '1',
userId: 'U20260701001',
nickName: '张三',
phone: '12345678997',
balance: 0,
frozen: 0,
totalWithdraw: 0,
},
{
key: '2',
userId: '',
nickName: '李四',
phone: '12345678998',
balance: 350,
frozen: 200,
totalWithdraw: 1450,
},
{
key: '3',
userId: '',
nickName: '王五',
phone: '12345678999',
balance: 1280,
frozen: 0,
totalWithdraw: 800,
},
{
key: '4',
userId: 'U20260701004',
nickName: '赵六',
phone: '13800138000',
balance: 560,
frozen: 100,
totalWithdraw: 200,
},
{
key: '5',
userId: '',
nickName: '钱七',
phone: '13900139001',
balance: 4200,
frozen: 1500,
totalWithdraw: 5600,
},
{
key: '6',
userId: '',
nickName: '孙八',
phone: '12345678997',
balance: 880,
frozen: 0,
totalWithdraw: 300,
},
];
// ============================================================
// 交易明细假数据（所有用户共用，演示用）
// ============================================================
const MOCK_TRANSACTIONS: any[] = [
{
key: 't-1',
type: '报名收入',
amount: 100,
balance: 600,
withdrawable: 500,
frozen: 100,
status: '已解冻',
frozenTime: '2026-06-10 08:00',
unfreezeTime: '2026-06-12 08:00',
relatedNo: 'xxxxxxxx',
time: '2026-06-10 08:00',
},
{
key: 't-2',
type: '提现',
amount: -500,
balance: 1100,
withdrawable: 500,
frozen: 600,
status: '冻结中',
frozenTime: '2026-06-10 06:00',
unfreezeTime: '-',
relatedNo: 'xxxxxxxx',
time: '2026-06-10 06:00',
},
{
key: 't-3',
type: '取消报名退款',
amount: -100,
balance: 500,
withdrawable: 500,
frozen: 0,
status: '正常',
frozenTime: '-',
unfreezeTime: '-',
relatedNo: 'xxxxxxxx',
time: '2026-06-10 05:00',
},
{
key: 't-4',
type: '报名收入',
amount: 350,
balance: 850,
withdrawable: 750,
frozen: 100,
status: '正常',
frozenTime: '-',
unfreezeTime: '-',
relatedNo: 'xxxxxxxx',
time: '2026-06-09 17:30',
},
{
key: 't-5',
type: '提现',
amount: -250,
balance: 600,
withdrawable: 500,
frozen: 100,
status: '已解冻',
frozenTime: '2026-06-08 10:00',
unfreezeTime: '2026-06-09 08:00',
relatedNo: 'xxxxxxxx',
time: '2026-06-08 10:00',
},
];
// ============================================================
// Model
// ============================================================
/**
* 用户钱包页数据模型
*/
export function useWalletModel() {
// ===== 筛选条件 =====
const filterForm = reactive({
searchUserName: '',
searchPhone: '',
minBalance: '' as string | number,
maxBalance: '' as string | number,
});
// 可搜索字段防抖
const { debouncedValue: debouncedUserName } = useDebounce(
toRef(filterForm, 'searchUserName') as Ref<string>,
{ delay: 300 },
);
const { debouncedValue: debouncedPhone } = useDebounce(
toRef(filterForm, 'searchPhone') as Ref<string>,
{ delay: 300 },
);
// ===== 顶部统计 =====
const [summary, setSummary] = useState(MOCK_SUMMARY);
// ===== 表格状态 =====
const [loading, setLoading] = useState<boolean>(false);
const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: MOCK_DATA.length,
});
// ===== 详情弹窗状态 =====
const [detailVisible, setDetailVisible] = useState<boolean>(false);
const [currentWallet, setCurrentWallet] = useState<any>({});
const [detailLoading, setDetailLoading] = useState<boolean>(false);
// ===== 表格列配置 =====
const columns = [
{ title: '用户ID', dataIndex: 'userId', key: 'userId', width: 160 },
{ title: '用户昵称', dataIndex: 'nickName', key: 'nickName', width: 120 },
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 140 },
{
title: '余额',
dataIndex: 'balance',
key: 'balance',
width: 120,
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
},
{
title: '冻结金额',
dataIndex: 'frozen',
key: 'frozen',
width: 120,
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
},
{
title: '累计提现',
dataIndex: 'totalWithdraw',
key: 'totalWithdraw',
width: 120,
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
},
];
// ===== 计算属性 =====
const hasFilter = computed(() => {
return (
debouncedUserName.value.trim() !== '' ||
debouncedPhone.value.trim() !== '' ||
filterForm.minBalance !== '' ||
filterForm.maxBalance !== ''
);
});
// ===== 方法 =====
/** 查询（节流 500ms） */
const handleSearch = useThrottleFn(async () => {
setLoading(true);
try {
console.log('搜索条件:', {
nickName: debouncedUserName.value,
phone: debouncedPhone.value,
minBalance: filterForm.minBalance,
maxBalance: filterForm.maxBalance,
});
// TODO: 替换为真实 API 调用
setDataSource(MOCK_DATA);
setPagination({ ...pagination.value, total: MOCK_DATA.length });
setSummary(MOCK_SUMMARY);
message.success('查询成功');
} catch (error: any) {
message.error(error.msg || '查询失败');
} finally {
setLoading(false);
}
}, 500);
/** 重置（节流 500ms） */
const handleReset = useThrottleFn(() => {
filterForm.searchUserName = '';
filterForm.searchPhone = '';
filterForm.minBalance = '';
filterForm.maxBalance = '';
setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
setDataSource(MOCK_DATA);
setSummary(MOCK_SUMMARY);
}, 500);
const handlePageChange = (page: number, pageSize: number) => {
setPagination({ ...pagination.value, current: page, pageSize });
handleSearch();
};
/** 打开明细弹窗 */
const handleViewDetail = (record: any) => {
setCurrentWallet(record);
setDetailVisible(true);
};
/** 关闭明细弹窗 */
const handleCloseDetail = () => {
setDetailVisible(false);
};
/**
* 加载某用户的交易明细
* 真实场景应调用 API；演示阶段所有用户共用同一份假数据
*/
const loadTransactions = async (_record: any): Promise<any[]> => {
setDetailLoading(true);
try {
// 模拟接口延迟
await new Promise((resolve) => setTimeout(resolve, 200));
return [...MOCK_TRANSACTIONS];
} finally {
setDetailLoading(false);
}
};
/** 渲染交易状态 Tag */
const renderTransactionStatus = (status: string) => {
const info = TRANSACTION_STATUS_MAP[status] || { label: status || '-', color: 'default' };
return h(Tag, { color: info.color }, () => info.label);
};
return {
filterForm,
loading,
dataSource,
columns,
summary,
pagination,
hasFilter,
detailVisible,
currentWallet,
detailLoading,
handleSearch,
handleReset,
handlePageChange,
handleViewDetail,
handleCloseDetail,
loadTransactions,
renderTransactionStatus,
TRANSACTION_TYPE_OPTIONS: TRANSACTION_TYPE_OPTIONS as any,
TRANSACTION_STATUS_OPTIONS: TRANSACTION_STATUS_OPTIONS as any,
};
}
src/pages/finance/withdraw/components/WithdrawAuditModal.module.less
+195
View File
@@ -0,0 +1,195 @@
// ===== Modal 外层包裹：去掉 antd 默认内边距 =====
.modalWrap {
:global(.ant-modal-header) {
display: none;
}
}
// ===== 自定义标题栏 =====
.modalHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 14px;
margin-bottom: 8px;
border-bottom: 1px solid #f0f0f0;
}
.modalTitle {
font-size: 16px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
}
.closeBtn {
width: 28px;
height: 28px;
border: none;
background: transparent;
font-size: 22px;
line-height: 1;
color: rgba(0, 0, 0, 0.45);
cursor: pointer;
border-radius: 4px;
transition: all 0.2s;
&:hover {
background: rgba(0, 0, 0, 0.04);
color: rgba(0, 0, 0, 0.85);
}
}
// ===== 通用区块 =====
.section {
padding: 14px 0;
border-bottom: 1px dashed #f0f0f0;
&:last-child {
border-bottom: none;
padding-bottom: 0;
}
}
.sectionTitle {
font-size: 14px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
margin-bottom: 14px;
position: relative;
padding-left: 10px;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 14px;
background: #1677ff;
border-radius: 2px;
}
}
// ===== 描述项栅格（3 列） =====
.descGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 14px;
column-gap: 24px;
}
.descItem {
display: flex;
align-items: baseline;
min-width: 0;
}
.descLabel {
flex-shrink: 0;
color: rgba(0, 0, 0, 0.55);
font-size: 13px;
white-space: nowrap;
}
.descValue {
flex: 1;
min-width: 0;
color: rgba(0, 0, 0, 0.85);
font-size: 13px;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
}
.descValueBold {
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
}
// ===== 审核表单 =====
.formRow {
display: flex;
align-items: flex-start;
margin-bottom: 18px;
&:last-child {
margin-bottom: 0;
}
}
.formLabel {
width: 88px;
flex-shrink: 0;
color: rgba(0, 0, 0, 0.55);
font-size: 13px;
padding-top: 6px;
}
.formLabelTop {
padding-top: 6px;
}
.footer {
display: flex;
justify-content: flex-end;
margin-top: 24px;
}
// ===== 上传 =====
.uploader {
flex: 1;
:global {
.ant-upload-list-picture-card-container {
width: 96px;
height: 96px;
}
.ant-upload-select {
width: 96px;
height: 96px;
margin: 0;
}
}
}
.uploadTrigger {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: rgba(0, 0, 0, 0.45);
font-size: 22px;
background: #fafafa;
border-radius: 4px;
transition: all 0.2s;
&:hover {
color: #1677ff;
background: #f0f7ff;
}
}
.uploadText {
font-size: 12px;
margin-top: 4px;
color: rgba(0, 0, 0, 0.45);
}
// ===== 审核信息（只读，逐行展示） =====
.infoColumn {
display: flex;
flex-direction: column;
row-gap: 14px;
}
.auditImg {
border-radius: 4px;
object-fit: cover;
margin-right: 8px;
}
.noImage {
color: rgba(0, 0, 0, 0.45);
}
src/pages/finance/withdraw/components/WithdrawAuditModal.tsx
+245
View File
@@ -0,0 +1,245 @@
import { defineComponent, reactive, ref, watch } from 'vue';
import { Modal, Radio, Input, Button, Upload, Image, message } from 'ant-design-vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { useWithdrawModel } from '../model/useWithdrawModel';
import styles from './WithdrawAuditModal.module.less';
const { TextArea } = Input;
interface WithdrawAuditModalProps {
visible: boolean;
record: any;
onClose: () => void;
}
/**
* 提现申请详情 / 审核弹窗
*
* 结构：
* - 基本信息
* - 银行卡信息
* - 支付信息
* - 审核操作
*/
export default defineComponent({
name: 'WithdrawAuditModal',
props: {
visible: { type: Boolean, default: false },
record: { type: Object, default: () => ({}) },
onClose: { type: Function, required: true },
},
setup(props: WithdrawAuditModalProps) {
const { submitAudit } = useWithdrawModel();
// ===== 表单状态 =====
const auditForm = reactive({
pass: true,
remark: '',
});
const imageList = ref<any[]>([]);
const submitting = ref<boolean>(false);
/** 监听 visible：每次打开都重置表单 */
watch(
() => props.visible,
(val) => {
if (val) {
auditForm.pass = true;
auditForm.remark = '';
imageList.value = [];
submitting.value = false;
}
},
);
/** 上传前校验（演示用：限制 5 张 & 5MB） */
const beforeUpload = (file: any) => {
const isLt5M = file.size / 1024 / 1024 < 5;
if (!isLt5M) {
message.error('图片大小不能超过 5MB');
return false;
}
imageList.value = [...imageList.value, file];
return false; // 阻止自动上传，由"提交审核"按钮统一处理
};
const handleRemove = (file: any) => {
imageList.value = imageList.value.filter((f) => f.uid !== file.uid);
};
const handleSubmit = async () => {
if (!auditForm.remark.trim()) {
message.warning('请输入审核内容');
return;
}
submitting.value = true;
try {
// 真实场景应上传图片并调用审核 API
const urls = imageList.value.map((f) => f.name || '');
submitAudit(auditForm.pass, auditForm.remark.trim(), urls);
} finally {
submitting.value = false;
}
};
/**
* 通用描述项渲染
*/
const renderItem = (label: string, value: any, isBold = false) => (
<div class={styles.descItem}>
<span class={styles.descLabel}>{label}</span>
<span class={[styles.descValue, isBold ? styles.descValueBold : '']}>{value || '-'}</span>
</div>
);
return () => {
const record = props.record || {};
const bank = record.bank || {};
const pay = record.pay || {};
const isPending = record.auditStatus === '待审核';
return (
<Modal
visible={props.visible}
onCancel={props.onClose}
width={850}
centered
footer={null}
wrapClassName={styles.modalWrap}
title={null}
closable={false}
>
{/* 自定义标题栏 */}
<div class={styles.modalHeader}>
<span class={styles.modalTitle}>提现申请详情</span>
<button class={styles.closeBtn} onClick={props.onClose}>
×
</button>
</div>
{/* ===== 基本信息 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>基本信息</div>
<div class={styles.descGrid}>
{renderItem('申请人昵称：', record.nickName)}
{renderItem('申请人手机号：', record.phone)}
{renderItem('真实姓名：', record.realName)}
{renderItem('申请时间：', record.applyTime)}
{renderItem('打款类型：', record.withdrawType)}
<div style="display: contents;" />
{renderItem('提现金额：', `¥${(record.withdrawAmount || 0).toFixed(2)}`, true)}
{renderItem('费率：', `${((record.feeRate || 0) * 100).toFixed(2)}%`)}
{renderItem('手续费：', `¥${(record.feeAmount || 0).toFixed(2)}`)}
{renderItem('到账金额：', `¥${(record.transferAmount || 0).toFixed(2)}`, true)}
{renderItem('审核状态：', record.auditStatus, true)}
{renderItem('列账状态：', record.transferStatus || '-')}
</div>
</div>
{/* ===== 银行卡信息 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>银行卡信息</div>
<div class={styles.descGrid}>
{renderItem('银行卡类型：', bank.cardType)}
{renderItem('持卡人：', bank.holder)}
{renderItem('银行卡号：', bank.cardNo)}
{renderItem('开户行：', bank.bankName)}
{renderItem('开户支行：', bank.branchName)}
</div>
</div>
{/* ===== 支付信息 ===== */}
<div class={styles.section}>
<div class={styles.sectionTitle}>支付信息</div>
<div class={styles.descGrid}>
{renderItem('到账支付时间：', pay.transferTime || '-')}
{renderItem('商户订单号：', pay.merchantNo)}
</div>
</div>
{/* ===== 审核操作 / 审核信息 ===== */}
<div class={styles.section}>
{isPending ? (
<>
<div class={styles.sectionTitle}>审核操作</div>
<div class={styles.formRow}>
<span class={styles.formLabel}>审核状态</span>
<Radio.Group
value={auditForm.pass}
onUpdate:value={(val: boolean) => (auditForm.pass = val)}
>
<Radio value={true}>通过</Radio>
<Radio value={false}>未通过</Radio>
</Radio.Group>
</div>
<div class={styles.formRow}>
<span class={[styles.formLabel, styles.formLabelTop]}>审核内容</span>
<TextArea
v-model={auditForm.remark}
placeholder="请输入审核内容"
rows={4}
maxlength={500}
showCount
style={{ flex: 1 }}
/>
</div>
<div class={styles.formRow}>
<span class={[styles.formLabel, styles.formLabelTop]}>审核图片</span>
<Upload
listType="picture-card"
fileList={imageList.value}
beforeUpload={beforeUpload}
onRemove={handleRemove}
accept="image/*"
class={styles.uploader}
>
{imageList.value.length >= 3 ? null : (
<div class={styles.uploadTrigger}>
<PlusOutlined />
<div class={styles.uploadText}>粘贴图片到此处</div>
</div>
)}
</Upload>
</div>
<div class={styles.footer}>
<Button type="primary" onClick={handleSubmit} loading={submitting.value}>
提交审核
</Button>
</div>
</>
) : (
<>
<div class={styles.sectionTitle}>审核信息</div>
<div class={styles.infoColumn}>
{renderItem('审核时间：', record.auditTime)}
{renderItem('审核人：', record.auditor)}
<div class={styles.descItem}>
<span class={styles.descLabel}>审核图片：</span>
{record.auditImages && record.auditImages.length ? (
<Image.PreviewGroup>
{record.auditImages.map((src: string, idx: number) => (
<Image
key={idx}
src={src}
width={64}
height={64}
class={styles.auditImg}
/>
))}
</Image.PreviewGroup>
) : (
<span class={[styles.descValue, styles.noImage]}>暂无</span>
)}
</div>
</div>
</>
)}
</div>
</Modal>
);
};
},
});
src/pages/finance/withdraw/index.module.less
+15
View File
@@ -0,0 +1,15 @@
// ===== 表格 body 容器：占满 flex 剩余空间，并确保 antd 嵌套 div 逐层传递 height: 100% =====
.tableBody {
flex: 1;
min-height: 0;
overflow: hidden;
:global {
.ant-spin-nested-loading,
.ant-spin-container,
.ant-table,
.ant-table-container {
height: 100%;
}
}
}
src/pages/finance/withdraw/index.tsx
+168 -1
View File
@@ -1,4 +1,43 @@
import { defineComponent } from 'vue';
import { Button, Input, Table, Form, Space, Pagination, Select } from 'ant-design-vue';
import { useWithdrawModel } from './model/useWithdrawModel';
import { useContainerSize } from '@/hooks';
import WithdrawAuditModal from './components/WithdrawAuditModal';
import styles from './index.module.less';
/**
* bodyCell 渲染函数（操作列：根据审核状态切换"审核 / 查看"按钮）
*/
function renderBodyCell({
column,
record,
onAudit,
onView,
}: {
column: any;
text: any;
record: any;
onAudit: (record: any) => void;
onView: (record: any) => void;
}) {
if (column.key === 'action') {
// 待审核：显示「审核」
if (record.auditStatus === '待审核') {
return (
<Button type="link" size="small" onClick={() => onAudit(record)}>
审核
</Button>
);
}
// 其它状态：仅显示「查看」
return (
<Button type="link" size="small" onClick={() => onView(record)}>
查看
</Button>
);
}
return;
}
/**
* 提现申请
@@ -6,9 +45,137 @@ import { defineComponent } from 'vue';
export default defineComponent({
name: 'FinanceWithdraw',
setup() {
const {
filterForm,
loading,
dataSource,
columns,
pagination,
auditVisible,
currentRecord,
handleSearch,
handleReset,
handlePageChange,
handleAudit,
handleCloseAudit,
handleView,
AUDIT_STATUS_OPTIONS,
TRANSFER_STATUS_OPTIONS,
} = useWithdrawModel();
const { containerRef, height } = useContainerSize({ headerOffset: 55 });
/** 最终表格列：模型列 + 操作 */
const tableColumns = [
...columns,
{
title: '操作',
key: 'action',
width: 100,
fixed: 'right' as const,
align: 'center' as const,
},
];
return () => (
<div class="page-container">
<div style={{ padding: '24px', fontSize: '16px', color: '#999' }}>提现申请 - 开发中</div>
{/* ===== 筛选区 ===== */}
<div class="page-filter">
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="申请人昵称" name="searchUserName">
<Input
placeholder="请输入"
style={{ width: '160px' }}
allowClear
onPressEnter={handleSearch}
/>
</Form.Item>
<Form.Item label="手机号" name="searchPhone">
<Input
placeholder="请输入"
style={{ width: '160px' }}
allowClear
onPressEnter={handleSearch}
/>
</Form.Item>
<Form.Item label="真实姓名" name="realName">
<Input
placeholder="请输入"
style={{ width: '160px' }}
allowClear
onPressEnter={handleSearch}
/>
</Form.Item>
<Form.Item label="审核状态" name="auditStatus">
<Select
value={filterForm.auditStatus}
options={AUDIT_STATUS_OPTIONS as any}
style={{ width: '140px' }}
allowClear
onUpdate:value={(val: any) => (filterForm.auditStatus = val || '')}
/>
</Form.Item>
<Form.Item label="到账状态" name="transferStatus">
<Select
value={filterForm.transferStatus}
options={TRANSFER_STATUS_OPTIONS as any}
style={{ width: '140px' }}
allowClear
onUpdate:value={(val: any) => (filterForm.transferStatus = val || '')}
/>
</Form.Item>
<Form.Item>
<Space>
<Button onClick={handleReset}>重置</Button>
<Button type="primary" onClick={handleSearch} loading={loading.value}>
查询
</Button>
</Space>
</Form.Item>
</Form>
</div>
{/* ===== 表格区 ===== */}
<div class="page-table">
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onAudit: handleAudit,
onView: handleView,
}),
}}
</Table>
</div>
{/* 独立分页，右下方 */}
<div class="page-pagination">
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
{/* ===== 审核弹窗 ===== */}
<WithdrawAuditModal
visible={auditVisible.value}
record={currentRecord.value}
onClose={handleCloseAudit}
/>
</div>
);
},
src/pages/finance/withdraw/model/useWithdrawModel.ts
+342
View File
@@ -0,0 +1,342 @@
import { reactive, toRef, Ref } from 'vue';
import { message } from 'ant-design-vue';
import { useState, useDebounce, useThrottleFn } from '@/hooks';
// ============================================================
// 常量
// ============================================================
/** 审核状态选项（筛选） */
export const AUDIT_STATUS_OPTIONS = [
{ value: '', label: '全部' },
{ value: '待审核', label: '待审核' },
{ value: '审核通过', label: '审核通过' },
{ value: '审核不通过', label: '审核不通过' },
] as const;
/** 到账状态选项（筛选） */
export const TRANSFER_STATUS_OPTIONS = [
{ value: '', label: '全部' },
{ value: '到账成功', label: '到账成功' },
{ value: '到账失败', label: '到账失败' },
{ value: '-', label: '-' },
] as const;
/** 提现类型选项（筛选） */
export const WITHDRAW_TYPE_OPTIONS = [
{ value: '', label: '全部' },
{ value: '银行卡', label: '银行卡' },
{ value: '支付宝', label: '支付宝' },
{ value: '微信', label: '微信' },
] as const;
// ============================================================
// 提现假数据（4 条，覆盖各审核/到账状态组合）
// ============================================================
const MOCK_DATA = [
{
key: '1',
nickName: '可乐',
phone: '17762466262',
realName: '可乐',
withdrawType: '银行卡',
withdrawAmount: 1.0,
feeRate: 0.006,
feeAmount: 0.01,
transferAmount: 0.99,
auditStatus: '待审核',
transferStatus: '',
thirdNo: '',
applyTime: '2026-04-11 09:53',
// 银行卡信息
bank: {
cardType: '个人',
holder: '龚',
cardNo: '6215581807006475126',
bankName: '交通银行',
branchName: '交通银行宜昌西坝支行',
},
// 支付信息
pay: {
transferTime: '',
merchantNo: 'WD04111775872421935100',
},
},
{
key: '2',
nickName: '李四',
phone: '12345678998',
realName: '李四',
withdrawType: '支付宝',
withdrawAmount: 200.0,
feeRate: 0.006,
feeAmount: 1.2,
transferAmount: 198.8,
auditStatus: '审核通过',
transferStatus: '到账成功',
thirdNo: 'yyyyyyyyyy',
applyTime: '2026-05-25 14:30:00',
bank: {
cardType: '个人',
holder: '李四',
cardNo: '6222021234567890123',
bankName: '工商银行',
branchName: '工商银行北京中关村支行',
},
pay: {
transferTime: '2026-05-25 14:35:00',
merchantNo: 'WD0000111122223333',
},
// 审核信息（已审核后展示）
auditTime: '2026-05-25 14:32:00',
auditor: '管理员A',
auditImages: [],
},
{
key: '3',
nickName: '王五',
phone: '13800138000',
realName: '王五',
withdrawType: '微信',
withdrawAmount: 500.0,
feeRate: 0.006,
feeAmount: 3.0,
transferAmount: 497.0,
auditStatus: '审核通过',
transferStatus: '到账失败',
thirdNo: 'zzzzzzzzzz',
applyTime: '2026-05-24 11:15:00',
bank: {
cardType: '个人',
holder: '王五',
cardNo: '微信钱包',
bankName: '微信支付',
branchName: '-',
},
pay: {
transferTime: '',
merchantNo: 'WD9999888877776666',
},
// 审核信息（已审核后展示）
auditTime: '2026-05-24 11:20:00',
auditor: '管理员B',
auditImages: [],
},
{
key: '4',
nickName: '赵六',
phone: '13900139001',
realName: '赵六',
withdrawType: '银行卡',
withdrawAmount: 80.0,
feeRate: 0.006,
feeAmount: 0.48,
transferAmount: 79.52,
auditStatus: '审核不通过',
transferStatus: '',
thirdNo: '',
applyTime: '2026-05-23 09:45:00',
bank: {
cardType: '个人',
holder: '赵六',
cardNo: '6217858000123456789',
bankName: '建设银行',
branchName: '建设银行上海陆家嘴支行',
},
pay: {
transferTime: '',
merchantNo: '',
},
// 审核信息（已审核后展示）
auditTime: '2026-05-23 10:00:00',
auditor: '管理员A',
auditImages: [],
},
];
// ============================================================
// Model
// ============================================================
/**
* 提现申请页数据模型
*/
export function useWithdrawModel() {
// ===== 筛选条件 =====
const filterForm = reactive({
searchUserName: '',
searchPhone: '',
realName: '',
auditStatus: '',
transferStatus: '',
});
// 可搜索字段防抖
const { debouncedValue: debouncedUserName } = useDebounce(
toRef(filterForm, 'searchUserName') as Ref<string>,
{ delay: 300 },
);
const { debouncedValue: debouncedPhone } = useDebounce(
toRef(filterForm, 'searchPhone') as Ref<string>,
{ delay: 300 },
);
const { debouncedValue: debouncedRealName } = useDebounce(
toRef(filterForm, 'realName') as Ref<string>,
{ delay: 300 },
);
// ===== 表格状态 =====
const [loading, setLoading] = useState<boolean>(false);
const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: MOCK_DATA.length,
});
// ===== 审核弹窗状态 =====
const [auditVisible, setAuditVisible] = useState<boolean>(false);
const [currentRecord, setCurrentRecord] = useState<any>({});
// ===== 表格列配置 =====
const columns = [
{ title: '申请人昵称', dataIndex: 'nickName', key: 'nickName', width: 120 },
{ title: '申请人手机号', dataIndex: 'phone', key: 'phone', width: 140 },
{ title: '真实姓名', dataIndex: 'realName', key: 'realName', width: 120 },
{
title: '提现类型',
dataIndex: 'withdrawType',
key: 'withdrawType',
width: 110,
},
{
title: '提现金额',
dataIndex: 'withdrawAmount',
key: 'withdrawAmount',
width: 120,
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
},
{
title: '到账金额',
dataIndex: 'transferAmount',
key: 'transferAmount',
width: 120,
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
},
{
title: '审核状态',
dataIndex: 'auditStatus',
key: 'auditStatus',
width: 110,
},
{
title: '到账状态',
dataIndex: 'transferStatus',
key: 'transferStatus',
width: 110,
},
{ title: '第三方单号', dataIndex: 'thirdNo', key: 'thirdNo', width: 160 },
{
title: '申请时间',
dataIndex: 'applyTime',
key: 'applyTime',
width: 170,
},
];
// ===== 方法 =====
/** 查询（节流 500ms） */
const handleSearch = useThrottleFn(async () => {
setLoading(true);
try {
console.log('搜索条件:', {
nickName: debouncedUserName.value,
phone: debouncedPhone.value,
realName: debouncedRealName.value,
auditStatus: filterForm.auditStatus,
transferStatus: filterForm.transferStatus,
});
// TODO: 替换为真实 API 调用
setDataSource(MOCK_DATA);
setPagination({ ...pagination.value, total: MOCK_DATA.length });
message.success('查询成功');
} catch (error: any) {
message.error(error.msg || '查询失败');
} finally {
setLoading(false);
}
}, 500);
/** 重置（节流 500ms） */
const handleReset = useThrottleFn(() => {
filterForm.searchUserName = '';
filterForm.searchPhone = '';
filterForm.realName = '';
filterForm.auditStatus = '';
filterForm.transferStatus = '';
setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
setDataSource(MOCK_DATA);
}, 500);
const handlePageChange = (page: number, pageSize: number) => {
setPagination({ ...pagination.value, current: page, pageSize });
handleSearch();
};
/**
* 打开审核弹窗
* 真实场景应调用 API；此处直接用列表中的 record
*/
const handleAudit = (record: any) => {
setCurrentRecord(record);
setAuditVisible(true);
};
/** 关闭审核弹窗 */
const handleCloseAudit = () => {
setAuditVisible(false);
};
/**
* 提交审核结果（在弹窗中调用）
* pass = true 通过 / false 不通过
*/
const submitAudit = (pass: boolean, _remark: string, _images: string[]) => {
setDataSource(
dataSource.value.map((item) =>
item.key === currentRecord.value.key
? { ...item, auditStatus: pass ? '审核通过' : '审核不通过' }
: item,
),
);
message.success(pass ? '已审核通过' : '已审核不通过');
handleCloseAudit();
};
/** 查看：打开同一个详情弹窗（只读展示审核信息） */
const handleView = (record: any) => {
setCurrentRecord(record);
setAuditVisible(true);
};
return {
filterForm,
loading,
dataSource,
columns,
pagination,
auditVisible,
currentRecord,
handleSearch,
handleReset,
handlePageChange,
handleAudit,
handleCloseAudit,
submitAudit,
handleView,
AUDIT_STATUS_OPTIONS: AUDIT_STATUS_OPTIONS as any,
TRANSFER_STATUS_OPTIONS: TRANSFER_STATUS_OPTIONS as any,
};
}
src/pages/login/index.module.less
+560 -624
View File
File diff suppressed because it is too large Load Diff
src/pages/login/index.tsx
+1 -1
View File
@@ -92,7 +92,7 @@ export default defineComponent({
];
return () => (
<div class={styles.container}>
<div class={styles.loginMain}>
<div class={styles.brand}>
<div class={styles.orb1} />
<div class={styles.orb2} />
src/pages/system/roles/components/RoleFormModal.module.less
+29 -27
View File
@@ -1,33 +1,35 @@
.form {
:global {
.ant-form-item {
margin-bottom: 16px;
.roleFormModalMain {
.modal {
:global {
.ant-modal-body {
padding: 16px 24px 0;
}
}
}
}
.treeWrapper {
max-height: 380px;
overflow: auto;
padding: 8px 12px;
border: 1px solid #f0f0f0;
border-radius: 4px;
background: #fafafa;
}
.footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding-top: 16px;
border-top: 1px solid #f0f0f0;
margin-top: 8px;
}
.modal {
:global {
.ant-modal-body {
padding: 16px 24px 0;
.form {
:global {
.ant-form-item {
margin-bottom: 16px;
}
}
}
.treeWrapper {
max-height: 380px;
overflow: auto;
padding: 8px 12px;
border: 1px solid #f0f0f0;
border-radius: 4px;
background: #fafafa;
}
.footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding-top: 16px;
border-top: 1px solid #f0f0f0;
margin-top: 8px;
}
}
src/pages/system/roles/components/RoleFormModal.tsx
+1
View File
@@ -100,6 +100,7 @@ export default defineComponent({
destroyOnClose
footer={null}
centered
wrapClassName={styles.roleFormModalMain}
class={styles.modal}
>
<Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark>
src/pages/system/roles/components/UserListModal.module.less
+21 -19
View File
@@ -1,23 +1,25 @@
.filter {
margin-bottom: 16px;
}
.userListModalMain {
.filter {
margin-bottom: 16px;
}
.bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid #f0f0f0;
}
.bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid #f0f0f0;
}
.total {
color: rgba(0, 0, 0, 0.65);
font-size: 13px;
}
.total {
color: rgba(0, 0, 0, 0.65);
font-size: 13px;
}
.paginationRow {
display: flex;
justify-content: flex-end;
margin-top: 12px;
.paginationRow {
display: flex;
justify-content: flex-end;
margin-top: 12px;
}
}
src/pages/system/roles/components/UserListModal.tsx
+1
View File
@@ -78,6 +78,7 @@ export default defineComponent({
footer={null}
centered
destroyOnClose
wrapClassName={styles.userListModalMain}
>
{/* 筛选 */}
<div class={styles.filter}>
src/pages/system/roles/index.module.less
+34 -32
View File
@@ -1,43 +1,45 @@
/**
* 表格 body 容器：占满 flex 剩余空间
*/
.tableBody {
.systemRolesMain {
flex: 1;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
:global {
.ant-spin-nested-loading,
.ant-spin-container,
.ant-table,
.ant-table-container {
height: 100%;
.tableBody {
flex: 1;
min-height: 0;
overflow: hidden;
:global {
.ant-spin-nested-loading,
.ant-spin-container,
.ant-table,
.ant-table-container {
height: 100%;
}
}
}
}
/* 用户数链接 */
.userCountLink {
font-variant-numeric: tabular-nums;
}
/* ===== 删除确认弹窗 ===== */
.confirmContent {
padding: 4px 24px;
font-size: 14px;
color: rgba(0, 0, 0, 0.85);
strong {
margin: 0 4px;
font-weight: 600;
.userCountLink {
font-variant-numeric: tabular-nums;
}
}
.confirmTip {
margin-top: 8px;
font-size: 12px;
color: rgba(0, 0, 0, 0.45);
line-height: 1.5;
.confirmContent {
padding: 4px 24px;
font-size: 14px;
color: rgba(0, 0, 0, 0.85);
strong {
margin: 0 4px;
font-weight: 600;
}
}
.confirmTip {
margin-top: 8px;
font-size: 12px;
color: rgba(0, 0, 0, 0.45);
line-height: 1.5;
}
}
:global(.deleteConfirmModal) {
src/pages/system/roles/index.tsx
+44 -39
View File
@@ -6,6 +6,7 @@ import { useContainerSize } from '@/hooks';
import RoleFormModal from './components/RoleFormModal';
import UserListModal from './components/UserListModal';
import styles from './index.module.less';
import pageStyles from '@/assets/styles/pageLayout.module.less';
/**
* bodyCell 渲染
@@ -56,13 +57,15 @@ function confirmDelete({ record, onOk }: { record: any; onOk: (record: any) => v
icon: null,
class: styles.deleteConfirmModal,
content: (
<div class={styles.confirmContent}>
<div>
<span>确定要删除角色</span>
<strong>{record.roleName}</strong>
<span>吗？</span>
<div class={styles.systemRolesMain}>
<div class={styles.confirmContent}>
<div>
<span>确定要删除角色</span>
<strong>{record.roleName}</strong>
<span>吗？</span>
</div>
<div class={styles.confirmTip}>删除后该角色下的用户将失去对应的权限，请谨慎操作。</div>
</div>
<div class={styles.confirmTip}>删除后该角色下的用户将失去对应的权限，请谨慎操作。</div>
</div>
),
okText: '确认',
@@ -119,9 +122,9 @@ export default defineComponent({
];
return () => (
<div class="page-container">
<div class={pageStyles.containerMain}>
{/* ===== 筛选区 ===== */}
<div class="page-filter">
<div class={pageStyles.filter}>
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="角色" name="searchKeyword">
<Input
@@ -146,38 +149,40 @@ export default defineComponent({
</div>
{/* ===== 表格区 ===== */}
<div class="page-table">
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onViewUsers: handleViewUsers,
onEdit: handleEdit,
onDelete: triggerDelete,
}),
}}
</Table>
</div>
<div class={pageStyles.table}>
<div class={styles.systemRolesMain}>
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onViewUsers: handleViewUsers,
onEdit: handleEdit,
onDelete: triggerDelete,
}),
}}
</Table>
</div>
{/* 分页 */}
<div class="page-pagination">
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
{/* 分页 */}
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
</div>
src/pages/system/users/components/UserFormModal.module.less
+41 -44
View File
@@ -1,52 +1,49 @@
/* ===== 表单行/列布局 ===== */
.row {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.userFormModalMain {
.row {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.col {
flex: 1;
min-width: 0;
}
.col {
flex: 1;
min-width: 0;
}
/* 让 antd Form.Item 在 col 里能正确控制宽度 */
.form {
:global {
.ant-form-item {
flex: 1;
min-width: 0;
.form {
:global {
.ant-form-item {
flex: 1;
min-width: 0;
}
}
}
}
/* ===== 密码区重置链接 ===== */
.resetLink {
font-size: 14px;
color: #1677ff;
cursor: pointer;
user-select: none;
.resetLink {
font-size: 14px;
color: #1677ff;
cursor: pointer;
user-select: none;
&:hover {
color: #4096ff;
&:hover {
color: #4096ff;
}
}
.cancelRow {
display: flex;
justify-content: flex-end;
margin-top: -8px;
margin-bottom: 16px;
font-size: 12px;
}
.footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding-top: 16px;
border-top: 1px solid #f0f0f0;
margin-top: 8px;
}
}
/* ===== 取消重置行 ===== */
.cancelRow {
display: flex;
justify-content: flex-end;
margin-top: -8px;
margin-bottom: 16px;
font-size: 12px;
}
/* ===== 底部按钮 ===== */
.footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding-top: 16px;
border-top: 1px solid #f0f0f0;
margin-top: 8px;
}
src/pages/system/users/components/UserFormModal.tsx
+1
View File
@@ -121,6 +121,7 @@ export default defineComponent({
destroyOnClose
footer={null}
centered
wrapClassName={styles.userFormModalMain}
>
<Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark>
{/* 姓名 / 手机号：同一行 */}
src/pages/system/users/index.module.less
+29 -31
View File
@@ -1,41 +1,39 @@
/**
* 表格 body 容器：占满 flex 剩余空间，
* 确保 antd 嵌套 div 逐层传递 height: 100%，
* 使得 Table scroll.y 能正确解析。
*/
.tableBody {
.systemUsersMain {
flex: 1;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
:global {
.ant-spin-nested-loading,
.ant-spin-container,
.ant-table,
.ant-table-container {
height: 100%;
.tableBody {
flex: 1;
min-height: 0;
overflow: hidden;
:global {
.ant-spin-nested-loading,
.ant-spin-container,
.ant-table,
.ant-table-container {
height: 100%;
}
}
}
.confirmContent {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 4px 0;
font-size: 14px;
color: rgba(0, 0, 0, 0.85);
strong {
margin: 0 4px;
font-weight: 600;
}
}
}
/* ===== 禁用/启用 二次确认弹窗 ===== */
/* 内容块：左右加 padding，按用户要求 */
.confirmContent {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 4px 0;
font-size: 14px;
color: rgba(0, 0, 0, 0.85);
strong {
margin: 0 4px;
font-weight: 600;
}
}
/* antd Modal.confirm 默认 body 已经有 padding，这里额外覆盖一下确保一致 */
:global(.toggleConfirmModal) {
.ant-modal-confirm-body {
padding: 24px !important;
src/pages/system/users/index.tsx
+41 -36
View File
@@ -4,6 +4,7 @@ import { useUserModel, USER_ROLE_OPTIONS, USER_STATUS_OPTIONS } from './model/us
import { useContainerSize } from '@/hooks';
import UserFormModal from './components/UserFormModal';
import styles from './index.module.less';
import pageStyles from '@/assets/styles/pageLayout.module.less';
/**
* bodyCell 渲染函数
@@ -53,10 +54,12 @@ function confirmToggleStatus({ record, onOk }: { record: any; onOk: (record: any
title: `确认${actionText}`,
class: styles.toggleConfirmModal,
content: (
<div class={styles.confirmContent}>
<span>确定要{actionText}用户</span>
<strong>{record.realName}</strong>
<span>吗？</span>
<div class={styles.systemUsersMain}>
<div class={styles.confirmContent}>
<span>确定要{actionText}用户</span>
<strong>{record.realName}</strong>
<span>吗？</span>
</div>
</div>
),
okText: '确认',
@@ -117,9 +120,9 @@ export default defineComponent({
];
return () => (
<div class="page-container">
<div class={pageStyles.containerMain}>
{/* ===== 筛选区 ===== */}
<div class="page-filter">
<div class={pageStyles.filter}>
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="用户" name="searchKeyword">
<Input
@@ -162,37 +165,39 @@ export default defineComponent({
</div>
{/* ===== 表格区 ===== */}
<div class="page-table">
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onEdit: triggerEdit,
onToggleStatus: triggerToggle,
}),
}}
</Table>
</div>
<div class={pageStyles.table}>
<div class={styles.systemUsersMain}>
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onEdit: triggerEdit,
onToggleStatus: triggerToggle,
}),
}}
</Table>
</div>
{/* 独立分页 */}
<div class="page-pagination">
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
{/* 独立分页 */}
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
</div>
src/router/guard.ts
+17
View File
@@ -1,5 +1,6 @@
import router from '@/router';
import { auth } from '@/hooks/useAuth';
import { useTabsStore } from '@/stores/tabsStore';
const appTitle = import.meta.env.VITE_APP_TITLE || 'CPMS 运营平台';
@@ -57,4 +58,20 @@ router.beforeEach(async (to, _from, next) => {
router.afterEach((to) => {
updateDocumentTitle(to.meta.title as string | undefined);
// ── 路由跳转 → tab 来源 ──
// 隐藏的路由（如详情页、编辑页）不进 tab，避免标签栏被噪声污染
// /login 也不进 tab
if (to.meta?.hideInMenu || to.path === '/login') return;
if (typeof to.meta?.title !== 'string') return;
const componentName = (to.meta.componentName as string) || (to.name as string);
if (!componentName) return;
const { addTab } = useTabsStore();
addTab({
path: to.path,
name: componentName,
title: to.meta.title,
});
});
src/stores/menuStore.ts
+1
View File
@@ -152,6 +152,7 @@ function transformMenuToRoutes(nodes: MenuNode[], parentPath = ''): RouteRecordR
hideInMenu: node.hideInMenu,
activeMenu: node.activeMenu,
externalLink: node.externalLink,
componentName: node.componentName,
},
} as RouteRecordRaw;
src/stores/tabsStore.ts
+110
View File
@@ -0,0 +1,110 @@
import { reactive, computed, toRefs } from 'vue';
import router from '@/router';
import type { TabView } from '@/types';
export type { TabView };
interface TabsState {
/** 已打开的页面标签列表，按访问顺序累加 */
tabs: TabView[];
/** 需要被 keep-alive 缓存的组件 name 列表（来自每个 tab 的 name） */
cachedViews: string[];
}
const state = reactive<TabsState>({
tabs: [],
cachedViews: [],
});
/**
* 全局唯一 store 的 composable 入口
* 参考其他 store (menuStore / permissionStore) 的写法，保持代码风格统一
*/
export function useTabsStore() {
/**
* 往 tabs 列表加入一个 tab。
* - 已存在则忽略（根据 path 去重）
* - 同步把 name 加入 cachedViews，确保 <keep-alive> 能缓存该组件
*
* 通常由 router.afterEach 主动调用，所以 nav 来源 = 路由跳转。
*/
const addTab = (view: TabView): void => {
if (!view || !view.path || !view.name) return;
if (!state.tabs.some((t) => t.path === view.path)) {
state.tabs.push(view);
}
if (!state.cachedViews.includes(view.name)) {
state.cachedViews.push(view.name);
}
};
/**
* 主动（程序化地）关闭一个 tab
* - 只剩一个标签时不允许关闭（至少保留一个）
* - 关闭当前激活的 tab 时，自动跳到相邻 tab
* - 同步从 cachedViews 里移除（关闭后下次再访问会重新挂载）
*/
const removeTab = (path: string): void => {
if (state.tabs.length <= 1) return;
const idx = state.tabs.findIndex((t) => t.path === path);
if (idx === -1) return;
const target = state.tabs[idx];
const isActive = router.currentRoute.value.path === path;
const next = state.tabs[idx + 1] || state.tabs[idx - 1];
state.tabs.splice(idx, 1);
const cachedIdx = state.cachedViews.indexOf(target.name);
if (cachedIdx !== -1) state.cachedViews.splice(cachedIdx, 1);
if (isActive && next) {
router.push(next.path);
}
};
/** 关闭除 path 之外的所有 tab */
const removeOtherTabs = (path: string): void => {
state.tabs = state.tabs.filter((t) => t.path === path);
syncCachedViews();
};
/** 关闭所有 tab，保留第一个并跳转过去 */
const removeAllTabs = (): void => {
state.tabs = state.tabs.slice(0, 1);
syncCachedViews();
const first = state.tabs[0];
if (first) router.push(first.path);
};
/** 更新某个 tab 的字段（比如标题改名），按 path 定位 */
const updateTab = (path: string, partial: Partial<TabView>): void => {
const target = state.tabs.find((t) => t.path === path);
if (target) Object.assign(target, partial);
};
/** 全部清空——退出登录时调用 */
const clearTabs = (): void => {
state.tabs = [];
state.cachedViews = [];
};
/** 把 cachedViews 同步成「tabs 中仍存在的 name」 */
function syncCachedViews() {
state.cachedViews = state.cachedViews.filter((name) => state.tabs.some((t) => t.name === name));
}
return {
...toRefs(state),
tabs: computed(() => state.tabs),
cachedViews: computed(() => state.cachedViews),
addTab,
removeTab,
removeOtherTabs,
removeAllTabs,
updateTab,
clearTabs,
};
}
src/types/index.ts
+19
View File
@@ -23,6 +23,13 @@ export interface SelectOption {
disabled?: boolean;
}
/** 页面标签栏单个 tab 的数据结构 */
export interface TabView {
path: string;
name: string;
title: string;
}
// ── 菜单 & 权限 ──
/**
@@ -57,6 +64,12 @@ export interface MenuNode {
activeMenu?: string;
/** 是否禁用（禁用后路由不注册、菜单不显示） */
disabled?: boolean;
/**
* 组件 name（PascalCase，用于 KeepAlive 缓存匹配）
* 例如: 'EventList'、'SystemUsers'
* 后端下发此字段后路由守卫会自动写入 cachedViews
*/
componentName?: string;
/** 子菜单/子路由 */
children?: MenuNode[];
}
@@ -97,5 +110,11 @@ declare module 'vue-router' {
permission?: string;
/** 外链地址 */
externalLink?: string;
/** 是否固定标签（不可关闭，常用于首页 dashboard） */
affix?: boolean;
/** 不参与标签缓存，即使访问过也不进 keep-alive */
noCache?: boolean;
/** 组件 name，用于 KeepAlive 缓存匹配（如 'EventList'） */
componentName?: string;
}
}