feat(sidebar): 添加学员联系方式绑定及显示功能
- 新增 contactInfo 状态管理学员手机号和微信号 - 初始化时加载并设置学员联系方式 - 绑定成功后更新 contactInfo 状态 - 根据绑定状态动态调整绑定按钮样式和文字 - 已绑定时展示联系方式及提示信息,支持手机号遮挡显示 - 修改绑定弹窗标题文字根据是否绑定变化
This commit is contained in:
parent
9bf4291586
commit
ac476c1889
@ -76,6 +76,7 @@ function SummaryApp() {
|
|||||||
const [bindPhone, setBindPhone] = useState('')
|
const [bindPhone, setBindPhone] = useState('')
|
||||||
const [bindWechatId, setBindWechatId] = useState('')
|
const [bindWechatId, setBindWechatId] = useState('')
|
||||||
const [bindSaving, setBindSaving] = useState(false)
|
const [bindSaving, setBindSaving] = useState(false)
|
||||||
|
const [contactInfo, setContactInfo] = useState<{ phone: string; wechatId: string } | null>(null)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const init = async () => {
|
const init = async () => {
|
||||||
@ -240,6 +241,7 @@ function SummaryApp() {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
setCustomerId(customerId)
|
setCustomerId(customerId)
|
||||||
|
loadContactInfo(customerId)
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await fetch(
|
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) => {
|
const loadRecentChat = async (customerId: string, staffId: string) => {
|
||||||
try {
|
try {
|
||||||
const res = await noCacheFetch(
|
const res = await noCacheFetch(
|
||||||
@ -323,6 +337,7 @@ function SummaryApp() {
|
|||||||
if (data.code === 0) {
|
if (data.code === 0) {
|
||||||
Toast.show({ content: '绑定成功', icon: 'success' })
|
Toast.show({ content: '绑定成功', icon: 'success' })
|
||||||
setBindVisible(false)
|
setBindVisible(false)
|
||||||
|
setContactInfo({ phone, wechatId })
|
||||||
} else {
|
} else {
|
||||||
Toast.show({ content: data.message || '绑定失败', icon: 'fail' })
|
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) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div style={{ padding: 60, textAlign: 'center' }}>
|
<div style={{ padding: 60, textAlign: 'center' }}>
|
||||||
@ -501,7 +519,17 @@ function SummaryApp() {
|
|||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={openBindPopup}
|
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',
|
padding: '7px 14px',
|
||||||
background: '#e6f4ff',
|
background: '#e6f4ff',
|
||||||
color: '#1677ff',
|
color: '#1677ff',
|
||||||
@ -513,10 +541,31 @@ function SummaryApp() {
|
|||||||
flexShrink: 0
|
flexShrink: 0
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
绑定联系方式
|
{isBound ? '✓ 已绑定 · 修改' : '绑定联系方式'}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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={{
|
<div style={{
|
||||||
background: '#fff',
|
background: '#fff',
|
||||||
@ -623,7 +672,7 @@ function SummaryApp() {
|
|||||||
bodyStyle={{ borderTopLeftRadius: 12, borderTopRightRadius: 12, padding: '20px 16px 32px' }}
|
bodyStyle={{ borderTopLeftRadius: 12, borderTopRightRadius: 12, padding: '20px 16px 32px' }}
|
||||||
>
|
>
|
||||||
<div style={{ fontSize: 16, fontWeight: 600, color: '#333', marginBottom: 4 }}>
|
<div style={{ fontSize: 16, fontWeight: 600, color: '#333', marginBottom: 4 }}>
|
||||||
绑定联系方式
|
{isBound ? '修改联系方式' : '绑定联系方式'}
|
||||||
</div>
|
</div>
|
||||||
<div style={{ fontSize: 12, color: '#999', marginBottom: 20 }}>
|
<div style={{ fontSize: 12, color: '#999', marginBottom: 20 }}>
|
||||||
绑定后运营可通过手机号或微信号查询该学员的每日总结
|
绑定后运营可通过手机号或微信号查询该学员的每日总结
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user