feat(worker-platform): 抢单大厅首页新增联系客服胶囊入口并抽象通用客服弹窗组件

1. 抽离打手端通用联系客服弹窗组件 WorkerContactModal,统一维护微信二维码、打手账号/状态/余额回显、一键复制及沟通提示;
2. 抢单大厅移动端顶部状态栏(余额上限右侧首屏黄金位)新增精致微动效【联系客服】胶囊按钮,大幅缩短找客服沟通链路;
3. 抢单大厅桌面端头部操作栏同步补齐【联系客服】按钮,并在个人中心账号弹窗中统一复用 WorkerContactModal;
4. 适配移动端与超窄屏自适应响应式样式,完成前端59项测试与全量打包构建验证。
This commit is contained in:
yml2213
2026-09-21 12:37:38 +08:00
parent a4f6f5ed9b
commit 0df5c9f34e
5 changed files with 210 additions and 54 deletions
@@ -0,0 +1,79 @@
import { Alert, Button, Descriptions, Image, Modal, Space, Typography } from 'antd'
import { formatMoney, formatWorkerStatus } from '@/pages/worker/worker-profile-view-utils'
import type { WorkerFinanceConfig, WorkerUser } from '@/types/worker-platform'
export type WorkerContactModalProps = {
open: boolean
onClose: () => void
isMobile?: boolean
worker?: WorkerUser | null
financeConfig?: WorkerFinanceConfig | null
title?: string
}
export function WorkerContactModal({
open,
onClose,
isMobile = false,
worker,
financeConfig,
title = '联系客服',
}: WorkerContactModalProps) {
return (
<Modal
title={title}
open={open}
width={isMobile ? '92%' : 500}
destroyOnHidden
footer={
<Button type="primary" onClick={onClose}>
我知道了
</Button>
}
onCancel={onClose}
>
<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>
)
}