feat(sidebar): 添加学员联系方式绑定及显示功能
- 新增 contactInfo 状态管理学员手机号和微信号 - 初始化时加载并设置学员联系方式 - 绑定成功后更新 contactInfo 状态 - 根据绑定状态动态调整绑定按钮样式和文字 - 已绑定时展示联系方式及提示信息,支持手机号遮挡显示 - 修改绑定弹窗标题文字根据是否绑定变化
This commit is contained in:
parent
9bf4291586
commit
ac476c1889
@ -76,6 +76,7 @@ function SummaryApp() {
|
||||
const [bindPhone, setBindPhone] = useState('')
|
||||
const [bindWechatId, setBindWechatId] = useState('')
|
||||
const [bindSaving, setBindSaving] = useState(false)
|
||||
const [contactInfo, setContactInfo] = useState<{ phone: string; wechatId: string } | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
@ -240,6 +241,7 @@ function SummaryApp() {
|
||||
return
|
||||
}
|
||||
setCustomerId(customerId)
|
||||
loadContactInfo(customerId)
|
||||
|
||||
try {
|
||||
const res = await fetch(
|
||||
@ -272,6 +274,18 @@ function SummaryApp() {
|
||||
}
|
||||
}
|
||||
|
||||
const loadContactInfo = async (cid: string) => {
|
||||
try {
|
||||
const res = await noCacheFetch(`/api/v1/archive/customer/contact?customerId=${encodeURIComponent(cid)}`)
|
||||
const data = await res.json()
|
||||
if (data.code === 0 && data.data) {
|
||||
setContactInfo({ phone: data.data.phone || '', wechatId: data.data.wechatId || '' })
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('加载绑定状态失败:', e)
|
||||
}
|
||||
}
|
||||
|
||||
const loadRecentChat = async (customerId: string, staffId: string) => {
|
||||
try {
|
||||
const res = await noCacheFetch(
|
||||
@ -323,6 +337,7 @@ function SummaryApp() {
|
||||
if (data.code === 0) {
|
||||
Toast.show({ content: '绑定成功', icon: 'success' })
|
||||
setBindVisible(false)
|
||||
setContactInfo({ phone, wechatId })
|
||||
} else {
|
||||
Toast.show({ content: data.message || '绑定失败', icon: 'fail' })
|
||||
}
|
||||
@ -439,6 +454,9 @@ function SummaryApp() {
|
||||
)
|
||||
}
|
||||
|
||||
const isBound = !!(contactInfo && (contactInfo.phone || contactInfo.wechatId))
|
||||
const maskPhone = (p: string) => (p && p.length === 11 ? `${p.slice(0, 3)}****${p.slice(7)}` : p)
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ padding: 60, textAlign: 'center' }}>
|
||||
@ -501,7 +519,17 @@ function SummaryApp() {
|
||||
</div>
|
||||
<button
|
||||
onClick={openBindPopup}
|
||||
style={{
|
||||
style={isBound ? {
|
||||
padding: '7px 14px',
|
||||
background: '#f6ffed',
|
||||
color: '#389e0d',
|
||||
border: '1px solid #b7eb8f',
|
||||
borderRadius: 16,
|
||||
fontSize: 13,
|
||||
fontWeight: 500,
|
||||
cursor: 'pointer',
|
||||
flexShrink: 0
|
||||
} : {
|
||||
padding: '7px 14px',
|
||||
background: '#e6f4ff',
|
||||
color: '#1677ff',
|
||||
@ -513,10 +541,31 @@ function SummaryApp() {
|
||||
flexShrink: 0
|
||||
}}
|
||||
>
|
||||
绑定联系方式
|
||||
{isBound ? '✓ 已绑定 · 修改' : '绑定联系方式'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isBound && contactInfo && (
|
||||
<div style={{
|
||||
background: '#f6ffed',
|
||||
border: '1px solid #b7eb8f',
|
||||
borderRadius: 12,
|
||||
padding: '10px 14px',
|
||||
marginBottom: 14,
|
||||
boxShadow: '0 1px 4px rgba(0,0,0,0.06)',
|
||||
fontSize: 13,
|
||||
color: '#389e0d',
|
||||
lineHeight: 1.6
|
||||
}}>
|
||||
✅ 该学员已绑定联系方式,如需修改请点击右上角按钮
|
||||
<span style={{ color: '#666', fontSize: 12, marginLeft: 6 }}>
|
||||
{contactInfo.phone && `手机:${maskPhone(contactInfo.phone)}`}
|
||||
{contactInfo.phone && contactInfo.wechatId && ' / '}
|
||||
{contactInfo.wechatId && `微信:${contactInfo.wechatId}`}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 立即总结(实时流式) */}
|
||||
<div style={{
|
||||
background: '#fff',
|
||||
@ -623,7 +672,7 @@ function SummaryApp() {
|
||||
bodyStyle={{ borderTopLeftRadius: 12, borderTopRightRadius: 12, padding: '20px 16px 32px' }}
|
||||
>
|
||||
<div style={{ fontSize: 16, fontWeight: 600, color: '#333', marginBottom: 4 }}>
|
||||
绑定联系方式
|
||||
{isBound ? '修改联系方式' : '绑定联系方式'}
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: '#999', marginBottom: 20 }}>
|
||||
绑定后运营可通过手机号或微信号查询该学员的每日总结
|
||||
|
||||
Loading…
Reference in New Issue
Block a user