feat: 添加banner页面 添加菜单
This commit is contained in:
ZhuRui
parent
03f1b6c220
commit
3b4dd72b11
|
|
@ -14,6 +14,12 @@ importers:
|
|||
ant-design-vue:
|
||||
specifier: ^4.0.0
|
||||
version: 4.2.6(vue@3.5.40(typescript@5.9.3))
|
||||
china-area-data:
|
||||
specifier: ^5.0.1
|
||||
version: 5.0.1
|
||||
dayjs:
|
||||
specifier: ^1.11.21
|
||||
version: 1.11.21
|
||||
express:
|
||||
specifier: ^5.2.1
|
||||
version: 5.2.1
|
||||
|
|
@ -959,6 +965,9 @@ packages:
|
|||
resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
|
||||
engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
|
||||
|
||||
china-area-data@5.0.1:
|
||||
resolution: {integrity: sha512-BQDPpiv5Nn+018ekcJK2oSD9PAD+E1bvXB0wgabc//dFVS/KvRqCgg0QOEUt3vBkx9XzB5a9BmkJCEZDBxVjVw==}
|
||||
|
||||
cli-cursor@5.0.0:
|
||||
resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
|
||||
engines: {node: '>=18'}
|
||||
|
|
@ -3159,6 +3168,8 @@ snapshots:
|
|||
|
||||
chalk@5.6.2: {}
|
||||
|
||||
china-area-data@5.0.1: {}
|
||||
|
||||
cli-cursor@5.0.0:
|
||||
dependencies:
|
||||
restore-cursor: 5.1.0
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
import { get } from '@/utils/request';
|
||||
import type { OssUploadTypeValue } from '@/utils/oss';
|
||||
|
||||
/** OSS 签名数据 */
|
||||
export interface OssSignData {
|
||||
host: string;
|
||||
dir: string;
|
||||
policy: string;
|
||||
signature: string;
|
||||
x_oss_credential: string;
|
||||
x_oss_date: string;
|
||||
security_token: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 OSS 上传签名
|
||||
* @param type 上传类型（参见 OssUploadType）
|
||||
*/
|
||||
export async function fetchOssSign(type: OssUploadTypeValue): Promise<OssSignData> {
|
||||
// 后端签名接口地址（待对接时调整）
|
||||
const res: any = await get('/sys/oss/getUploadSign', { type });
|
||||
const data = res?.data as OssSignData;
|
||||
if (!data?.host) {
|
||||
throw new Error(res?.msg || '获取上传凭证失败');
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
|
@ -95,3 +95,10 @@ a {
|
|||
margin-top: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// ===== antd 组件覆盖 =====
|
||||
|
||||
// Tag 默认 margin-right: 8px，会挤开表格列或卡片内间距，统一去掉
|
||||
.ant-tag {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,4 +81,62 @@ export const FALLBACK_MENU_NODES: MenuNode[] = [
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'finance',
|
||||
name: '账务管理',
|
||||
path: 'finance',
|
||||
icon: 'TransactionOutlined',
|
||||
children: [
|
||||
{
|
||||
id: 'finance_withdraw',
|
||||
name: '提现申请',
|
||||
path: 'finance/withdraw',
|
||||
component: 'finance/withdraw',
|
||||
},
|
||||
{
|
||||
id: 'finance_wallet',
|
||||
name: '用户钱包',
|
||||
path: 'finance/wallet',
|
||||
component: 'finance/wallet',
|
||||
},
|
||||
{
|
||||
id: 'finance_payments',
|
||||
name: '支付流水',
|
||||
path: 'finance/payments',
|
||||
component: 'finance/payments',
|
||||
},
|
||||
{
|
||||
id: 'finance_reports',
|
||||
name: '账务报表',
|
||||
path: 'finance/reports',
|
||||
component: 'finance/reports',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'system',
|
||||
name: '系统管理',
|
||||
path: 'system',
|
||||
icon: 'SettingOutlined',
|
||||
children: [
|
||||
{
|
||||
id: 'system_users',
|
||||
name: '用户管理',
|
||||
path: 'system/users',
|
||||
component: 'system/users',
|
||||
},
|
||||
{
|
||||
id: 'system_roles',
|
||||
name: '角色权限',
|
||||
path: 'system/roles',
|
||||
component: 'system/roles',
|
||||
},
|
||||
{
|
||||
id: 'system_logs',
|
||||
name: '操作日志',
|
||||
path: 'system/logs',
|
||||
component: 'system/logs',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import {
|
|||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
SettingOutlined,
|
||||
TransactionOutlined,
|
||||
TrophyOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { useMenuStore } from '@/stores/menuStore';
|
||||
|
|
@ -46,6 +47,7 @@ const ICON_MAP: Record<string, any> = {
|
|||
DashboardOutlined,
|
||||
InfoCircleOutlined,
|
||||
SettingOutlined,
|
||||
TransactionOutlined,
|
||||
TrophyOutlined,
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,113 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.uploadCardError {
|
||||
border-color: #ff4d4f;
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 6px;
|
||||
background-color: #fff;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.previewImg {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
max-height: 160px;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.previewActions {
|
||||
display: flex;
|
||||
gap: 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;
|
||||
}
|
||||
|
|
@ -0,0 +1,468 @@
|
|||
import { defineComponent, ref, reactive, watch } from 'vue';
|
||||
import {
|
||||
Modal,
|
||||
Form,
|
||||
Input,
|
||||
Select,
|
||||
DatePicker,
|
||||
InputNumber,
|
||||
Button,
|
||||
message,
|
||||
Spin,
|
||||
} from 'ant-design-vue';
|
||||
import { JUMP_TYPE_OPTIONS, EVENT_OPTIONS, REGION_OPTIONS } from '../model/useBannerModel';
|
||||
import { uploadFilesOneByOne, OssUploadType } from '@/utils/oss';
|
||||
import styles from './BannerFormModal.module.less';
|
||||
|
||||
/** 默认表单数据 */
|
||||
const getDefaultForm = () => ({
|
||||
title: '',
|
||||
imageUrl: '',
|
||||
imageStatus: 'empty' as 'empty' | 'uploading' | 'success' | 'error',
|
||||
jumpType: 'event_detail' as 'event_detail' | 'miniprogram_page' | 'custom_link' | 'none',
|
||||
relatedEventId: '',
|
||||
pagePath: '',
|
||||
customUrl: '',
|
||||
region: 'home',
|
||||
displayTimeRange: null as [string, string] | null,
|
||||
sort: 1,
|
||||
});
|
||||
|
||||
/** 表单字段最大长度限制 */
|
||||
const TITLE_MAX = 50;
|
||||
const PATH_MAX = 200;
|
||||
const URL_MAX = 500;
|
||||
|
||||
interface BannerFormModalProps {
|
||||
visible: boolean;
|
||||
record: any;
|
||||
submitting?: boolean;
|
||||
onClose: () => void;
|
||||
onSave: (formData: any) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Banner 新增/编辑表单弹窗
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'BannerFormModal',
|
||||
props: {
|
||||
visible: { type: Boolean, default: false },
|
||||
record: { type: Object, default: null },
|
||||
submitting: { type: Boolean, default: false },
|
||||
onClose: { type: Function, required: true },
|
||||
onSave: { type: Function, required: true },
|
||||
},
|
||||
setup(props: BannerFormModalProps) {
|
||||
const formRef = ref<any>();
|
||||
const fileInputRef = ref<HTMLInputElement | null>(null);
|
||||
const formData = reactive(getDefaultForm());
|
||||
|
||||
/** 根据 record 初始化表单 */
|
||||
const initFormFromRecord = (record: any) => {
|
||||
const fresh = getDefaultForm();
|
||||
if (!record) {
|
||||
Object.assign(formData, fresh);
|
||||
return;
|
||||
}
|
||||
|
||||
let pagePath = '';
|
||||
let customUrl = '';
|
||||
if (record.jumpType === 'miniprogram_page') {
|
||||
pagePath = record.jumpUrl || '';
|
||||
} else if (record.jumpType === 'custom_link') {
|
||||
customUrl = record.jumpUrl || '';
|
||||
}
|
||||
|
||||
Object.assign(formData, {
|
||||
...fresh,
|
||||
title: record.title || '',
|
||||
imageUrl: record.imageUrl || '',
|
||||
imageStatus: record.imageUrl ? ('success' as const) : ('empty' as const),
|
||||
jumpType: record.jumpType || 'event_detail',
|
||||
relatedEventId: record.relatedEventId || '',
|
||||
pagePath,
|
||||
customUrl,
|
||||
region: record.region && record.region !== record.city ? record.region : 'home',
|
||||
displayTimeRange:
|
||||
record.displayStartTime && record.displayEndTime
|
||||
? ([record.displayStartTime, record.displayEndTime] as [string, string])
|
||||
: null,
|
||||
sort: record.sort ?? 1,
|
||||
});
|
||||
};
|
||||
|
||||
/** 监听 visible 变化重置表单 */
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
if (val) {
|
||||
initFormFromRecord(props.record);
|
||||
setTimeout(() => formRef.value?.clearValidate(), 0);
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
/** 监听 jumpType 变化时清理联动字段 */
|
||||
watch(
|
||||
() => formData.jumpType,
|
||||
(newType) => {
|
||||
if (newType !== 'event_detail') formData.relatedEventId = '';
|
||||
if (newType !== 'miniprogram_page') formData.pagePath = '';
|
||||
if (newType !== 'custom_link') formData.customUrl = '';
|
||||
const fieldsToValidate: string[] = [];
|
||||
if (newType === 'event_detail') fieldsToValidate.push('relatedEventId');
|
||||
if (newType === 'miniprogram_page') fieldsToValidate.push('pagePath');
|
||||
if (newType === 'custom_link') fieldsToValidate.push('customUrl');
|
||||
if (fieldsToValidate.length) formRef.value?.clearValidate(fieldsToValidate);
|
||||
},
|
||||
);
|
||||
|
||||
/** 触发隐藏的文件选择器 */
|
||||
const triggerFilePicker = () => {
|
||||
if (formData.imageStatus === 'uploading') return;
|
||||
fileInputRef.value?.click();
|
||||
};
|
||||
|
||||
/** 处理文件选择 */
|
||||
const handleFileChange = async (e: Event) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
const file = target.files?.[0];
|
||||
// 重置 input 以便同一文件可再次选择
|
||||
target.value = '';
|
||||
|
||||
if (!file) return;
|
||||
if (!/^image\//.test(file.type)) {
|
||||
message.error('请选择图片文件');
|
||||
return;
|
||||
}
|
||||
const MAX_SIZE = 5 * 1024 * 1024;
|
||||
if (file.size > MAX_SIZE) {
|
||||
message.error('图片大小不能超过 5MB');
|
||||
return;
|
||||
}
|
||||
|
||||
// 本地预览
|
||||
const localUrl = URL.createObjectURL(file);
|
||||
formData.imageUrl = localUrl;
|
||||
formData.imageStatus = 'uploading';
|
||||
|
||||
try {
|
||||
await uploadFilesOneByOne([file], OssUploadType.Banner, {
|
||||
onSuccess: (url) => {
|
||||
URL.revokeObjectURL(localUrl);
|
||||
formData.imageUrl = url;
|
||||
formData.imageStatus = 'success';
|
||||
message.success('图片上传成功');
|
||||
},
|
||||
onError: (err, idx) => {
|
||||
console.error(`[Banner] 上传失败 (${idx}):`, err);
|
||||
URL.revokeObjectURL(localUrl);
|
||||
formData.imageUrl = '';
|
||||
formData.imageStatus = 'error';
|
||||
message.error('图片上传失败');
|
||||
},
|
||||
});
|
||||
} catch (err: any) {
|
||||
console.error('[Banner] 获取上传凭证失败:', err);
|
||||
URL.revokeObjectURL(localUrl);
|
||||
formData.imageUrl = '';
|
||||
formData.imageStatus = 'error';
|
||||
message.error(err?.message || '图片上传失败');
|
||||
}
|
||||
};
|
||||
|
||||
/** 删除已上传图片 */
|
||||
const handleRemoveImage = () => {
|
||||
if (formData.imageUrl && formData.imageUrl.startsWith('blob:')) {
|
||||
URL.revokeObjectURL(formData.imageUrl);
|
||||
}
|
||||
formData.imageUrl = '';
|
||||
formData.imageStatus = 'empty';
|
||||
};
|
||||
|
||||
/** 提交表单 */
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await formRef.value?.validate();
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
// 防御：上传中时禁止提交
|
||||
if (formData.imageStatus === 'uploading') {
|
||||
message.warning('图片仍在上传中，请稍候');
|
||||
return;
|
||||
}
|
||||
|
||||
// 构造提交数据：根据 jumpType 整理 jumpUrl
|
||||
const payload: any = { ...formData };
|
||||
if (payload.jumpType === 'event_detail') {
|
||||
payload.jumpUrl = payload.relatedEventId;
|
||||
} else if (payload.jumpType === 'miniprogram_page') {
|
||||
payload.jumpUrl = payload.pagePath;
|
||||
} else if (payload.jumpType === 'custom_link') {
|
||||
payload.jumpUrl = payload.customUrl;
|
||||
} else {
|
||||
payload.jumpUrl = '';
|
||||
}
|
||||
payload.displayStartTime = payload.displayTimeRange?.[0] || '';
|
||||
payload.displayEndTime = payload.displayTimeRange?.[1] || '';
|
||||
props.onSave(payload);
|
||||
};
|
||||
|
||||
return () => (
|
||||
<Modal
|
||||
title={props.record ? '编辑 Banner' : '新增 Banner'}
|
||||
visible={props.visible}
|
||||
onCancel={props.onClose}
|
||||
width={640}
|
||||
destroyOnClose
|
||||
footer={null}
|
||||
centered
|
||||
>
|
||||
<Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark>
|
||||
{/* ===== Banner 标题 ===== */}
|
||||
<Form.Item
|
||||
label="Banner标题"
|
||||
name="title"
|
||||
rules={[
|
||||
{ required: true, message: '请输入 Banner 标题' },
|
||||
{ max: TITLE_MAX, message: `标题最多 ${TITLE_MAX} 个字符` },
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder="请输入标题"
|
||||
maxlength={TITLE_MAX}
|
||||
allowClear
|
||||
v-model:value={formData.title}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* ===== 上传图片 ===== */}
|
||||
<Form.Item
|
||||
label="上传图片"
|
||||
name="imageUrl"
|
||||
rules={[
|
||||
{
|
||||
validator: async () => {
|
||||
if (!formData.imageUrl || formData.imageUrl.startsWith('blob:')) {
|
||||
return Promise.reject(new Error('请上传 Banner 图片'));
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<div class={styles.uploader}>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
{formData.imageStatus === 'empty' || formData.imageStatus === 'error' ? (
|
||||
<div
|
||||
class={`${styles.uploadCard} ${
|
||||
formData.imageStatus === 'error' ? styles.uploadCardError : ''
|
||||
}`}
|
||||
onClick={triggerFilePicker}
|
||||
>
|
||||
<span class={styles.uploadIcon}>+</span>
|
||||
<span class={styles.uploadHint}>点击上传</span>
|
||||
<span class={styles.uploadTip}>
|
||||
建议尺寸 1053*351 像素
|
||||
<br />
|
||||
最多上传 1 张
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div class={styles.previewWrapper}>
|
||||
<Spin spinning={formData.imageStatus === 'uploading'} tip="上传中...">
|
||||
<img class={styles.previewImg} src={formData.imageUrl} alt="banner preview" />
|
||||
</Spin>
|
||||
<div class={styles.previewActions}>
|
||||
<Button size="small" onClick={triggerFilePicker}>
|
||||
替换
|
||||
</Button>
|
||||
<Button size="small" danger onClick={handleRemoveImage}>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
{/* ===== 跳转类型 ===== */}
|
||||
<Form.Item
|
||||
label="跳转类型"
|
||||
name="jumpType"
|
||||
rules={[{ required: true, message: '请选择跳转类型' }]}
|
||||
>
|
||||
<Select
|
||||
options={JUMP_TYPE_OPTIONS as any}
|
||||
placeholder="请选择"
|
||||
v-model:value={formData.jumpType}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* ===== 联动字段：根据跳转类型动态展示 ===== */}
|
||||
{formData.jumpType === 'event_detail' && (
|
||||
<Form.Item
|
||||
label="关联赛事"
|
||||
name="relatedEventId"
|
||||
rules={[{ required: true, message: '请选择关联赛事' }]}
|
||||
>
|
||||
<Select
|
||||
options={EVENT_OPTIONS as any}
|
||||
placeholder="不关联"
|
||||
allowClear
|
||||
v-model:value={formData.relatedEventId}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{formData.jumpType === 'miniprogram_page' && (
|
||||
<Form.Item
|
||||
label="页面路径"
|
||||
name="pagePath"
|
||||
rules={[
|
||||
{ required: true, message: '请输入页面路径' },
|
||||
{
|
||||
pattern: /^\//,
|
||||
message: '页面路径需以 / 开头',
|
||||
},
|
||||
{ max: PATH_MAX, message: `路径最多 ${PATH_MAX} 个字符` },
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder="/pages/index/index"
|
||||
maxlength={PATH_MAX}
|
||||
allowClear
|
||||
v-model:value={formData.pagePath}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{formData.jumpType === 'custom_link' && (
|
||||
<Form.Item
|
||||
label="自定义链接"
|
||||
name="customUrl"
|
||||
rules={[
|
||||
{ required: true, message: '请输入自定义链接' },
|
||||
{
|
||||
pattern: /^https?:\/\//i,
|
||||
message: '请输入以 http/https 开头的链接',
|
||||
},
|
||||
{ max: URL_MAX, message: `链接最多 ${URL_MAX} 个字符` },
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder="https://xxx"
|
||||
maxlength={URL_MAX}
|
||||
allowClear
|
||||
v-model:value={formData.customUrl}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{formData.jumpType === 'none' && (
|
||||
<div class={styles.tip}>选择"无链接"时，点击 Banner 不会跳转。</div>
|
||||
)}
|
||||
|
||||
{/* ===== 所属区域 ===== */}
|
||||
<Form.Item
|
||||
label="所属区域"
|
||||
name="region"
|
||||
rules={[{ required: true, message: '请选择所属区域' }]}
|
||||
>
|
||||
<Select
|
||||
options={REGION_OPTIONS as any}
|
||||
placeholder="首页"
|
||||
v-model:value={formData.region}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* ===== 展示时间（开始/结束） ===== */}
|
||||
<div class={styles.timeRow}>
|
||||
<Form.Item
|
||||
label="开始时间"
|
||||
name="displayStartTime"
|
||||
class={styles.timeItem}
|
||||
rules={[{ required: true, message: '请选择开始时间' }]}
|
||||
>
|
||||
<DatePicker
|
||||
placeholder="年-月-日"
|
||||
format="YYYY-MM-DD"
|
||||
value={formData.displayTimeRange?.[0] as any}
|
||||
onUpdate:value={(v: any) => {
|
||||
formData.displayTimeRange = [v, formData.displayTimeRange?.[1] || ''];
|
||||
}}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="结束时间"
|
||||
name="displayEndTime"
|
||||
class={styles.timeItem}
|
||||
rules={[
|
||||
{ required: true, message: '请选择结束时间' },
|
||||
{
|
||||
validator: async () => {
|
||||
const [s, e] = formData.displayTimeRange || [];
|
||||
if (s && e && new Date(e) < new Date(s)) {
|
||||
return Promise.reject(new Error('结束时间不能早于开始时间'));
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<DatePicker
|
||||
placeholder="年-月-日"
|
||||
format="YYYY-MM-DD"
|
||||
value={formData.displayTimeRange?.[1] as any}
|
||||
onUpdate:value={(v: any) => {
|
||||
formData.displayTimeRange = [formData.displayTimeRange?.[0] || '', v];
|
||||
}}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
|
||||
{/* ===== 排序 ===== */}
|
||||
<Form.Item
|
||||
label="排序"
|
||||
name="sort"
|
||||
rules={[
|
||||
{ required: true, message: '请输入排序' },
|
||||
{ type: 'number', min: 1, max: 999, message: '排序范围 1-999' },
|
||||
]}
|
||||
extra="数字越小越靠前"
|
||||
>
|
||||
<InputNumber
|
||||
placeholder="数字越小越靠前"
|
||||
min={1}
|
||||
max={999}
|
||||
precision={0}
|
||||
style={{ width: '200px' }}
|
||||
v-model:value={formData.sort}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
{/* ===== 底部按钮 ===== */}
|
||||
<div class={styles.footer}>
|
||||
<Button onClick={props.onClose}>取消</Button>
|
||||
<Button type="primary" loading={props.submitting} onClick={handleSubmit}>
|
||||
确认保存
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
@ -1,10 +1,14 @@
|
|||
.container {
|
||||
// 容器
|
||||
}
|
||||
.tableBody {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 24px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
:global {
|
||||
.ant-spin-nested-loading,
|
||||
.ant-spin-container,
|
||||
.ant-table,
|
||||
.ant-table-container {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,129 @@
|
|||
import { defineComponent } from 'vue';
|
||||
import { Button, Input, Table, Modal, Space, Popconfirm, Form } from 'ant-design-vue';
|
||||
import { useBannerModel } from './model/useBannerModel';
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Table,
|
||||
Form,
|
||||
Space,
|
||||
Select,
|
||||
Tooltip,
|
||||
Pagination,
|
||||
Modal,
|
||||
Image,
|
||||
} from 'ant-design-vue';
|
||||
import { useBannerModel, BANNER_STATUS_OPTIONS } from './model/useBannerModel';
|
||||
import { useContainerSize } from '@/hooks';
|
||||
import BannerFormModal from './components/BannerFormModal';
|
||||
import styles from './index.module.less';
|
||||
|
||||
/**
|
||||
* bodyCell 渲染函数
|
||||
*/
|
||||
function renderBodyCell({
|
||||
column,
|
||||
text,
|
||||
record,
|
||||
renderJumpType,
|
||||
renderStatus,
|
||||
onEdit,
|
||||
onToggleStatus,
|
||||
onDelete,
|
||||
}: {
|
||||
column: any;
|
||||
text: any;
|
||||
record: any;
|
||||
renderJumpType: (type: string) => any;
|
||||
renderStatus: (status: string) => any;
|
||||
onEdit: (record: any) => void;
|
||||
onToggleStatus: (record: any) => void;
|
||||
onDelete: (record: any) => void;
|
||||
}) {
|
||||
// 图片列：80 * 44
|
||||
if (column.key === 'image') {
|
||||
return (
|
||||
<Image
|
||||
src={record.imageUrl}
|
||||
width={80}
|
||||
height={44}
|
||||
style={{ objectFit: 'cover', borderRadius: '4px' }}
|
||||
fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAoCAMAAABQp/7DAAAANlBMVEUAAADg4ODd3d3c3Nzb29va2trZ2dnY2NjX19fW1tbV1dXU1NTT09PS0tLR0dHQ0NDPz8/Pz8/BwHhiAAAAEnRSTlMAHx8/P09fb2+Pn5+vv7/P39+GGqSCAAABMklEQVRIx+2T27KDIAxFSRQQRbz//7edUwyhBWc6+7AuH4QNEiAllDbKj5M/4CAbMR3lH7+9LZxk3wpP3lxHJ8lbFm3OMpysbsPehDdHcLIKHGjs1hKc3NaRyNoTOFnujhFZZxfF0MKsA6hB6w2Ck9UPYNOGA5ysXsLGlhPWNpysOkAHTt25PsHJeA3HqCzUDoaCLQYrvG3tO+z1BjyC8GII/TVHcWyit+BS8Q5fU3hA2F/F5awWeCgT9CzHwMjJjFAXiAOfGFjTQSBXGpgl9BlQDf84sIKGAleYwQcUoYSHErFgB8EDn5iu3gKCgwVZOFooAyfLUBK7B27M4PWAlVmsFESoFwtKeYTlBHF1LuhzF2K9Q+/nJ1DQBSxcoGOrL4I3s0DPASBvfFq8t9gPAAAAAElFTkSuQmCC"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// 标题列：超长截断 + Tooltip
|
||||
if (column.dataIndex === 'title') {
|
||||
const maxLen = 18;
|
||||
const raw = text || '';
|
||||
const display = raw.length > maxLen ? raw.slice(0, maxLen) + '...' : raw;
|
||||
return raw.length > maxLen ? (
|
||||
<Tooltip title={raw}>
|
||||
<span>{display}</span>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<span>{display}</span>
|
||||
);
|
||||
}
|
||||
|
||||
// 跳转类型列：彩色 Tag
|
||||
if (column.dataIndex === 'jumpType') {
|
||||
return renderJumpType(text);
|
||||
}
|
||||
|
||||
// 关联赛事列：为空显示 "-"
|
||||
if (column.dataIndex === 'relatedEvent') {
|
||||
return <span>{text || '-'}</span>;
|
||||
}
|
||||
|
||||
// 所属区域列：省 + 市 拼接
|
||||
if (column.key === 'region') {
|
||||
return (
|
||||
<span>
|
||||
{record.province}
|
||||
{record.city}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// 展示时间列：日期时间段
|
||||
if (column.key === 'displayTime') {
|
||||
return (
|
||||
<span>
|
||||
{record.displayStartTime} 至 {record.displayEndTime}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// 状态列：启用中(绿色) / 已禁用(灰色半透明)
|
||||
if (column.dataIndex === 'status') {
|
||||
return renderStatus(text);
|
||||
}
|
||||
|
||||
// 操作列
|
||||
if (column.key === 'action') {
|
||||
const isEnabled = record.status === 'enabled';
|
||||
return (
|
||||
<Space>
|
||||
<Button type="link" size="small" onClick={() => onEdit(record)}>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
style={isEnabled ? { color: '#faad14' } : { color: '#52c41a' }}
|
||||
onClick={() => onToggleStatus(record)}
|
||||
>
|
||||
{isEnabled ? '禁用' : '启用'}
|
||||
</Button>
|
||||
<Button type="link" size="small" danger onClick={() => onDelete(record)}>
|
||||
删除
|
||||
</Button>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* Banner 配置
|
||||
|
|
@ -16,20 +139,65 @@ export default defineComponent({
|
|||
pagination,
|
||||
modalVisible,
|
||||
editingRecord,
|
||||
formSubmitting,
|
||||
renderJumpType,
|
||||
renderStatus,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
handleCloseModal,
|
||||
handleSave,
|
||||
handleDelete,
|
||||
handleToggleStatus,
|
||||
} = useBannerModel();
|
||||
|
||||
const { containerRef, height } = useContainerSize({ headerOffset: 55 });
|
||||
|
||||
/** 删除二次确认 */
|
||||
const confirmDelete = (record: any) => {
|
||||
Modal.confirm({
|
||||
title: '删除确认',
|
||||
content: `确认要删除 "${record.title}" 吗？`,
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
okButtonProps: { danger: true },
|
||||
onOk: () => handleDelete(record),
|
||||
});
|
||||
};
|
||||
|
||||
/** 启用/禁用二次确认 */
|
||||
const confirmToggleStatus = (record: any) => {
|
||||
const isEnabled = record.status === 'enabled';
|
||||
const actionText = isEnabled ? '禁用' : '启用';
|
||||
Modal.confirm({
|
||||
title: `${actionText}确认`,
|
||||
content: `确认要${actionText} "${record.title}" 吗？`,
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: () => handleToggleStatus(record),
|
||||
});
|
||||
};
|
||||
|
||||
/** 最终表格列：模型列 + 操作 */
|
||||
const tableColumns = [
|
||||
...columns,
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 220,
|
||||
fixed: 'right' as const,
|
||||
align: 'center' as const,
|
||||
},
|
||||
];
|
||||
|
||||
return () => (
|
||||
<div class="page-container">
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class="page-filter">
|
||||
<Form layout="inline" model={filterForm}>
|
||||
<Form.Item label="Banner 标题" name="searchTitle">
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="标题" name="searchTitle">
|
||||
<Input
|
||||
placeholder="请输入 Banner 标题"
|
||||
style={{ width: '200px' }}
|
||||
|
|
@ -37,68 +205,82 @@ export default defineComponent({
|
|||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="状态" name="status">
|
||||
<Select
|
||||
value={filterForm.status}
|
||||
options={BANNER_STATUS_OPTIONS as any}
|
||||
style={{ width: '120px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.status = val || '')}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" onClick={handleSearch} loading={loading.value}>
|
||||
查询
|
||||
</Button>
|
||||
<Button onClick={handleReset}>重置</Button>
|
||||
<Button type="primary" onClick={handleAdd}>
|
||||
新增
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
{/* ===== 表格区 ===== */}
|
||||
<div class="page-table">
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<Button type="primary" onClick={handleAdd}>
|
||||
新增 Banner
|
||||
</Button>
|
||||
<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>
|
||||
<Table
|
||||
columns={[
|
||||
...columns,
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
customRender: ({ record }: { record: any }) => (
|
||||
<Space>
|
||||
<Button type="link" size="small" onClick={() => handleEdit(record)}>
|
||||
编辑
|
||||
</Button>
|
||||
<Popconfirm title="确定删除该 Banner？" onConfirm={() => handleDelete(record)}>
|
||||
<Button type="link" size="small" danger>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]}
|
||||
dataSource={dataSource.value}
|
||||
loading={loading.value}
|
||||
pagination={{
|
||||
current: pagination.value.current,
|
||||
pageSize: pagination.value.pageSize,
|
||||
total: pagination.value.total,
|
||||
showSizeChanger: true,
|
||||
showTotal: (total: number) => `共 ${total} 条`,
|
||||
onChange: handlePageChange,
|
||||
|
||||
{/* 独立分页，右下方 */}
|
||||
<div
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
padding: '10px 0 0',
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<Pagination
|
||||
current={pagination.value.current}
|
||||
pageSize={pagination.value.pageSize}
|
||||
total={pagination.value.total}
|
||||
showSizeChanger
|
||||
showTotal={(total: number) => `共 ${total} 条`}
|
||||
onChange={handlePageChange}
|
||||
onShowSizeChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
title={editingRecord.value ? '编辑 Banner' : '新增 Banner'}
|
||||
{/* ===== 新增/编辑弹窗 ===== */}
|
||||
<BannerFormModal
|
||||
visible={modalVisible.value}
|
||||
onCancel={handleCloseModal}
|
||||
footer={null}
|
||||
>
|
||||
<p>
|
||||
{editingRecord.value
|
||||
? `正在编辑: ${editingRecord.value.title}`
|
||||
: '在此新增 Banner 配置'}
|
||||
</p>
|
||||
</Modal>
|
||||
record={editingRecord.value}
|
||||
submitting={formSubmitting.value}
|
||||
onClose={handleCloseModal}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,14 +1,124 @@
|
|||
import { computed, reactive, toRef, Ref } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { computed, reactive, toRef, Ref, h } from 'vue';
|
||||
import { message, Tag } from 'ant-design-vue';
|
||||
import { useState, useDebounce, useThrottleFn } from '@/hooks';
|
||||
|
||||
// ============================================================
|
||||
// 常量
|
||||
// ============================================================
|
||||
|
||||
/** Banner 状态选项（筛选） */
|
||||
export const BANNER_STATUS_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'enabled', label: '启用' },
|
||||
{ value: 'disabled', label: '禁用' },
|
||||
] as const;
|
||||
|
||||
/** 跳转类型选项（表单下拉） */
|
||||
export const JUMP_TYPE_OPTIONS = [
|
||||
{ value: 'event_detail', label: '赛事详情页' },
|
||||
{ value: 'miniprogram_page', label: '小程序页面' },
|
||||
{ value: 'custom_link', label: '自定义链接' },
|
||||
{ value: 'none', label: '无链接' },
|
||||
] as const;
|
||||
|
||||
/** 跳转类型映射（用于表格 Tag 渲染） */
|
||||
const JUMP_TYPE_MAP: Record<string, { label: string; color: string }> = {
|
||||
event_detail: { label: '赛事详情页', color: 'blue' },
|
||||
miniprogram_page: { label: '小程序页面', color: 'cyan' },
|
||||
custom_link: { label: '自定义链接', color: 'purple' },
|
||||
none: { label: '无链接', color: 'default' },
|
||||
};
|
||||
|
||||
/** Banner 状态映射 */
|
||||
const STATUS_MAP: Record<string, { label: string; color: string }> = {
|
||||
enabled: { label: '启用中', color: 'green' },
|
||||
disabled: { label: '已禁用', color: 'default' },
|
||||
};
|
||||
|
||||
/** 关联赛事选项（mock） */
|
||||
export const EVENT_OPTIONS = [
|
||||
{ value: '', label: '不关联' },
|
||||
{ value: 'EV20260701001', label: '2026全国青少年羽毛球锦标赛暨体育文化交流大会' },
|
||||
{ value: 'EV20260701002', label: '国际马拉松城市联赛' },
|
||||
{ value: 'EV20260701003', label: '全民健身运动会' },
|
||||
{ value: 'EV20260701004', label: '上海国际马拉松公开赛' },
|
||||
{ value: 'EV20260701005', label: '北京城市定向越野挑战赛' },
|
||||
];
|
||||
|
||||
/** 所属区域选项（mock） */
|
||||
export const REGION_OPTIONS = [
|
||||
{ value: 'home', label: '首页' },
|
||||
{ value: 'guangdong_shenzhen', label: '广东省深圳市' },
|
||||
{ value: 'zhejiang_hangzhou', label: '浙江省杭州市' },
|
||||
{ value: 'beijing', label: '北京市' },
|
||||
{ value: 'shanghai', label: '上海市' },
|
||||
];
|
||||
|
||||
// ============================================================
|
||||
// 假数据（表格）
|
||||
// ============================================================
|
||||
|
||||
const MOCK_DATA = Array.from({ length: 12 }, (_, i) => {
|
||||
const jumpType = (['event_detail', 'miniprogram_page', 'custom_link', 'none'] as const)[i % 4];
|
||||
const provinces = ['广东省', '浙江省', '北京市', '上海市'];
|
||||
const cities = ['深圳市', '杭州市', '北京市', '上海市'];
|
||||
|
||||
return {
|
||||
key: `${i + 1}`,
|
||||
id: `BANNER${String(i + 1).padStart(4, '0')}`,
|
||||
sort: i + 1,
|
||||
imageUrl: `https://picsum.photos/seed/banner${i + 1}/80/44`,
|
||||
title:
|
||||
i % 4 === 0
|
||||
? '2026全国青少年羽毛球锦标赛火热报名中'
|
||||
: i % 4 === 1
|
||||
? '马拉松城市联赛限时优惠'
|
||||
: i % 4 === 2
|
||||
? '健身运动会专属福利'
|
||||
: '平台品牌宣传活动',
|
||||
jumpType,
|
||||
jumpUrl:
|
||||
jumpType === 'custom_link'
|
||||
? 'https://example.com/activity'
|
||||
: jumpType === 'miniprogram_page'
|
||||
? '/pages/activity/detail'
|
||||
: '',
|
||||
relatedEventId:
|
||||
jumpType === 'event_detail'
|
||||
? (['EV20260701001', 'EV20260701002', 'EV20260701003'] as const)[i % 3]
|
||||
: '',
|
||||
relatedEvent:
|
||||
jumpType === 'event_detail'
|
||||
? (() => {
|
||||
const map: Record<string, string> = {
|
||||
EV20260701001: '2026全国青少年羽毛球锦标赛暨体育文化交流大会',
|
||||
EV20260701002: '国际马拉松城市联赛',
|
||||
EV20260701003: '全民健身运动会',
|
||||
};
|
||||
return map[(['EV20260701001', 'EV20260701002', 'EV20260701003'] as const)[i % 3]] || '';
|
||||
})()
|
||||
: '',
|
||||
region: provinces[i % 4],
|
||||
city: cities[i % 4],
|
||||
displayStartTime: '2026-08-01 00:00',
|
||||
displayEndTime: '2026-08-31 23:59',
|
||||
createTime: `2026-07-${String((i % 28) + 1).padStart(2, '0')} ${String((i * 2 + 8) % 24).padStart(2, '0')}:${String((i * 7) % 60).padStart(2, '0')}`,
|
||||
status: (i % 4 === 0 ? 'disabled' : 'enabled') as 'enabled' | 'disabled',
|
||||
};
|
||||
});
|
||||
|
||||
// ============================================================
|
||||
// Model
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* Banner 配置页数据模型
|
||||
*/
|
||||
export function useBannerModel() {
|
||||
// ===== 筛选条件（合并在一个 reactive 对象中）=====
|
||||
// ===== 筛选条件 =====
|
||||
const filterForm = reactive({
|
||||
searchTitle: '',
|
||||
status: '' as '' | 'enabled' | 'disabled',
|
||||
});
|
||||
|
||||
// 防抖 300ms
|
||||
|
|
@ -19,39 +129,59 @@ export function useBannerModel() {
|
|||
|
||||
// ===== 表格状态 =====
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [dataSource, setDataSource] = useState<any[]>([]);
|
||||
const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
total: MOCK_DATA.length,
|
||||
});
|
||||
|
||||
// ===== 弹窗状态 =====
|
||||
const [modalVisible, setModalVisible] = useState<boolean>(false);
|
||||
const [editingRecord, setEditingRecord] = useState<any>(null);
|
||||
|
||||
// ===== 表格列配置 =====
|
||||
// ===== 提交态（用于表单弹窗的确认按钮 loading）=====
|
||||
const [formSubmitting, setFormSubmitting] = useState<boolean>(false);
|
||||
|
||||
// ===== 表格列配置（纯数据列，复杂渲染在页面 bodyCell 中处理）=====
|
||||
const columns = [
|
||||
{ title: 'Banner 标题', dataIndex: 'title', key: 'title' },
|
||||
{ title: '排序值', dataIndex: 'sort', key: 'sort' },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status' },
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
|
||||
{ title: '更新时间', dataIndex: 'updateTime', key: 'updateTime' },
|
||||
{ title: '排序', dataIndex: 'sort', key: 'sort', width: 70, align: 'center' as const },
|
||||
{ title: '图片', key: 'image', width: 100, align: 'center' as const },
|
||||
{ title: '标题', dataIndex: 'title', key: 'title', width: 220 },
|
||||
{
|
||||
title: '跳转类型',
|
||||
dataIndex: 'jumpType',
|
||||
key: 'jumpType',
|
||||
width: 120,
|
||||
align: 'center' as const,
|
||||
},
|
||||
{ title: '关联赛事', dataIndex: 'relatedEvent', key: 'relatedEvent', width: 200 },
|
||||
{ title: '所属区域', key: 'region', width: 140 },
|
||||
{ title: '展示时间', key: 'displayTime', width: 260 },
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 160 },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', width: 100, align: 'center' as const },
|
||||
];
|
||||
|
||||
// ===== 计算属性 =====
|
||||
const hasFilter = computed(() => {
|
||||
return debouncedTitle.value.trim() !== '';
|
||||
return debouncedTitle.value.trim() !== '' || filterForm.status !== '';
|
||||
});
|
||||
|
||||
const isEdit = computed(() => editingRecord.value !== null);
|
||||
|
||||
// ===== 方法 =====
|
||||
|
||||
/** 查询（节流 500ms） */
|
||||
const handleSearch = useThrottleFn(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log('搜索条件:', {
|
||||
title: debouncedTitle.value,
|
||||
status: filterForm.status,
|
||||
});
|
||||
// TODO: 替换为真实 API 调用
|
||||
console.log('搜索条件:', { title: debouncedTitle.value });
|
||||
setDataSource(MOCK_DATA);
|
||||
setPagination({ ...pagination.value, total: MOCK_DATA.length });
|
||||
message.success('查询成功');
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '查询失败');
|
||||
|
|
@ -63,8 +193,9 @@ export function useBannerModel() {
|
|||
/** 重置（节流 500ms） */
|
||||
const handleReset = useThrottleFn(() => {
|
||||
filterForm.searchTitle = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: 0 });
|
||||
setDataSource([]);
|
||||
filterForm.status = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
|
||||
setDataSource(MOCK_DATA);
|
||||
}, 500);
|
||||
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
|
|
@ -90,10 +221,33 @@ export function useBannerModel() {
|
|||
setEditingRecord(null);
|
||||
};
|
||||
|
||||
/** 提交表单（新增/编辑） */
|
||||
const handleSave = useThrottleFn(async (formPayload: any) => {
|
||||
if (formSubmitting.value) return;
|
||||
setFormSubmitting(true);
|
||||
try {
|
||||
const payload = {
|
||||
...formPayload,
|
||||
displayStartTime: formPayload.displayTimeRange?.[0] || '',
|
||||
displayEndTime: formPayload.displayTimeRange?.[1] || '',
|
||||
};
|
||||
console.log(isEdit.value ? '编辑 Banner' : '新增 Banner', payload);
|
||||
// TODO: 替换为真实 API 调用
|
||||
message.success(isEdit.value ? '编辑成功' : '新增成功');
|
||||
handleCloseModal();
|
||||
handleSearch();
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '操作失败');
|
||||
} finally {
|
||||
setFormSubmitting(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 删除（节流 500ms） */
|
||||
const handleDelete = useThrottleFn(async (record: any) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log('删除 Banner:', record.id);
|
||||
// TODO: 替换为真实 API 调用
|
||||
message.success('删除成功');
|
||||
handleSearch();
|
||||
|
|
@ -104,6 +258,44 @@ export function useBannerModel() {
|
|||
}
|
||||
}, 500);
|
||||
|
||||
/** 启用/禁用切换（节流 500ms） */
|
||||
const handleToggleStatus = useThrottleFn(async (record: any) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const newStatus = record.status === 'enabled' ? 'disabled' : 'enabled';
|
||||
const actionText = newStatus === 'enabled' ? '启用' : '禁用';
|
||||
console.log(`${actionText} Banner:`, record.id);
|
||||
// TODO: 替换为真实 API 调用
|
||||
// 更新本地数据
|
||||
setDataSource(
|
||||
dataSource.value.map((item: any) =>
|
||||
item.key === record.key ? { ...item, status: newStatus } : item,
|
||||
),
|
||||
);
|
||||
message.success(`${actionText}成功`);
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '操作失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
// ===== 供页面 bodyCell 使用的渲染工具 =====
|
||||
const renderJumpType = (type: string) => {
|
||||
const info = JUMP_TYPE_MAP[type] || { label: type || '-', color: 'default' };
|
||||
return h(Tag, { color: info.color }, () => info.label);
|
||||
};
|
||||
|
||||
const renderStatus = (status: string) => {
|
||||
const info = STATUS_MAP[status] || { label: status || '-', color: 'default' };
|
||||
const tagProps: any = { color: info.color };
|
||||
// 已禁用状态添加半透明样式
|
||||
if (status === 'disabled') {
|
||||
tagProps.style = { opacity: 0.5 };
|
||||
}
|
||||
return h(Tag, tagProps, () => info.label);
|
||||
};
|
||||
|
||||
return {
|
||||
filterForm,
|
||||
loading,
|
||||
|
|
@ -114,12 +306,18 @@ export function useBannerModel() {
|
|||
modalVisible,
|
||||
setModalVisible,
|
||||
editingRecord,
|
||||
isEdit,
|
||||
formSubmitting,
|
||||
renderJumpType,
|
||||
renderStatus,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
handleCloseModal,
|
||||
handleSave,
|
||||
handleDelete,
|
||||
handleToggleStatus,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,196 @@
|
|||
// ===== 自定义标题栏 =====
|
||||
.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;
|
||||
}
|
||||
|
||||
// ===== 订单信息 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 {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,270 @@
|
|||
import { defineComponent, ref, computed } from 'vue';
|
||||
import { Modal, Table, Button, Tag, Pagination, Image, Space } from 'ant-design-vue';
|
||||
import styles from './OrderDetailModal.module.less';
|
||||
|
||||
interface OrderDetailModalProps {
|
||||
visible: boolean;
|
||||
record: any;
|
||||
onClose: () => void;
|
||||
/** 触发"重新退款"二次确认对话框 */
|
||||
onReRefund: (record: any) => void;
|
||||
}
|
||||
|
||||
const PLAYER_COLUMNS = [
|
||||
{ title: '真实姓名', dataIndex: 'name', key: 'name', width: 100, align: 'center' as const },
|
||||
{ title: '性别', dataIndex: 'gender', key: 'gender', width: 80, align: 'center' as const },
|
||||
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 130 },
|
||||
{ title: '证件号', dataIndex: 'idNo', key: 'idNo', width: 180 },
|
||||
{
|
||||
title: '证件图片',
|
||||
dataIndex: 'idImg',
|
||||
key: 'idImg',
|
||||
width: 170,
|
||||
customRender: ({ text }: { text: string[] }) => (
|
||||
<Space>
|
||||
{(text || []).map((src) => (
|
||||
<Image key={src} width={60} height={40} src={src} />
|
||||
))}
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '比赛组别',
|
||||
dataIndex: 'groupName',
|
||||
key: 'groupName',
|
||||
width: 110,
|
||||
align: 'center' as const,
|
||||
},
|
||||
{
|
||||
title: '订单金额',
|
||||
dataIndex: 'orderAmount',
|
||||
key: 'orderAmount',
|
||||
width: 100,
|
||||
align: 'right' as const,
|
||||
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
|
||||
},
|
||||
{
|
||||
title: '优惠金额',
|
||||
dataIndex: 'discountAmount',
|
||||
key: 'discountAmount',
|
||||
width: 100,
|
||||
align: 'right' as const,
|
||||
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
|
||||
},
|
||||
{
|
||||
title: '实付金额',
|
||||
dataIndex: 'paidAmount',
|
||||
key: 'paidAmount',
|
||||
width: 100,
|
||||
align: 'right' as const,
|
||||
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
|
||||
},
|
||||
{
|
||||
title: '退款金额',
|
||||
dataIndex: 'refundAmount',
|
||||
key: 'refundAmount',
|
||||
width: 100,
|
||||
align: 'right' as const,
|
||||
customRender: ({ text }: { text: number }) => (text ? text.toFixed(2) : '-'),
|
||||
},
|
||||
];
|
||||
|
||||
const REFUND_STATUS_MAP: Record<string, { label: string; color: string }> = {
|
||||
success: { label: '退款成功', color: 'green' },
|
||||
failed: { label: '退款失败', color: 'red' },
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'OrderDetailModal',
|
||||
props: {
|
||||
visible: { type: Boolean, default: false },
|
||||
record: { type: Object, default: () => ({}) },
|
||||
onClose: { type: Function, required: true },
|
||||
onReRefund: { type: Function, required: true },
|
||||
},
|
||||
setup(props: OrderDetailModalProps) {
|
||||
const refundPage = ref<number>(1);
|
||||
const refundPageSize = ref<number>(2);
|
||||
|
||||
/** 退款记录 */
|
||||
const refundRecords = computed<any[]>(() => props.record?.refundRecords || []);
|
||||
const hasRefund = computed(() => refundRecords.value.length > 0);
|
||||
|
||||
/** 当前页展示的退款记录 */
|
||||
const pagedRefunds = computed(() => {
|
||||
const start = (refundPage.value - 1) * refundPageSize.value;
|
||||
return refundRecords.value.slice(start, start + refundPageSize.value);
|
||||
});
|
||||
|
||||
/** 已退金额合计 */
|
||||
const totalRefunded = computed(() =>
|
||||
refundRecords.value
|
||||
.filter((r) => r.status === 'success')
|
||||
.reduce((sum, r) => sum + (r.amount || 0), 0),
|
||||
);
|
||||
|
||||
const handleRefundPageChange = (page: number, pageSize: number) => {
|
||||
refundPage.value = page;
|
||||
refundPageSize.value = pageSize;
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
// 无退款信息时：仅关闭弹窗
|
||||
props.onClose();
|
||||
};
|
||||
|
||||
const handleReRefund = () => {
|
||||
props.onReRefund(props.record);
|
||||
};
|
||||
|
||||
return () => (
|
||||
<Modal
|
||||
visible={props.visible}
|
||||
onCancel={props.onClose}
|
||||
footer={null}
|
||||
width={1000}
|
||||
centered
|
||||
destroyOnClose
|
||||
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>
|
||||
|
||||
{/* ===== 选手信息 ===== */}
|
||||
<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>
|
||||
</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>
|
||||
) : (
|
||||
<Button type="primary" onClick={handleConfirm}>
|
||||
确认
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
@ -1,10 +1,37 @@
|
|||
.container {
|
||||
// 容器
|
||||
/**
|
||||
* 表格 body 容器：占满 flex 剩余空间，并确保 antd 嵌套 div 逐层传递 height: 100%，
|
||||
* 使得 Table scroll.y = 'calc(100% - 55px)' 中的 100% 能正确解析。
|
||||
*/
|
||||
.tableBody {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
:global {
|
||||
.ant-spin-nested-loading,
|
||||
.ant-spin-container,
|
||||
.ant-table,
|
||||
.ant-table-container {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 24px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
.summaryBar {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 8px 0;
|
||||
font-size: 14px;
|
||||
color: #1a1a1a;
|
||||
|
||||
.summaryItem {
|
||||
font-weight: 500;
|
||||
|
||||
.summaryLabel {
|
||||
color: #666;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,93 @@
|
|||
import { defineComponent } from 'vue';
|
||||
import { Button, Input, Table, Form, Space } from 'ant-design-vue';
|
||||
import { useOrderModel } from './model/useOrderModel';
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Table,
|
||||
Form,
|
||||
Space,
|
||||
Select,
|
||||
DatePicker,
|
||||
Tooltip,
|
||||
Pagination,
|
||||
Modal,
|
||||
} from 'ant-design-vue';
|
||||
import { useOrderModel, ORDER_STATUS_OPTIONS, REFUND_STATUS_OPTIONS } from './model/useOrderModel';
|
||||
import { useContainerSize, useState } from '@/hooks';
|
||||
import OrderDetailModal from './components/OrderDetailModal';
|
||||
import styles from './index.module.less';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
/**
|
||||
* 触发「重新退款」二次确认对话框
|
||||
* 表格中的重新退款按钮和详情弹窗中的重新退款按钮均调用此函数。
|
||||
*/
|
||||
function promptReRefund(record: any) {
|
||||
Modal.confirm({
|
||||
title: '确认要重新退款吗？',
|
||||
content: (
|
||||
<div>
|
||||
<div>退款金额：￥{(record.refundAmount || 0).toFixed(2)}</div>
|
||||
<div>退款方式：原路退回（微信支付）</div>
|
||||
</div>
|
||||
),
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
console.log('重新退款:', record.orderId);
|
||||
// TODO: 替换为真实 API 调用
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* bodyCell 渲染函数
|
||||
*/
|
||||
function renderBodyCell({
|
||||
column,
|
||||
text,
|
||||
record,
|
||||
onView,
|
||||
onReRefund,
|
||||
}: {
|
||||
column: any;
|
||||
text: any;
|
||||
record: any;
|
||||
onView: (record: any) => void;
|
||||
onReRefund: (record: any) => void;
|
||||
}) {
|
||||
// 赛事名称：最多15字符，超出显示 Tooltip
|
||||
if (column.dataIndex === 'eventName') {
|
||||
const maxLen = 15;
|
||||
const raw = text || '';
|
||||
const display = raw.length > maxLen ? raw.slice(0, maxLen) + '...' : raw;
|
||||
return raw.length > maxLen ? (
|
||||
<Tooltip title={raw}>
|
||||
<span>{display}</span>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<span>{display}</span>
|
||||
);
|
||||
}
|
||||
|
||||
if (column.key === 'action') {
|
||||
const showReRefund = record.refundStatus === 'refund_failed';
|
||||
return (
|
||||
<Space>
|
||||
<Button type="link" size="small" onClick={() => onView(record)}>
|
||||
查看
|
||||
</Button>
|
||||
{showReRefund && (
|
||||
<Button type="link" size="small" onClick={() => onReRefund(record)}>
|
||||
重新退款
|
||||
</Button>
|
||||
)}
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* 订单管理
|
||||
|
|
@ -13,16 +100,53 @@ export default defineComponent({
|
|||
loading,
|
||||
dataSource,
|
||||
columns,
|
||||
summary,
|
||||
pagination,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
} = useOrderModel();
|
||||
|
||||
const { containerRef, height } = useContainerSize({ headerOffset: 55 });
|
||||
|
||||
// 详情弹窗状态
|
||||
const [detailVisible, setDetailVisible] = useState<boolean>(false);
|
||||
const [currentRecord, setCurrentRecord] = useState<any>({});
|
||||
|
||||
const handleView = (record: any) => {
|
||||
setCurrentRecord(record);
|
||||
setDetailVisible(true);
|
||||
};
|
||||
|
||||
const handleReRefund = (record: any) => {
|
||||
promptReRefund(record);
|
||||
};
|
||||
|
||||
/** 最终表格列：模型列 + 操作 */
|
||||
const tableColumns = [
|
||||
...columns,
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 160,
|
||||
fixed: 'right' as const,
|
||||
align: 'center' as const,
|
||||
},
|
||||
];
|
||||
|
||||
return () => (
|
||||
<div class="page-container">
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class="page-filter">
|
||||
<Form layout="inline" model={filterForm}>
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="订单时间" name="orderTimeRange">
|
||||
<RangePicker
|
||||
value={filterForm.orderTimeRange as any}
|
||||
style={{ width: '260px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.orderTimeRange = val)}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="订单编号" name="searchOrderId">
|
||||
<Input
|
||||
placeholder="请输入订单编号"
|
||||
|
|
@ -39,14 +163,32 @@ export default defineComponent({
|
|||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="用户名" name="searchUserName">
|
||||
<Form.Item label="选手名称" name="searchPlayerName">
|
||||
<Input
|
||||
placeholder="请输入用户名"
|
||||
placeholder="请输入选手名称"
|
||||
style={{ width: '200px' }}
|
||||
allowClear
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="订单状态" name="orderStatus">
|
||||
<Select
|
||||
value={filterForm.orderStatus}
|
||||
options={ORDER_STATUS_OPTIONS as any}
|
||||
style={{ width: '120px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.orderStatus = val || '')}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="退款状态" name="refundStatus">
|
||||
<Select
|
||||
value={filterForm.refundStatus}
|
||||
options={REFUND_STATUS_OPTIONS as any}
|
||||
style={{ width: '120px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.refundStatus = val || '')}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" onClick={handleSearch} loading={loading.value}>
|
||||
|
|
@ -58,21 +200,75 @@ export default defineComponent({
|
|||
</Form>
|
||||
</div>
|
||||
|
||||
{/* ===== 表格区 ===== */}
|
||||
<div class="page-table">
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={dataSource.value}
|
||||
loading={loading.value}
|
||||
pagination={{
|
||||
current: pagination.value.current,
|
||||
pageSize: pagination.value.pageSize,
|
||||
total: pagination.value.total,
|
||||
showSizeChanger: true,
|
||||
showTotal: (total: number) => `共 ${total} 条`,
|
||||
onChange: handlePageChange,
|
||||
{/* 金额汇总 */}
|
||||
<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
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
padding: '10px 0 0',
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<Pagination
|
||||
current={pagination.value.current}
|
||||
pageSize={pagination.value.pageSize}
|
||||
total={pagination.value.total}
|
||||
showSizeChanger
|
||||
showTotal={(total: number) => `共 ${total} 条`}
|
||||
onChange={handlePageChange}
|
||||
onShowSizeChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ===== 详情弹窗 ===== */}
|
||||
<OrderDetailModal
|
||||
visible={detailVisible.value}
|
||||
record={currentRecord.value}
|
||||
onClose={() => setDetailVisible(false)}
|
||||
onReRefund={(record) => {
|
||||
// 关闭详情弹窗，再弹出二次确认
|
||||
setDetailVisible(false);
|
||||
promptReRefund(record);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,19 +1,177 @@
|
|||
import { computed, reactive, toRef, Ref } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { computed, reactive, toRef, Ref, h } from 'vue';
|
||||
import { message, Tag } from 'ant-design-vue';
|
||||
import { useState, useDebounce, useThrottleFn } from '@/hooks';
|
||||
|
||||
// ============================================================
|
||||
// 常量
|
||||
// ============================================================
|
||||
|
||||
/** 订单状态选项 */
|
||||
export const ORDER_STATUS_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'paid', label: '已支付' },
|
||||
{ value: 'partial_refund', label: '部分退款' },
|
||||
{ value: 'full_refund', label: '全部退款' },
|
||||
{ value: 'closed', label: '已关闭' },
|
||||
] as const;
|
||||
|
||||
/** 退款状态选项 */
|
||||
export const REFUND_STATUS_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'refund_success', label: '退款成功' },
|
||||
{ value: 'refund_failed', label: '退款失败' },
|
||||
] as const;
|
||||
|
||||
/** 订单状态 Tag 映射 */
|
||||
const ORDER_STATUS_MAP: Record<string, { label: string; color: string }> = {
|
||||
paid: { label: '已支付', color: 'green' },
|
||||
partial_refund: { label: '部分退款', color: 'orange' },
|
||||
full_refund: { label: '全部退款', color: 'blue' },
|
||||
closed: { label: '已关闭', color: 'default' },
|
||||
};
|
||||
|
||||
/** 退款状态 Tag 映射 */
|
||||
const REFUND_STATUS_MAP: Record<string, { label: string; color: string }> = {
|
||||
refund_success: { label: '退款成功', color: 'green' },
|
||||
refund_failed: { label: '退款失败', color: 'red' },
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// 假数据
|
||||
// ============================================================
|
||||
|
||||
const MOCK_DATA = Array.from({ length: 12 }, (_, i) => {
|
||||
const orderStatus = (['paid', 'paid', 'partial_refund', 'full_refund', 'closed'] as const)[i % 5];
|
||||
const refundStatus: string =
|
||||
orderStatus === 'partial_refund' || orderStatus === 'full_refund'
|
||||
? (['refund_success', 'refund_success', 'refund_failed'] as const)[i % 3]
|
||||
: '';
|
||||
|
||||
const totalAmount = [188.0, 256.5, 399.0, 128.0, 520.0][i % 5];
|
||||
const discountAmount = i % 3 === 0 ? 20.0 : i % 3 === 1 ? 10.0 : 0;
|
||||
const refundAmount =
|
||||
orderStatus === 'partial_refund'
|
||||
? 50.0
|
||||
: orderStatus === 'full_refund'
|
||||
? totalAmount - discountAmount
|
||||
: 0;
|
||||
|
||||
// ===== 选手信息（详情弹窗用） =====
|
||||
const playerNames = ['张三', '李四', '王五'];
|
||||
const players = playerNames.slice(0, (i % 3) + 1).map((name, idx) => ({
|
||||
key: `${i + 1}-${idx}`,
|
||||
name,
|
||||
gender: idx === 1 ? '女' : '男',
|
||||
phone: '12345678956',
|
||||
idNo: 'xxxxxxxxxxxxxxxx',
|
||||
idImg: [
|
||||
'https://picsum.photos/seed/idimg-a/120/80',
|
||||
'https://picsum.photos/seed/idimg-b/120/80',
|
||||
],
|
||||
groupName: ['男子单打', '女子双打', '混合双打'][idx],
|
||||
orderAmount: [100.0, 50.0, 38.0][idx],
|
||||
discountAmount: 0,
|
||||
paidAmount: [100.0, 50.0, 38.0][idx],
|
||||
refundAmount: idx === 1 && orderStatus === 'full_refund' ? 50.0 : 0,
|
||||
}));
|
||||
|
||||
// ===== 退款记录（详情弹窗用） =====
|
||||
const refundRecords: any[] = [];
|
||||
if (orderStatus === 'partial_refund' || orderStatus === 'full_refund') {
|
||||
if (i % 4 === 2) {
|
||||
refundRecords.push(
|
||||
{
|
||||
key: `${i + 1}-r1`,
|
||||
amount: 50.0,
|
||||
isPartial: true,
|
||||
applyTime: '2026-06-07 16:20',
|
||||
completeTime: '2026-06-07 16:25',
|
||||
method: '原路退回（微信支付）',
|
||||
thirdPartyNo: '5030000789202606071625102846',
|
||||
status: 'success',
|
||||
},
|
||||
{
|
||||
key: `${i + 1}-r2`,
|
||||
amount: 49.0,
|
||||
isPartial: false,
|
||||
applyTime: '2026-06-08 10:00',
|
||||
completeTime: '',
|
||||
method: '原路退回（微信支付）',
|
||||
thirdPartyNo: '',
|
||||
status: 'failed',
|
||||
},
|
||||
);
|
||||
} else if (i % 4 === 0) {
|
||||
refundRecords.push({
|
||||
key: `${i + 1}-r1`,
|
||||
amount: 30.0,
|
||||
isPartial: true,
|
||||
applyTime: '2026-06-05 09:30',
|
||||
completeTime: '2026-06-05 09:35',
|
||||
method: '原路退回（微信支付）',
|
||||
thirdPartyNo: '5030000789202606050935000123',
|
||||
status: 'success',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
key: `${i + 1}`,
|
||||
orderId: `ORD202607${String(i + 1).padStart(5, '0')}`,
|
||||
eventName:
|
||||
i % 3 === 0
|
||||
? '2026全国青少年羽毛球锦标赛暨体育文化交流大会'
|
||||
: i % 3 === 1
|
||||
? '国际马拉松城市联赛'
|
||||
: '全民健身运动会',
|
||||
playerName: ['张选手', '李选手', '王选手', '赵选手'][i % 4],
|
||||
phone: ['13800138001', '13900139002', '13700137003', '13600136004'][i % 4],
|
||||
groupName: ['男子青年组', '女子青年组', '男子中年组', '女子中年组'][i % 4],
|
||||
registrant: ['张报名', '李报名', '王报名', '赵报名'][i % 4],
|
||||
registrantPhone: ['13800138001', '13900139002', '13700137003', '13600136004'][i % 4],
|
||||
registrantCount: [1, 2, 1, 3][i % 4],
|
||||
orderTime: '2026-07-15 10:30:00',
|
||||
payTime: '2026-07-15 10:32:15',
|
||||
totalAmount,
|
||||
discountAmount,
|
||||
paidAmount: totalAmount - discountAmount,
|
||||
refundAmount,
|
||||
orderStatus,
|
||||
refundStatus,
|
||||
players,
|
||||
refundRecords,
|
||||
};
|
||||
});
|
||||
|
||||
// ============================================================
|
||||
// 金额汇总假数据
|
||||
// ============================================================
|
||||
|
||||
const MOCK_SUMMARY = {
|
||||
totalOrderAmount: 113255.0,
|
||||
totalPaidAmount: 113255.0,
|
||||
totalRefundAmount: 1255.0,
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// Model
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* 订单管理页数据模型
|
||||
* 订单列表页数据模型
|
||||
*/
|
||||
export function useOrderModel() {
|
||||
// ===== 筛选条件（合并在一个 reactive 对象中）=====
|
||||
// ===== 筛选条件 =====
|
||||
const filterForm = reactive({
|
||||
orderTimeRange: null as [string, string] | null,
|
||||
searchOrderId: '',
|
||||
searchEventName: '',
|
||||
searchUserName: '',
|
||||
searchPlayerName: '',
|
||||
orderStatus: '',
|
||||
refundStatus: '',
|
||||
});
|
||||
|
||||
// 各字段防抖 300ms
|
||||
// 可搜索字段防抖
|
||||
const { debouncedValue: debouncedOrderId } = useDebounce(
|
||||
toRef(filterForm, 'searchOrderId') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
|
|
@ -22,51 +180,128 @@ export function useOrderModel() {
|
|||
toRef(filterForm, 'searchEventName') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
);
|
||||
const { debouncedValue: debouncedUserName } = useDebounce(
|
||||
toRef(filterForm, 'searchUserName') as Ref<string>,
|
||||
const { debouncedValue: debouncedPlayerName } = useDebounce(
|
||||
toRef(filterForm, 'searchPlayerName') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
);
|
||||
|
||||
// ===== 表格状态 =====
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [dataSource, setDataSource] = useState<any[]>([]);
|
||||
const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
total: MOCK_DATA.length,
|
||||
});
|
||||
|
||||
// ===== 金额汇总 =====
|
||||
const [summary, setSummary] = useState(MOCK_SUMMARY);
|
||||
|
||||
// ===== 表格列配置 =====
|
||||
const columns = [
|
||||
{ title: '订单编号', dataIndex: 'orderId', key: 'orderId' },
|
||||
{ title: '赛事名称', dataIndex: 'eventName', key: 'eventName' },
|
||||
{ title: '用户名', dataIndex: 'userName', key: 'userName' },
|
||||
{ title: '订单金额', dataIndex: 'amount', key: 'amount' },
|
||||
{ title: '支付状态', dataIndex: 'payStatus', key: 'payStatus' },
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
|
||||
{ title: '订单编号', dataIndex: 'orderId', key: 'orderId', width: 200 },
|
||||
{ title: '赛事名称', dataIndex: 'eventName', key: 'eventName', width: 180 },
|
||||
{ title: '选手名称', dataIndex: 'playerName', key: 'playerName', width: 100 },
|
||||
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 130 },
|
||||
{ title: '比赛组别', dataIndex: 'groupName', key: 'groupName', width: 120 },
|
||||
{ title: '报名人', dataIndex: 'registrant', key: 'registrant', width: 100 },
|
||||
{ title: '报名人手机号', dataIndex: 'registrantPhone', key: 'registrantPhone', width: 130 },
|
||||
{
|
||||
title: '报名人数',
|
||||
dataIndex: 'registrantCount',
|
||||
key: 'registrantCount',
|
||||
width: 90,
|
||||
align: 'center' as const,
|
||||
},
|
||||
{ title: '订单时间', dataIndex: 'orderTime', key: 'orderTime', width: 170 },
|
||||
{ title: '支付时间', dataIndex: 'payTime', key: 'payTime', width: 170 },
|
||||
{
|
||||
title: '订单总金额',
|
||||
dataIndex: 'totalAmount',
|
||||
key: 'totalAmount',
|
||||
width: 120,
|
||||
align: 'right' as const,
|
||||
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}元`,
|
||||
},
|
||||
{
|
||||
title: '总优惠金额',
|
||||
dataIndex: 'discountAmount',
|
||||
key: 'discountAmount',
|
||||
width: 120,
|
||||
align: 'right' as const,
|
||||
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}元`,
|
||||
},
|
||||
{
|
||||
title: '实付总金额',
|
||||
dataIndex: 'paidAmount',
|
||||
key: 'paidAmount',
|
||||
width: 120,
|
||||
align: 'right' as const,
|
||||
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}元`,
|
||||
},
|
||||
{
|
||||
title: '退款总金额',
|
||||
dataIndex: 'refundAmount',
|
||||
key: 'refundAmount',
|
||||
width: 120,
|
||||
align: 'right' as const,
|
||||
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}元`,
|
||||
},
|
||||
{
|
||||
title: '订单状态',
|
||||
dataIndex: 'orderStatus',
|
||||
key: 'orderStatus',
|
||||
width: 100,
|
||||
align: 'center' as const,
|
||||
customRender: ({ text }: { text: string }) => {
|
||||
const info = ORDER_STATUS_MAP[text] || { label: text || '-', color: 'default' };
|
||||
return h(Tag, { color: info.color }, () => info.label);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '退款状态',
|
||||
dataIndex: 'refundStatus',
|
||||
key: 'refundStatus',
|
||||
width: 100,
|
||||
align: 'center' as const,
|
||||
customRender: ({ text }: { text: string }) => {
|
||||
if (!text) return h('span', '-');
|
||||
const info = REFUND_STATUS_MAP[text] || { label: text, color: 'default' };
|
||||
return h(Tag, { color: info.color }, () => info.label);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
// ===== 计算属性 =====
|
||||
const hasFilter = computed(() => {
|
||||
return (
|
||||
filterForm.orderTimeRange !== null ||
|
||||
debouncedOrderId.value.trim() !== '' ||
|
||||
debouncedEventName.value.trim() !== '' ||
|
||||
debouncedUserName.value.trim() !== ''
|
||||
debouncedPlayerName.value.trim() !== '' ||
|
||||
filterForm.orderStatus !== '' ||
|
||||
filterForm.refundStatus !== ''
|
||||
);
|
||||
});
|
||||
|
||||
// ===== 方法 =====
|
||||
|
||||
/** 查询（节流 500ms） */
|
||||
/** 查询 */
|
||||
const handleSearch = useThrottleFn(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// TODO: 替换为真实 API 调用
|
||||
console.log('搜索条件:', {
|
||||
orderTimeRange: filterForm.orderTimeRange,
|
||||
orderId: debouncedOrderId.value,
|
||||
eventName: debouncedEventName.value,
|
||||
userName: debouncedUserName.value,
|
||||
playerName: debouncedPlayerName.value,
|
||||
orderStatus: filterForm.orderStatus,
|
||||
refundStatus: filterForm.refundStatus,
|
||||
});
|
||||
// TODO: 替换为真实 API 调用
|
||||
setDataSource(MOCK_DATA);
|
||||
setPagination({ ...pagination.value, total: MOCK_DATA.length });
|
||||
setSummary(MOCK_SUMMARY);
|
||||
message.success('查询成功');
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '查询失败');
|
||||
|
|
@ -75,13 +310,17 @@ export function useOrderModel() {
|
|||
}
|
||||
}, 500);
|
||||
|
||||
/** 重置（节流 500ms） */
|
||||
/** 重置 */
|
||||
const handleReset = useThrottleFn(() => {
|
||||
filterForm.orderTimeRange = null;
|
||||
filterForm.searchOrderId = '';
|
||||
filterForm.searchEventName = '';
|
||||
filterForm.searchUserName = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: 0 });
|
||||
setDataSource([]);
|
||||
filterForm.searchPlayerName = '';
|
||||
filterForm.orderStatus = '';
|
||||
filterForm.refundStatus = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
|
||||
setDataSource(MOCK_DATA);
|
||||
setSummary(MOCK_SUMMARY);
|
||||
}, 500);
|
||||
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
|
|
@ -94,6 +333,7 @@ export function useOrderModel() {
|
|||
loading,
|
||||
dataSource,
|
||||
columns,
|
||||
summary,
|
||||
pagination,
|
||||
hasFilter,
|
||||
handleSearch,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,18 @@
|
|||
.container {
|
||||
// 容器
|
||||
}
|
||||
/**
|
||||
* 表格 body 容器：占满 flex 剩余空间，并确保 antd 嵌套 div 逐层传递 height: 100%，
|
||||
* 使得 Table scroll.y = 'calc(100% - 55px)' 中的 100% 能正确解析。
|
||||
*/
|
||||
.tableBody {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 24px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
:global {
|
||||
.ant-spin-nested-loading,
|
||||
.ant-spin-container,
|
||||
.ant-table,
|
||||
.ant-table-container {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,59 @@
|
|||
import { defineComponent } from 'vue';
|
||||
import { Button, Input, Table, Form, Space } from 'ant-design-vue';
|
||||
import { useUserModel } from './model/useUserModel';
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Table,
|
||||
Form,
|
||||
Space,
|
||||
Select,
|
||||
Image,
|
||||
Pagination,
|
||||
Modal,
|
||||
} from 'ant-design-vue';
|
||||
import { useUserModel, USER_STATUS_OPTIONS } from './model/useUserModel';
|
||||
import { useContainerSize } from '@/hooks';
|
||||
import styles from './index.module.less';
|
||||
|
||||
/**
|
||||
* bodyCell 渲染函数
|
||||
*/
|
||||
function renderBodyCell({
|
||||
column,
|
||||
text,
|
||||
record,
|
||||
onToggleStatus,
|
||||
}: {
|
||||
column: any;
|
||||
text: any;
|
||||
record: any;
|
||||
onToggleStatus: (record: any) => void;
|
||||
}) {
|
||||
// 证件图片：有则显示，无则不显示
|
||||
if (column.dataIndex === 'idImg') {
|
||||
const images = record.idImg || [];
|
||||
if (images.length === 0) {
|
||||
return '-';
|
||||
}
|
||||
return (
|
||||
<Space>
|
||||
{images.map((src: string) => (
|
||||
<Image key={src} width={48} height={32} src={src} />
|
||||
))}
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
||||
if (column.key === 'action') {
|
||||
const isActive = record.status === 'active';
|
||||
return (
|
||||
<Button type="link" size="small" danger={isActive} onClick={() => onToggleStatus(record)}>
|
||||
{isActive ? '禁用' : '启用'}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户列表
|
||||
|
|
@ -19,10 +72,40 @@ export default defineComponent({
|
|||
handlePageChange,
|
||||
} = useUserModel();
|
||||
|
||||
const { containerRef, height } = useContainerSize({ headerOffset: 55 });
|
||||
|
||||
const handleToggleStatus = (record: any) => {
|
||||
const isActive = record.status === 'active';
|
||||
const actionText = isActive ? '禁用' : '启用';
|
||||
Modal.confirm({
|
||||
title: `${actionText}确认`,
|
||||
content: `确认${actionText}用户"${record.nickName}"吗？`,
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
console.log(`${actionText}用户:`, record.userId);
|
||||
// TODO: 替换为真实 API 调用
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
/** 最终表格列：模型列 + 操作 */
|
||||
const tableColumns = [
|
||||
...columns,
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 100,
|
||||
fixed: 'right' as const,
|
||||
align: 'center' as const,
|
||||
},
|
||||
];
|
||||
|
||||
return () => (
|
||||
<div class="page-container">
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class="page-filter">
|
||||
<Form layout="inline" model={filterForm}>
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="用户昵称" name="searchUserName">
|
||||
<Input
|
||||
placeholder="请输入用户昵称"
|
||||
|
|
@ -39,6 +122,15 @@ export default defineComponent({
|
|||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="状态" name="status">
|
||||
<Select
|
||||
value={filterForm.status}
|
||||
options={USER_STATUS_OPTIONS as any}
|
||||
style={{ width: '110px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.status = val || '')}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" onClick={handleSearch} loading={loading.value}>
|
||||
|
|
@ -50,20 +142,45 @@ export default defineComponent({
|
|||
</Form>
|
||||
</div>
|
||||
|
||||
{/* ===== 表格区 ===== */}
|
||||
<div class="page-table">
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={dataSource.value}
|
||||
loading={loading.value}
|
||||
pagination={{
|
||||
current: pagination.value.current,
|
||||
pageSize: pagination.value.pageSize,
|
||||
total: pagination.value.total,
|
||||
showSizeChanger: true,
|
||||
showTotal: (total: number) => `共 ${total} 条`,
|
||||
onChange: handlePageChange,
|
||||
<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
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
padding: '10px 0 0',
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,15 +1,58 @@
|
|||
import { computed, reactive, toRef, Ref } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { computed, reactive, toRef, Ref, h } from 'vue';
|
||||
import { message, Tag } from 'ant-design-vue';
|
||||
import { useState, useDebounce, useThrottleFn } from '@/hooks';
|
||||
|
||||
// ============================================================
|
||||
// 常量
|
||||
// ============================================================
|
||||
|
||||
/** 用户状态选项 */
|
||||
export const USER_STATUS_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'active', label: '正常' },
|
||||
{ value: 'disabled', label: '禁用' },
|
||||
] as const;
|
||||
|
||||
/** 用户状态 Tag 映射 */
|
||||
const USER_STATUS_MAP: Record<string, { label: string; color: string }> = {
|
||||
active: { label: '正常', color: 'green' },
|
||||
disabled: { label: '禁用', color: 'red' },
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// 假数据
|
||||
// ============================================================
|
||||
|
||||
const MOCK_DATA = Array.from({ length: 12 }, (_, i) => ({
|
||||
key: `${i + 1}`,
|
||||
userId: `U202607${String(i + 1).padStart(5, '0')}`,
|
||||
nickName: ['羽毛球小将', '马拉松达人', '健身爱好者', '游泳健将'][i % 4],
|
||||
phone: ['13800138001', '13900139002', '13700137003', '13600136004'][i % 4],
|
||||
realName: ['张三', '李四', '王五', '赵六'][i % 4],
|
||||
gender: i % 2 === 0 ? '男' : '女',
|
||||
idNo: '320101199001011234',
|
||||
// 证图片来源：奇数索引有，偶数无
|
||||
idImg:
|
||||
i % 2 === 1
|
||||
? ['https://picsum.photos/seed/idcard-a/120/80', 'https://picsum.photos/seed/idcard-b/120/80']
|
||||
: [],
|
||||
status: (i % 4 === 3 ? 'disabled' : 'active') as string,
|
||||
loginTime: '2026-07-20 14:30:00',
|
||||
}));
|
||||
|
||||
// ============================================================
|
||||
// Model
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* 用户列表页数据模型
|
||||
*/
|
||||
export function useUserModel() {
|
||||
// ===== 筛选条件（合并在一个 reactive 对象中）=====
|
||||
// ===== 筛选条件 =====
|
||||
const filterForm = reactive({
|
||||
searchUserName: '',
|
||||
searchPhone: '',
|
||||
status: '',
|
||||
});
|
||||
|
||||
// 各字段防抖 300ms
|
||||
|
|
@ -24,25 +67,47 @@ export function useUserModel() {
|
|||
|
||||
// ===== 表格状态 =====
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [dataSource, setDataSource] = useState<any[]>([]);
|
||||
const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
total: MOCK_DATA.length,
|
||||
});
|
||||
|
||||
// ===== 表格列配置 =====
|
||||
const columns = [
|
||||
{ title: '用户昵称', dataIndex: 'nickName', key: 'nickName' },
|
||||
{ title: '手机号', dataIndex: 'phone', key: 'phone' },
|
||||
{ title: '报名赛事', dataIndex: 'eventName', key: 'eventName' },
|
||||
{ title: '报名时间', dataIndex: 'registerTime', key: 'registerTime' },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status' },
|
||||
{ title: '用户昵称', dataIndex: 'nickName', key: 'nickName', width: 120 },
|
||||
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 140 },
|
||||
{ title: '真实姓名', dataIndex: 'realName', key: 'realName', width: 100 },
|
||||
{ title: '性别', dataIndex: 'gender', key: 'gender', width: 80 },
|
||||
{ title: '证件号', dataIndex: 'idNo', key: 'idNo', width: 180 },
|
||||
{
|
||||
title: '证件图片',
|
||||
dataIndex: 'idImg',
|
||||
key: 'idImg',
|
||||
width: 140,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 90,
|
||||
align: 'center' as const,
|
||||
customRender: ({ text }: { text: string }) => {
|
||||
const info = USER_STATUS_MAP[text] || { label: text, color: 'default' };
|
||||
return h(Tag, { color: info.color }, () => info.label);
|
||||
},
|
||||
},
|
||||
{ title: '登录时间', dataIndex: 'loginTime', key: 'loginTime', width: 170 },
|
||||
];
|
||||
|
||||
// ===== 计算属性 =====
|
||||
const hasFilter = computed(() => {
|
||||
return debouncedUserName.value.trim() !== '' || debouncedPhone.value.trim() !== '';
|
||||
return (
|
||||
debouncedUserName.value.trim() !== '' ||
|
||||
debouncedPhone.value.trim() !== '' ||
|
||||
filterForm.status !== ''
|
||||
);
|
||||
});
|
||||
|
||||
// ===== 方法 =====
|
||||
|
|
@ -51,11 +116,14 @@ export function useUserModel() {
|
|||
const handleSearch = useThrottleFn(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// TODO: 替换为真实 API 调用
|
||||
console.log('搜索条件:', {
|
||||
userName: debouncedUserName.value,
|
||||
phone: debouncedPhone.value,
|
||||
status: filterForm.status,
|
||||
});
|
||||
// TODO: 替换为真实 API 调用
|
||||
setDataSource(MOCK_DATA);
|
||||
setPagination({ ...pagination.value, total: MOCK_DATA.length });
|
||||
message.success('查询成功');
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '查询失败');
|
||||
|
|
@ -68,8 +136,9 @@ export function useUserModel() {
|
|||
const handleReset = useThrottleFn(() => {
|
||||
filterForm.searchUserName = '';
|
||||
filterForm.searchPhone = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: 0 });
|
||||
setDataSource([]);
|
||||
filterForm.status = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
|
||||
setDataSource(MOCK_DATA);
|
||||
}, 500);
|
||||
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
import { defineComponent } from 'vue';
|
||||
|
||||
/**
|
||||
* 支付流水
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'FinancePayments',
|
||||
setup() {
|
||||
return () => (
|
||||
<div class="page-container">
|
||||
<div style={{ padding: '24px', fontSize: '16px', color: '#999' }}>支付流水 - 开发中</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { defineComponent } from 'vue';
|
||||
|
||||
/**
|
||||
* 账务报表
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'FinanceReports',
|
||||
setup() {
|
||||
return () => (
|
||||
<div class="page-container">
|
||||
<div style={{ padding: '24px', fontSize: '16px', color: '#999' }}>账务报表 - 开发中</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
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>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { defineComponent } from 'vue';
|
||||
|
||||
/**
|
||||
* 提现申请
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'FinanceWithdraw',
|
||||
setup() {
|
||||
return () => (
|
||||
<div class="page-container">
|
||||
<div style={{ padding: '24px', fontSize: '16px', color: '#999' }}>提现申请 - 开发中</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { defineComponent } from 'vue';
|
||||
|
||||
/**
|
||||
* 角色权限
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'SystemRoles',
|
||||
setup() {
|
||||
return () => (
|
||||
<div class="page-container">
|
||||
<div style={{ padding: '24px', fontSize: '16px', color: '#999' }}>角色权限 - 开发中</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { defineComponent } from 'vue';
|
||||
|
||||
/**
|
||||
* 用户管理
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'SystemUsers',
|
||||
setup() {
|
||||
return () => (
|
||||
<div class="page-container">
|
||||
<div style={{ padding: '24px', fontSize: '16px', color: '#999' }}>用户管理 - 开发中</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
import type { OssSignData } from '@/api/upload';
|
||||
import { fetchOssSign } from '@/api/upload';
|
||||
|
||||
/**
|
||||
* OSS 上传类型
|
||||
* 1=证件照 2=赛事封面 3=头像 4=富文本 5=Banner
|
||||
*/
|
||||
export const OssUploadType = {
|
||||
IdCard: '1',
|
||||
EventCover: '2',
|
||||
Avatar: '3',
|
||||
RichText: '4',
|
||||
Banner: '5',
|
||||
} as const;
|
||||
|
||||
export type OssUploadTypeValue = (typeof OssUploadType)[keyof typeof OssUploadType];
|
||||
|
||||
/**
|
||||
* 生成唯一文件名：16 位大小写字母+数字随机串.ext
|
||||
*/
|
||||
export function genFileName(filePath: string, fileName?: string): string {
|
||||
let suffix = '';
|
||||
if (fileName) {
|
||||
const dot = fileName.lastIndexOf('.');
|
||||
suffix = dot >= 0 ? fileName.slice(dot).toLowerCase() : '';
|
||||
}
|
||||
if (!suffix && filePath) {
|
||||
const dot = filePath.lastIndexOf('.');
|
||||
suffix = dot >= 0 ? filePath.slice(dot).toLowerCase() : '';
|
||||
}
|
||||
if (!suffix) suffix = '.jpg';
|
||||
|
||||
const random = Array.from({ length: 16 }, () => {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
return chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}).join('');
|
||||
|
||||
return `${random}${suffix}`;
|
||||
}
|
||||
|
||||
/** 根据签名和文件名构建 OSS 上传 FormData 字段 */
|
||||
export function buildOssFormData(sign: OssSignData, fileName: string): Record<string, string> {
|
||||
return {
|
||||
key: `${sign.dir}${fileName}`,
|
||||
policy: sign.policy,
|
||||
'x-oss-signature': sign.signature,
|
||||
'x-oss-signature-version': 'OSS4-HMAC-SHA256',
|
||||
'x-oss-credential': sign.x_oss_credential,
|
||||
'x-oss-date': sign.x_oss_date,
|
||||
'x-oss-security-token': sign.security_token,
|
||||
success_action_status: '200',
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 使用已有签名上传单个文件到 OSS（Web 版，fetch + FormData）
|
||||
*/
|
||||
export async function uploadFileWithSign(file: File, sign: OssSignData): Promise<string> {
|
||||
const fileName = genFileName(file.name, file.name);
|
||||
const key = `${sign.dir}${fileName}`;
|
||||
|
||||
const formData = new FormData();
|
||||
Object.entries(buildOssFormData(sign, fileName)).forEach(([k, v]) => {
|
||||
formData.append(k, v);
|
||||
});
|
||||
formData.append('file', file);
|
||||
|
||||
const res = await fetch(sign.host, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(`OSS 上传失败：${res.status} ${res.statusText}`);
|
||||
}
|
||||
|
||||
return `${sign.host}/${key}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传单个文件到 OSS
|
||||
* @returns 文件访问 URL
|
||||
*/
|
||||
export async function uploadFile(file: File, type: OssUploadTypeValue): Promise<{ url: string }> {
|
||||
const sign = await fetchOssSign(type);
|
||||
const url = await uploadFileWithSign(file, sign);
|
||||
return { url };
|
||||
}
|
||||
|
||||
/**
|
||||
* 逐张上传文件到 OSS（同一批复用同一签名，单张失败不影响后续）
|
||||
*/
|
||||
export async function uploadFilesOneByOne(
|
||||
files: File[],
|
||||
type: OssUploadTypeValue,
|
||||
options?: {
|
||||
onSuccess?: (url: string, index: number) => void | Promise<void>;
|
||||
onError?: (error: unknown, index: number) => void;
|
||||
},
|
||||
): Promise<{ successCount: number; failCount: number }> {
|
||||
if (files.length === 0) {
|
||||
return { successCount: 0, failCount: 0 };
|
||||
}
|
||||
|
||||
const sign = await fetchOssSign(type);
|
||||
let successCount = 0;
|
||||
let failCount = 0;
|
||||
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
try {
|
||||
const url = await uploadFileWithSign(files[i], sign);
|
||||
successCount++;
|
||||
await options?.onSuccess?.(url, i);
|
||||
} catch (err) {
|
||||
failCount++;
|
||||
options?.onError?.(err, i);
|
||||
}
|
||||
}
|
||||
|
||||
return { successCount, failCount };
|
||||
}
|
||||
Loading…
Reference in New Issue