feat(sidebar): 添加学员联系方式绑定及显示功能

- 新增 contactInfo 状态管理学员手机号和微信号
- 初始化时加载并设置学员联系方式
- 绑定成功后更新 contactInfo 状态
- 根据绑定状态动态调整绑定按钮样式和文字
- 已绑定时展示联系方式及提示信息,支持手机号遮挡显示
- 修改绑定弹窗标题文字根据是否绑定变化
This commit is contained in:
jqb 2026-08-13 17:37:57 +08:00
parent 9bf4291586
commit ac476c1889

View File

@ -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 }}>
绑定后运营可通过手机号或微信号查询该学员的每日总结 绑定后运营可通过手机号或微信号查询该学员的每日总结