拆分打手个人中心
This commit is contained in:
yml2213
@@ -0,0 +1,225 @@
|
|||||||
|
import {
|
||||||
|
Alert,
|
||||||
|
Button,
|
||||||
|
Descriptions,
|
||||||
|
Form,
|
||||||
|
Image,
|
||||||
|
Input,
|
||||||
|
Modal,
|
||||||
|
Space,
|
||||||
|
Table,
|
||||||
|
Typography,
|
||||||
|
} from 'antd'
|
||||||
|
import type { FormInstance } from 'antd'
|
||||||
|
|
||||||
|
import type { WorkerFinanceConfig, WorkerSessionDevice, WorkerUser } from '@/types/worker-platform'
|
||||||
|
import { formatDateTime } from '@/utils/date-time'
|
||||||
|
import { isWorkerPasswordStrong, WORKER_PASSWORD_RULE_MESSAGE } from '@/utils/worker-password'
|
||||||
|
|
||||||
|
import { formatMoney, formatWorkerStatus } from './worker-profile-view-utils'
|
||||||
|
|
||||||
|
export type PasswordFormValues = {
|
||||||
|
currentPassword?: string
|
||||||
|
newPassword?: string
|
||||||
|
confirmPassword?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WorkerProfileAccountModals({
|
||||||
|
isMobile,
|
||||||
|
worker,
|
||||||
|
financeConfig,
|
||||||
|
devicesOpen,
|
||||||
|
setDevicesOpen,
|
||||||
|
devices,
|
||||||
|
maxDevices,
|
||||||
|
devicesLoading,
|
||||||
|
removeWorkerDevice,
|
||||||
|
passwordOpen,
|
||||||
|
setPasswordOpen,
|
||||||
|
submittingPassword,
|
||||||
|
passwordForm,
|
||||||
|
submitPasswordChange,
|
||||||
|
contactOpen,
|
||||||
|
setContactOpen,
|
||||||
|
}: {
|
||||||
|
isMobile: boolean
|
||||||
|
worker: WorkerUser | undefined
|
||||||
|
financeConfig: WorkerFinanceConfig | undefined
|
||||||
|
devicesOpen: boolean
|
||||||
|
setDevicesOpen: (open: boolean) => void
|
||||||
|
devices: WorkerSessionDevice[]
|
||||||
|
maxDevices: number
|
||||||
|
devicesLoading: boolean
|
||||||
|
removeWorkerDevice: (device: WorkerSessionDevice) => Promise<void>
|
||||||
|
passwordOpen: boolean
|
||||||
|
setPasswordOpen: (open: boolean) => void
|
||||||
|
submittingPassword: boolean
|
||||||
|
passwordForm: FormInstance<PasswordFormValues>
|
||||||
|
submitPasswordChange: (values: PasswordFormValues) => Promise<void>
|
||||||
|
contactOpen: boolean
|
||||||
|
setContactOpen: (open: boolean) => void
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Modal
|
||||||
|
title="登录设备"
|
||||||
|
open={devicesOpen}
|
||||||
|
width={isMobile ? '92%' : 720}
|
||||||
|
destroyOnHidden
|
||||||
|
footer={null}
|
||||||
|
onCancel={() => setDevicesOpen(false)}
|
||||||
|
>
|
||||||
|
<Alert
|
||||||
|
showIcon
|
||||||
|
type="info"
|
||||||
|
message={`所有设备合计最多同时在线 ${maxDevices} 台，删除旧设备后才能在新设备登录。`}
|
||||||
|
/>
|
||||||
|
<Table<WorkerSessionDevice>
|
||||||
|
size="small"
|
||||||
|
loading={devicesLoading}
|
||||||
|
rowKey="sessionId"
|
||||||
|
dataSource={devices}
|
||||||
|
pagination={false}
|
||||||
|
style={{ marginTop: 16 }}
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
title: '设备',
|
||||||
|
render: (_, item) => (
|
||||||
|
<Space direction="vertical" size={0}>
|
||||||
|
<Typography.Text strong>{item.deviceName || item.deviceType}</Typography.Text>
|
||||||
|
<Typography.Text type="secondary">{item.ipAddress || '未知 IP'}</Typography.Text>
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{ title: '最近活动', render: (_, item) => formatDateTime(item.lastSeenAt) },
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
width: 100,
|
||||||
|
render: (_, item) => (
|
||||||
|
<Button
|
||||||
|
danger
|
||||||
|
type="link"
|
||||||
|
disabled={item.current}
|
||||||
|
onClick={() => void removeWorkerDevice(item)}
|
||||||
|
>
|
||||||
|
{item.current ? '当前设备' : '删除'}
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
title="修改密码"
|
||||||
|
open={passwordOpen}
|
||||||
|
width={isMobile ? '92%' : 480}
|
||||||
|
destroyOnHidden
|
||||||
|
confirmLoading={submittingPassword}
|
||||||
|
onCancel={() => {
|
||||||
|
setPasswordOpen(false)
|
||||||
|
passwordForm.resetFields()
|
||||||
|
}}
|
||||||
|
onOk={() => passwordForm.submit()}
|
||||||
|
>
|
||||||
|
<Form form={passwordForm} layout="vertical" onFinish={submitPasswordChange}>
|
||||||
|
<Form.Item
|
||||||
|
label="当前密码"
|
||||||
|
name="currentPassword"
|
||||||
|
rules={[{ required: true, message: '请输入当前密码' }]}
|
||||||
|
>
|
||||||
|
<Input.Password autoComplete="current-password" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
label="新密码"
|
||||||
|
name="newPassword"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: '请输入新密码' },
|
||||||
|
{
|
||||||
|
validator: (_, value) =>
|
||||||
|
!value || isWorkerPasswordStrong(value)
|
||||||
|
? Promise.resolve()
|
||||||
|
: Promise.reject(new Error(WORKER_PASSWORD_RULE_MESSAGE)),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
extra={WORKER_PASSWORD_RULE_MESSAGE}
|
||||||
|
>
|
||||||
|
<Input.Password autoComplete="new-password" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
label="确认新密码"
|
||||||
|
name="confirmPassword"
|
||||||
|
dependencies={['newPassword']}
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: '请再次输入新密码' },
|
||||||
|
({ getFieldValue }) => ({
|
||||||
|
validator(_, value) {
|
||||||
|
return !value || value === getFieldValue('newPassword')
|
||||||
|
? Promise.resolve()
|
||||||
|
: Promise.reject(new Error('两次输入的新密码不一致'))
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input.Password autoComplete="new-password" />
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
title="联系管理员"
|
||||||
|
open={contactOpen}
|
||||||
|
width={isMobile ? '92%' : 500}
|
||||||
|
destroyOnHidden
|
||||||
|
footer={
|
||||||
|
<Button type="primary" onClick={() => setContactOpen(false)}>
|
||||||
|
我知道了
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
onCancel={() => setContactOpen(false)}
|
||||||
|
>
|
||||||
|
<Space direction="vertical" size={16} className="full-width">
|
||||||
|
<Alert
|
||||||
|
showIcon
|
||||||
|
type="info"
|
||||||
|
message="如需取消已接订单，请扫码联系管理员处理。充值、提现与审核问题也由后台管理员人工处理。"
|
||||||
|
/>
|
||||||
|
{financeConfig?.adminContact?.wechatQrCodeImage ? (
|
||||||
|
<div style={{ textAlign: 'center' }}>
|
||||||
|
<Image
|
||||||
|
width={200}
|
||||||
|
src={
|
||||||
|
financeConfig.adminContact.wechatQrCodeImage.mediumUrl ||
|
||||||
|
financeConfig.adminContact.wechatQrCodeImage.url
|
||||||
|
}
|
||||||
|
alt="管理员微信二维码"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Typography.Text type="secondary">
|
||||||
|
管理员暂未配置微信二维码，请按下方账号信息联系。
|
||||||
|
</Typography.Text>
|
||||||
|
)}
|
||||||
|
<Descriptions column={1} bordered size="small">
|
||||||
|
<Descriptions.Item label="账号">
|
||||||
|
<Typography.Text copyable>{worker?.username || '-'}</Typography.Text>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="昵称">{worker?.displayName || '-'}</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="手机号">
|
||||||
|
<Typography.Text copyable>{worker?.phone || '-'}</Typography.Text>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="账号状态">
|
||||||
|
{formatWorkerStatus(worker?.status || '')}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="当前余额">
|
||||||
|
{formatMoney(worker?.wallet.availableAmount)}
|
||||||
|
</Descriptions.Item>
|
||||||
|
</Descriptions>
|
||||||
|
<Typography.Paragraph className="worker-profile-help-text">
|
||||||
|
建议沟通时一起提供：申请类型、金额、订单号或转账备注、收款方式，以及当前账号信息。
|
||||||
|
</Typography.Paragraph>
|
||||||
|
</Space>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,286 @@
|
|||||||
|
import {
|
||||||
|
BankOutlined,
|
||||||
|
CopyOutlined,
|
||||||
|
CustomerServiceOutlined,
|
||||||
|
GlobalOutlined,
|
||||||
|
LockOutlined,
|
||||||
|
LogoutOutlined,
|
||||||
|
WalletOutlined,
|
||||||
|
} from '@ant-design/icons'
|
||||||
|
import { Avatar, Button, Card, Descriptions, Progress, Space, Tag, Typography } from 'antd'
|
||||||
|
|
||||||
|
import type {
|
||||||
|
WorkerLevelProgress,
|
||||||
|
WorkerProfileSummary,
|
||||||
|
WorkerUser,
|
||||||
|
WorkerWithdrawalAccount,
|
||||||
|
} from '@/types/worker-platform'
|
||||||
|
import { formatDateTime } from '@/utils/date-time'
|
||||||
|
|
||||||
|
import {
|
||||||
|
formatMoney,
|
||||||
|
formatWorkerStatus,
|
||||||
|
formatWithdrawChannel,
|
||||||
|
resolveWorkerInitial,
|
||||||
|
resolveWorkerStatusColor,
|
||||||
|
} from './worker-profile-view-utils'
|
||||||
|
|
||||||
|
export function WorkerProfileDesktopIdentity({
|
||||||
|
worker,
|
||||||
|
summary,
|
||||||
|
levelProgress,
|
||||||
|
onCopyInviteCode,
|
||||||
|
}: {
|
||||||
|
worker: WorkerUser
|
||||||
|
summary: WorkerProfileSummary | undefined
|
||||||
|
levelProgress: WorkerLevelProgress | null | undefined
|
||||||
|
onCopyInviteCode: () => void
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<Card size="small">
|
||||||
|
<Space size={16} wrap align="start">
|
||||||
|
<Avatar size={64}>{resolveWorkerInitial(worker)}</Avatar>
|
||||||
|
<Space direction="vertical" size={2}>
|
||||||
|
<Typography.Title level={4} style={{ margin: 0 }}>
|
||||||
|
{worker.displayName || worker.username}
|
||||||
|
</Typography.Title>
|
||||||
|
<Typography.Text type="secondary">账号：{worker.username}</Typography.Text>
|
||||||
|
<Typography.Text type="secondary">手机号：{worker.phone || '-'}</Typography.Text>
|
||||||
|
</Space>
|
||||||
|
<Space size={[8, 8]} wrap>
|
||||||
|
<Tag color={resolveWorkerStatusColor(worker.status)}>
|
||||||
|
{formatWorkerStatus(worker.status)}
|
||||||
|
</Tag>
|
||||||
|
<Tag color={worker.workerType === 'internal' ? 'blue' : 'default'}>
|
||||||
|
{worker.workerType === 'internal' ? '内部打手' : '外部打手'}
|
||||||
|
</Tag>
|
||||||
|
<Tag>{worker.level?.name || '未分级'}</Tag>
|
||||||
|
</Space>
|
||||||
|
</Space>
|
||||||
|
<Space direction="vertical" size={4} style={{ marginTop: 12, width: '100%' }}>
|
||||||
|
<Space wrap size={[8, 8]}>
|
||||||
|
<Typography.Text type="secondary">我的邀请码：</Typography.Text>
|
||||||
|
<Typography.Text strong>{worker.inviteCode || '-'}</Typography.Text>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
type="link"
|
||||||
|
icon={<CopyOutlined />}
|
||||||
|
disabled={!worker.inviteCode}
|
||||||
|
onClick={onCopyInviteCode}
|
||||||
|
>
|
||||||
|
复制
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
{levelProgress && levelProgress.nextThreshold !== null ? (
|
||||||
|
<Space direction="vertical" size={0} style={{ width: '100%' }}>
|
||||||
|
<Typography.Text type="secondary">
|
||||||
|
已累计完成 {summary?.acceptedOrderCount || 0} 单，距下一等级还需{' '}
|
||||||
|
{Math.max(0, levelProgress.nextThreshold - (summary?.acceptedOrderCount || 0))} 单
|
||||||
|
</Typography.Text>
|
||||||
|
<Progress
|
||||||
|
percent={levelProgress.progressPercent}
|
||||||
|
size="small"
|
||||||
|
format={(percent) => `${percent}%`}
|
||||||
|
/>
|
||||||
|
</Space>
|
||||||
|
) : (
|
||||||
|
<Typography.Text type="secondary">
|
||||||
|
已累计完成 {summary?.acceptedOrderCount || 0} 单，当前已是最高等级
|
||||||
|
</Typography.Text>
|
||||||
|
)}
|
||||||
|
</Space>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WorkerProfileDesktopWallet({ worker }: { worker: WorkerUser }) {
|
||||||
|
const items = [
|
||||||
|
['可用余额', worker.wallet.availableAmount, '可用于抢单冻结或提现申请'],
|
||||||
|
['冻结押金', worker.wallet.frozenDepositAmount, '抢单后冻结，验收后进入待解冻'],
|
||||||
|
['待解冻押金', worker.wallet.pendingUnfreezeAmount, '验收后按配置天数解冻到账'],
|
||||||
|
['累计结算', worker.wallet.totalSettledAmount, '已结算入账的报酬合计'],
|
||||||
|
] as const
|
||||||
|
return (
|
||||||
|
<Card size="small" className="worker-profile-wallet-card">
|
||||||
|
<div className="worker-profile-wallet-strip">
|
||||||
|
{items.map(([label, amount, note]) => (
|
||||||
|
<div key={label} className="worker-profile-wallet-item">
|
||||||
|
<span className="worker-profile-wallet-label">{label}</span>
|
||||||
|
<strong className="worker-profile-wallet-value">{formatMoney(amount)}</strong>
|
||||||
|
<small className="worker-profile-wallet-note">{note}</small>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WorkerProfileDesktopActions({
|
||||||
|
canUseFinanceActions,
|
||||||
|
canAddWithdrawalAccount,
|
||||||
|
needsAlipayQrCode,
|
||||||
|
onRecharge,
|
||||||
|
onWithdraw,
|
||||||
|
onAddWithdrawalAccount,
|
||||||
|
onAddAlipayQrCode,
|
||||||
|
onChangePassword,
|
||||||
|
onManageDevices,
|
||||||
|
onContact,
|
||||||
|
onLogout,
|
||||||
|
}: {
|
||||||
|
canUseFinanceActions: boolean
|
||||||
|
canAddWithdrawalAccount: boolean
|
||||||
|
needsAlipayQrCode: boolean
|
||||||
|
onRecharge: () => void
|
||||||
|
onWithdraw: () => void
|
||||||
|
onAddWithdrawalAccount: () => void
|
||||||
|
onAddAlipayQrCode: () => void
|
||||||
|
onChangePassword: () => void
|
||||||
|
onManageDevices: () => void
|
||||||
|
onContact: () => void
|
||||||
|
onLogout: () => void
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<Card title="快捷操作" size="small">
|
||||||
|
<Space wrap size={[12, 12]}>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
icon={<WalletOutlined />}
|
||||||
|
disabled={!canUseFinanceActions}
|
||||||
|
onClick={onRecharge}
|
||||||
|
>
|
||||||
|
充值申请
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
icon={<BankOutlined />}
|
||||||
|
disabled={!canUseFinanceActions}
|
||||||
|
onClick={onWithdraw}
|
||||||
|
>
|
||||||
|
提现申请
|
||||||
|
</Button>
|
||||||
|
{canAddWithdrawalAccount ? (
|
||||||
|
<Button
|
||||||
|
icon={<BankOutlined />}
|
||||||
|
disabled={!canUseFinanceActions}
|
||||||
|
onClick={onAddWithdrawalAccount}
|
||||||
|
>
|
||||||
|
添加提现信息
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
|
{needsAlipayQrCode ? (
|
||||||
|
<Button
|
||||||
|
icon={<BankOutlined />}
|
||||||
|
disabled={!canUseFinanceActions}
|
||||||
|
onClick={onAddAlipayQrCode}
|
||||||
|
>
|
||||||
|
补充支付宝收款码
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
|
<Button icon={<LockOutlined />} onClick={onChangePassword}>
|
||||||
|
修改密码
|
||||||
|
</Button>
|
||||||
|
<Button icon={<GlobalOutlined />} onClick={onManageDevices}>
|
||||||
|
登录设备
|
||||||
|
</Button>
|
||||||
|
<Button icon={<CustomerServiceOutlined />} onClick={onContact}>
|
||||||
|
联系管理员
|
||||||
|
</Button>
|
||||||
|
<Button danger icon={<LogoutOutlined />} onClick={onLogout}>
|
||||||
|
退出登录
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WorkerProfileDesktopAccountDetails({
|
||||||
|
worker,
|
||||||
|
summary,
|
||||||
|
withdrawalAccounts,
|
||||||
|
canUseFinanceActions,
|
||||||
|
onCopyInviteCode,
|
||||||
|
onAddWithdrawalAccount,
|
||||||
|
}: {
|
||||||
|
worker: WorkerUser
|
||||||
|
summary: WorkerProfileSummary | undefined
|
||||||
|
withdrawalAccounts: WorkerWithdrawalAccount[]
|
||||||
|
canUseFinanceActions: boolean
|
||||||
|
onCopyInviteCode: () => void
|
||||||
|
onAddWithdrawalAccount: () => void
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<Card size="small">
|
||||||
|
<Descriptions column={{ xs: 1, md: 2 }} bordered size="small">
|
||||||
|
<Descriptions.Item label="账号">{worker.username}</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="昵称">{worker.displayName || '-'}</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="手机号">{worker.phone || '-'}</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="账号状态">
|
||||||
|
<Tag color={resolveWorkerStatusColor(worker.status)}>
|
||||||
|
{formatWorkerStatus(worker.status)}
|
||||||
|
</Tag>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="当前等级">{worker.level?.name || '-'}</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="我的邀请码">
|
||||||
|
<Space size={4}>
|
||||||
|
{worker.inviteCode || '-'}
|
||||||
|
{worker.inviteCode ? (
|
||||||
|
<Button size="small" type="link" icon={<CopyOutlined />} onClick={onCopyInviteCode} />
|
||||||
|
) : null}
|
||||||
|
</Space>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="邀请人">
|
||||||
|
{worker.inviter ? worker.inviter.displayName || worker.inviter.username : '-'}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="已累计完成">
|
||||||
|
{summary?.acceptedOrderCount || 0} 单
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="超时订单">{summary?.timeoutOrderCount || 0} 单</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="累计充值">
|
||||||
|
{formatMoney(worker.wallet.totalCreditedAmount)}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="提现中金额">
|
||||||
|
{formatMoney(summary?.pendingWithdrawAmount)}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="提现信息" span={2}>
|
||||||
|
{withdrawalAccounts.length > 0 ? (
|
||||||
|
<Space direction="vertical" size={2}>
|
||||||
|
{withdrawalAccounts.map((account) => (
|
||||||
|
<Space key={account.accountChannel} wrap size={4}>
|
||||||
|
<Typography.Text>{formatWithdrawChannel(account.accountChannel)}</Typography.Text>
|
||||||
|
<Typography.Text>{account.accountName}</Typography.Text>
|
||||||
|
<Typography.Text type="secondary">
|
||||||
|
{account.accountChannel === 'wechat'
|
||||||
|
? '已上传收款二维码'
|
||||||
|
: `${account.accountNoMasked} / ${account.alipayQrCodeImage ? '已上传收款二维码' : '未上传收款二维码'}`}
|
||||||
|
</Typography.Text>
|
||||||
|
<Typography.Text type="secondary">收款人姓名和账号已锁定</Typography.Text>
|
||||||
|
</Space>
|
||||||
|
))}
|
||||||
|
</Space>
|
||||||
|
) : (
|
||||||
|
<Button
|
||||||
|
type="link"
|
||||||
|
size="small"
|
||||||
|
disabled={!canUseFinanceActions}
|
||||||
|
onClick={onAddWithdrawalAccount}
|
||||||
|
>
|
||||||
|
添加提现信息
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="免押额度">
|
||||||
|
{formatMoney(worker.level?.permissions.depositFreeAmount || 0)}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="最大同时接单">
|
||||||
|
{worker.level?.permissions.maxActiveOrders || 0} 单
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="审核备注">{worker.reviewNote || '-'}</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="注册时间">{formatDateTime(worker.createdAt)}</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="最近更新时间">
|
||||||
|
{formatDateTime(worker.updatedAt)}
|
||||||
|
</Descriptions.Item>
|
||||||
|
</Descriptions>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,393 @@
|
|||||||
|
import {
|
||||||
|
Alert,
|
||||||
|
DatePicker,
|
||||||
|
Descriptions,
|
||||||
|
Form,
|
||||||
|
Image,
|
||||||
|
Input,
|
||||||
|
InputNumber,
|
||||||
|
Modal,
|
||||||
|
Select,
|
||||||
|
Space,
|
||||||
|
Typography,
|
||||||
|
} from 'antd'
|
||||||
|
import type { FormInstance } from 'antd'
|
||||||
|
|
||||||
|
import ImageUpload from '@/components/files/ImageUpload'
|
||||||
|
import type {
|
||||||
|
UploadedFile,
|
||||||
|
WorkerFinanceConfig,
|
||||||
|
WorkerProfileSummary,
|
||||||
|
WorkerUser,
|
||||||
|
WorkerWithdrawalAccount,
|
||||||
|
} from '@/types/worker-platform'
|
||||||
|
|
||||||
|
import {
|
||||||
|
formatMoney,
|
||||||
|
formatWithdrawChannel,
|
||||||
|
hasRechargeConfig,
|
||||||
|
resolveAvailableForWithdraw,
|
||||||
|
} from './worker-profile-view-utils'
|
||||||
|
|
||||||
|
type RechargeFormValues = {
|
||||||
|
amount?: number
|
||||||
|
note?: string
|
||||||
|
paidAt?: string
|
||||||
|
proofFiles?: UploadedFile[]
|
||||||
|
}
|
||||||
|
|
||||||
|
type WithdrawFormValues = {
|
||||||
|
amount?: number
|
||||||
|
accountChannel?: string
|
||||||
|
note?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
type WithdrawalAccountFormValues = {
|
||||||
|
accountChannel?: string
|
||||||
|
accountName?: string
|
||||||
|
accountNo?: string
|
||||||
|
alipayQrCodeImages?: UploadedFile[]
|
||||||
|
wechatQrCodeImages?: UploadedFile[]
|
||||||
|
}
|
||||||
|
|
||||||
|
type AlipayQrCodeFormValues = {
|
||||||
|
alipayQrCodeImages?: UploadedFile[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WorkerProfileFinanceModals({
|
||||||
|
isMobile,
|
||||||
|
worker,
|
||||||
|
summary,
|
||||||
|
financeConfig,
|
||||||
|
withdrawalAccounts,
|
||||||
|
selectedWithdrawalAccount,
|
||||||
|
selectedWithdrawChannel,
|
||||||
|
selectedWithdrawalAccountChannel,
|
||||||
|
rechargeOpen,
|
||||||
|
setRechargeOpen,
|
||||||
|
submittingRecharge,
|
||||||
|
rechargeForm,
|
||||||
|
submitRecharge,
|
||||||
|
withdrawalAccountOpen,
|
||||||
|
setWithdrawalAccountOpen,
|
||||||
|
submittingWithdrawalAccount,
|
||||||
|
withdrawalAccountForm,
|
||||||
|
submitWithdrawalAccount,
|
||||||
|
alipayQrCodeOpen,
|
||||||
|
setAlipayQrCodeOpen,
|
||||||
|
alipayQrCodeForm,
|
||||||
|
submitAlipayQrCode,
|
||||||
|
withdrawOpen,
|
||||||
|
setWithdrawOpen,
|
||||||
|
submittingWithdraw,
|
||||||
|
withdrawForm,
|
||||||
|
submitWithdraw,
|
||||||
|
}: {
|
||||||
|
isMobile: boolean
|
||||||
|
worker: WorkerUser | undefined
|
||||||
|
summary: WorkerProfileSummary | undefined
|
||||||
|
financeConfig: WorkerFinanceConfig | undefined
|
||||||
|
withdrawalAccounts: WorkerWithdrawalAccount[]
|
||||||
|
selectedWithdrawalAccount: WorkerWithdrawalAccount | undefined
|
||||||
|
selectedWithdrawChannel: string | undefined
|
||||||
|
selectedWithdrawalAccountChannel: string | undefined
|
||||||
|
rechargeOpen: boolean
|
||||||
|
setRechargeOpen: (open: boolean) => void
|
||||||
|
submittingRecharge: boolean
|
||||||
|
rechargeForm: FormInstance<RechargeFormValues>
|
||||||
|
submitRecharge: (values: RechargeFormValues) => Promise<void>
|
||||||
|
withdrawalAccountOpen: boolean
|
||||||
|
setWithdrawalAccountOpen: (open: boolean) => void
|
||||||
|
submittingWithdrawalAccount: boolean
|
||||||
|
withdrawalAccountForm: FormInstance<WithdrawalAccountFormValues>
|
||||||
|
submitWithdrawalAccount: (values: WithdrawalAccountFormValues) => Promise<void>
|
||||||
|
alipayQrCodeOpen: boolean
|
||||||
|
setAlipayQrCodeOpen: (open: boolean) => void
|
||||||
|
alipayQrCodeForm: FormInstance<AlipayQrCodeFormValues>
|
||||||
|
submitAlipayQrCode: (values: AlipayQrCodeFormValues) => Promise<void>
|
||||||
|
withdrawOpen: boolean
|
||||||
|
setWithdrawOpen: (open: boolean) => void
|
||||||
|
submittingWithdraw: boolean
|
||||||
|
withdrawForm: FormInstance<WithdrawFormValues>
|
||||||
|
submitWithdraw: (values: WithdrawFormValues) => Promise<void>
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Modal
|
||||||
|
title="充值申请"
|
||||||
|
open={rechargeOpen}
|
||||||
|
width={isMobile ? '92%' : 540}
|
||||||
|
destroyOnHidden
|
||||||
|
confirmLoading={submittingRecharge}
|
||||||
|
onCancel={() => {
|
||||||
|
setRechargeOpen(false)
|
||||||
|
rechargeForm.resetFields()
|
||||||
|
}}
|
||||||
|
onOk={() => rechargeForm.submit()}
|
||||||
|
>
|
||||||
|
<Form
|
||||||
|
form={rechargeForm}
|
||||||
|
layout="vertical"
|
||||||
|
initialValues={{ amount: undefined, note: '' }}
|
||||||
|
onFinish={submitRecharge}
|
||||||
|
>
|
||||||
|
<Alert
|
||||||
|
showIcon
|
||||||
|
type={hasRechargeConfig(financeConfig) ? 'info' : 'warning'}
|
||||||
|
message={
|
||||||
|
hasRechargeConfig(financeConfig)
|
||||||
|
? '请先按下方收款信息完成转账，再提交充值申请，管理员核对后会手动入账。'
|
||||||
|
: '管理员暂未配置完整收款信息，如无法转账请先联系管理员确认。'
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Space
|
||||||
|
direction="vertical"
|
||||||
|
size={12}
|
||||||
|
className="full-width"
|
||||||
|
style={{ marginTop: 16, marginBottom: 16 }}
|
||||||
|
>
|
||||||
|
{financeConfig?.recharge.qrCodeImage ? (
|
||||||
|
<Image
|
||||||
|
width={180}
|
||||||
|
src={
|
||||||
|
financeConfig.recharge.qrCodeImage.mediumUrl ||
|
||||||
|
financeConfig.recharge.qrCodeImage.url
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
<Descriptions column={1} bordered size="small">
|
||||||
|
<Descriptions.Item label="收款通道">
|
||||||
|
{financeConfig?.recharge.channelName || '-'}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="收款人">
|
||||||
|
{financeConfig?.recharge.accountName || '-'}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="收款账号">
|
||||||
|
{financeConfig?.recharge.accountNo ? (
|
||||||
|
<Typography.Text copyable>{financeConfig.recharge.accountNo}</Typography.Text>
|
||||||
|
) : (
|
||||||
|
'-'
|
||||||
|
)}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="充值说明">
|
||||||
|
{financeConfig?.recharge.instructions || '请转账后填写备注说明，方便管理员核对。'}
|
||||||
|
</Descriptions.Item>
|
||||||
|
</Descriptions>
|
||||||
|
</Space>
|
||||||
|
<Form.Item
|
||||||
|
label="充值金额"
|
||||||
|
name="amount"
|
||||||
|
rules={[{ required: true, message: '请输入充值金额' }]}
|
||||||
|
>
|
||||||
|
<InputNumber min={0.01} step={1} addonAfter="元" className="full-width" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
label="付款时间"
|
||||||
|
name="paidAt"
|
||||||
|
rules={[{ required: true, message: '请选择付款时间' }]}
|
||||||
|
>
|
||||||
|
<DatePicker
|
||||||
|
showTime
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
placeholder="选择转账完成时间"
|
||||||
|
format="YYYY-MM-DD HH:mm"
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
label="付款凭证"
|
||||||
|
name="proofFiles"
|
||||||
|
extra="上传转账成功截图，便于管理员快速核对入账"
|
||||||
|
>
|
||||||
|
<ImageUpload scene="worker-finance-proof" scope="worker" maxCount={5} />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="备注说明" name="note">
|
||||||
|
<Input.TextArea
|
||||||
|
rows={4}
|
||||||
|
placeholder="填写转账备注、支付时间、截图说明等，方便管理员尽快核对。"
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
title="添加提现信息"
|
||||||
|
open={withdrawalAccountOpen}
|
||||||
|
width={isMobile ? '92%' : 500}
|
||||||
|
destroyOnHidden
|
||||||
|
confirmLoading={submittingWithdrawalAccount}
|
||||||
|
onCancel={() => {
|
||||||
|
setWithdrawalAccountOpen(false)
|
||||||
|
withdrawalAccountForm.resetFields()
|
||||||
|
}}
|
||||||
|
onOk={() => withdrawalAccountForm.submit()}
|
||||||
|
>
|
||||||
|
<Alert
|
||||||
|
showIcon
|
||||||
|
type="warning"
|
||||||
|
message="支付宝和微信可分别添加一次；收款人姓名和账号添加后不可自行修改。历史支付宝账户缺少二维码时，仅可补充一次。"
|
||||||
|
style={{ marginBottom: 16 }}
|
||||||
|
/>
|
||||||
|
<Form form={withdrawalAccountForm} layout="vertical" onFinish={submitWithdrawalAccount}>
|
||||||
|
<Form.Item
|
||||||
|
label="提现方式"
|
||||||
|
name="accountChannel"
|
||||||
|
rules={[{ required: true, message: '请选择提现方式' }]}
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
options={[
|
||||||
|
...(!withdrawalAccounts.some((account) => account.accountChannel === 'alipay')
|
||||||
|
? [{ value: 'alipay', label: '支付宝' }]
|
||||||
|
: []),
|
||||||
|
...(!withdrawalAccounts.some((account) => account.accountChannel === 'wechat')
|
||||||
|
? [{ value: 'wechat', label: '微信收款（仅支持 100 元及以下提现）' }]
|
||||||
|
: []),
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
label="收款人姓名"
|
||||||
|
name="accountName"
|
||||||
|
rules={[{ required: true, message: '请输入收款人姓名' }]}
|
||||||
|
>
|
||||||
|
<Input placeholder="请输入真实姓名" />
|
||||||
|
</Form.Item>
|
||||||
|
{selectedWithdrawalAccountChannel === 'wechat' ? (
|
||||||
|
<Form.Item
|
||||||
|
label="微信收款二维码"
|
||||||
|
name="wechatQrCodeImages"
|
||||||
|
rules={[{ required: true, message: '请上传微信收款二维码' }]}
|
||||||
|
extra="微信提现仅使用收款二维码，不需要填写微信账号。"
|
||||||
|
>
|
||||||
|
<ImageUpload scene="worker-withdrawal-wechat-qr" scope="worker" maxCount={1} />
|
||||||
|
</Form.Item>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Form.Item
|
||||||
|
label="支付宝账号"
|
||||||
|
name="accountNo"
|
||||||
|
rules={[{ required: true, message: '请输入支付宝账号' }]}
|
||||||
|
>
|
||||||
|
<Input placeholder="请输入支付宝账号" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
label="支付宝收款二维码"
|
||||||
|
name="alipayQrCodeImages"
|
||||||
|
rules={[{ required: true, message: '请上传支付宝收款二维码' }]}
|
||||||
|
>
|
||||||
|
<ImageUpload scene="worker-withdrawal-alipay-qr" scope="worker" maxCount={1} />
|
||||||
|
</Form.Item>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
title="补充支付宝收款二维码"
|
||||||
|
open={alipayQrCodeOpen}
|
||||||
|
width={isMobile ? '92%' : 500}
|
||||||
|
destroyOnHidden
|
||||||
|
onCancel={() => {
|
||||||
|
setAlipayQrCodeOpen(false)
|
||||||
|
alipayQrCodeForm.resetFields()
|
||||||
|
}}
|
||||||
|
onOk={() => alipayQrCodeForm.submit()}
|
||||||
|
>
|
||||||
|
<Alert
|
||||||
|
showIcon
|
||||||
|
type="info"
|
||||||
|
message="历史账户仅可补充一次支付宝收款二维码，保存后不可自行修改；已登记的收款人姓名和账号保持锁定。"
|
||||||
|
style={{ marginBottom: 16 }}
|
||||||
|
/>
|
||||||
|
<Form form={alipayQrCodeForm} layout="vertical" onFinish={submitAlipayQrCode}>
|
||||||
|
<Form.Item
|
||||||
|
label="支付宝收款二维码"
|
||||||
|
name="alipayQrCodeImages"
|
||||||
|
rules={[{ required: true, message: '请上传支付宝收款二维码' }]}
|
||||||
|
>
|
||||||
|
<ImageUpload scene="worker-withdrawal-alipay-qr" scope="worker" maxCount={1} />
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
title="提现申请"
|
||||||
|
open={withdrawOpen}
|
||||||
|
width={isMobile ? '92%' : 540}
|
||||||
|
destroyOnHidden
|
||||||
|
confirmLoading={submittingWithdraw}
|
||||||
|
onCancel={() => {
|
||||||
|
setWithdrawOpen(false)
|
||||||
|
withdrawForm.resetFields()
|
||||||
|
}}
|
||||||
|
onOk={() => withdrawForm.submit()}
|
||||||
|
>
|
||||||
|
<Form form={withdrawForm} layout="vertical" onFinish={submitWithdraw}>
|
||||||
|
{financeConfig?.withdraw.instructions ? (
|
||||||
|
<Alert
|
||||||
|
showIcon
|
||||||
|
type="info"
|
||||||
|
message={financeConfig.withdraw.instructions}
|
||||||
|
style={{ marginBottom: 16 }}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
<Alert
|
||||||
|
showIcon
|
||||||
|
type="warning"
|
||||||
|
message={`每天最多提现 3 次（支付宝、微信共享次数）；100 元及以下支持微信和支付宝，超过 100 元仅支持支付宝；有押金的工单验收通过后，押金需 ${Number(financeConfig?.depositUnfreezeDays ?? 3)} 天解冻到账后方可提现。`}
|
||||||
|
style={{ marginBottom: 16 }}
|
||||||
|
/>
|
||||||
|
<Descriptions column={1} bordered size="small" style={{ marginBottom: 16 }}>
|
||||||
|
<Descriptions.Item label="提现账户">
|
||||||
|
{formatWithdrawChannel(selectedWithdrawalAccount?.accountChannel || '')} ·{' '}
|
||||||
|
{selectedWithdrawalAccount?.accountName || '-'} ·{' '}
|
||||||
|
{selectedWithdrawalAccount?.accountChannel === 'wechat'
|
||||||
|
? '收款二维码'
|
||||||
|
: selectedWithdrawalAccount?.accountNoMasked || '-'}
|
||||||
|
</Descriptions.Item>
|
||||||
|
</Descriptions>
|
||||||
|
<Form.Item label="可提现余额">
|
||||||
|
<Typography.Text strong>
|
||||||
|
{formatMoney(resolveAvailableForWithdraw(worker, summary))}
|
||||||
|
</Typography.Text>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
label="提现方式"
|
||||||
|
name="accountChannel"
|
||||||
|
rules={[{ required: true, message: '请选择提现方式' }]}
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
options={withdrawalAccounts.map((account) => ({
|
||||||
|
value: account.accountChannel,
|
||||||
|
label:
|
||||||
|
account.accountChannel === 'wechat'
|
||||||
|
? '微信收款 · 收款二维码'
|
||||||
|
: `${formatWithdrawChannel(account.accountChannel)} · ${account.accountNoMasked}`,
|
||||||
|
}))}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
label="提现金额"
|
||||||
|
name="amount"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: '请输入提现金额' },
|
||||||
|
{
|
||||||
|
validator(_, value) {
|
||||||
|
return Number(value || 0) > 100 && selectedWithdrawChannel !== 'alipay'
|
||||||
|
? Promise.reject(
|
||||||
|
new Error('超过 100 元仅支持支付宝提现，请联系客服修改提现信息'),
|
||||||
|
)
|
||||||
|
: Promise.resolve()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<InputNumber min={0.01} step={1} addonAfter="元" className="full-width" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="备注说明" name="note">
|
||||||
|
<Input.TextArea rows={4} placeholder="可补充到账要求、手机号、开户行等说明。" />
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,369 @@
|
|||||||
|
import {
|
||||||
|
BankOutlined,
|
||||||
|
CopyOutlined,
|
||||||
|
CustomerServiceOutlined,
|
||||||
|
GlobalOutlined,
|
||||||
|
LockOutlined,
|
||||||
|
LogoutOutlined,
|
||||||
|
ReloadOutlined,
|
||||||
|
WalletOutlined,
|
||||||
|
} from '@ant-design/icons'
|
||||||
|
import { Alert, Avatar, Button, Progress, Tag } from 'antd'
|
||||||
|
import type { ReactNode } from 'react'
|
||||||
|
|
||||||
|
import type { WorkerLevelProgress, WorkerProfileSummary, WorkerUser } from '@/types/worker-platform'
|
||||||
|
import { formatDateTime } from '@/utils/date-time'
|
||||||
|
|
||||||
|
import {
|
||||||
|
formatMoney,
|
||||||
|
formatWorkerStatus,
|
||||||
|
resolveWorkerInitial,
|
||||||
|
resolveWorkerStatusColor,
|
||||||
|
} from './worker-profile-view-utils'
|
||||||
|
|
||||||
|
type WorkerProfileMobileViewProps = {
|
||||||
|
worker: WorkerUser
|
||||||
|
summary: WorkerProfileSummary | undefined
|
||||||
|
levelProgress: WorkerLevelProgress | null | undefined
|
||||||
|
canUseFinanceActions: boolean
|
||||||
|
needsAlipayQrCode: boolean
|
||||||
|
activeTab: string
|
||||||
|
loading: boolean
|
||||||
|
ledgerRecords: ReactNode
|
||||||
|
requestRecords: ReactNode
|
||||||
|
onActiveTabChange: (tab: string) => void
|
||||||
|
onRefresh: () => void
|
||||||
|
onCopyInviteCode: () => void
|
||||||
|
onRecharge: () => void
|
||||||
|
onWithdraw: () => void
|
||||||
|
onChangePassword: () => void
|
||||||
|
onManageDevices: () => void
|
||||||
|
onContact: () => void
|
||||||
|
onAddAlipayQrCode: () => void
|
||||||
|
onLogout: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WorkerProfileMobileView({
|
||||||
|
worker,
|
||||||
|
summary,
|
||||||
|
levelProgress,
|
||||||
|
canUseFinanceActions,
|
||||||
|
needsAlipayQrCode,
|
||||||
|
activeTab,
|
||||||
|
loading,
|
||||||
|
ledgerRecords,
|
||||||
|
requestRecords,
|
||||||
|
onActiveTabChange,
|
||||||
|
onRefresh,
|
||||||
|
onCopyInviteCode,
|
||||||
|
onRecharge,
|
||||||
|
onWithdraw,
|
||||||
|
onChangePassword,
|
||||||
|
onManageDevices,
|
||||||
|
onContact,
|
||||||
|
onAddAlipayQrCode,
|
||||||
|
onLogout,
|
||||||
|
}: WorkerProfileMobileViewProps) {
|
||||||
|
return (
|
||||||
|
<div className="worker-profile-mobile-page">
|
||||||
|
<div className="worker-profile-mobile-hero">
|
||||||
|
<div className="worker-profile-mobile-user-row">
|
||||||
|
<Avatar size={52} className="worker-profile-mobile-avatar">
|
||||||
|
{resolveWorkerInitial(worker)}
|
||||||
|
</Avatar>
|
||||||
|
<div className="worker-profile-mobile-user-info">
|
||||||
|
<div className="worker-profile-mobile-name-row">
|
||||||
|
<strong className="worker-profile-mobile-name">
|
||||||
|
{worker.displayName || worker.username}
|
||||||
|
</strong>
|
||||||
|
</div>
|
||||||
|
<div className="worker-profile-mobile-tags-row">
|
||||||
|
<span className="worker-profile-mobile-vip-badge">
|
||||||
|
{worker.level?.name || '未分级'}
|
||||||
|
</span>
|
||||||
|
<Tag
|
||||||
|
color={resolveWorkerStatusColor(worker.status)}
|
||||||
|
className="worker-profile-mobile-tag"
|
||||||
|
>
|
||||||
|
{formatWorkerStatus(worker.status)}
|
||||||
|
</Tag>
|
||||||
|
<Tag className="worker-profile-mobile-tag">
|
||||||
|
{worker.workerType === 'internal' ? '内部打手' : '外部打手'}
|
||||||
|
</Tag>
|
||||||
|
</div>
|
||||||
|
<div className="worker-profile-mobile-account-text">
|
||||||
|
账号: {worker.username} {worker.phone ? `· ${worker.phone}` : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
shape="circle"
|
||||||
|
icon={<ReloadOutlined />}
|
||||||
|
className="worker-profile-mobile-refresh-btn"
|
||||||
|
loading={loading}
|
||||||
|
onClick={onRefresh}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="worker-profile-mobile-hero-bottom">
|
||||||
|
<div className="worker-profile-mobile-invite-bar">
|
||||||
|
<span className="worker-profile-mobile-invite-label">我的邀请码:</span>
|
||||||
|
<strong className="worker-profile-mobile-invite-code">
|
||||||
|
{worker.inviteCode || '-'}
|
||||||
|
</strong>
|
||||||
|
{worker.inviteCode ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="worker-profile-mobile-copy-btn"
|
||||||
|
onClick={onCopyInviteCode}
|
||||||
|
>
|
||||||
|
<CopyOutlined /> 复制
|
||||||
|
</button>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{levelProgress && levelProgress.nextThreshold !== null ? (
|
||||||
|
<div className="worker-profile-mobile-level-box">
|
||||||
|
<div className="worker-profile-mobile-level-text">
|
||||||
|
已完成 {summary?.acceptedOrderCount || 0} 单 · 距下一级还需{' '}
|
||||||
|
{Math.max(0, levelProgress.nextThreshold - (summary?.acceptedOrderCount || 0))} 单
|
||||||
|
</div>
|
||||||
|
<Progress
|
||||||
|
percent={levelProgress.progressPercent}
|
||||||
|
size="small"
|
||||||
|
strokeColor={{ '0%': '#f97316', '100%': '#fbbf24' }}
|
||||||
|
showInfo={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="worker-profile-mobile-level-text">
|
||||||
|
已完成 {summary?.acceptedOrderCount || 0} 单 · 当前已是最高等级
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!canUseFinanceActions ? (
|
||||||
|
<Alert
|
||||||
|
showIcon
|
||||||
|
type="warning"
|
||||||
|
message="当前账号尚未通过审核，充值申请、提现申请和接单功能暂不可用。"
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<div className="worker-profile-mobile-wallet-card">
|
||||||
|
<div className="worker-profile-mobile-wallet-top">
|
||||||
|
<div className="worker-profile-mobile-wallet-main">
|
||||||
|
<span className="worker-profile-mobile-wallet-title">可用余额</span>
|
||||||
|
<strong className="worker-profile-mobile-wallet-amount">
|
||||||
|
{formatMoney(worker.wallet.availableAmount)}
|
||||||
|
</strong>
|
||||||
|
</div>
|
||||||
|
<div className="worker-profile-mobile-wallet-actions">
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
size="middle"
|
||||||
|
icon={<WalletOutlined />}
|
||||||
|
disabled={!canUseFinanceActions}
|
||||||
|
className="worker-profile-mobile-recharge-btn"
|
||||||
|
onClick={onRecharge}
|
||||||
|
>
|
||||||
|
充值
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="middle"
|
||||||
|
icon={<BankOutlined />}
|
||||||
|
disabled={!canUseFinanceActions}
|
||||||
|
className="worker-profile-mobile-withdraw-btn"
|
||||||
|
onClick={onWithdraw}
|
||||||
|
>
|
||||||
|
提现
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="worker-profile-mobile-wallet-grid">
|
||||||
|
<MobileWalletItem label="冻结押金" amount={worker.wallet.frozenDepositAmount} />
|
||||||
|
<MobileWalletItem label="待解冻押金" amount={worker.wallet.pendingUnfreezeAmount} />
|
||||||
|
<MobileWalletItem label="累计结算" amount={worker.wallet.totalSettledAmount} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="worker-profile-mobile-tools-card">
|
||||||
|
<MobileTool
|
||||||
|
label="修改密码"
|
||||||
|
icon={<LockOutlined />}
|
||||||
|
color="#3b82f6"
|
||||||
|
background="#eff6ff"
|
||||||
|
onClick={onChangePassword}
|
||||||
|
/>
|
||||||
|
<MobileTool
|
||||||
|
label="登录设备"
|
||||||
|
icon={<GlobalOutlined />}
|
||||||
|
color="#0f766e"
|
||||||
|
background="#f0fdfa"
|
||||||
|
onClick={onManageDevices}
|
||||||
|
/>
|
||||||
|
<MobileTool
|
||||||
|
label="联系客服"
|
||||||
|
icon={<CustomerServiceOutlined />}
|
||||||
|
color="#16a34a"
|
||||||
|
background="#f0fdf4"
|
||||||
|
onClick={onContact}
|
||||||
|
/>
|
||||||
|
<MobileTool
|
||||||
|
label="邀请好友"
|
||||||
|
icon={<CopyOutlined />}
|
||||||
|
color="#d97706"
|
||||||
|
background="#fef3c7"
|
||||||
|
disabled={!worker.inviteCode}
|
||||||
|
onClick={onCopyInviteCode}
|
||||||
|
/>
|
||||||
|
{needsAlipayQrCode ? (
|
||||||
|
<MobileTool
|
||||||
|
label="补充支付宝收款码"
|
||||||
|
icon={<BankOutlined />}
|
||||||
|
color="#7c3aed"
|
||||||
|
background="#f5f3ff"
|
||||||
|
disabled={!canUseFinanceActions}
|
||||||
|
onClick={onAddAlipayQrCode}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
<MobileTool
|
||||||
|
label="退出登录"
|
||||||
|
icon={<LogoutOutlined />}
|
||||||
|
color="#ef4444"
|
||||||
|
background="#fef2f2"
|
||||||
|
onClick={onLogout}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="worker-profile-mobile-sections-card">
|
||||||
|
<div className="worker-profile-mobile-tab-nav">
|
||||||
|
<MobileTab
|
||||||
|
active={activeTab === 'ledger'}
|
||||||
|
label="资金流水"
|
||||||
|
onClick={() => onActiveTabChange('ledger')}
|
||||||
|
/>
|
||||||
|
<MobileTab
|
||||||
|
active={activeTab === 'requests'}
|
||||||
|
label="申请记录"
|
||||||
|
onClick={() => onActiveTabChange('requests')}
|
||||||
|
/>
|
||||||
|
<MobileTab
|
||||||
|
active={activeTab === 'account'}
|
||||||
|
label="账号详情"
|
||||||
|
onClick={() => onActiveTabChange('account')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="worker-profile-mobile-tab-body">
|
||||||
|
{activeTab === 'ledger' ? ledgerRecords : null}
|
||||||
|
{activeTab === 'requests' ? requestRecords : null}
|
||||||
|
{activeTab === 'account' ? (
|
||||||
|
<WorkerProfileMobileAccountDetails worker={worker} summary={summary} />
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function MobileWalletItem({ label, amount }: { label: string; amount: number }) {
|
||||||
|
return (
|
||||||
|
<div className="worker-profile-mobile-wallet-col">
|
||||||
|
<span className="worker-profile-mobile-sub-label">{label}</span>
|
||||||
|
<strong className="worker-profile-mobile-sub-val">{formatMoney(amount)}</strong>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function MobileTool({
|
||||||
|
label,
|
||||||
|
icon,
|
||||||
|
color,
|
||||||
|
background,
|
||||||
|
disabled = false,
|
||||||
|
onClick,
|
||||||
|
}: {
|
||||||
|
label: string
|
||||||
|
icon: ReactNode
|
||||||
|
color: string
|
||||||
|
background: string
|
||||||
|
disabled?: boolean
|
||||||
|
onClick: () => void
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="worker-profile-mobile-tool-item"
|
||||||
|
disabled={disabled}
|
||||||
|
onClick={onClick}
|
||||||
|
>
|
||||||
|
<div className="worker-profile-mobile-tool-icon" style={{ background, color }}>
|
||||||
|
{icon}
|
||||||
|
</div>
|
||||||
|
<span>{label}</span>
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function MobileTab({
|
||||||
|
active,
|
||||||
|
label,
|
||||||
|
onClick,
|
||||||
|
}: {
|
||||||
|
active: boolean
|
||||||
|
label: string
|
||||||
|
onClick: () => void
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`worker-profile-mobile-tab-btn ${active ? 'active' : ''}`}
|
||||||
|
onClick={onClick}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function WorkerProfileMobileAccountDetails({
|
||||||
|
worker,
|
||||||
|
summary,
|
||||||
|
}: {
|
||||||
|
worker: WorkerUser
|
||||||
|
summary: WorkerProfileSummary | undefined
|
||||||
|
}) {
|
||||||
|
const items: Array<[string, ReactNode]> = [
|
||||||
|
['账号', worker.username],
|
||||||
|
['昵称', worker.displayName || '-'],
|
||||||
|
['手机号', worker.phone || '-'],
|
||||||
|
[
|
||||||
|
'账号状态',
|
||||||
|
<Tag key="worker-status" color={resolveWorkerStatusColor(worker.status)}>
|
||||||
|
{formatWorkerStatus(worker.status)}
|
||||||
|
</Tag>,
|
||||||
|
],
|
||||||
|
['当前等级', worker.level?.name || '-'],
|
||||||
|
['免押额度', formatMoney(worker.level?.permissions.depositFreeAmount || 0)],
|
||||||
|
['最大同时接单', `${worker.level?.permissions.maxActiveOrders || 0} 单`],
|
||||||
|
['邀请人', worker.inviter ? worker.inviter.displayName || worker.inviter.username : '-'],
|
||||||
|
['已完成订单', `${summary?.acceptedOrderCount || 0} 单`],
|
||||||
|
['累计充值', formatMoney(worker.wallet.totalCreditedAmount)],
|
||||||
|
['注册时间', formatDateTime(worker.createdAt)],
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="worker-profile-mobile-tab-pane">
|
||||||
|
<div className="worker-profile-mobile-account-list">
|
||||||
|
{items.map(([label, value]) => (
|
||||||
|
<div key={label} className="worker-profile-mobile-account-item">
|
||||||
|
<span className="worker-profile-mobile-acc-label">{label}</span>
|
||||||
|
<span className="worker-profile-mobile-acc-val">{value}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,368 @@
|
|||||||
|
import { ReloadOutlined } from '@ant-design/icons'
|
||||||
|
import { Button, Card, Empty, Pagination, Select, Space, Spin, Table, Tag } from 'antd'
|
||||||
|
|
||||||
|
import type {
|
||||||
|
WorkerFinanceRequest,
|
||||||
|
WorkerListResponse,
|
||||||
|
WorkerWalletLedger,
|
||||||
|
} from '@/types/worker-platform'
|
||||||
|
import type { ApiEnvelope } from '@/lib/http'
|
||||||
|
import { formatDateTime } from '@/utils/date-time'
|
||||||
|
|
||||||
|
import {
|
||||||
|
formatLedgerType,
|
||||||
|
formatMoney,
|
||||||
|
formatRequestStatus,
|
||||||
|
formatRequestType,
|
||||||
|
formatWithdrawChannel,
|
||||||
|
maskAccountNo,
|
||||||
|
renderRechargeRequestSummary,
|
||||||
|
resolveLedgerTagColor,
|
||||||
|
resolveRequestStatusColor,
|
||||||
|
workerFinanceRequestColumns,
|
||||||
|
workerLedgerColumns,
|
||||||
|
} from './worker-profile-view-utils'
|
||||||
|
|
||||||
|
const LEDGER_TYPE_OPTIONS = [
|
||||||
|
{ value: '', label: '全部流水' },
|
||||||
|
{ value: 'manual_credit', label: '人工充值' },
|
||||||
|
{ value: 'withdraw_paid', label: '提现打款' },
|
||||||
|
{ value: 'deposit_freeze', label: '冻结押金' },
|
||||||
|
{ value: 'deposit_release', label: '释放押金' },
|
||||||
|
{ value: 'deposit_pending_unfreeze', label: '押金待解冻' },
|
||||||
|
{ value: 'deposit_unfreeze', label: '押金已解冻' },
|
||||||
|
{ value: 'deposit_deduction', label: '扣除押金' },
|
||||||
|
{ value: 'reward_settlement', label: '结算报酬' },
|
||||||
|
]
|
||||||
|
|
||||||
|
const REQUEST_TYPE_OPTIONS = [
|
||||||
|
{ value: '', label: '全部类型' },
|
||||||
|
{ value: 'recharge', label: '充值申请' },
|
||||||
|
{ value: 'withdraw', label: '提现申请' },
|
||||||
|
]
|
||||||
|
|
||||||
|
const REQUEST_STATUS_OPTIONS = [
|
||||||
|
{ value: '', label: '全部状态' },
|
||||||
|
{ value: 'pending', label: '待处理' },
|
||||||
|
{ value: 'approved', label: '已通过' },
|
||||||
|
{ value: 'rejected', label: '已驳回' },
|
||||||
|
]
|
||||||
|
|
||||||
|
type LedgerRecordsProps = {
|
||||||
|
data: ApiEnvelope<WorkerListResponse<WorkerWalletLedger>> | undefined
|
||||||
|
error: unknown
|
||||||
|
loading: boolean
|
||||||
|
refreshing: boolean
|
||||||
|
ledgerType: string
|
||||||
|
onLedgerTypeChange: (ledgerType: string) => void
|
||||||
|
onReload: () => void
|
||||||
|
page: number
|
||||||
|
pageSize: number
|
||||||
|
onPageChange: (page: number, pageSize: number) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
type RequestRecordsProps = {
|
||||||
|
data: ApiEnvelope<WorkerListResponse<WorkerFinanceRequest>> | undefined
|
||||||
|
error: unknown
|
||||||
|
loading: boolean
|
||||||
|
refreshing: boolean
|
||||||
|
requestType: string
|
||||||
|
requestStatus: string
|
||||||
|
onRequestTypeChange: (requestType: string) => void
|
||||||
|
onRequestStatusChange: (requestStatus: string) => void
|
||||||
|
onReload: () => void
|
||||||
|
page: number
|
||||||
|
pageSize: number
|
||||||
|
onPageChange: (page: number, pageSize: number) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WorkerProfileMobileLedgerRecords({
|
||||||
|
data,
|
||||||
|
loading,
|
||||||
|
refreshing,
|
||||||
|
ledgerType,
|
||||||
|
onLedgerTypeChange,
|
||||||
|
onReload,
|
||||||
|
page,
|
||||||
|
pageSize,
|
||||||
|
onPageChange,
|
||||||
|
}: LedgerRecordsProps) {
|
||||||
|
const items = data?.data.items || []
|
||||||
|
const pagination = data?.data.pagination
|
||||||
|
return (
|
||||||
|
<div className="worker-profile-mobile-tab-pane">
|
||||||
|
<div className="worker-profile-mobile-filter-row">
|
||||||
|
<Select
|
||||||
|
size="small"
|
||||||
|
value={ledgerType}
|
||||||
|
style={{ width: 140 }}
|
||||||
|
options={LEDGER_TYPE_OPTIONS}
|
||||||
|
onChange={onLedgerTypeChange}
|
||||||
|
/>
|
||||||
|
<Button size="small" icon={<ReloadOutlined />} loading={refreshing} onClick={onReload}>
|
||||||
|
刷新
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="worker-profile-mobile-records">
|
||||||
|
{loading ? (
|
||||||
|
<div className="worker-hall-loading">
|
||||||
|
<Spin size="large" />
|
||||||
|
</div>
|
||||||
|
) : items.length === 0 ? (
|
||||||
|
<Empty description="暂无钱包流水" />
|
||||||
|
) : (
|
||||||
|
items.map((row) => (
|
||||||
|
<div key={row.ledgerId} className="worker-profile-record-card">
|
||||||
|
<div className="worker-profile-record-row-head">
|
||||||
|
<Tag color={resolveLedgerTagColor(row.ledgerType)}>
|
||||||
|
{formatLedgerType(row.ledgerType)}
|
||||||
|
</Tag>
|
||||||
|
<strong
|
||||||
|
className={row.amount >= 0 ? 'worker-amount-positive' : 'worker-amount-negative'}
|
||||||
|
style={{ fontSize: 16 }}
|
||||||
|
>
|
||||||
|
{row.amount >= 0 ? '+' : ''}
|
||||||
|
{formatMoney(row.amount)}
|
||||||
|
</strong>
|
||||||
|
</div>
|
||||||
|
<div className="worker-profile-record-row-meta">
|
||||||
|
<span>变动后余额: {formatMoney(row.balanceAfter)}</span>
|
||||||
|
<span>冻结押金: {formatMoney(row.frozenAfter)}</span>
|
||||||
|
</div>
|
||||||
|
{row.note ? <div className="worker-profile-record-note">说明: {row.note}</div> : null}
|
||||||
|
{row.relatedPlatformOrderId ? (
|
||||||
|
<div className="worker-profile-record-sub">订单号 {row.relatedPlatformOrderId}</div>
|
||||||
|
) : null}
|
||||||
|
<div className="worker-profile-record-time">
|
||||||
|
{formatDateTime(String(row.createdAt || ''))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
{(pagination?.total || 0) > 0 ? (
|
||||||
|
<div className="worker-orders-mobile-pagination">
|
||||||
|
<Pagination
|
||||||
|
current={pagination?.page || page}
|
||||||
|
pageSize={pagination?.pageSize || pageSize}
|
||||||
|
total={pagination?.total || 0}
|
||||||
|
simple
|
||||||
|
onChange={onPageChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WorkerProfileMobileRequestRecords({
|
||||||
|
data,
|
||||||
|
loading,
|
||||||
|
refreshing,
|
||||||
|
requestType,
|
||||||
|
requestStatus,
|
||||||
|
onRequestTypeChange,
|
||||||
|
onRequestStatusChange,
|
||||||
|
onReload,
|
||||||
|
page,
|
||||||
|
pageSize,
|
||||||
|
onPageChange,
|
||||||
|
}: RequestRecordsProps) {
|
||||||
|
const items = data?.data.items || []
|
||||||
|
const pagination = data?.data.pagination
|
||||||
|
return (
|
||||||
|
<div className="worker-profile-mobile-tab-pane">
|
||||||
|
<div className="worker-profile-mobile-filter-row">
|
||||||
|
<Space size={6} wrap>
|
||||||
|
<Select
|
||||||
|
size="small"
|
||||||
|
value={requestType}
|
||||||
|
style={{ width: 110 }}
|
||||||
|
options={REQUEST_TYPE_OPTIONS}
|
||||||
|
onChange={onRequestTypeChange}
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
size="small"
|
||||||
|
value={requestStatus}
|
||||||
|
style={{ width: 110 }}
|
||||||
|
options={REQUEST_STATUS_OPTIONS}
|
||||||
|
onChange={onRequestStatusChange}
|
||||||
|
/>
|
||||||
|
<Button size="small" icon={<ReloadOutlined />} loading={refreshing} onClick={onReload} />
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
<div className="worker-profile-mobile-records">
|
||||||
|
{loading ? (
|
||||||
|
<div className="worker-hall-loading">
|
||||||
|
<Spin size="large" />
|
||||||
|
</div>
|
||||||
|
) : items.length === 0 ? (
|
||||||
|
<Empty description="暂无申请记录" />
|
||||||
|
) : (
|
||||||
|
items.map((row) => (
|
||||||
|
<div key={row.requestId} className="worker-profile-record-card">
|
||||||
|
<div className="worker-profile-record-row-head">
|
||||||
|
<Space size={4}>
|
||||||
|
<Tag color={row.requestType === 'withdraw' ? 'green' : 'blue'}>
|
||||||
|
{formatRequestType(row.requestType)}
|
||||||
|
</Tag>
|
||||||
|
<Tag color={resolveRequestStatusColor(row.status)}>
|
||||||
|
{formatRequestStatus(row.status)}
|
||||||
|
</Tag>
|
||||||
|
</Space>
|
||||||
|
<strong style={{ fontSize: 16 }}>{formatMoney(row.amount)}</strong>
|
||||||
|
</div>
|
||||||
|
{row.requestType === 'withdraw' ? (
|
||||||
|
<div className="worker-profile-record-row-meta">
|
||||||
|
收款: {formatWithdrawChannel(row.accountChannel)} / {row.accountName || '-'} (
|
||||||
|
{maskAccountNo(row.accountNo)})
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="worker-profile-record-row-meta">
|
||||||
|
{renderRechargeRequestSummary(row)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{row.note ? <div className="worker-profile-record-note">备注: {row.note}</div> : null}
|
||||||
|
{row.reviewedNote ? (
|
||||||
|
<div className="worker-profile-record-note" style={{ color: '#d97706' }}>
|
||||||
|
审核备注: {row.reviewedNote}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
<div className="worker-profile-record-time">
|
||||||
|
{formatDateTime(String(row.createdAt || ''))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
{(pagination?.total || 0) > 0 ? (
|
||||||
|
<div className="worker-orders-mobile-pagination">
|
||||||
|
<Pagination
|
||||||
|
current={pagination?.page || page}
|
||||||
|
pageSize={pagination?.pageSize || pageSize}
|
||||||
|
total={pagination?.total || 0}
|
||||||
|
simple
|
||||||
|
onChange={onPageChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WorkerProfileDesktopLedgerRecords({
|
||||||
|
data,
|
||||||
|
error,
|
||||||
|
loading,
|
||||||
|
refreshing,
|
||||||
|
ledgerType,
|
||||||
|
onLedgerTypeChange,
|
||||||
|
onReload,
|
||||||
|
page,
|
||||||
|
pageSize,
|
||||||
|
onPageChange,
|
||||||
|
}: LedgerRecordsProps) {
|
||||||
|
const pagination = data?.data.pagination
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
size="small"
|
||||||
|
extra={
|
||||||
|
<Space wrap>
|
||||||
|
<Select
|
||||||
|
value={ledgerType}
|
||||||
|
style={{ width: 170 }}
|
||||||
|
options={LEDGER_TYPE_OPTIONS}
|
||||||
|
onChange={onLedgerTypeChange}
|
||||||
|
/>
|
||||||
|
<Button icon={<ReloadOutlined />} loading={refreshing} onClick={onReload}>
|
||||||
|
刷新
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Table<WorkerWalletLedger>
|
||||||
|
rowKey="ledgerId"
|
||||||
|
size="small"
|
||||||
|
loading={loading}
|
||||||
|
dataSource={data?.data.items || []}
|
||||||
|
columns={workerLedgerColumns}
|
||||||
|
locale={{ emptyText: resolveEmptyText(error, '读取资金流水失败', '暂无钱包流水') }}
|
||||||
|
pagination={{
|
||||||
|
current: pagination?.page || page,
|
||||||
|
pageSize: pagination?.pageSize || pageSize,
|
||||||
|
total: pagination?.total || 0,
|
||||||
|
showSizeChanger: true,
|
||||||
|
pageSizeOptions: [10, 20, 50],
|
||||||
|
showTotal: (total) => `共 ${total} 条`,
|
||||||
|
onChange: onPageChange,
|
||||||
|
}}
|
||||||
|
scroll={{ x: 980 }}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WorkerProfileDesktopRequestRecords({
|
||||||
|
data,
|
||||||
|
error,
|
||||||
|
loading,
|
||||||
|
refreshing,
|
||||||
|
requestType,
|
||||||
|
requestStatus,
|
||||||
|
onRequestTypeChange,
|
||||||
|
onRequestStatusChange,
|
||||||
|
onReload,
|
||||||
|
page,
|
||||||
|
pageSize,
|
||||||
|
onPageChange,
|
||||||
|
}: RequestRecordsProps) {
|
||||||
|
const pagination = data?.data.pagination
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
size="small"
|
||||||
|
extra={
|
||||||
|
<Space wrap>
|
||||||
|
<Select
|
||||||
|
value={requestType}
|
||||||
|
style={{ width: 140 }}
|
||||||
|
options={REQUEST_TYPE_OPTIONS}
|
||||||
|
onChange={onRequestTypeChange}
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
value={requestStatus}
|
||||||
|
style={{ width: 140 }}
|
||||||
|
options={REQUEST_STATUS_OPTIONS}
|
||||||
|
onChange={onRequestStatusChange}
|
||||||
|
/>
|
||||||
|
<Button icon={<ReloadOutlined />} loading={refreshing} onClick={onReload}>
|
||||||
|
刷新
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Table<WorkerFinanceRequest>
|
||||||
|
rowKey="requestId"
|
||||||
|
size="small"
|
||||||
|
loading={loading}
|
||||||
|
dataSource={data?.data.items || []}
|
||||||
|
columns={workerFinanceRequestColumns}
|
||||||
|
locale={{ emptyText: resolveEmptyText(error, '读取申请记录失败', '暂无申请记录') }}
|
||||||
|
pagination={{
|
||||||
|
current: pagination?.page || page,
|
||||||
|
pageSize: pagination?.pageSize || pageSize,
|
||||||
|
total: pagination?.total || 0,
|
||||||
|
showSizeChanger: true,
|
||||||
|
pageSizeOptions: [10, 20, 50],
|
||||||
|
showTotal: (total) => `共 ${total} 条`,
|
||||||
|
onChange: onPageChange,
|
||||||
|
}}
|
||||||
|
scroll={{ x: 980 }}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function resolveEmptyText(error: unknown, fallback: string, emptyText: string) {
|
||||||
|
if (!error) return emptyText
|
||||||
|
return error instanceof Error ? error.message : fallback
|
||||||
|
}
|
||||||
@@ -0,0 +1,259 @@
|
|||||||
|
import { Tag, Typography } from 'antd'
|
||||||
|
import type { TableColumnsType } from 'antd'
|
||||||
|
|
||||||
|
import type {
|
||||||
|
WorkerFinanceRequest,
|
||||||
|
WorkerProfileSummary,
|
||||||
|
WorkerUser,
|
||||||
|
WorkerWalletLedger,
|
||||||
|
} from '@/types/worker-platform'
|
||||||
|
import { formatDateTime } from '@/utils/date-time'
|
||||||
|
|
||||||
|
export function resolveAvailableForWithdraw(
|
||||||
|
worker: WorkerUser | undefined,
|
||||||
|
summary: WorkerProfileSummary | undefined,
|
||||||
|
) {
|
||||||
|
return Math.max(
|
||||||
|
0,
|
||||||
|
Number(worker?.wallet.availableAmount || 0) - Number(summary?.pendingWithdrawAmount || 0),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function resolveWorkerInitial(worker: WorkerUser | undefined) {
|
||||||
|
return String(worker?.displayName || worker?.username || '打')
|
||||||
|
.trim()
|
||||||
|
.slice(0, 1)
|
||||||
|
.toUpperCase()
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatMoney(value: number | undefined) {
|
||||||
|
return `￥${((Number(value || 0) || 0) / 100).toFixed(2)}`
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatWorkerStatus(status: string) {
|
||||||
|
if (status === 'active') return '已启用'
|
||||||
|
if (status === 'pending_review') return '待处理'
|
||||||
|
if (status === 'rejected') return '已冻结'
|
||||||
|
if (status === 'disabled') return '已停用'
|
||||||
|
return status || '-'
|
||||||
|
}
|
||||||
|
|
||||||
|
export function resolveWorkerStatusColor(status: string) {
|
||||||
|
if (status === 'active') return 'green'
|
||||||
|
if (status === 'pending_review') return 'gold'
|
||||||
|
if (status === 'rejected') return 'red'
|
||||||
|
if (status === 'disabled') return 'default'
|
||||||
|
return 'blue'
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatLedgerType(ledgerType: string) {
|
||||||
|
const labels: Record<string, string> = {
|
||||||
|
manual_credit: '人工充值',
|
||||||
|
withdraw_paid: '提现打款',
|
||||||
|
deposit_freeze: '冻结押金',
|
||||||
|
deposit_release: '释放押金',
|
||||||
|
deposit_pending_unfreeze: '押金待解冻',
|
||||||
|
deposit_unfreeze: '押金已解冻',
|
||||||
|
deposit_deduction: '扣除押金',
|
||||||
|
reward_settlement: '结算报酬',
|
||||||
|
}
|
||||||
|
return labels[ledgerType] || ledgerType || '-'
|
||||||
|
}
|
||||||
|
|
||||||
|
export function resolveLedgerTagColor(ledgerType: string) {
|
||||||
|
if (ledgerType === 'manual_credit') return 'blue'
|
||||||
|
if (ledgerType === 'withdraw_paid') return 'purple'
|
||||||
|
if (ledgerType === 'deposit_freeze') return 'gold'
|
||||||
|
if (ledgerType === 'deposit_release') return 'green'
|
||||||
|
if (ledgerType === 'deposit_pending_unfreeze') return 'orange'
|
||||||
|
if (ledgerType === 'deposit_unfreeze') return 'green'
|
||||||
|
if (ledgerType === 'deposit_deduction') return 'red'
|
||||||
|
if (ledgerType === 'reward_settlement') return 'cyan'
|
||||||
|
return 'default'
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatRequestType(requestType: string) {
|
||||||
|
if (requestType === 'recharge') return '充值申请'
|
||||||
|
if (requestType === 'withdraw') return '提现申请'
|
||||||
|
return requestType || '-'
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatRequestStatus(status: string) {
|
||||||
|
const labels: Record<string, string> = {
|
||||||
|
pending: '待处理',
|
||||||
|
approved: '已通过',
|
||||||
|
rejected: '已拒绝',
|
||||||
|
cancelled: '已取消',
|
||||||
|
}
|
||||||
|
return labels[status] || status || '-'
|
||||||
|
}
|
||||||
|
|
||||||
|
export function hasRechargeConfig(
|
||||||
|
financeConfig:
|
||||||
|
| {
|
||||||
|
recharge?: { accountName?: string; accountNo?: string; qrCodeImage?: unknown }
|
||||||
|
}
|
||||||
|
| undefined,
|
||||||
|
) {
|
||||||
|
return Boolean(
|
||||||
|
financeConfig?.recharge?.accountName ||
|
||||||
|
financeConfig?.recharge?.accountNo ||
|
||||||
|
financeConfig?.recharge?.qrCodeImage,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function renderRechargeRequestSummary(row: WorkerFinanceRequest) {
|
||||||
|
const snapshot = getRechargeSnapshot(row)
|
||||||
|
if (!snapshot.channelName && !snapshot.accountName && !snapshot.accountNo) {
|
||||||
|
return <Typography.Text type="secondary">线下充值，等待管理员入账</Typography.Text>
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="cell-stack">
|
||||||
|
<Typography.Text>
|
||||||
|
{[snapshot.channelName, snapshot.accountName].filter(Boolean).join(' / ') || '线下充值'}
|
||||||
|
</Typography.Text>
|
||||||
|
<Typography.Text type="secondary">
|
||||||
|
{snapshot.accountNo ? maskAccountNo(snapshot.accountNo) : '等待管理员核对'}
|
||||||
|
</Typography.Text>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function resolveRequestStatusColor(status: string) {
|
||||||
|
if (status === 'approved') return 'green'
|
||||||
|
if (status === 'pending') return 'gold'
|
||||||
|
if (status === 'rejected') return 'red'
|
||||||
|
if (status === 'cancelled') return 'default'
|
||||||
|
return 'blue'
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatWithdrawChannel(channel: string) {
|
||||||
|
if (channel === 'alipay') return '支付宝'
|
||||||
|
if (channel === 'wechat') return '微信收款'
|
||||||
|
if (channel === 'bank') return '银行卡'
|
||||||
|
return channel || '-'
|
||||||
|
}
|
||||||
|
|
||||||
|
export function maskAccountNo(value: string) {
|
||||||
|
const text = String(value || '').trim()
|
||||||
|
if (!text) return '-'
|
||||||
|
if (text.length <= 8) return text
|
||||||
|
return `${text.slice(0, 4)} **** ${text.slice(-4)}`
|
||||||
|
}
|
||||||
|
|
||||||
|
export const workerLedgerColumns: TableColumnsType<WorkerWalletLedger> = [
|
||||||
|
{
|
||||||
|
title: '时间',
|
||||||
|
dataIndex: 'createdAt',
|
||||||
|
width: 180,
|
||||||
|
render: (value) => formatDateTime(String(value || '')),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '类型',
|
||||||
|
width: 150,
|
||||||
|
render: (_, row) => (
|
||||||
|
<Tag color={resolveLedgerTagColor(row.ledgerType)}>{formatLedgerType(row.ledgerType)}</Tag>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '金额',
|
||||||
|
width: 120,
|
||||||
|
render: (_, row) => (
|
||||||
|
<Typography.Text
|
||||||
|
strong
|
||||||
|
className={row.amount >= 0 ? 'worker-amount-positive' : 'worker-amount-negative'}
|
||||||
|
>
|
||||||
|
{row.amount >= 0 ? '+' : ''}
|
||||||
|
{formatMoney(row.amount)}
|
||||||
|
</Typography.Text>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{ title: '余额', width: 120, render: (_, row) => formatMoney(row.balanceAfter) },
|
||||||
|
{ title: '冻结押金', width: 120, render: (_, row) => formatMoney(row.frozenAfter) },
|
||||||
|
{
|
||||||
|
title: '说明',
|
||||||
|
minWidth: 260,
|
||||||
|
render: (_, row) => (
|
||||||
|
<div className="cell-stack">
|
||||||
|
<Typography.Text>{row.note || '-'}</Typography.Text>
|
||||||
|
{row.relatedPlatformOrderId ? (
|
||||||
|
<Typography.Text type="secondary">订单号 {row.relatedPlatformOrderId}</Typography.Text>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export const workerFinanceRequestColumns: TableColumnsType<WorkerFinanceRequest> = [
|
||||||
|
{
|
||||||
|
title: '申请时间',
|
||||||
|
dataIndex: 'createdAt',
|
||||||
|
width: 180,
|
||||||
|
render: (value) => formatDateTime(String(value || '')),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '类型',
|
||||||
|
width: 120,
|
||||||
|
render: (_, row) => (
|
||||||
|
<Tag color={row.requestType === 'withdraw' ? 'green' : 'blue'}>
|
||||||
|
{formatRequestType(row.requestType)}
|
||||||
|
</Tag>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '金额',
|
||||||
|
width: 120,
|
||||||
|
render: (_, row) => <Typography.Text strong>{formatMoney(row.amount)}</Typography.Text>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '收款信息',
|
||||||
|
minWidth: 220,
|
||||||
|
render: (_, row) =>
|
||||||
|
row.requestType === 'withdraw' ? (
|
||||||
|
<div className="cell-stack">
|
||||||
|
<Typography.Text>
|
||||||
|
{formatWithdrawChannel(row.accountChannel)} / {row.accountName || '-'}
|
||||||
|
</Typography.Text>
|
||||||
|
<Typography.Text type="secondary">{maskAccountNo(row.accountNo)}</Typography.Text>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
renderRechargeRequestSummary(row)
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
width: 130,
|
||||||
|
render: (_, row) => (
|
||||||
|
<Tag color={resolveRequestStatusColor(row.status)}>{formatRequestStatus(row.status)}</Tag>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '备注',
|
||||||
|
minWidth: 260,
|
||||||
|
render: (_, row) => (
|
||||||
|
<div className="cell-stack">
|
||||||
|
<Typography.Text>{row.note || '-'}</Typography.Text>
|
||||||
|
{row.reviewedNote ? (
|
||||||
|
<Typography.Text type="secondary">审核备注：{row.reviewedNote}</Typography.Text>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
function getRechargeSnapshot(row: WorkerFinanceRequest) {
|
||||||
|
const payload = asRecord(row.payload)
|
||||||
|
const financeConfig = asRecord(payload.financeConfig)
|
||||||
|
return {
|
||||||
|
channelName: String(financeConfig.channelName || '').trim(),
|
||||||
|
accountName: String(financeConfig.accountName || '').trim(),
|
||||||
|
accountNo: String(financeConfig.accountNo || '').trim(),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function asRecord(value: unknown): Record<string, unknown> {
|
||||||
|
return value && typeof value === 'object' && !Array.isArray(value)
|
||||||
|
? (value as Record<string, unknown>)
|
||||||
|
: {}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user