feat(worker-platform): 抢单大厅首页新增联系客服胶囊入口并抽象通用客服弹窗组件
1. 抽离打手端通用联系客服弹窗组件 WorkerContactModal,统一维护微信二维码、打手账号/状态/余额回显、一键复制及沟通提示; 2. 抢单大厅移动端顶部状态栏(余额上限右侧首屏黄金位)新增精致微动效【联系客服】胶囊按钮,大幅缩短找客服沟通链路; 3. 抢单大厅桌面端头部操作栏同步补齐【联系客服】按钮,并在个人中心账号弹窗中统一复用 WorkerContactModal; 4. 适配移动端与超窄屏自适应响应式样式,完成前端59项测试与全量打包构建验证。
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user